:root {
    --yellow-green: #8FD400;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ------------------------------
     Allgemeine Content Sections
  ------------------------------ */

.content-section {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 10vw;
    background: var(--yellow-green);

}

.section-content {
    width: min(100%, 900px);
    text-align: center;
}

.button {
    display: inline-block;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--accent);

    font-weight: 700;
    text-decoration: none;
    transition:
        transform 200ms ease,
        opacity 200ms ease;
}

.button:hover {
    opacity: 0.85;
    transform: translateY(-3px);
}

/* ------------------------------
     Horizontale Timeline
  ------------------------------ */

.timeline-section {
    /*
      Je höher dieser Wert ist,
      desto länger dauert die horizontale Animation.
    */
    height: 500vh;
}

.timeline-sticky {
    position: sticky;
    top: 10vh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*align-items: center;*/
    overflow: hidden;

    background: #EAE6DC;
    margin-left: 2.5%;
    margin-right: 2.5%;
    border-radius: 18px;
}

.timeline-header {
    z-index: 5;
}

.timeline-viewport {
    width: 100%;
    margin: auto 0;
    margin-top: calc(2.292vw * 1);
    margin-bottom: calc(2.292vw * 2);
}

.timeline-track {
    display: flex;
    gap: 80px;
    width: -moz-max-content;
    width: max-content;
    will-change: transform;
    margin: 0 5%;
}

.timeline-item {
    position: relative;
    flex: 0 0 auto;
    /*min-height: 500px;*/
    transition:
        opacity 300ms ease,
        transform 300ms ease;
}

.timeline-item>div {
    width: min(70vw, 520px);
}

/* Punkt auf der Timeline */

.timeline-item>div::before {

    content: "";
    position: absolute;
    top: 50.5%;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    transform: translateY(-50%) rotate(45deg);
    background: white;
    border: 4px solid var(--yellow-green);
}

.timeline-item>div::after {
    content: "";
    position: absolute;
    top: 37%;
    left: 10px;
    bottom: 0;
    width: 4px;
    height: 34px;
    background: #8FD400;
}

/* Verbindungslinie */
.timeline-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: calc(100% + 80px);
    height: 4px;
    background: var(--yellow-green);
}

.timeline-date {
    margin-bottom: 14px;
    font-size: clamp(2rem, 1.7159rem + 0.7576vw, 2.625rem);
    font-weight: 700;
    color: #009739;
}

.timeline-card {
    min-height: 260px;
    padding: 0;
    margin-bottom:30px;
    margin-left: 6px;
}

.timeline-card time {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.timeline-card p {
    margin: 0;
    padding-bottom: 10px;
    background: #eae6dc;
    z-index: 2;
    position: relative;
}

.timeline-sticky:before {
    content: "";
    width: 15%;
    height: 100%;
    display: block;
    background: rgb(234, 230, 220);
    background: linear-gradient(90deg, rgb(234, 230, 220) 0%, rgba(234, 230, 220, 0) 100%);
    position: absolute;
    z-index: 2;
}

.timeline-sticky:after {
    content: "";
    right: 0;
    top: 0;
    width: 15%;
    height: 100%;
    display: block;
    background: rgb(234, 230, 220);
    background: linear-gradient(90deg, rgba(234, 230, 220, 0) 0%, rgb(234, 230, 220) 100%);
    position: absolute;
}

@property --progress-value {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

.progress-bar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* to center the percentage value */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(50% - 15px);
    bottom: 30px;
}

.progress-bar::before {
    counter-reset: percentage var(--progress-value);
}

.pcss {
    background: radial-gradient(closest-side, transparent, transparent 80% 100%), conic-gradient(#009739 calc(var(--progress-value) * 1%), #b1db53 0);
}

.timeline-item.disableditem>div::before,
.timeline-item.disableditem>div::after {
    display: none;
}


/* ------------------------------
     Responsive Design
  ------------------------------ */


@media (min-width: 71px) {
    .timeline-item:nth-child(even)>div:after {
        top: -4.5%;
        left: 0;
    }

    .timeline-item:nth-child(even)>div {
        transform: translate(-47%, 0);
        position: absolute;
        left: 0;
        top: 58%;
        width: min(70vw, 520px);
        white-space: normal;

        &:before {
            top: 0;
        }

        .timeline-date {
            margin-top: 22px;
        }
    }

    .timeline-item:nth-child(even) div:before {
        left: -10px;
        top: -27px;
    }

}
@media (max-width: 1200px) {
    .timeline-viewport {
        margin-top: calc(2.292vw * 2);
        margin-bottom: calc(2.292vw * 4);
    }
}
@media (max-width: 700px) {
    .timeline-viewport {
        margin-top: calc(2.292vw * 3);
        margin-bottom: calc(2.292vw * 6);
    }

    .timeline-header {
        margin-bottom: 0;
    }

    h3 {
        font-size: 18px;
    }

    .timeline-item {
        margin-top: -16px;
    }

    .progress-bar {
        bottom: 20px;
    }

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .timeline-track {
        margin: 0 10%;
    }

    .timeline-item {
        transition: none;
    }
}
/*# sourceMappingURL=timeline.css.map */