/*!
* Minimal Lightbox – v7
* Copyright (c) 2025 Sebastian
* License: MIT
*/
:root{
--lb-bg: rgba(0,0,0,.65);
--lb-caption: #e8e8e8;
--lb-thumb-size: 72px;
--lb-gap: 10px;
--lb-ui-bg: rgba(0,0,0,.55);
--lb-ui-fg: #fff;

/* per JS überschrieben */
--lb-img-maxw: 90vw;  /* max. Bildbreite */
--lb-img-maxh: 82vh;  /* max. Bildhöhe   */
--lb-anim: 900ms;     /* Zoom-Anim-Dauer */
}

body.lb-lock{ overflow:hidden; }

.lb-overlay{
position: fixed; inset: 0; z-index: 9999;
background: var(--lb-bg);
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
opacity: 0; transition: opacity .15s ease;
padding-top: max(5vh, 56px); padding-bottom: 2vh;
pointer-events: none;
}
.lb-overlay.lb-open{ opacity:1; pointer-events:auto; }

/* Bühne ohne feste Höhe */
.lb-stage{
max-width: var(--lb-img-maxw);
display: grid; place-items: center; position: relative;
}

/* Bild skaliert bis Maximalhöhe/-breite */
.lb-img{
display:block;
width:auto; height:auto;
max-width:100%;
max-height:var(--lb-img-maxh);
object-fit:contain; user-select:none;
box-shadow:0 10px 40px rgba(0,0,0,.35);
background:rgba(0,0,0,.15);
transform-origin:center center;
touch-action:none;               /* für Pointer-Gesten */
cursor:grab;
}
.lb-img.lb-grab{ cursor:grab; }
.lb-img.lb-grabbing{ cursor:grabbing; }

.lb-zoom-in{  animation: lb-zoom-in  var(--lb-anim) ease both; }
.lb-zoom-out{ animation: lb-zoom-out var(--lb-anim) ease both; }

@keyframes lb-zoom-in{
from{ transform: scale(.6); opacity:.25; }
to{   transform: scale(1);  opacity:1; }
}
@keyframes lb-zoom-out{
from{ transform: scale(1);  opacity:1; }
to{   transform: scale(.6); opacity:.0; }
}

/* Toolbar über dem Bild */
.lb-toolbar{
position:absolute; top:-44px; right:0;
display:inline-flex; gap:6px; align-items:center;
background:var(--lb-ui-bg); color:var(--lb-ui-fg);
padding:6px 8px; border-radius:6px;
}
.lb-btn{
appearance:none; border:0; background:transparent;
color:inherit; cursor:pointer; font-size:16px;
line-height:1; padding:4px 6px; border-radius:4px;
}
.lb-btn:focus{ outline:2px solid #fff; }

/* Schließen-Symbol via Unicode */
.lb-btn-close::before{ content:"\00D7"; font-size:22px; }

/* Paginierung links oben am Bild */
.lb-pager{
position:absolute; top:-44px; left:0;
background:var(--lb-ui-bg); color:var(--lb-ui-fg);
padding:6px 8px; border-radius:6px;
font:14px/1 Roboto, Arial, sans-serif;
}

/* Maus-Pfeile neben dem Bild */
.lb-nav{
position:fixed; top:50%; transform:translateY(-50%);
width:40px; height:40px; display:grid; place-items:center;
background:var(--lb-ui-bg); color:var(--lb-ui-fg);
border-radius:20px; cursor:pointer; user-select:none;
border:2px solid rgba(255,255,255,.35);
box-sizing:border-box; z-index:10000;
}
.lb-prev::before{ content:"\2039"; font-size:28px; } /* ‹ */
.lb-next::before{ content:"\203A"; font-size:28px; } /* › */

/* Beschriftung und Fehlermeldung */
.lb-caption{
color:var(--lb-caption);
margin-top:30px; width:min(80vw,960px);
text-align:center; line-height:1.4;
font:400 18px/1.4 Roboto, Arial, sans-serif;
}
.lb-error{
display:none; margin-top:10px;
background:var(--lb-ui-bg); color:#fff;
padding:8px 10px; border-radius:6px;
font:14px/1.2 Roboto, Arial, sans-serif;
}
.lb-error a{ color:#fff; text-decoration:underline; }

/* Thumbnails mittig */
.lb-thumbs{
display:flex; gap:var(--lb-gap);
justify-content:center;
margin-top:30px; margin-bottom:30px;
overflow-x:auto; width:min(80vw,960px);
margin-left:auto; margin-right:auto;
}
.lb-thumb{
flex:0 0 auto;
width:var(--lb-thumb-size);
height:calc(var(--lb-thumb-size)*0.75);
object-fit:cover; cursor:pointer; border-radius:2px;
border:10px solid rgba(128,128,128,.30);
opacity:.7; transition: opacity .15s ease, outline-color .15s ease;
outline:2px solid transparent;
}
.lb-thumb:hover{ opacity:.9; }
.lb-thumb.lb-active{ opacity:1; outline-color:#fff; }

/* RTL: Pfeil-Glyphen tauschen */
html[dir="rtl"] .lb-prev::before{ content:"\203A"; } /* › */
html[dir="rtl"] .lb-next::before{ content:"\2039"; } /* ‹ */


/* Alternative Paginierung: nummerierte Kreise am unteren Bildrand */
.lb-dots{
position: absolute;
left: 50%;
top: 0;                               /* exakte Position per JS */
transform: translate(-50%, -50%);     /* Mittelpunkt = Unterkante des Bildes */
display: none;                        /* JS schaltet auf flex */
gap: 8px;
pointer-events: auto;
z-index: 10001;
}
.lb-dot{
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--lb-ui-bg);
color: var(--lb-ui-fg);
border-radius: 50%;
border: 2px solid rgba(255,255,255,.35);
font: 14px/1 Roboto, Arial, sans-serif;
cursor: pointer; user-select: none;
}
.lb-dot.lb-active{ outline: 2px solid #fff; outline-offset: 0; }



/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
.lb-overlay{ --lb-anim:0ms; }
.lb-overlay{ transition:none !important; }
.lb-thumb{ transition:none !important; }
}

.lb-img{ image-orientation: from-image; }

/* Fallback bei geringer Höhe */
@media (max-height: 520px){
.lb-toolbar, .lb-pager{ top:6px; }
}