:root {
    --kurssuche-nav-offset: 224px;
}

.kurssuche-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--16);
    max-width: 1024px;
}

.kurssuche-hero__title {
    margin: 0;
    font-size: 96px;
    color: var(--wp--preset--color--foreground);
}

.kurssuche-hero__subline {
    margin: 0;
    max-width: 560px;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-size: var(--wp--preset--font-size--text-medium);
    font-weight: 500;
    line-height: 1.5;
    color: var(--wp--preset--color--foreground);
}

.kurssuche-search {
    display: grid;
    grid-template-columns: minmax(280px, 3fr) minmax(0, 9fr);
    align-items: start;
    gap: var(--wp--preset--spacing--64);
    background-color: var(--wp--preset--color--saphir-500);
    padding: var(--wp--preset--spacing--120) var(--wp--preset--spacing--64);
    /* Blaue Flaeche ueber die volle Breite, Inhalt hoechstens 1312px breit. */
    padding-inline: max(var(--wp--preset--spacing--64), (100% - 1312px) / 2);
}

@media (max-width: 1024px) {
    .kurssuche-search {
        grid-template-columns: 1fr;
    }

    .kurssuche-filters,
    .kurssuche-search__results {
        min-width: 0;
    }
}

.kurssuche-filters {
    position: sticky;
    top: var(--kurssuche-nav-offset);
    background-color: var(--wp--preset--color--saphir-600);
    padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--20);
}

.kurssuche-filters__toggle {
    display: none;
}

.kurssuche-filters__body {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--24);
}

.kurssuche-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--8);
}

.kurssuche-filters__group-label {
    margin: 0;
    font-family: var(--wp--preset--font-family--author), serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--wp--preset--color--schnee-base);
}

.kurssuche-filters__search-input {
    box-sizing: border-box;
    width: 100%;
    border: none;
    padding: var(--wp--preset--spacing--12);
    background-color: var(--wp--preset--color--schnee-white);
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 900;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--karbon);
}

.kurssuche-filters__search-input::placeholder {
    font-weight: 400;
    color: rgba(34, 34, 34, 0.6);
}

.kurssuche-filters__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    cursor: pointer;
    background-color: var(--wp--preset--color--feuer-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.586 0.586 22.828 22.828'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.17172 12.0002 0.585938 20.5859l2.828422 2.8285 8.58584 -8.5858 8.5857 8.5858 2.8285 -2.8285 -8.5858 -8.5857 8.5858 -8.58584L20.5859 0.585938 12.0002 9.17172 3.41436 0.585938 0.585938 3.41436 9.17172 12.0002Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.586 0.586 22.828 22.828'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.17172 12.0002 0.585938 20.5859l2.828422 2.8285 8.58584 -8.5858 8.5857 8.5858 2.8285 -2.8285 -8.5858 -8.5857 8.5858 -8.58584L20.5859 0.585938 12.0002 9.17172 3.41436 0.585938 0.585938 3.41436 9.17172 12.0002Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.kurssuche-filters__options {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1px;
}

.kurssuche-filters__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    width: 100%;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--schnee-white);
}

.kurssuche-filters__checkbox-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.kurssuche-filters__checkbox {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background-color: rgba(248, 248, 248, 0.1);
    border: 1px solid rgba(248, 248, 248, 0.6);
}

.kurssuche-filters__checkbox-input:checked ~ .kurssuche-filters__checkbox {
    background-color: var(--wp--preset--color--schnee-white);
    border-color: var(--wp--preset--color--schnee-white);
}

.kurssuche-filters__checkbox-input:focus-visible ~ .kurssuche-filters__checkbox {
    outline: 2px solid var(--wp--preset--color--schnee-white);
    outline-offset: 2px;
}

.kurssuche-filters__checkbox::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 8.65px;
    background-color: var(--wp--preset--color--secondary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.243 1.756 23.529 20.749'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.7722 4.24328 9.27164 22.5045l-9.028476 -9.096L3.0821 10.5906l5.85677 5.9006L20.6397 1.75586l3.1325 2.48742Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.243 1.756 23.529 20.749'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.7722 4.24328 9.27164 22.5045l-9.028476 -9.096L3.0821 10.5906l5.85677 5.9006L20.6397 1.75586l3.1325 2.48742Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
}

