:root {
    --header-height: 80px;
    --shadow-banner: 0px 0px 20px 6px rgba(0, 0, 0, .2);
    --banner-minvh: 24svh;
    --banner-maxvh: 86svh;
    --landing-height: clamp(
            var(--banner-minvh),
            min(calc(100svh - var(--header-height)), calc(100vw * 9 / 16)),
            var(--banner-maxvh)
    );
    --tile-scale: 1;
    --tile-extra-scale: 1;
}

@property --introScale { syntax: "<number>"; initial-value: 1; inherits: false; }
@property --flyX { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --flyY { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --flyR { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --idleX { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --idleY { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --idleR { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --idleAmp { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --introX { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --introY { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --introR { syntax: "<angle>"; initial-value: 0deg; inherits: false; }


html, body { width: 100%; max-width: 100%; overflow-x: clip; }
.landing-banner{
    margin-top: var(--header-height);
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: #E8D7B0;
    position: relative;
    overflow: hidden;
    container-type: size;
    perspective: 1200px;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, .2);
    z-index: 1;
}
/* Alte Safari: definiere Tile-Positions-Variablen ohne cqw/cqh */
@supports not (width: 1cqw){
    #tile-red{
        --w: calc(53 * var(--cqw));  --top: calc(-55 * var(--cqh));  --left: calc(31 * var(--cqw));
        --top-adjust: calc(-89 * var(--cqh));  --left-adjust: 0px;
        --top-adjust-w: calc(200 * var(--cqh)); --left-adjust-w: 0px;
    }
    #tile-yellow{
        --w: calc(52 * var(--cqw));  --top: calc(-13.5 * var(--cqh)); --left: calc(-18.5 * var(--cqw));
        --top-adjust: calc(-59 * var(--cqh));  --left-adjust: calc(12 * var(--cqw));
        --top-adjust-w: calc(150 * var(--cqh)); --left-adjust-w: 0px;
    }
    #tile-purple{
        --w: calc(59 * var(--cqw));  --top: calc(28.5 * var(--cqh));  --left: calc(65.5 * var(--cqw));
        --top-adjust: calc(-119 * var(--cqh)); --left-adjust: calc(-8 * var(--cqw));
        --top-adjust-w: 0px; --left-adjust-w: 0px;
    }
    #tile-green{
        --w: calc(49 * var(--cqw));  --top: calc(63 * var(--cqh));    --left: calc(1 * var(--cqw));
        --top-adjust: calc(-75 * var(--cqh));  --left-adjust: calc(4 * var(--cqw));
        --top-adjust-w: calc(-10 * var(--cqh)); --left-adjust-w: 0px;
    }
}

/* CQ-Units Fallback: auf alten Safari -> 1vw/1vh */
:root{ --cqw: 1cqw; --cqh: 1cqh; }
@supports not (width: 1cqw){
    :root{ --cqw: 1vw; --cqh: 1vh; }
}

/* Individual-Transforms Fallback (am besten ganz am Ende der CSS noch einmal setzen) */
@supports not (translate: 0){
    .puzzle-tiles{
        /* additiv zusammenführen, damit Idle auch auf alten Safari greift */
        transform:
                translate(calc(var(--flyX) + var(--idleX)), calc(var(--flyY) + var(--idleY)))
                rotate(calc(var(--rot, 0deg) + var(--flyR) + var(--idleR)))
                scale(calc(var(--tile-extra-scale) * var(--tile-scale)));
    }
}
.landing-banner.no-fly .puzzle-tiles { animation: none !important; }

@media (min-width: 1024px) and (min-aspect-ratio: 16/10){
    .landing-banner{ height: calc(100svh - var(--header-height)); }
}

/*@supports (aspect-ratio: 1 / 1) {*/
/*    .landing-banner { aspect-ratio: 16 / 9; }*/
/*}*/

@media (max-width: 640px), (max-aspect-ratio: 3/4){
    .landing-banner{ --banner-maxvh: 72svh; width: unset; max-width: unset; }
}
@media (max-height: 620px) {
    #nrp-logo-main {
        padding-top: 4em
    }
}

#landing-tiles{ position: absolute; inset: 0; filter: none; }

/* vorhandener Block .puzzle-tiles … */
.puzzle-tiles{
    position: absolute;
    transform-origin: center;
    transition: none;
    opacity: 0;

    /* NEU: Idle separat über Individual-Transforms (additiv) */
    translate: var(--idleX) var(--idleY);
    rotate:    var(--idleR);

    /* Intro/Fly/Scale bleiben in der normalen transform-Kette */
    transform:
            translate(var(--flyX), var(--flyY))
            rotate(calc(var(--rot, 0deg) + var(--flyR)))
            scale(calc(var(--tile-extra-scale) * var(--tile-scale)));

    filter: drop-shadow(var(--tileShadowX, 0px) var(--tileShadowY, 16px) var(--tileShadowBlur, 6px) var(--tileShadowColor, rgba(0,0,0,.22)));
}

/* Fallback für sehr alte Browser ohne Individual-Transforms */
@supports not (translate: 0) {
    .puzzle-tiles{
        transform:
                translate(calc(var(--flyX) + var(--idleX)), calc(var(--flyY) + var(--idleY)))
                rotate(calc(var(--rot, 0deg) + var(--flyR) + var(--idleR)))
                scale(calc(var(--tile-extra-scale) * var(--tile-scale)));
    }
}

    /* Während Idle keine transform-Transition (sonst „klebt“ es) */
    .landing-banner.is-idle .puzzle-tiles{
        transition:
                filter .28s ease,
                z-index .28s linear,
                top .28s ease, left .28s ease;
    }

.landing-banner.is-ready .puzzle-tiles{
    transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            filter .28s ease,
            z-index .28s linear,
            top .28s ease, left .28s ease;
}

/* RED */
#tile-red{
    --w: 53cqw; --top: -55cqh; --left: 31cqw;
    --top-adjust: -89cqh;
    --left-adjust: 0cqw;
    /* NEU: width-basierte Justage (Standard 0) */
    --top-adjust-w: 200cqh;
    --left-adjust-w: 0cqw;

    width: var(--w);
    top:  calc(
            var(--top)
            + var(--top-adjust)    * (1 - var(--tile-scale))
            + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale))
    );
    left: calc(
            var(--left)
            + var(--left-adjust)   * (1 - var(--tile-scale))
            + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale))
    );
    --rot: 280deg;
    animation: fly-red 1.1s cubic-bezier(.22,.61,.36,1) 0s forwards;
}

/* YELLOW */
#tile-yellow{
    --w: 52cqw; --top: -13.5cqh; --left: -18.5cqw;
    --top-adjust: -59cqh;
    --left-adjust: 12cqw;
    --top-adjust-w: 150cqh;      /* NEU */
    --left-adjust-w: 0cqw;     /* NEU */

    width: var(--w);
    top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
    left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
    --rot: 9deg;
    animation: fly-yellow 1.1s cubic-bezier(.22,.61,.36,1) .05s forwards;
}

/* PURPLE */
#tile-purple{
    --w: 59cqw; --top: 28.5cqh; --left: 65.5cqw;
    --top-adjust: -119cqh;
    --left-adjust: -8cqw;
    --top-adjust-w: 0cqh;      /* NEU */
    --left-adjust-w: 0cqw;     /* NEU */

    width: var(--w);
    top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
    left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
    --rot: 53deg;
    animation: fly-purple 1.1s cubic-bezier(.22,.61,.36,1) .1s forwards;
}

/* GREEN */
#tile-green{
    --w: 49cqw; --top: 63cqh; --left: 1cqw;
    --top-adjust: -75cqh;
    --left-adjust: 4cqw;
    --top-adjust-w: -10cqh;      /* NEU */
    --left-adjust-w: 0cqw;     /* NEU */

    width: var(--w);
    top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
    left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
    --rot: -12deg;
    animation: fly-green 1.1s cubic-bezier(.22,.61,.36,1) .15s forwards;
}

#nrp-logo-main{
    display: block;
    margin-left: auto; margin-right: auto;
    width: calc(30cqw * var(--tile-scale));
    margin-top: calc(26cqh * var(--tile-scale));
    opacity: 0;
    --introScale: .7;
    animation: logo-scale-in .7s cubic-bezier(.22,.61,.36,1) 1.1s both;
    transform: scale(var(--introScale)) rotateX(var(--tiltY, 0deg)) rotateY(var(--tiltX, 0deg)) translateZ(0);
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    transition: filter 140ms ease;
    will-change: transform, filter;
}

#nrp-logo-main.tilt-ready{
    transition: transform 140ms cubic-bezier(.22,.61,.36,1), filter 140ms ease;
}

#landing-banner-title{
    position: relative;
    width: max-content;
    margin: 0 auto;
    margin-top: calc(-1cqh * var(--tile-scale));
    font-size: calc(2.2cqw * var(--tile-scale));
    font-weight: 700;
    opacity: 0;
    transform: translateY(0) scale(1);
    animation: title-in .5s ease-out 1.8s both;
    transform-origin: 50% 0%;
}
/*@media (max-height: 700px) {*/
/*    #nrp-logo-main{*/
/*        width: calc(23cqw * var(--tile-scale));*/
/*        margin-top: calc(17cqh * var(--tile-scale));*/
/*    }*/
/*    #tile-purple {*/
/*        --w: 38cqw;*/
/*    }*/
/*    #tile-yellow {*/
/*        --w: 38cqw;*/
/*    }*/
/*    #tile-red {*/
/*        --w: 38cqw;*/
/*    }*/
/*    #tile-green {*/
/*        --w: 38cqw;*/
/*    }*/
/*}*/
@media screen and (max-width: 1000px){
    #nrp-logo-main{
        width: calc(33cqw * var(--tile-scale));
        margin-top: calc(30cqh * var(--tile-scale));
    }
    #landing-banner-title{
        margin-top: calc(1cqh * var(--tile-scale));
        font-size: calc(3cqw * var(--tile-scale));
    }
    #tile-purple{
        --w: 66cqw;
        --top-adjust-w: 96cqh;
        --left-adjust-w: -51cqw;
    }
    #tile-green {
        --w: 66cqw;
        --top-adjust-w: 11cqh;
        --left-adjust-w: -100cqw;
    }
    #tile-yellow {
        --w: 66cqw;
        --top-adjust-w: 77cqh;
        --left-adjust-w: -50cqw;
    }
    #tile-red {
        --w: 66cqw;
        --top-adjust-w: 149cqh;
        --left-adjust-w: 0cqw;
    }
}
@media screen and (max-width: 700px){
    #nrp-logo-main{
        width: calc(50cqw * var(--tile-scale));
        margin-top: calc(30cqh * var(--tile-scale));
    }
    #landing-banner-title{
        margin-top: calc(1cqh * var(--tile-scale));
        font-size: calc(4cqw * var(--tile-scale));
    }
    #tile-purple{
        --w: 94cqw;
        --top-adjust-w: 96cqh;
        --left-adjust-w: -51cqw;
    }
    #tile-green {
        --w: 94cqw;
        --top-adjust-w: 11cqh;
        --left-adjust-w: -143cqw;
    }
    #tile-yellow {
        --w: 94cqw;
        --top-adjust-w: 50cqh;
        --left-adjust-w: -125cqw;
    }
    #tile-red {
        --w: 94cqw;
        --top-adjust-w: 126cqh;
        --left-adjust-w: 0cqw;
    }
}
@media screen and (max-width: 500px){
    #nrp-logo-main{
        width: calc(50cqw * var(--tile-scale));
        margin-top: calc(30cqh * var(--tile-scale));
    }
    #landing-banner-title{
        margin-top: calc(1cqh * var(--tile-scale));
        font-size: calc(4cqw * var(--tile-scale));
    }
    #tile-purple{
        --w: 94cqw;
        --top-adjust-w: 96cqh;
        --left-adjust-w: -51cqw;
    }
    #tile-green {
        --w: 94cqw;
        --top-adjust-w: 11cqh;
        --left-adjust-w: -143cqw;
    }
    #tile-yellow {
        --w: 94cqw;
        --top-adjust-w: 52cqh;
        --left-adjust-w: -122cqw;
    }
    #tile-red {
        --w: 94cqw;
        --top-adjust-w: 149cqh;
        --left-adjust-w: 0cqw;
    }
}

@keyframes fly-red    { from { --flyY:-40cqh; --flyR:-32deg; opacity:0; } to { --flyY:0; --flyR:0deg; opacity:1; } }
@keyframes fly-yellow { from { --flyX:-40cqw; --flyR:-30deg; opacity:0; } to { --flyX:0;  --flyR:0deg; opacity:1; } }
@keyframes fly-purple { from { --flyX: 40cqw; --flyR: 30deg; opacity:0; } to { --flyX:0;  --flyR:0deg; opacity:1; } }
@keyframes fly-green  { from { --flyY: 40cqh; --flyR:-30deg; opacity:0; } to { --flyY:0; --flyR:0deg; opacity:1; } }

