/* Bildansicht: das Foto wächst aus seinem Abzug heraus und kehrt dorthin zurück.
   Bewegung kommt aus js/lightbox.js (Federn), hier stehen nur Flächen und Zustände. */

.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--color-fg);
  background: transparent;
  background-image: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.lb::backdrop { background: transparent; }

/* Abdunkeln, um zu fokussieren: dunkler Schiefer, Deckkraft folgt der Geste */
.lb__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg-sunken) 94%, transparent);
  opacity: 0;
}

.lb__frame {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  box-shadow: var(--shadow-lg);
  cursor: grab;
}
.lb__frame:active { cursor: grabbing; }
.lb__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}
.lb.is-animating .lb__frame { will-change: transform, clip-path; }

.lb__ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lb__ui > * { pointer-events: auto; }

.lb__caption {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  width: min(90vw, 36rem);
  text-align: center;
}
.lb__title { font-family: var(--font-script); font-size: 1.625rem; line-height: 1.1; color: var(--color-script); }
.lb__count { color: var(--color-fg-muted); }

/* Bedienknöpfe: helles, kleines Material über dem dunklen Grund */
.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--color-fg);
  background: color-mix(in srgb, var(--color-bg-raised) 72%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: var(--border-hair) solid color-mix(in srgb, var(--color-fg) 22%, transparent);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: background-color var(--motion-hover), transform var(--duration-fast) var(--easing-press), opacity var(--motion-hover);
}
.lb__btn svg { width: 1.25rem; height: 1.25rem; }
.lb__btn:hover { background: var(--color-bg-raised); }
.lb__btn:active { transform: scale(0.92); }
.lb__btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.lb__close { top: var(--space-4); right: var(--space-4); }
.lb__prev, .lb__next { top: 50%; margin-top: -1.5rem; }
.lb__prev { left: var(--space-4); }
.lb__next { right: var(--space-4); }

@media (hover: none) and (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
  .lb__prev, .lb__next { display: none; } /* auf dem Telefon blättert man mit dem Finger */
}

@media (prefers-reduced-transparency: reduce) {
  .lb__scrim { background: var(--color-bg-sunken); }
  .lb__btn { background: var(--color-bg-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .lb__btn { background: var(--color-bg-raised); border-color: var(--color-fg); }
}