/* lightbox.css — Fullscreen-Lightbox fuer Bilder + PDFs.
 aus base.css extrahiert. */

#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Entrance (Charakter B) — vorher erschien das Overlay instant schwarz. */
  animation: lightboxOverlayIn var(--motion-quick) var(--ease-enter) both;
}
.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  background: none;
  border: none;
  color: var(--brand-text-on);
  font-size: 2rem;
  line-height: 1;
  z-index: var(--z-popover-elevated);
}
.lightbox-close:hover { color: var(--color-bg-subtle); }
.lightbox-content { position: relative; }

/* Shared viewer container (images + PDFs) */
.lightbox-viewer {
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 92vh;
  max-width: 1200px;
  background: var(--color-bg-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Viewer kommt mit dezentem Scale-In statt instant. */
  animation: lightboxViewerIn var(--motion-overlay) var(--ease-enter-strong) both;
}
.lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.lightbox-filename {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
  min-width: 0;
}
.lightbox-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.lightbox-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  color: var(--brand-default);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-enter);
}
.lightbox-btn:hover { background: var(--color-bg-hover); }
.lightbox-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}
.lightbox-zoom-label {
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: center;
  user-select: none;
}

/* Image viewer area */
.lightbox-img-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-default);
  user-select: none;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--duration-fast) var(--ease-enter);
}
.lightbox-img-area[style*="grab"] .lightbox-img { transition: none; }

/* PDF frame */
.lightbox-pdf-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--color-bg-default);
}

@media (max-width: 1399px) {
  .lightbox-viewer { max-width: 1000px; }
}
@media (max-width: 999px) {
  .lightbox-viewer { width: 96vw; height: 94vh; max-width: none; }
  .lightbox-filename { max-width: 35%; }
  .lightbox-btn-label { display: none; }
}
@media (max-width: 599px) {
  .lightbox-viewer { width: 100vw; height: 100vh; border-radius: 0; }
  .lightbox-toolbar { padding: var(--space-2) var(--space-3); }
  .lightbox-filename { max-width: 30%; font-size: var(--fs-meta); }
  .lightbox-btn-label { display: none; }
  .lightbox-zoom-label { display: none; }
  /* Floating Close-Button ausblenden, In-Toolbar-Button nutzen */
  .lightbox-close { display: none; }
}
/* Close-Button in der Toolbar (immer sichtbar, auch auf Mobile) */
.lightbox-close-btn { color: var(--status-danger-fg); border-color: var(--status-danger-fg); }
.lightbox-close-btn:hover { background: var(--status-danger-bg); }

/* Entrance-Keyframes (Charakter B). prefers-reduced-motion global (base.css). */
@keyframes lightboxOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxViewerIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
/* Exit (Charakter B) — getriggert via .is-closing (LoD.motion.animateOut). */
#lightbox-overlay.is-closing { pointer-events: none; animation: lightboxOut var(--motion-quick) var(--ease-exit) forwards; }
@keyframes lightboxOut { from { opacity: 1; } to { opacity: 0; } }