/* ============================================================
   Bildbetrachter (Lightbox). Tokens siehe luna.css.
   ============================================================ */

/* Anfassbare Bilder bekommen einen Hinweis, dass sich etwas tut. */
.ll-lb-start{cursor:zoom-in;transition:filter .18s ease}
.ll-lb-start:hover{filter:brightness(.94)}
.ll-lb-start:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.ll-lb{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,48px);
  background:rgba(37,42,40,.94);
  opacity:0;transition:opacity .18s ease;
}
.ll-lb.ist-offen{display:flex;opacity:1}
body.ll-lb-offen{overflow:hidden}

/* Die Buehne traegt keinen Hintergrund, sonst blitzt der Platzhalterton aus der
   globalen figure-Regel waehrend des Ladens als heller Rand auf dem dunklen
   Grund auf. */
/* overflow:visible ist noetig, damit der Hover-Zoom das Grossbild nicht an der
   rechteckigen Buehnenkante beschneidet und die Ecken dabei eckig werden. */
.ll-lb-buehne{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%;background:transparent;overflow:visible}
/* Rundung wie im Fliesstext (Michael am 16.08.2026): Das Bild soll beim
   Vergroessern rund bleiben, die frueher gesetzte 0 wirkte wie ein Bruch. */
.ll-lb-buehne img{
  display:block;max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.45);background:transparent
}
.ll-lb-buehne figcaption{
  max-width:62ch;text-align:center;color:#f3f0ea;
  font-size:15px;line-height:1.5
}

.ll-lb button{
  position:absolute;display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(243,240,234,.14);color:#f3f0ea;cursor:pointer;
  border-radius:50%;transition:background .15s ease
}
.ll-lb button:hover{background:rgba(243,240,234,.3)}
.ll-lb button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.ll-lb-zu{top:16px;right:16px;width:46px;height:46px;font-size:30px;line-height:1}
.ll-lb-vor,.ll-lb-zurueck{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px}
.ll-lb-vor{left:16px}
.ll-lb-zurueck{right:16px}

.ll-lb-zaehler{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:'Josefin Sans';font-weight:600;letter-spacing:.16em;
  font-size:12px;color:rgba(243,240,234,.75)
}

@media(max-width:640px){
  .ll-lb-buehne img{max-height:74vh}
  .ll-lb-vor,.ll-lb-zurueck{width:44px;height:44px;font-size:20px}
  .ll-lb-vor{left:8px}
  .ll-lb-zurueck{right:8px}
  .ll-lb-buehne figcaption{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .ll-lb,.ll-lb-start,.ll-lb button{transition:none}
}