:root {
    --experience-padding-left-right: 46px;
    --experience-padding-top-buttom: 25px;
    --experience-point-size: 14px;
    --experience-point-border: 5px;
    --experience-font-color-date: #626262;
}

#experiences {
    padding-top: 68px;
}

#experiences h2 {
    text-align: center;
    margin: 25px auto;
    font-size: 2.2rem;
}

/*    EXPERIENCE LIST     */

#experiences_list div div {
    position: relative;
    border-left: 2px solid var(--primary-color);
    padding: var(--experience-padding-top-buttom) var(--experience-padding-left-right);
    padding-bottom: 25px;
}

#experiences_list .wrapper:first-child:before,
#experiences_list .hide-top:before,
#experiences_list .hide-bottom:after,
#experiences_list div div:before,
#experiences_list div div:after {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
}

#experiences_list .qualification:before,
#experiences_list .qualification:after {
    background-color: var(--secondary-color);
}

#experiences_list .wrapper {
    position: relative;
}


#experiences_list .wrapper:first-child:before,
#experiences_list .hide-top:before,
#experiences_list .hide-bottom:after {
    background-color: var(--background-color);
    height: calc(50% - var(--experience-point-size) / 2);
    width: 6px;
    left: -3px;
    transition: 1s;
    z-index: 50;
}

#experiences_list .wrapper:first-child:before,
#experiences_list .hide-top {
    top: 0;
}

#experiences_list .hide-bottom:after {
    height: calc(50% - var(--experience-point-size) / 2 - var(--experience-point-border));
    bottom: 0;
}

/* Point */
#experiences_list div div:before {
    width: var(--experience-point-size);
    height: var(--experience-point-size);
    border: var(--experience-point-border) solid var(--background-color);
    border-radius: 50%;
    top: calc(50% - (var(--experience-point-size) + var(--experience-point-border)) / 2);
    left: calc((var(--experience-point-border) + var(--experience-point-size) / 2 + 1px) * -1);
    transition: 1s;
}

/* Punktlinie */
#experiences_list div div:after {
    width: calc(var(--experience-padding-left-right) / 3);
    height: 2px;
    top: calc(50% + 1px);
    left: calc(var(--experience-point-border) + (var(--experience-point-size) / 2));
}

#experiences_list .qualification h3 {
    color: var(--secondary-color);
}

#experiences_list h3 {
    font-size: clamp(1rem, 9vw, 1.5rem);
}

#experiences_list p {
    color: var(--experience-font-color-date);
}

#experiences_list a {
    color: var(--font-color);
}

#experiences_list ul {
    margin: 15px;
    line-height: 150%;
}

/*    EXPERIENCE LIST END     */

#experiences .key {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin-top: 25px;
}

#experiences .key .job {
    color: var(--primary-color);
}

#experiences .key .qualification {
    color: var(--secondary-color);
}