/* Grundlegende Stile */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #4A4A4A; /* Dunkelgrau für Text */
    background-color: #F0F0F0; /* Sehr helles Grau für Hintergrund */
    text-align: left; /* Standardausrichtung links */
}

header, footer {
    background-color: #4A90E2; /* Sanftes Blau für Kopfzeile und Fußzeile */
    color: white;
    text-align: center; /* Zentrierte Ausrichtung für Kopf- und Fußzeile */
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav a, footer a {
    color: white;
    text-decoration: none;
}

section {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
}

h1, h2 {
    text-align: center; /* Zentrierte Ausrichtung für Überschriften */
    color: #7ED321; /* Helles Grün für Überschriften */
}

button, .button {
    background-color: #F8E71C; /* Sonniges Gelb für Buttons */
    color: #333;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    text-align: center; /* Zentrierter Text in Buttons */
}

button:hover, .button:hover {
    background-color: #D4AF37; /* Dunkleres Gelb für Hover-Effekt */
}

/* Responsive Design */
@media screen and (max-width: 600px) {
    nav ul li {
        display: block;
        text-align: center; /* Zentrierte Ausrichtung für Navigationselemente auf kleinen Bildschirmen */
    }
}

/* Weitere Stile ... */

/* Stil für Hauptinhalt und Bildcontainer */
.container {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px; /* Maximale Breite des Hauptinhalts */
}

.bild-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -10px; /* Negative Margin zur Kompensation der Bild-Margins */
}

.bild-container .bild {
    flex: 1;
    margin: 10px;
    max-width: calc(33.333% - 20px); /* Drei Bilder nebeneinander mit Margin */
}

.bild-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Quadratisches Verhältnis */
}

@media screen and (max-width: 800px) {
    .bild-container .bild {
        max-width: 100%; /* Unter 800px Breite, Bilder untereinander */
    }
}