.obs-kursfinder {
    --obs-green: #9bcf4a;
    --obs-ink: #202738;
    --obs-muted: #6a6f78;
    --obs-map: #e8e7e2;
    display: grid;
    grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(.75rem, 1.5vw, 1.25rem);
    align-items: start;
    box-sizing: border-box;
    width: 100%;
}

.obs-kursfinder *, .obs-kursfinder *::before, .obs-kursfinder *::after { box-sizing: border-box; }
.obs-kursfinder__map-wrap { position: relative; min-width: 0; align-self: start; }
.obs-kursfinder__map { display: block; width: 100%; height: auto; max-height: none; overflow: visible; }
.obs-kursfinder__country { fill: var(--obs-map); stroke: #aaa9a3; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.obs-kursfinder__region { fill: none; stroke: #c3c2bc; stroke-width: .8; vector-effect: non-scaling-stroke; pointer-events: none; }
.obs-kursfinder__point { cursor: pointer; outline: none; }
.obs-kursfinder__point circle { fill: var(--obs-green); stroke: #fff; stroke-width: 2; transition: transform .15s ease, fill .15s ease; transform-box: fill-box; transform-origin: center; }
.obs-kursfinder__point-number { fill: var(--obs-ink); font-size: 11px; font-weight: 700; pointer-events: none; }
.obs-kursfinder__point-number[hidden] { display: none; }
.obs-kursfinder__point:hover circle, .obs-kursfinder__point:focus circle, .obs-kursfinder__point.is-active circle { fill: #74ad20; transform: scale(1.3); }
.obs-kursfinder__popup {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 72%;
    overflow: auto;
    border: 0;
    border-top: 4px solid var(--obs-green);
    background: #fff;
    box-shadow: 0 -12px 34px rgb(32 39 56 / 22%);
    color: var(--obs-ink);
    padding: 0;
    animation: obs-kursfinder-popup-in .22s ease-out;
}
.obs-kursfinder__popup[hidden] { display: none; }
.obs-kursfinder__popup-close {
    position: sticky;
    z-index: 2;
    top: .55rem;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--obs-ink);
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
    margin: .55rem .55rem -2.8rem auto;
    cursor: pointer;
}
.obs-kursfinder__popup-close:hover, .obs-kursfinder__popup-close:focus-visible { background: var(--obs-map); }
.obs-kursfinder__popup-content { padding: 0; }
.obs-kursfinder__popup-overview { position: sticky; z-index: 1; top: 0; padding: 1rem 3.4rem 1rem 1.1rem; border-bottom: 1px solid #dedede; background: #fff; }
.obs-kursfinder__popup-content h3 { margin: 0; color: var(--obs-ink); font-size: 1.15rem; line-height: 1.3; }
.obs-kursfinder__location { padding: 1rem 1.1rem; border-bottom: 1px solid #dedede; }
.obs-kursfinder__location > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; margin-bottom: .55rem; }
.obs-kursfinder__location > header h4 { margin: 0; color: var(--obs-ink); font-size: 1.05rem; line-height: 1.3; }
.obs-kursfinder__location > header p { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin: .2rem 0 0; color: var(--obs-muted); font-size: .9rem; line-height: 1.35; }
.obs-kursfinder__location-index { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--obs-green); color: var(--obs-ink); font-weight: 700; }
.obs-kursfinder__popup-content ul { margin: 0; padding: 0; list-style: none; }
.obs-kursfinder__course { display: grid; grid-template-columns: minmax(6.4rem, auto) minmax(0, 1fr); gap: .85rem; align-items: center; margin-left: 2.55rem; padding: .65rem 0; color: var(--obs-ink); }
.obs-kursfinder__course + .obs-kursfinder__course { border-top: 1px solid #ececea; }
.obs-kursfinder__course time strong, .obs-kursfinder__course time span { display: block; }
.obs-kursfinder__course time strong { font-size: .92rem; }
.obs-kursfinder__course time span { color: var(--obs-muted); font-size: .75rem; }
.obs-kursfinder__course > div { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; min-width: 0; }
.obs-kursfinder__popup-content li a { color: inherit; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@keyframes obs-kursfinder-popup-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.obs-kursfinder__attribution { color: var(--obs-muted); font-size: .75rem; line-height: 1.4; }
.obs-kursfinder__title { color: var(--obs-ink); margin: 0 0 2rem; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.15; }
.obs-kursfinder__form label { display: block; margin-bottom: .55rem; color: var(--obs-ink); font-weight: 600; }
.obs-kursfinder__search-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(100px, 1fr) auto; gap: .65rem; }
.obs-kursfinder__country-select, .obs-kursfinder__postcode, .obs-kursfinder__submit { min-height: 48px; border-radius: 0; font: inherit; }
.obs-kursfinder__country-select, .obs-kursfinder__postcode { width: 100%; border: 1px solid var(--obs-ink); background: #fff; padding: .65rem .8rem; color: var(--obs-ink); }
.obs-kursfinder__submit { border: 0; background: var(--obs-green); color: var(--obs-ink); padding: .65rem 1.4rem; font-weight: 700; cursor: pointer; }
.obs-kursfinder__submit:hover, .obs-kursfinder__submit:focus { background: #86bd35; }
.obs-kursfinder__form.is-loading { opacity: .65; pointer-events: none; }
.obs-kursfinder__status { min-height: 1.5em; margin: 1rem 0; color: var(--obs-muted); }
.obs-kursfinder__result { padding: 1rem 0; border-top: 1px solid #dedede; }
.obs-kursfinder__result h3 { margin: 0 0 .3rem; font-size: 1.08rem; color: var(--obs-ink); }
.obs-kursfinder__result li a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.obs-kursfinder__result p { margin: .25rem 0 .65rem; color: var(--obs-muted); font-size: .92rem; line-height: 1.45; }
.obs-kursfinder__result ul { list-style: none; margin: 0; padding: 0; }
.obs-kursfinder__result li { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; margin: .4rem 0; color: var(--obs-ink); }
.obs-kursfinder__date, .obs-kursfinder__distance { color: var(--obs-muted); font-weight: 400; }
.obs-kursfinder__sold-out { color: #a52e2e; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.obs-kursfinder__empty { color: var(--obs-muted); }
.obs-kursfinder__attribution { margin-top: 1.5rem; }

@media (max-width: 760px) {
    .obs-kursfinder {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .obs-kursfinder__map-wrap {
        width: min(100%, 440px);
        margin-inline: auto;
    }
}

@media (max-width: 900px) {
    .obs-kursfinder__search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .obs-kursfinder__country-select, .obs-kursfinder__postcode { min-width: 0; }
    .obs-kursfinder__submit { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 600px) {
    .obs-kursfinder__popup { max-height: 78%; }
    .obs-kursfinder__course { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .obs-kursfinder__point circle { transition: none; }
    .obs-kursfinder__popup { animation: none; }
}