/* Lightbox für die Bildergalerie - Verhalten in /js/lightbox.js.
   Farben aus den Design-Tokens der Seite, damit sie sich einfügt.
   Fallback-Werte, weil die Tokens auf manchen Seiten anders heißen können. */

/* Seite hinter der offenen Lightbox nicht mitscrollen */
html.lb-offen, html.lb-offen body { overflow: hidden; }

.lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,34,59,.94);
  padding:clamp(12px,4vw,48px);
}
.lb[hidden]{ display:none }

.lb-buehne{
  position:relative; max-width:min(1400px,100%); max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lb-bild{
  display:block; max-width:100%; max-height:calc(100vh - 140px);
  width:auto; height:auto; object-fit:contain;
  border-radius:4px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  opacity:1; transition:opacity .2s ease;
}
.lb.lb-laedt .lb-bild{ opacity:.35 }

/* Bedienelemente - runde Chips wie das a11y-Widget */
.lb-close,.lb-nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink,#04223B);
  border:none; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  transition:background .2s ease, transform .2s ease;
}
.lb-close:hover,.lb-nav:hover{ background:#fff; transform:scale(1.06) }
.lb-close:focus-visible,.lb-nav:focus-visible{
  outline:3px solid var(--flood,#5CB3E4); outline-offset:3px;
}
.lb-close{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px) }
.lb-prev{ left:clamp(8px,2vw,28px) }
.lb-next{ right:clamp(8px,2vw,28px) }
.lb-nav[hidden],.lb-zaehler[hidden]{ display:none }

.lb-zaehler{
  position:absolute; left:0; right:0; bottom:clamp(14px,3vw,30px);
  margin:0; text-align:center;
  font-size:.82rem; letter-spacing:.14em; font-weight:700;
  color:var(--frost,#9FC4D8);
}

@media (max-width:640px){
  .lb-close,.lb-nav{ width:42px; height:42px }
  .lb-bild{ max-height:calc(100vh - 120px) }
}

/* "Animationen aus" im Barrierefreiheits-Widget: keine Überblendungen */
.a11y-noanim .lb-bild,
.a11y-noanim .lb-close,
.a11y-noanim .lb-nav{ transition:none !important }