/* Klickbare Bild-Galerie + Lightbox (seitenübergreifend, self-contained) */

/* Einheitliche Kacheln im festen 4:3-Format – unabhängig davon, ob das Foto quer,
   hochkant oder quadratisch ist. Der Ausschnitt entsteht über object-fit:cover,
   das ganze Bild zeigt die Lightbox.
   height:auto ist dabei Pflicht und nicht optional: die Bilder tragen gegen
   Layoutsprünge width/height als HTML-Attribute, und diese Attribut-Höhe schlägt
   sonst die aspect-ratio – dann werden die Kacheln über 1000 px hoch. */
.gallery img,.gallery--wide img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:2px;display:block;cursor:zoom-in;background:var(--line);transition:transform .3s ease,box-shadow .3s ease}
.gallery img:hover,.gallery--wide img:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,30,51,.16)}

/* Gleichmäßiges Raster: gleich breite Spalten, gleiche Abstände, gleich hohe
   Reihen. Die Spaltenzahl sinkt stufenweise, nie auf eine einzelne Spalte –
   eine Galerie soll auch auf dem Handy als Übersicht lesbar bleiben.
   Steht hier und nicht in den Seiten-CSS, damit jede Galerie gleich aussieht;
   gallery.css wird nach der Seiten-CSS geladen und gewinnt deshalb. */
.gallery,.gallery--wide{display:grid;align-items:start}
.gallery{grid-template-columns:repeat(3,1fr);gap:24px}
.gallery--wide{grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.gallery--wide{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);gap:18px}.gallery--wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery,.gallery--wide{grid-template-columns:repeat(2,1fr);gap:12px}}

/* Lightbox-Overlay */
.lb-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,20,35,.93);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.lb-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.lb-overlay img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:none;color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;font-family:var(--font-sans)}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:22px;right:22px;}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#EAF2FA;font-size:14px;letter-spacing:.05em}
@media(max-width:600px){.lb-btn{width:44px;height:44px;font-size:22px}.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:12px;right:12px}}