/* Start custom CSS */.fey-timeline-timeheader::before{
    content: " ";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: calc(50% - (15px/2));
    left: -20px;
    border-radius: 15px;
    background-color: var(--Hell-Blau);
}

 /* Reset and Base */
        .timeline-section.* {
            box-sizing: border-box;
        }

        /* Outer wrapper allowing horizontal scroll on mobile */
        .timeline-section {
            width: 100%;
            display: flex;
            align-items: center;
        }

        .timeline-container {
            width: 100%;
            margin: 0 auto;
            overflow-x: auto;
        }

        /* Grid Setup:
      Row 1: Top Content (auto height to adapt to largest box)
      Row 2: Timeline Nodes (exactly 20px)
      Row 3: Bottom Content (auto height to adapt to largest box)
    */
        .timeline-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: auto 20px auto;
            /* Allows rows to grow based on content */
            /* min-width: 900px; */
            padding: 0 30px;
            /* Forces structure, triggers scrollwrapper below 900px */
            position: relative;
            overflow: visible;
        }

        /* --- The Continuous Main Track --- */
        .track-line {
            grid-column: 1 / -1;
            /* Span across all columns */
            grid-row: 2;
            height: 12px;
            background-color: var(--Hell-Blau);
            align-self: center;
            /* Centers vertically within the 20px row */
            border-radius: 20px;
            margin: 0 -30px;
            /* Extends slightly past the first and last column */
            z-index: 1;
        }

        /* --- Main Nodes (Circles) --- */
        .node {
            grid-row: 2;
            width: 12px;
            height: 12px;
            outline: 8px solid var(--Hell-Blau);
            background-color: var(--Blau);
            /* Overlaps line to create the "cut" effect */
            border-radius: 50%;
            justify-self: start;
            align-self: center;
            /* Align to the left of its respective column */
            z-index: 2;
        }

        /* --- Content Cards (Text & Black Box Container) --- */
        .card {
            position: relative;
            padding-left: 28px;
            /* Moves content to the right of the dotted line */
            display: flex;
            flex-direction: column;
        }

        /* Shared Pseudo-elements for the dotted line & small dot */
        .card::before,
        .card::after {
            content: "";
            position: absolute;
        }

        /* Dotted Line */
        .card::before {
            left: 4.5px;
            margin-top: auto;
            border-left: 3px dotted var(--Hell-Blau);
            height: calc(100% - 50px);
            z-index: 0;
        }

        /* Small Solid Dot */
        .card::after {
            left: -1.5px;
            width: 15px;
            height: 15px;
            background-color: #83c1e2;
            border-radius: 50%;
            z-index: 1;
        }

        /* --- Top Row Specifics --- */
        .card.top {
            grid-row: 1;
            align-self: stretch;
            padding-bottom: 50px;
        }

        .card.top::before {
            top: 12px;
            /* Centers visually with the text */
            bottom: -10px;
            /* Reaches exactly into the vertical center of the node */
        }

        .card.top::after {
            top: 55px;
        }

        /* --- Bottom Row Specifics --- */
        .card.bottom {
            grid-row: 3;
            align-self: stretch;
            /* Stretches to match the tallest bottom card */
            padding-top: 50px;
        }

        .card.bottom::before {
            top: -10px;
            /* Reaches UP exactly into the vertical center of the node */
            height: 120px;
            /* Extends downwards exactly to the small dot center */
        }

        .card.bottom::after {
            top: 103px;
            /* 30px padding + 8px visual offset */
        }

        /* --- Typography & Placeholder Box --- */
        .year {
            color: #ffffff;
            margin-bottom: 10px;
            line-height: 1;
            white-space: nowrap;
        }

        .box {
            min-height: 50px;
            width: 100%;
            flex-grow: 1;
        }

        /* Specific Grid Placements */
        .col-1 {
            grid-column: 1;
        }

        .col-2 {
            grid-column: 2;
        }

        .col-3 {
            grid-column: 3;
        }

        .col-4 {
            grid-column: 4;
        }

        .col-5 {
            grid-column: 5;
        }
        
        h2.year, div.box>p{
            color: #ffffff !important;
        }
        
        /* --- Responsive Vertical Layout --- */
        @media (max-width: 1024px) {
            .timeline-container {
                overflow-x: hidden;
                padding: 40px 15px; /* Adjust padding for mobile screens */
            }

            /* 3 columns: Left Content | Center Track | Right Content */
            .timeline-grid {
                grid-template-columns: 1fr 28px 1fr;
                grid-template-rows: repeat(5, auto);
                row-gap: 40px;
                padding: 0;
            }

            .track-line {
                grid-column: 2;
                grid-row: 1 / span 5;
                height: 100%;
                width: 12px;
                margin: 0;
                justify-self: center;
                align-self: stretch;
            }

            /* Fix specificity to properly override horizontal layout rows */
            .node.col-1, .card.col-1 { grid-row: 1; }
            .node.col-2, .card.col-2 { grid-row: 2; }
            .node.col-3, .card.col-3 { grid-row: 3; }
            .node.col-4, .card.col-4 { grid-row: 4; }
            .node.col-5, .card.col-5 { grid-row: 5; }

            .node {
                grid-column: 2;
                justify-self: center;
                align-self: start;
                margin-top: 4px; /* visually align with the heading */
            }
            
            .card .year {
                margin-top: -5px;
            }

            .card.top,
            .card.bottom {
                align-self: start;
                padding-top: 0;
                padding-bottom: 0;
            }

            /* Odd items go to left column */
            .card.col-1, .card.col-3, .card.col-5 {
                grid-column: 1;
                text-align: right;
                padding: 0 20px 0 0; /* spacing from center track */
                align-items: flex-end; /* right-align flex items */
            }

            /* Even items go to right column */
            .card.col-2, .card.col-4 {
                grid-column: 3;
                text-align: left;
                padding: 0 0 0 20px; /* spacing from center track */
                align-items: flex-start; /* left-align flex items */
            }

            /* Hide dotted line and small circle in vertical view */
            .card::before,
            .card::after {
                display: none;
            }
        }
        
        @media (max-width: 767px) {
            .timeline-container {
                overflow-x: hidden;
                padding: 40px 15px; /* Adjust padding for mobile screens */
            }

            /* 3 columns: Left Content | Center Track | Right Content */
            .timeline-grid {
                grid-template-columns: 28px 1fr;
                grid-template-rows: repeat(5, auto);
                row-gap: 40px;
                padding: 0;
            }

            .track-line {
                grid-column: 1;
                grid-row: 1 / span 5;
                height: 100%;
                width: 12px;
                margin: 0;
                justify-self: center;
                align-self: stretch;
            }

            /* Fix specificity to properly override horizontal layout rows */
            .node.col-1, .card.col-1 { grid-row: 1; }
            .node.col-2, .card.col-2 { grid-row: 2; }
            .node.col-3, .card.col-3 { grid-row: 3; }
            .node.col-4, .card.col-4 { grid-row: 4; }
            .node.col-5, .card.col-5 { grid-row: 5; }

            .node {
                grid-column: 1;
                justify-self: center;
                align-self: start;
                margin-top: 4px; /* visually align with the heading */
            }

            .card.top,
            .card.bottom {
                align-self: start;
                padding-top: 0;
                padding-bottom: 0;
            }

            /* Odd items go to left column */
            .card.col-1, .card.col-3, .card.col-5, .card.col-2, .card.col-4 {
                grid-column: 2;
                text-align: left;
                padding: 0 0 0 20px; /* spacing from center track */
                align-items: flex-start; /* left-align flex items */
            }

            /* Hide dotted line and small circle in vertical view */
            .card::before,
            .card::after {
                display: none;
            }
        }/* End custom CSS */