.kurssuche-filters__checkbox-input:checked ~ .kurssuche-filters__checkbox::before {
    transform: scale(1);
}

.kurssuche-filters__actions {
    display: flex;
    align-items: center;
}

.kurssuche-filters__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--schnee-white);
    white-space: nowrap;
}

.kurssuche-filters__reset-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--wp--preset--color--schnee-base);
}

.kurssuche-search__results {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--32);
}

.kurssuche-search__loading, .kurssuche-search__error{
    color: var(--wp--preset--color--schnee-base);
}

.kurs-card {
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--schnee-white);
    padding: var(--wp--preset--spacing--32);
    min-width: 0;
}

.kurs-card__bottom {
    margin-top: var(--wp--preset--spacing--32);
}

.kurs-card__top,
.kurs-card__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--16);
}

.kurs-card__badges,
.kurs-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
}

.kurs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    padding: 4px 18px 6px;
    border-radius: 9999px;
    border: 1px solid var(--wp--preset--color--schnee-medium);
    background-color: var(--wp--preset--color--schnee-base);
    color: var(--wp--preset--color--karbon);
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
}

.kurs-badge--available,
.kurs-badge--few,
.kurs-badge--full {
    padding-left: 10px;
}

.kurs-badge--muted {
    border-color: var(--wp--preset--color--schnee-dark);
    background-color: var(--wp--preset--color--schnee-medium);
}

.kurs-badge__dot {
    width: 12px;
    height: 12px;
    margin-top: 2px;
    border-radius: 9999px;
}

.kurs-badge--available .kurs-badge__dot {
    background-color: #4abf40;
}

.kurs-badge--few .kurs-badge__dot {
    background-color: #ffba08;
}

.kurs-badge--full .kurs-badge__dot {
    background-color: #e72a2a;
}

.kurs-card__badge--outline {
    background-color: transparent;
    border-color: var(--wp--preset--color--schnee-dark);
}

.kurs-card__badge--underline {
    border: none;
    color: inherit;
    text-decoration: underline;
    background-color: transparent;
    padding-inline: 0;
    margin-left: 8px;
}

.kurs-card__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kurs-card__badge-icon,
.kurs-card__tag-icon {
    flex-shrink: 0;
}

.kurs-card__favorite {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
}

.kurs-card__favorite-label {
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--wp--preset--color--karbon-40);
    display: flex;
    align-items: center;
    gap: 4px;
}

.kurs-card__favorite-label--added {
    color: var(--wp--preset--color--karbon);
}

.kurs-card__title {
    margin-top: var(--wp--preset--spacing--16);
    margin-bottom: 0;
    font-family: var(--wp--preset--font-family--author), serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--wp--preset--color--karbon);
    min-width: 0;
    overflow-wrap: break-word;
}

.kurs-card__description {
    margin-top: var(--wp--preset--spacing--20);
    margin-bottom: 0;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--karbon);
    white-space: pre-line;
}

.kurs-card__cta {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

.kurs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 926px;
    margin-inline: auto;
    padding: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--72);
    text-align: center;
    background-color: var(--wp--preset--color--schnee-white);
    width: 100%;
}

.kurs-empty__heading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
}

.kurs-empty__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--author), serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--wp--preset--color--karbon);
}

.kurs-empty__text {
    margin: 0;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--karbon);
}

.kurs-empty__icon {
    position: absolute;
    top: -33px;
    right: -34px;
    transform: rotate(10deg);
}

.kurs-empty__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--feuer-500);
}

.kurssuche-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    margin-top: var(--wp--preset--spacing--32);
}

.kurssuche-pagination__button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: none;
    background-color: rgba(248, 248, 248, 0.2);
    color: var(--wp--preset--color--schnee-base);
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 900;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    cursor: pointer;
}

.kurssuche-pagination__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 48px;
    color: var(--wp--preset--color--schnee-base);
    font-family: var(--wp--preset--font-family--satoshi), serif;
    font-weight: 900;
    font-size: var(--wp--preset--font-size--medium);
}

