/*
 * PhotoSwipe – dezenter Liquid-Glass-Look für sternwartezwickau.de
 * Lokale Ergänzungen zu PhotoSwipe 5 und Dynamic Caption.
 */

.pswp {
  --pswp-bg: transparent;
  --pswp-icon-color: #f6f9ff;
  --pswp-icon-color-secondary: rgba(7, 16, 31, .72);
  --pswp-error-text-color: #f6f9ff;
  color: #eef4ff;
}

/* Eigener Blur-Layer: zuverlässiger als backdrop-filter direkt auf dem von
   PhotoSwipe animierten Hintergrundelement, insbesondere in Safari. */
.pswp::before {
  content: "";
  position: fixed;
  inset: -48px;
  z-index: -1;
  pointer-events: none;
  background: rgba(2, 7, 16, .48);
  -webkit-backdrop-filter: blur(42px) saturate(118%) brightness(.48);
  backdrop-filter: blur(42px) saturate(118%) brightness(.48);
  transform: translateZ(0);
}

/* Der Hintergrund bleibt transparent genug, damit der Seiteninhalt weich
   durchscheint, wird aber deutlich stärker abgedunkelt und geblurrt. */
.pswp__bg {
  background:
    radial-gradient(circle at 50% 34%, rgba(29, 71, 137, .20), transparent 48%),
    linear-gradient(180deg, rgba(3, 8, 18, .84), rgba(2, 7, 16, .94));
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(36px) saturate(118%) brightness(.48);
  backdrop-filter: blur(36px) saturate(118%) brightness(.48);
}

/* Dezente obere Glasleiste statt einer sichtbar harten Toolbar. */
.pswp__top-bar {
  height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(7, 16, 31, .62), rgba(7, 16, 31, .18) 72%, transparent);
  pointer-events: none;
}

.pswp__counter,
.pswp__button {
  pointer-events: auto;
}

.pswp__counter {
  min-width: 64px;
  height: 42px;
  margin: 10px 0 0 10px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(190, 211, 255, .18);
  border-radius: 999px;
  background: rgba(13, 24, 43, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 32px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  color: rgba(245, 248, 255, .92);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  opacity: 1;
}

.pswp__button {
  width: 46px;
  height: 46px;
  margin: 8px 4px 0;
  border: 1px solid rgba(190, 211, 255, .18);
  border-radius: 50%;
  background-color: rgba(13, 24, 43, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 32px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  opacity: .92;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}

.pswp__button:hover,
.pswp__button:focus-visible {
  background-color: rgba(35, 72, 126, .68);
  border-color: rgba(190, 214, 255, .34);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.pswp__button:active {
  transform: translateY(0) scale(.96);
}


/* PhotoSwipe positioniert die SVGs standardmäßig für 50 × 60 px große Buttons.
   Unsere runden Buttons sind quadratisch, daher werden die Symbole exakt zentriert. */
.pswp__button .pswp__icn {
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* Navigationspfeile: eigenes, geometrisch symmetrisches Chevron.
   Das PhotoSwipe-SVG wird ausgeblendet, damit dessen asymmetrische ViewBox
   die optische Zentrierung nicht mehr beeinflusst. */
.pswp__button--arrow .pswp__icn {
  display: none !important;
}

.pswp__button--arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  border-radius: 1px;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.pswp__button--arrow--prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.pswp__button--arrow--next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

.pswp__button--close,
.pswp__button--zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pfeile ebenfalls als kleine Glaslinsen. */
.pswp__button--arrow {
  width: 52px;
  height: 52px;
  margin: -26px 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(245, 248, 255, .92);
}

.pswp__button--arrow--prev {
  left: max(0px, env(safe-area-inset-left));
}

.pswp__button--arrow--next {
  right: max(0px, env(safe-area-inset-right));
}

/* Das Medium selbst erhält nur eine sehr zurückhaltende Glas-/Kartenkante. */
.pswp__img,
.pswp-video-wrap video {
  border-radius: 16px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(220, 232, 255, .24),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Caption: ohne Kartenrahmen, nur typografisch und durch Abstand abgesetzt. */
.pswp__dynamic-caption {
  color: rgba(238, 244, 255, .88);
  font: 400 .92rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.pswp__dynamic-caption--aside,
.pswp__dynamic-caption--below,
.pswp__dynamic-caption--mobile {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pswp__dynamic-caption--aside {
  max-width: 360px;
  margin-top: 4.5rem;
  margin-left: 18px;
  padding: .35rem 0 .35rem 1rem;
  border-left: 1px solid rgba(174, 202, 248, .24);
}

.pswp__dynamic-caption--below {
  max-width: min(920px, calc(100vw - 3rem));
  margin-top: 12px;
  padding: .7rem .15rem 0;
  border-top: 1px solid rgba(174, 202, 248, .18);
}

.pswp__dynamic-caption--mobile {
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: auto;
  padding: .7rem .15rem 0;
  border-top: 1px solid rgba(174, 202, 248, .18);
  background: linear-gradient(180deg, transparent, rgba(2, 7, 16, .18));
}

.pswp__dynamic-caption strong {
  color: rgba(255,255,255,.96);
  font-weight: 650;
}

.pswp__dynamic-caption a {
  color: #a9cbff;
  text-decoration-color: rgba(169, 203, 255, .42);
  text-underline-offset: .16em;
}

.pswp__dynamic-caption a:hover,
.pswp__dynamic-caption a:focus-visible {
  color: #d5e5ff;
}

.pswp-caption-content,
.pswp-caption-content[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* Lokale Video-Slides */
.pswp-video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pswp-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  touch-action: none;
}

.pswp-media-meta {
  display: inline-block;
}

@media (max-width: 700px) {
  .pswp::before {
    inset: -36px;
    -webkit-backdrop-filter: blur(34px) saturate(112%) brightness(.46);
    backdrop-filter: blur(34px) saturate(112%) brightness(.46);
  }

  .pswp__bg {
    -webkit-backdrop-filter: blur(30px) saturate(115%) brightness(.48);
    backdrop-filter: blur(30px) saturate(115%) brightness(.48);
  }

  .pswp__top-bar {
    height: calc(58px + env(safe-area-inset-top));
  }

  .pswp__button {
    width: 42px;
    height: 42px;
    margin-top: 8px;
  }

  .pswp__counter {
    height: 40px;
    margin-top: 9px;
  }

  .pswp__button--arrow {
    width: 46px;
    height: 46px;
    margin: -23px 7px 0;
  }

  .pswp__dynamic-caption {
    font-size: .88rem;
    line-height: 1.46;
  }

  .pswp__img,
  .pswp-video-wrap video {
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pswp__button {
    transition: none;
  }
}

/* Fallback für Browser ohne backdrop-filter: weiterhin klar lesbar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pswp__bg {
    background: rgba(2, 7, 16, .96);
  }

  .pswp__counter,
  .pswp__button {
    background: rgba(10, 20, 38, .94);
  }
}