.timeline-blob-left.svelte-1kksmy5{
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        background-color: var(--neutral-warm-300);
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(50%);
        right: 100%;
        z-index: 3;
    }

    .timeline-blob-right.svelte-1kksmy5{
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        background-color: var(--neutral-warm-300);
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 100%;
        z-index: 3;

    }

    .timeline-blob-center.svelte-1kksmy5{
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 50%;
        background-color: var(--neutral-warm-300);
        z-index: 3;

    }

    .timeline-line.svelte-1kksmy5{
        height: 2px;
        width: 100%;
        background-color: var(--neutral-warm-300);
        border-radius: 50%;
    }

    .timeline-vertical-line.svelte-1kksmy5{
        position: absolute;
        left: 50%;
        top: 0;
        height: 100%;
        width: 3px;
        background-color: transparent;
        z-index: -1;
    }

    .left-offset.svelte-1kksmy5{
        transform: translateX(-100%);
    }

    .timeline-spacer.svelte-1kksmy5 {
        position: relative;
        height: 9rem;
        width: 100%;
    }

    .timeline-endspacer.svelte-1kksmy5 {
        position: relative;
        height: 9rem;
        width: 100%;
    }

    .timeline-note-left.svelte-1kksmy5{
        position:absolute;
        right: 105%;
        top: 50%;
        transform: translateY(-50%);
    }

    .timeline-note-right.svelte-1kksmy5{
        position: absolute;
        left: 105%;
        top: 50%;
        transform: translateY(-50%);
    }

    /* (unused) .note-top{
        position: absolute;
        bottom: 20px;
        right: 20px;
    }*/

    /* (unused) .note-top-extra{
        position: absolute;
        bottom: 50px;
        right: 20px;
    }*/

    .timeline-grid.svelte-1kksmy5{
        gap:0 !important;
        position: relative;
    }

    .timeline-step.svelte-1kksmy5{
        font-size: 1rem;
        font-weight: 600;
        color: var(--neutral-warm-300);
        margin: 0;
    }

    .timeline-central-line.svelte-1kksmy5{
        position: absolute;
        left: 50%;
        top: 2.875rem;
        height: 80%;
        width: 3px;
        background-color: transparent;
        transform: translateX(-50%);
    }

    .timeline-closer.svelte-1kksmy5{
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    @media(max-width: 600px){
        .timeline-spacer.svelte-1kksmy5 {
            position: relative;
            height: 12rem;
            width: 100%;
        }


        .timeline-closer.svelte-1kksmy5{
            position: relative;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .closer-floating-scribble.svelte-1kksmy5 {
            position: absolute;
            top: calc(100% + 1rem);
        }
    }

    @media(max-width: 1150px){
        .timeline-note-right.svelte-1kksmy5{
            left: -10px;
            top: -85px;
            transform: rotate(-5deg);
        }

        .timeline-note-left.svelte-1kksmy5{
            right: -10px;
            top: -85px;
            transform: rotate(5deg);

        }
    }

    .timeline-scribble-mobile.svelte-1kksmy5{
        position: absolute;
        right:0;
        transform: translateY(-50%) rotate(5deg);
        max-width: 200px;
        text-align: center;
    }

    .end-blob.svelte-1kksmy5{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background-color: var(--neutral-warm-200);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .timeline-spacer.svelte-1kksmy5 {
        position: relative;
        height: 9rem;
        width: 100%;
    }


    /* (unused) .timeline-curve {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
    }*/

    /* (unused) .timeline-curve path {
        fill: none;
        stroke: var(--neutral-warm-200);
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }*/

    .timeline-line.svelte-1kksmy5 {
        transform: scaleX(0); /* initial neutral; Action setzt zurück */
        transform-origin: left center;
        will-change: transform;
    }

    /* optional: glatterer Pfad-Draw, falls Browser keinen WAAPI auf Pfad mögen */
    /* (unused) .timeline-curve path {
        stroke-linecap: round;
    }*/




    .timeline-grid.svelte-1kksmy5 {
        --reveal-dur: 1s;
        --blob-dur: .28s;
        --easing: ease;
        --on: var(--primary-dark);
    }

    .blob-on.svelte-1kksmy5 {
        animation:
                svelte-1kksmy5-blob-color 1ms linear forwards,
                svelte-1kksmy5-blob-pop var(--blob-dur) ease-out forwards;
    }
    @keyframes svelte-1kksmy5-blob-color { to { background-color: var(--on); } }
    @keyframes svelte-1kksmy5-blob-pop   { 0%{transform:scale(1)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }

    .delay-0.svelte-1kksmy5{ --d: 0s; }
    .delay-1.svelte-1kksmy5{ --d: .2s; }
    .delay-2.svelte-1kksmy5{ --d: .4s; }
    .delay-3.svelte-1kksmy5{ --d: .66s; }
    .delay-4.svelte-1kksmy5{ --d: 2.16s; }
    .delay-5.svelte-1kksmy5{ --d: 2.32s; }
    .delay-6.svelte-1kksmy5{ --d: 2.48s; }


    .timeline-line.svelte-1kksmy5,
    .timeline-vertical-line.svelte-1kksmy5 {
        transform: none !important;
        will-change: clip-path;
    }

    /* 2.1: registriere eine animierbare Custom Property für Scale */
    @property --blobScale {
        syntax: '<number>';
        inherits: false;
        initial-value: 1;
    }

    /* 2.2: Blobs bekommen die Positionstranslate + scale(var(--blobScale)) */
    .timeline-blob-left.svelte-1kksmy5,
    .timeline-blob-right.svelte-1kksmy5,
    .timeline-blob-center.svelte-1kksmy5 {
        transform-origin: center center;
    }

    .timeline-blob-right.svelte-1kksmy5 {
        transform: translateY(-50%) translateX(-50%) scale(var(--blobScale, 1));
    }
    .timeline-blob-left.svelte-1kksmy5 {
        transform: translateY(-50%) translateX(50%) scale(var(--blobScale, 1));
    }

    .timeline-blob-center.svelte-1kksmy5 {
        transform: scale(var(--blobScale, 1));
    }

    .blob-on.svelte-1kksmy5 {
        animation-name: svelte-1kksmy5-blob-color, svelte-1kksmy5-blob-scale-pop;
        animation-duration: 1ms, var(--blob-dur, .28s);
        animation-timing-function: linear, ease-out;
        animation-fill-mode: forwards, forwards;
        animation-delay: var(--bd, var(--d, 0s)), var(--bd, var(--d, 0s));
    }

    @keyframes svelte-1kksmy5-blob-color {
        to { background-color: var(--on, var(--primary-dark)); }
    }

    @keyframes svelte-1kksmy5-blob-scale-pop {
        0%   { --blobScale: 1; }
        60%  { --blobScale: 1.12; }
        100% { --blobScale: 1; }
    }

    .reveal-x-from-left.svelte-1kksmy5 {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
        animation-name: svelte-1kksmy5-rev-x-left;
        animation-duration: var(--reveal-dur, .6s);
        animation-timing-function: var(--easing, ease);
        animation-fill-mode: forwards;
        animation-delay: var(--d, 0s);
    }
    @keyframes svelte-1kksmy5-rev-x-left {
        to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
    }

    .reveal-x-from-right.svelte-1kksmy5 {
        clip-path: inset(0 0 0 100%);
        -webkit-clip-path: inset(0 0 0 100%);
        animation-name: svelte-1kksmy5-rev-x-right;
        animation-duration: var(--reveal-dur, .6s);
        animation-timing-function: var(--easing, ease);
        animation-fill-mode: forwards;
        animation-delay: var(--d, 0s);
    }
    @keyframes svelte-1kksmy5-rev-x-right {
        to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
    }


    .reveal-y-top.svelte-1kksmy5{
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
        animation-name: svelte-1kksmy5-rev-y-top;
        animation-duration: 5s;
        /*animation-timing-function: var(--easing, ease);*/
        animation-fill-mode: forwards;
        animation-delay: var(--d, 0s);
        will-change: clip-path;
    }
    @keyframes svelte-1kksmy5-rev-y-top {
        to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
    }
    @keyframes svelte-1kksmy5-line-color { to { background-color: var(--primary-dark); } }

    /* (unused) .line-stroke-on {
        animation: stroke-primary 1ms linear forwards;
    }*/
    @keyframes svelte-1kksmy5-stroke-primary { to { stroke: var(--primary-dark); } }
    .timeline-line.svelte-1kksmy5,
    .timeline-vertical-line.svelte-1kksmy5 { transform: none !important; }

    .timeline-line.svelte-1kksmy5,
    .timeline-vertical-line.svelte-1kksmy5 { background-color: transparent }

    .reveal-x-from-left.svelte-1kksmy5,
    .reveal-x-from-right.svelte-1kksmy5,
    .reveal-y-top.svelte-1kksmy5 { background-color: var(--primary-dark) !important; }




    .connector.svelte-1kksmy5 { width: 100%; height: 103%; display: block; pointer-events: none; z-index: 0; position: relative; }
    .timeline-vertical-line.svelte-1kksmy5 { z-index: 1; }
    .timeline-blob-center.svelte-1kksmy5 { z-index: 2; }

    .reveal-y-top.svelte-1kksmy5{
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
        animation-name: svelte-1kksmy5-rev-y-top;
        animation-duration: var(--reveal-dur, .8s);
        animation-timing-function: var(--easing, ease);
        animation-fill-mode: forwards;
        animation-delay: 0s;
        will-change: clip-path;
    }

    @keyframes svelte-1kksmy5-rev-y-top { to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } }

    .blob-on.svelte-1kksmy5 {
        --blob-dur: var(--mob-blob-dur);
        animation-name: svelte-1kksmy5-blob-color, svelte-1kksmy5-blob-scale-pop;
        animation-duration: 1ms, var(--blob-dur);
        animation-timing-function: linear, ease-out;
        animation-fill-mode: forwards, forwards;
        animation-delay: 0s, 0s;
    }

    :root{
        --connector-width: 3px;
        --connector-mask-expand: 6px;
        --connector-dur: .52s;
    }
    .connector.svelte-1kksmy5{ overflow: visible; pointer-events: none; }

    .connector-stroke.svelte-1kksmy5{
        fill: none;
        stroke: var(--primary-dark);
        stroke-width: 3;
        vector-effect: non-scaling-stroke;
        shape-rendering: geometricPrecision;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* (unused) .connector-mask-path{
        fill:none;
        stroke: #fff;
        stroke-width: calc(var(--connector-width) + var(--connector-mask-expand));
        vector-effect: non-scaling-stroke;
        shape-rendering: geometricPrecision;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }*/


    /* (unused) .connector-mask-path.draw{
        animation: conn-mask var(--connector-dur) ease forwards;
    }*/

    @keyframes svelte-1kksmy5-conn-mask{ to{ stroke-dashoffset: 0; } }
    @keyframes svelte-1kksmy5-connector-dash { to { stroke-dashoffset: 0; } }
    @keyframes svelte-1kksmy5-connector-color { to { stroke: var(--primary-dark); } }

    @media (prefers-reduced-motion: reduce) {
        /*.connector .connector-path.draw {*/
        /*    animation: none;*/
        /*    stroke-dashoffset: 0;*/
        /*    stroke: var(--primary-dark);*/
        /*}*/
    }

    .reveal-x-from-left.svelte-1kksmy5,
    .reveal-x-from-right.svelte-1kksmy5,
    .reveal-y-top.svelte-1kksmy5 { background-color: var(--primary-dark) !important; }
    .timeline-line.svelte-1kksmy5, .timeline-vertical-line.svelte-1kksmy5 { background: transparent }


    .connector-mask-wipe.svelte-1kksmy5{
        transform-box: fill-box;
        transform-origin: 0 100%;
        transform: scaleY(1);
        will-change: transform;
    }

    .connector-mask-wipe.play.svelte-1kksmy5{
        animation-name: svelte-1kksmy5-conn-wipe;
        animation-duration: var(--dur, var(--connector-dur));
        animation-timing-function: var(--easing, linear);
        animation-delay: var(--delay, 0s);
        animation-fill-mode: forwards;
    }

    @keyframes svelte-1kksmy5-conn-wipe{
        to { transform: scaleY(0); }
    }

    .line-dur.svelte-1kksmy5{
        --reveal-dur: .9s;
        --easing: linear;
    }