/* Marker fuer den Asset-Fallback: fehlt diese Variable, ist gallery.css nicht geladen */
:root { --bbf-gallery-css: 1; }

/* Gallery Layout */
.bbf-gallery-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* Positions */
.bbf-gallery-container.pos-below {
    flex-direction: column;
}

.bbf-gallery-container.pos-above {
    flex-direction: column-reverse;
}

.bbf-gallery-container.pos-left {
    flex-direction: row-reverse;
}

.bbf-gallery-container.pos-right {
    flex-direction: row;
}

/* Main Image */
.bbf-main-image-wrapper {
    flex: 1;
    position: relative;
    background: #fdfdfd;
    border: var(--bbf-image-border-width, 1px) solid var(--bbf-image-border-color, #e3e9f7);
    border-radius: var(--bbf-image-radius, 12px);
    overflow: hidden;
    cursor: zoom-in;
}

.bbf-main-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider Layout */
.bbf-main-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    scroll-behavior: smooth;
    cursor: zoom-in;
}

/* Übergang der Bühne: none = sofort, fade = Überblenden (JS setzt is-fading), slide = Standard (smooth scroll) */
.bbf-gallery-container[data-bbf-tr="none"] .bbf-main-slider,
.bbf-gallery-container[data-bbf-tr="fade"] .bbf-main-slider { scroll-behavior: auto; }
@keyframes bbf-slide-fade { from { opacity: 0; } to { opacity: 1; } }
.bbf-main-slide.is-fading { animation: bbf-slide-fade var(--bbf-tr-dur, 320ms) var(--bbf-tr-ease, ease) both; }

.bbf-main-slider::-webkit-scrollbar {
    display: none;
}

.bbf-main-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.bbf-main-slide a {
    display: block;
    width: 100%;
    cursor: zoom-in;
}

.bbf-main-slide a img {
    cursor: zoom-in;
}

/* Thumbnails */
.bbf-thumbnails-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    user-select: none;
}

.pos-above .bbf-thumbnails-container,
.pos-below .bbf-thumbnails-container {
    flex-direction: row;
    width: 100%;
}

.bbf-nav-arrow {
    /* echter <button>: Browser-Reset, Optik wie bisher */
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bbf-tn-arrow-size, 32px);
    height: var(--bbf-tn-arrow-size, 32px);
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: #333;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.bbf-nav-arrow.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.bbf-nav-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.bbf-nav-arrow.hidden {
    display: none !important;
}

.bbf-thumbnails-container.bbf-thumb-nav-pending .bbf-nav-arrow,
.bbf-thumbnails-container:not(.bbf-thumb-nav-has-overflow):not([data-bbf-arrows="always"]) .bbf-nav-arrow,
.bbf-thumbnails-container[data-bbf-arrows="never"] .bbf-nav-arrow {
    display: none !important;
}

.pos-above .bbf-nav-arrow,
.pos-below .bbf-nav-arrow {
    margin: 0 5px;
}

.pos-left .bbf-nav-arrow,
.pos-right .bbf-nav-arrow {
    margin: 5px 0;
    width: 100%;
    height: auto;
    padding: 5px 0;
    border-radius: 4px;
}

.bbf-nav-arrow:hover,
.bbf-nav-arrow:focus {
    background: var(--bbf-accent-color, #007bff);
    color: #fff;
    border-color: var(--bbf-accent-color, #007bff);
    outline: none;
}

.bbf-nav-arrow:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.bbf-thumbnails-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    max-height: calc(
        var(--bbf-thumbnail-height, 100px) * var(--bbf-thumb-count-xs, 4)
        + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-xs, 4) - 1)
    );
    flex: 1;
}

.pos-above .bbf-thumbnails-wrapper,
.pos-below .bbf-thumbnails-wrapper {
    max-height: none;
    max-width: calc(
        var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-xs, 4)
        + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-xs, 4) - 1)
    );
}

.bbf-thumbnails-inner {
    display: flex;
    gap: var(--bbf-thumbnail-gap-effective, 10px);
    transition: transform var(--bbf-tr-dur, 300ms) var(--bbf-tr-ease, ease);
    will-change: transform;
}

.bbf-thumbnails-inner.is-instant {
    transition: none;
}

