/**
 * Rhenus Widgets — VideoScroll (v5.0.0 — Bild-Sequenz/Canvas)
 *
 * Scroll-gekoppelte Frame-Sequenz auf <canvas> mit Text-Overlays.
 * Pin-Mechanik via CSS `position: sticky` (kein JS-fixed-Toggle).
 *
 * Architektur:
 *  - .rh-vs            = Wrapper, scoped Tokens
 *  - .rh-vs-stage      = "tall" Section, Höhe = pin_height_vh × svh (Scroll-Bereich)
 *  - .rh-vs-pin        = sticky-Container, Höhe = 100svh − Header-Offset
 *  - .rh-vs-canvas     = gezeichnete Frame-Sequenz (z-index 1)
 *  - .rh-vs-poster     = Fallback-Bild (z-index 2, fadet aus wenn .is-ready)
 *  - .rh-vs-overlays   = Text-Overlays (z-index 4)
 *
 * Ruhe-Zustände (kein Pin, Poster statisch, Overlays gestapelt):
 *  - .rh-vs.is-static          → JS-Flag: reduced-motion, Datensparmodus,
 *                                Mobile poster_only, oder kein Frame-Set
 *  - .rh-vs.is-reduced-motion  → prefers-reduced-motion
 *  - .rh-vs.is-editor-mode     → Elementor-Editor
 *  + @media-Guards (reduced-motion / reduced-data / mobile poster_only) gegen FOUC
 */

/* =====================================================
   ELEMENTOR-CONTAINER RESET
   Sticky-Pin braucht Vorfahren ohne overflow/contain/transform.
   ===================================================== */
.elementor-widget-rhenus_videoscroll,
.elementor-widget-rhenus_videoscroll > .elementor-widget-container {
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	contain: none !important;
}

/* =====================================================
   WRAPPER-SCOPED TOKENS
   ===================================================== */
.rh-vs {
	--rh-vs-bg: #000000;
	--rh-vs-header-offset: 100px;
	/* Effektiver Pin-Offset: JS-detektierter Header gewinnt, sonst Control-Wert. */
	--rh-vs-off: var(--rh-vs-pin-offset, var(--rh-vs-header-offset, 0px));
	--rh-vs-overlay-text-light: #ffffff;
	--rh-vs-overlay-text-dark: #1a1a1a;
	--rh-vs-overlay-backdrop-light: rgba(0, 0, 0, 0.45);
	--rh-vs-overlay-backdrop-dark: rgba(255, 255, 255, 0.85);

	/* Heading-Size-Tokens (konsistent mit Storyboard) */
	--rh-vs-head-hero:   clamp(40px, 6vw, 90px);
	--rh-vs-head-xxl:    clamp(40px, 6vw, 78px);
	--rh-vs-head-xl:     clamp(36px, 4.8vw, 69px);
	--rh-vs-head-l:      clamp(25px, 3.8vw, 54px);
	--rh-vs-head-m-plus: clamp(22px, 2.8vw, 38px);
	--rh-vs-head-m:      clamp(22px, 2.8vw, 28px);
	--rh-vs-head-s:      clamp(16px, 1.8vw, 22px);
	--rh-vs-head-subline: clamp(11px, 1.6vw, 14px);
	--rh-vs-head-line-height: 1.1em;

	position: relative;
	width: 100%;
	background: var(--rh-vs-bg);
	display: block;
}
.rh-vs *,
.rh-vs *::before,
.rh-vs *::after { box-sizing: border-box; }

/* =====================================================
   HEADING-KLASSEN — pro Overlay, setzen span-font-size
   ===================================================== */