@keyframes logo-scale-in{ from { --introScale: .7; opacity: 0; } to { --introScale: 1; opacity: 1; } }
@keyframes title-in    { from { transform: translateY(2cqh) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce){
    .puzzle-tiles, #nrp-logo-main, #landing-banner-title{ animation: none !important; opacity: 1 !important; }
    #landing-banner-title{ transform: none !important; }
    .puzzle-tiles{ transition: none !important; }
}

#second-banner { background:#F0EBD5;}
#second-banner h1 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 2em;
}
#background-1 {
    position: absolute;
    width: 10%;
    left: -4em;
}
#background-2 {
    position: absolute;
    width: 10%;
    right: -4em;
}
.graph-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50vh;
    padding-bottom: 20em;
    transform: scale(0.9);
    /*margin-top: 14em;*/
    margin-left: auto;
    margin-right: auto;
}
.js-draw-svg {
    scale: 0.7;
}

/* Nur für den Masken-Wischer; Animations-Logik macht JS (Web Animations API) */
.js-draw-svg .mask-stroke{
    fill: none;
    stroke: #fff;
    /* runde Kappe wirkt optisch smoother an Kurven */
    stroke-linecap: round;
    stroke-linejoin: round;
    will-change: stroke-dashoffset;
    transition: none !important; /* verhindert versehentliches „Nachfedern“ */
}

/* Ellipse bleibt aus bis zum Finish; kein Transition-Delay */
.js-draw-svg .red-dot{ opacity: 0; transition: none; }
.clock-svg {
    scale: 1.5;
}


