/* Zoom-Raster. The container holding the widget is the scroll track;
   its other children form the layer above the grid. */

/* Fallback values, overridden by the widget settings */
:where(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster){
  --pz-spalten: 3;
  --pz-luecke: 1rem;
  --pz-radius: .75rem;
  --pz-max-breite: 92vw;
  --pz-max-hoehe: 84svh;
  --pz-top: 0px;
  --pz-intro-top: 14svh;
  --pz-start-y: 36;
  --pz-maske-start: 44;
  --pz-render: 3.4;
  --pz-niedrig-bis: 520;
  --pz-niedrig-max-hoehe: 78svh;
  --pz-niedrig-abstand: 6svh;
}

/* Scroll track: grid and overlay share one cell */
.elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster){
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  height: 380vh;
  min-height: 0;
}
.elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster) > .elementor-widget-webe-zoom-raster{
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* Overlay: headings and text */
.elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster) > :not(.elementor-widget-webe-zoom-raster){
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  position: sticky;
  top: calc(var(--pz-top) + var(--pz-intro-top));
  margin-top: var(--pz-intro-top);
  z-index: 5;
  opacity: var(--pz-intro-o, 1);
  transform: translateY(var(--pz-intro-y, 0px));
  transition: none;
  pointer-events: none;
}
.elementor-editor-active .elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster) > :not(.elementor-widget-webe-zoom-raster){
  pointer-events: auto;
}

/* Sticky viewport */
.pz__stick{
  position: sticky;
  top: var(--pz-top);
  height: calc(100svh - var(--pz-top));
  overflow: hidden;
}
.pz__maske{
  position: absolute;
  inset: 0;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)){
  .pz__maske[data-pz-maske="ja"]{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pz-maske, calc(var(--pz-maske-start) * 1svh)));
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pz-maske, calc(var(--pz-maske-start) * 1svh)));
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}

/* Grid, rendered at final size and scaled down */
.pz__stage{
  --pz-col: calc(var(--pz-col-basis, (var(--pz-max-breite) - 2 * var(--pz-luecke)) / 3) * var(--pz-render));
  --pz-luecke-gross: calc(var(--pz-luecke) * var(--pz-render));
  --pz-radius-gross: calc(var(--pz-radius) * var(--pz-render));
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  display: flex;
  gap: var(--pz-luecke-gross);
  align-items: center;
  transform:
    translate(-50%, -50%)
    translateY(var(--pz-y, calc(var(--pz-start-y) * 1svh)))
    translate(var(--pz-fx, 0px), var(--pz-fy, 0px))
    scale(var(--pz-s, calc(1 / var(--pz-render))));
  transform-origin: center center;
}
.pz__stage[data-pz-richtung="raus"]{
  --pz-s: 1;
  --pz-y: 0svh;
}
.pz__col{
  flex: 0 0 var(--pz-col);
  width: var(--pz-col);
  display: flex;
  flex-direction: column;
  gap: var(--pz-luecke-gross);
  transform: translateY(var(--pz-col-versatz, 0%));
}
.pz__cell{
  position: relative;
  overflow: hidden;
  border-radius: var(--pz-radius-gross);
  isolation: isolate;
  background: var(--pz-zelle, transparent);
  aspect-ratio: var(--pz-format, 16/9);
}
/* Stronger than Elementor's ".elementor img { height: auto }", which loads later */
.pz__stage .pz__cell img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

/* Colour tint, grows while scrolling */
.pz__cell::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pz-tint, transparent);
  mix-blend-mode: color;
  opacity: var(--pz-neben-o, 0);
  pointer-events: none;
}
.pz__cell--haupt::after{ opacity: var(--pz-haupt-o, 0); }

/* Zoom out: start on the main image, headings appear at the end */
.elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster .pz__stage[data-pz-richtung="raus"]){
  --pz-intro-o: 0;
  --pz-maske: 0svh;
}

/* Reduced motion: static grid */
@media (prefers-reduced-motion: reduce){
  .elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster){
    display: flex;
    flex-direction: column;
    height: auto !important;
    --pz-intro-o: 1;
  }
  .elementor :is(.e-con, .e-con-inner, .elementor-widget-wrap):has(> .elementor-widget-webe-zoom-raster) > :not(.elementor-widget-webe-zoom-raster){
    position: static;
    transform: none;
    opacity: 1;
    margin: 12svh auto 4svh;
  }
  .pz__stick{ position: static; height: auto; padding: 0 0 8svh; }
  .pz__maske{
    position: static;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .pz__stage{
    --pz-render: 1;
    position: static;
    width: auto;
    justify-content: center;
    margin: 0 auto;
    transform: none !important;
  }
}