/* =========================
   Masonry Gallery (Bootstrap 5)
   - unterschiedliche Höhen
   - Animation: Keyframes Fade-Up (retriggerbar)
   - Layout: 6 Spalten ab XL
   ========================= */

.masonry-grid{ position: relative; }

/* Default: 2 Spalten */
.grid-sizer,
.grid-item{ width: 50%; }

/* md: 3 Spalten */
@media (min-width: 768px){
  .grid-sizer,
  .grid-item{ width: 33.3333%; }
}

/* lg: 4 Spalten */
@media (min-width: 992px){
  .grid-sizer,
  .grid-item{ width: 25%; }
}

/* xl: 6 Spalten */
@media (min-width: 1200px){
  .grid-sizer,
  .grid-item{ width: 16.6667%; }
}

/* Abstand */
.grid-item{ padding: 10px; }

/* Tile */
.grid-item__inner{
  position: relative;
  overflow: hidden;
  background: #f2f2f2;
}

/* unterschiedliche Höhen */
.grid-item__inner.ar-1{ aspect-ratio: 4 / 3; }
.grid-item__inner.ar-2{ aspect-ratio: 1 / 1; }
.grid-item__inner.ar-3{ aspect-ratio: 3 / 4; }
.grid-item__inner.ar-4{ aspect-ratio: 9 / 16; }

.grid-item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* optional: dezenter Hover */
.grid-item__inner:hover img{
  transform: scale(1.03);
  transition: transform 450ms ease;
}

/* Active Filter Button */
.gallery-filters .btn.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Isotope selbst soll NICHT weich animieren (sonst Doppelbewegung) */
.masonry-grid,
.grid-item{ transition: none !important; }

/* ===== Keyframes Animation ===== */
@keyframes fadeUpSoft{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: translateY(0); }
}

.grid-item__anim{
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.grid-item__anim.is-animating{
  animation-name: fadeUpSoft;
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: both;
  animation-delay: var(--anim-delay, 0ms);
}