#timelineContainer {
    position: relative;
    user-select: none;
    width: 80vw;
    max-width: 1600px;
    min-width: 400px;
    height: 80vh;
    min-height: 400px;
    overflow: hidden;

    --timelineItemWidth: 40px;

    /* min max */
    --fromYear: 1995;
    --toYear: 2026; /* dyn set per js */

    /* per item - set per js */
    --from: calc(var(--fromYear) + 1);
    --to: calc(var(--toYear) - 1);

    & .timelineItem {
        --color-timeline-gradient-top: transparent;
        --color-timeline-gradient-bottom: blue;

        --translate-x-factor: 1;

        position: absolute;
        width: var(--timelineItemWidth);
        border-radius: calc(var(--timelineItemWidth) / 4);
        transition: all 2000ms cubic-bezier(0.52, 1.64, 0.37, 0.66) 200ms;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.5);
        background: linear-gradient(to bottom, var(--color-timeline-gradient-top) 0, var(--color-timeline-gradient-bottom) 100%);
        bottom: calc((var(--from) - var(--fromYear)) / (var(--toYear) - var(--fromYear)) * 100%);
        height: calc((var(--to) - var(--from)) / (var(--toYear) - var(--fromYear)) * 100%);
        left: calc(50% - var(--timelineItemWidth) / 2);
        translate: calc(var(--timelineItemWidth) * var(--translate-x-factor));

        &:hover {
            box-shadow: 0 0 2px 2px var(--color-fg);
        }

        & .dateLabel {
            left: 0;
            right: 0;
            color: white;
            text-align: center;
            position: absolute;

            &.year {
                bottom: 2px;
                font-weight: bolder;
                font-size: 20px;
                line-height: 20px;
            }

            &.month {
                bottom: 22px;
                font-weight: lighter;
                font-size: 12px;
                line-height: 12px;
            }


            &.toYear {
                top: 2px;
                font-weight: bolder;
                font-size: 20px;
                line-height: 20px;
            }

            &.toMonth {
                top: 22px;
                font-weight: lighter;
                font-size: 12px;
                line-height: 12px;
            }
        }


        & .label {
            bottom: 2px;
            left: calc(var(--timelineItemWidth) + 5px);
            position: absolute;
            white-space: pre;
            opacity: 1;
            transition: opacity 2000ms linear 200ms;
        }
    }

    & #timelineWeb {
        background: linear-gradient(to bottom, rgba(224, 24, 71, 0) 0, var(--gradient-color-1) 50%, var(--gradient-color-2) 100%);
        --translate-x-factor: -2;
    }

    & #timelineSchool {
        --translate-x-factor: 2;
        --color-timeline-gradient-top: #192f59;
        --color-timeline-gradient-bottom: #ed1b24;
    }

    & #timelineVB {
        --translate-x-factor: -1;
        --color-timeline-gradient-top: lightgray;
        --color-timeline-gradient-bottom: darkgray;
    }

    & #timelineZivi {
        --translate-x-factor: 1;
        background: linear-gradient(to bottom, #000 0, #f00 50%, #ffcc00 100%);
    }

    & #timelineStudy {
        --translate-x-factor: 2;
        --color-timeline-gradient-top: #a7cfdf;
        --color-timeline-gradient-bottom: #23538a;
    }

    & #timelineJava {
        --translate-x-factor: -3;
        background: linear-gradient(to bottom, transparent 0, #0173ba 50%, #ed3033 100%);
    }

    & #timelineArsNova {
        --translate-x-factor: 3;
        background: linear-gradient(to bottom, #8e8e8e 20%, #cf0404 80%);
    }

    & #timelineLeuTek {
        --translate-x-factor: 4;
        --color-timeline-gradient-top: #004f9f;
        --color-timeline-gradient-bottom: #d89a01;
        border-top-right-radius: 0;
    }

    & #timelineUSU {
        --translate-x-factor: 5;
        --color-timeline-gradient-top: rgba(0, 0, 0, 0);
        --color-timeline-gradient-bottom: #004f9f;
        border-bottom-left-radius: 0;
    }

    & #timelineProjektManagement {
        --translate-x-factor: 4.9;
        --color-timeline-gradient-top: rgba(222, 71, 172, 0.25);
        --color-timeline-gradient-bottom: #ad1283;
        border-bottom-left-radius: 0;
    }

    & #timelineSVG {
        --translate-x-factor: -1.0;
        --color-timeline-gradient-bottom: #ffb238;
        border-bottom-left-radius: 0;
    }

    & #timelineFlex {
        --translate-x-factor: 3.1;
        --color-timeline-gradient-top: transparent;
        --color-timeline-gradient-bottom: #790000;
        border-bottom-right-radius: 0;
    }

    & #timelineAmCharts {
        --translate-x-factor: 3.25;
        background: linear-gradient(to bottom, transparent 0%, #70007e 50%, #0e4a82 100%);
        border-bottom-right-radius: 0;
    }

    & #timelineYFiles {
        --translate-x-factor: 3.4;
        --color-timeline-gradient-bottom: #007aff;
        border-bottom-right-radius: 0;
    }

    & #timelineReact {
        --translate-x-factor: 2.25;
        background: linear-gradient(to bottom, transparent 0, rgb(97 218 251) 60%, #282c34 100%);
        border-bottom-right-radius: 0;
    }

    & #timelineWebComponents {
        --translate-x-factor: 1.5;
        background: linear-gradient(to bottom, transparent 0, #e2f32b 25%, #b5d549 50%, #2a9dd6 75%, #3658a3 100%);
        border-bottom-right-radius: 0;
    }

    & #timelineReactNative {
        --translate-x-factor: -1.25;
        background: linear-gradient(to bottom, transparent 0, rgb(97 218 251) 60%, #282c34 100%);
        border-bottom-left-radius: 0;
    }

    & #timelineNodeJS {
        border-bottom-right-radius: 0;
        --translate-x-factor: -2.5;
        background: linear-gradient(to bottom, rgba(116, 171, 99, 0) 0, rgba(116, 171, 99, 1) 50%, rgba(2, 110, 0, 1) 100%);
    }

    & #timelineTypescript {
        border-bottom-right-radius: 0;
        --translate-x-factor: -2.75;
        --color-timeline-gradient-bottom: #3178c6;
    }

    & #timelineFlutter {
        border-bottom-right-radius: 0;
        --translate-x-factor: -3.75;
        background: linear-gradient(to bottom, transparent 0, #60C7F9 25%, #39B9F7 50%, #085A9D 100%);
    }
}

dialog.opening {
    #timelineContainer {
        & .timelineItem {
            height: 0;
            bottom: -30px;

            & .label {
                opacity: 0;
            }
        }
    }
}


@media only screen and (max-width: 800px) {
    #timelineContainer {
        & .timelineItem {
            --timelineItemWidth: 30px;
            left: calc(var(--timelineItemWidth) * 5); /* 1 links platz*/
            font-size: xx-small;
        }
    }
}
@media only screen and (max-width: 500px) {
    #timelineContainer {
        & .timelineItem {
            --timelineItemWidth: 25px;
            left: calc(var(--timelineItemWidth) * 4);
        }
    }
}