/* ══════════════════════════════════════
   LIGHTBOX-KARUSSELL (gemeinsam für index.html und build.html)
   Markup wird von assets/lightbox.js erzeugt.
══════════════════════════════════════ */
.lb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(13,27,42,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out, ease);
}
.lb-backdrop.open { opacity: 1; pointer-events: auto; }

.lb-dialog {
  position: relative;
  width: min(1120px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: none;
}

/* ── Kopfzeile ── */
.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lb-title {
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fg-1, #F4F6F8);
  margin: 0;
}
.lb-count {
  font-family: var(--font-display, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pink, #E8417A);
  margin: 4px 0 0 0;
}
.lb-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(244,246,248,0.08));
  background: rgba(244,246,248,0.04);
  color: var(--fg-1, #F4F6F8);
  cursor: pointer;
  transition: border-color var(--dur-2, 200ms) var(--ease-out, ease),
              color var(--dur-2, 200ms) var(--ease-out, ease);
}
.lb-close:hover { border-color: var(--c-pink, #E8417A); color: var(--c-pink, #E8417A); }

/* ── Karussell ── */
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
}
.lb-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
}
.lb-track {
  display: flex;
  transition: transform 320ms var(--ease-out, ease);
  will-change: transform;
}
.lb-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.lb-slide img {
  max-width: 100%;
  max-height: min(72vh, 760px);
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(244,246,248,0.08));
  background: var(--c-midnight, #0D1B2A);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Steuerung ── */
.lb-nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(244,246,248,0.08));
  background: rgba(232,65,122,0.10);
  color: var(--c-pink, #E8417A);
  cursor: pointer;
  transition: background var(--dur-2, 200ms) var(--ease-out, ease),
              border-color var(--dur-2, 200ms) var(--ease-out, ease),
              opacity var(--dur-2, 200ms) var(--ease-out, ease);
}
.lb-nav:hover { background: rgba(232,65,122,0.20); border-color: var(--c-pink, #E8417A); }
.lb-nav[disabled] { opacity: 0.3; cursor: default; }
.lb-nav[disabled]:hover { background: rgba(232,65,122,0.10); border-color: var(--border, rgba(244,246,248,0.08)); }

.lb-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lb-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(244,246,248,0.22);
  cursor: pointer;
  transition: background var(--dur-2, 200ms) var(--ease-out, ease),
              transform var(--dur-2, 200ms) var(--ease-out, ease);
}
.lb-dot:hover { background: rgba(244,246,248,0.42); }
.lb-dot.active { background: var(--c-pink, #E8417A); transform: scale(1.25); }

.lb-caption {
  font-family: var(--font-body, "DM Sans", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2, #C7D0DA);
  text-align: center;
  margin: 0;
  max-width: 60ch;
  align-self: center;
}

@media (max-width: 640px) {
  .lb-backdrop { padding: 16px 12px; }
  .lb-stage { gap: 8px; }
  .lb-nav { width: 38px; height: 38px; }
  .lb-slide img { max-height: 62vh; }
  .lb-caption { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-backdrop { transition: none; }
  .lb-track { transition: none; }
  .lb-dot { transition: none; }
}