/* Ackermanns Garten - Impressionen als Banner-Slideshow */

.elementor #ag-masonry{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  column-count:auto!important;
  gap:0!important;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  height:clamp(320px,46vw,600px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#262523;
}
.elementor #ag-masonry::-webkit-scrollbar{display:none}

.elementor #ag-masonry>.elementor-element{
  flex:0 0 100%;
  width:100%!important;
  max-width:100%;
  height:100%;
  margin:0!important;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
#ag-masonry>.elementor-element>.elementor-widget-container,
#ag-masonry .elementor-image,
#ag-masonry figure{height:100%;margin:0}
#ag-masonry img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.ag-dots{display:flex;justify-content:center;gap:10px;margin-top:26px}
.ag-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:#C6BDB0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:background .3s ease,transform .3s ease;
}
.ag-dots button:hover{background:#A9A093}
.ag-dots button[aria-current='true']{background:#A25A33;transform:scale(1.35)}

@media(max-width:767px){
  .elementor #ag-masonry{height:clamp(300px,74vw,430px)}
  .ag-dots{margin-top:20px;gap:9px}
  .ag-dots button{width:7px;height:7px}
}

@media (prefers-reduced-motion:reduce){
  .elementor #ag-masonry{scroll-behavior:auto}
}

/* Der Banner ist randlos - Skalieren beim Einblenden wuerde die Seite breiter machen */
html.ag-motion #ag-masonry.ag-reveal-img,
html.ag-motion #ag-masonry.ag-reveal{transform:none!important;clip-path:none!important}