.aktivebar{
    position: relative;
    height: 100px;
    overflow: hidden;


    @media(max-width:768px){
        height: auto;
    }

    >.container{
        position: relative;
        z-index: 1;
    }

    .klotz-links{
        height: 100px;
        display: block;
        position: absolute;
        width: calc(50% - 600px);
        background: #d8d0c0;
        transform: skewX(-20deg) translate(0%,-50%);
        left: -40px;
        top: 50%;

        @media(max-width:1300px){
            width: calc(50% - 300px) ;
        }
        @media(max-width:992px){
            width: calc(50% - 200px) ;
        }
        @media(max-width:768px){
            display: none;
        }
    }

    .klotz-rechts{
        height: 100px;
        display: block;
        position: absolute;
        width: calc(50% - 600px);
        background: #4d382a;
        transform: skewX(-20deg) translate(0,-50%);
        right: 0px;
        top: 50%;
        @media(max-width:1300px){
            width: calc(50% - 300px);
        }
        @media(max-width:992px){
            width: calc(50% - 200px);
        }
        @media(max-width:768px){
            display: none;
        }
    }

    .container{
        display: flex;
        justify-content: space-around;
        height:100%;
        align-items: center;
        @media(max-width:768px){
            flex-wrap:wrap;
        }
    }

    .step{
        background:#c1b49a;
        color:white;
        font-family: Mundial;
        font-weight: bold;
        font-size: 17px;
        text-transform: uppercase;
        display:inline-block;
        padding: 10px 60px;
        transform: skewX(-20deg);
        width:100% !important;
        margin:0px 25px;
        text-align: center;


        @media(max-width:992px){
            padding:10px 30px;
        }

        @media(max-width:768px){
            display:block;
            width:100%;
            margin-top:5px;
            margin-bottom: 5px;
            text-align: center;

        }

        &.step2{
            background:#c0a080;
        }
        &.step3{
            background:#726156;
        }
    }
}