@media (max-height: 1000px) {
    .graph-time {
        transform: scale(0.8);
    }
}
@media (max-height: 768px){
    .graph-time {
        transform: scale(0.6);
    }
    .js-draw-svg {
        scale: 0.8;
    }
}
@media (max-height: 800px){
    .graph-time {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50vh;
        margin-bottom: 5em;
        transform: scale(0.5);
        margin-top: -3em;
    }
    .graph-time {
        padding: unset;
    }

}
@media (max-height: 600px){
    .graph-time {
        margin-top: 0;
        scale: 1;
    }
}
@media (max-width: 1400px) {
    .js-draw-svg {
        scale: 1;
    }
}
@media (max-width: 1180px){
    .js-draw-svg {
        scale: 1;
    }
}
@media (max-width: 1000px) {:root {
    --header-height: 80px;
    --shadow-banner: 0px 0px 20px 6px rgba(0, 0, 0, .2);
    --banner-minvh: 24svh;
    --banner-maxvh: 86svh;
    --landing-height: clamp(
            var(--banner-minvh),
            min(calc(100svh - var(--header-height)), calc(100vw * 9 / 16)),
            var(--banner-maxvh)
    );
    --tile-scale: 1;
    --tile-extra-scale: 1;
}

    @property --introScale { syntax: "<number>"; initial-value: 1; inherits: false; }
    @property --flyX { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
    @property --flyY { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
    @property --flyR { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    @property --idleX { syntax: "<length>"; initial-value: 0px; inherits: false; }
    @property --idleY { syntax: "<length>"; initial-value: 0px; inherits: false; }
    @property --idleR { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    @property --idleAmp { syntax: "<number>"; initial-value: 0; inherits: true; }

    html, body { width: 100%; max-width: 100%; overflow-x: clip; }
    .landing-banner{
        margin-top: var(--header-height);
        width: 100%;
        max-width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: #E8D7B0;
        position: relative;
        overflow: hidden;
        container-type: size;
        perspective: 1200px;
        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, .2);
        z-index: 1;
    }

    .landing-banner.no-fly .puzzle-tiles { animation: none !important; }

    @media (min-width: 1024px) and (min-aspect-ratio: 16/10){
        .landing-banner{ height: calc(100svh - var(--header-height)); }
    }

    /*@supports (aspect-ratio: 1 / 1) {*/
    /*    .landing-banner { aspect-ratio: 16 / 9; }*/
    /*}*/

    @media (max-width: 640px), (max-aspect-ratio: 3/4){
        .landing-banner{ --banner-maxvh: 72svh; width: unset; max-width: unset; }
    }
    @media (max-height: 620px) {
        #nrp-logo-main {
            padding-top: 4em
        }
    }

    #landing-tiles{ position: absolute; inset: 0; filter: none; }

    .puzzle-tiles{
        position: absolute;
        transform-origin: center;
        transition: none;
        opacity: 0;
        --s: 1;
        transform:
                translate(
                        calc(var(--flyX) + var(--idleX)),
                        calc(var(--flyY) + var(--idleY))
                )
                rotate(calc(var(--rot, 0deg) + var(--flyR) + var(--idleR)))
                scale(calc(var(--tile-extra-scale) * var(--tile-scale)));
        filter: drop-shadow(var(--tileShadowX, 0px) var(--tileShadowY, 16px) var(--tileShadowBlur, 6px) var(--tileShadowColor, rgba(0,0,0,.22)));
    }

    /* Während Idle keine transform-Transition (sonst „klebt“ es) */
    .landing-banner.is-idle .puzzle-tiles{
        transition:
                filter .28s ease,
                z-index .28s linear,
                top .28s ease, left .28s ease;
    }

    .landing-banner.is-ready .puzzle-tiles{
        transition:
                transform .28s cubic-bezier(.22,.61,.36,1),
                filter .28s ease,
                z-index .28s linear,
                top .28s ease, left .28s ease;
    }

    /* RED */
    #tile-red{
        --w: 53cqw; --top: -55cqh; --left: 31cqw;
        --top-adjust: -89cqh;
        --left-adjust: 0cqw;
        /* NEU: width-basierte Justage (Standard 0) */
        --top-adjust-w: 200cqh;
        --left-adjust-w: 0cqw;

        width: var(--w);
        top:  calc(
                var(--top)
                + var(--top-adjust)    * (1 - var(--tile-scale))
                + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale))
        );
        left: calc(
                var(--left)
                + var(--left-adjust)   * (1 - var(--tile-scale))
                + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale))
        );
        --rot: 280deg;
        animation: fly-red 1.1s cubic-bezier(.22,.61,.36,1) 0s forwards;
    }

    /* YELLOW */
    #tile-yellow{
        --w: 52cqw; --top: -13.5cqh; --left: -18.5cqw;
        --top-adjust: -59cqh;
        --left-adjust: 12cqw;
        --top-adjust-w: 150cqh;      /* NEU */
        --left-adjust-w: 0cqw;     /* NEU */

        width: var(--w);
        top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
        left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
        --rot: 9deg;
        animation: fly-yellow 1.1s cubic-bezier(.22,.61,.36,1) .05s forwards;
    }

    /* PURPLE */
    #tile-purple{
        --w: 59cqw; --top: 28.5cqh; --left: 65.5cqw;
        --top-adjust: -119cqh;
        --left-adjust: -8cqw;
        --top-adjust-w: 0cqh;      /* NEU */
        --left-adjust-w: 0cqw;     /* NEU */

        width: var(--w);
        top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
        left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
        --rot: 53deg;
        animation: fly-purple 1.1s cubic-bezier(.22,.61,.36,1) .1s forwards;
    }

    /* GREEN */
    #tile-green{
        --w: 49cqw; --top: 63cqh; --left: 1cqw;
        --top-adjust: -75cqh;
        --left-adjust: 4cqw;
        --top-adjust-w: -10cqh;      /* NEU */
        --left-adjust-w: 0cqw;     /* NEU */

        width: var(--w);
        top:  calc(var(--top)  + var(--top-adjust)  * (1 - var(--tile-scale)) + var(--top-adjust-w, 0cqh) * (1 - var(--tile-extra-scale)));
        left: calc(var(--left) + var(--left-adjust) * (1 - var(--tile-scale)) + var(--left-adjust-w, 0cqw) * (1 - var(--tile-extra-scale)));
        --rot: -12deg;
        animation: fly-green 1.1s cubic-bezier(.22,.61,.36,1) .15s forwards;
    }

    #nrp-logo-main{
        display: block;
        margin-left: auto; margin-right: auto;
        width: calc(30cqw * var(--tile-scale));
        margin-top: calc(26cqh * var(--tile-scale));
        opacity: 0;
        --introScale: .7;
        animation: logo-scale-in .7s cubic-bezier(.22,.61,.36,1) 1.1s both;
        transform: scale(var(--introScale)) rotateX(var(--tiltY, 0deg)) rotateY(var(--tiltX, 0deg)) translateZ(0);
        transform-origin: 50% 0%;
        transform-style: preserve-3d;
        transition: filter 140ms ease;
        will-change: transform, filter;
    }

    #nrp-logo-main.tilt-ready{
        transition: transform 140ms cubic-bezier(.22,.61,.36,1), filter 140ms ease;
    }

    #landing-banner-title{
        position: relative;
        width: max-content;
        margin: 0 auto;
        margin-top: calc(-1cqh * var(--tile-scale));
        font-size: calc(2.2cqw * var(--tile-scale));
        font-weight: 700;
        opacity: 0;
        transform: translateY(0) scale(1);
        animation: title-in .5s ease-out 1.8s both;
        transform-origin: 50% 0%;
    }
    /*@media (max-height: 700px) {*/
    /*    #nrp-logo-main{*/
    /*        width: calc(23cqw * var(--tile-scale));*/
    /*        margin-top: calc(17cqh * var(--tile-scale));*/
    /*    }*/
    /*    #tile-purple {*/
    /*        --w: 38cqw;*/
    /*    }*/
    /*    #tile-yellow {*/
    /*        --w: 38cqw;*/
    /*    }*/
    /*    #tile-red {*/
    /*        --w: 38cqw;*/
    /*    }*/
    /*    #tile-green {*/
    /*        --w: 38cqw;*/
    /*    }*/
    /*}*/
    @media screen and (max-width: 1000px){
        #nrp-logo-main{
            width: calc(33cqw * var(--tile-scale));
            margin-top: calc(30cqh * var(--tile-scale));
        }
        #landing-banner-title{
            margin-top: calc(1cqh * var(--tile-scale));
            font-size: calc(3cqw * var(--tile-scale));
        }
        #tile-purple{
            --w: 66cqw;
            --top-adjust-w: 96cqh;
            --left-adjust-w: -51cqw;
        }
        #tile-green {
            --w: 66cqw;
            --top-adjust-w: 11cqh;
            --left-adjust-w: -100cqw;
        }
        #tile-yellow {
            --w: 66cqw;
            --top-adjust-w: 77cqh;
            --left-adjust-w: -50cqw;
        }
        #tile-red {
            --w: 66cqw;
            --top-adjust-w: 149cqh;
            --left-adjust-w: 0cqw;
        }
    }
    @media screen and (max-width: 700px){
        #nrp-logo-main{
            width: calc(50cqw * var(--tile-scale));
            margin-top: calc(30cqh * var(--tile-scale));
        }
        #landing-banner-title{
            margin-top: calc(1cqh * var(--tile-scale));
            font-size: calc(4cqw * var(--tile-scale));
        }
        #tile-purple{
            --w: 94cqw;
            --top-adjust-w: 96cqh;
            --left-adjust-w: -51cqw;
        }
        #tile-green {
            --w: 94cqw;
            --top-adjust-w: 11cqh;
            --left-adjust-w: -143cqw;
        }
        #tile-yellow {
            --w: 94cqw;
            --top-adjust-w: 50cqh;
            --left-adjust-w: -125cqw;
        }
        #tile-red {
            --w: 94cqw;
            --top-adjust-w: 126cqh;
            --left-adjust-w: 0cqw;
        }
    }
    @media screen and (max-width: 500px){
        #nrp-logo-main{
            width: calc(50cqw * var(--tile-scale));
            margin-top: calc(30cqh * var(--tile-scale));
        }
        #landing-banner-title{
            margin-top: calc(1cqh * var(--tile-scale));
            font-size: calc(4cqw * var(--tile-scale));
        }
        #tile-purple{
            --w: 94cqw;
            --top-adjust-w: 96cqh;
            --left-adjust-w: -51cqw;
        }
        #tile-green {
            --w: 94cqw;
            --top-adjust-w: 11cqh;
            --left-adjust-w: -143cqw;
        }
        #tile-yellow {
            --w: 94cqw;
            --top-adjust-w: 52cqh;
            --left-adjust-w: -122cqw;
        }
        #tile-red {
            --w: 94cqw;
            --top-adjust-w: 149cqh;
            --left-adjust-w: 0cqw;
        }
    }

    @keyframes fly-red    { from { --flyY:-40cqh; --flyR:-32deg; opacity:0; } to { --flyY:0; --flyR:0deg; opacity:1; } }
    @keyframes fly-yellow { from { --flyX:-40cqw; --flyR:-30deg; opacity:0; } to { --flyX:0;  --flyR:0deg; opacity:1; } }
    @keyframes fly-purple { from { --flyX: 40cqw; --flyR: 30deg; opacity:0; } to { --flyX:0;  --flyR:0deg; opacity:1; } }
    @keyframes fly-green  { from { --flyY: 40cqh; --flyR:-30deg; opacity:0; } to { --flyY:0; --flyR:0deg; opacity:1; } }

    @keyframes logo-scale-in{ from { --introScale: .7; opacity: 0; } to { --introScale: 1; opacity: 1; } }
    @keyframes title-in    { from { transform: translateY(2cqh) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

    @media (prefers-reduced-motion: reduce){
        .puzzle-tiles, #nrp-logo-main, #landing-banner-title{ animation: none !important; opacity: 1 !important; }
        #landing-banner-title{ transform: none !important; }
        .puzzle-tiles{ transition: none !important; }
    }

    #second-banner { background:#F0EBD5;}
    #second-banner h1 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 2em;
    }
    .graph-time {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50vh;
        padding-bottom: 20em;
        transform: scale(0.9);
        /*margin-top: 14em;*/
        margin-left: auto;
        margin-right: auto;
    }
    .js-draw-svg {
        scale: 0.7;
    }

    /* Nur für den Masken-Wischer; Animations-Logik macht JS (Web Animations API) */
    .js-draw-svg .mask-stroke{
        fill: none;
        stroke: #fff;
        /* runde Kappe wirkt optisch smoother an Kurven */
        stroke-linecap: round;
        stroke-linejoin: round;
        will-change: stroke-dashoffset;
        transition: none !important; /* verhindert versehentliches „Nachfedern“ */
    }

    /* Ellipse bleibt aus bis zum Finish; kein Transition-Delay */
    .js-draw-svg .red-dot{ opacity: 0; transition: none; }
    .clock-svg {
        scale: 1.5;
    }


    @media (max-height: 1000px) {
        .graph-time {
            transform: scale(0.8);
        }
    }
    @media (max-height: 768px){
        .graph-time {
            transform: scale(0.6);
        }
        .js-draw-svg {
            scale: 0.8;
        }
    }
    @media (max-height: 800px){
        .graph-time {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50vh;
            margin-bottom: 5em;
            transform: scale(0.5);
            margin-top: -3em;
        }
        .graph-time {
            padding: unset;
        }

    }
    @media (max-height: 600px){
        .graph-time {
            margin-top: -6em;
            scale: 1;
        }
    }
    @media (max-width: 1700px){
        .js-draw-svg {
            scale: 1;
        }
    }
    @media (max-width: 1400px) {
        .js-draw-svg {
            scale: 1;
        }
    }
    @media (max-width: 1180px){
        .js-draw-svg {
            scale: 1;
        }
    }
    @media (max-width: 1000px) {
        .graph-time {
            padding: unset;
        }
    }
    @media (max-width: 900px) {
        .graph-time {
            padding: unset;
        }
    }
    @media (max-width: 800px){
        .clock-svg {
            scale: 1.3;
        }
        .js-draw-svg {
            scale: 1;
        }
        .graph-time {
            margin-top: 0;
            padding: unset;
        }
    }
    @media (max-width: 768px){
        .graph-time {
            flex-wrap: wrap;
            justify-content: center;
            height: unset;
            transform: unset;
            margin-bottom: 10em;
        }
    }

    @media (max-width: 768px) {
        .graph-time {
            margin-top: -3em;
            padding: unset;
        }
        #second-banner {
            min-height: calc(100vh - var(--header-height));
        }
    }
    @media (prefers-reduced-motion: reduce){
        .js-draw-svg .mask-stroke{ stroke-dashoffset: 0 !important; }
        .js-draw-svg .red-dot{ opacity: 1 !important; }
    }

    .js-draw-svg[data-prehide="1"]{
        opacity: 0;
        transition: opacity .2s linear; /* optional: sanftes Einblenden */
    }
    #third-banner  {
        background: #E8D7B0;
        box-shadow: var(--shadow-banner);
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        min-height: calc(100vh - var(--header-height));
    }
    .world-map {
        display: flex;
        justify-content: space-evenly;
    }
    .world-map img {
        width: 20vw;
    }
    .world-map h1 {
        text-align: center;
        width: 50vw;
        font-weight: bold;
        margin: unset;
        align-self: center;
    }
    .bacteria-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bacteria-title div, .bacteria-title h2, .bacteria-title h3 {
        display: flex;
        justify-content: center;
        margin: unset;
        font-weight: bold;
    }
    .bacteria {
        display: flex;
        justify-content: space-evenly;
    }
    .each-bacteria {
        width: 10vw;
        margin-bottom: 3em;
    }
    .bacteria-img {
        width: 10vw;
    }
    .bacteria-img-title{
        width: 100%;
        height: 5vw;
        background-repeat: no-repeat;
        background-size: 22vw;
        background-position: center;
    }
    #bacteria-img-title-1 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/6.webp");
    }
    #bacteria-img-title-2 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/5.webp");
    }
    #bacteria-img-title-3 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/4.webp");
    }
    #bacteria-img-title-4 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/3.webp");
    }
    #bacteria-img-title-5 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/2.webp");
    }
    #bacteria-img-title-6 {
        background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/1.webp");
    }
    @media (max-height:800px) {
        .amr-earth {
            scale: 0.8;
        }
    }
    @media (max-height:650px) {
        .amr-earth {
            scale: 0.6;
        }
    }
    @media (max-width: 770px) {
        .each-bacteria {
            width: 6em;
            display: flex;
            flex-direction: column;
            align-items: center;
            zoom: 2;
        }
        .bacteria-img-title {
            width: 100%;
            height: 10w;
        }
        #third-banner {
            height:unset;
        }
        .bacteria {
            display: flex;
            justify-content: space-evenly;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 2em;
            margin-bottom: 1em;
        }
        .world-map {
            display: flex;
            justify-content: space-evenly;
            flex-direction: column-reverse;
            align-items: center;
            margin-top: 2em;
        }
        .world-map h1 {
            width: 90%;
        }
        .bacteria-title h2 {
            text-align: center;
            margin-bottom: 1em;
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }
    }
    @media (max-width: 460px) {
        .each-bacteria {
            width: 5em;
            /*zoom: 3;*/
            -webkit-transform: scale(2);
            transform: scale(2);
            margin-bottom: 3em;
        }
        .pills {
            width: 0em;
        }
        .world-map img {
            width: 50%;
        }
    }

    /* --- Third Banner Animations --- */
    #third-banner { --ease: cubic-bezier(.22,.61,.36,1); }

    /* Vor Start alles verstecken (Layout bleibt stabil) */
    #third-banner[data-prehide="1"] .bacteria-title h2,
    #third-banner[data-prehide="1"] .bacteria-title h1,
    #third-banner[data-prehide="1"] .each-bacteria{
        opacity: 0; visibility: hidden;
    }

    /* Titel: top->bottom Drop-In */
    .bacteria-title.stagger .st-in{
        animation: thirdDropIn var(--title-dur, .48s) var(--ease) both;
        animation-delay: var(--delay, 0ms);
    }
    @keyframes thirdDropIn{
        from{ opacity:0; transform:translateY(-16px); filter:blur(1px); }
        to  { opacity:1; transform:none;              filter:none; }
    }

    /* Karten: eigene Translate-Schiene (überschreibt dein scale NICHT) */
    .bacteria .each-bacteria{
        translate: 0 var(--revealY, 0);
        will-change: opacity, translate;
    }

    .bacteria .each-bacteria.in{
        animation: bacteriaFadeOnly var(--bac-dur, .42s) var(--ease) both;
        animation-delay: var(--delay, 0ms);
    }

    @keyframes bacteriaFadeOnly{
        from { opacity: 0; translate: 0 -12px; }
        to   { opacity: 1; translate: 0 0; }
    }

    /* Fallback für Browser ohne 'translate' (sehr altes Safari) */
    @supports not (translate: 1px){
        .bacteria .each-bacteria > *{
            transform: translateY(var(--revealY, 0));
            transition:
                    transform var(--bac-dur, .42s) var(--ease),
                    opacity   var(--bac-dur, .42s) ease;
        }
        .bacteria .each-bacteria.in > *{
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce){
        #third-banner [data-prehide], /* falls irgendwo gesetzt */
        #third-banner .bacteria-title h2,
        #third-banner .bacteria-title h1,
        #third-banner .each-bacteria{
            animation:none !important; transform:none !important;
            opacity:1 !important; visibility:visible !important; filter:none !important;
        }
    }

    #fourth-banner { background: #F0EBD5; display: flex; min-height: calc(100vh - var(--header-height));}
    .antibiotic-left {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 50%;
        margin: 2em 0em 2em 0em;
    }

    .antibiotic-title {
        width: 80%;
    }

    .antibiotic-title h1 {
        margin: 1em 0 0em;
    }

    .antibiotic-main {
        width: 80%;
        background-color: color(srgb 0.89 0.73 0.47 / 0.58);
        border-radius: 20px;
        align-self: center;
        padding: 0em 2em 0em 2em;
    }

    .anitbiotic-main-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .anitbiotic-main-title h2 {
        margin: 1em 0em 1em 0em;
    }
    .pills {
        display: flex;
        align-items: center;
    }
    .pills img {
        width: 6vw;
        margin-left: -4.5vw;
    }

    .antibiotic-undertitle {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2em;
    }

    .discorvery-void {
        display: none;
    }
    .today {
        display: none;
    }

    .antibiotic-arrows {
        display: flex;
        flex-direction: row;
        height: max-content;
        padding-bottom: 1em;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .antibiotic-arrow-left {
        width: 2.5em;
        cursor: pointer;
        transform: scaleX(-1);
    }
    .antibiotic-arrow-right {
        width: 2.5em;
        cursor: pointer;
    }

    /* Animation für antibiotic left */
    /* Basis + Prehide */
    .antibiotic-left{
        --anim-dur: 1s;
        --anim-ease: cubic-bezier(.22,.61,.36,1);
    }
    .antibiotic-left[data-prehide="1"]{ opacity:0; visibility:hidden; }

    /* Desktop: kompletter Block von links */
    .antibiotic-left[data-anim="block"]{
        opacity:0; transform:translateX(-22px); filter:blur(1px);
        transition: opacity var(--anim-dur) ease,
        transform var(--anim-dur) var(--anim-ease),
        filter var(--anim-dur) ease;
        will-change: transform, opacity;
    }
    .antibiotic-left[data-anim="block"].is-in{
        opacity:1; transform:none; filter:none; visibility:visible;
    }

    /* Mobile/Tablet (≤1200px): Stagger pro Kind – von oben nach unten */
    .antibiotic-left.is-stagger > *{
        opacity:0;
        transform:translateY(-22px);
        filter:blur(1px);
        will-change: transform, opacity, filter;
    }
    .antibiotic-left.is-stagger > *.in{
        animation: dropIn var(--anim-dur) var(--anim-ease) both;
        animation-delay: var(--delay, 0ms);
    }

    @keyframes dropIn{
        0%   { opacity:0; transform:translateY(-22px); filter:blur(1px); }
        100% { opacity:1; transform:none;              filter:none; }
    }

    /* Motion-Reduce */
    @media (prefers-reduced-motion: reduce){
        .antibiotic-left, .antibiotic-left > *{
            transition:none !important; animation:none !important;
            transform:none !important; opacity:1 !important; filter:none !important; visibility:visible !important;
        }
    }

    /* rechte Spalte als Container für Container-Query-Einheiten */
    .antibiotic-right{
        position: relative;
        overflow: hidden;          /* überstehende Breite ausblenden */
        container-type: size;      /* ermöglicht 100cqw / 100cqh */
        flex: 1 1 auto;
        display: block;
        overflow: visible;
    }

    .antibiotic-right .timeline-svg{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);        /* zentriert das überbreite SVG */
        height: 100cqh;                      /* = Höhe der rechten Spalte */
        width: calc(100cqh * 793 / 952);     /* Breite nur aus Höhe/ViewBox */
        max-width: none;                     /* kein Breiten-Schrumpfen */
        display: block;
        overflow: visible;
    }

    /* ========= SVG-Label-Layout & Platzierung (unverändert) ========= */
    .antibiotic-right{
        position: relative;
        overflow: visible;
        container-type: size;
        flex: 1 1 auto;

        /* Responsive Label-Scale + Hover-Farbe konfigurieren */
        --label-scale: clamp(0.60, calc(100cqw / (100cqh * 793 / 952)), 1);
        --label-hover-fill: #e9d1ae;; /* nur Bubble-Farbe auf Hover/Fokus */
    }

    .antibiotic-right .timeline-svg{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100cqh;
        width: calc(100cqh * 793 / 952);
        max-width: none;
        display: block;
        overflow: visible;
    }

    /* ========= Label-Gruppe: nur responsive Scale, KEINE Hover-Transforms ========= */
    .antibiotic-right .timeline-svg .label{
        transform-box: view-box;
        transform: scale(var(--label-scale));
        cursor: pointer;
    }

    /* (optional) Transform-Origins der Gruppen */
    .antibiotic-right .label--1{ transform-origin: 434px 158.918px; } /* Golden Age */
    .antibiotic-right .label--2{ transform-origin: 349px 463.918px; } /* Discovery Void */
    .antibiotic-right .label--3{ transform-origin: 244px 780.923px; } /* Today */

    /* ========= Initiale Reveal-Animation (behalten!) ========= */
    .antibiotic-right .timeline-svg .label > ellipse,
    .antibiotic-right .timeline-svg .label > path,         /* direkter Kreis-Pfad */
    .antibiotic-right .timeline-svg .label g[filter],      /* Sprechblasen-Box */
    .antibiotic-right .timeline-svg .label text{
        opacity: 0;
        transform: translateY(6px) scale(.97);
        transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
    }

    /* Beim Einblenden des gesamten Bereichs sanft einfaden (wie gehabt) */
    .antibiotic-right{ transition: opacity .35s ease; }
    .antibiotic-right.pre-hidden{
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ========= Nur Bubble-Farbe auf Hover/Fokus ändern ========= */

    /* Bubble-Path (Hintergrund) smooth einfärben */
    .antibiotic-right .timeline-svg .label g[filter] > path{
        transition: fill .18s ease;
    }

    /* Maus: nur die Bubble-Farbe wechseln */
    @media (hover: hover) and (pointer: fine){
        .antibiotic-right .timeline-svg .label:hover g[filter] > path{
            fill: var(--label-hover-fill);
        }

        /* Text & Punkt (Ellipse) bleiben unverändert – keine zusätzlichen Effekte */
        .antibiotic-right .timeline-svg .label:hover text,
        .antibiotic-right .timeline-svg .label:hover > ellipse,
        .antibiotic-right .timeline-svg .label:hover > path{
            /* absichtlich leer – nichts verändern */
        }
    }

    /* Tastatur: gleiches Verhalten wie Hover */
    .antibiotic-right .timeline-svg .label:focus-visible g[filter] > path{
        fill: var(--label-hover-fill);
        outline: none;
    }
    .antibiotic-right .timeline-svg .label:focus-visible text,
    .antibiotic-right .timeline-svg .label:focus-visible > ellipse,
    .antibiotic-right .timeline-svg .label:focus-visible > path{
        /* absichtlich leer – nichts verändern */
    }

    /* ========= (optional) Style für den Label-Text ========= */
    .label-text{
        fill:#000;
        font-weight:700;
        font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
        pointer-events:none;
        text-rendering:geometricPrecision;
    }
    @media (max-width: 1200px) {
        .antibiotic-right {
            display: none;
        }
        .antibiotic-left {
            width: 80%;
            margin: 4em 0em 4em 0em;
        }
        #fourth-banner {
            justify-content: center;
            height: unset;
        }
    }
    @media (max-width: 800px) {
        .pills img {
            width: 13vw;
            margin-left: -10.5vw;
        }
    }
    @media (max-height: 750px) {
        .antibiotic-left {
            zoom: 0.8;
        }
    }
    @media (max-height: 600px) {
        .antibiotic-left {
            zoom: 0.7;
        }
    }
    @media (max-height: 500px) {
        .antibiotic-left {
            zoom: 0.6;
        }
    }

    /* Animation */
    .antibiotic-right .timeline-svg .label > ellipse,
    .antibiotic-right .timeline-svg .label > path,         /* direkte Kreis-Pfade */
    .antibiotic-right .timeline-svg .label g[filter],      /* Sprechblasen-Box */
    .antibiotic-right .timeline-svg .label text {
        opacity: 0;
        transform: translateY(6px) scale(.97);
    }

    /* Vor Start unsichtbar halten */
    .antibiotic-right.pre-hidden{
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Beim Einblenden sanft einfaden */
    .antibiotic-right{
        transition: opacity .35s ease;
    }

    .antibiotic-undertitle h2 {
        margin: 1em 0 2em;
    }

    /* optionale sanfte Transition (Fallback, falls JS Timing nutzt setProperty) */
    .antibiotic-right .timeline-svg .label > ellipse,
    .antibiotic-right .timeline-svg .label > path,
    .antibiotic-right .timeline-svg .label g[filter],
    .antibiotic-right .timeline-svg .label text {
        transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
    }
    /* Labels sind klickbar und der Text vergrößert sich sanft beim Hover */
    .antibiotic-right .timeline-svg .label { cursor: pointer; }

    .antibiotic-right .timeline-svg .label text{
        transform-box: fill-box;
        transform-origin: 50% 50%;
        transition: transform .18s cubic-bezier(.22,.61,.36,1);
    }

    /* Scrollbar-Stabilität ist gut */
    /*html { scrollbar-gutter: stable both-edges; }*/

    /* === FIFTH BANNER: Container === */
    /* Banner bleibt Viewport-gefüllt */
    #fifth-banner{
        position: relative;
        width: 100%;
        height: calc(100svh - var(--header-height));
        overflow: hidden;
        background: #E8D7B0;
        box-shadow: var(--shadow-banner);
        z-index: 1;
        --play: paused;
    }
    #fifth-banner *{ animation-play-state: var(--play) !important; }
    #fifth-banner.is-inview{ --play: running; }

    /* STAGE-SCALER bleibt wie von dir gewünscht bei inset:0 */
    #stage-scaler{
        position: absolute;
        inset: 0;
        /* kein Grid/Flex nötig */
    }

    /* Bühne exakt aus der Mitte zentrieren und um die Mitte skalieren */
    #first-page-animation{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1680px;
        height: 882px;

        /* WICHTIG: um die Mitte skalieren */
        transform-origin: 50% 50%;

        /* zuerst exakt zentrieren, dann skalieren */
        transform: translate(-50%, -50%) scale(var(--stage-scale, 1));

        /* optional, gegen Subpixel-Zittern */
        will-change: transform;
        transform-style: preserve-3d;
    }

    #first-page-animation h3 {
        font-weight: 100;
    }

    @supports not (container-type: size){
        #fifth-banner{
            /* gleiche Idee, aber relativ zum Viewport */
            --vhAvail: calc(100svh - var(--header-height));
            --stage-scale: clamp(
                    0.1,
                    min(100vw / 1680, var(--vhAvail) / 882),
                    1
            );
        }
    }
    .center-x{
        position: absolute;
        left: 0; right: 0; margin-left: auto; margin-right: auto;
    }

    /* ----------------- dein Layout (Zahlen unverändert) ----------------- */
    #first-title-animation{
        width: max-content;
        margin: 0em 6em 0em;
    }
    #first-title-animation h1{
        margin-bottom: -1em;
        margin-top: 1em;
    }

    #second-title-animation{
        width: 25em;
        bottom: 18em;
        text-align: center;
        visibility: hidden; opacity: 0;
        animation: fade-in .3s ease-in 8s 1 normal forwards;
    }
    #second-title-animation{ position:absolute; }
    #second-title-animation{ left:0; right:0; }
    #third-title-animation{
        width: 25em;
        bottom: 18em;
        text-align: center;
        visibility: hidden; opacity: 0;
        animation: fade-in .3s ease-in 3s 1 normal forwards, exchange-1 .3s ease-in 7.9s 1 normal forwards;
    }
    #third-title-animation{ position:absolute; }
    #third-title-animation{ left:0; right:0; }

    /* Struktur */
    #structure-text{
        position: absolute;
        width: max-content;
        bottom: 29em;
        left: 0; right: 0;
        margin: 0 auto;            /* zentriert */
        text-align: center;
        visibility: hidden; opacity: 0;
        animation: fade-in .3s ease-in 6s 1 normal forwards;
    }

    #d-structure-animation{
        position: absolute;
        width: 8em;
        bottom: 28em;
        left: 8em;
        right: 0;
        /*margin: 0 auto;             !* zentriert *!*/
        visibility: hidden;
        /*transform: translateX(-63em);                   !* dein Startversatz *!*/
        animation:
                d-structure-move 5s ease 4s 1 normal forwards;
        /*,*/
        /*d-structure-fade 5s linear 10s 1 normal forwards;*/
    }

    #red-structure-animation{
        position: absolute;
        width: 22em;
        bottom: 32em;
        left: 0; right: 0; margin: 0 auto;             /* zentriert */
        visibility: hidden;
        z-index: 2;
        animation: fade-in 1s ease 7s 1 normal forwards;
    }

    /* Boden & Bakterium */
    #soil-animation{
        position: absolute;
        width: 27.3em;           /* 26vw @1680 ≈ 436.8px */
        bottom: -4em;
        left: 0; right: 0; margin: 0 auto;             /* zentriert */
    }

    #red-bacteria-animation{
        position: absolute;
        width: 23em;             /* Endbreite (Startbreite in KF) */
        bottom: 8em;
        left: 0; right: 0; margin: 0 auto;             /* zentriert */
        visibility: hidden;
        transform: translate(0, 0);                     /* Startdelta */
        animation: red-bacteria-move 6s ease 0s 1 normal forwards;
    }

    /* Connections */
    #connections-animation{
        position: absolute;
        top: 22.4em;
        width: 20.4em;
        left: -5px; right: 0; margin: 0 auto;             /* zentriert */
        display: flex; justify-content: space-between;
        visibility: hidden; opacity: 0;
        animation: fade-in 1s ease 8s 1 normal forwards;
        z-index: 1;
    }
    #connection-1, #connection-2, #connection-3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        transform-origin: top;
    }
    #connector-1, #connector-2, #connector-3 { margin-bottom: -5px; margin-right: -1em; width: 1em; visibility: visible; opacity: 1; position: relative; }
    #connector-1-1, #connector-2-1, #connector-3-1 { margin-bottom: -5px; margin-right: -1.5em; width: 1.5em; visibility: hidden; opacity: 0; position: absolute; }
    #accid-1, #accid-2, #accid-3, #accid-24, #accid-25{ width: 5em; }

    #connection-1{ animation: turn-right 1s ease 9s 1 normal forwards; }
    #connection-2{ animation: turn-left  1s ease 9s 1 normal forwards, turn-right 1s ease 10s 1 normal forwards; }
    #connection-3{ animation: turn-left  1s ease 10s 1 normal forwards, turn-right 1s ease 11s 1 normal forwards; }

    #accid-1 { animation: exchange-1 1ms linear 9.5s 1 normal forwards; }
    #accid-2 { animation: changing-connector2 1ms linear 9.5s 1 normal forwards; }
    #accid-24{ visibility:hidden; opacity:0; animation: exchange-2 1ms linear 9.5s 1 normal forwards, exchange-1 1ms linear 10.5s 1 normal forwards; }
    #accid-25{visibility:hidden; opacity:0; animation: exchange-2 1ms linear 10.5s 1 normal forwards, exchange-1 1ms linear 11.5s 1 normal forwards; }
    #accid-3 { animation: changing-connector2 1ms linear 10.5s 1 normal forwards; }

    #connector-1 {
        animation: changing-connector2 0.1ms linear 9.5s 1 normal forwards;
    }
    #connector-2 {
        animation: changing-connector2 0.1ms linear 10.5s 1 normal forwards;
    }
    #connector-3 {
        animation: changing-connector2 0.1ms linear 11.5s 1 normal forwards;
    }
    #connector-1-1 {
        animation: changing-connector 0.1ms linear 9.5s 1 normal forwards;
    }
    #connector-2-1 {
        animation: changing-connector 0.1ms linear 10.5s 1 normal forwards;
    }
    #connector-3-1 {
        animation: changing-connector 0.1ms linear 11.5s 1 normal forwards;
    }


    @keyframes changing-connector {
        0% { opacity: 0; visibility: hidden; position: absolute}
        100% { opacity: 1; visibility: visible; position: relative }
    }
    @keyframes changing-connector2 {
        0% { opacity: 1; visibility: visible; position: relative }
        100% { opacity: 0; visibility: hidden; position: absolute }
    }
    @keyframes exchange-1{ 0%,100%{ visibility:hidden; opacity:0; } }
    @keyframes exchange-2{ 0%,100%{ visibility:visible; opacity:1; } }
    @keyframes exchange-3{ 0%,100%{ visibility:hidden; opacity:0; display:none; } }


    /* Peptid */
    #peptide-done-animation{
        position: absolute;
        bottom: 22em;
        left: 0; right: 0; margin: 0 auto;             /* zentriert */
        height: 4.5em;
        opacity: 0; visibility: hidden;
        transform: translateX(9em) rotate(80deg);      /* dein Startoffset */
        animation: peptide-done-animation 2s ease 11.5s 1 normal forwards;
    }
    #peptide-text-1{
        position: absolute;
        left: 43em;
        right: 0;
        top: 9em;
        width: max-content; margin: 0 auto;
        visibility: hidden; opacity: 0;
        animation: fade-in 1s ease 13s 1 normal forwards;
    }
    #peptide-text-2{
        position: absolute;
        left: 43em;
        right: 0;
        bottom: 18em;
        width: max-content; margin: 0 auto;
        visibility: hidden; opacity: 0;
        animation: fade-in 1s ease 13s 1 normal forwards;
    }

    /* ----------------- Keyframes: nur transform/opacity/width ----------------- */
    @keyframes red-bacteria-move{
        /* Start/Mitte zentriert, leicht oben; Breite wie bei dir (~10vw) */
        0%,50%{
            visibility: visible;
            width: 10.5em;                         /* 10vw @1680 ≈ 168px */
            transform: translate(0, 4em);
        }
        /* Ziel: 63em nach links, 20em hoch, größere Breite */
        50%,100%{
            visibility: visible;
            width: 24em;
            transform: translate(-40em, -10em);
        }
    }

    @keyframes d-structure-move{
        0%,50%{
            visibility: visible;
            /* bleibt erstmal links */
        }
        50%,100%{
            visibility: visible;
            transform: translate(32em, -2em);
            width: 24em;/* zurück zur Mitte */
            /* Höhe/Größe änderst du über die Properties (unten beibehalten) */
        }
    }
    @keyframes d-structure-fade{
        0%   { visibility: visible; opacity: 1; }
        100% { visibility: visible; opacity: 0; }
    }

    @keyframes fade-in{
        0%   { visibility: visible; opacity: 0; }
        100% { visibility: visible; opacity: 1; }
    }
    /*translate(18px, 1px) translate(-18px, 1px)*/
    @keyframes turn-right{
        0% { transform: none; }
        50%{ transform: rotate(-9deg); transform-origin: top;}
        100%{ transform: none; }
    }
    @keyframes turn-left{
        0% { transform: none; }
        50%{ transform: rotate(9deg); transform-origin: top;}
        100%{ transform: none; }
    }


    @keyframes peptide-done-animation{
        0%,50%{
            visibility: visible; opacity: 1;
            transform: translateX(9em) rotate(80deg);
        }
        50%,100%{
            visibility: visible; opacity: 1;
            transform: translate(30em, -9em) rotate(0deg);
            height: 6.5em;
            /* bottom/height via Properties behalten: */
            /* bottom: 30em; height: 8em; → belassen als statische Endwerte */
        }
    }

    /* Mobile: Fifth-Banner-Inhalt ausblenden (wie gehabt, Desktop-Fokus) */
    @media (max-width: 700px){
        #first-page-animation{ display:none; }
    }

    /* SIXTH BANNER: gleiche Bühne, zentriert + skalierend */
    #sixth-banner{
        position: relative;
        width: 100%;
        height: calc(100svh - var(--header-height));
        overflow: hidden;
        background: #F0EBD5;
        box-shadow: var(--shadow-banner);
        z-index: 1;
    }

    #sixth-stage-scaler{
        position: absolute;
        inset: 0; /* top/left 0, füllt Banner */
    }

    #sixth-page-animation{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1680px;
        height: 882px;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
        will-change: transform;
    }

    /* Zielpunkt oben (für die Flug-Animation) */
    #sixth-target{
        position:absolute;
        top: 0;       /* vorher 2.5em */
        left: 10%;    /* deckt sich mit deiner finalen Bakterien-Position */
        transform: translateX(-50%);
        width: 18em;
        height: 1px;
        pointer-events: none;
    }

    /* Wenn das Bakterium in den 6. Banner umgezogen ist */
    #sixth-page-animation > #red-bacteria-animation{
        position: absolute !important;
        top: 0;
        left: 10%;
        margin: unset;
        width: 18em !important;
        visibility: visible !important;
    }
    /* Safari-Fix: Sobald das Bakterium im Sixth angedockt ist, KEINE X-Übersetzung mehr */
    #sixth-page-animation > #red-bacteria-animation.rb-docked{
        transform: none !important; /* überschreibt dein translateX(-50%) */
    }
    /* Sixth: Red-Bacteria im Ziel fixieren – kein translateX mehr */
    #sixth-page-animation > #red-bacteria-animation {
        transform: none !important;   /* killt translateX(-50%) */
    }
    #sixth-page-animation h1 {
        text-align: center;
        margin: 1em 0 0 0;
    }
    #red-bacteria-animation2{
        position: absolute !important;
        left: 0;
        top: 0;
        margin: unset;
        /* transform: translateX(-50%) !important; */
        width: 18em !important;
    }
    #purple-bacteria-animation{
        position: absolute !important;
        top: 0;
        right: 0;
        margin: unset;
        /* transform: translateX(-50%) !important; */
        width: 18em !important;
    }
    #structures-animation-1{
        display: flex;
        justify-content: space-around;
        width: 159em;
        position: absolute;
        left: -25em;
        right: 0;
        margin: 0 auto;
        top: 15%;
        opacity: 0;
        visibility: hidden;
        animation: structures-animation 3s ease 1s 1 normal forwards,
        exchange-4 0.01s ease 4.5s 1 normal forwards;
    }
    #structures-animation-2{
        display: flex;
        justify-content: space-around;
        width: 59em;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 40%;
        opacity: 0;
        visibility: hidden;
        animation: fade-in 0.01s ease 4.5s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }

    #cut-structure-animation {
        width: 24em;
    }
    #red-structure-2, .purple-structure {
        visibility: visible;
        width: 8em;
        opacity: 1;
    }
    #red-structure-2{
        animation: size-structure-animation 3s ease 1s 1 normal forwards;
    }
    .purple-structure {
        animation: size-structure-animation 3s ease 1s 1 normal forwards,
        exchange-4 0.5s ease 7s 1 normal forwards;
    }
    .scissors{
        width: 3em;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        margin: 0 auto;
        animation: fade-in 0.5s ease 4.1s 1 normal forwards,
        exchange-4 0.5s ease 6.5s 1 normal forwards;
    }
    #scissor-1 {
        left: -47.5em;
        right: 0;
        top: 24em;
        scale: -1;
    }
    #scissor-2 {
        top: 23.5em;
        left: -30em;
        right: 0;
    }
    #scissor-3 {
        left: 11.5em;
        right: 0;
        top: 24em;
        scale: -1;
    }
    #scissor-4 {
        top: 23.5em;
        left: 29em;
        right: 0;
    }
    #red-s-animation, #purple-s-animation {
        width: 8.3em;
        position: absolute;
        top: 40.1%;
        margin: 0 auto;
    }
    #red-s-animation {
        left: -38.4em;
        right: 0;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 0.01s ease 4.5s 1 normal forwards,
        move-up 1s ease 5.6s 1 normal forwards;
    }
    #purple-s-animation {
        right: 0;
        left: 20.6em;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 0.1s ease 4.5s 1 normal forwards,
        move-in-position 2s ease 4.6s 1 normal forwards;
    }
    #peptide-red-purple-animation {
        position: absolute;
        margin: 0 auto;
        top: 40%;
        right: 25em;
        width: 18em;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 7.5s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }
    #peptide-arrow-animation {
        position: absolute;
        margin: 0 auto;
        top: 44%;
        right: 44em;
        width: 9em;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 7.5s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }
    #overview-animation {
        position: absolute;
        width: 41.9em;
        top: 38.4%;
        left: -29em;
        right: 0;
        margin: 0 auto;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 12s 1 normal forwards;
    }
    #sixth-text-1 {
        position: absolute;
        text-align: center;
        margin: 0 auto;
        left: -15em;
        right: 0;
        top: 70%;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 0.5s ease 6.6s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }
    #sixth-text-2 {
        position: absolute;
        text-align: center;
        margin: 0 auto;
        left: 20em;
        right: 0;
        top: 68%;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 7.5s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }
    #sixth-text-3 {
        position: absolute;
        text-align: center;
        margin: 0 auto;
        left: 28em;
        right: 0;
        top: 54%;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 7.5s 1 normal forwards,
        exchange-4 1s ease 10s 1 normal forwards;
    }
    #sixth-text-4 {
        position: absolute;
        margin: 0 auto;
        right: 4em;
        top: 35%;
        width: max-content;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s ease 12s 1 normal forwards;
    }
    #sixth-text-5 {
        display: flex;
        font-weight: 100;
        position: absolute;
        margin: 0 auto;
        right: 2.5em;
        top: 73%;
        width: 20em;
        visibility: hidden;
        opacity: 0;
        animation: fade-in 1s
        ease 12s 1 normal forwards;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    #flex-sixth-text {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    @keyframes structures-animation{
        0% { visibility: visible; opacity: 1;width: 159em; left: -25em;;top: 15%; }
        100% { visibility: visible; opacity: 1;width: 59em; left: 0;top: 40%; }
    }
    @keyframes size-structure-animation {
        0%   { width: 8em; }
        100% { width: 24em; }
    }
    @keyframes move-in {
        0%   { visibility: visible; opacity: 1; right: -100em;}
        100% { visibility: visible; opacity:  1; right: 0;}
    }
    @keyframes exchange-4 {
        0%   { visibility: visible; opacity: 1;}
        100% { visibility: hidden; opacity: 0; }
    }
    @keyframes move-up {
        0%   { top: 40.1%; visibility: visible; opacity: 1;}
        100% { top: 35%; visibility: hidden; opacity: 0; }
    }
    @keyframes move-in-position {
        0%   { top: 40.1%; left: 20.6em;}
        30% { top: 50%; left: 20.6em;}
        60% { top: 50%; left: -38.4em;}
        100% { top: 40.1%; left: -38.4em;}
    }
    #seventh-banner  { min-height: calc(100vh - var(--header-height)); background: #F0EBD5;}
    #seventh-top-banner  {background: #E8D7B0; box-shadow: var(--shadow-banner); position: relative; padding-bottom: 4em; ;}
    .solution-section { margin: auto;}
    .solution-section h1 {
        margin-top: -1em;
        text-align: center;
        font-weight: bold;
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    .solution-section img {
        margin-left: 4vw;
        margin-bottom: -10vw;
        width: 21VW;
    }

    .solution-tabs {
        margin-top: 4em;
        display: flex;
        flex-direction: row;
        min-height: 10em;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
    }
    .solution-row-1, .solution-row-2 {
        display: flex;
        width: 85%;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .solution-row-1 {
        margin-bottom: 4vh;
        width: 65%;
    }

    .solution-tab {
        width: 100%;
        position: relative;
        height: 100%;
        margin-bottom: 2em;
        border-radius: 20px;
        /*padding-bottom: 3.7svh;*/
        box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .2);
    }
    .solution-tab-cover {
        height: 80%;
        border-radius: 20px 20px 0 0;
    }

    .solution-tab-text {
        text-align: center;
        background-color: #F0EBD5;
        min-height: 20%;
        align-content: center;
        border-radius: 0 0 20px 20px;
    }
    .solution-tab-text p {
        margin: unset;
    }

    .solution-tabs a {
        text-decoration: none;
        color: black;
        height: 20vh;
        width: 23em;
    }

    .solution-tab-1 .solution-tab-cover {
        background-image: url("https://static.igem.wiki/teams/5667/assets/project/project-description/project-description.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        position: relative;
    }.solution-tab-2 .solution-tab-cover {
         background-image: url("https://static.igem.wiki/teams/5667/assets/project/our-platform/our-platform-banner-2.webp");
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
         overflow: hidden;
         position: relative;
     }.solution-tab-3 .solution-tab-cover {
          background-image: url("https://static.igem.wiki/teams/5667/assets/wet-lab/part-collection/part-collection.webp");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
          position: relative;
      }.solution-tab-4 .solution-tab-cover {
           background-image: url("https://static.igem.wiki/teams/5667/assets/dry-lab/software/software.webp");
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
           overflow: hidden;
           position: relative;
       }.solution-tab-5 .solution-tab-cover {
            background-image: url("https://static.igem.wiki/teams/5667/assets/engagement/hp/favorite.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
            position: relative;
        }
    .solution-tab-1 .solution-tab-text {
        background-color: rgba(242, 208, 169, 1);
    }
    .solution-tab-2 .solution-tab-text {
        background-color: rgba(153, 193, 185, 1);
    }
    .solution-tab-3 .solution-tab-text {
        background-color: rgba(173,117, 166, 1);
    }
    .solution-tab-4 .solution-tab-text {
        background-color: rgba(216, 140, 154, 1);
    }
    .solution-tab-5 .solution-tab-text {
        background-color: rgba(239, 188, 100, 1);
    }
    .solution-tab-text-1 {
        font-weight: 700;
        margin: 0;
    }
    .solution-tab-text-2 {
        font-weight: 100;
        font-size: 1em;
        margin: 0 auto;
    }

    .solution-tab-1 .solution-tab-cover::before, .solution-tab-2 .solution-tab-cover::before, .solution-tab-3 .solution-tab-cover::before, .solution-tab-4 .solution-tab-cover::before, .solution-tab-5 .solution-tab-cover::before, .solution-tab-6 .solution-tab-cover::before {
        content: "";
        position: absolute;
        inset: 0;

        /* selben Hintergrund übernehmen */
        background-image: inherit;
        background-size: inherit;
        background-position: top;
        background-repeat: inherit;

        transform: scale(1);                  /* statt background-size */
        transition: transform .75s cubic-bezier(.22,.61,.36,1);
        will-change: transform;               /* sparsam einsetzen */
    }

    .solution-tab-1 .solution-tab-cover:hover::before, .solution-tab-2 .solution-tab-cover:hover::before, .solution-tab-3 .solution-tab-cover:hover::before, .solution-tab-4 .solution-tab-cover:hover::before, .solution-tab-5 .solution-tab-cover:hover::before, .solution-tab-6 .solution-tab-cover:hover::before{
        transform: scale(1.5);                /* entspricht ~150% */
    }



    /* Optional: Accessibility */
    @media (prefers-reduced-motion: reduce){
        .solution-tab-1 .solution-tab-cover::before{ transition: none; }
    }
    @media (max-width: 1745px) {
        .solution-row-2 {
            width: 65%;
            height: 55vh;
        }
    }
    @media (max-width: 1475px) {
        .solution-tab {
            width: 28em;
        }
        .solution-row-1, .solution-row-2 {
            width: 100%;
        }
        .solution-tabs a {
            width: unset;
        }
    }
    @media (max-width: 1345px) {
        .solution-tab {
            width: 23em;
        }
    }
    @media (max-width: 1110px) {
        .solution-tab {
            width: 24vw;
            padding-bottom: 6.7svh;
            height:75%;
        }
        .solution-tab-text {
            min-height: 56%;
        }
        .solution-tabs a {
            width: unset;
        }
    }
    @media (max-width: 1080px) {
        .solution-tab-text {
            min-height: 65%;
        }
    }
    @media (max-width: 825px) {
        .solution-row-1, .solution-row-2 {
            align-items: center;

        }
        .solution-tab {
            width: 11.5em;
        }


        .solution-row-1{
            margin-bottom: unset;
        }
        .solution-row-2 {
            height: 35vh;
        }
        @media (max-width: 555px) {
            .solution-row-1 {
                margin-bottom: 4vh;
            }
            .solution-row-2 {
                min-height: 63vh;
            }
            .solution-tab-1, .solution-tab-2 {
                margin-right: unset;
                margin-left: unset;
            }
        }
        @media (max-width: 380px) {
            .solution-row-1 {
                height: 42em;
            }
            .solution-row-2 {
                min-height: 83vh;
            }
        }
    }

    #promo-video-section h2 {
        width: clamp(480px, 60vw, 1100px);
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-weight: bold;
    }

    #promo-video {
        width: clamp(280px, 60vw, 1100px);
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 1.25em auto 0;
        display: block;
        transform: none;
    }

    #promo-video iframe,
    #promo-video video {
        width: 100%;
        height: 100%;
        display: block;
        border: 10px solid #E2BB78 !important;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

    #promo-video .gudrun-white-video {
        width: 10%;
        position: relative;
        top: 1em;
        left: 12em;
    }

    @media (max-width: 1010px) {
        #promo-video-section h2 { width: 90vw; }
        #promo-video { width: 90vw; }
    }
    @media (max-width: 750px) {
        #promo-video {
            margin: 1.25em 2% 0;
        }
    }

    .graph-time {
        padding: unset;
    }
}
@media (max-width: 800px){
    .clock-svg {
        scale: 1.3;
    }
    .js-draw-svg {
        scale: 1;
    }
    .graph-time {
        margin-top: 0;
        padding: unset;
    }
}
@media (max-width: 768px){
    .graph-time {
        flex-wrap: wrap;
        justify-content: center;
        height: unset;
        transform: unset;
        margin-bottom: 10em;
    }
}

