/* Bilder gross ansehen: dunkler Grund, ein Bild, Pfeile und Zähler. */
.lupe {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  background: rgba(16, 20, 13, .94);
  opacity: 0; transition: opacity .45s ease;
  padding: 74px clamp(20px, 6vw, 90px) 88px;
}
.lupe[hidden] { display: none; }
.lupe.auf { opacity: 1; }

.lupe-bild {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
  transform: scale(.97); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.lupe.auf .lupe-bild { transform: scale(1); }

.lupe-zeile {
  position: absolute; left: 0; right: 0; bottom: 30px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  color: rgba(248,247,244,.8);
  font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
}
.lupe-text { max-width: 44ch; text-align: center; }
.lupe-nr { font-variant-numeric: tabular-nums; color: rgba(248,247,244,.55); }

.lupe-knopf {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(248,247,244,.1); border: 1px solid rgba(248,247,244,.24);
  color: var(--weiss); font-size: 16px; cursor: pointer;
  transition: background .35s, border-color .35s;
}
.lupe-knopf:hover { background: rgba(248,247,244,.22); border-color: rgba(248,247,244,.5); }
.lupe-vor { right: clamp(14px, 3vw, 40px); }
.lupe-zurueck { left: clamp(14px, 3vw, 40px); }
.lupe-zu {
  position: absolute; top: 26px; right: clamp(14px, 3vw, 40px);
  width: 46px; height: 46px; border-radius: 50%;
  background: none; border: 1px solid rgba(248,247,244,.24);
  color: var(--weiss); font-size: 19px; cursor: pointer;
  transition: background .35s, transform .4s;
}
.lupe-zu:hover { background: rgba(248,247,244,.16); transform: rotate(90deg); }

/* die Bilder in den Strecken zeigen, dass man sie öffnen kann */
.pj-schau img, .ls-schau img, .uk-bild img { cursor: zoom-in; }
body.lupe-auf { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lupe, .lupe-bild { transition: none; }
}
@media (max-width: 900px) {
  .lupe { padding: 64px 14px 84px; }
  .lupe-knopf { width: 42px; height: 42px; }
  .lupe-zeile { bottom: 22px; gap: 14px; font-size: 9px; }
}