body {
    background-color: white;
    margin: 0;
    padding: 0;
}
.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.header-item {
    flex: 0 0 calc(33.33% - 4px); /* 3 Spalten */
    margin: 2px;
}

.header-img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.header2 {
    width: 100%;
}

.header-image {
    width: 100%;
    height: auto;
    display: block;
}


.container {
    max-width: 100%;
    overflow-x: hidden;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center; /* Horizontale Zentrierung des Container-Elements */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.book {
    text-align: center;
    flex: 0 0 calc(100% / 3 - 4px);
    margin: 2px;
}

.book img {
    max-width: 100%;
    height: auto;
}
.gallery2 {
    display: flex;
    flex-wrap: nowrap; /* Verhindert das Umbruch der Elemente */
    justify-content: center; /* Horizontale Zentrierung der Elemente */
    align-items: center; /* Vertikale Zentrierung der Elemente */
    overflow-x: auto; /* Horizontales Scrollen aktivieren, wenn die Elemente nicht in die Breite passen */
    padding: 5px 0; /* Optional: Abstand oberhalb und unterhalb der Galerie */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS-Geräten */
}

.gallery-image {
    flex: 0 0 auto; /* Automatische Anpassung der Breite */
    height: auto; /* Höhe automatisch anpassen */
    margin: 0; /* Kein Abstand zwischen den Bildern */
    max-width: 100%; /* Maximale Breite auf 100% setzen */
}