/* ── Juwelier Galerie v1.3 ───────────────────────────────────────────────── */

.jgal-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ── Hauptbild ───────────────────────────────────────────────────────────── */
.jgal-main-frame {
    background: #f0eeea;
    margin-bottom: 8px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    overflow: hidden;
}

.jgal-main-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.jgal-main-img.jgal-fade { opacity: 0; }

/* ── Thumbnails ─────────────────────────────────────────────────────────── */
.jgal-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.jgal-thumb-item {
    background: #f0eeea;
    border: 2px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    width: 72px;
    height: 72px;
    display: block;
    overflow: hidden;
    transition: border-color 0.15s ease;
    padding: 0;
}

.jgal-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jgal-thumb-item.aktiv          { border-color: #2d6a8a; }
.jgal-thumb-item:hover:not(.aktiv) { border-color: rgba(45,106,138,0.45); }
.jgal-thumb-item:focus-visible  { outline: none; border-color: #2d6a8a; }

/* ── Scroll-Galerie (Desktop) ───────────────────────────────────────────── */
/* Bilder untereinander, Info-Spalte daneben bleibt stehen.
   Unter 1025px bleibt immer die klassische Galerie mit Thumbnails. */

.jgal-vlist { display: none; }

@media (min-width: 1025px) {
    .jgal-layout-scroll .jgal-main-frame,
    .jgal-layout-scroll .jgal-thumbs { display: none; }

    .jgal-layout-scroll .jgal-vlist {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        width: 100%;
    }

    /* Spalten nicht strecken, sonst greift sticky nicht */
    .jgal-sticky-row { align-items: flex-start !important; }
    .jgal-sticky-col { position: sticky !important; align-self: flex-start; overflow: visible !important; max-height: none !important; }

}

.jgal-vitem {
    margin: 0;
    background: #f0eeea;
    overflow: hidden;
    box-sizing: border-box;
}

.jgal-vitem img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Ein Bild ist nie höher als der sichtbare Bereich */
    max-height: calc(100vh - var(--jgal-top, 24px) - 24px);
}

/* Fortschrittsbalken: klebt links oben über den Bildern */
.jgal-ind {
    position: sticky;
    top: calc(var(--jgal-top, 24px) + 32px);
    height: 0;
    z-index: 5;
    margin-bottom: calc(-1 * var(--jgal-gap, 12px)); /* gleicht den gap aus */
    pointer-events: none;
}

.jgal-ind-track {
    position: absolute;
    left: 18px;
    top: 0;
    width: 2px;
    height: 140px;
    background: rgba(31, 27, 22, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.jgal-ind-thumb {
    display: block;
    width: 100%;
    background: #b08d57;
    border-radius: 2px;
    will-change: transform;
}