body.ajw-lightbox-open { overflow: hidden; }

[data-ajw-lightbox="1"] img,
[data-ajw-lightbox="1"] video { cursor: pointer; }

.ajw-lightbox-overlay{
  position: fixed; inset: 0; z-index: 999999;
  display: block; padding: 24px;
  color: #fff;

  opacity: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition:
    opacity 260ms ease,
    background 260ms ease,
    backdrop-filter 260ms ease,
    -webkit-backdrop-filter 260ms ease;
}
.ajw-lightbox-overlay.is-open{
  opacity: 1;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ajw-lightbox-overlay.is-closing{
  opacity: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.ajw-lightbox-center{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1;
}

.ajw-lightbox-dialog{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 1;
}
.ajw-lightbox-overlay.is-open .ajw-lightbox-dialog{ opacity: 1; }
.ajw-lightbox-overlay.is-closing .ajw-lightbox-dialog{ opacity: 0; }

.ajw-lightbox-stage{
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

.ajw-lightbox-media-wrap{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 1;

  /* Smooth aspect/size changes when switching between portrait/landscape media */
  transition:
    width 360ms cubic-bezier(.2, .9, .2, 1),
    height 360ms cubic-bezier(.2, .9, .2, 1);
  will-change: width, height;
}
.ajw-lightbox-media-wrap.ajw-zoom-active{ overflow: visible; }

/* Disable resize animation for viewport resizes (set by JS) */
.ajw-lightbox-media-wrap.ajw-resize-instant{
  transition: none !important;
}

:root{ --ajw-safe-side: clamp(110px, 14vw, 170px); }

.ajw-lightbox-media{
  position: relative;
  z-index: 1;

  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;

  width: auto; height: auto;
  max-width: calc(100vw - var(--ajw-safe-side));
  max-height: calc(100vh - 96px);

  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;

  transition: transform 360ms ease, opacity 360ms ease;
  will-change: transform, opacity;
}

.ajw-lightbox-overlay img.ajw-lightbox-media{ cursor: zoom-in; }
.ajw-lightbox-overlay img.ajw-lightbox-media.ajw-zoomed{
  cursor: grab;
  transition: transform 240ms ease !important;
}
.ajw-lightbox-overlay img.ajw-lightbox-media.ajw-dragging{
  cursor: grabbing;
  transition: none !important;
}

/* (2) Caption: Fade + smooth rearrange */
.ajw-lightbox-caption{
  position: relative;
  z-index: 2;

  /* Smooth layout */
  max-height: 0;
  opacity: 0;
  margin-top: 0;

  overflow: hidden;
  text-align: center;
  color: inherit;
  max-width: calc(100vw - var(--ajw-safe-side));

  transition:
    opacity 220ms ease,
    max-height 260ms ease,
    margin-top 260ms ease;
}
.ajw-lightbox-caption.is-visible{
  max-height: 180px;     /* genug Platz */
  opacity: 1;
  margin-top: 12px;
}
.ajw-lightbox-caption.is-fading{
  opacity: 0;
}

/* Controls: IMMER ganz oben */
.ajw-lightbox-close-link,
.ajw-lightbox-arrow{
  z-index: 2147483647 !important;
  pointer-events: auto;
}

/* Close: nur Position */
.ajw-lightbox-close-link{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
}

/* (2) Navigation: Fade in/out statt display none */
.ajw-lightbox-arrow{
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  text-decoration: none;

  padding: 18px;

  opacity: 1;
  transition: opacity 220ms ease;
}
.ajw-lightbox-arrow.ajw-prev{ left: 10px !important; }
.ajw-lightbox-arrow.ajw-next{ right: 10px !important; }

.ajw-lightbox-arrow svg{
  width: 24px;
  height: 24px;
  display: block;
}

/* Hidden (fade) */
.ajw-lightbox-arrow.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Disabled = unsichtbar, aber NICHT automatisch pointer-events none */
.ajw-lightbox-arrow.is-disabled{
  opacity: 0;
}

/* (3) Deadzone: 3s lang Klicks schlucken */
.ajw-lightbox-arrow.is-deadzone{
  pointer-events: auto;
}

/* danach darf es „durchklicken“ (falls du willst) */
.ajw-lightbox-arrow.is-passive{
  pointer-events: none;
}

/* Slide/Fade Klassen */
.ajw-lightbox-media.ajw-exit-left,
.ajw-lightbox-media.ajw-exit-right,
.ajw-lightbox-media.ajw-enter-from-left,
.ajw-lightbox-media.ajw-enter-from-right{
  position: absolute;
  top: 0;
  left: 0;
}

/* Lightbox Video: native Controls sollen normal funktionieren */
video.ajw-lightbox-media{
  touch-action: auto;
  user-select: auto;
  -webkit-user-drag: auto;
}

/* Video soll sofort eine stabile Box haben (kein Mini-Rechteck) */
video.ajw-lightbox-media{
  width: min(100%, calc(100vw - var(--ajw-safe-side)));
  height: auto;
  aspect-ratio: 16 / 9; /* Platzhalter bis Metadata da ist */
}

/* Video/Media erst einblenden, wenn ready (verhindert Mini-Rechteck-Sprung) */
.ajw-lightbox-media.ajw-media-loading {
  opacity: 0 !important;
  pointer-events: none;
}

.ajw-lightbox-media.ajw-exit-left{ opacity: 0; transform: translateX(-70px); }
.ajw-lightbox-media.ajw-enter-from-right{ opacity: 0; transform: translateX(70px); }
.ajw-lightbox-media.ajw-exit-right{ opacity: 0; transform: translateX(70px); }
.ajw-lightbox-media.ajw-enter-from-left{ opacity: 0; transform: translateX(-70px); }
.ajw-lightbox-media.ajw-enter-active{ opacity: 1; transform: translateX(0); }