/*
 * KerVita – mitlaufende Filter der Stellenübersicht (/alle-jobs und „Jobs in …“)
 *
 * Ergaenzt den Filter-Baustein der Jobs, ohne ihn zu ersetzen. Alle Regeln greifen erst, wenn
 * files/js/filter-mitlauf.js den Baustein mit .kvf-bereit markiert hat. Faellt das Skript aus,
 * sehen Besucher die Filter wie bisher.
 *
 * Aufbau der Website: .job-filter-wrapper > form > div > .widget (Standort, Beschaeftigungsart)
 * und daneben .job-area-filter (Bereich). Bis 1023 px stapelt die Website die Filter.
 */

/* Diese Teile gibt es nur durch das Skript. Ohne .kvf-bereit bleiben sie immer unsichtbar. */
.kvf-icon,
.kvf-kurz,
.kvf-titel,
.kvf-fuss,
.kvf-zahl { display: none; }

.kvf-platz { height: 0; }

/* Die Website dreht beim Oeffnen jedes SVG im Knopf (gemeint ist der Pfeil). Das Icon bleibt stehen;
   !important, weil die Regel der Website spezifischer ist und nicht geaendert werden soll. */
.kvf-bereit .job-filter-wrapper .kvf-icon svg { transform: none !important; transition: none !important; }

/* ---------- Festgesetzte Leiste (alle Breiten) ---------- */

.kvf-bereit .job-filter-wrapper.kvf-fest {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 900;
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 10px max(24px, calc((100% - 930px) / 2)); /* Prozent statt vw: ohne Breite der Bildlaufleiste */
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #D3E3CE;
}

