/* ------------------------------------------------------------------------
   Steganos – Screenshot Grid-Gallery
   Raster aus gleich großen Zellen (contain, weißer Hintergrund) + Lightbox.
   Gefüttert über  window.CAROUSEL_CONFIG = { items:[{src, caption, alt}] }
   zusammen mit grid-gallery.js. Klassen/IDs mit "ssg-" geprefixt, damit es
   nicht mit den anderen carousel.*-Varianten kollidiert.
   ------------------------------------------------------------------------ */

.ssg-grid{
    max-width:1180px; margin:30px auto 25px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media (max-width:980px){ .ssg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ssg-grid{ grid-template-columns:1fr; } }

.ssg-cell{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:16px;
    box-shadow:0 4px 14px rgba(0,0,0,.10);
    aspect-ratio:4/3;                       /* alle Zellen gleich groß */
    display:flex; align-items:center; justify-content:center;
    padding:12px; overflow:hidden; cursor:pointer;
    transition:box-shadow .18s ease, border-color .18s ease;
}
.ssg-cell:hover{ box-shadow:0 10px 22px rgba(0,0,0,.14); border-color:#0060DC; }
.ssg-cell img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* ---------- Lightbox ---------- */
.ssg-lb{ position:fixed; inset:0; display:none; z-index:9999; background:rgba(0,0,0,.78); }
.ssg-lb.active{ display:flex; }
.ssg-lb-panel{
    margin:auto; position:relative;
    display:flex; flex-direction:column; align-items:center;
    max-width:92vw; max-height:92vh;
}
.ssg-lb-frame{
    width:fit-content; max-width:92vw;
    border-radius:12px; overflow:hidden;
    box-shadow:0 12px 44px rgba(0,0,0,.6); background:#fff;
}
.ssg-lb-img{ display:block; max-width:92vw; max-height:78vh; object-fit:contain; background:#fff; }
.ssg-lb-caption{
    width:0; min-width:100%; box-sizing:border-box;   /* = Bildbreite, Text umbricht */
    background:#0b1220; color:#fff; min-height:56px;
    display:flex; align-items:center; justify-content:center;
    padding:12px 20px; font-size:18px; line-height:1.4; text-align:center;
}
.ssg-lb-close{
    position:absolute; top:-16px; right:-16px; width:40px; height:40px;
    border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.06);
    display:grid; place-items:center; cursor:pointer; z-index:5;
    box-shadow:0 4px 12px rgba(0,0,0,.25); font-size:22px; line-height:1; color:#111;
}
.ssg-lb-nav{ position:absolute; top:0; bottom:0; width:22%; cursor:pointer; z-index:3; }
.ssg-lb-nav.left{ left:0; } .ssg-lb-nav.right{ right:0; }
.ssg-lb-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:#fff; border:1px solid rgba(0,0,0,.08);
    display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.3);
    opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.ssg-lb-nav:hover .ssg-lb-arrow{ opacity:1; }
.ssg-lb-nav.left .ssg-lb-arrow{ left:14px; } .ssg-lb-nav.right .ssg-lb-arrow{ right:14px; }
.ssg-lb-arrow svg{ width:22px; height:22px; }