@media (max-width: 768px) {
    .graph-time {
        margin-top: -3em;
        padding: unset;
    }
    #second-banner {
        min-height: calc(100vh - var(--header-height));
    }
}
@media (prefers-reduced-motion: reduce){
    .js-draw-svg .mask-stroke{ stroke-dashoffset: 0 !important; }
    .js-draw-svg .red-dot{ opacity: 1 !important; }
}

.js-draw-svg[data-prehide="1"]{
    opacity: 0;
    transition: opacity .2s linear; /* optional: sanftes Einblenden */
}
#third-banner  {
    background: #E8D7B0;
    box-shadow: var(--shadow-banner);
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    min-height: calc(100vh - var(--header-height));
}
.world-map {
    display: flex;
    justify-content: space-evenly;
}
.world-map img {
    width: 20vw;
}
.world-map h1 {
    text-align: center;
    width: 50vw;
    font-weight: bold;
    margin: unset;
    align-self: center;
}
.bacteria-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bacteria-title div, .bacteria-title h2, .bacteria-title h3 {
    display: flex;
    justify-content: center;
    margin: unset;
    font-weight: bold;
}
.bacteria {
    display: flex;
    justify-content: space-evenly;
}
.each-bacteria {
    width: 10vw;
    margin-bottom: 3em;
}
.bacteria-img {
    width: 10vw;
}
.bacteria-img-title{
    width: 100%;
    height: 5vw;
    background-repeat: no-repeat;
    background-size: 22vw;
    background-position: center;
}
#bacteria-img-title-1 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/6.webp");
}
#bacteria-img-title-2 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/5.webp");
}
#bacteria-img-title-3 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/4.webp");
}
#bacteria-img-title-4 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/3.webp");
}
#bacteria-img-title-5 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/2.webp");
}
#bacteria-img-title-6 {
    background-image: url("https://static.igem.wiki/teams/5667/assets/index/bacteria/1.webp");
}
@media (max-height:800px) {
    .amr-earth {
        scale: 0.8;
    }
}
@media (max-height:650px) {
    .amr-earth {
        scale: 0.6;
    }
}
@media (max-width: 770px) {
    .each-bacteria {
        width: 6em;
        display: flex;
        flex-direction: column;
        align-items: center;
        zoom: 2;
    }
    .bacteria-img-title {
        width: 100%;
        height: 10w;
    }
    #third-banner {
        height:unset;
    }
    .bacteria {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 2em;
        margin-bottom: 1em;
    }
    .world-map {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 2em;
    }
    .world-map h1 {
        width: 90%;
    }
    .bacteria-title h2 {
        text-align: center;
        margin-bottom: 1em;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
}
@media (max-width: 460px) {
    .each-bacteria {
        width: 5em;
        /*zoom: 3;*/
        -webkit-transform: scale(2);
        transform: scale(2);
        margin-bottom: 3em;
    }
    .pills {
        width: 0em;
    }
    .world-map img {
        width: 50%;
    }
}

