/* Container für die Animation */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Verhindert das Überlaufen der Symbole */
    pointer-events: none; /* Damit keine Klicks auf die Symbole gehen */

}

/* Symbol-Animation */
.symbol {
    position: absolute;
    width: 50px; /* Größe des Symbols */
    height: 50px;
    background-image: url('../pictures/Star3.png'); /* Dein Symbol */
    background-size: cover;
    opacity: 20%; /* Leicht transparent für besseren Look */
    animation: moveSymbol 10s linear infinite; /* Endlose Animation */
    z-index: -5;


}

/* Keyframes für Bewegung */
@keyframes moveSymbol {
    from {
        transform: translate(100vw, 50vh); /* Start oben rechts */
    }
    to {
        transform: translate(-10vw, 100vh); /* Endpunkt unten links */
    }
}

.symbol1 {
    position: absolute;
    width: 50px; /* Größe des Symbols */
    height: 50px;
    background-image: url('../pictures/Star3.png'); /* Dein Symbol */
    background-size: cover;
    opacity: 20%; /* Leicht transparent für besseren Look */
    animation: moveSymbol1 8s linear infinite; /* Endlose Animation */
    z-index: -5;

}

@keyframes moveSymbol1 {
    from {
        transform: translate(100vw, -10vh);
    }
    to {
        transform: translate(-10vw, 100vh);
    }
}
.symbol1::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../pictures/Star3.png');
    background-size: cover;
    opacity: 50%;
    top: 500px; /* Verschiebung relativ zum Original */
    left: 50px;
}
.symbol::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('../pictures/Star3.png');
    background-size: cover;
    opacity: 50%;
    top: -700px; /* Verschiebung relativ zum Original */
    left: 50px;
}