/* Basis-Styles */
body {
    font-family: 'Avenir Next', sans-serif; /* Schriftart */
    line-height: 1.6; /* Zeilenhöhe */
    margin: 0; /* Kein Standardabstand */
    padding: 0; /* Kein Standardabstand */
}

header {
    text-align: center; /* Header-Inhalte zentrieren */
    margin-bottom: 20px; /* Abstand nach unten */
}

.responsive-image {
    width: 100%; /* Volle Breite */
    height: auto; /* Automatische Höhe */
}
/* Sektionen */
section {
    margin: 20px; /* Abstand für Sektionen */
    padding: 20px; /* Innenabstand */
    border: 2px solid #ccc; /* Rahmen */
    border-radius: 8px; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hintergrundfarbe */
    text-align: center; /* Zentriert den Text in allen Sektionen */
}



/* Galerie */
.gallery {
    margin: 20px 0; /* Abstand nach oben und unten */
}

.gallery-images {
    display: flex; /* Flexbox für die Galerie */
    flex-wrap: wrap; /* Zeilenumbruch */
    justify-content: center; /* Zentrierung */
}

.gallery-image {
    width: 150px; /* Breite der Galerie-Bilder */
    height: 150px; /* Höhe der Galerie-Bilder */
    object-fit: cover; /* Verhindert Verzerrung der Bilder */
    margin: 10px; /* Abstand zwischen den Bildern */
    cursor: pointer; /* Zeigt, dass die Bilder klickbar sind */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für 3D-Effekt */
}

/* Modal für große Bilder */
.modal {
    display: none; /* Standardmäßig ausblenden */
    position: fixed; /* Fixiert in der oberen Ecke */
    z-index: 1; /* Über anderen Elementen anzeigen */
    left: 0;
    top: 0;
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    overflow: auto; /* Scrollen bei Bedarf */
    background-color: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund */
}

.modal-content {
    margin: auto; /* Zentriert das Bild */
    display: block; /* Bild anzeigen */
    width: 80%; /* Bildbreite */
    max-width: 700px; /* Maximale Breite des Bildes */
}

.close {
    position: absolute; /* Fixiert in der oberen Ecke */
    top: 15px;
    right: 35px;
    color: #fff; /* Weiße Farbe für den Schließen-Button */
    font-size: 40px; /* Größe des Schließen-Buttons */
    font-weight: bold; /* Fett gedruckt */
    transition: 0.3s; /* Weicher Übergang */
}

.close:hover,
.close:focus {
    color: #bbb; /* Farbänderung beim Hover */
    text-decoration: none; /* Kein Unterstrich */
    cursor: pointer; /* Zeigt, dass es klickbar ist */
}