/* ==========================================================================
   LIEPS COMPONENT – HEADER PARALLAX
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   HEADER – ISOLIERTER PARALLAX ALS CLICK-SWITCH-HINTERGRUND
   --------------------------------------------------------------------------
   Nur der äußere .parallax-container ist die harte 100vh-Grenze.
   Keine inneren Parallax-Ebenen werden hier auf 100 % gezwungen oder geclippt.
   Die eigentliche Layer-/Bild-Geometrie liegt in frontend.css.
   ========================================================================== */

/* Bootstrap-Gradient des Headers sichtbar halten. */
section.header .section.bg-gradient,
section.header .section.bs-gradient {
	background-color: transparent !important;
	background-image: var(--bs-gradient) !important;
}

/*
 * Vor der Click-Switch-Initialisierung darf der Parallax-Wrapper nicht
 * durch die allgemeine "nur erstes Kind"-Regel ausgeblendet werden.
 */
section.header
.click-switch:not([data-matrix-switch-initialized="true"])
> .frame:has(> .section.parallax-container) {
	display: block !important;
}

/* Gemeinsamer 100vh-Stack für Textvarianten + Hintergrund. */
section.header .header-center.click-switch:has(> .frame > .section.parallax-container) {
	position: relative;
	isolation: isolate;
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	mix-blend-mode: normal;
}

/*
 * Der von JS markierte Parallax-Frame ist KEIN Click-Switch-Item.
 * Er liegt dauerhaft hinter den eigentlichen Textvarianten.
 */
section.header .header-center.click-switch
> .frame.click-switch__isolated-background,
section.header .header-center.click-switch
> .frame.click-switch__parallax-background:has(> .section.parallax-container) {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	display: block !important;
	width: 100%;
	height: 100vh;
	height: 100svh;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	pointer-events: none !important;
	cursor: default !important;
}

/* Nur die echten Click-Switch-Varianten liegen über dem Parallax. */
section.header .header-center.click-switch
> .frame:not(.click-switch__isolated-background):not(.click-switch__parallax-background) {
	position: relative;
	z-index: 2;
}

/*
 * EINZIGE harte Clip-Grenze:
 * Alles, was sich durch GSAP innerhalb der Parallax-Struktur bewegt,
 * darf bis zu dieser äußeren Grenze frei laufen.
 */
section.header .parallax-container,
.parallax-container {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
	max-height: 100vh;
	max-height: 100svh;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	isolation: isolate;
	background: transparent;
	pointer-events: none;
}

/* TYPO3-Wrapper übernehmen nur die Fläche – KEIN zusätzliches Clipping. */
.parallax-container > .container,
.parallax-container > .container-fluid {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.parallax-container .frame-type-parallax_gallery {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	pointer-events: none !important;
}

/* Hintergrund darf niemals den Click-Switch auslösen. */
section.header .click-switch__parallax-background,
section.header .click-switch__parallax-background *,
section.header .parallax-container,
section.header .parallax-container * {
	pointer-events: none !important;
}

/* Gemeinsames Einblenden erst nach dem Bild-Preload aus frontend.js. */
.parallax-container.is-parallax-container-initialized
.lieps-parallax-gallery__layers {
	opacity: 0;
	visibility: hidden;
}

.parallax-container.is-parallax-container-initialized.is-parallax-background-ready
.lieps-parallax-gallery__layers {
	opacity: 1;
	visibility: visible;
}

.parallax-container.is-parallax-container-initialized.is-parallax-background-ready
.lieps-parallax-gallery__layers .lieps-parallax-gallery__layer
{
	position: absolute;
	inset: 0;
}