
.gallery-page{overflow:hidden}
.gallery-kicker{margin:0;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.gallery-hero{padding:clamp(80px,11vw,160px) var(--pad);border-bottom:1px solid var(--border);background:radial-gradient(circle at 78% 24%,rgba(169,120,255,.13),transparent 30%)}
.gallery-hero h1{margin:18px 0 28px;font-size:clamp(5rem,15vw,14rem);line-height:.7;letter-spacing:-.08em;text-transform:uppercase}
.gallery-hero>p:last-child{max-width:760px;margin:0;color:var(--text-muted);font-size:clamp(1.2rem,2.2vw,2rem);line-height:1.15}
.gallery-content{padding:clamp(55px,7vw,100px) var(--pad) clamp(90px,10vw,150px)}
.gallery-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px}
.gallery-filter-button{appearance:none;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);padding:10px 15px;font:inherit;font-size:.76rem;font-weight:900;letter-spacing:.05em;cursor:pointer}
.gallery-filter-button:hover,.gallery-filter-button.is-active{border-color:var(--accent);background:rgba(216,255,69,.08);color:var(--accent)}
.gallery-grid{columns:3 280px;column-gap:14px}
.gallery-item{break-inside:avoid;margin:0 0 14px;border:1px solid var(--border);background:var(--bg-soft)}
.gallery-image-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.gallery-image-button img{display:block;width:100%;height:auto}
.gallery-item figcaption{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.gallery-item figcaption span{padding:6px 8px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.gallery-empty{color:var(--text-muted)}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox{position:fixed;inset:0;z-index:2000}
.gallery-lightbox-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.9);cursor:zoom-out}
.gallery-lightbox-inner{position:absolute;inset:30px;display:grid;place-items:center;pointer-events:none}
.gallery-lightbox-inner img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:auto}
.gallery-lightbox-close{position:absolute;right:0;top:0;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:1.6rem;cursor:pointer;pointer-events:auto}
.gallery-lightbox-open{overflow:hidden}
@media(max-width:650px){.gallery-hero h1{font-size:clamp(4.2rem,20vw,7rem)}.gallery-content{padding-top:38px}.gallery-filter{gap:6px}.gallery-filter-button{padding:9px 12px}.gallery-grid{columns:2 145px;column-gap:8px}.gallery-item{margin-bottom:8px}.gallery-lightbox-inner{inset:16px}}


.gallery-lightbox-nav{
    position:absolute;
    top:50%;
    z-index:3;
    width:52px;
    height:52px;
    margin-top:-26px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:1.45rem;
    cursor:pointer;
    pointer-events:auto;
    backdrop-filter:blur(8px);
}
.gallery-lightbox-prev{left:0}
.gallery-lightbox-next{right:0}
.gallery-lightbox-nav:hover{border-color:var(--accent);color:var(--accent)}
.gallery-lightbox-nav[hidden]{display:none}
.gallery-lightbox-inner{touch-action:pan-y;user-select:none}
@media(max-width:650px){
    .gallery-lightbox-nav{
        width:44px;
        height:44px;
        margin-top:-22px;
        font-size:1.2rem;
        background:rgba(0,0,0,.58);
    }
    .gallery-lightbox-prev{left:4px}
    .gallery-lightbox-next{right:4px}
}


/* Desktop-Lightbox: Bild vollständig innerhalb des Viewports halten */
@media(min-width:651px){
    .gallery-lightbox-inner{
        inset:24px 72px;
        overflow:hidden;
    }

    .gallery-lightbox-inner img{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:calc(100dvh - 48px);
        object-fit:contain;
    }
}