.pos-left .bbf-thumbnails-inner,
.pos-right .bbf-thumbnails-inner {
    flex-direction: column;
}

.pos-left .bbf-thumbnails-container,
.pos-right .bbf-thumbnails-container {
    width: var(--bbf-thumbnail-width, 100px);
}

.bbf-thumbnail {
    flex: 0 0 var(--bbf-thumbnail-width, 100px);
    position: relative;
    width: var(--bbf-thumbnail-width, 100px);
    height: var(--bbf-thumbnail-height, 100px);
    border: var(--bbf-thumbnail-border-width, 1px) solid var(--bbf-thumbnail-border-color, #dee2e6);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bbf-thumbnail-background, #fff);
    border-radius: var(--bbf-thumbnail-radius, 0);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 576px) {
    .pos-above .bbf-thumbnails-wrapper,
    .pos-below .bbf-thumbnails-wrapper {
        max-width: calc(
            var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-sm, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-sm, 4) - 1)
        );
    }

    .pos-left .bbf-thumbnails-wrapper,
    .pos-right .bbf-thumbnails-wrapper {
        max-height: calc(
            var(--bbf-thumbnail-height, 100px) * var(--bbf-thumb-count-sm, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-sm, 4) - 1)
        );
    }
}

@media (min-width: 768px) {
    .pos-above .bbf-thumbnails-wrapper,
    .pos-below .bbf-thumbnails-wrapper {
        max-width: calc(
            var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-md, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-md, 4) - 1)
        );
    }

    .pos-left .bbf-thumbnail,
    .pos-right .bbf-thumbnail {
        flex: 0 0 var(--bbf-thumbnail-height, 100px);
        width: var(--bbf-thumbnail-width, 100px);
        height: var(--bbf-thumbnail-height, 100px);
    }

    .pos-left .bbf-thumbnails-wrapper,
    .pos-right .bbf-thumbnails-wrapper {
        max-height: calc(
            var(--bbf-thumbnail-height, 100px) * var(--bbf-thumb-count-md, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-md, 4) - 1)
        );
    }
}

@media (min-width: 992px) {
    .pos-above .bbf-thumbnails-wrapper,
    .pos-below .bbf-thumbnails-wrapper {
        max-width: calc(
            var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-lg, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-lg, 4) - 1)
        );
    }

    .pos-left .bbf-thumbnails-wrapper,
    .pos-right .bbf-thumbnails-wrapper {
        max-height: calc(
            var(--bbf-thumbnail-height, 100px) * var(--bbf-thumb-count-lg, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-lg, 4) - 1)
        );
    }
}

@media (min-width: 1200px) {
    .pos-above .bbf-thumbnails-wrapper,
    .pos-below .bbf-thumbnails-wrapper {
        max-width: calc(
            var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-xl, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-xl, 4) - 1)
        );
    }

    .pos-left .bbf-thumbnails-wrapper,
    .pos-right .bbf-thumbnails-wrapper {
        max-height: calc(
            var(--bbf-thumbnail-height, 100px) * var(--bbf-thumb-count-xl, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-xl, 4) - 1)
        );
    }
}

.bbf-thumbnail picture,
.bbf-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.bbf-thumbnail picture {
    flex: 0 0 100%;
}

.bbf-thumbnail img {
    object-fit: contain;
    object-position: center;
    padding: 0;
    transition: transform 0.3s ease;
}

/* Thumbnail Hover-Effekte (konfigurierbar via thumb_hover_effect) */
.bbf-thumbnail.hover-zoom:hover img {
    transform: scale(1.05);
    will-change: transform;
}