/* --- Third Banner Animations --- */
#third-banner { --ease: cubic-bezier(.22,.61,.36,1); }

/* Vor Start alles verstecken (Layout bleibt stabil) */
#third-banner[data-prehide="1"] .bacteria-title h2,
#third-banner[data-prehide="1"] .bacteria-title h1,
#third-banner[data-prehide="1"] .each-bacteria{
    opacity: 0; visibility: hidden;
}

/* Titel: top->bottom Drop-In */
.bacteria-title.stagger .st-in{
    animation: thirdDropIn var(--title-dur, .48s) var(--ease) both;
    animation-delay: var(--delay, 0ms);
}
@keyframes thirdDropIn{
    from{ opacity:0; transform:translateY(-16px); filter:blur(1px); }
    to  { opacity:1; transform:none;              filter:none; }
}

/* Karten: eigene Translate-Schiene (überschreibt dein scale NICHT) */
.bacteria .each-bacteria{
    translate: 0 var(--revealY, 0);
    will-change: opacity, translate;
}

.bacteria .each-bacteria.in{
    animation: bacteriaFadeOnly var(--bac-dur, .42s) var(--ease) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes bacteriaFadeOnly{
    from { opacity: 0; translate: 0 -12px; }
    to   { opacity: 1; translate: 0 0; }
}

/* Fallback für Browser ohne 'translate' (sehr altes Safari) */
@supports not (translate: 1px){
    .bacteria .each-bacteria > *{
        transform: translateY(var(--revealY, 0));
        transition:
                transform var(--bac-dur, .42s) var(--ease),
                opacity   var(--bac-dur, .42s) ease;
    }
    .bacteria .each-bacteria.in > *{
        transform: translateY(0);
        opacity: 1;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
    #third-banner [data-prehide], /* falls irgendwo gesetzt */
    #third-banner .bacteria-title h2,
    #third-banner .bacteria-title h1,
    #third-banner .each-bacteria{
        animation:none !important; transform:none !important;
        opacity:1 !important; visibility:visible !important; filter:none !important;
    }
}

#fourth-banner { background: #F0EBD5; display: flex; min-height: calc(100vh - var(--header-height));}
.antibiotic-left {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin: 2em 0em 2em 0em;
}

.antibiotic-title {
    width: 80%;
}

.antibiotic-title h1 {
    margin: 1em 0 0em;
}

.antibiotic-main {
    width: 80%;
    background-color: color(srgb 0.89 0.73 0.47 / 0.58);
    border-radius: 20px;
    align-self: center;
    padding: 0em 2em 0em 2em;
}

.anitbiotic-main-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.anitbiotic-main-title h2 {
    margin: 1em 0em 1em 0em;
}
.pills {
    display: flex;
    align-items: center;
}
.pills img {
    width: 6vw;
    margin-left: -4.5vw;
}

.antibiotic-undertitle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2em;
}

