:root {
    --image-width: 260px; /* Bildbreite - anpassen */
    --image-height: auto;  /* Bildhöhe - kann auf auto gesetzt werden oder angepasst werden */
}
.logo-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            overflow: hidden;
            box-sizing: border-box; /* Box-Modell korrekt setzen */
            padding: 0px; /* Optional: Padding hinzufügen */
        }

        .logo-container img {
            max-width: 100%; /* Maximale Breite auf 100% setzen */
            height: auto; /* Automatische Höhe basierend auf der Breite */
            object-fit: contain; /* Objekt passend einpassen */
            box-sizing: border-box; /* Box-Modell korrekt setzen */
        }
	
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Hintergrundfarbe */
}

.container {
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
}

.image-container {
    display: flex;
    flex-wrap: wrap; /* Bilder in einer flexiblen Zeilenanordnung */
    justify-content: center; /* Zentriert die Bilder horizontal */
    gap: 10px; /* Abstand zwischen den Bildern */
}

.image-container a {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none; /* Unterstreichung entfernen */
}

.image-container img {
    width: var(--image-width); /* Bildbreite durch CSS-Variable festgelegt */
    height: var(--image-height); /* Bildhöhe durch CSS-Variable festgelegt */
    border-radius: 10px;
    transition: transform 0.3s;
}

.image-container img:hover {
    transform: scale(1.05); /* Vergrößerung beim Hover */
}


@media (max-width: 768px) {
    h1 {
        font-size: 1.5em; /* Kleinere Schriftgröße für Mobilgeräte */
    }

  .back-button a {
    display: inline-block; /* Macht das <a>-Element wie einen Block, erlaubt Größenänderungen */
    background-color: #ff6347; /* Hintergrundfarbe: Tomatenrot */
    color: white; /* Schriftfarbe */
    padding: 10px 20px; /* Innenabstand: 10px oben/unten, 20px links/rechts */
    font-size: 18px; /* Schriftgröße */
    font-family: Arial, sans-serif; /* Schriftart */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    border-radius: 5px; /* Runde Ecken */
    margin-top: 10px; /* Abstand nach oben */
}

.back-button a:hover {
    background-color: #4682b4; /* Hintergrundfarbe beim Hover: Stahlblau */
}

