/**
 * Rhenus Widgets — ScrollSnap Section (Crossfade-Variante v2.0.0)
 *
 * Design-Konzept: Text-Spalte scrollt im Normal-Flow. Bild-Spalte hat einen
 * `position: sticky`-Frame in dem alle Bilder absolut gestapelt liegen.
 * Beim Scrollen aktiviert JavaScript via `.is-active`-Klasse das Bild, dessen
 * zugehöriges Text-Panel der Viewport-Mitte am nächsten ist. Crossfade via
 * CSS `opacity transition`.
 *
 * Vorteile gegenüber v1.x (Counter-Translation + GSAP-Pin):
 * - Browser-native sticky + opacity, kein JS-getriebenes Layout
 * - Kein GSAP/ScrollTrigger nötig
 * - Resize trivial robust (Browser-Layout reflowt automatisch)
 * - Multi-Instance trivial
 * - Mobile/Reduced-Motion einfach handhabbar
 * - Section-Höhe ergibt sich aus Text-Höhen (kein 5×100vh-Multiplier)
 *
 * Voraussetzung: Parent-Container müssen sticky-kompatibel sein
 * (overflow:visible bis zum scroll-container, kein transform als Containing-Block).
 */

.rh-scroll {
	--rh-text:         #333333;
	--rh-text-soft:    #6B6B6B;
	--rh-accent:       #FFCC01;
	--rh-border-light: #EEEEEE;
	--rh-bg:           #FFFFFF;
	--rh-bg-soft:      #FAFAFA;
	--rh-eyebrow:      #B5B5B5;
	--rh-accent-panel: #F0F0F0;
	--rh-font-head:    "Frutiger", "Lato", "Open Sans", system-ui, sans-serif;
	--rh-font-body:    "Open Sans", system-ui, sans-serif;
	--rh-radius-pill:  999px;
	--rh-fade-duration: 300ms;
	position: relative;
	background: var(--rh-bg, #FFFFFF);
}

.rh-scroll *,
.rh-scroll *::before,
.rh-scroll *::after {
	box-sizing: border-box;
}

/* ===== Grid: 2 Spalten ===== */

.rh-scroll__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

/* ===== Text-Spalte (Normal-Flow, Panels stapeln) ===== */

.rh-scroll__text-col {
	position: relative;
}

.rh-scroll .rh-panel {
	min-height: calc(100vh - var(--rh-pin-offset, 0px));
	min-height: calc(100svh - var(--rh-pin-offset, 0px));
	padding: clamp(40px, 6vw, 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background: var(--rh-bg, #FFFFFF);
	/* v2.2.0: Snap-Target. Greift nur wenn html scroll-snap-type aktiv hat
	   (siehe JS — data-rh-snap auf der Section setzt --rh-snap-type auf html). */
	scroll-snap-align: start;
	scroll-snap-stop: var(--rh-snap-stop, normal);
	scroll-margin-top: var(--rh-pin-offset, 0px);
}

/* Scroll-Snap-Aktivierung: html-CSS-Variable wird vom JS gesetzt, wenn das
   Widget den Switcher aktiv hat. --rh-snap-type ist standardmäßig "none",
   also kein Snap. JS setzt "y proximity" oder "y mandatory". */
html {
	scroll-snap-type: var(--rh-snap-type, none);
}

/* Akzent-Panel via Repeater-Switcher */
.rh-scroll .rh-panel.is-accent-bg {
	background: var(--rh-accent-panel, #F0F0F0);
}

/* Eyebrow */
.rh-scroll .rh-panel .eyebrow {
	font-family: var(--rh-font-body, "Open Sans", sans-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 15px;
	color: var(--rh-eyebrow, #B5B5B5);
	text-transform: uppercase;
	letter-spacing: normal;
	margin: 0 0 24px;
	padding: 0 8px 4px;
	display: inline-block;
	position: relative;
}
.rh-scroll .rh-panel .eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 4px;
	width: 2px;
	background: var(--rh-accent, #FFCC01);
}

/* Headline */
.rh-scroll .rh-panel h1,
.rh-scroll .rh-panel h2,
.rh-scroll .rh-panel h3,
.rh-scroll .rh-panel h4,
.rh-scroll .rh-panel h5,
.rh-scroll .rh-panel h6 {
	font-family: var(--rh-font-head, "Frutiger", "Lato", "Open Sans", sans-serif);
	font-size: clamp(48px, 7vw, 90px);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: normal;
	color: var(--rh-text, #333333);
	margin: 0 0 28px;
	max-width: 950px;
}

/* Body — v3.2.0: WYSIWYG-Wrapper `.rh-body` enthält evtl. mehrere <p> + Inline-Formatierungen.
   Basis-Styles auf .rh-body (Wrapper) + Detail-Styles auf den enthaltenen <p>-Tags. */
.rh-scroll .rh-panel .rh-body {
	font-family: var(--rh-font-body, "Open Sans", sans-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: var(--rh-text, #333333);
	max-width: 950px;
	margin: 0 0 36px;
}
.rh-scroll .rh-panel .rh-body p {
	margin: 0 0 1em;
}
.rh-scroll .rh-panel .rh-body p:last-child {
	margin-bottom: 0;
}
.rh-scroll .rh-panel .rh-body strong,
.rh-scroll .rh-panel .rh-body b {
	font-weight: 700;
}
.rh-scroll .rh-panel .rh-body em,
.rh-scroll .rh-panel .rh-body i {
	font-style: italic;
}
.rh-scroll .rh-panel .rh-body a {
	color: inherit;
	text-decoration: underline;
}
.rh-scroll .rh-panel .rh-body ul,
.rh-scroll .rh-panel .rh-body ol {
	margin: 0 0 1em 1.25em;
	padding: 0;
}
.rh-scroll .rh-panel .rh-body li {
	margin: 0 0 .25em;
}

/* CTA-Buttons */
.rh-scroll .rh-panel .cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-family: var(--rh-font-body, "Open Sans", sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 34px;
	color: #1A1A1A;
	background: linear-gradient(96deg, #FFE868 0%, var(--rh-accent, #FFCC01) 100%);
	border: 0;
	padding: 4px 6px 4px 22px;
	border-radius: var(--rh-radius-pill, 999px);
	transition: transform .25s, box-shadow .25s;
}
.rh-scroll .rh-panel .cta .cta-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--rh-radius-pill, 999px);
	background: #FFFFFF;
	color: #1A1A1A;
	font-size: 15px;
	line-height: 1;
	transition: transform .25s;
}
.rh-scroll .rh-panel .cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(255, 204, 1, .35);
}
.rh-scroll .rh-panel .cta:hover .cta-circle {
	transform: translateX(3px);
}
.rh-scroll .rh-panel .cta--secondary {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 3px 5px 3px 21px;
}
.rh-scroll .rh-panel .cta--secondary .cta-circle {
	background: rgba(0, 0, 0, 0.10);
}
.rh-scroll .rh-panel .cta--secondary:hover {
	box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}
.rh-scroll .rh-panel .cta-row {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Mobile-Img wird nur mobile gezeigt */
.rh-scroll .rh-panel .mobile-img {
	display: none;
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	margin-bottom: 24px;
	border-radius: 12px;
}

/* ===== Bild-Spalte (sticky frame mit gestapelten Bildern) ===== */

.rh-scroll__img-col {
	position: relative;
	background: var(--rh-bg-soft, #FAFAFA);
}

.rh-scroll__sticky {
	position: sticky;
	top: var(--rh-pin-offset, 0px);
	height: calc(100vh - var(--rh-pin-offset, 0px));
	height: calc(100svh - var(--rh-pin-offset, 0px));
	overflow: hidden;
	background: var(--rh-bg-soft, #FAFAFA);
}

/* v3.0.0: Scroll-Linked Track-Mechanik.
   Bilder sind nicht mehr absolut gestapelt — stattdessen liegen sie sequenziell
   untereinander in einem Track. Der Track wird per JS auf jedem Scroll-Frame
   via translate3d verschoben → Bilder "fahren" durch den Sticky-Frame, alte
   werden vom neuen verdrängt, synchron mit dem Scroll.
   Keine CSS-Transitions — die Bewegung IST der Scroll. */
.rh-scroll__sticky .rh-img-track,
.rh-scroll__sticky .rh-scroll__img-track {
	position: relative;
	width: 100%;
	/* Höhe ergibt sich automatisch aus den N children (jeweils 100% Sticky-Frame-Höhe). */
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.rh-scroll__sticky .rh-img {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--rh-pin-offset, 0px));
	height: calc(100svh - var(--rh-pin-offset, 0px));
}

.rh-scroll__sticky .rh-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ===== Progress-Indicator (im sticky frame) ===== */

.rh-scroll__progress {
	position: absolute;
	top: clamp(24px, 4vw, 40px);
	left: clamp(24px, 4vw, 40px);
	z-index: 5;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 13px;
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 1.5px;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	mix-blend-mode: difference;
}
.rh-scroll__progress .current {
	font-weight: 700;
	min-width: 22px;
	display: inline-block;
}
.rh-scroll__progress .divider {
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}
.rh-scroll__progress .total {
	opacity: .8;
}

/* ===== Mobile + Reduced-Motion ===== */

@media (max-width: 767px) {
	/* v5.0.4: ScrollSnap-Engine mobil KOMPLETT aus — kompaktes, statisches Stapeln,
	   alles innerhalb 100vw. (JS überspringt mobil zusätzlich die Snap-/Track-Logik.) */
	.rh-scroll { overflow-x: clip; }              /* Safety: nichts ragt über 100vw */
	html { scroll-snap-type: none !important; }   /* kein Snapping auf Mobile */

	.rh-scroll__grid {
		grid-template-columns: 1fr;
	}
	.rh-scroll__img-col {
		display: none;
	}
	/* Sticky-Frame neutralisieren, falls doch je sichtbar */
	.rh-scroll__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}
	.rh-scroll .rh-panel {
		/* !important schlägt die per-Seite generierte panel_min_height_vh-Regel
		   (.elementor-XXXX … { min-height: calc(100svh …) }), die die Panels sonst
		   bildschirmhoch macht → leere Riesen-Panels + „Überlappungen". */
		min-height: 0 !important;
		padding: 40px 24px;
		scroll-snap-align: none !important;
		scroll-snap-stop: normal !important;
	}
	.rh-scroll .rh-panel .mobile-img {
		display: block;
	}
	.rh-scroll__progress {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rh-scroll__sticky .rh-img {
		transition: none;
	}
}

/* ===== Editor-Preview =====
   v3.0.2: Selector über .is-editor-mode auf der Section selbst, weil
   body.elementor-editor-active im Preview-iframe NICHT gesetzt ist.
   JS detected Editor-Mode robust (mehrere Methoden) und setzt die Klasse.
   body-selector bleibt als Fallback. */

.rh-scroll.is-editor-mode .rh-scroll__grid,
body.elementor-editor-active .rh-scroll__grid {
	grid-template-columns: 1fr;
}
.rh-scroll.is-editor-mode .rh-scroll__img-col,
body.elementor-editor-active .rh-scroll__img-col {
	display: none;
}
.rh-scroll.is-editor-mode .rh-panel,
body.elementor-editor-active .rh-scroll .rh-panel {
	min-height: 0;
	padding: 40px 24px;
}
.rh-scroll.is-editor-mode .rh-panel .mobile-img,
body.elementor-editor-active .rh-scroll .rh-panel .mobile-img {
	display: block;
}
.rh-scroll.is-editor-mode .rh-scroll__progress,
body.elementor-editor-active .rh-scroll__progress {
	display: none;
}

/* Track-Translation im Editor neutralisieren (falls JS doch lief). */
.rh-scroll.is-editor-mode .rh-scroll__img-track {
	transform: none !important;
}