.timline{
    width: 100%;
    height: 3px;
    background-color: var(--primary);
}

.timeline-event{
    cursor: pointer;
    top: -8px;
}
.timeline-event:hover{
    cursor: pointer;
}

.timedate-kreis{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: solid 0.5px var(--primary);
    border-radius: 20px;
}

.timedate-zahl{
    font-weight: bold;
}

.timeline-end{
    right: 0px;
    top: 0px;
}

.timeline-text{
    display: none;
}

.timeline-text.active{
    display: block;
}




.timeline-event:hover .timedate-zahl{
    color: var(--primary);
}
.timeline-event:hover .timedate-kreis{
    background-color: var(--primary);
}
.timeline-event.active .timedate-zahl{
    color: var(--primary);
}
.timeline-event.active .timedate-kreis{
    background-color: var(--primary);
}


.timeline-event-d-x{
    left: -35px;
}

.timeline-event-d-0{
    left: 10%;
}
.timeline-event-d-1{
    left: 25%;
}
.timeline-event-d-2{
    left: 30%;
}
.timeline-event-d-3{
    left: 35%;
}
.timeline-event-d-4{
    left: 45%;
}
.timeline-event-d-5{
    left: 50%;
}
.timeline-event-d-6{
    left: 60%;
}
.timeline-event-d-7{
    left: 65%;
}
.timeline-event-d-8{
    left: 70%;
}
.timeline-event-d-9{
    left: 75%;
}
.timeline-event-d-10{
    left: 80%;
}
.timeline-event-d-11{
    left: 85%;
}
.timeline-event-d-12{
    left: 90%;
}
.timeline-event-d-13{
    left: 95%;
    z-index: 10;
}

@media only screen and (max-width: 767px){
    .timline{
        height: 70vh;
        width: 3px;
        left: 50%;
        background-color: var(--primary);
    }
    .timeline-event-d-x{
        top: -5px;
        left: -32px;
    }
    
    .timeline-event-d-0{
        top: 10%;
        left: -32px;
    }
    .timeline-event-d-1{
        top: 25%;
        left: -33px;
    }
    .timeline-event-d-2{
        top: 30%;
        left: -33px;
    }
    .timeline-event-d-3{
        top: 35%;
        left: -33px;
    }
    .timeline-event-d-4{
        top: 45%;
        left: -33px;
    }
    .timeline-event-d-5{
        top: 50%;
        left: -33px;
    }
    .timeline-event-d-6{
        top: 60%;
        left: -30px;
    }
    .timeline-event-d-7{
        top: 65%;
        left: -13px;
    }
    .timeline-event-d-8{
        top: 70%;
        left: -13px;
    }
    .timeline-event-d-9{
        top: 75%;
        left: -13px;
    }
    .timeline-event-d-10{
        top: 80%;
        left: -13px;
    }
    .timeline-event-d-11{
        top: 85%;
        left: -13px;
    }
    .timeline-event-d-12{
        top: 90%;
        left: -13px;
    }
    .timeline-event-d-13{
        top: 95%;
        left: -13px;
        z-index: 10;
    }
    .timeline-end{
        left: 40px;
        top: 90%;
    }
    .timedate-zahl{
        left: 40px;
        top: -20px;
    }
}