/**
 * Rhenus Widgets — Horizontal Storyboard
 *
 * Aus der ursprünglichen Production-Snippet-Variante (Akkordeon → Scroll-Storyboard,
 * Development/rhenus-webcustomizings/project/akkordeon-elementor-snippet.html v0.4.0)
 * als Elementor-Widget portiert. Wrapper-Selektor `.rh-storyboard` (vorher: rhenus-storyboard).
 *
 * Mechanik: JS-basiertes Pinning (kein position:sticky — funktioniert auch wenn ein
 * Elementor-Vorfahre transform/contain/overflow setzt). 4+ Slides horizontal in einem
 * Track, der per scroll-progress translated wird (-progress * (n-1) * 100vw).
 */

/* =====================================================
   ELEMENTOR-CONTAINER RESET
   Sticky/Pin braucht Vorfahren ohne overflow/contain/transform.
   Hier öffnen wir den Widget-Container explizit. KEINE
   .rl-horizontal-Klasse mehr nötig — das Widget bringt
   den Reset selbst mit.
   ===================================================== */
.elementor-widget-rhenus_horizontal_storyboard,
.elementor-widget-rhenus_horizontal_storyboard > .elementor-widget-container {
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	contain: none !important;
}

/* =====================================================
   WRAPPER-SCOPED TOKENS & RESET
   ===================================================== */
.rh-storyboard {
	--c-text: #333333;
	--c-bg: #ffffff;
	--c-bg-grey: rgb(247, 246, 245);
	--c-border: #DBDBDB;
	--c-yellow-1: #FFCC01;
	--c-yellow-2: #FFE868;
	--c-grey-dark: #1A1A1A;
	--rh-sb-radius: 14px;
	--rh-sb-radius-lg: 24px;
	--rh-sb-transition: all .25s ease;

	--rh-sb-mainbody: clamp(13px, 0.8125rem + 0.125vw, 15px);
	--rh-sb-head-hero: clamp(40px, 6vw, 90px);
	--rh-sb-head-xxl: clamp(40px, 6vw, 78px);
	--rh-sb-head-xl: clamp(36px, 4.8vw, 69px);
	--rh-sb-head-l: clamp(25px, 3.8vw, 54px);
	--rh-sb-head-m-plus: clamp(22px, 2.8vw, 38px);
	--rh-sb-head-m: clamp(22px, 2.8vw, 28px);
	--rh-sb-head-s: clamp(16px, 1.8vw, 22px);
	--rh-sb-headsubline: clamp(11px, 1.6vw, 14px);
	--rh-sb-head-line-height: 1em;

	--rh-sb-progress-top: 100px; /* via JS auf section.style.setProperty überschreibbar */

	font-family: 'Frutiger', 'Frutiger LT Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: var(--rh-sb-mainbody);
	color: var(--c-text);
	/* v4.1.3: kein -webkit-font-smoothing override — Browser-Default (subpixel-
	   antialiased) matched die Live-Rhenus-Seite. antialiased macht Schrift in
	   Chrome/Safari auf macOS sichtbar dünner als überall sonst. */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	line-height: 1.5;
	display: block;
	width: 100%;
	/* WICHTIG: kein overflow:hidden — sonst bricht Pin-Mechanik. */
}
.rh-storyboard *,
.rh-storyboard *::before,
.rh-storyboard *::after { box-sizing: border-box; }

.rh-storyboard h1,
.rh-storyboard h2,
.rh-storyboard h3,
.rh-storyboard h4,
.rh-storyboard h5,
.rh-storyboard h6 {
	color: var(--c-text);
	font-family: 'Frutiger', 'Frutiger LT Std', sans-serif;
	font-weight: bold;
	line-height: 1em;
	margin: 0;
}
.rh-storyboard p { margin: 0; }
.rh-storyboard strong { font-weight: bold; }
.rh-storyboard em { font-style: italic; }

/* =====================================================
   HEADING-KLASSEN — wiederverwendbar
   ===================================================== */
