/* =============================================================
   Scroll Layers für Divi  v1.4
   Sticky Scroll-Stacking Effekt

   Höhen-Strategie:
   .sld-scene bekommt padding-bottom als inline-style (PHP).
   Alle Overlay-Layer bekommen aspect-ratio als inline-style (PHP).
   Keine Abhängigkeit von img-Höhen – Divi-CSS-Resets sind egal.
   ============================================================= */

/* ── Äußerer Wrapper ─────────────────────────────────────────── */
.sld-wrapper {
	position: relative;
	width: 100%;
	/* Höhe wird per JS gesetzt: Szenenhöhe + Summe Scroll-Distanzen */
}

/* ── Sticky-Container ────────────────────────────────────────── */
/*
 * KEIN overflow:hidden hier! Das würde Bilder oben abschneiden,
 * wenn ein Layer eine andere Aspect-Ratio hat als die Szene.
 * Das Clipping übernimmt ausschließlich .sld-scene.
 */
.sld-sticky {
	position: sticky;
	top: 0;
	width: 100%;
}

/* ── Szenen-Box ──────────────────────────────────────────────── */
/*
 * height: 0 + padding-bottom (inline aus PHP) = proportionale Höhe.
 * overflow:hidden clippt hier am unteren Szenenrand – Layer die per
 * translateY(100%) unterhalb der Szene starten, werden korrekt
 * ausgeblendet. Nichts wird oben abgeschnitten.
 */
.sld-scene {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	/* padding-bottom wird per PHP als inline-style gesetzt */
}

/* ── Hintergrundbild-Layer ───────────────────────────────────── */
.sld-layer--bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
}

/* ── Overlay-Layer ───────────────────────────────────────────── */
/*
 * bottom: 0 als Anker: der Layer klebt am unteren Rand der Szene.
 * aspect-ratio (inline aus PHP) gibt dem Layer seine eigene Höhe
 * basierend auf dem Seitenverhältnis SEINES Bildes.
 *
 * translateY(100%) = verschoben um die eigene Höhe nach unten
 * → Layer startet komplett unterhalb der Szene (overflow:hidden
 *   auf .sld-scene schneidet ihn ab).
 * translateY(0%) = Layer in seiner Endposition.
 *
 * z-index kommt als inline-style aus PHP.
 */
.sld-layer--overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	/* aspect-ratio per inline-style */
	/* z-index per inline-style */
	transform: translateY(100%);
	will-change: transform;
	mix-blend-mode: var(--sld-blend, multiply);
	overflow: hidden;
}

/* ── Bild im Overlay-Layer ───────────────────────────────────── */
/*
 * position:absolute + inset:0 füllt den Layer vollständig.
 * Damit ist das Bild völlig unabhängig von Divis
 * img { height:auto } Reset – kein Höhen-Kollaps mehr.
 */
.sld-layer--overlay img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	pointer-events: none;
	user-select: none;
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sld-layer--overlay {
		transform: translateY(0%) !important;
	}
}