/* ============================================================
   Kursfilter Block – Basic Styles
   ============================================================ */

/* Search Filter */

input.kursfilter__search-input {
    padding: 16px 24px !important;
    border-radius: 56px;
    background: #FFF;
    box-shadow: 0 8px 48px 0 rgba(227, 220, 212, 0.50);
    border: none;
    min-height: 56px;
    padding-left: 3rem !important;
}


.kursfilter__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* ── Suche ─────────────────────────────────────────────────── */

.kursfilter__search-wrap {
    position: relative;
    flex: 1 1 220px;
}

.kursfilter__search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}

.kursfilter__search-input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 0.9rem;
    background: #fff;
    box-sizing: border-box;
}

.kursfilter__search-input:focus {
    outline: none;
    border-color: #00a67c;
}

/* ── Themenfelder ──────────────────────────────────────────── */

.kursfilter__region {
    min-height: 56px;
    align-items: center;
    border-radius: 56px;
    background: var(--Neutral-Neutral-100, #EAE6E3);
    box-shadow: 0 8px 48px 0 rgba(227, 220, 212, 0.20);
    padding: 4px
}

.kursfilter__region-btn.is-active{
display: flex;
width: 127px;
height: 56px;
padding: 24px;
justify-content: center;
align-items: center;
gap: 16px;
    background: white;
    color: #0A0908;
    border: none;
    border-radius: 32px
}

.kursfilter__region-btn{
    background: transparent;
    border: none;
    display: flex;
width: 127px;
height: 56px;
padding: 24px;
justify-content: center;
align-items: center;
gap: 16px;
}

.kursfilter__region-btn:hover{
    background: white;
    color: #white;
    color: #0A0908
}


.kursfilter__category-wrap {
    flex: 1 1 180px;
}

.kursfilter__category-select {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 0.9rem;
    background: #fff;
    appearance: none;
    
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM16.2806 11.0306L12.5306 14.7806C12.461 14.8504 12.3783 14.9057 12.2872 14.9434C12.1962 14.9812 12.0986 15.0006 12 15.0006C11.9014 15.0006 11.8038 14.9812 11.7128 14.9434C11.6218 14.9057 11.539 14.8504 11.4694 14.7806L7.71938 11.0306C7.57865 10.8899 7.49959 10.699 7.49959 10.5C7.49959 10.301 7.57865 10.1101 7.71938 9.96937C7.86011 9.82864 8.05098 9.74958 8.25 9.74958C8.44903 9.74958 8.6399 9.82864 8.78063 9.96937L12 13.1897L15.2194 9.96937C15.2891 9.89969 15.3718 9.84442 15.4628 9.8067C15.5539 9.76899 15.6515 9.74958 15.75 9.74958C15.8486 9.74958 15.9461 9.76899 16.0372 9.8067C16.1282 9.84442 16.2109 9.89969 16.2806 9.96937C16.3503 10.0391 16.4056 10.1218 16.4433 10.2128C16.481 10.3039 16.5004 10.4015 16.5004 10.5C16.5004 10.5985 16.481 10.6961 16.4433 10.7872C16.4056 10.8782 16.3503 10.9609 16.2806 11.0306Z' fill='black'/></svg>");
   background-size: 38px 38px;
	background-repeat: no-repeat;
    background-position: right 0.875rem center;
    cursor: pointer;
    box-sizing: border-box;
	min-height: 56px;
    border: none;
}

.kursfilter__category-select:focus {
    outline: none;
    border-color: #00a67c;
}

/* ── Region-Buttons ────────────────────────────────────────── */

.kursfilter__region {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.kursfilter__region-btn {
    padding: 0.5rem 1.1rem;
  
    border-radius: 999px;

    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.kursfilter__region-btn:hover {
    border-color: #00a67c;
}


@media (max-width: 600px) {
    .kursfilter__row {
        flex-direction: column;
        align-items: stretch;
    }
}