/**
 * Team Filter Grid — Filterspalte, Kopfzeile und Blättern
 *
 * Karte, Raster und Modal liegen in person-card.css (gemeinsame Komponente).
 * Farben, Größen, Abstände und Typografie kommen aus den Elementor-Controls;
 * hier steht nur, was die Struktur zusammenhält.
 *
 * Breakpoints (Elementor-Kit): 767 px mobil, 1024 px Tablet.
 * Ab 1025 px steht die Filterspalte links, darunter wird sie zur Schublade.
 */

.bew-team-filter-grid {
    width: 100%;
}


/* =========================================
   BUTTON-RESET

   hello-elementor/assets/css/reset.css gibt jedem <button> einen pinken
   Rahmen (#c36), 3px Radius und beim Hover einen pinken Hintergrund.
   Der Hover-Selektor dort ist `button:hover` – eine einzelne Klasse
   reicht dagegen nicht, deshalb hier durchgehend zwei Klassen.

   Betroffen sind nur die schmucklosen Buttons. Filter-Buttons,
   Reset, „Mehr laden“ und der Mobil-Filterbutton haben eigene
   Elementor-Controls und überschreiben den Reset ohnehin.
   ========================================= */

.bew-team-filter-grid .bew-tfg-filter-group__title,
.bew-team-filter-grid .bew-tfg-more,
.bew-team-filter-grid .bew-tfg-page,
.bew-team-filter-grid .bew-tfg-drawer-close,
.bew-team-filter-grid .bew-tfg-filter-group__title:hover,
.bew-team-filter-grid .bew-tfg-more:hover,
.bew-team-filter-grid .bew-tfg-page:hover,
.bew-team-filter-grid .bew-tfg-drawer-close:hover {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    white-space: normal;
}


/* =========================================
   ZWEISPALTIGES GRUNDGERÜST
   ========================================= */

.bew-tfg-layout {
    --bew-tfg-sidebar-width: 300px;
    --bew-tfg-sidebar-gap: 48px;

    display: grid;
    grid-template-columns: var(--bew-tfg-sidebar-width) minmax(0, 1fr);
    gap: var(--bew-tfg-sidebar-gap);
    align-items: start;
}

/* Ohne Filter bleibt nur die Ergebnisspalte übrig. */
.bew-team-filter-grid--no-filters .bew-tfg-layout {
    grid-template-columns: minmax(0, 1fr);
}

.bew-tfg-results {
    min-width: 0;
}


/* =========================================
   FILTERSPALTE
   ========================================= */

.bew-tfg-sidebar {
    --bew-tfg-sticky-top: 120px;
    --bew-tfg-drawer-bg: #fff;
    --bew-tfg-divider-width: 1px;
    --bew-tfg-divider-color: #e4e8f0;

    display: flex;
    flex-direction: column;
    min-width: 0;

    /* Die Linie liegt mittig im Spalt: die Sidebar ragt mit halbem Abstand
       hinein, die andere Hälfte bleibt als Luft zur Ergebnisspalte stehen.
       Sonst klebte die Kopfzeile („19 Ergebnisse“) direkt an der Linie. */
    padding-right: calc(var(--bew-tfg-sidebar-gap, 48px) / 2);
    margin-right: calc(var(--bew-tfg-sidebar-gap, 48px) / -2);
    border-right: var(--bew-tfg-divider-width) solid var(--bew-tfg-divider-color);
}

.bew-tfg--sticky .bew-tfg-sidebar {
    position: sticky;
    top: var(--bew-tfg-sticky-top);
    max-height: calc(100vh - var(--bew-tfg-sticky-top) - 24px);
}

.bew-tfg-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Der Schließen-Knopf gehört zur Schublade und taucht erst mobil auf. */
.bew-tfg-drawer-close {
    display: none;
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 30px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

/* Scrollt nur die Filterliste, Kopf und Fuß bleiben stehen.
   overflow-x muss ausdrücklich gesetzt werden: sobald eine Achse nicht mehr
   „visible" ist, macht der Browser die andere automatisch scrollbar. Ohne die
   Zeile schob ein einziger zu breiter Filter-Button die ganze Liste seitwärts,
   und in der mobilen Schublade standen die Überschriften halb außerhalb. */
.bew-tfg-sidebar__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.bew-tfg-filter-group__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

/* Nicht einklappbare Überschrift: kein Zeiger, kein Chevron. */
.bew-tfg-filter-group__title--plain {
    cursor: default;
    display: block;
}

.bew-tfg-filter-group__chevron {
    flex: 0 0 auto;
    line-height: 0;
    transition: transform 0.25s ease;
}

.bew-tfg-filter-group__chevron svg {
    width: 16px;
    height: 16px;
    display: block;
}

.bew-tfg-filter-group.is-collapsed .bew-tfg-filter-group__chevron {
    transform: rotate(-90deg);
}

.bew-tfg-filter-group.is-collapsed .bew-tfg-filter-group__body {
    display: none;
}

.bew-tfg-filter-group__buttons {
    display: flex;
    flex-wrap: wrap;
}


/* =========================================
   FILTER-BUTTONS
   ========================================= */

.bew-tfg-filter-btn {
    /* Schräge Kante rechts – dieselbe Richtung wie beim advotec-Button
       (.slanted-button) und bei den Schlagwort-Badges: oben rechts voll,
       unten rechts eingezogen. Wert kommt aus dem Control „Schräge",
       der Fallback hier hält die Optik auch ohne regeneriertes Elementor-CSS. */
    --bew-tfg-slant: 10px;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;

    /* Lange Bezeichnungen wie „Fachanwältin für gewerblichen Rechtsschutz"
       sind breiter als die 300 px schmale Filterspalte. Sie brechen deshalb
       um, statt die Spalte zu sprengen; overflow-wrap fängt zusätzlich
       Einzelwörter ohne Leerzeichen ab (Technische Gebiete mit Schrägstrich). */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    border-style: solid;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--bew-tfg-slant)) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--bew-tfg-slant)) 100%, 0 100%);
    will-change: auto;
}

