/* Allgemeines Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f8ff; /* Hellblau als Hintergrund */
    color: #333;
    position: relative;
    overflow: hidden;
}

/* Frühlingseffekte - Schwebende Blätter oder Blumen */
.spring-container {
    position: relative;
    height: 100vh; /* Der Container füllt den gesamten Bildschirm */
}

/* Animation für Schwebende Blumen oder Blätter */
@keyframes float {
    0% {
        transform: translateY(-50px) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Styling für die Blumen-Elemente */
.flower {
    position: absolute;
    top: -50px; /* Start oberhalb des Viewports */
    font-size: 3rem;
    animation: float ease-in-out infinite; /* Sanftere Animation */
    z-index: 9999;
    animation-timing-function: ease-in-out;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden; /* Verhindert das Darstellen von Rückseiten bei Transformationen */
}

/* Farben für die Blumen (könnte im JS zugewiesen werden) */
.flower:nth-child(odd) {
    animation-duration: 10s; /* Zufällige Dauer für ungerade Blumen */
}

.flower:nth-child(even) {
    animation-duration: 15s; /* Zufällige Dauer für gerade Blumen */
}

/* Skalierung und Größenanpassung für verschiedene Bildschirmgrößen */
@media (min-width: 768px) {
    .flower {
        font-size: 3rem; /* Größere Blumen für größere Bildschirme */
    }
}

@media (max-width: 768px) {
    .flower {
        font-size: 2rem; /* Kleinere Blumen für mobile Geräte */
    }
}