/* Vollbild-Lightbox der Referenz-Bildstrecke */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgb(255 255 255 / .85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);   /* Seite schimmert leicht durch */ overflow: hidden; touch-action: pan-y; user-select: none; }
.lightbox[hidden] { display: none; }
html.lightbox-offen { overflow: hidden; }
.lightbox__spur { display: flex; height: 100%; transition: transform .35s ease; cursor: grab; }
.lightbox__spur:active { cursor: grabbing; }
.lightbox__spur figure { flex: 0 0 100%; margin: 0; display: flex; align-items: center; justify-content: center; padding: 72px 96px; }
.lightbox__spur img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.lightbox__zaehler { position: absolute; left: 24px; top: 24px; margin: 0; color: var(--schwarz); font-size: 16px; line-height: 40px; letter-spacing: .1em; }

/* Knöpfe – rote Kreise wie der Plus-Button; Hover: rot gefüllt, Zeichen weiss */
.lightbox button { --zeichen: var(--rot); position: absolute; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid var(--rot); background: #fff; cursor: pointer; transition: background-color .15s ease; }
.lightbox button:hover, .lightbox button:focus-visible { --zeichen: #fff; background: var(--rot); }
.lightbox button:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.lightbox__zu { right: 24px; top: 20px; }
.lightbox__zu::before, .lightbox__zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2.5px; background: var(--zeichen); transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__zu::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__pfeil { top: 50%; margin-top: -24px; }
.lightbox__pfeil--zurueck { left: 24px; }
.lightbox__pfeil--weiter { right: 24px; }
.lightbox__pfeil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: solid var(--zeichen); border-width: 2.5px 2.5px 0 0; }
.lightbox__pfeil--weiter::before { transform: translate(-70%, -50%) rotate(45deg); }
.lightbox__pfeil--zurueck::before { transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox.einzeln .lightbox__pfeil, .lightbox.einzeln .lightbox__zaehler { display: none; }

@media (max-width: 960px) {
  .lightbox__spur figure { padding: 72px 0; }
  .lightbox__pfeil { top: auto; bottom: 20px; margin-top: 0; }
  .lightbox__pfeil--zurueck { left: calc(50% - 60px); }
  .lightbox__pfeil--weiter { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .lightbox__spur { transition: none; } }