body { margin: 0; font-family: Helvetica, Arial, sans-serif; }

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px;
  justify-content: center;
}

.insta-thumbnail {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  cursor: pointer;
}

.insta-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(20, 20, 20, 1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.lightbox.show {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  z-index:51;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  box-shadow: 0 0 20px #000;
  margin: auto;
  border:1px solid #2d2d2d; padding:0px;
  z-index:52;
}

.lightbox-caption {
  position: relative;
  bottom: 20px;
  left: 1px;
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  
  max-width: 100%;
  text-align:center;
}

.nav-arrow {
  position: absolute; /* Absolute Positionierung innerhalb des Eltern-Containers */
  top: 50%; /* Vertikale Mitte */
  transform: translateY(-50%); /* Korrektur der vertikalen Mitte */
  font-size: 40px; /* Größe der Pfeile */
  color: grey; /* Helle Farbe für bessere Sichtbarkeit */
  cursor: pointer; /* Mauszeiger zeigt Hand an */
  user-select: none; /* Verhindert das Markieren des Textes */
  padding: 10px; /* Etwas Abstand zum Rand */
  z-index: 100; /* Stellt sicher, dass die Pfeile oben liegen */
  transition: all 0.3s ease; /* Sanfte Übergänge für Hover-Effekte */
}

.nav-arrow:hover {
  color: #ffcc00; /* Farbe bei Hover (z. B. gelb für Interaktivität) */
  transform: translateY(-50%) scale(1.2); /* Vergrößert den Pfeil bei Hover */
}

/* Navigation Pfeile: Links und Rechts */
.nav-arrow.left { left: 10px; }
.nav-arrow.right { right: 10px; }

/* Pfeile auf mobilen Geräten ausblenden */
@media (max-width: 1024px) {
  .nav-arrow {
    display: none;
  }
}

.menu-icon {
  position: absolute;
  top: 10px;
  right: -50px;
  font-size: 30px;
  color: #d7d7d7;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  cursor: pointer;
  z-index: -2; /* etwas höher setzen */
  border-radius: 6px;
  display: none;
}

.text-overlay {
  position: absolute;
  top: 10%; /* beginnt im oberen Drittel */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 95%; /* gleiche Breite wie das Bild-Container */
  max-height: 60%;
  overflow-y: auto;

  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  box-sizing: border-box;
  font-size: 14px;
  display: none;
  z-index: 15;
  border-radius: 8px;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem; 
  color: grey; 
  cursor: pointer;
  user-select: none; /* Verhindert das Markieren des Textes */
  padding: 10px; 
  z-index: 100; 
}
.close-button:hover {color:white;}