.rh-storyboard .head-s span { font-size: var(--rh-sb-head-s); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-m span { font-size: var(--rh-sb-head-m); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-m-plus span { font-size: var(--rh-sb-head-m-plus); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-l span { font-size: var(--rh-sb-head-l); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-xl span { font-size: var(--rh-sb-head-xl); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-xxl span { font-size: var(--rh-sb-head-xxl); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-hero span { font-size: var(--rh-sb-head-hero); line-height: var(--rh-sb-head-line-height); }
.rh-storyboard .head-subline span { font-size: var(--rh-sb-headsubline); text-transform: uppercase; }

.rh-storyboard .text-balance { text-wrap: balance; }
.rh-storyboard .heading-gradient span {
	background-image: linear-gradient(45deg, rgb(83, 83, 83), #202020 50%, rgb(86, 86, 86) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* =====================================================
   STORYBOARD — Full-Bleed-Breakout aus dem Container
   ===================================================== */
.rh-storyboard .storyboard {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	right: 50%;
}

/* JS-basiertes Pinning */
.rh-storyboard .story-pin {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 680px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}
.rh-storyboard .story-pin.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 5;
}
.rh-storyboard .story-pin.is-end {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
}

.rh-storyboard .story-track {
	display: flex;
	height: 100%;
	/* width wird per JS gesetzt (slidesCount × 100vw), default 400vw */
	width: 400vw;
	will-change: transform;
	/* v4.1.0: hartes Snap-Verhalten. JS quantisiert auf integer Slide-Index,
	   CSS animiert den Übergang zwischen Slides per transition — gibt das
	   "Einrasten"-Feel beim Scrollen. */
	transition: transform 380ms cubic-bezier(0.65, 0.05, 0.35, 1);
}
/* prefers-reduced-motion: instant snap (kein smooth-Übergang). */
@media (prefers-reduced-motion: reduce) {
	.rh-storyboard .story-track { transition: none; }
}

.rh-storyboard .story-slide {
	flex: 0 0 100vw;
	height: 100%;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* v5.2.0: Inhalt top-anchored → alle Headlines starten auf gleicher Linie.
	   v4.1.0: padding-top um +60px erhöht (über der Progress-Bar Luft). */
	padding: calc(clamp(60px, 8vh, 100px) + 60px) 0 clamp(60px, 8vh, 100px) 0;
	background: transparent;
}

.rh-storyboard .story-slide-inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 100px);
	padding: 0 clamp(24px, 4vw, 80px);
	align-items: center;
}

.rh-storyboard .story-heading-row {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.5vw, 24px);
	margin-bottom: 28px;
}

.rh-storyboard .story-bignum {
	font-family: 'Frutiger', 'Frutiger LT Std', sans-serif;
	font-weight: bold;
	font-size: var(--rh-sb-head-xxl);
	line-height: 1em;
	color: rgba(51, 51, 51, 0.2);
	letter-spacing: -0.01em;
	flex-shrink: 0;
	pointer-events: none;
	user-select: none;
}

/* TEXT-SPALTE */
.rh-storyboard .story-text {
	position: relative;
	z-index: 1;
	max-width: 640px;
	align-self: start; /* v5.2.0: top-anchored — gleiche Heading-Startlinie */
}
.rh-storyboard .story-text h1,
.rh-storyboard .story-text h2,
.rh-storyboard .story-text h3,
.rh-storyboard .story-text h4,
.rh-storyboard .story-text h5,
.rh-storyboard .story-text h6 {
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-wrap: nowrap;
	margin: 0;
}
/* v4.1.2: Body-Text 1:1 zur Live-Rhenus-Seite (Body-Editor-Style).
   v4.1.4: Farbe + Opacity wandern aufs <p> (gesteuert durch Elementor
   Global-Color "Basis-Text" mit !important + 0.6 Opacity für dezenten Look).
   Widget-eigener `color_text`-Control wurde entfernt — Farbe kommt jetzt
   ausschließlich aus Elementor Site-Settings. */
.rh-storyboard .story-body {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}
.rh-storyboard .story-body p {
	margin: 0 0 20px;
	opacity: 0.6;
	color: var(--e-global-color-basis-text) !important;
}
.rh-storyboard .story-body p:last-child { margin-bottom: 0; }

.rh-storyboard .story-bullets {
	margin-top: 24px;
	display: grid;
	gap: 12px;
	max-width: 600px;
	padding: 0;
}
.rh-storyboard .story-bullets li {
	list-style: none;
	position: relative;
	padding-left: 32px;
	font-size: 15px;
	line-height: 1.55;
}
.rh-storyboard .story-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.670em;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),
		linear-gradient(96deg, #ffe868 0%, #ffcc01 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px, 100%;
}

.rh-storyboard .story-meta {
	margin-top: 28px;
	padding: 18px 22px;
	border-radius: var(--rh-sb-radius);
	background: rgba(255, 204, 1, 0.10);
	border-left: 3px solid var(--c-yellow-1);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.9;
	max-width: 600px;
}
.rh-storyboard .story-meta strong { color: var(--c-grey-dark); }

/* =====================================================
   v5.2.0: DETERMINISTISCHE TEXTHÖHE + FADE-ONLY (Desktop-Pin ≥961px)
   Jede Text-Spalte exakt gleich hoch (height: clamp …) → zusammen mit
   align-items:flex-start am Slide starten ALLE Headlines auf derselben
   Linie und alle Textbereiche haben dieselbe Höhe. Headline-Row fix
   oben, Body-Bereich fester Höhe; zu langer Text fadet unten weich aus.
   KEINE sichtbare Scrollbar (Scroll bleibt per Trackpad/Tastatur möglich).
   Mobile (max-width:960px) + Editor: diese Regeln greifen NICHT → der
   Inhalt fließt natürlich (kein Fade/Scroll, keine fixe Höhe).
   ===================================================== */
@media (min-width: 961px) {
	.rh-storyboard:not(.is-editor-mode) .story-text {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	.rh-storyboard:not(.is-editor-mode) .story-heading-row {
		flex: 0 0 auto; /* fix oben */
	}
	.rh-storyboard:not(.is-editor-mode) .story-text-scroll {
		flex: 0 0 auto;
		height: clamp(220px, 40vh, 380px); /* überall identisch → gleiche Texthöhe */
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior-y: auto; /* am Ende ans Seiten-Scroll weiterreichen */
		/* Edge-aware Fade: --fade-* = 0 → keine Kante; JS-Klassen schalten bei Überlauf/Scroll. */
		--fade-top: 0px;
		--fade-bottom: 0px;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
		/* Fade-only: Scrollbar unsichtbar. */
		scrollbar-width: none;
	}
	.rh-storyboard:not(.is-editor-mode) .story-text-scroll::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}
	.rh-storyboard:not(.is-editor-mode) .story-text-scroll.fade-top { --fade-top: 44px; }
	.rh-storyboard:not(.is-editor-mode) .story-text-scroll.fade-bottom { --fade-bottom: 44px; }
}

/* VISUAL-SPALTE */
.rh-storyboard .story-visual {
	position: relative;
	z-index: 1;
	align-self: end;
	width: 100%;
	height: clamp(360px, 60vh, 580px);
	display: grid;
	place-items: end;
}
.rh-storyboard .story-blueprint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(86%, 460px);
	aspect-ratio: 1;
	pointer-events: none;
	z-index: 1;
}
.rh-storyboard .story-blueprint svg {
	width: 100%;
	height: 100%;
	display: block;
}
.rh-storyboard .story-icon {
	position: relative;
	z-index: 2;
	width: min(58%, 340px);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Font-Icons (Elementor Icons-Control mit FA-Library) → <i class="fas ...">
   Gradient via background-clip: text. Icon-Größe scaled mit der Container-Größe. */
.rh-storyboard .story-icon i {
	font-size: clamp(120px, 22vw, 240px);
	line-height: 1;
	background: linear-gradient(96deg, var(--c-yellow-2, #ffe868) 0%, var(--c-yellow-1, #ffcc01) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* SVG-Upload via Elementor Icons-Manager (rendered as inline <svg> oder <img>).
   Custom-SVG-Code (slide_svg_path) wird ebenfalls inline gerendert.
   Unterschiedliches Coloring je nach SVG-Stil. */
.rh-storyboard .story-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Elementor FA-SVGs (svg.e-font-icon-svg) — fill-based, mit Gold-Gradient FÜLLEN.
   Funktioniert für FA-Solid, FA-Regular, FA-Brands (alle fill-based). */
.rh-storyboard .story-icon svg.e-font-icon-svg,
.rh-storyboard .story-icon svg.e-font-icon-svg path {
	fill: url(#rh-sb-g-gold);
}

/* Custom-SVG-Code (Lucide-Style, stroke-based) — stroke mit Gradient.
   Greift nur in der separaten Wrapper-Klasse, damit FA-SVGs oben nicht
   überschrieben werden. */
.rh-storyboard .story-icon--svg-custom svg {
	fill: none;
	stroke: url(#rh-sb-g-gold);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* SVG-Upload als <img> (wenn Elementor's SVG-Upload nicht inline rendert).
   object-fit damit das Original-Aspect-Ratio erhalten bleibt. */
.rh-storyboard .story-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* TOP PROGRESS BAR */
.rh-storyboard .story-progress {
	position: absolute;
	top: var(--rh-sb-progress-top, 100px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}
.rh-storyboard .story-progress-label {
	font-family: 'Frutiger', 'Frutiger LT Std', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.6);
	white-space: nowrap;
}
.rh-storyboard .story-progress-label .num { color: var(--c-grey-dark); font-weight: 700; }
.rh-storyboard .story-progress-label .sep { opacity: 0.4; margin: 0 4px; }
.rh-storyboard .story-progress-bar {
	width: 280px;
	height: 4px;
	background: rgba(0, 0, 0, 0.10);
	border-radius: 999px;
	overflow: hidden;
}
.rh-storyboard .story-progress-fill {
	height: 100%;
	background: linear-gradient(96deg, #ffe868 0%, #ffcc01 100%);
	border-radius: 999px;
	width: 0%;
	transition: width 100ms linear;
}
.rh-storyboard .story-progress-dots { display: flex; gap: 8px; }
.rh-storyboard .story-progress-dots span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.18);
	transition: all .3s ease;
}
.rh-storyboard .story-progress-dots span.active {
	background: var(--c-yellow-1);
	width: 24px;
}

/* CTA */
.rh-storyboard .story-cta {
	margin-top: 32px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.rh-storyboard .btn-3d {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-image: linear-gradient(96deg, #ffe868 0%, #ffcc01 100%);
	color: var(--c-grey-dark);
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	border: 0;
	border-radius: 999px;
	padding: 12px 20px 12px 24px;
	text-decoration: none;
	transition: var(--rh-sb-transition);
	position: relative;
	cursor: pointer;
}
.rh-storyboard .btn-3d::after {
	content: "";
	width: 32px;
	height: 32px;
	background: #fff;
	border-radius: 999px;
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: var(--rh-sb-transition);
}
.rh-storyboard .btn-3d:hover { transform: scale(0.97); }
.rh-storyboard .btn-3d:hover::after {
	background-color: #1a1a1a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
}
.rh-storyboard .btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	color: var(--c-grey-dark);
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	border-radius: 999px;
	padding: 12px 24px;
	text-decoration: none;
	transition: var(--rh-sb-transition);
}
.rh-storyboard .btn-ghost:hover {
	border-color: var(--c-grey-dark);
	background: rgba(0, 0, 0, 0.04);
}

/* MOBILE FALLBACK + Editor-Preview
   Horizontaler Scroll wird komplett aufgelöst, Slides stacken vertikal mit auto-height.
   v4.1.5: Track-Transition ausgeschaltet im Stack-Mode (sonst Flacker-Glitch beim Resize). */
@media (max-width: 960px) {
	.rh-storyboard .storyboard { height: auto; }
	.rh-storyboard .story-pin { position: static; height: auto; min-height: auto; }
	.rh-storyboard .story-track {
		flex-direction: column;
		width: 100% !important; /* v5.2.0: schlägt evtl. verzögertes JS-Inline-400vw → kein H-Overflow */
		height: auto;
		transform: none !important;
		transition: none !important;
	}
	.rh-storyboard .story-slide {
		flex: 0 0 auto;
		width: 100%;
		height: auto; /* v5.2.0 KRITISCH: Base height:100% zurücksetzen, sonst Slide auf volle Track-Höhe gestreckt (~3947px Leerraum) */
		padding: clamp(32px, 6vh, 52px) 0;
		min-height: auto;
	}
	.rh-storyboard .story-slide-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 0 24px;
	}
	.rh-storyboard .story-progress { display: none; }
	.rh-storyboard .story-heading-row { margin-bottom: 16px; }
	.rh-storyboard .story-bignum { font-size: clamp(24px, 6.5vw, 38px); }
	.rh-storyboard .story-visual { height: clamp(150px, 40vw, 230px); }
	.rh-storyboard .story-body p { margin: 0 0 14px; }
	/* v5.2.0: große Heading-Klassen mobil deckeln (nur Größe, nicht Familie/Farbe). */
	/* head-* sind globale Rhenus-Utility-Klassen mit font-size:!important → hier mit
	   höherer Spezifität + !important mobil verkleinern (sonst läuft die Headline raus). */
	.rh-storyboard .story-heading-row .head-hero span,
	.rh-storyboard .story-heading-row .head-xxl span,
	.rh-storyboard .story-heading-row .head-xl span,
	.rh-storyboard .story-heading-row .head-l span { font-size: clamp(24px, 6.5vw, 38px) !important; }
	.rh-storyboard .story-text h1,
	.rh-storyboard .story-text h2,
	.rh-storyboard .story-text h3,
	.rh-storyboard .story-text h4,
	.rh-storyboard .story-text h5,
	.rh-storyboard .story-text h6 {
		white-space: normal;
		text-wrap: balance;
		min-width: 0;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* v4.1.0: Bei kleinen Browser-Höhen (< 700px) Progress-Indicator ausblenden,
   sonst klebt er zu dicht am Slide-Content und stört die Lesbarkeit. */
@media (max-height: 700px) {
	.rh-storyboard .story-progress { display: none; }
}

/* v4.1.5: Schmale Browser-Höhe im Pin-Mode (Desktop ≥ 961px breit, < 700px hoch).
   Layout-Anpassung damit Inhalte nicht abgeschnitten werden:
   - Text-Spalte breiter (1.6fr), Visual-Spalte schmaler (1fr)
   - Visual proportional kleiner → frisst nicht den vertikalen Platz
   - Icon kleiner, Blueprint kleiner, BigNum kleiner
   - Slide-Padding reduziert (Progress-Bar ist eh ausgeblendet via Regel oben)
   - Headlines dürfen umbrechen (kein nowrap) und werden kleiner geclamped */
@media (max-height: 700px) and (min-width: 961px) {
	.rh-storyboard .story-slide {
		padding: clamp(40px, 6vh, 70px) 0;
	}
	.rh-storyboard .story-slide-inner {
		grid-template-columns: 1.6fr 1fr;
		gap: clamp(28px, 3vw, 60px);
		padding: 0 clamp(20px, 3vw, 60px);
	}
	.rh-storyboard .story-text {
		max-width: none;
		align-self: start; /* v5.2.0: konsistent top-anchored */
	}
	.rh-storyboard .story-text h1,
	.rh-storyboard .story-text h2,
	.rh-storyboard .story-text h3,
	.rh-storyboard .story-text h4,
	.rh-storyboard .story-text h5,
	.rh-storyboard .story-text h6 {
		white-space: normal;
		text-wrap: balance;
	}
	.rh-storyboard .head-xxl span,
	.rh-storyboard .head-xl span,
	.rh-storyboard .head-l span {
		font-size: clamp(24px, 3.4vw, 44px);
	}
	.rh-storyboard .story-bignum {
		font-size: clamp(32px, 4vw, 56px);
	}
	.rh-storyboard .story-visual {
		height: clamp(220px, 55vh, 380px);
	}
	.rh-storyboard .story-icon {
		width: min(70%, 240px);
	}
	.rh-storyboard .story-blueprint {
		width: min(80%, 320px);
	}
	.rh-storyboard .story-icon i {
		font-size: clamp(80px, 18vh, 160px);
	}
	/* Body-Text kann auch eine Tick kleiner für mehr Atemraum */
	.rh-storyboard .story-body {
		font-size: 18px;
		line-height: 26px;
	}
	.rh-storyboard .story-body p { margin: 0 0 14px; }
}

/* Editor-Mode: kein Pinning, lineares Stapeln (analog Mobile) */
.rh-storyboard.is-editor-mode .storyboard { height: auto; }
.rh-storyboard.is-editor-mode .story-pin {
	position: static;
	height: auto;
	min-height: auto;
}
.rh-storyboard.is-editor-mode .story-track {
	flex-direction: column;
	width: 100%;
	height: auto;
	transform: none !important;
	transition: none !important;
}
.rh-storyboard.is-editor-mode .story-slide {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	padding: 60px 0;
	min-height: auto;
}
.rh-storyboard.is-editor-mode .story-slide-inner {
	grid-template-columns: 1fr;
	padding: 0 24px;
}
.rh-storyboard.is-editor-mode .story-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
	.rh-storyboard *,
	.rh-storyboard *::before,
	.rh-storyboard *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}