.tilted-section::before {
    background-color: #2c2c2c;
    /*padding-bottom: 50px;*/
}

footer {
    margin-top: var(--m);
    background-color: #202020;
}

.timeline-container {
    /* Configuration Variables */
    --timeline-width: 30px;
    --timeline-content-padding: 80px ;
    --connector-size: 11px;
    --connector-line-height: 3px;
    --connector-top-offset: 32px;
    --connector-line-overlap: 0px;

    position: relative;
    width: 100%;
    margin-top: 40px;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0%;
        width: var(--timeline-width);
        height: 100%;
        background: linear-gradient(180deg, #9CC7A2 -2.22%, #3C8419 62.15%);
    }
}

@media screen and (max-width: 800px) {
    .timeline-container {
        --timeline-width: 25px;
        --timeline-content-padding: 50px;
    }
}

.timeline-section {
    margin: 0;
    padding: 0;
    position: relative;

    &:hover {
        background-color: #ffffff05;
    }

    .section-header {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #575757;

        .number {
            width: var(--timeline-width);
            height: 100%;
            text-align: center;
        }


        img {
            width: 20px;
            height: 20px;
            margin-left: 12px;
            margin-right: -5px;
            filter: brightness(0) saturate(100%) invert(53%) sepia(12%) saturate(4889%) hue-rotate(64deg) brightness(104%) contrast(85%);
        }

        .label {
            padding: 0.5rem 0.75rem;
        }

        /* Linie unter dem Header */
        &::after {

            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 90vw;
            min-width: 370px;
            max-width: 1729px;
            height: 1px;
            background-color: #5f5f5f;
        }
    }
    
    .section-content {
        padding: var(--timeline-content-padding);
        padding-top: calc(var(--timeline-content-padding) + 10px);
        padding-right: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 370px));
        gap: 20px;
        justify-items: start;
    }

    .leistung-card {
        position: relative;
        z-index: 2;

        background-color: #404040;

        &:hover {
            transform: none;
            background-color: var(--c-base);
            background-color: var(--c-surface-elevated);
            box-shadow: 0 6px 12px var(--c-shadow-medium);
        }
    }

    .connector {
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));

        &::before {
            content: '';
            position: absolute;
            top: var(--connector-top-offset);
            /* Zentriert im timeline-container::before using variables:
               left = (timeline-width / 2) - content-padding - (connector-size / 2) */
            left: calc((var(--timeline-width) / 2) - var(--timeline-content-padding) - (var(--connector-size) / 2));
            width: var(--connector-size);
            height: var(--connector-size);
            background-color: #e4e4e4;
            transform: rotate(45deg);
            z-index: 1;
        }

        &::after {
            content: '';
            position: absolute;
            /* Startet an der Timeline-Mitte: 
               left = (timeline-width / 2) - content-padding */
            left: calc((var(--timeline-width) / 2) - var(--timeline-content-padding));
            /* Vertikal mittig zum Quadrat ausgerichtet:
               top = top-offset + (connector-size / 2) - (line-height / 2) */
            top: calc(var(--connector-top-offset) + (var(--connector-size) / 2) - (var(--connector-line-height) / 2));
            /* Breite = (content-padding - (timeline-width / 2)) + overlap */
            width: calc((var(--timeline-content-padding) - (var(--timeline-width) / 2)) + var(--connector-line-overlap));
            height: var(--connector-line-height);
            background-color: #e4e4e4;
            z-index: -1;
        }
    }

}