.rexa-ignite-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.rexa-ignite-host > .rexa-ignite-background-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	contain: layout paint;
}

.rexa-ignite-host > .rexa-ignite-background-layer .rexa-ignite-background-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	border: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	background: transparent;
	opacity: 0;
	transition: opacity 180ms linear;
}

.rexa-ignite-host > .rexa-ignite-background-layer.rexa-ignite-player-loaded .rexa-ignite-background-frame {
	opacity: 1;
}

.rexa-ignite-host > .rexa-ignite-background-layer .rexa-ignite-background-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.rexa-ignite-host > .elementor-container,
.rexa-ignite-host > .e-con-inner,
.rexa-ignite-host > .elementor-widget-wrap,
.rexa-ignite-host > .elementor-element:not(.rexa-ignite-background-layer) {
	z-index: 1;
}

.rexa-ignite-host > .elementor-container,
.rexa-ignite-host > .e-con-inner,
.rexa-ignite-host > .elementor-widget-wrap {
	position: relative;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.rexa-ignite-host > .rexa-ignite-background-layer .rexa-ignite-background-frame {
		transition: none;
	}
}

/* Auf Smartphones verschwindet der komplette Video-Hero. Dadurch bleiben weder
   schwarzer Hintergrund noch Hero-Text oder ein leerer Hoehenblock zurueck. */
@media (max-width: 767px) {
	.rexa-ignite-host.rexa-ignite-mobile-hero-hidden {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
	}

	/* Diese Klasse sitzt nun am echten Navigations-Container, nicht mehr am
	   ausgeblendeten Video-Hero. Sie steht auch fuer eigenes CSS zur Verfuegung. */
	.rexa-mobile-scroll-target {
		--rexa-mobile-scroll-state: 1;
	}
}