.bbf-thumbnail.hover-border:hover {
    border-color: var(--bbf-accent-color, #007bff);
    box-shadow: 0 0 0 1px var(--bbf-accent-color, #007bff);
}

.bbf-thumbnail.hover-opacity:hover {
    opacity: 0.7;
}

.bbf-thumbnail.hover-none:hover img {
    transform: none;
}

/* Thumbnail Aktiver Zustand (konfigurierbar via thumb_active_style) */
.bbf-thumbnail.active.active-border {
    border-color: var(--bbf-accent-color, #007bff);
    box-shadow: 0 0 0 1px var(--bbf-accent-color, #007bff);
}

.bbf-thumbnail.active.active-opacity {
    opacity: 0.6;
}

.bbf-thumbnail.active.active-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Fallback: Standard-Hover wenn keine Klasse gesetzt */
.bbf-thumbnail:hover img {
    transform: scale(1.02);
}

/* Performance: contain layout on thumbnail container */
.bbf-thumbnails-inner {
    contain: content;
}

.bbf-thumbnail.active {
    border-color: var(--bbf-accent-color, #007bff);
    box-shadow: 0 0 0 1px var(--bbf-accent-color, #007bff);
}

.bbf-thumbnail:focus {
    outline: none;
}

.bbf-thumbnail:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    z-index: 11;
}


/* Play-Icon auf Video-Thumbnails (Inline-SVG) */
.bbf-thumbnail .bbf-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--bbf-accent-color, #007bff);
    color: #fff;
    pointer-events: none;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
}
.bbf-thumbnail .bbf-play-icon svg { width: 16px; height: 16px; margin-left: 2px; }
.bbf-thumbnail .bbf-video-placeholder svg { color: #999; }
.bbf-nav-arrow svg { width: 16px; height: 16px; }

/* Inline-Video-Bühne + Consent-Overlay (video-handler.js) */
.bbf-main-video-stage { position: relative; }
.bbf-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.bbf-video-frame .bbf-video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Consent-Overlay (bbf-consent.js renderOverlay): eine Optik für Inline-Bühne (.bbf-video-consent)
   und Lightbox (.bbf-lb__consent, Lage/Akzent in bbf-lightbox.css). Akzent über --bbf-consent-accent. */
.bbf-consent {
    --bbf-consent-accent: var(--bbf-accent-color, #007bff);
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
    background: linear-gradient(160deg, #141a2c, #080b14);
    color: #fff;
}
.bbf-video-consent { min-height: 260px; }
.bbf-consent__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.bbf-consent__icon svg { width: 22px; height: 22px; }
.bbf-consent__title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.bbf-consent__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.bbf-consent__actions { display: flex; justify-content: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bbf-consent__btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.bbf-consent__btn.bbf-consent__accept { background: var(--bbf-consent-accent); border-color: transparent; }
.bbf-consent__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bbf-consent__hint { display: block; max-width: 52ch; margin: 6px auto 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .55); }
.bbf-thumbnail .video-consent-overlay .consent-icon svg { width: 18px; height: 18px; color: #fff; }

/* Drift Zoom Container — Inline-Modus (über dem Bild) */
.bbf-zoom-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

.bbf-zoom-pane .drift-zoom-pane {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bbf-zoom-pane .drift-zoom-pane.drift-open {
    opacity: 1;
}

.drift-zoom-pane {
    background: #fff;
    border: none;
    box-shadow: none;
}

.drift-zoom-pane.drift-inline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    z-index: 1000;
}

/* Responsiveness */
@media (max-width: 768px) {
    .bbf-gallery-container {
        flex-direction: column !important;
    }

    .bbf-thumbnails-container {
        flex-direction: row !important;
        width: 100% !important;
    }

    .bbf-thumbnails-inner {
        flex-direction: row !important;
    }

    .pos-left .bbf-thumbnails-wrapper,
    .pos-right .bbf-thumbnails-wrapper {
        max-width: calc(
            var(--bbf-thumbnail-width, 100px) * var(--bbf-thumb-count-xs, 4)
            + var(--bbf-thumbnail-gap-effective, 10px) * (var(--bbf-thumb-count-xs, 4) - 1)
        );
        max-height: none;
    }

    .bbf-nav-arrow {
        width: auto !important;
        padding: 0 10px !important;
    }
}

/* WCAG 2.5.5 — Touch-Targets >= 44x44 auf Pointer:coarse (Touch-Geraete).
   Auf Desktop bleiben die kompakten 30x30 fuer Maus-Bedienung. */
@media (pointer: coarse) {
    .bbf-nav-arrow,
    .bbf-thumbnail,
    .bbf-share-product-btn,
    .bbf-share-close,
    .bbf-share-copy-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* CLS prevention: reserve space for main slider before images load */
.bbf-main-slider {
    aspect-ratio: 1 / 1;
    contain: layout style;
}

/* Nur-Video-Artikel (keine Bilder): Bühne statt leerem Slider, 16:9 reserviert */
.bbf-video-only .bbf-main-slider,
.bbf-main-slider:empty {
    display: none;
}
.bbf-video-only .bbf-main-image-wrapper {
    cursor: default;
}
.bbf-video-only .bbf-main-video-stage {
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}
.bbf-video-only .bbf-main-video-stage > .bbf-video-consent {
    position: absolute;
    inset: 0;
    min-height: 0;
}
.bbf-video-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bbf-video-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .75;
}
.bbf-video-poster__play {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--bbf-accent-color, #db2e87);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .6);
    transition: transform 160ms ease;
}
.bbf-video-poster__play svg { width: 30px; height: 30px; margin-left: 3px; }
.bbf-video-poster__play:hover { transform: scale(1.06); }
.bbf-video-poster__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Avoid rendering off-screen thumbnails */
.bbf-thumbnail:nth-child(n+7) {
    content-visibility: auto;
    contain-intrinsic-size: var(--bbf-thumbnail-size, 80px);
}

/* CSS classes for elements that had inline styles */
.bbf-product-actions {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 5;
}

/* Teilen in der Aktionsleiste: uebernimmt die Optik der Template-Knoepfe (badge-circle), Icon als Inline-SVG */
.bbf-product-actions .bbf-share-product-btn--action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
}
.bbf-product-actions .bbf-share-product-btn--action svg {
    width: 1em;
    height: 1em;
    font-size: 16px;
}

.bbf-video-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Accessibility: Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .bbf-thumbnails-inner,
    .bbf-thumbnail,
    .bbf-main-slider,
    .bbf-main-slide,
    .bbf-nav-arrow,
    .bbf-play-icon,
    .bbf-zoom-pane,
    .bbf-video-poster__play {
        transition: none !important;
        animation: none !important;
    }
    .bbf-main-slider { scroll-behavior: auto; }
    .bbf-video-poster__play:hover { transform: none !important; }

    .bbf-thumbnail:hover img {
        transform: none !important;
    }
}

/* Print styles: show only first image, hide interactive elements */
@media print {
    .bbf-nav-arrow,
    .bbf-share-product-wrapper,
    .bbf-play-icon,
    .bbf-product-actions,
    .bbf-zoom-pane,
    .bbf-thumbnails-container {
        display: none !important;
    }

    .bbf-main-slider {
        overflow: visible;
    }

    .bbf-main-slide:not(:first-child) {
        display: none;
    }

    .bbf-gallery-container {
        display: block;
    }
}

/* Placeholder Mode */
.bbf-placeholder-mode .bbf-main-image-wrapper {
    cursor: default;
}

.bbf-placeholder-mode .bbf-placeholder-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.bbf-placeholder-image {
    max-width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* ── Accessibility ── */

.bbf-gallery-container *:focus-visible {
    outline: 2px solid var(--bbf-accent-color, #0891b2);
    outline-offset: 2px;
}

.bbf-nav-arrow:focus-visible,
.bbf-thumbnail:focus-visible {
    outline: 2px solid var(--bbf-accent-color, #0891b2);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .bbf-gallery-container *,
    .bbf-gallery-container *::before,
    .bbf-gallery-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Drift Zoom Overflow Protection ── */

.drift-zoom-pane {
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
}

.drift-zoom-pane img {
    max-width: none;
}

/* ──────────────────────────────────────────────────────────────────
   v2.1.2 Fixes
   ────────────────────────────────────────────────────────────────── */

/* Fix 2 — Hauptbild proportional einpassen.
   Vorher: width:100%; height:auto auf .bbf-main-image-wrapper img führte bei
   Hochformat-Bildern dazu, dass die Bildhöhe > Slide-Höhe (1:1 aspect-ratio)
   wurde und der overflow:hidden des Wrappers das Bild unten abschnitt.
   Jetzt: Bild füllt den Slide (100% x 100%) und der Inhalt wird via
   object-fit:contain proportional eingepasst — kein Cropping mehr. */
.bbf-main-image-wrapper img,
.bbf-main-slide a img,
.bbf-main-slide picture img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Placeholder-Image soll weiterhin width:100% / height:auto behalten —
   sie hat inline-styles, hier aber explizit absichern. */
.bbf-placeholder-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Fix 1 — Bei 0/1 Bild Swipe, Drag und Scroll-Snap deaktivieren.
   data-bbf-image-count wird seit v2.1.0 vom image.tpl gesetzt; touch-action
   sperrt horizontalen Wisch (vertikales Page-Scroll bleibt erlaubt). */
.bbf-gallery-container[data-bbf-image-count="0"] .bbf-main-slider,
.bbf-gallery-container[data-bbf-image-count="1"] .bbf-main-slider {
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: none;
    touch-action: pan-y;
    cursor: zoom-in;
}

/* Pfeile/Nav defensiv ausblenden (JS erledigt das schon, hier als Doppelung
   für Render-Phase vor JS-Init — verhindert Layout-Flash). */
.bbf-gallery-container[data-bbf-image-count="0"] .bbf-thumbnails-container,
.bbf-gallery-container[data-bbf-image-count="1"] .bbf-thumbnails-container,
.bbf-gallery-container[data-bbf-image-count="0"] .bbf-nav-arrow,
.bbf-gallery-container[data-bbf-image-count="1"] .bbf-nav-arrow {
    display: none !important;
}

/* Fix 3 — Zoom-Pane und Bounding-Box mit scharfen Ecken.
   Vendor drift-basic.min.css setzt border-radius:75px auf .drift-inline;
   wir killen Radius defensiv auf allen drift-Elementen (auch side-Modus,
   falls Theme/Bootstrap einen Radius vererbt). */
.bbf-zoom-pane,
.drift-zoom-pane,
.drift-zoom-pane.drift-inline,
.drift-zoom-pane img,
.drift-bounding-box {
    border-radius: 0 !important;
}

/* ── Variations-Vorschau (NOVA: Hover ueber Variationswerte) ─────────────
   Modus per Einstellung (variation_preview): overlay = ueber dem Hauptbild (Plugin),
   native = JTL/Theme-Standard unveraendert, off = ausgeblendet.
   Selektoren tragen die ID, weil Themes die Vorschau mit `#image_wrapper … !important`
   ausblenden – nur hoehere Spezifitaet setzt sich dagegen durch. */
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: var(--bbf-image-border-width, 1px) solid var(--bbf-image-border-color, #e3e9f7);
    border-radius: var(--bbf-image-radius, 12px);
    background: #fff;
    box-shadow: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 6 !important;
    flex-direction: column;
    overflow: hidden;
}
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview.show {
    display: flex !important;
    opacity: 1 !important;
}
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview:before,
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview:after { display: none; }
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview picture,
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
#image_wrapper.bbf-gallery-container.bbf-vp-overlay .bbf-main-image-wrapper .variation-image-preview .variation-image-preview-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 10px;
    font-size: 13px;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid var(--bbf-image-border-color, #e3e9f7);
}
#image_wrapper.bbf-gallery-container.bbf-vp-off .variation-image-preview { display: none !important; }

/* ===================================
   Video-Thumbnails und Consent-Markierung (seitensichtbar, aus video.css)
   =================================== */

.bbf-thumbnail.is-video {
    position: relative;
}





.bbf-thumbnail.consent-required {
    position: relative;
    opacity: 0.6;
}

.video-consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: inherit;
}

.video-consent-overlay .consent-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.video-consent-overlay .consent-text {
    color: #fff;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
}

@media (prefers-contrast: high) {
    .video-consent-overlay {
        background: rgba(0, 0, 0, 0.95);
        border: 2px solid #fff;
    }
}


.bbf-thumbnail.is-video:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .video-consent-overlay {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   Teilen-Knopf auf der Seite (seitensichtbar, aus share.css)
   =================================== */




.bbf-share-product-wrapper {
    position: absolute;
    z-index: 5;
}

.bbf-share-product-wrapper.pos-top-left {
    top: 10px;
    left: 10px;
}

.bbf-share-product-wrapper.pos-top-left span.d-none.d-md-inline-block.ml-1 {
    display: none !important;
}

.bbf-share-product-wrapper.pos-top-left button.bbf-share-product-btn {
    right: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 21px;
}

.bbf-share-product-wrapper.pos-top-left button.bbf-share-product-btn svg {
    width: 22px;
    height: 22px;
}

.bbf-share-product-wrapper.pos-top-right {
    top: 10px;
    right: 10px;
}

.bbf-share-product-wrapper.pos-bottom-left {
    bottom: 10px;
    left: 10px;
}

.bbf-share-product-wrapper.pos-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* Modul wird nachgeladen (Lightbox/Teilen): kurzer Fortschritts-Cursor bis das Skript da ist */
.bbf-gallery-container.bbf-module-loading,
.bbf-gallery-container.bbf-module-loading a,
.bbf-gallery-container.bbf-module-loading button { cursor: progress; }

/* KI-generierte Bilder: Kennzeichnung (Sprachvariable ai_label), Schalter ai_label im Backend */
.bbf-main-slide { position: relative; }
.bbf-ai-badge {
    position: absolute; left: 10px; bottom: 10px; z-index: 3;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(15, 18, 30, .78); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em;
    pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bbf-thumbnail .bbf-ai-badge--thumb { left: 4px; bottom: 4px; padding: 1px 5px; font-size: 9px; border-radius: 6px; }

/* ── Kennzeichnung & Wasserzeichen (3.7.0) ──────────────────────────────
   Reines Overlay ueber dem Bild (nie klickbar, nicht markierbar, fuer Screenreader unsichtbar);
   die Bilddatei selbst bleibt unveraendert – kein Kopierschutz, nur Kennzeichnung.
   Groesse: Bild = Prozent der Bildbreite (--bbf-wm-size), Text = Stufe relativ zur Containerbreite. */
.bbf-main-slide, .bbf-thumbnail { container-type: inline-size; }
.bbf-wm {
    position: absolute; z-index: 3;
    pointer-events: none; -webkit-user-select: none; user-select: none;
    opacity: calc(var(--bbf-wm-opacity, 60) / 100);
    max-width: 72%;
}
.bbf-wm--tl { top: 4%; left: 4%; }
.bbf-wm--tr { top: 4%; right: 4%; }
.bbf-wm--bl { bottom: 4%; left: 4%; }
.bbf-wm--br { bottom: 4%; right: 4%; }
.bbf-wm--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.bbf-wm--text {
    color: #fff; font-weight: 700; line-height: 1.15; letter-spacing: .04em;
    font-size: calc(var(--bbf-wm-size, 18) * 1px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbf-wm--text.bbf-wm--center { white-space: normal; text-align: center; }
@supports (font-size: 1cqw) {
    .bbf-wm--text { font-size: max(7px, calc(var(--bbf-wm-size, 18) * 0.2cqw)); }
}
.bbf-wm--image {
    width: calc(var(--bbf-wm-size, 18) * 1%); height: auto; max-height: 72%; object-fit: contain;
}
.bbf-thumbnail .bbf-wm--thumb { max-width: 80%; }
.bbf-thumbnail .bbf-wm--text.bbf-wm--thumb { text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
/* Spezifischer als .bbf-thumbnail img (width/height 100 %, Hover-Transform) */
.bbf-thumbnail .bbf-wm--image.bbf-wm--thumb { width: calc(var(--bbf-wm-size, 18) * 1%); height: auto; max-height: 72%; padding: 0; transition: none; }
.bbf-thumbnail:hover .bbf-wm--image.bbf-wm--thumb { transform: none; }
.bbf-thumbnail:hover .bbf-wm--image.bbf-wm--thumb.bbf-wm--center { transform: translate(-50%, -50%); }

/* Badges (Copyright, Zusatz-Label) – gleiche Optik wie .bbf-ai-badge */
.bbf-labels {
    position: absolute; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px;
    max-width: calc(100% - 20px);
    pointer-events: none; -webkit-user-select: none; user-select: none;
}
.bbf-labels--tl { top: 10px; left: 10px; }
.bbf-labels--tr { top: 10px; right: 10px; justify-content: flex-end; }
.bbf-labels--bl { bottom: 10px; left: 10px; }
.bbf-labels--br { bottom: 10px; right: 10px; justify-content: flex-end; }
/* KI-Badge sitzt unten links: Badges dort eine Zeile hoeher setzen */
.bbf-main-slide.is-ai .bbf-labels--bl { bottom: 38px; }
.bbf-label-badge {
    display: inline-block; max-width: 100%;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(15, 18, 30, .78); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}