body {
  font-family: "Mada", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ---------------
      Menu-Mobile
      ------------------*/
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.menu-open {
  animation: slideDown 0.25s ease forwards;
}

.menu-close {
  animation: slideUp 0.25s ease forwards;
}

/* ---------------
      Main-Content
      ------------------*/
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#main,
#leistungen,
#referenzen-player,
#kontakt,
#hero h2 {
  animation: fadeUp 0.5s ease-out forwards;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#hero p {
  animation: slideRight 0.5s ease-in-out forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

/* ---------------
      Galerie Grid
      ------------------*/
/* Mobile: alle gleich */
.gallery-item img {
  transition:
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.55s ease;
  filter: brightness(0.85) saturate(0.8);
}
.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.05);
}
.gallery-overlay {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Desktop: asymmetrisches Layout */
@media (min-width: 768px) {
  .gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery-item:nth-child(5) {
    grid-column: span 2;
  }
  .gallery-item:nth-child(9) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery-item:nth-child(13) {
    grid-column: span 2;
  }
}

/* ---------------
      Lightbox
      ------------------*/
.lb-backdrop {
  visibility: hidden;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
}
.lb-backdrop.open {
  visibility: visible;
  background: rgba(0, 0, 0, 0.92);
}
.lb-frame {
  transform: scale(0.92) translateY(18px);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.3, 0.64, 1),
    opacity 0.32s ease;
}
.lb-backdrop.open .lb-frame {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.lb-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.15s;
}
.lb-img-wrap.switching::after {
  opacity: 1;
}

/* Dot-Transition */
.lb-dot {
  transition:
    background 0.25s,
    transform 0.25s;
}
.lb-dot.active {
  background: rgba(192, 132, 252, 0.9) !important; /* purple-400 */
  transform: scale(1.35);
}