/* Grundlegende Einstellungen, um den gesamten Viewport zu nutzen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Flexbox Container zum Zentrieren */
.container {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    min-height: 100vh;       /* Mindesthöhe ist volle Bildschirmhöhe */
    background-color: #f0f0f0; /* Optional: Hintergrundfarbe */
    padding: 20px;           /* Platz zum Rand bei kleinen Bildschirmen */
    box-sizing: border-box;
}

/* Responsive Bildeinstellungen */
.responsive-image {
    max-width: 100%;    /* Bild wird nie breiter als der Bildschirm */
    height: auto;       /* Höhe passt sich proportional an */
    border-radius: 8px; /* Optional: abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Schatten */
}