/* Den gesamten Hintergrund füllen und alles zentrieren */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    
    /* Hintergrundbild-Einstellungen */
    background-image: url('img/gmggm.jpg');
    background-repeat: repeat; /* Dies sorgt für den Kachel-Effekt */
    background-attachment: fixed; /* Das Bild bleibt beim Scrollen fixiert (optional) */
}
.image-container {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center;     /* Vertikale Zentrierung */
    min-height: 100vh;       /* Nutzt die volle Höhe des Fensters */
    padding: 20px;           /* Abstand zum Bildschirmrand */
}

.responsive-image {
    /* Weißer Rand */
    border: 15px solid white;
    background-color: white; /* Sorgt dafür, dass der Rand auch bei Transparenz weiß wirkt */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Optional: Ein leichter Schatten für mehr Tiefe */

    /* Responsive Größe */
    max-width: 90%;          /* Maximale Breite auf dem Bildschirm */
    max-height: 80vh;        /* Maximale Höhe, damit es nicht gescrollt werden muss */
    width: auto;
    height: auto;
    object-fit: contain;     /* Behält das Seitenverhältnis bei */
}