#gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* Erstellt ein 4-Spalten-Grid */
    grid-auto-rows: minmax(100px, auto); /* Stellt sicher, dass die Zeilen mindestens 100px hoch sind */
    gap: 15px; /* Abstand zwischen den Grid-Elementen */
    max-width: 1000px; /* Begrenzung der maximalen Breite der Galerie */
    padding: 20px; /* Innenabstand der Galerie */
    background-color: white; /* Hintergrundfarbe der Galerie */
    margin: 0 auto; /* Zentrierung der Galerie */
}

figure {
    margin: 0;
    padding: 0;
    border: 1px solid white; /* Weißer Rand um die Bilder */
    border-radius: 8px; /* Runde Ecken für die Bilder */
    overflow: hidden; /* Verhindert, dass Inhalte aus dem Rahmen herausragen */
    background-color: white; /* Weißer Hintergrund für jedes Bild */
    display: flex;
    flex-direction: column; /* Ordnet Inhalte vertikal an */
    position: relative; /* Ermöglicht das absolute Positionieren des figcaption */
}

figure img {
    width: 100%; /* Bild nimmt die gesamte Breite des Containers ein */
    height: 100%; /* Bild nimmt die gesamte Höhe des Containers ein */
    object-fit: cover; /* Skaliert das Bild, sodass es den Container ausfüllt, ohne verzerrt zu werden */
}

figcaption {
    position: absolute; /* Ermöglicht das Überlagern des Textes über das Bild */
    bottom: 0; /* Setzt den Text an den unteren Rand des Bildes */
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */
    color: white; /* Weiße Schriftfarbe */
    text-align: center; /* Zentriert den Text */
    padding: 10px; /* Abstand zwischen Text und Rand */
    opacity: 0; /* Initial unsichtbar */
}

figure:hover figcaption {
    opacity: 1; /* Text wird beim Hover sichtbar */
}

figure:nth-child(1) {
    grid-column: span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: span 2; /* Bild erstreckt sich über 2 Zeilen */
}

figure:nth-child(2) {
    grid-column: 3 / span 1; /* Positionierung im Grid für das 2. Bild */
    grid-row: 1;
}

figure:nth-child(3) {
    grid-column: 4; /* Positionierung im Grid für das 3. Bild */
    grid-row: 1;
}

figure:nth-child(4) {
    grid-column: 3 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 2; /* Positionierung im Grid */
}

figure:nth-child(5) {
    grid-column: 1; /* Positionierung im Grid für das 5. Bild */
    grid-row: 3;
}

figure:nth-child(6) {
    grid-column: 2 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 3;
}

figure:nth-child(7) {
    grid-column: 4; /* Positionierung im Grid für das 7. Bild */
    grid-row: 3;
}

figure:nth-child(8) {
    grid-column: 1 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 4;
}

figure:nth-child(9) {
    grid-column: 3 / span 2; /* Bild erstreckt sich über 2 Spalten und 2 Zeilen */
    grid-row: span 2;
}

figure:nth-child(10) {
    grid-column: 1 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 5;
}

figure:nth-child(11) {
    grid-column: 5 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 1 / span 2;
}

figure:nth-child(12) {
    grid-column: 7 / span 1; /* Positionierung im Grid für das 2. Bild */
    grid-row: 1;
}

figure:nth-child(13) {
    grid-column: 8; /* Positionierung im Grid für das 3. Bild */
    grid-row: 1;
}

figure:nth-child(14) {
    grid-column: 7 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 2; /* Positionierung im Grid */
}

figure:nth-child(15) {
    grid-column: 5; /* Positionierung im Grid für das 5. Bild */
    grid-row: 3;
}

figure:nth-child(16) {
    grid-column: 6 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 3;
}

figure:nth-child(17) {
    grid-column: 8; /* Positionierung im Grid für das 7. Bild */
    grid-row: 3;
}

figure:nth-child(18) {
    grid-column: 5 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 4;
}

figure:nth-child(19) {
    grid-column: 7 / span 2; /* Bild erstreckt sich über 2 Spalten und 2 Zeilen */
    grid-row: 4 / span 2;
}

figure:nth-child(20) {
    grid-column: 5 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 5;
}

figure:nth-child(21) {
    grid-column: 1 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 6 / span 2; /* Bild erstreckt sich über 2 Zeilen */
}

figure:nth-child(22) {
    grid-column: 3;
    grid-row: 6 / span 1;
}

figure:nth-child(23) {
    grid-column: 4; /* Positionierung im Grid für das 3. Bild */
    grid-row: 6 / span 1;
}

figure:nth-child(24) {
    grid-column: 3 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 7; /* Positionierung im Grid */
}

figure:nth-child(25) {
    grid-column: 1; /* Positionierung im Grid für das 5. Bild */
    grid-row: 8;
}

figure:nth-child(26) {
    grid-column: 2 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 8;
}

figure:nth-child(27) {
    grid-column: 4; /* Positionierung im Grid für das 7. Bild */
    grid-row: 8;
}

figure:nth-child(28) {
    grid-column: 1 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 9 / span 1;
}

