.tabs {

    .tabs__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tabs__item {
        margin: 0;
        padding-right: 30px;
    }

    .tabs__button {
        padding: 6px 12px;
        background: none;
        border: none;
        border-bottom: 6px solid transparent;
        font-size: 22px;
        cursor: pointer;

        &.border-bottom-gelb {
            border-color: #FDF4B8;
        }

        &.border-bottom-orange {
            border-color: #F9CAB5;
        }

        &.border-bottom-blau {
            border-color: #BED5DF;
        }

        &.border-bottom-violett {
            border-color: #C3C2D0;
        }
    }

    .tabs__button:hover {
        outline: 2px solid #005FCC;
        outline-offset: -0.125rem;
    }

    .tabs__button:focus {
        outline: 2px solid #005FCC;
        outline-offset: -0.125rem;
    }

    .tabs__button[aria-selected="true"] {
        background-color: #3C3468;
        color: white;
    }

    .tabs__panel {
        padding-top: 36px;
        display: none;
    }

    .tabs__panel[aria-hidden="false"] {
        display: block;
    }
}

@media (max-width:865px) {
    .tabs {
        .tabs__item {
            padding-right: 0;
        }
    }