.discorvery-void {
    display: none;
}
.today {
    display: none;
}

.antibiotic-arrows {
    display: flex;
    flex-direction: row;
    height: max-content;
    padding-bottom: 1em;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.antibiotic-arrow-left {
    width: 2.5em;
    cursor: pointer;
    transform: scaleX(-1);
}
.antibiotic-arrow-right {
    width: 2.5em;
    cursor: pointer;
}

/* Animation für antibiotic left */
/* Basis + Prehide */
.antibiotic-left{
    --anim-dur: 1s;
    --anim-ease: cubic-bezier(.22,.61,.36,1);
}
.antibiotic-left[data-prehide="1"]{ opacity:0; visibility:hidden; }

/* Desktop: kompletter Block von links */
.antibiotic-left[data-anim="block"]{
    opacity:0; transform:translateX(-22px); filter:blur(1px);
    transition: opacity var(--anim-dur) ease,
    transform var(--anim-dur) var(--anim-ease),
    filter var(--anim-dur) ease;
    will-change: transform, opacity;
}
.antibiotic-left[data-anim="block"].is-in{
    opacity:1; transform:none; filter:none; visibility:visible;
}

/* Mobile/Tablet (≤1200px): Stagger pro Kind – von oben nach unten */
.antibiotic-left.is-stagger > *{
    opacity:0;
    transform:translateY(-22px);
    filter:blur(1px);
    will-change: transform, opacity, filter;
}
.antibiotic-left.is-stagger > *.in{
    animation: dropIn var(--anim-dur) var(--anim-ease) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes dropIn{
    0%   { opacity:0; transform:translateY(-22px); filter:blur(1px); }
    100% { opacity:1; transform:none;              filter:none; }
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
    .antibiotic-left, .antibiotic-left > *{
        transition:none !important; animation:none !important;
        transform:none !important; opacity:1 !important; filter:none !important; visibility:visible !important;
    }
}

/* rechte Spalte als Container für Container-Query-Einheiten */
.antibiotic-right{
    position: relative;
    overflow: hidden;          /* überstehende Breite ausblenden */
    container-type: size;      /* ermöglicht 100cqw / 100cqh */
    flex: 1 1 auto;
    display: block;
    overflow: visible;
}

.antibiotic-right .timeline-svg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);        /* zentriert das überbreite SVG */
    height: 100cqh;                      /* = Höhe der rechten Spalte */
    width: calc(100cqh * 793 / 952);     /* Breite nur aus Höhe/ViewBox */
    max-width: none;                     /* kein Breiten-Schrumpfen */
    display: block;
    overflow: visible;
}

/* ========= SVG-Label-Layout & Platzierung (unverändert) ========= */
.antibiotic-right{
    position: relative;
    overflow: visible;
    container-type: size;
    flex: 1 1 auto;

    /* Responsive Label-Scale + Hover-Farbe konfigurieren */
    --label-scale: clamp(0.60, calc(100cqw / (100cqh * 793 / 952)), 1);
    --label-hover-fill: #e9d1ae;; /* nur Bubble-Farbe auf Hover/Fokus */
}

.antibiotic-right .timeline-svg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100cqh;
    width: calc(100cqh * 793 / 952);
    max-width: none;
    display: block;
    overflow: visible;
}

/* ========= Label-Gruppe: nur responsive Scale, KEINE Hover-Transforms ========= */
.antibiotic-right .timeline-svg .label{
    transform-box: view-box;
    transform: scale(var(--label-scale));
    cursor: pointer;
}

/* (optional) Transform-Origins der Gruppen */
.antibiotic-right .label--1{ transform-origin: 434px 158.918px; } /* Golden Age */
.antibiotic-right .label--2{ transform-origin: 349px 463.918px; } /* Discovery Void */
.antibiotic-right .label--3{ transform-origin: 244px 780.923px; } /* Today */

/* ========= Initiale Reveal-Animation (behalten!) ========= */
.antibiotic-right .timeline-svg .label > ellipse,
.antibiotic-right .timeline-svg .label > path,         /* direkter Kreis-Pfad */
.antibiotic-right .timeline-svg .label g[filter],      /* Sprechblasen-Box */
.antibiotic-right .timeline-svg .label text{
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Beim Einblenden des gesamten Bereichs sanft einfaden (wie gehabt) */
.antibiotic-right{ transition: opacity .35s ease; }
.antibiotic-right.pre-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========= Nur Bubble-Farbe auf Hover/Fokus ändern ========= */

/* Bubble-Path (Hintergrund) smooth einfärben */
.antibiotic-right .timeline-svg .label g[filter] > path{
    transition: fill .18s ease;
}

/* Maus: nur die Bubble-Farbe wechseln */
@media (hover: hover) and (pointer: fine){
    .antibiotic-right .timeline-svg .label:hover g[filter] > path{
        fill: var(--label-hover-fill);
    }

    /* Text & Punkt (Ellipse) bleiben unverändert – keine zusätzlichen Effekte */
    .antibiotic-right .timeline-svg .label:hover text,
    .antibiotic-right .timeline-svg .label:hover > ellipse,
    .antibiotic-right .timeline-svg .label:hover > path{
        /* absichtlich leer – nichts verändern */
    }
}

/* Tastatur: gleiches Verhalten wie Hover */
.antibiotic-right .timeline-svg .label:focus-visible g[filter] > path{
    fill: var(--label-hover-fill);
    outline: none;
}
.antibiotic-right .timeline-svg .label:focus-visible text,
.antibiotic-right .timeline-svg .label:focus-visible > ellipse,
.antibiotic-right .timeline-svg .label:focus-visible > path{
    /* absichtlich leer – nichts verändern */
}

/* ========= (optional) Style für den Label-Text ========= */
.label-text{
    fill:#000;
    font-weight:700;
    font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    pointer-events:none;
    text-rendering:geometricPrecision;
}
@media (max-width: 1200px) {
    .antibiotic-right {
        display: none;
    }
    .antibiotic-left {
        width: 80%;
        margin: 4em 0em 4em 0em;
    }
    #fourth-banner {
        justify-content: center;
        height: unset;
    }
}
@media (max-width: 800px) {
    .pills img {
        width: 13vw;
        margin-left: -10.5vw;
    }
}
@media (max-height: 750px) {
 .antibiotic-left {
     zoom: 0.8;
 }
}
@media (max-height: 600px) {
    .antibiotic-left {
        zoom: 0.7;
    }
}
@media (max-height: 500px) {
    .antibiotic-left {
        zoom: 0.6;
    }
}

