/* Fullscreen gallery – kept separate on purpose */ .tpe-lightbox[hidden]{display:none!important}.tpe-lightbox{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;color:#fff} .tpe-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.96)} .tpe-lightbox__dialog{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:64px minmax(0,1fr) auto;align-items:center;outline:0} .tpe-lightbox__topbar{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:1fr auto 52px;gap:18px;align-items:center;padding:12px 18px;min-width:0} .tpe-lightbox__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;letter-spacing:.06em;text-transform:uppercase} .tpe-lightbox__counter{font-size:13px;opacity:.75} .tpe-lightbox__figure{grid-column:2;grid-row:2;margin:0;width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;justify-items:stretch;padding:14px 12px;overflow:hidden} .tpe-lightbox__stage{min-width:0;min-height:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden} .tpe-lightbox__image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;flex:0 1 auto} .tpe-lightbox__caption{min-height:20px;max-width:100%;color:#fff;margin:10px auto 0;text-align:center;font-size:13px;line-height:1.35;opacity:.8;flex:none} .tpe-lightbox[data-captions="0"] .tpe-lightbox__caption{display:none} .tpe-lightbox__close,.tpe-lightbox__prev,.tpe-lightbox__next{border:0;background:transparent;color:#fff;cursor:pointer;z-index:2} .tpe-lightbox__close{font-size:38px;line-height:1;width:44px;height:44px} .tpe-lightbox__prev{grid-column:1;grid-row:2}.tpe-lightbox__next{grid-column:3;grid-row:2}.tpe-lightbox__prev,.tpe-lightbox__next{font-size:58px;height:100%} .tpe-lightbox__prev[disabled],.tpe-lightbox__next[disabled]{opacity:.18;cursor:default} .tpe-lightbox__thumbs{grid-column:1/-1;grid-row:3;display:flex;gap:8px;overflow-x:auto;padding:10px 16px 14px;justify-content:flex-start;scrollbar-width:thin} .tpe-lightbox__thumb{appearance:none;border:1px solid transparent;background:none;padding:0;flex:0 0 auto;width:58px;height:58px;cursor:pointer;opacity:.55} .tpe-lightbox__thumb img{display:block;width:100%;height:100%;object-fit:cover} .tpe-lightbox__thumb.is-active{opacity:1;border-color:#fff} body.tpe-lightbox-open{overflow:hidden} /* Caption is a real navigation aid: project title + current image position. */ .tpe-lightbox__caption{opacity:1;font-weight:600;background:transparent;padding:7px 12px;border-radius:0;text-shadow:0 1px 2px rgba(0,0,0,.7)} /* 0.3.3: Bild und Beschriftung teilen sich die reale Viewport-Hoehe. Die Stage darf schrumpfen; dadurch bleibt die Caption immer sichtbar. */ .tpe-lightbox__dialog{max-width:100vw;max-height:100dvh} @supports not (height:100dvh){.tpe-lightbox__dialog{max-height:100vh}} .tpe-lightbox__figure,.tpe-lightbox__stage{box-sizing:border-box} /* 0.3.4: Die Vollbildgalerie muss vor festen Theme-Menues liegen. */ .tpe-lightbox{z-index:2147483647!important;isolation:isolate} /* Das Schliessen-Kreuz bleibt sichtbar und gut klickbar. */ .tpe-lightbox__close{ position:absolute; top:12px; right:16px; display:flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; font-size:42px; font-weight:300; line-height:1; z-index:5; } /* 0.3.5: Lightbox wird per JS direkt unter verschoben. Damit kann kein Elementor-/Theme-Stacking-Context das Hauptmenue darueber legen. */ .tpe-lightbox{ position:fixed!important; inset:0!important; z-index:2147483647!important; } .tpe-lightbox__backdrop{ position:absolute!important; inset:0!important; z-index:0!important; background:#000!important; cursor:zoom-out; } .tpe-lightbox__dialog{ z-index:1!important; pointer-events:none; } .tpe-lightbox__image, .tpe-lightbox__close, .tpe-lightbox__prev, .tpe-lightbox__next, .tpe-lightbox__thumb{ pointer-events:auto; } /* Eigenes X statt eines Font-Zeichens: dadurch bleibt es unabhaengig vom Theme sichtbar. */ .tpe-lightbox__close{ position:fixed!important; top:18px!important; right:20px!important; width:48px!important; height:48px!important; margin:0!important; padding:0!important; border:0!important; border-radius:50%!important; background:rgba(0,0,0,.58)!important; color:transparent!important; font-size:0!important; opacity:1!important; visibility:visible!important; z-index:2147483647!important; cursor:pointer!important; } .tpe-lightbox__close::before, .tpe-lightbox__close::after{ content:""; position:absolute; left:11px; top:23px; width:26px; height:2px; background:#fff; border-radius:2px; } .tpe-lightbox__close::before{transform:rotate(45deg)} .tpe-lightbox__close::after{transform:rotate(-45deg)} /* 0.3.6: Ladeanzeige und robuste Fehlerbehandlung. */ .tpe-lightbox__image.is-loading{opacity:.2} .tpe-lightbox__status{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 18px; text-align:center; font-size:14px; line-height:1.35; color:#fff; pointer-events:auto; } .tpe-lightbox__status[hidden]{display:none!important} .tpe-lightbox__status button{ appearance:none; border:1px solid rgba(255,255,255,.65); background:rgba(0,0,0,.35); color:#fff; padding:7px 12px; cursor:pointer; }