/* ----------  Flexibles Grid für PhotoSwipe  ---------- */
/* alt; anzahl thumbnails greift nicht; es werden soviele Thuimbnails nebeneinander gestellt, wie Platz ist */
/* evtl. Variable definieren: :root{ --cell-size:200px; 
diese dann im CSS zuweisen mit var(--cell-size) anstelle fixem Wert */
.ps-gallery{
    display:grid;
    gap:12px;
/*    moderner Autolayout-Trick: „so viele Spalten wie reinpassen“         */
    grid-template-columns:repeat(auto-fill,minmax(var(--cell-size,200px),1fr));
    justify-content:center;               /* ganze Galerie zentriert    */
} 


/* fallback für alte Browser / IE 11  – mindestens N Bilder pro Zeile   */
:root{ --minCell:25%; }                /*    vom PHP-Wert überschrieben */
@supports not (grid-template-columns:repeat(auto-fill,minmax(100px,1fr))){
    .ps-gallery{ display:flex; flex-wrap:wrap; justify-content:center; }
    .ps-item   { flex:0 0 var(--minCell); margin:6px; }
}

.ps-item{
    list-style:none;
}

.ps-item img{
    width:100%;
    height:auto;
    display:block;
    border:1px solid #c0c0c0;
    border-radius:5px;
    box-shadow:0 4px 8px rgba(0,0,0,.2);
}

/* Typische Breakpoints – bei Bedarf anpassen                      */
@media(max-width:1200px){ :root{ --cell-size:180px; } }
@media(max-width:900px) { :root{ --cell-size:160px; } }
 /*1 Bild, groß */
@media(max-width:600px) {
    :root{ --cell-size:200px; 
    /* 1)  Grid-Zelle bleibt 100 %,  Bild wird aber zentriert            */
    .ps-gallery{ justify-items:center; }    /* statt linksbündig */

    /* 2)  Thumbnail NIE vergrößern – nur echte Pixelbreite anzeigen     */
    .thumbnail{
        width:auto;        /* intrinsic width (z. B. 200 px)            */
        max-width:none;    /* überschreibt plugin.css (90 %)            */        
    }
}