/* Die Schräge beschneidet auch den Fokusring, deshalb zusätzlich ein
   Ring nach innen – der bleibt innerhalb der Clip-Fläche sichtbar. */
.bew-tfg-filter-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px currentColor;
}

.bew-tfg-filter-btn__chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    opacity: 0.75;
}

/* Über der Grenze aus „Sichtbare Buttons je Gruppe“ – bis „Mehr anzeigen“. */
.bew-tfg-filter-btn.is-overflow {
    display: none;
}

.bew-tfg-filter-group.is-expanded .bew-tfg-filter-btn.is-overflow {
    display: inline-flex;
}

.bew-tfg-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bew-tfg-more__chevron {
    line-height: 0;
    transition: transform 0.25s ease;
}

.bew-tfg-more__chevron svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Nur eine der beiden Beschriftungen ist jeweils sichtbar. */
.bew-tfg-more__label--less,
.bew-tfg-filter-group.is-expanded .bew-tfg-more__label {
    display: none;
}

.bew-tfg-filter-group.is-expanded .bew-tfg-more__label--less {
    display: inline;
}

.bew-tfg-filter-group.is-expanded .bew-tfg-more__chevron {
    transform: rotate(180deg);
}


/* =========================================
   FUSSZEILE DER FILTERSPALTE
   ========================================= */

.bew-tfg-filter-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.bew-tfg-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-width: 0;
    border-style: solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bew-tfg-reset-btn__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.bew-tfg-result-count__num {
    font-weight: 700;
}


/* =========================================
   KOPFZEILE ÜBER DEM RASTER
   ========================================= */

.bew-tfg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    border-bottom-width: 0;
    border-bottom-style: solid;
    border-bottom-color: #e4e8f0;
}

.bew-tfg-sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bew-tfg-sort__select {
    /* Eigener Pfeil statt System-Widget, damit das Feld in beiden
       Browsern gleich aussieht. */
    -webkit-appearance: none;
    appearance: none;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    line-height: 1.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
}


/* =========================================
   BLÄTTERN
   ========================================= */

.bew-tfg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* display:flex würde das native [hidden] überstimmen. */
.bew-tfg-pagination[hidden],
.bew-tfg-loadmore[hidden],
.bew-tfg-no-results[hidden] {
    display: none;
}

.bew-tfg-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bew-tfg-page[disabled] {
    opacity: 0.35;
    cursor: default;
}

.bew-tfg-page--gap {
    cursor: default;
    pointer-events: none;
}

.bew-tfg-page svg {
    width: 18px;
    height: 18px;
}

.bew-tfg-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bew-tfg-loadmore__icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}


/* =========================================
   MOBIL-LEISTE UND SCHUBLADE

   Die Mobilleiste (Zähler + „Filter & Sortierung“) ist am Desktop aus,
   die Kopfzeile über dem Raster dafür mobil. So steht der Zähler immer
   genau einmal sichtbar im Layout.
   ========================================= */

.bew-tfg-mobilebar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.bew-tfg-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bew-tfg-drawer-toggle__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Die Sortierung steht mobil in der Schublade, am Desktop in der Kopfzeile. */
.bew-tfg-filter-group--sort {
    display: none;
}

.bew-tfg-filter-group--sort .bew-tfg-sort__select {
    width: 100%;
}

/* Der Backdrop darf am Desktop keine Rasterzelle belegen. */
.bew-tfg-backdrop {
    display: none;
}

body.bew-tfg-drawer-open {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .bew-tfg-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bew-tfg-mobilebar {
        display: flex;
    }

    /* Kopfzeile und Fuß-Zähler wären mobil doppelt – die Mobilleiste zeigt sie. */
    .bew-tfg-toolbar,
    .bew-tfg-filter-actions .bew-tfg-result-count {
        display: none;
    }

    .bew-tfg-filter-group--sort {
        display: block;
    }

    .bew-tfg-drawer-close {
        display: block;
    }

    .bew-tfg-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .bew-team-filter-grid.is-drawer-open .bew-tfg-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .bew-tfg-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 99991;
        width: min(400px, 88vw);
        max-height: none;
        margin: 0;
        padding: 24px 20px;
        background: var(--bew-tfg-drawer-bg, #fff);
        border-right: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }

    .bew-team-filter-grid.is-drawer-open .bew-tfg-sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    /* Sticky darf in der Schublade nicht gelten – auch die Höhenbegrenzung
       aus der Desktop-Regel muss zurückgenommen werden. */
    .bew-tfg--sticky .bew-tfg-sidebar {
        position: fixed;
        top: 0;
        max-height: none;
    }

    .bew-tfg-filter-actions {
        margin-top: 16px;
    }

    .bew-tfg-reset-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   KEINE TREFFER
   ========================================= */

.bew-tfg-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 16px;
}