/* CSS für den Fade-In-Effekt des gesamten Containers */
#star-field {
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 2s ease-in-out; /* Langer, sanfter Fade-In über 2 Sekunden */
}

/* Wird per JavaScript hinzugefügt, um den Fade-In auszulösen */
#star-field.star-field-ready {
    opacity: 1;
}

/* Keyframes für das Ein- und Ausblenden der Sterne */
@keyframes twinkle {
    0%, 100% { opacity: 0; } /* Start und Ende: unsichtbar */
    50% { opacity: 1; }      /* Mitte: voll sichtbar */
}

/* Basis-Styling für den Stern */
.star {
    position: absolute;
    background-color: #f9e7a6; /* Sanfter, cremiger Goldton */
    /* Erstellung eines Fünf-Stern-Ausschnitts mit clip-path */
    clip-path: polygon(50% 0%, 61% 35%, 100% 35%, 75% 61%, 89% 100%, 50% 77%, 11% 100%, 25% 61%, 0% 35%, 39% 35%);
    box-shadow: 0 0 4px rgba(255, 238, 179, 0.9); /* Leuchten-Effekt */
    animation: twinkle linear infinite;
    /* Übergangseffekt, falls die Animation per JS oder Media-Query gestoppt wird */
    transition: opacity 0.5s ease-in-out;
}

/* BARRIEREFREIHEIT: Reduzierte Bewegung */
/* Für Nutzer, die in ihren Systemeinstellungen reduzierte Bewegung bevorzugen, wird die Animation deaktiviert. */
@media (prefers-reduced-motion: reduce) {
    .star {
        animation: none !important;
        opacity: 0.5 !important; /* Sterne bleiben statisch, aber sichtbar */
    }
}