/* Animation */
.antibiotic-right .timeline-svg .label > ellipse,
.antibiotic-right .timeline-svg .label > path,         /* direkte Kreis-Pfade */
.antibiotic-right .timeline-svg .label g[filter],      /* Sprechblasen-Box */
.antibiotic-right .timeline-svg .label text {
    opacity: 0;
    transform: translateY(6px) scale(.97);
}

/* Vor Start unsichtbar halten */
.antibiotic-right.pre-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Beim Einblenden sanft einfaden */
.antibiotic-right{
    transition: opacity .35s ease;
}

.antibiotic-undertitle h2 {
    margin: 1em 0 2em;
}

/* optionale sanfte Transition (Fallback, falls JS Timing nutzt setProperty) */
.antibiotic-right .timeline-svg .label > ellipse,
.antibiotic-right .timeline-svg .label > path,
.antibiotic-right .timeline-svg .label g[filter],
.antibiotic-right .timeline-svg .label text {
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
/* Labels sind klickbar und der Text vergrößert sich sanft beim Hover */
.antibiotic-right .timeline-svg .label { cursor: pointer; }

.antibiotic-right .timeline-svg .label text{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform .18s cubic-bezier(.22,.61,.36,1);
}

/* Scrollbar-Stabilität ist gut */
/*html { scrollbar-gutter: stable both-edges; }*/

/* === FIFTH BANNER: Container === */
/* Banner bleibt Viewport-gefüllt */
#fifth-banner{
    position: relative;
    width: 100%;
    height: calc(100svh - var(--header-height));
    overflow: hidden;
    background: #E8D7B0;
    box-shadow: var(--shadow-banner);
    z-index: 1;
    --play: paused;
}
#fifth-banner *{ animation-play-state: var(--play) !important; }
#fifth-banner.is-inview{ --play: running; }

/* STAGE-SCALER bleibt wie von dir gewünscht bei inset:0 */
#stage-scaler{
    position: absolute;
    inset: 0;
    /* kein Grid/Flex nötig */
}

/* Bühne exakt aus der Mitte zentrieren und um die Mitte skalieren */
#first-page-animation{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1680px;
    height: 882px;

    /* WICHTIG: um die Mitte skalieren */
    transform-origin: 50% 50%;

    /* zuerst exakt zentrieren, dann skalieren */
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));

    /* optional, gegen Subpixel-Zittern */
    will-change: transform;
    transform-style: preserve-3d;
}

#first-page-animation h3 {
    font-weight: 100;
    text-align: center;
}

@supports not (container-type: size){
    #fifth-banner{
        /* gleiche Idee, aber relativ zum Viewport */
        --vhAvail: calc(100svh - var(--header-height));
        --stage-scale: clamp(
                0.1,
                min(100vw / 1680, var(--vhAvail) / 882),
                1
        );
    }
}
.center-x{
    position: absolute;
    left: 0; right: 0; margin-left: auto; margin-right: auto;
}

/* ----------------- dein Layout (Zahlen unverändert) ----------------- */
#first-title-animation{
    width: max-content;
    margin: 0em 6em 0em;
}
#first-title-animation h1{
    margin-bottom: -1em;
    margin-top: 1em;
}

#second-title-animation{
    width: 25em;
    bottom: 18em;
    text-align: center;
    visibility: hidden; opacity: 0;
    animation: fade-in .3s ease-in 8s 1 normal forwards;
}
#second-title-animation{ position:absolute; }
#second-title-animation{ left:0; right:0; }
#third-title-animation{
    width: 25em;
    bottom: 18em;
    text-align: center;
    visibility: hidden; opacity: 0;
    animation: fade-in .3s ease-in 3s 1 normal forwards, exchange-1 .3s ease-in 7.9s 1 normal forwards;
}
#third-title-animation{ position:absolute; }
#third-title-animation{ left:0; right:0; }

/* Struktur */
#structure-text{
    position: absolute;
    width: max-content;
    bottom: 29em;
    left: 0; right: 0;
    margin: 0 auto;            /* zentriert */
    text-align: center;
    visibility: hidden; opacity: 0;
    animation: fade-in .3s ease-in 6s 1 normal forwards;
}

#d-structure-animation{
    position: absolute;
    width: 8em;
    bottom: 28em;
    left: 8em;
    right: 0;
    /*margin: 0 auto;             !* zentriert *!*/
    visibility: hidden;
    /*transform: translateX(-63em);                   !* dein Startversatz *!*/
    animation:
            d-structure-move 5s ease 4s 1 normal forwards;
            /*,*/
            /*d-structure-fade 5s linear 10s 1 normal forwards;*/
}

#red-structure-animation{
    position: absolute;
    width: 22em;
    bottom: 32em;
    left: 0; right: 0; margin: 0 auto;             /* zentriert */
    visibility: hidden;
    z-index: 2;
    animation: fade-in 1s ease 7s 1 normal forwards;
}

/* Boden & Bakterium */
#soil-animation{
    position: absolute;
    width: 27.3em;           /* 26vw @1680 ≈ 436.8px */
    bottom: -4em;
    left: 0; right: 0; margin: 0 auto;             /* zentriert */
}

#red-bacteria-animation{
    position: absolute;
    width: 23em;             /* Endbreite (Startbreite in KF) */
    bottom: 8em;
    left: 0; right: 0; margin: 0 auto;             /* zentriert */
    visibility: hidden;
    transform: translate(0, 0);                     /* Startdelta */
    animation: red-bacteria-move 6s ease 0s 1 normal forwards;
}

/* Connections */
#connections-animation{
    position: absolute;
    top: 22.4em;
    width: 20.4em;
    left: -5px; right: 0; margin: 0 auto;             /* zentriert */
    display: flex; justify-content: space-between;
    visibility: hidden; opacity: 0;
    animation: fade-in 1s ease 8s 1 normal forwards;
    z-index: 1;
}
#connection-1, #connection-2, #connection-3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transform-origin: top;
}
#connector-1, #connector-2, #connector-3 { margin-bottom: -5px; margin-right: -1em; width: 1em; visibility: visible; opacity: 1; position: relative; }
#connector-1-1, #connector-2-1, #connector-3-1 { margin-bottom: -5px; margin-right: -1.5em; width: 1.5em; visibility: hidden; opacity: 0; position: absolute; }
#accid-1, #accid-2, #accid-3, #accid-24, #accid-25{ width: 5em; }

#connection-1{ animation: turn-right 1s ease 9s 1 normal forwards; }
#connection-2{ animation: turn-left  1s ease 9s 1 normal forwards, turn-right 1s ease 10s 1 normal forwards; }
#connection-3{ animation: turn-left  1s ease 10s 1 normal forwards, turn-right 1s ease 11s 1 normal forwards; }

#accid-1 { animation: exchange-1 1ms linear 9.5s 1 normal forwards; }
#accid-2 { animation: changing-connector2 1ms linear 9.5s 1 normal forwards; }
#accid-24{ visibility:hidden; opacity:0; animation: exchange-2 1ms linear 9.5s 1 normal forwards, exchange-1 1ms linear 10.5s 1 normal forwards; }
#accid-25{visibility:hidden; opacity:0; animation: exchange-2 1ms linear 10.5s 1 normal forwards, exchange-1 1ms linear 11.5s 1 normal forwards; }
#accid-3 { animation: changing-connector2 1ms linear 10.5s 1 normal forwards; }

#connector-1 {
    animation: changing-connector2 0.1ms linear 9.5s 1 normal forwards;
}
#connector-2 {
    animation: changing-connector2 0.1ms linear 10.5s 1 normal forwards;
}
#connector-3 {
    animation: changing-connector2 0.1ms linear 11.5s 1 normal forwards;
}
#connector-1-1 {
    animation: changing-connector 0.1ms linear 9.5s 1 normal forwards;
}
#connector-2-1 {
    animation: changing-connector 0.1ms linear 10.5s 1 normal forwards;
}
#connector-3-1 {
    animation: changing-connector 0.1ms linear 11.5s 1 normal forwards;
}


@keyframes changing-connector {
    0% { opacity: 0; visibility: hidden; position: absolute}
    100% { opacity: 1; visibility: visible; position: relative }
}
@keyframes changing-connector2 {
    0% { opacity: 1; visibility: visible; position: relative }
    100% { opacity: 0; visibility: hidden; position: absolute }
}
@keyframes exchange-1{ 0%,100%{ visibility:hidden; opacity:0; } }
@keyframes exchange-2{ 0%,100%{ visibility:visible; opacity:1; } }
@keyframes exchange-3{ 0%,100%{ visibility:hidden; opacity:0; display:none; } }


/* Peptid */
#peptide-done-animation{
    position: absolute;
    bottom: 22em;
    left: 0; right: 0; margin: 0 auto;             /* zentriert */
    height: 4.5em;
    opacity: 0; visibility: hidden;
    transform: translateX(9em) rotate(80deg);      /* dein Startoffset */
    animation: peptide-done-animation 2s ease 11.5s 1 normal forwards;
}
#peptide-text-1{
    position: absolute;
    left: 43em;
    right: 0;
    top: 9em;
    width: max-content; margin: 0 auto;
    visibility: hidden; opacity: 0;
    animation: fade-in 1s ease 13s 1 normal forwards;
}
#peptide-text-2{
    position: absolute;
    left: 43em;
    right: 0;
    bottom: 18em;
    width: max-content; margin: 0 auto;
    visibility: hidden; opacity: 0;
    animation: fade-in 1s ease 13s 1 normal forwards;
}

/* ----------------- Keyframes: nur transform/opacity/width ----------------- */
@keyframes red-bacteria-move{
    /* Start/Mitte zentriert, leicht oben; Breite wie bei dir (~10vw) */
    0%,50%{
        visibility: visible;
        width: 10.5em;                         /* 10vw @1680 ≈ 168px */
        transform: translate(0, 4em);
    }
    /* Ziel: 63em nach links, 20em hoch, größere Breite */
    50%,100%{
        visibility: visible;
        width: 24em;
        transform: translate(-40em, -10em);
    }
}

@keyframes d-structure-move{
    0%,50%{
        visibility: visible;
       /* bleibt erstmal links */
    }
    50%,100%{
        visibility: visible;
        transform: translate(32em, -2em);
        width: 24em;/* zurück zur Mitte */
        /* Höhe/Größe änderst du über die Properties (unten beibehalten) */
    }
}
@keyframes d-structure-fade{
    0%   { visibility: visible; opacity: 1; }
    100% { visibility: visible; opacity: 0; }
}

@keyframes fade-in{
    0%   { visibility: visible; opacity: 0; }
    100% { visibility: visible; opacity: 1; }
}
/*translate(18px, 1px) translate(-18px, 1px)*/
@keyframes turn-right{
    0% { transform: none; }
    50%{ transform: rotate(-9deg); transform-origin: top;}
    100%{ transform: none; }
}
@keyframes turn-left{
    0% { transform: none; }
    50%{ transform: rotate(9deg); transform-origin: top;}
    100%{ transform: none; }
}


@keyframes peptide-done-animation{
    0%,50%{
        visibility: visible; opacity: 1;
        transform: translateX(9em) rotate(80deg);
    }
    50%,100%{
        visibility: visible; opacity: 1;
        transform: translate(30em, -9em) rotate(0deg);
        height: 6.5em;
        /* bottom/height via Properties behalten: */
        /* bottom: 30em; height: 8em; → belassen als statische Endwerte */
    }
}

/* Mobile: Fifth-Banner-Inhalt ausblenden (wie gehabt, Desktop-Fokus) */
@media (max-width: 700px){
    #first-page-animation{ display:none; }
    #sixth-page-animation, #stage-scaler, #sixth-stage-scaler{ display:none; }
    #fifth-banner, #sixth-banner{ height: unset !important; }
    #full-mobile-cover-1, #full-mobile-cover-2 {
        width: 100%;
    }
}
@media (min-width: 700px){
    #full-mobile-cover-1, #full-mobile-cover-2 {
        display: none;
    }
}

/* SIXTH BANNER: gleiche Bühne, zentriert + skalierend */
#sixth-banner{
    position: relative;
    width: 100%;
    height: calc(100svh - var(--header-height));
    overflow: hidden;
    background: #F0EBD5;
    box-shadow: var(--shadow-banner);
    z-index: 1;
}

#sixth-stage-scaler{
    position: absolute;
    inset: 0; /* top/left 0, füllt Banner */
}

#sixth-page-animation{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1680px;
    height: 882px;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
    will-change: transform;
}

/* Zielpunkt oben (für die Flug-Animation) */
#sixth-target{
    position:absolute;
    top: 0;       /* vorher 2.5em */
    left: 10%;    /* deckt sich mit deiner finalen Bakterien-Position */
    transform: translateX(-50%);
    width: 18em;
    height: 1px;
    pointer-events: none;
}

