.sl-ansprache-toggle {

    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);

    width: 130px;

    padding: 4px;

    background: #1d3557;

    border-radius: 999px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.06);

    overflow: hidden;

}

.sl-pill {

    position: absolute;

    top: 4px;
    left: 4px;

    width: calc(50% - 4px);
    height: calc(100% - 8px);

    background: #fff;

    border-radius: 999px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12);

    transition:
        transform .28s cubic-bezier(.4,0,.2,1);

}

.sl-ansprache-toggle.is-sie .sl-pill {

    transform: translateX(100%);

}

.sl-option {

    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    font-size: 14px;
    font-weight: 600;

    color: #fff;

    text-decoration: none;

    transition:
        color .2s ease;

}

.sl-option:hover {

    color: #f3e6dd;

}

.sl-option.active {

    color: #C78B5B;

}

.sl-option:focus-visible {

    outline: none;

}

.sl-ansprache-toggle:focus-within {

    box-shadow:
        0 0 0 3px rgba(233,30,99,.18),
        inset 0 1px 2px rgba(0,0,0,.06);

}