.kvf-bereit .kvf-fest .filter-btn,
.kvf-bereit .kvf-fest .job-area-filter__select-btn {
    box-sizing: border-box;
    height: auto;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.kvf-bereit .job-filter-wrapper.kvf-fest .checkbox_container,
.kvf-bereit .job-filter-wrapper.kvf-fest .job-area-filter__select-content { top: 100%; }

.kvf-bereit .kvf-fest .kvf-zahl {
    display: block;
    order: 9;
    flex: none;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: nowrap;
    color: #5E5E5D;
}

.kvf-bereit .kvf-zahl strong { font-weight: 700; }

/* ---------- Bis 1023 px: eine Zeile mit Icon-Knoepfen statt gestapelter Filter ---------- */

@media (max-width: 1023px) {
    .kvf-bereit .job-filter-wrapper {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        /* Gleich breit, solange das laengste Wort („Beschäftigung“) hineinpasst; sonst bekommt es den Platz. */
        grid-auto-columns: minmax(min-content, 1fr);
        gap: 8px;
    }

    /* Formular und sein Rahmen treten zurueck, damit alle Filter in derselben Zeile liegen. */
    .kvf-bereit .job-filter-wrapper form,
    .kvf-bereit .job-filter-wrapper form > div { display: contents; }

    .kvf-bereit .job-filter-wrapper .widget { margin: 0; min-width: 0; }
    .kvf-bereit .kvf-standort { order: 1; }
    .kvf-bereit .kvf-art { order: 2; }
    .kvf-bereit .job-area-filter { order: 3; width: auto; min-width: 0; }

    .kvf-bereit .filter-container,
    .kvf-bereit .job-area-filter { position: static; }

    /* Mit .job-filter-wrapper im Selektor, weil die Website die Ausrichtung der Knoepfe sonst ueberstimmt. */
    .kvf-bereit .job-filter-wrapper .filter-btn,
    .kvf-bereit .job-filter-wrapper .job-area-filter__select-btn {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        height: auto;
        min-height: 64px;
        padding: 8px 4px;
        border-radius: 16px;
    }

    .kvf-bereit .filter-btn > svg,
    .kvf-bereit .job-area-filter__select-btn > svg { display: none; }

    .kvf-bereit .filter-container.open .filter-btn,
    .kvf-bereit .job-area-filter.open .job-area-filter__select-btn {
        border-radius: 16px;
        outline: 2px solid #9B2252;
        outline-offset: -2px;
    }


    .kvf-bereit .kvf-icon { display: block; line-height: 0; color: #5E5E5D; }
    .kvf-bereit .kvf-lang { display: none; }
    .kvf-bereit .kvf-kurz { display: inline; }

    .kvf-bereit .filter-btn-content,
    .kvf-bereit .job-area-filter__select-btn-content { display: block; }

    .kvf-bereit .filter-btn-content p,
    .kvf-bereit .job-area-filter__select-btn-content p {
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        color: #5E5E5D;
    }

    .kvf-bereit .job-filter-wrapper .selected-count {
        position: absolute;
        top: 6px;
        right: 8px;
        box-sizing: border-box;
        width: auto;
        min-width: 20px;
        height: 20px;
        margin: 0;
        padding: 0 5px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 20px;
        align-items: center;
        justify-content: center;
    }

    /* Auswahl ueber die ganze Breite direkt unter der Zeile. */
    .kvf-bereit .job-filter-wrapper .checkbox_container,
    .kvf-bereit .job-filter-wrapper .job-area-filter__select-content {
        box-sizing: border-box;
        left: 32px;
        right: 32px;
        top: 100%;
        width: auto;
        max-width: none;
        max-height: 60vh;
        margin-top: 8px;
        overflow-y: auto;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    }

    .kvf-bereit .checkbox_container > span { display: flex; align-items: center; min-height: 44px; }

    .kvf-bereit .kvf-titel {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: #5E5E5D;
    }

    .kvf-bereit .kvf-fuss {
        position: sticky;
        bottom: -16px;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin: 12px 0 -16px;
        padding: 8px 0 16px;
        background: #EDF8E9;
    }

    .kvf-bereit .kvf-zu {
        min-height: 44px;
        padding: 8px 20px;
        border: 0;
        border-radius: 999px;
        background: #9B2252;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
        cursor: pointer;
    }

    .kvf-bereit .kvf-zu:hover { background: #7C1A41; }
    .kvf-bereit .kvf-zu:focus-visible { outline: 3px solid #5E5E5D; outline-offset: 3px; }

    /* Festgesetzt: flache Zeile, das Wort bleibt nur fuer Vorlese-Programme. */
    .kvf-bereit .job-filter-wrapper.kvf-fest {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
    }

    .kvf-bereit .kvf-fest .widget,
    .kvf-bereit .kvf-fest .job-area-filter { flex: 1 1 0; }

    .kvf-bereit .job-filter-wrapper.kvf-fest .filter-btn,
    .kvf-bereit .job-filter-wrapper.kvf-fest .job-area-filter__select-btn {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        min-height: 44px;
        padding: 4px;
        border-radius: 999px;
    }

    .kvf-bereit .kvf-fest .filter-btn-content,
    .kvf-bereit .kvf-fest .job-area-filter__select-btn-content { display: flex; align-items: center; }

    .kvf-bereit .kvf-fest .filter-btn-content p,
    .kvf-bereit .kvf-fest .job-area-filter__select-btn-content p {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .kvf-bereit .job-filter-wrapper.kvf-fest .selected-count { position: static; margin-left: 6px; }

    .kvf-bereit .kvf-fest .filter-container.open .filter-btn,
    .kvf-bereit .kvf-fest.job-filter-wrapper .job-area-filter.open .job-area-filter__select-btn { border-radius: 999px; }

    .kvf-bereit .job-filter-wrapper.kvf-fest .checkbox_container,
    .kvf-bereit .job-filter-wrapper.kvf-fest .job-area-filter__select-content { left: 16px; right: 16px; margin-top: 0; }

    .kvf-bereit .kvf-fest .kvf-zahl { margin-left: 4px; font-size: 14px; }
}

/* Ab 600 px ist in der festgesetzten Zeile Platz fuer das Wort neben dem Icon. */
@media (min-width: 600px) and (max-width: 1023px) {
    .kvf-bereit .job-filter-wrapper.kvf-fest .filter-btn,
    .kvf-bereit .job-filter-wrapper.kvf-fest .job-area-filter__select-btn { padding: 4px 16px; }

    .kvf-bereit .kvf-fest .filter-btn-content p,
    .kvf-bereit .kvf-fest .job-area-filter__select-btn-content p {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        margin-left: 6px;
    }
}

@media (max-width: 340px) {
    .kvf-bereit .filter-btn-content p,
    .kvf-bereit .job-area-filter__select-btn-content p { font-size: 13px; }
}