html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background: transparent;
}

.cloud-container {
    position: relative;
    width: 100%;
    /* Wir geben dem Container etwas mehr Raum, falls der Iframe in Divi zu klein ist */
    height: 100vh; 
    overflow: hidden;
}

.cloud, .bird {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
    pointer-events: none;
}

/* WOLKEN-LOGIK */
.cloud {
    right: -1200px;
    width: var(--size);
    /* Aspect-Ratio entfernt, stattdessen feste Proportionen zur Sicherheit */
    height: 400px; 
    background-image: url("Clouds1Weicher.png");
    opacity: 0.4;
    z-index: 1;
    animation: moveLeft var(--speed) linear infinite;
    animation-delay: var(--delay);
}

/* VOGEL-LOGIK */
.bird {
    right: -200px;
    width: var(--size);
    height: var(--size);
    background-image: url("BirdGIF1.gif");
    z-index: 2;
    animation: moveLeft var(--speed) linear infinite;
    animation-delay: var(--delay);
}

.bird.reverse {
    right: auto;
    left: -200px;
    animation: moveRight var(--speed) linear infinite;
    animation-delay: var(--delay);
}

@keyframes moveLeft {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100vw - 1500px)); }
}

@keyframes moveRight {
    from { transform: translateX(0) scaleX(-1); }
    to { transform: translateX(calc(100vw + 1500px)) scaleX(-1); }
}