.ifm-scroll-story {
	--ifm-story-bg: #fff;
	--ifm-story-text: #1d2327;
	--ifm-story-accent: #2271b1;
	--ifm-story-max-width: 1200px;
	--ifm-story-gap: 64px;
	--ifm-story-sticky-top: 0px;
	--ifm-story-duration: 450ms;
	--ifm-story-image-ratio: 4 / 3;
	--ifm-story-image-fit: cover;
	--ifm-story-step-count: 4;
	position: relative;
	box-sizing: border-box;
	background: var(--ifm-story-bg);
	color: var(--ifm-story-text);
}

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

.ifm-scroll-story__stage {
	width: min(100% - 40px, var(--ifm-story-max-width));
	margin-inline: auto;
	padding-block: clamp(48px, 7vw, 96px);
}

.ifm-scroll-story__eyebrow {
	margin: 0 0 28px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ifm-story-accent);
}

.ifm-scroll-story__slides {
	display: grid;
	gap: 56px;
}

.ifm-scroll-story__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--ifm-story-gap);
}

.ifm-scroll-story__content,
.ifm-scroll-story__media {
	min-width: 0;
}

.ifm-scroll-story__counter {
	margin: 0 0 16px;
	font-size: 1.85rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	color: var(--ifm-story-accent);
}

.ifm-scroll-story__content h2 {
	margin: 0 0 20px;
	font-size: clamp(2rem, 4vw, 4.25rem);
	line-height: 1.05;
	color: inherit;
}

.ifm-scroll-story__text {
	font-size: clamp(1rem, 1.25vw, 1.2rem);
	line-height: 1.7;
}

.ifm-scroll-story__text > :first-child {
	margin-top: 0;
}

.ifm-scroll-story__text > :last-child {
	margin-bottom: 0;
}

.ifm-scroll-story__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ifm-story-image-ratio);
	overflow: hidden;
	border-radius: 2px;
	background: transparent;
}

.ifm-scroll-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ifm-story-image-fit);
}

.ifm-scroll-story__placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--ifm-story-accent) 18%, transparent) 49% 51%, transparent 52%),
		color-mix(in srgb, var(--ifm-story-accent) 8%, var(--ifm-story-bg));
}

.ifm-scroll-story__progress {
	display: none;
}

/* Die JavaScript-Erweiterung wird erst oberhalb des Backend-Breakpoints aktiviert. */
.ifm-scroll-story.is-enhanced {
	height: calc(var(--ifm-story-step-count) * 100vh);
	min-height: 900px;
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__stage {
	position: sticky;
	top: var(--ifm-story-sticky-top);
	height: calc(100vh - var(--ifm-story-sticky-top));
	min-height: 540px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__eyebrow {
	position: relative;
	z-index: 3;
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__slides {
	position: relative;
	display: block;
	width: 100%;
	min-height: min(70vh, 720px);
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(24px);
	transition:
		opacity var(--ifm-story-duration) ease,
		transform var(--ifm-story-duration) ease,
		visibility 0s linear var(--ifm-story-duration);
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__media img,
.ifm-scroll-story.is-enhanced .ifm-scroll-story__placeholder {
	transform: scale(1.025);
	transition: transform calc(var(--ifm-story-duration) * 1.6) ease;
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__slide.is-active .ifm-scroll-story__media img,
.ifm-scroll-story.is-enhanced .ifm-scroll-story__slide.is-active .ifm-scroll-story__placeholder {
	transform: scale(1);
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__progress {
	position: absolute;
	right: 0;
	bottom: clamp(18px, 3vw, 36px);
	left: 0;
	display: block;
	height: 5px;
	background: color-mix(in srgb, var(--ifm-story-text) 14%, transparent);
}

.ifm-scroll-story.is-enhanced .ifm-scroll-story__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--ifm-story-accent);
	transition: transform 100ms linear;
}


.ifm-scroll-story.is-mobile-layout .ifm-scroll-story__stage {
	width: min(100% - 28px, var(--ifm-story-max-width));
}

.ifm-scroll-story.is-mobile-layout .ifm-scroll-story__slides {
	gap: 72px;
}

.ifm-scroll-story.is-mobile-layout .ifm-scroll-story__slide {
	grid-template-columns: 1fr;
}

.ifm-scroll-story.is-mobile-layout .ifm-scroll-story__content h2 {
	font-size: clamp(1.8rem, 9vw, 3rem);
}

@media (max-width: 900px) {
	.ifm-scroll-story__slide {
		gap: clamp(28px, 5vw, 48px);
	}
}

@media (max-width: 767px) {
	.ifm-scroll-story__stage {
		width: min(100% - 28px, var(--ifm-story-max-width));
	}

	.ifm-scroll-story__slides {
		gap: 72px;
	}

	.ifm-scroll-story__slide {
		grid-template-columns: 1fr;
	}

	.ifm-scroll-story__content h2 {
		font-size: clamp(1.8rem, 9vw, 3rem);
	}
}

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