/* ============================================================
   lightbox.css – Bild-Overlay für docs/artikel.html
   Vergrößert Diagramme + Ergebnis-Screenshot (img.zoomable).
   JS: assets/js/lightbox.js
   ============================================================ */

/* Vergrößerbare Bilder im Artikel */
img.zoomable {
  cursor: zoom-in;
}

/* Seiten-Scroll sperren, solange Overlay offen */
body.lightbox-locked {
  overflow: hidden;
}

/* ---------- Overlay ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  /* Glassmorphism: Seite dahinter blurren + leichter Tint */
  background: rgba(20, 20, 20, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* etwas Rand oben/unten, damit der Stage Luft hat */
  padding: 4vh 0;
  overscroll-behavior: contain;
}

.lightbox-overlay.is-open {
  display: flex;
}

/* ---------- Stage (das Bild) ---------- */
.lightbox-stage {
  /* so breit wie möglich, aber links/rechts Rand zum Schließen */
  width: min(1100px, 92vw);
  max-height: 92dvh;
  overflow-y: auto;          /* hohe Bilder scrollen */
  overscroll-behavior: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  background: #fff;
  -webkit-animation: lb-in 0.18s ease-out;
  animation: lb-in 0.18s ease-out;
}

.lightbox-stage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@keyframes lb-in {
  from { transform: scale(0.98); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ---------- Schließen-Button ---------- */
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, transform 0.15s;
}

.lightbox-close:hover {
  background: #333;
  transform: scale(1.08);
}

/* schmale Viewports: Stage fast voll, Button etwas kleiner */
@media (max-width: 600px) {
  .lightbox-stage { width: 94vw; }
  .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 22px; }
}