.rh-vs .head-s span        { font-size: var(--rh-vs-head-s);        line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-m span        { font-size: var(--rh-vs-head-m);        line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-m-plus span   { font-size: var(--rh-vs-head-m-plus);   line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-l span        { font-size: var(--rh-vs-head-l);        line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-xl span       { font-size: var(--rh-vs-head-xl);       line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-xxl span      { font-size: var(--rh-vs-head-xxl);      line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-hero span     { font-size: var(--rh-vs-head-hero);     line-height: var(--rh-vs-head-line-height); }
.rh-vs .head-subline span  { font-size: var(--rh-vs-head-subline); text-transform: uppercase; letter-spacing: 0.08em; }

.rh-vs .text-balance { text-wrap: balance; }

/* =====================================================
   STAGE — full-bleed breakout, Höhe = pin_height_vh × (s)vh
   ===================================================== */
.rh-vs-stage {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	height: calc(var(--rh-vs-pin-vh, 300) * 1vh);
	background: var(--rh-vs-bg);
}
/* svh ist address-bar-stabil → bevorzugt, wo unterstützt. */
@supports (height: 1svh) {
	.rh-vs-stage { height: calc(var(--rh-vs-pin-vh, 300) * 1svh); }
}

/* =====================================================
   PIN — position: sticky (browser-nativ), Höhe = Viewport − Offset
   ===================================================== */
/* Vollbild-Pin (top:0): das Video füllt den ganzen Viewport, der transparente
   Header schwebt darüber. KEIN Header-Offset — sonst entsteht oben ein schwarzer
   Streifen (Stage-Hintergrund). */
.rh-vs-pin {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: var(--rh-vs-bg);
}
@supports (height: 1svh) {
	.rh-vs-pin { height: 100svh; }
}

/* =====================================================
   CANVAS + POSTER
   ===================================================== */
.rh-vs-canvas,
.rh-vs-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	user-select: none;
}
.rh-vs-canvas {
	z-index: 1;
	/* Canvas zeichnet selbst cover-fit (JS); object-fit nicht nötig. */
}
.rh-vs-poster {
	z-index: 2;
	object-fit: cover;
	opacity: 1;
	transition: opacity 400ms ease;
}
.rh-vs.is-ready .rh-vs-poster { opacity: 0; }

/* =====================================================
   SCRIM — globaler halbtransparenter schwarzer Layer übers
   ganze Video (z-index 3: über Canvas/Poster, unter Overlays).
   Opacity wird per JS = stärkste Overlay-Opacity gesetzt →
   fadet exakt SYNCHRON mit dem Text ein/aus (bessere Lesbarkeit).
   ===================================================== */
.rh-vs-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(0, 0, 0, var(--rh-vs-scrim-alpha, 0.5));
	opacity: 0;
	pointer-events: none;
}

/* =====================================================
   OVERLAYS (absolut über Canvas; Opacity per JS)
   ===================================================== */
.rh-vs-overlays {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	display: block;
}
.rh-vs-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(92%, 1050px);
	padding: clamp(24px, 4vh, 56px) clamp(24px, 4vw, 48px);
	opacity: 0; /* JS überschreibt */
	pointer-events: none;
}
.rh-vs-overlay--align-left {
	left: clamp(24px, 6vw, 96px);
	transform: translateY(-50%);
	text-align: left;
}
.rh-vs-overlay--align-right {
	left: auto;
	right: clamp(24px, 6vw, 96px);
	transform: translateY(-50%);
	text-align: right;
}
.rh-vs-overlay--align-center { text-align: center; }

/* Auf den Live-Seiten erzwingt eine ALTE globale Container-Custom-CSS-Regel
   `.rh-vs-overlay { width: 100% !important }` (Alt-Design Vollbreite). Mit höherer
   Spezifität (.rh-vs .rh-vs-overlay) + !important überstimmen → Titel max. 1050px.
   Im Static-/Editor-Modus greift weiterhin die jeweilige max-width/!important-Regel. */
.rh-vs .rh-vs-overlay { width: min(92%, 1050px) !important; }

/* Kein per-Overlay-Box-Hintergrund mehr — die Lesbarkeit kommt vom globalen
   .rh-vs-scrim. Nur noch die Textfarbe je Modus. */
.rh-vs-overlay--light { color: var(--rh-vs-overlay-text-light); }
.rh-vs-overlay--dark  { color: var(--rh-vs-overlay-text-dark); }

.rh-vs-overlay__heading {
	font-family: 'Frutiger', 'Frutiger LT Std', -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif;
	font-size: var(--rh-vs-head-l);
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: inherit;
}
.rh-vs-overlay__heading span { font-size: inherit; line-height: inherit; }
.rh-vs-overlay__heading:last-child { margin-bottom: 0; }

.rh-vs-overlay__body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
}
.rh-vs-overlay__body p { margin: 0 0 12px; }
.rh-vs-overlay__body p:last-child { margin-bottom: 0; }
.rh-vs-overlay__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mobile: Overlays im SCROLL-Modus bleiben zentriert, nur etwas kompakter. */
@media (max-width: 960px) {
	.rh-vs:not(.is-static) .rh-vs-overlay {
		padding: clamp(16px, 3.5vh, 32px) clamp(16px, 4vw, 28px);
	}
}

/* =====================================================
   RUHE-ZUSTÄNDE (is-static / is-reduced-motion / is-editor-mode)
   Kein Pin: Stage un-breakout + auto-Höhe, Pin statisch mit aspect-ratio,
   Canvas aus, Poster sichtbar, Overlays gestapelt.
   ===================================================== */
.rh-vs.is-static .rh-vs-stage,
.rh-vs.is-reduced-motion .rh-vs-stage,
.rh-vs.is-editor-mode .rh-vs-stage {
	width: 100%;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	height: auto !important;
}
.rh-vs.is-static .rh-vs-pin,
.rh-vs.is-reduced-motion .rh-vs-pin,
.rh-vs.is-editor-mode .rh-vs-pin {
	position: static;
	top: auto;
	height: auto;
	aspect-ratio: 16 / 9;
}
.rh-vs.is-static .rh-vs-canvas,
.rh-vs.is-reduced-motion .rh-vs-canvas,
.rh-vs.is-editor-mode .rh-vs-canvas {
	display: none;
}
.rh-vs.is-static .rh-vs-poster,
.rh-vs.is-reduced-motion .rh-vs-poster,
.rh-vs.is-editor-mode .rh-vs-poster {
	opacity: 1 !important;
	transition: none;
}
.rh-vs.is-static .rh-vs-overlays,
.rh-vs.is-reduced-motion .rh-vs-overlays {
	position: relative;
	inset: auto;
	padding: 32px 24px;
	background: var(--rh-vs-bg);
	color: var(--rh-vs-overlay-text-light);
	pointer-events: auto;
}
.rh-vs.is-static .rh-vs-overlay,
.rh-vs.is-reduced-motion .rh-vs-overlay {
	position: static;
	transform: none;
	opacity: 1 !important;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 24px;
	padding: 0;
	pointer-events: auto;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
}
.rh-vs.is-static .rh-vs-overlay:last-child,
.rh-vs.is-reduced-motion .rh-vs-overlay:last-child { margin-bottom: 0; }

/* Scrim nur im Scrub-Modus (Overlays über dem Video). In Ruhe-Zuständen stapeln
   die Overlays auf solidem Hintergrund → kein Scrim. */
.rh-vs.is-static .rh-vs-scrim,
.rh-vs.is-reduced-motion .rh-vs-scrim,
.rh-vs.is-editor-mode .rh-vs-scrim { display: none; }

/* Reduced-Motion: Section komplett ausblenden (Modus "hide"). */
.rh-vs.is-reduced-motion.is-rm-hide,
.rh-vs.is-reduced-motion[data-reduced-motion-mode="hide"] { display: none; }

/* =====================================================
   EDITOR-MODE — statisches Layout + Dashed-Border-Overlays
   ===================================================== */
.rh-vs.is-editor-mode .rh-vs-overlays {
	position: static;
	inset: auto;
	padding: 24px;
	background: rgba(255, 204, 1, 0.05);
	border-top: 1px solid rgba(255, 204, 1, 0.3);
}
.rh-vs.is-editor-mode .rh-vs-overlay {
	position: static;
	transform: none;
	opacity: 1 !important;
	width: 100% !important;
	max-width: none;
	margin: 0 0 16px;
	padding: 16px;
	pointer-events: auto;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 0;
}
.rh-vs.is-editor-mode .rh-vs-overlay:last-child { margin-bottom: 0; }

/* =====================================================
   PRE-JS FOUC-GUARDS (bevor JS die Klassen setzt)
   ===================================================== */
@media (max-width: 960px) {
	.rh-vs[data-mobile-mode="poster_only"] .rh-vs-stage {
		width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0; height: auto !important;
	}
	.rh-vs[data-mobile-mode="poster_only"] .rh-vs-pin {
		position: static; top: auto; height: auto; aspect-ratio: 16 / 9;
	}
	.rh-vs[data-mobile-mode="poster_only"] .rh-vs-canvas { display: none; }
	.rh-vs[data-mobile-mode="poster_only"] .rh-vs-poster { opacity: 1 !important; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rh-vs .rh-vs-stage {
		height: auto !important; width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0;
	}
	.rh-vs .rh-vs-pin { position: static; top: auto; height: auto; aspect-ratio: 16 / 9; }
	.rh-vs .rh-vs-canvas { display: none; }
	.rh-vs .rh-vs-poster { opacity: 1 !important; transition: none !important; }
}

@media (prefers-reduced-data: reduce) {
	.rh-vs .rh-vs-stage {
		height: auto !important; width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0;
	}
	.rh-vs .rh-vs-pin { position: static; top: auto; height: auto; aspect-ratio: 16 / 9; }
	.rh-vs .rh-vs-canvas { display: none; }
	.rh-vs .rh-vs-poster { opacity: 1 !important; transition: none !important; }
}