:root{
    --gap: 30px;
    --count: 4;
}

/* #wanderrouten .wrapper{
    width:1400px;
    max-width: 100%;
    margin: auto;
} */

#wanderrouten .filter{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--gap) / 2);
    margin-top: calc(var(--gap) * 2);
    margin-bottom: calc(var(--gap) * 3);
}

#wanderrouten .filter-item{
    border-radius: 10px;
    font-family: "HVD Fonts - BrandonText-Black", sans-serif;
    filter: drop-shadow(3px 2px 13px rgba(0, 0, 0, 0.2));
    background-color: #ffffff;
    padding: calc(var(--gap) / 2.5) var(--gap);
    cursor: pointer;
}

#wanderrouten .filter-item.mixitup-control-active{
    background-color: #D2051E;
    color: #ffffff;
}

#wanderrouten .routen-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}

#wanderrouten .reportage-wrapper {
    min-height:30px;
}

#wanderrouten .wanderroute{
    border-radius: 10px;
    border: 2px solid #6A6A6A;
    padding: calc(var(--gap) / 2);
    width: calc( 100% / var(--count) - var(--gap) * (var(--count) - 1) / var(--count));
    position: relative;
}

#wanderrouten .wanderroute.highlight{
    border: 2px solid #D2051E;
}

#wanderrouten .aktuell{
    font-family: "HVD Fonts - BrandonText-Black", sans-serif;
    border: 2px solid #D2051E;
    color: #D2051E;
    border-radius: 7px;
    background-color: #ffffff;
    height: var(--gap);
    padding-left: 7px;
    padding-right: 7px;
    position: absolute;
    top: calc(-1 * (var(--gap) / 2 - 2px));
    right: calc(var(--gap) / 1.5);
}

#wanderrouten .descriptive{
    font-family: "HVD Fonts - BrandonText-Black", sans-serif;
    color: #D2051E;
}

#wanderrouten h2{
    font-size: 18px;
    margin-top: calc(var(--gap) / 6);
    margin-bottom: calc(var(--gap) / 6);
}

#wanderrouten .key-data-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: calc(var(--gap) / 2);
}

#wanderrouten .duration ~ .umgebung{
    padding-left: calc(var(--gap) / 1.5);
}

#wanderrouten .button-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
    gap: calc(var(--gap) / 2);
    margin-top: calc(var(--gap) / 2);
}

body.frontend .wanderroute .button:not(.ed_button){
    margin: 0;
    padding: 3px 15px;
}

body.frontend .wanderroute .button.grey:not(.ed_button){
    background-color: #6A6A6A;
    color: #ffffff;
}

#wanderrouten .wanderroute a.button{
    color: #fff;
}

#wanderrouten .wanderroute a{
    color: #D2051E;
    text-decoration: none;
    font-family: "HVD Fonts - BrandonText-Black", sans-serif;
}

#wanderrouten .wanderroute a:not(.button):hover::before{
    transform: translateX(5px);
}

#wanderrouten .wanderroute a:not(.button)::before,
#wanderrouten .duration::before,
#wanderrouten .umgebung::before{
    content: "";
    height: 11px;
    width: 11px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../../media/image/button-icon-red.svg);
    margin-right: 7px;
    display: inline-block;
    transition: 250ms ease-in-out;
    transform: translateX(0px);
}

#wanderrouten .duration::before{
    background-image: url(../../media/image/timer.svg);
}
#wanderrouten .umgebung::before{
    background-image: url(../../media/image/location.svg);
}

@media only screen and (max-width: 1599.98px) {
    :root{
        --count: 3;
    }
}

@media only screen and (max-width: 1399.98px) {

}

@media only screen and (max-width: 1199.98px) {
    :root{
        --count: 2;
    }

    #wanderrouten .filter.justify-start{
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 767.98px) {
	:root{
        --count: 1;
    }

    #wanderrouten .wanderroute{
        max-width: 450px;
        margin: auto;
    }
}

@media only screen and (max-width: 699.98px) {
    #wanderrouten .filter{
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 399.98px) {
    #wanderrouten .button-wrapper{
        flex-direction: column;
        margin-top: calc(var(--gap) / 2);
        gap: calc(var(--gap) / 4);
    }

    #wanderrouten .wanderroute a.button{
        width: 165px;
        display: inline-block;
    }
}