figure:nth-child(29) {
    grid-column: 3 / span 2; /* Bild erstreckt sich über 2 Spalten und 2 Zeilen */
    grid-row: 9 / span 3;
}

figure:nth-child(30) {
    grid-column: 1 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 10 / span 2;
}

figure:nth-child(31) {
    grid-column: 5 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 6 / span 2; /* Bild erstreckt sich über 2 Zeilen */
}

figure:nth-child(32) {
    grid-column: 7;
    grid-row: 6 / span 1;
}

figure:nth-child(33) {
    grid-column: 8; /* Positionierung im Grid für das 3. Bild */
    grid-row: 6 / span 1;
}

figure:nth-child(34) {
    grid-column: 7 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 7; /* Positionierung im Grid */
}

figure:nth-child(35) {
    grid-column: 5; /* Positionierung im Grid für das 5. Bild */
    grid-row: 8;
}

figure:nth-child(36) {
    grid-column: 6 / span 2; /* Bild erstreckt sich über 2 Spalten */
    grid-row: 8;
}

figure:nth-child(37) {
    grid-column: 8;
    grid-row: 8;
}

figure:nth-child(38) {
    grid-column: 5 / span 2;
    grid-row: 9;
}

/* Modal-Styles */
.modal {
    display: none; /* Modal ist standardmäßig versteckt */
    position: fixed; /* Fixe Position über dem Rest der Seite */
    z-index: 1000; /* Modal wird über allen anderen Elementen angezeigt */
    left: 0;
    top: 0;
    width: 100%; /* Modal erstreckt sich über die gesamte Breite */
    height: 100%; /* Modal erstreckt sich über die gesamte Höhe */
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparenter schwarzer Hintergrund */
}

.modal-buttons button {
    background: linear-gradient(45deg, #000000, #818181); /* Farbverlauf von Schwarz zu Grau */
    color: white; /* Weiße Schrift */
    border: none; /* Kein Rahmen */
    padding: 12px 24px; /* Innenabstand der Buttons */
    font-size: 16px; /* Schriftgröße */
    border-radius: 30px; /* Runde Ecken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Schattierung für 3D-Effekt */
    cursor: pointer; /* Mauszeiger wird zu einer Hand bei Hover */
    transition: all 0.3s ease; /* Übergangseffekte beim Hover */
    width: 7%; /* Breite des Buttons */
    height: 7%; /* Höhe des Buttons */
}

.modal-buttons button:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.9); /* Schattierung wird bei Hover intensiver */
    transform: translateY(-3px); /* Button hebt sich bei Hover leicht an */
    width: 7.2%; /* Vergrößert sich bei Hover */
    height: 7.2%; /* Vergrößert sich bei Hover */
}

.modal-buttons button:active {
    transform: translateY(1px); /* Button senkt sich bei Klick leicht ab */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); /* Schattierung wird bei Aktivierung schwächer */
}

#prevBtn, #nextBtn {
    cursor: pointer; /* Mauszeiger wird zu einer Hand bei Hover */
    position: absolute; /* Fixe Position für die Buttons */
    top: 50%; /* Buttons werden vertikal zentriert */
    user-select: none; /* Verhindert die Auswahl des Texts */
    transform: translateY(-50%); /* Exakte vertikale Zentrierung */
}

#prevBtn {
    left: 8px; /* Positionierung des "Zurück"-Buttons links */
}

#nextBtn {
    right: 8px; /* Positionierung des "Weiter"-Buttons rechts */
}

.modal-content {
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center;      /* Vertikale Zentrierung */
    max-width: 90%;           /* Maximale Breite des Modals */
    max-height: 90%;          /* Maximale Höhe des Modals */
    margin: auto;             /* Zentriert den Inhalt */
    height: auto;             /* Die Höhe passt sich proportional an */
    width: auto;              /* Die Breite passt sich proportional an */
}

.modal-content img {
    max-width: 100%;          /* Bild nimmt die maximale Breite des Containers */
    max-height: 100%;         /* Bild nimmt die maximale Höhe des Containers */
    object-fit: contain;      /* Verhindert Verzerrungen, Bild bleibt proportional */
}

.close {
    position: absolute; /* Absolute Positionierung der Schließen-Schaltfläche */
    top: 20px; /* Abstand vom oberen Rand */
    right: 35px; /* Abstand vom rechten Rand */
    color: white; /* Weiße Schriftfarbe */
    font-size: 40px; /* Große Schriftgröße */
    font-weight: bold; /* Fett gedruckt */
    cursor: pointer; /* Mauszeiger wird zu einer Hand bei Hover */
    z-index: 1050; /* Z-Index, der sicherstellt, dass die Schaltfläche über anderen Elementen angezeigt wird */
}


#caption {
    text-align: center; /* Text wird zentriert */
    color: white; /* Weiße Schriftfarbe */
    padding: 10px 0; /* Abstand oben und unten */
}

/* Verstecke die figcaption nur auf Bildschirmen unter 768px Breite */
@media (max-width: 768px) {
    #gallery figure figcaption {
        display: none;
    }
}