/* SELFMADECREW — die eigene Schicht ueber PhotoSwipe.
   Nur so viel, dass der Betrachter zur Website gehoert: Akzentfarbe auf den
   Knoepfen, sichtbarer Tastaturfokus.
   V23 (Owner-Regression): das Bild in der Seite zeigt den normalen Zeiger wie
   jeder andere Link; die Lupe gehoert in den geoeffneten Betrachter (PhotoSwipe
   selbst, unveraendert). */

.smc-zoom-link {
  display: block;
  cursor: pointer;
}
.smc-zoom-link:focus-visible {
  outline: 2px solid #ff5722;
  outline-offset: 3px;
}

/* Die Bedienleiste. PhotoSwipe setzt die Knoepfe selbst; hier bekommen sie
   die Flaeche und den Kontrast dieser Website. */
.pswp__button {
  color: #ffffff;
  opacity: .82;
  transition: opacity .18s ease, background-color .18s ease;
  border-radius: 999px;
}
.pswp__button:hover,
.pswp__button:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
}
.pswp__button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.pswp__button svg {
  display: block;
  margin: auto;
}

/* Der eingebaute Umschalter mit nur einer Stufe war laut Owner verwirrend.
   Er bleibt als Doppelklick-Verhalten erhalten, verschwindet aber aus der
   Leiste - dort stehen jetzt getrenntes Plus und Minus. */
.pswp__button--zoom {
  display: none;
}

.pswp__bg {
  background: #0f0f10;
}

@media (prefers-reduced-motion: reduce) {
  .pswp__button { transition: none; }
}

/* V22 (Owner-Review V22 Abschnitt 4): die Leiste als EINE kompakte, klar sichtbare
   Gruppe an der oberen rechten Ecke des Bildes (Position setzt smc-lightbox.js
   ueber --smc-leiste-oben / --smc-leiste-rechts). Dunkle Flaeche mit heller Kante,
   weisse Symbole, 44px Trefferflaeche je Knopf. Kein zweites Bedienelement: es ist
   PhotoSwipes eigene Leiste. */
.pswp.smc-leiste-am-bild .pswp__top-bar {
  align-items: center;
  background: rgba(15, 15, 16, .9);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  gap: 2px;
  height: auto;
  left: auto;
  padding: 4px;
  right: var(--smc-leiste-rechts, 16px);
  top: var(--smc-leiste-oben, 16px);
  width: auto;
}
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__button {
  align-items: center;
  border-radius: 999px;
  display: flex;
  height: 44px;
  justify-content: center;
  margin: 0;
  opacity: 1;
  width: 44px;
}
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__button .pswp__icn {
  left: 50%;
  margin: -16px 0 0 -16px;
  top: 50%;
}
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__button:hover,
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__button:focus-visible {
  background: rgba(255, 255, 255, .2);
}
.pswp.smc-leiste-am-bild .pswp__counter {
  color: #ffffff;
  height: auto;
  line-height: 44px;
  margin: 0 6px 0 12px;
  opacity: 1;
  order: -1;
  text-shadow: none;
}
/* die Pfeile der Werkgruppe: gleiche Sprache, runde dunkle Flaeche statt
   eines frei stehenden Winkels am Fensterrand */
.pswp .pswp__button--arrow .pswp__icn {
  background: rgba(15, 15, 16, .78);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  height: 52px;
  margin-top: -26px;
  padding: 10px;
  width: 52px;
}
/* in der kompakten Leiste: der einstufige Umschalter bleibt verborgen (siehe oben,
   die 44px-Regel darf ihn nicht zurueckholen), und PhotoSwipes Ladeanzeige belegt
   nur Platz, solange wirklich geladen wird */
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__button--zoom { display: none; }
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__preloader:not(.pswp__preloader--active) { display: none; }
.pswp.smc-leiste-am-bild .pswp__top-bar .pswp__preloader--active { height: 44px; width: 44px; }

/* V23: Zurueck/Weiter am Bild (Desktop). Der Knopf selbst wird die runde 52px-
   Flaeche; die Position setzt smc-lightbox.js ueber --smc-pfeil-oben /
   --smc-pfeil-links / --smc-pfeil-rechts. Es sind PhotoSwipes eigene Pfeile;
   Touch-Geraete blenden sie wie bisher aus. */
.pswp.smc-pfeile-am-bild .pswp__button--arrow {
  height: 52px;
  margin-top: 0;
  top: var(--smc-pfeil-oben, 50%);
  width: 52px;
}
.pswp.smc-pfeile-am-bild .pswp__button--arrow--prev { left: var(--smc-pfeil-links, 12px); right: auto; }
.pswp.smc-pfeile-am-bild .pswp__button--arrow--next { left: var(--smc-pfeil-rechts, auto); right: auto; }
.pswp.smc-pfeile-am-bild .pswp__button--arrow .pswp__icn {
  left: 0;
  margin: 0;
  right: auto;
  top: 0;
}
.pswp.smc-pfeile-am-bild .pswp__button--arrow:hover .pswp__icn,
.pswp.smc-pfeile-am-bild .pswp__button--arrow:focus-visible .pswp__icn {
  background: rgba(255, 255, 255, .22);
}