.dropdown {
    position: relative;
}

.cmb__btn {
    --sum-arrow-w: 1.3em;
    --sum-arrow-ratio: 23 / 11;
}

.cmb__box {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.cmb__option-txt {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    justify-content: space-between;
    flex-grow: 1;
    direction: ltr;
    text-align: left;
}

.cmb__option-txt .icon-choice {
    box-shadow: none;
}

.cmb__options {
    position: absolute;
    background: white;
    z-index: 9;
    width: 100%;
    box-shadow: var(--box-shadow-z3);
    border-radius: 6px;
    border: 2px solid var(--grey-400);
    margin-top: 5px;
}

.cmb__options .cmb__option-txt {
    padding-left: 1em;
    padding-right: 0.3em;
}

.cmb__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.475em 1em;
    border: 2px solid var(--grey-400);
    cursor: pointer;
    border-radius: 0.8em;
}

.cmb__btn[aria-expanded='true'] .cmb__value::after {
    rotate: 0deg;
    filter: brightness(0);
}

.cmb__btn--filter:hover .cmb__value::after {
    filter: brightness(100);
}

.cmb__btn--filter:active {
    background-color: var(--grey-700);
}

.cmb__btn:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}

.cmb__btn:hover {
    background: var(--blue-200);
    border-color: var(--blue-300);

}

.cmb__btn:active {
    background: var(--blue-100);
    border-color: var(--blue-200);
}

.cmb__option:focus-visible {
    outline: 2px solid black;
}

.cmb__value {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    gap: 0.5em;
    justify-content: space-between;
    width: 100%;
    display: flex;
    text-align: left;
}

.cmb__btn--filter {
    background-color: var(--grey-200);
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 100%;
}

.cmb__btn--filter:hover {
    background-color: black;
    color: white;
    border-color: black;
}

.cmb__value--language {
    grid-template-columns: auto 1fr auto;
    min-width: 10em;
    /* NOTE: wurde eingefügt, da das Sprachmenü in der Desktopansicht sehr nah am Rand war */
    padding: 0.1rem 0.6rem;
}

.cmb__value--language::before {
    content: '';
    height: 1.1em;
    background: url('../img/language.svg');
    background-size: cover;
    aspect-ratio: 1/1;
}

.cmb__option-txt--language {
    display: inline;
}

.cmb__option-txt--language-mobil {
    width: 2.5ch;
}

.cmb__value .cmb__option-txt--language-mobil {
    display: none;
}

@media (max-width: 799.8px) {

    .cmb__btn--filter:hover {
        background-color: black;
        color: white; 
        border-color: black;
    }

    .cmb__value .cmb__option-txt--language {
        display: none;
    }

    .cmb__value .cmb__option-txt--language-mobil {
        display: inline;
        gap: 0px;
        justify-content: revert-layer;
        text-align: left;

    }

    .cmb__options--language {
        width: max-content;
        right: 0;
    }

    .cmb__options .cmb__options-txt {
        padding-left: 0;
        padding-right: 0;
    }

    .cmb__value--language {
        min-width: unset;
        display: flex;
        justify-content: space-between;
        /* gap: 0.4em; */

        gap: 3px;
    }

    .cmb__value.cmb__value--language::after {
        margin-left: 0;
        width: 1rem;
    }

    .cmb__value.cmb__value--language::before {
        height: 1.3em;
    }
}

.cmb__btn--language {
    padding: 0.175em 0.6em;
}

.cmb__value::after {
    content: '';
    rotate: 180deg;
    width: var(--sum-arrow-w);
    background: url('../img/collapse.svg');
    background-size: auto;
    background-size: cover;
    transition: 0.2s;
    flex-shrink: 0;
    aspect-ratio: var(--sum-arrow-ratio);
    filter: brightness(0);
}

.cmb__select {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #caced1;
    border-radius: 0.25em;
    background-color: white;
    list-style: none;
    padding: 1em;
    margin: 1em 0 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.cmb__select::-webkit-scrollbar {
    width: 7px;
}

.cmb__select::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 25px;
}

.cmb__select::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
}

.cmb__option {
    padding: 1em;
    cursor: pointer;
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: 1em;
}

.cmb__option.selected {
    font-weight: 600;
}

.cmb__option.selected {
    background-color: #f2f2f2;
    border-radius: 4px;
}

.cmb__option .icon-choice {
    filter: saturate(80%);
}

.cmb__option.selected .icon-choice {
    filter: saturate(100%);
}

.cmb__select[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

.cmb__option:hover {
    background-color: var(--blue-200);
    border-radius: 4px;
}

.cmb__option:active {
    background-color: var(--blue-100);
}

.cmb__box--ranking {
    min-width: 30rem;
}
/* uk	344
bg	334 */
html[lang="uk"] div.cmb__box--ranking,
html[lang="bg"] div.cmb__box--ranking {
    min-width: 35rem;
}

/* it	323
  fr	319
  es	316
  el	310
  tr	310 */
html[lang="it"] div.cmb__box--ranking,
html[lang="fr"] div.cmb__box--ranking,
html[lang="es"] div.cmb__box--ranking,
html[lang="el"] div.cmb__box--ranking,
html[lang="tr"] div.cmb__box--ranking {
    min-width: 33rem;
}

/* pl	251
  ro	238
  ar	238 */
html[lang="pl"] div.cmb__box--ranking,
html[lang="ro"] div.cmb__box--ranking,
html[lang="ar"] div.cmb__box--ranking {
    min-width: 26rem;
}

/* de	281
  ru	281
  en	267 */
html[lang="de"] div.cmb__box--ranking,
html[lang="ru"] div.cmb__box--ranking,
html[lang="en"] div.cmb__box--ranking {
    min-width: 29rem;
}

@media (max-width: 499.98px) {
    .cmb__box--ranking {
        width: 100%;
        border-top: 2px solid var(--grey-600);
        background: var(--blue-200);
        min-width: unset;
    }

    .cmb .cmb__box.cmb__box--ranking {
        min-width: unset;
    }

    .cmb__btn--ranking {
        border-radius: 0;
        min-width: unset;
    }

    .cmb__options--ranking {
        box-shadow: var(--box-shadow-z3);
        border: 2px solid var(--grey-500);
        border-top: none;
        border-radius: 0 0 2em 2em;
        width: calc(100% + 2 * var(--gewichtung-border-stroke));
        left: calc(-1 * var(--gewichtung-border-stroke));
        margin-top: 0;
    }

    .icon-choice {
        box-shadow: var(--box-shadow-z2);
    }
}