/* Effektgruppe: images/scroll-sequence */
/* 1. Der Hauptwrapper wird zum Grid */
.sticky_scroll_image {
    display: grid !important;
    position: relative !important;
    width: 100% !important;
    align-items: stretch !important; /* Zwingt die Elemente, die volle Höhe einzunehmen */
}

/* 2. Beide Elemente belegen exakt dieselbe Grid-Zelle */
.sticky_scroll_image > * {
    grid-area: 1 / 1 / -1 / -1;
}

/* 3. Das Originalbild gibt die natürliche Höhe vor */
.sticky_scroll_image figure {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
}

.sticky_scroll_image img.kb-img {
    opacity: 0 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: none;
}

/* 4. Der Canvas-Container füllt die Grid-Zelle jetzt absolut fehlerfrei aus */
.sticky_scroll_image .scroll_canvas_inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sticky_scroll_image canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}