/* ============================================
   media_viewer.css — Bereich: media_viewer
   ============================================ */
.media-viewer{
  position: fixed;
  inset: 0;
  /* Über Modals (2000) und Message-Actions/Reaction-Pickern (1100) — der
     Lightbox-Layer verdeckt die Seite komplett, nichts darf durchhovern. */
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}

.media-viewer[hidden]{
  display: none;
}

.media-viewer__backdrop{
  position: absolute;
  inset: 0;
}

.media-viewer__content{
  position: relative;
  z-index: 1;
}

.media-viewer__close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--inverse-text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer__close:hover{
  background: rgba(255, 255, 255, 0.28);
}

.media-viewer__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--inverse-text);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer__nav:hover{
  background: rgba(255, 255, 255, 0.28);
}

.media-viewer__nav--prev{
  left: 16px;
}

.media-viewer__nav--next{
  right: 16px;
}

.media-viewer__nav[hidden]{
  display: none;
}

.media-viewer__counter{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--inverse-text);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 12px;
}

.media-viewer__counter[hidden]{
  display: none;
}