body {
    margin: 0;
    padding: 0;
    background-color: #8B8378; /* Hintergrundfarbe */
    height: 100vh; /* Höhe des Body-Elements */
    display: block;
    text-align: center;
}

img {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten auf den Hintergrund */
    margin: 0 auto; /* Abstand nach links und rechts gleichmäßig machen */
    display: block;
    position: absolute;/*fixed*/;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scale-up 3s ease-in-out;
}

@keyframes scale-up {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Für kleine Bildschirme (z.B. Smartphones) */
@media only screen and (max-width: 768px) {
    img {
        max-width: 95%;
        max-height: 95vh;
    }
}

/* Für mittlere Bildschirme (z.B. Tablets) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    img {
        max-width: 00%;
        max-height: 90vh;
    }
}

/* Für große Bildschirme (z.B. Desktop-Computer) */
@media only screen and (min-width: 1025px) {
    img {
        max-width: 85%;
        max-height: 85vh;
    }
}