.mobile-feed.svelte-1xml9nr {
        width: 100%;
        /*margin-left: calc(-50vw + 50%);*/
    }

    .peek.svelte-1xml9nr { height: var(--peek); pointer-events: none; }

    /* (unused) .items > * {
        min-height: calc(100dvh - (var(--peek) * 2));
        display: grid;
        align-items: center;

        padding: calc(var(--gap) * 0.5) 16px;
        margin-top: var(--item-gap);

        scroll-snap-align: center;
        scroll-snap-stop: normal;

        transform: translateY(8px) scale(0.98);
        opacity: 0.85;
        transition: box-shadow 160ms ease;

        border-radius: var(--radius);
        overflow: clip;
        background: var(--surface, white);
    }*/

    /* (unused) .items > *:first-child { margin-top: 0; }*/

    @media (prefers-reduced-motion: reduce) {
        /* (unused) .items > * { transform: none; opacity: 1; }*/
    }

    .gauge.svelte-av12n4 {
        height: 100%;
        display: grid;
        align-items: end;
        pointer-events: none;
    }
    .track.svelte-av12n4 {
        position: relative;
        width: 1.75rem;
        margin-inline: auto;
        height: 100%;
        background: rgba(0,0,0,.00);
        overflow: clip;
    }
    .fill.svelte-av12n4 {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0;
        background: var(--neutral-warm-700);
        transition: height 220ms ease;
    }
    .ticks.svelte-av12n4 { position: absolute; inset: 0; }
    .tick.svelte-av12n4 {
        position: absolute;
        left: 100%;
        width: 10px;
        height: 1.5px;
        background: rgba(0,0,0,0.0);
        transform: translateY(calc((1 - var(--pos)) * 100%)) translateY(-0.75px);
    }


    .balance-overlay.svelte-a1pkay {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: fit-content;
        background: var(--neutral-warm-100);
        z-index: 10;
    }

    .balance.svelte-a1pkay {
        width: 100%;
        padding: 1rem 1rem 2rem;
        background: var(--neutral-warm-100);

        .balance-sum:where(.svelte-a1pkay){
            font-weight: 700;
            font-size: 1.75rem;
            color: var(--black);
            margin-right: 1rem;
            margin-top: 0.5rem;
        }

        .balance-last-amount:where(.svelte-a1pkay){
            font-weight: 300;
            color: var(--success-500);
            font-size: 1.25rem;
            margin-top: 0.5rem;
        }

        .balance-last-amount.minus:where(.svelte-a1pkay) {
            color: var(--warn-500);
        }
    }

    .vertical-gauge-wrapper.svelte-a1pkay {
        position: absolute;
        bottom: 100%;
        left: 0;
        height: 60dvh;

        &::before {
            content: "";
            position: absolute;
            bottom: 1rem;
            pointer-events: none;
            background-image: linear-gradient(to bottom, var(--neutral-warm-300) 0 1px, transparent 1px calc(100% / 20));
            background-size: 100% calc(100% / 20);
            background-repeat: repeat-y;
            width: 4rem;
            height: 100%;
        }
    }


    .buddy-card.svelte-a1pkay{
        background: white;
        border-radius: 2rem;
    }

    .buddy-img-wrapper.svelte-a1pkay {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .finance-buddy-img.svelte-a1pkay {
        width: 100%;
        height: auto;
        position: absolute;
        bottom: -100px;
        right: 20px;
        max-width: 500px;
    }

    .buddy-card-header.svelte-a1pkay{
        font-size: 3.5rem;
        text-align: start;
        color: var(--primary-dark);
        font-weight: 700;
        margin: 0;
        line-height: 5rem;
    }

    .buddy-offer-text.svelte-a1pkay{
        margin: 0.25rem 0 1.5rem 0;
    }

    @media(max-width: 600px) {

        .buddy-card.svelte-a1pkay{
            overflow: hidden;
        }

        .buddy-card-header.svelte-a1pkay{
            font-size: 2rem;
            text-align: start;
            color: var(--primary-dark);
            font-weight: 700;
            margin: 1.5rem 0 0 0;
            line-height: 2.75rem;
        }

        .buddy-offer-text.svelte-a1pkay{
            margin: 1rem 0;
        }

        .buddy-img-wrapper.svelte-a1pkay{
            position: relative;
            height: 180px;
        }

        .finance-buddy-img.svelte-a1pkay{
            position: absolute;
            width: 100%;
            bottom: -100px;
            right: -30px;
        }
    }

    .chart.svelte-a1pkay { width: min(100%); height: auto; min-height: 367px; display: block; margin: -45px 0 132px 0; overflow: visible; z-index: 1}

    .chart__line.svelte-a1pkay {
        fill: none;
        stroke: #333232;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: svelte-a1pkay-chart-draw 2s ease forwards;
        animation-delay: 0.7s;
    }
    @keyframes svelte-a1pkay-chart-draw { to { stroke-dashoffset: 0; } }

    .marker.svelte-a1pkay {
        fill: #fff;
        stroke: #333232;
        stroke-width: 4;
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(0.7);
        animation: svelte-a1pkay-marker-in 0.24s ease-out forwards;
        animation-delay: var(--delay, 1s);
    }
    @keyframes svelte-a1pkay-marker-in { to { opacity: 1; transform: scale(1); } }

    /*@media (prefers-reduced-motion: reduce) {*/
    /*    .chart__line { animation: none; stroke-dashoffset: 0; }*/
    /*    .marker { animation: none; opacity: 1; transform: none; }*/
    /*}*/

    .section-end-buffer.svelte-a1pkay{
        margin-bottom: 8rem;
    }

    .feed-guard.svelte-a1pkay {
        height: 1px;
        width: 100%;
        pointer-events: none;
    }

    .marker.svelte-a1pkay{
        z-index: 1;
    }

    .conn.svelte-a1pkay{
        position: absolute;
        z-index: 0;
    }

    .conn-1.svelte-a1pkay{
        top: 0px;
        left: 9px;
    }

    .conn-2.svelte-a1pkay{
        bottom: -5px;
        left: calc(100% - 12px);
    }

    .conn-3.svelte-a1pkay{
        bottom: -5px;
        right: 9px;
    }

    .conn-4.svelte-a1pkay{
        top: 5px;
        left: 5px;
    }

    .conn-5.svelte-a1pkay{
        bottom: 5px;
        left: calc(100% - 12px);
    }

    .conn-6.svelte-a1pkay{
        bottom: 5px;
        right: 9px;
    }

    @media(max-width: 1250px){
        .conn-1.svelte-a1pkay{
            top: -10px;
            left: 0px;
            transform: scale(0.94);
        }

        .conn-2.svelte-a1pkay{
            bottom: 10px;
            left: calc(100% - 16px);
        }

        .conn-3.svelte-a1pkay{
            bottom: 0px;
            right: 9px;
        }

        .conn-4.svelte-a1pkay{
            top: 0px;
            left: -2px;
            transform: scale(0.93);

        }

        .conn-5.svelte-a1pkay{
            bottom: 0px;
            left: calc(100% - 12px);
        }

        .conn-6.svelte-a1pkay{
            bottom: -5px;
            right: 9px;
        }
    }

    /* when the section is active */
    .saving-on.svelte-a1pkay {
        /* main path (1s delay + 3s draw) + extra lead-in before first connector */
        --saving-main-delay: 2.5s;        /* was 4.1s */
        --saving-lead-in: .25s;            /* extra pause before line-1 */
        --saving-stagger-step: .22s;       /* gap between each connector */
        --saving-conn-duration: 0.7s;      /* per-connector draw time */
    }

    /* base for all connectors */
    .conn.svelte-a1pkay path:where(.svelte-a1pkay) {
        stroke-dasharray: 1;
        stroke-dashoffset: var(--from, 1);
        animation: svelte-a1pkay-conn-draw var(--saving-conn-duration) ease forwards;
        animation-delay: calc(
                var(--saving-main-delay)
                + var(--saving-lead-in)
                + var(--stagger, 0s)
        );
    }

    /* order + direction (1..6). multiply index by the step to widen gaps */
    .conn-1.svelte-a1pkay { --from: -1; --stagger: calc(0  * var(--saving-stagger-step)); }
    .conn-2.svelte-a1pkay { --from:  1; --stagger: calc(1  * var(--saving-stagger-step)); }
    .conn-3.svelte-a1pkay { --from:  1; --stagger: calc(2  * var(--saving-stagger-step)); }
    .conn-4.svelte-a1pkay { --from: -1; --stagger: calc(3  * var(--saving-stagger-step)); }
    .conn-5.svelte-a1pkay { --from:  1; --stagger: calc(4  * var(--saving-stagger-step)); }
    .conn-6.svelte-a1pkay { --from:  1; --stagger: calc(5  * var(--saving-stagger-step)); }

    @keyframes svelte-a1pkay-conn-draw {
        from { stroke-dashoffset: var(--from); }
        to   { stroke-dashoffset: 0; }
    }

    /* optional: slower on large screens or when motion is reduced */
    @media (min-width: 1400px) {
        .saving-on.svelte-a1pkay {
            --saving-stagger-step: .28s;
            --saving-conn-duration: 1.2s;
        }
    }

    /* optional sanftes Einblenden
    @keyframes conn-fade { from { opacity: 0; } to { opacity: 1; } } */
    .marker.svelte-a1pkay rect:where(.svelte-a1pkay),
    .marker.svelte-a1pkay { fill: #fff; stroke: #333232; transition: fill .2s, stroke .2s; }

    /* hovered color */
    .marker.hovered.svelte-a1pkay rect:where(.svelte-a1pkay),
    .marker.hovered.svelte-a1pkay { fill: var(--secondary-orange); stroke: var(--secondary-orange); }

    /* connector lines */
    .conn.svelte-a1pkay path:where(.svelte-a1pkay) { stroke: #D8D2C5; transition: stroke .2s; }
    .conn.hovered.svelte-a1pkay path:where(.svelte-a1pkay) { stroke: var(--neutral-warm-300); } /* darker orange, tune as needed */

    .note-bottom.svelte-a1pkay{
        position: absolute;
        left: -1rem;
        bottom: 2rem;
        transform: rotate(-12deg);
    }
    .note-top.svelte-a1pkay{
        position: absolute;
        right: -3.5rem;
        top: -6.5rem;
        transform: rotate(12deg);
    }
    :root {
        --gain-in-dur: .26s;
        --gain-out-dur: .18s;
    }
    .account-gain-note.svelte-a1pkay{
        position: absolute;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transform: translateY(12px) scale(.98);
        transition-property: opacity, transform;
        transition-duration: var(--gain-out-dur), var(--gain-out-dur);
        transition-timing-function: ease, ease;
        will-change: transform, opacity;
        color: var(--success-500);
    }
    .account-gain-note.visible.svelte-a1pkay {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* overshoot on enter for a tiny bounce */
        transition-duration: var(--gain-in-dur), .34s;
        transition-timing-function: ease-out, cubic-bezier(.2, 1.35, .2, 1); /* bounce-y */
    }
    .gain-1.svelte-a1pkay{
        top: 200px;
        left: 220px;
    }

    .gain-2.svelte-a1pkay{
        top: 140px;
        left: 450px;
    }

    .gain-3.svelte-a1pkay{
        top: 100px;
        left: 610px;
    }

    .gain-4.svelte-a1pkay{
        top: 35px;
        left: 810px;
    }

    .gain-5.svelte-a1pkay{
        top: -30px;
        left: 1010px;
    }