/* Wenn das Bakterium in den 6. Banner umgezogen ist */
#sixth-page-animation > #red-bacteria-animation{
    position: absolute !important;
    top: 0;
    left: 10%;
    margin: unset;
    width: 18em !important;
    visibility: visible !important;
}
/* Safari-Fix: Sobald das Bakterium im Sixth angedockt ist, KEINE X-Übersetzung mehr */
#sixth-page-animation > #red-bacteria-animation.rb-docked{
    transform: none !important; /* überschreibt dein translateX(-50%) */
}
/* Sixth: Red-Bacteria im Ziel fixieren – kein translateX mehr */
#sixth-page-animation > #red-bacteria-animation {
    transform: none !important;   /* killt translateX(-50%) */
}
#sixth-page-animation h1 {
    text-align: center;
    margin: 1em 0 0 0;
}
#red-bacteria-animation2{
    position: absolute !important;
    left: 0;
    top: 0;
    margin: unset;
    /* transform: translateX(-50%) !important; */
    width: 18em !important;
}
#purple-bacteria-animation{
    position: absolute !important;
    top: 0;
    right: 0;
    margin: unset;
    /* transform: translateX(-50%) !important; */
    width: 18em !important;
}
#structures-animation-1{
    display: flex;
    justify-content: space-around;
    width: 159em;
    position: absolute;
    left: -25em;
    right: 0;
    margin: 0 auto;
    top: 15%;
    opacity: 0;
    visibility: hidden;
    animation: structures-animation 3s ease 1s 1 normal forwards,
    exchange-4 0.01s ease 4.5s 1 normal forwards;
}
#structures-animation-2{
    display: flex;
    justify-content: space-around;
    width: 59em;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 40%;
    opacity: 0;
    visibility: hidden;
    animation: fade-in 0.01s ease 4.5s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}

#cut-structure-animation {
    width: 24em;
}
#red-structure-2, .purple-structure {
    visibility: visible;
    width: 8em;
    opacity: 1;
}
#red-structure-2{
    animation: size-structure-animation 3s ease 1s 1 normal forwards;
}
.purple-structure {
    animation: size-structure-animation 3s ease 1s 1 normal forwards,
    exchange-4 0.5s ease 7s 1 normal forwards;
}
.scissors{
    width: 3em;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    margin: 0 auto;
    animation: fade-in 0.5s ease 4.1s 1 normal forwards,
    exchange-4 0.5s ease 6.5s 1 normal forwards;
}
#scissor-1 {
    left: -47.5em;
    right: 0;
    top: 24em;
    scale: -1;
}
#scissor-2 {
    top: 23.5em;
    left: -30em;
    right: 0;
}
#scissor-3 {
    left: 11.5em;
    right: 0;
    top: 24em;
    scale: -1;
}
#scissor-4 {
    top: 23.5em;
    left: 29em;
    right: 0;
}
#red-s-animation, #purple-s-animation {
    width: 8.3em;
    position: absolute;
    top: 40.1%;
    margin: 0 auto;
}
#red-s-animation {
    left: -38.4em;
    right: 0;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 0.01s ease 4.5s 1 normal forwards,
    move-up 1s ease 5.6s 1 normal forwards;
}
#purple-s-animation {
    right: 0;
    left: 20.6em;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 0.1s ease 4.5s 1 normal forwards,
    move-in-position 2s ease 4.6s 1 normal forwards;
}
#peptide-red-purple-animation {
    position: absolute;
    margin: 0 auto;
    top: 40%;
    right: 25em;
    width: 18em;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 7.5s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}
#peptide-arrow-animation {
    position: absolute;
    margin: 0 auto;
    top: 44%;
    right: 44em;
    width: 9em;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 7.5s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}
#overview-animation {
    position: absolute;
    width: 41.9em;
    top: 38.4%;
    left: -29em;
    right: 0;
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 12s 1 normal forwards;
}
#sixth-text-1 {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: -15em;
    right: 0;
    top: 70%;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 0.5s ease 6.6s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}
#sixth-text-2 {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 20em;
    right: 0;
    top: 68%;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 7.5s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}
#sixth-text-3 {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 28em;
    right: 0;
    top: 54%;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 7.5s 1 normal forwards,
    exchange-4 1s ease 10s 1 normal forwards;
}
#sixth-text-4 {
    position: absolute;
    margin: 0 auto;
    right: 4em;
    top: 35%;
    width: max-content;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s ease 12s 1 normal forwards;
}
#sixth-text-5 {
    display: flex;
    font-weight: 100;
    position: absolute;
    margin: 0 auto;
    right: 2.5em;
    top: 73%;
    width: 20em;
    visibility: hidden;
    opacity: 0;
    animation: fade-in 1s
    ease 12s 1 normal forwards;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#flex-sixth-text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
@keyframes structures-animation{
    0% { visibility: visible; opacity: 1;width: 159em; left: -25em;;top: 15%; }
    100% { visibility: visible; opacity: 1;width: 59em; left: 0;top: 40%; }
}
@keyframes size-structure-animation {
    0%   { width: 8em; }
    100% { width: 24em; }
}
@keyframes move-in {
    0%   { visibility: visible; opacity: 1; right: -100em;}
    100% { visibility: visible; opacity:  1; right: 0;}
}
@keyframes exchange-4 {
    0%   { visibility: visible; opacity: 1;}
    100% { visibility: hidden; opacity: 0; }
}
@keyframes move-up {
    0%   { top: 40.1%; visibility: visible; opacity: 1;}
    100% { top: 35%; visibility: hidden; opacity: 0; }
}
@keyframes move-in-position {
    0%   { top: 40.1%; left: 20.6em;}
    30% { top: 50%; left: 20.6em;}
    60% { top: 50%; left: -38.4em;}
    100% { top: 40.1%; left: -38.4em;}
}
#seventh-banner  { min-height: calc(100vh - var(--header-height)); background: #F0EBD5;}
#seventh-top-banner  {background: #E8D7B0; box-shadow: var(--shadow-banner); position: relative; padding-bottom: 4em;   min-height: calc(100vh - var(--header-height));}
.solution-section { margin: auto;}
.solution-section h1 {
    padding-top: 2em;
    text-align: center;
    font-weight: bold;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}
.solution-section img {
    margin-left: 4vw;
    margin-bottom: -10vw;
    width: 21VW;
}

.solution-tabs {
    margin-top: 4em;
    display: flex;
    flex-direction: row;
    min-height: 60vh;
    align-content: space-between;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.solution-row-1, .solution-row-2 {
    display: flex;
    width: 85%;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.solution-row-1 {
    margin-bottom: 4vh;
    width: 65%;
}

.solution-tab {
    width: 100%;
    position: relative;
    height: 75%;
    margin-bottom: 2em;
    border-radius: 20px;
    padding-bottom: 2vh;
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .2);
}
.solution-tab-cover {
    height: 80%;
    border-radius: 20px 20px 0 0;
}

.solution-tab-text {
    text-align: center;
    background-color: #F0EBD5;
    min-height: 7vh;
    align-content: center;
    border-radius: 0 0 20px 20px;
}
.solution-tab-text p {
    margin: unset;
    color: white
}

.solution-tabs a {
    text-decoration: none;
    color: black;
    height: 30vh;
    width: 20em;
}

.solution-tab-1 .solution-tab-cover {
    background-image: url("https://static.igem.wiki/teams/5667/assets/project/project-description/project-description.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}.solution-tab-2 .solution-tab-cover {
    background-image: url("https://static.igem.wiki/teams/5667/assets/project/our-platform/our-platform-banner-2.webp");
    background-repeat: no-repeat;
    background-size: cover;
     background-position: center;
     overflow: hidden;
     position: relative;
}.solution-tab-3 .solution-tab-cover {
    background-image: url("https://static.igem.wiki/teams/5667/assets/wet-lab/part-collection/part-collection.webp");
    background-repeat: no-repeat;
    background-size: cover;
      background-position: center;
      overflow: hidden;
      position: relative;
}.solution-tab-4 .solution-tab-cover {
    background-image: url("https://static.igem.wiki/teams/5667/assets/dry-lab/software/software.webp");
    background-repeat: no-repeat;
    background-size: cover;
   background-position: center;
   overflow: hidden;
   position: relative;
}.solution-tab-5 .solution-tab-cover {
    background-image: url("https://static.igem.wiki/teams/5667/assets/engagement/hp/favorite.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}.solution-tab-6 .solution-tab-cover {
     background-image: url("https://static.igem.wiki/teams/5667/assets/project/engineering/engineering-banner.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     overflow: hidden;
     position: relative;
}
.solution-tab-1 .solution-tab-text {
    background-color: #C8942B;
}
.solution-tab-2 .solution-tab-text {
    background-color: rgba(153, 193, 185, 1);
}
.solution-tab-3 .solution-tab-text {
    background-color: rgba(132, 72, 118, 1);
}
.solution-tab-4 .solution-tab-text {
    background-color: rgba(216, 140, 154, 1);
}
.solution-tab-5 .solution-tab-text {
    background-color: #5C8675;
}
.solution-tab-6 .solution-tab-text {
    background-color: #B64C56;
}
.solution-tab-text-1 {
    font-weight: 700;
    margin: 0;
}
.solution-tab-text-2 {
    font-weight: 100;
    font-size: 1em;
    margin: 0 auto;
}

.solution-tab-1 .solution-tab-cover::before, .solution-tab-2 .solution-tab-cover::before, .solution-tab-3 .solution-tab-cover::before, .solution-tab-4 .solution-tab-cover::before, .solution-tab-5 .solution-tab-cover::before, .solution-tab-6 .solution-tab-cover::before{
    content: "";
    position: absolute;
    inset: 0;

    /* selben Hintergrund übernehmen */
    background-image: inherit;
    background-size: inherit;
    background-position: top;
    background-repeat: inherit;

    transform: scale(1);                  /* statt background-size */
    transition: transform .75s cubic-bezier(.22,.61,.36,1);
    will-change: transform;               /* sparsam einsetzen */
}

.solution-tab-1 .solution-tab-cover:hover::before, .solution-tab-2 .solution-tab-cover:hover::before, .solution-tab-3 .solution-tab-cover:hover::before, .solution-tab-4 .solution-tab-cover:hover::before, .solution-tab-5 .solution-tab-cover:hover::before, .solution-tab-6 .solution-tab-cover:hover::before{
    transform: scale(1.5);                /* entspricht ~150% */
}

.solution-row-first, .solution-row-second, .solution-row-third {
    height: 30vh;

}

@media (min-width: 1475px) {
    .solution-row-first, .solution-row-second, .solution-row-third {
        width: 20em;
    }
}
/* Optional: Accessibility */
@media (prefers-reduced-motion: reduce){
    .solution-tab-1 .solution-tab-cover::before{ transition: none; }
}
@media (max-height: 950px) {
    .solution-tab {
        padding-bottom: 0.9svh;
    }
}
@media (max-width: 1745px) {
    .solution-row-2 {
        width: 65%;
    }
}
@media (max-width: 1475px) {
    .solution-tab {
        width: 28em;
    }
    .solution-row-1, .solution-row-2 {
        width: 100%;
    }
    .solution-tabs a {
        width: unset;
    }
}
@media (max-width: 1345px) {
    .solution-tab {
        width: 23em;
    }
}
@media (max-width: 1110px) {
    .solution-tab {
        width: 24vw;
        padding-bottom: 4.7svh;
        height:75%;
    }
    .solution-tab-text {
        min-height: 56%;
    }
    .solution-tabs a {
        width: unset;
        /*height: 20vh*/
    }
}
@media (max-width: 1080px) {
    .solution-tab-text {
        min-height: 48%;
    }
    .solution-row-2 {
        height: unset;
    }
    .solution-tab {
        padding-bottom: 5.7svh;
    }
}
@media (max-width: 825px) {
    .solution-row-1, .solution-row-2 {
        align-items: center;

    }
    .solution-tab {
        width: 11.5em;

    }


    .solution-row-1{
        margin-bottom: unset;
    }
    .solution-row-2 {
        height: 25vh;
    }

}
@media (max-width: 555px) {
    .solution-row-1 {
        margin-bottom: 4vh;
    }
    .solution-row-2 {
        min-height: 63vh;
    }
    .solution-tab-1, .solution-tab-2 {
        margin-right: unset;
        margin-left: unset;
    }
    .solution-row-third {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: unset;
        width: 100%;
        justify-content: space-evenly;
    }
    .solution-row-first, .solution-row-second {
        height:unset;
    }
    .solution-tab-cover {
        display: none;
    }
    .solution-tab-text {
        border-radius: 20px;
    }
    .solution-row-third a {
        height: unset !important;
    }
    .solution-tab {
        height: unset;
        padding: unset;
    }
    .solution-tabs {
        min-height: 40vh;
        align-content: stretch;
    }
    #seventh-top-banner {
        min-height: unset;
    }
}


@media (max-width: 380px) {
    .solution-row-1 {
        height: 23em;
        margin-bottom: unset;
    }
    .solution-row-2 {
        min-height: 83vh;
    }
    .solution-tab {
        width: 12.5em;
    }
}
@media (min-height: 750px) and (max-width: 380px) {
    .solution-row-1 {
        height: 28em;
    }
}

#promo-video-section h2 {
    width: clamp(480px, 60vw, 1100px);
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: bold;
}

#promo-video {
    width: clamp(280px, 60vw, 1100px);
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1.25em auto 0;
    display: block;
    transform: none;
}

#promo-video iframe,
#promo-video video {
    width: 100%;
    height: 100%;
    display: block;
    border: 10px solid #E2BB78 !important;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

#promo-video .gudrun-white-video {
    width: 10%;
    position: relative;
    top: 1em;
    left: 12em;
}

@media (max-width: 1010px) {
    #promo-video-section h2 { width: 90vw; }
    #promo-video { width: 90vw; }
}
@media (max-width: 750px) {
    #promo-video {
        margin: 1.25em 2% 0;
    }
}