/* ==========================================================================
   morph-gallery.css — Bildbetrachter (Vollbild) fuer die ganze Website.
   ========================================================================== */
html.mg-lock, html.mg-lock body { overflow: hidden !important; }
[data-morph] { cursor: zoom-in; }
img[data-morph]:focus-visible { outline: 3px solid var(--accent, #b775ff); outline-offset: 3px; }

.mg {
    position: fixed; inset: 0; z-index: 2147483000;
    background: #08080d;
    color: #f4f4f6;
    opacity: 0; transition: opacity .22s ease;
    outline: none;
    font-family: inherit;
}
.mg[hidden] { display: none; }
.mg.is-open { opacity: 1; }

.mg-stage { position: absolute; inset: 0; touch-action: pan-y; }
.mg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s ease; }
.mg-canvas.is-ready { opacity: 1; }
.mg.is-fallback .mg-canvas { display: none; }
.mg-fallback { position: absolute; inset: 0; display: none; }
.mg.is-fallback .mg-fallback { display: block; }
.mg-fallback img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: contain; opacity: 0; transition: opacity .7s ease;
}
.mg-fallback img.is-active { opacity: 1; }

.mg-shade {
    pointer-events: none; position: absolute; inset: auto 0 0 0; height: 220px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .7));
}

.mg-btn {
    position: absolute; z-index: 3;
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: background-color .2s ease, transform .15s ease, border-color .2s ease;
}
.mg-btn:hover { background: rgba(255, 255, 255, .24); }
.mg-btn:active { transform: scale(.94); }
.mg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mg-btn[hidden] { display: none; }
.mg-close { top: max(16px, env(safe-area-inset-top)); inset-inline-end: 16px; }
.mg-arrow { top: 50%; transform: translateY(-50%); }
.mg-arrow:active { transform: translateY(-50%) scale(.94); }
.mg-prev { inset-inline-start: clamp(12px, 3vw, 32px); }
.mg-next { inset-inline-end: clamp(12px, 3vw, 32px); }
html[dir="rtl"] .mg-arrow svg { transform: scaleX(-1); }

.mg-bottom {
    position: absolute; z-index: 3; inset: auto 0 max(18px, env(safe-area-inset-bottom)) 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; pointer-events: none;
}
.mg-meta { display: flex; align-items: baseline; gap: 14px; max-width: min(900px, 100%); pointer-events: auto; }
.mg-caption { margin: 0; font-size: .98rem; line-height: 1.5; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.mg-count { font-variant-numeric: tabular-nums; font-size: .82rem; letter-spacing: .08em; color: rgba(255, 255, 255, .7); white-space: nowrap; }

.mg-thumbs {
    list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 8px;
    max-width: calc(100% - 2rem); overflow-x: auto; scroll-behavior: smooth; pointer-events: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) rgba(255, 255, 255, .08);
}
.mg-thumbs[hidden] { display: none; }
.mg-thumbs li { flex: 0 0 auto; }
.mg-thumb {
    display: block; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    background: transparent; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease;
}
.mg-thumb:hover { opacity: .85; }
.mg-thumb[aria-current="true"] { opacity: 1; border-color: #fff; }
.mg-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mg-thumb img { display: block; width: 80px; height: 50px; max-width: none; object-fit: cover; }

.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .mg-thumbs { display: none; }
    .mg-arrow { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); transform: none; }
    .mg-arrow:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
    .mg, .mg-canvas, .mg-fallback img { transition: none; }
}