/* Globale Resets und Body-Styling */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Verhindert Scrollbalken */
    background-color: #000; /* Hintergrundfarbe, falls das Bild nicht lädt oder transparent ist */
}

/* Container-Styling */
.splash-container {
    display: flex; /* Nutzt Flexbox zum Zentrieren */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    width: 100vw; /* Volle Breite des Viewports */
    height: 100vh; /* Volle Höhe des Viewports */
}

/* Bild-Styling und Animation */
#splash-image {
    display: block; /* Verhindert möglichen extra Leerraum unter dem Bild */
    /* Behält das Seitenverhältnis bei und passt das Bild in den Container ein.
       Das gesamte Bild ist sichtbar, aber es können Ränder entstehen. */
    width: 100%;
    height: 100%;
    object-fit: contain; /* Wichtig: Geändert von 'cover' zu 'contain' */

    /* Animations-Setup */
    opacity: 0; /* Startet unsichtbar (wird durch Inline-Style verstärkt) */
    transform: scale(0.95); /* Optional: leichter Zoom-Effekt beim Einblenden */
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; /* Sanfter Übergang für Deckkraft und Skalierung */
    /* Dauer (1.5s) und Timing-Funktion (ease-in-out) können angepasst werden */
}

/* Zustand, wenn das Bild sichtbar werden soll */
#splash-image.visible {
    opacity: 1;
    transform: scale(1); /* Optional: Zurück zur normalen Größe */
}