/* Großansicht der Fotos (06.10.2026, Michas „dass man die Bilder auch groß machen kann“). Gebaut und gesteuert von store.js
   (openLightbox): Artikelfotos aus der Detailansicht (Lupe oder Tippen aufs Foto) und das vordere Foto im Galerie-Rad. */

.grossbild {
  --grossbild-dunkel: 1;
  position: fixed;
  z-index: 2147482000;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #f2f1ec;
  background: rgba(6, 6, 6, calc(.95 * var(--grossbild-dunkel)));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .22s ease;
}
.grossbild[hidden] { display: none; }
.grossbild.is-open { opacity: 1; }
.grossbild.is-closing { opacity: 0; }

.grossbild-kopf {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
.grossbild-zahl { color: rgba(242,241,236,.7); font: 10px/1 var(--mono); letter-spacing: .2em; }
.grossbild-titel { overflow: hidden; color: rgba(242,241,236,.85); font: 10px/1.3 var(--mono); letter-spacing: .16em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.grossbild-zu {
  justify-self: end;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(242,241,236,.35);
  border-radius: 50%;
  color: inherit;
  background: rgba(20,20,20,.55);
  font: 300 24px/1 var(--sans);
  cursor: pointer;
}
.grossbild-zu:hover { border-color: #f2f1ec; }

/* Flex statt Grid: nur so löst sich max-height: 100% des Fotos gegen die Bühnenhöhe auf (ein Grid hätte eine Zeile
   „auto“, dann zeigte das Foto seine volle Originalgröße). */
.grossbild-buehne {
  position: relative;
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px 76px max(28px, env(safe-area-inset-bottom));
  touch-action: none;
  cursor: zoom-out;
}
.grossbild-foto {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  cursor: zoom-in;
  transform-origin: 50% 50%;
  will-change: transform;
}
.grossbild-foto.is-smooth { transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.grossbild-foto.is-mono { filter: grayscale(1) contrast(1.12) brightness(.9); }
.grossbild.is-zoomed .grossbild-foto { box-shadow: none; cursor: grab; }
.grossbild.is-zoomed .grossbild-foto:active { cursor: grabbing; }

.grossbild-pfeil {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-top: -24px;
  border: 1px solid rgba(242,241,236,.35);
  border-radius: 50%;
  color: inherit;
  background: rgba(20,20,20,.55);
  font: 20px/1 var(--sans);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.grossbild-pfeil[hidden] { display: none; }
.grossbild-pfeil:hover { border-color: #f2f1ec; }
.grossbild-zurueck { left: max(16px, env(safe-area-inset-left)); }
.grossbild-weiter { right: max(16px, env(safe-area-inset-right)); }
.grossbild-zurueck:hover { transform: translateX(-2px); }
.grossbild-weiter:hover { transform: translateX(2px); }
.grossbild.is-zoomed .grossbild-pfeil { opacity: .25; }
.grossbild button:focus-visible { outline: 2px solid #f2f1ec; outline-offset: 3px; }

/* Kurzer Hinweis, wie man zoomt: erscheint beim Öffnen und verblasst. */
.grossbild-hinweis {
  position: absolute;
  z-index: 2;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(242,241,236,.25);
  color: rgba(242,241,236,.8);
  background: rgba(20,20,20,.6);
  font: 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
}
.grossbild.is-open .grossbild-hinweis { animation: grossbild-hinweis 3.2s ease .4s both; }
@keyframes grossbild-hinweis {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  12%, 75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* Lupe in der Detailansicht und Zoom-Zeiger auf Foto und vorderer Galeriekarte. */
.dialog-gallery .dialog-photo { cursor: zoom-in; }
.dialog-zoom {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(239,242,242,.38);
  border-radius: 50%;
  color: #f5f6f2;
  background: rgba(17,19,20,.62);
  box-shadow: inset 0 1px 0 rgba(248,250,250,.12), 0 4px 14px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  cursor: zoom-in;
}
.dialog-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.dialog-gallery.has-thumbs .dialog-zoom { bottom: 74px; }
.orbit-card.is-center { cursor: zoom-in; }

/* Heller Modus: dieselbe Großansicht, auf hellem Grund. */
:root[data-theme="light"] .grossbild { color: #171817; background: rgba(239, 238, 233, calc(.96 * var(--grossbild-dunkel))); }
:root[data-theme="light"] .grossbild-zahl,
:root[data-theme="light"] .grossbild-titel { color: rgba(23,24,23,.72); }
:root[data-theme="light"] .grossbild-zu,
:root[data-theme="light"] .grossbild-pfeil,
:root[data-theme="light"] .grossbild-hinweis { border-color: rgba(23,24,23,.28); color: #171817; background: rgba(255,255,255,.7); }
:root[data-theme="light"] .grossbild-foto { box-shadow: 0 24px 60px rgba(23,24,23,.18); }
:root[data-theme="light"] .grossbild button:focus-visible { outline-color: #171817; }
:root[data-theme="light"] .dialog-zoom { border-color: rgba(17,17,17,.24); color: #1a1a18; background: rgba(250,249,245,.86); }

/* Handy: Bild über die ganze Breite, Pfeile unten neben dem Hinweis. */
@media (max-width: 680px) {
  .grossbild-buehne { padding: 4px 0 84px; }
  .grossbild-foto { box-shadow: none; }
  .grossbild-pfeil { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; margin-top: 0; }
  .grossbild-zurueck { left: 16px; }
  .grossbild-weiter { right: 16px; }
  .grossbild-hinweis { bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); font-size: 8px; }
  .grossbild-titel { font-size: 8.5px; letter-spacing: .12em; }
  .dialog-zoom { width: 34px; height: 34px; right: 10px; bottom: 10px; }
  .dialog-gallery.has-thumbs .dialog-zoom { bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .grossbild, .grossbild-foto.is-smooth, .grossbild-pfeil { transition: none; }
  .grossbild.is-open .grossbild-hinweis { animation: none; opacity: 1; }
}