#kurse.block {

    /* Filter-Buttons in hellem Mint (#ebf4f2) mit Petrol-Schrift.
       Alle Zustände (offen, aktiv, Fokus, ausgewählt) explizit abgedeckt
       und mit #filter verstärkt, damit Theme- oder Bootstrap-Regeln
       nicht wieder auf Schwarz umschalten. */
    #filter .select-title,
    #filter .select-title.show,
    #filter .select-title.active,
    #filter .select-title.selected,
    #filter .select-title:focus,
    #filter .select-title:focus-visible,
    #filter .select-title:active {
        display: block;
        background: #ebf4f2 !important;
        border-color: #ebf4f2 !important;
        color: var(--wp--preset--color--petrol) !important;
        box-shadow: none !important;
        border-radius: var(--wp--custom--border-radius);
        transition: var(--wp--custom--main-trans);
        font-weight: 400;
    }

    #filter .select-title.show {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Hover nur auf Geräten mit Maus, damit der dunkle Zustand
       auf Touch-Geräten nach dem Antippen nicht hängen bleibt */
    @media (hover: hover) {
        #filter .select-title:hover {
            background: var(--wp--preset--color--dark) !important;
            border-color: var(--wp--preset--color--dark) !important;
            color: var(--wp--preset--color--light) !important;
        }
    }

    .select-title::after {
        display: inline-block;
        content: "+";
        border: none;
        opacity: 1;
        right: 1.25em;
    }

    .select-title:hover::after {
        rotate: 180deg;
    }

    .select-wrapper {
        position: relative;
    }

    .select-wrapper label {
        display: block;
        padding: 0.5em 0;
        border-bottom: 1px solid var(--wp--preset--color--petrol);
    }

    .select-wrapper label:last-child {
        border-bottom: none;
    }

    .select-wrapper label input {
        margin: 0 0.5em 0 0;
    }

    .select-wrapper:last-child {
        border-bottom: none;
    }

    /* Aufklappendes Menü: weiss, schwarze Schrift, Petrol-Trennlinien */
    .multiselect-container {
        background: #fff;
        color: #000;
        box-shadow: var(--wp--custom--box-shadow);
        transition: var(--wp--custom--main-trans);
        z-index: 10;
        opacity: 0;
        display: block;
        pointer-events: none;
        width: 100%;
        border-radius: 0;
        border-bottom-left-radius: var(--wp--custom--border-radius);
        border-bottom-right-radius: var(--wp--custom--border-radius);
    }

    .show + .multiselect-container {
        opacity: 1;
        pointer-events: all;
    }

    /* ===== Filterleiste ===== */

    #filter {
        --header-h: 98px;                     /* Höhe des Headers, ggf. anpassen */
        --filter-bg: rgb(255 255 255 / .7);   /* Deckkraft des Milchglas-Bands */

        display: grid;
        /* grid-template-columns: 0.5fr 0.5fr 0.5fr; */
        grid-template-columns: 1fr 1fr;
        gap: 10px var(--wp--preset--spacing--10);

        position: sticky;
        top: calc(var(--topdistance) + var(--header-h));
        z-index: 1000;
        padding-block: var(--wp--preset--spacing--20);
    }

    /* Durchscheinendes Band über die volle Viewport-Breite */
    #filter::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0 calc(50% - 50vw);
        z-index: -1;
        background: var(--filter-bg);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        backdrop-filter: blur(12px) saturate(1.4);
        border-bottom: 1px solid transparent;
        transition: border-color .2s;
    }

    /* Feine Trennlinie, sobald die Leiste klebt (Klasse per JS) */
    #filter.is-stuck::before {
        border-bottom-color: rgb(0 0 0 / .1);
    }

    /* Fallback für Browser ohne backdrop-filter */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        #filter {
            --filter-bg: rgb(255 255 255 / .95);
        }
    }

    #filter .info {
        grid-column: 1 / -1;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 0.5em;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
		font-size:14px;
    }

    /* Leere Info-Zeile nimmt keinen Platz ein */
    #filter .info:empty {
        display: none;
    }

    #filter .info div {
        width: 100%;
    }

    /* Ausgewählte Filter-Tags: weiss mit Petrol-Schrift, kompakt */
    #filter .info span {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        background: #fff;
        color: var(--wp--preset--color--petrol);
        border: 1px solid var(--wp--preset--color--petrol);
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.2;
        padding: 0.2em 0.5em 0.2em 0.75em;
        border-radius: var(--wp--custom--border-radius);
        transition: var(--wp--custom--main-trans);
    }

    #filter .info span::after {
        content: "\00d7";
        display: inline-grid;
        place-items: center;
        width: 1.1em;
        height: 1.1em;
        border-radius: 50%;
        background: var(--wp--preset--color--petrol);
        color: #fff;
        line-height: 1;
        transition: var(--wp--custom--main-trans);
    }

    #filter .info span:hover {
        background: var(--wp--preset--color--dark);
        border-color: var(--wp--preset--color--dark);
        color: var(--wp--preset--color--light);
    }

    #filter .info span:hover::after {
        background: var(--wp--preset--color--light);
        color: var(--wp--preset--color--dark);
    }

    @media screen and (max-width: 767px) {
        #filter {
            grid-template-columns: 1fr;
            position: relative;
            top: auto;
            z-index: 10;
            padding-block: 0;
			padding-bottom: 20px;
        }

        #filter::before {
            display: none;
        }
    }

    /* ===== Kurskarten ===== */

    .kurswrapper {
        display: flex;
        gap: var(--wp--preset--spacing--30);
    }

    article {
        overflow: hidden;
        border-radius: var(--wp--custom--border-radius);
        background: var(--wp--preset--color--mid);
        transition: var(--wp--custom--main-trans);

        --tint: rgba(0, 0, 0, .5);

        figure {
            margin: 0;
            aspect-ratio: 4 / 3;
            height: auto;
            width: 100%;
            overflow: hidden;
            position: relative;

            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
                transition: var(--wp--custom--main-trans);
            }

            figcaption {
                position: absolute;
                top: 1rem;
                left: 1rem;
                color: var(--wp--preset--color--light);
                backdrop-filter: blur(10px);
                background-color: var(--tint);
                padding: .5rem;
                border-top-right-radius: var(--wp--custom--border-radius);
                border-bottom-right-radius: var(--wp--custom--border-radius);
                font-size: .8rem;
            }
        }

        &[data-abschluss="zertifikat"] {
            --tint: rgb(from var(--wp--preset--color--zertifikat-dark) r g b / 0.8);
        }

        &[data-abschluss="cas"] {
            --tint: rgb(from var(--wp--preset--color--cas-dark) r g b / 0.8);
        }

        &[data-abschluss="diplom"] {
            --tint: rgb(from var(--wp--preset--color--diplom-dark) r g b / 0.8);
        }

        &[data-abschluss="fachausweis"] {
            --tint: rgb(from var(--wp--preset--color--fachausweis-dark) r g b / 0.8);
        }

        .content {
            padding: var(--wp--preset--spacing--10);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            @media screen and (max-width: 767px) {
                height: auto !important;
            }

            h3 {
                margin-bottom: 1rem;
                text-wrap: balance;
            }

            .meta {
                display: flex;
                gap: var(--wp--preset--spacing--10);
                font-size: 1rem;

                border-bottom: var(--wp--custom--main-border);
                border-color: var(--wp--preset--color--dark);
                padding-top: .5rem;
                padding-bottom: .5rem;

                &:last-of-type {
                    border-bottom: 0px;
                    margin-bottom: 1rem;
                }

                span {

                    &:first-of-type {
                        min-width: 15ch;
                    }

                    p {
                        margin-bottom: 0;
                    }
                }
            }

            a {
                display: block;
                height: auto;
                font-size: 1rem;
                margin-bottom: 1rem;
                background: var(--wp--preset--color--petrol) !important;
                border-color: var(--wp--preset--color--petrol) !important;
                color: var(--wp--preset--color--light) !important;

                &:hover {
                    background: var(--wp--preset--color--dark) !important;
                    border-color: var(--wp--preset--color--dark) !important;
                }

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }

        &:hover {
            box-shadow: var(--wp--custom--box-shadow);

            figure {
                img {
                    scale: 1.1;
                }
            }
        }
    }
}

/* Verhindert horizontalen Scroll durch das 100vw-Band (clip statt hidden, damit sticky funktioniert) */
body {
    overflow-x: clip;
}