/* Wrapper */
.simple-slider{
  position:relative;
  height:500px; /* anpassen */
  overflow:hidden;
}

/* Slides */
.simple-slider .slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1);
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1);
  z-index:1;
}

/* Aktives Slide */
.simple-slider .slide.active{
  opacity:1;
  animation:zoomEffect 8s linear forwards;
  z-index:2;
}

/* Ken Burns Zoom */
@keyframes zoomEffect{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(1.2);
  }
}


.slide.prev{
  opacity:0;
  z-index:1;
  transform:scale(1.2); /* bleibt auf End-Zoom */
}




/* ---------------- */
/* Tablet & kleiner */
/* ---------------- */
@media (max-width:992px){

  .simple-slider .slide.active{
    animation:none;        /* Zoom AUS */
    transform:scale(1);    /* zurücksetzen */
  }

}



/* kleine Fotos zoomen */



/* =========================
   IMAGE GRID – MASONRY
========================= */

.img-grid{
  column-count:3;           /* mehr Spalten = kleinere Bilder */
  column-gap:20px;
  max-width:1200px;         /* begrenzt Gesamtbreite */
  margin:0 auto;            /* zentriert */
}

@media (max-width:992px){
  .img-grid{
    column-count:2;
  }
}

@media (max-width:576px){
  .img-grid{
    column-count:1;
  }
}

/* =========================
   IMAGE ITEM
========================= */

.img-item{
  position:relative;
  break-inside:avoid;
  margin-bottom:20px;
  overflow:hidden;

  opacity:0;
  transform:translateY(40px) scale(.98);

  transition:
    transform .8s cubic-bezier(.25,.1,.25,1),
    opacity .8s ease;

  will-change: transform, opacity;
}

/* sichtbar beim Scroll */
.img-item.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* =========================
   STAFFELUNG
========================= */

.img-item:nth-child(1){ transition-delay:.05s; }
.img-item:nth-child(2){ transition-delay:.1s; }
.img-item:nth-child(3){ transition-delay:.15s; }
.img-item:nth-child(4){ transition-delay:.2s; }
.img-item:nth-child(5){ transition-delay:.25s; }
.img-item:nth-child(6){ transition-delay:.3s; }

/* =========================
   IMAGE
========================= */

.img-item img{
  width:100%;
  height:auto;
  display:block;

  transform:scale(1);
  transition:transform .6s cubic-bezier(.25,.1,.25,1);

  will-change: transform;
}

/* =========================
   HOVER EFFECT
========================= */

.img-item:hover{
  transform:translateY(0px);
}

.img-item:hover img{
  transform:scale(1.08);
}

/* =========================
   OPTIONAL OVERLAY
========================= */

.img-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition:.4s;
}

.img-item:hover::after{
  background:rgba(0,0,0,0.1);
}