body {
    margin: 0;
    padding: 0;
    display: flex; /* Für Flexbox-Layout */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    min-height: 100vh; /* Mindesthöhe des Bodys auf 100% der Viewport-Höhe */
    background-color: #f0f0f0; /* Optional: Hintergrundfarbe für die Seite */
}

.image-container {
    width: 100%; /* Der Container nimmt die volle Breite ein */
    height: 100vh; /* Der Container nimmt die volle Höhe des Viewports ein */
    display: flex; /* Erneut Flexbox für die Bildzentrierung im Container */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert Scrollbalken, wenn das Bild größer ist als der Container */
}

.image-container img {
    max-width: 100%; /* Das Bild ist maximal 100% breit */
    max-height: 100%; /* Das Bild ist maximal 100% hoch */
    object-fit: contain; /* Wichtig: Skaliert das Bild so, dass es in den Container passt,
                            wobei das Seitenverhältnis beibehalten wird.
                            Es können Leerräume (Letterboxing) entstehen. */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild, der durch Inline-Elemente entsteht */
}