/* Masonry Layout: Erzeugt ein spaltenbasiertes Layout ähnlich einem Mauerwerk */
.masonry {
    column-count: 3; /* Setzt die Anzahl der Spalten auf 9 */
    column-gap: 0; /* Kein Abstand zwischen den Spalten */
    padding: 0; /* Entfernt Innenabstände */
    margin: 50px 0; /* Abstand oben und unten für das Layout */
    line-height: 0; /* Verhindert zusätzlichen vertikalen Abstand zwischen den Zeilen */
}

/* Styling für die einzelnen Elemente im Masonry Layout */
.masonry-item {
    background-color: black; /* Schwarzer Hintergrund für jedes Element */
    margin-bottom: 0; /* Kein Abstand unten zwischen den Elementen */
    display: inline-block; /* Zeigt die Elemente als Inline-Block-Elemente an */
    width: 100%; /* Setzt die Breite des Elements auf 100% der Spalte */
    break-inside: avoid; /* Verhindert das Umbrechen des Elements innerhalb der Spalte */
    box-shadow: none; /* Entfernt jegliche Schatten um das Element */
    overflow: hidden; /* Verhindert das Überlaufen von Inhalten aus dem Element */
}

/* Styling für Bilder innerhalb der Masonry-Elemente */
.masonry-item img {
    width: 100%; /* Setzt die Breite des Bildes auf 100% der Spaltenbreite */
    display: block; /* Macht das Bild zu einem Block-Element (entfernt den darunterliegenden Leerraum) */
    -webkit-user-drag: none; /* Verhindert das Ziehen von Bildern im Webkit-basierten Browsern (z.B. Safari) */
    cursor: pointer; /* Ändert den Mauszeiger zu einem Zeiger, um Interaktivität anzuzeigen */
    pointer-events: auto; /* Aktiviert Pointer-Events, sodass das Bild interaktiv bleibt */
    max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als 100% seines Containers wird */
}

/* Lightbox Styling: Überlagernde Darstellung für die Lightbox */
.lightbox {
    display: none; /* Die Lightbox ist standardmäßig unsichtbar */
    position: fixed; /* Positioniert die Lightbox fest im Viewport */
    z-index: 1000; /* Setzt die Lightbox in den Vordergrund (über anderen Inhalten) */
    left: 0; /* Platziert die Lightbox ganz links */
    top: 0; /* Platziert die Lightbox ganz oben */
    width: 100%; /* Deckt die gesamte Breite des Viewports ab */
    height: 100%; /* Deckt die gesamte Höhe des Viewports ab */
    background-color: rgba(0, 0, 0, 1); /* schwarzer Hintergrund für die Überlagerung */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}

/* Styling für das Bild innerhalb der Lightbox */
.lightbox img {
    max-width: 90%; /* Maximalbreite des Bildes auf 90% der Lightbox-Breite */
    max-height: 80%; /* Maximale Höhe des Bildes auf 80% der Lightbox-Höhe */
}

/* Aktiviert die Lightbox, wenn die Klasse "active" hinzugefügt wird */
.lightbox.active {
    display: flex; /* Zeigt die Lightbox an, indem sie als flexibles Container-Layout gesetzt wird */
}

/* Styling für den Schließen-Button der Lightbox */
.lightbox-close {
    position: absolute; /* Positioniert den Schließen-Button absolut innerhalb der Lightbox */
    top: 20px; /* Platziert den Button 20px vom oberen Rand der Lightbox */
    right: 30px; /* Platziert den Button 30px vom rechten Rand der Lightbox */
    color: white; /* Weiße Schriftfarbe für den Button */
    font-size: 40px; /* Große Schriftgröße für den Button */
    font-weight: bold; /* Fettdruck für den Button */
    cursor: pointer; /* Zeigt einen Zeiger-Cursor, um Interaktivität anzuzeigen */
}

/* Medienabfrage für Geräte mit Hover-Unterstützung */
@media (hover: hover) {
    /* Übergangseffekte für Bilder im Masonry-Layout */
    .masonry-item img {
        transition: transform 0.3s ease-in-out; /* Setzt eine sanfte Übergangsanimation für die Transformation */
        transform-origin: center; /* Setzt den Ursprung der Transformation auf das Zentrum des Bildes */
    }

    /* Hover-Effekt für Bilder im Masonry-Layout: Perspektive und Rotation */
    .masonry-item img:hover {
        transform: perspective(500px) rotateX(10deg) scale(1.2); /* Fügt eine perspektivische Drehung und Skalierung beim Hover hinzu */
    }
}

/* Responsive Anpassungen für Bildschirme mit einer maximalen Breite von 800px */
@media screen and (max-width: 800px) {
    .masonry {
        column-count: 2; /* Setzt die Anzahl der Spalten auf 2 bei kleineren Bildschirmen */
    }
}

/* Responsive Anpassungen für Bildschirme mit einer maximalen Breite von 500px */
@media screen and (max-width: 500px) {
    .masonry {
        column-count: 1; /* Setzt die Anzahl der Spalten auf 1 bei sehr kleinen Bildschirmen */
    }
}