.kurssuche-pagination__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.kurssuche-pagination__button--active {
    background-color: var(--wp--preset--color--schnee-base);
    color: var(--wp--preset--color--saphir-600);
}

@media (max-width: 1024px) {
    :root {
        --kurssuche-nav-offset: 220px;
    }

    .kurssuche-hero__title {
        font-size: 64px;
    }

    .kurssuche-filters {
        position: static;
    }

    .kurssuche-filters__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        font-family: var(--wp--preset--font-family--satoshi), serif;
        font-weight: 700;
        font-size: var(--wp--preset--font-size--medium);
        color: var(--wp--preset--color--schnee-white);
    }

    .kurssuche-filters__toggle:focus-visible {
        outline: 2px solid var(--wp--preset--color--schnee-white);
        outline-offset: 2px;
    }

    .kurssuche-filters__toggle-label {
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--8);
    }

    .kurssuche-filters__toggle-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding-inline: 4px;
        border-radius: 9999px;
        background-color: var(--wp--preset--color--feuer-500);
        color: var(--wp--preset--color--schnee-white);
        font-size: 12px;
        font-weight: 700;
    }

    .kurssuche-filters__toggle-icon {
        transition: transform 0.2s ease;
    }

    .kurssuche-filters:not(.kurssuche-filters--collapsed) .kurssuche-filters__toggle-icon {
        transform: rotate(180deg);
    }

    .kurssuche-filters__body {
        margin-top: var(--wp--preset--spacing--24);
    }

    .kurssuche-filters--collapsed .kurssuche-filters__body {
        display: none;
    }

    /*
     * Trefferkarte Tablet/Mobil (Figma "iPhone 16 & 17 Pro - 1", 349:3598):
     * Badges, Titel, Beschreibung und Tags je eine volle Zeile, darunter
     * Merkliste und CTA rechtsbuendig - nebeneinander, solange Platz ist,
     * sonst untereinander. Top/Bottom loesen sich dafuer auf, die Karte ist
     * eine umbrechende Zeile; Abstaende = row-gap (12px) + margin-top.
     */
    .kurs-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: var(--wp--preset--spacing--12);
        padding: var(--wp--preset--spacing--24);
    }

    .kurs-card__top,
    .kurs-card__bottom {
        display: contents;
    }

    .kurs-card__badges,
    .kurs-card__title,
    .kurs-card__description,
    .kurs-card__tags {
        flex: 0 0 100%;
    }

    .kurs-card__badges {
        order: 1;
    }

    .kurs-card__badges > .kurs-card__badge--outline {
        border-color: var(--wp--preset--color--schnee-medium);
    }

    .kurs-badge {
        line-height: 1.5;
    }

    .kurs-card__dates {
        gap: var(--wp--preset--spacing--8);
    }

    .kurs-card__dates .kurs-card__badge--outline {
        font-size: 12px;
        font-weight: 900;
    }

    .kurs-card__badge--underline {
        margin-left: 0;
    }

    /* 16px zum Badge */
    .kurs-card__title {
        order: 2;
        margin-top: 4px;
        font-size: 24px;
        line-height: 1.3;
    }

    /* 20px zum Titel */
    .kurs-card__description {
        order: 3;
        margin-top: 8px;
    }

    /* 32px zum Text darueber */
    .kurs-card__tags {
        order: 4;
        margin-top: 20px;
    }

    /* 32px zu den Tags; ein umgebrochener CTA folgt mit 12px */
    .kurs-card__favorite {
        order: 5;
        margin-top: 20px;
        gap: var(--wp--preset--spacing--8);
    }

    .kurs-card__favorite-label {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
    }

    .kurs-card__favorite-button {
        width: 44px;
        height: 44px;
    }

    .kurs-card__cta {
        order: 6;
    }
}

@media (max-width: 600px) {
    :root {
        --kurssuche-nav-offset: 160px;
    }

    .kurssuche-hero__title {
        font-size: 40px;
    }


    .kurssuche-filters {
        padding: var(--wp--preset--spacing--16);
    }

    .kurs-card__description {
        display: none;
    }

    .kurs-empty__title {
        font-size: 32px;
    }

    .kurs-empty__icon {
        top: -36px;
        right: 4px;
        width: 32px;
        height: 32px;
    }
}