.ag01-komp-breakout {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: none;
}

.ag01-komp-breakout.alignfull {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Ohio/full-bleed parent: fill it — never undershoot with a JS pixel width */
.has-global-padding :where(.is-layout-constrained) > .ag01-komp-breakout.is-full-bleed.is-parent-full-bleed.alignfull,
.has-global-padding .entry-content > .ag01-komp-breakout.is-full-bleed.is-parent-full-bleed.alignfull,
.ag01-komp-breakout.is-full-bleed.is-parent-full-bleed,
.ag01-komp-breakout.is-full-bleed.is-parent-full-bleed.alignfull {
	--ag01-viewport-w: 100%;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Constrained parent: true viewport breakout (100vw, not clientWidth px) */
.has-global-padding :where(.is-layout-constrained) > .ag01-komp-breakout.is-full-bleed.alignfull:not(.is-parent-full-bleed),
.has-global-padding .entry-content > .ag01-komp-breakout.is-full-bleed.alignfull:not(.is-parent-full-bleed),
.ag01-komp-breakout.is-full-bleed:not(.is-parent-full-bleed) {
	--ag01-viewport-w: 100vw;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.has-global-padding :where(.is-layout-constrained) > .ag01-komp-breakout.alignfull:not(.is-full-bleed),
.has-global-padding .entry-content > .ag01-komp-breakout.alignfull:not(.is-full-bleed) {
	margin-left: calc(50% - 50vw + (var(--wp--style--root--padding-left, 0px))) !important;
	margin-right: calc(50% - 50vw + (var(--wp--style--root--padding-right, 0px))) !important;
}

:where(.is-layout-constrained) > .ag01-komp-breakout,
.entry-content > .ag01-komp-breakout,
.wp-block-post-content > .ag01-komp-breakout {
	max-width: none !important;
}

.ag01-komp {
	--ag01-komp-ref-w: 1920;
	--ag01-komp-ref-h: 1080;
	--ag01-komp-layout-w: min(100vw, 1920px);
	--ag01-komp-layout-offset: max(0px, calc((100vw - var(--ag01-komp-layout-w)) / 2));
	--ag01-komp-viewport-h: min(100vh, 1080px);
	--ag01-komp-mask-aspect-w: 232.452;
	--ag01-komp-mask-aspect-h: 369.665;
	/* Typography from Home.mp4 @ 1920×1080 */
	--ag01-komp-headline-size: clamp(2.1rem, calc(120 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 120px);
	--ag01-komp-title-size: clamp(1.25rem, calc(32 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 32px);
	--ag01-komp-list-size: clamp(0.875rem, calc(16 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 16px);
	--ag01-komp-body-size: clamp(0.9375rem, calc(18 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 18px);
	/* Same leading as Ohio body copy / Elementor paragraphs („Was uns bewegt“) */
	--ag01-komp-body-line-height: var(--clb-text-line-height, 1.6);
	--ag01-komp-link-size: clamp(1rem, calc(17.1 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 17.1px);
	--ag01-komp-link-line: clamp(1.5rem, calc(27.4 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w)), 27.4px);
	--ag01-komp-stage-h: calc(950 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-pad-x: calc(var(--ag01-komp-layout-offset) + 182 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	/* Tighter under the white rule (client: weniger Leerraum) */
	--ag01-komp-intro-top: calc(118 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-intro-h: calc(110 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-intro-left-w: calc(260 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-gap-intro-cols: calc(218 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-gap-title-category: calc(42 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-gap-category-items: calc(14 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-gap-intro-text-panels: calc(24 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-intro-body-w: calc(450 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-intro-link-w: calc(220 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-gap-intro-showcase: calc(120 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	/* Larger logo, cropped past the left viewport edge (Home.mp4) */
	--ag01-komp-graphic-h: calc(920 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-graphic-w: calc(var(--ag01-komp-graphic-h) * var(--ag01-komp-mask-aspect-w) / var(--ag01-komp-mask-aspect-h));
	/* Extra bleed so the mark sits flush on the screen edge (MacBook / 4K) */
	--ag01-komp-graphic-bleed-y: calc(400 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-graphic-bleed-x: calc(56 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	/* Negative = past left edge so the mark “sticks” / clips to the screen */
	--ag01-komp-showcase-left: calc(-48 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-gap-graphic-headline: calc(132 / var(--ag01-komp-ref-w) * var(--ag01-komp-layout-w));
	--ag01-komp-headline-bottom: calc(80 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-color-text: #ffffff;
	--ag01-komp-color-muted: #b3b3b3;
	--ag01-komp-color-bg: #1a1a1a;
	--ag01-komp-color-rule: rgba(255, 255, 255, 0.62);
	--ag01-komp-font-family: "Ubuntu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ag01-komp-rule-top: calc(34 / var(--ag01-komp-ref-h) * var(--ag01-komp-viewport-h));
	--ag01-komp-rule-draw-ms: 1300ms;
	--ag01-komp-ease-out: cubic-bezier(0.05, 0.9, 0.08, 1);

	box-sizing: border-box;
	position: relative;
	width: 100%;
	background: var(--ag01-komp-color-bg, #fff);
	color: var(--ag01-komp-color-text);
	font-family: var(--ag01-komp-font-family);
}

.ag01-komp *,
.ag01-komp *::before,
.ag01-komp *::after {
	box-sizing: border-box;
}

.ag01-komp--static .ag01-komp__stage {
	position: relative;
	width: 100%;
	min-height: var(--ag01-komp-stage-h);
	height: var(--ag01-komp-stage-h);
}

.ag01-komp__intro {
	position: absolute;
	top: var(--ag01-komp-intro-top);
	left: var(--ag01-komp-pad-x);
	right: var(--ag01-komp-pad-x);
	height: var(--ag01-komp-intro-h);
	z-index: 3;
}

.ag01-komp__rule {
	position: absolute;
	top: var(--ag01-komp-rule-top);
	left: var(--ag01-komp-pad-x);
	right: var(--ag01-komp-pad-x);
	z-index: 5;
	height: 1px;
	background: var(--ag01-komp-color-rule);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	will-change: transform;
	transition: transform var(--ag01-komp-rule-draw-ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

.ag01-komp__rule.is-drawn {
	transform: scaleX(1);
}

.ag01-komp--animated .ag01-komp__intro {
	pointer-events: none;
}

/* 2) Title + first category: from below, slow fade */
.ag01-komp--animated .ag01-komp__intro-left {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity var(--ag01-komp-title-reveal-ms, 700ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1)),
		transform var(--ag01-komp-title-reveal-ms, 700ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

/* 3) Body copy: from below, fade */
.ag01-komp--animated .ag01-komp__intro-body {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity var(--ag01-komp-body-reveal-ms, 650ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1)),
		transform var(--ag01-komp-body-reveal-ms, 650ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

/* 4c) Link/button: from below, but short travel */
.ag01-komp--animated .ag01-komp__intro-link-wrap {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	z-index: 4;
	transition:
		opacity var(--ag01-komp-link-reveal-ms, 600ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1)),
		transform var(--ag01-komp-link-reveal-ms, 600ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

/* 4a/b) Logo diagonal from bottom-left, headline diagonal from bottom-right */
.ag01-komp--animated .ag01-komp__showcase {
	pointer-events: none;
}

.ag01-komp--animated .ag01-komp__graphic {
	opacity: 0;
	transform: translate3d(-36px, 64px, 0);
	transition:
		opacity var(--ag01-komp-showcase-reveal-ms, 800ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1)),
		transform var(--ag01-komp-showcase-reveal-ms, 800ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

.ag01-komp--animated .ag01-komp__headline {
	opacity: 0;
	transform: translate3d(36px, 64px, 0);
	transition:
		opacity var(--ag01-komp-showcase-reveal-ms, 800ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1)),
		transform var(--ag01-komp-showcase-reveal-ms, 800ms) var(--ag01-komp-ease-out, cubic-bezier(0.05, 0.9, 0.08, 1));
}

.ag01-komp--animated.is-title-visible .ag01-komp__intro-left {
	opacity: 1;
	transform: none;
}

.ag01-komp--animated.is-body-visible .ag01-komp__intro-body {
	opacity: 1;
	transform: none;
}

.ag01-komp--animated.is-link-visible .ag01-komp__intro-link-wrap {
	opacity: 1;
	transform: none;
}

.ag01-komp--animated.is-title-visible .ag01-komp__intro,
.ag01-komp--animated.is-body-visible .ag01-komp__intro,
.ag01-komp--animated.is-link-visible .ag01-komp__intro {
	pointer-events: auto;
}

.ag01-komp--animated.is-showcase-visible .ag01-komp__showcase {
	pointer-events: auto;
}

.ag01-komp--animated.is-showcase-visible .ag01-komp__graphic,
.ag01-komp--animated.is-showcase-visible .ag01-komp__headline {
	opacity: 1;
	transform: none;
}

.ag01-komp--animated:not(.is-link-visible) .ag01-komp__intro-link-wrap {
	pointer-events: none;
}

.ag01-komp__intro-left {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--ag01-komp-intro-left-w);
}

.ag01-komp__section-title {
	margin: 0;
	font-size: var(--ag01-komp-title-size);
	font-weight: 700;
	line-height: 1.15;
}

.ag01-komp__category-list {
	margin: var(--ag01-komp-gap-title-category) 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 4;
	pointer-events: auto;
}

.ag01-komp__category-link {
	color: inherit;
	text-decoration: none;
}

.ag01-komp__category-link:hover,
.ag01-komp__category-link:focus-visible {
	color: var(--ag01-komp-color-text);
	text-decoration: underline;
}

.ag01-komp__category-item {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	font-size: var(--ag01-komp-list-size);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ag01-komp-color-muted);
	transition: opacity 1.2s cubic-bezier(0.05, 0.9, 0.08, 1),
		max-height 1.2s cubic-bezier(0.05, 0.9, 0.08, 1),
		margin 1.2s cubic-bezier(0.05, 0.9, 0.08, 1);
}

.ag01-komp__category-item.is-visible {
	max-height: 3.5rem;
	margin-top: var(--ag01-komp-gap-category-items);
	opacity: 1;
}

.ag01-komp__category-item:first-child.is-visible {
	margin-top: 0;
}

.ag01-komp:not(.ag01-komp--animated) .ag01-komp__category-item:not(:first-child) {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
}

.ag01-komp:not(.ag01-komp--animated) .ag01-komp__slide-track {
	transform: none;
}

.ag01-komp__intro-body {
	position: absolute;
	top: 0;
	left: calc(var(--ag01-komp-intro-left-w) + var(--ag01-komp-gap-intro-cols));
	width: var(--ag01-komp-intro-body-w);
}

/* Grid stacks all panels in one cell → height = tallest text (no clip) */
.ag01-komp__intro-text-viewport {
	position: relative;
	display: grid;
	width: 100%;
	overflow: visible;
}

.ag01-komp__intro-text-panel {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
}

.ag01-komp__intro-text-panel.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ag01-komp__intro-text {
	margin: 0;
	font-size: var(--ag01-komp-body-size);
	font-weight: 400;
	line-height: var(--ag01-komp-body-line-height);
	color: var(--ag01-komp-color-text);
	text-align: left;
}

.ag01-komp__slide-track {
	display: flex;
	width: calc(var(--komp-slide-count, 3) * 100%);
	will-change: transform;
	transform: translate3d(
		calc(var(--komp-slide-p, 0) * -100% / var(--komp-slide-count, 3)),
		0,
		0
	);
}

.ag01-komp__slide-panel {
	flex: 0 0 calc(100% / var(--komp-slide-count, 3));
	min-width: 0;
}

.ag01-komp__intro-link-wrap {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--ag01-komp-intro-link-w);
	display: flex;
	justify-content: flex-end;
}

.ag01-komp__intro-link-wrap .ohio-widget-holder.-right {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.ag01-komp__intro-link-wrap .ohio-widget.button.-default,
.ag01-komp__intro-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
	color: #ffffff !important;
	font-family: "Ubuntu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: var(--ag01-komp-link-size) !important;
	font-weight: 800 !important;
	line-height: var(--ag01-komp-link-line, 27.4px) !important;
	letter-spacing: 0 !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.ag01-komp__intro-link-wrap .ohio-widget.button.-default:hover,
.ag01-komp__intro-link-wrap .ohio-widget.button.-default:focus-visible,
.ag01-komp__intro-link:hover,
.ag01-komp__intro-link:focus-visible {
	background: transparent !important;
	color: #ffffff !important;
	text-decoration: none;
	opacity: 0.82;
	box-shadow: none !important;
}

/* Ohio template: diagonal arrow (scale 0.9, rotate -45deg) */
.ag01-komp__intro-link-wrap._icon_button .ion-md-arrow-forward::before,
.ag01-komp__intro-link-wrap .ion-md-arrow-forward::before {
	display: inline-block;
	transform: scale(0.9) rotate(-45deg) !important;
}

.ag01-komp__showcase {
	position: absolute;
	top: auto;
	bottom: calc(-1 * var(--ag01-komp-graphic-bleed-y));
	left: var(--ag01-komp-showcase-left);
	right: var(--ag01-komp-pad-x);
	height: var(--ag01-komp-graphic-h);
	overflow: visible;
}

.ag01-komp__graphic {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: var(--ag01-komp-graphic-w);
	height: var(--ag01-komp-graphic-h);
	line-height: 0;
	pointer-events: none;
}

.ag01-logo-mask-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10 !important;
	pointer-events: none;
	overflow: hidden;
	display: block;
	-webkit-mask-image: url("../images/logo-mask.svg");
	mask-image: url("../images/logo-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.ag01-logo-mask-shadow__shape {
	pointer-events: none;
}

.ag01-logo-mask-shadow__shape path {
	fill: #000000;
}

.ag01-komp__graphic-media {
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0;
	/* Desktop: contour may extend ~1px; mobile overrides to hidden (iOS sticky) */
	overflow: visible;
}

.ag01-komp .ag01-logo-mask-contour {
	color: var(--ag01-komp-color-bg, #1a1a1a);
}

/* iPhone: never let contour/texture paint past the sticky stage into the next section */
.ag01-komp--mobile .ag01-komp__graphic-media,
.ag01-komp--mobile .ag01-komp__graphic,
.ag01-komp--mobile .ag01-komp__showcase {
	overflow: hidden;
}

.ag01-komp__graphic-media.is-texture-pending,
.ag01-komp--animated .ag01-komp__graphic-media:not(.is-texture-ready) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

.ag01-komp__graphic-media.is-texture-ready {
	opacity: 1 !important;
	visibility: visible !important;
	transition: opacity 0.22s ease-out, visibility 0s linear;
}

@media (prefers-reduced-motion: reduce) {
	.ag01-komp__graphic-media.is-texture-ready {
		transition: none;
	}
}

.ag01-komp__graphic-texture-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	-webkit-mask-image: url("../images/logo-mask.svg");
	mask-image: url("../images/logo-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ag01-komp__texture-track {
	position: relative;
	z-index: 1;
	display: flex;
	width: calc(var(--komp-slide-count, 3) * 100%);
	height: 100%;
	min-height: 100%;
	transform: translate3d(
		calc(var(--komp-texture-p, var(--komp-slide-p, 0)) * -100% / var(--komp-slide-count, 3)),
		0,
		0
	);
}

.ag01-komp__texture-slide {
	position: relative;
	flex: 0 0 calc(100% / var(--komp-slide-count, 3));
	width: calc(100% / var(--komp-slide-count, 3));
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	align-self: stretch;
}

/* Poster-Fallback hinter Videos (erster Frame), bis Playback greift */
.ag01-komp__texture-slide.has-video-poster,
.ag01-komp__graphic-texture-wrap.has-video-poster {
	background-image: var(--ag01-video-poster);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ag01-komp img.ag01-komp__texture,
.ag01-komp video.ag01-komp__texture {
	position: absolute;
	left: calc(-10% - 60px);
	top: calc(-10% - 60px);
	z-index: 1;
	display: block;
	width: calc(120% + 120px) !important;
	height: calc(120% + 120px) !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	transform: none;
}

.ag01-komp__graphic-fallback {
	width: 100%;
	height: 100%;
	background: #e8e8e8;
}

.ag01-komp__headline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--ag01-komp-graphic-bleed-y);
	z-index: 20;
	height: calc(100% - var(--ag01-komp-graphic-bleed-y));
	overflow: visible;
	pointer-events: none;
}

.ag01-komp__headline-viewport {
	overflow: visible;
	width: 100%;
	height: 100%;
}

.ag01-komp__headline-track {
	width: calc(var(--komp-slide-count, 3) * 130%);
	height: 100%;
	transform: translate3d(
		calc(var(--komp-headline-p, var(--komp-slide-p, 0)) * -100% / var(--komp-slide-count, 3)),
		0,
		0
	);
	will-change: transform;
}

.ag01-komp__headline-set {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	/* Keep Fließtext column alignment; showcase may sit at/past the left edge */
	padding-left: calc(
		var(--ag01-komp-pad-x) +
		var(--ag01-komp-intro-left-w) +
		var(--ag01-komp-gap-intro-cols) -
		var(--ag01-komp-showcase-left)
	);
	padding-right: 0;
	padding-bottom: var(--ag01-komp-headline-bottom);
	white-space: nowrap;
}

.ag01-komp__headline-line {
	margin: 0;
	max-width: none;
	font-size: var(--ag01-komp-headline-size);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	overflow: visible;
}

.ag01-komp__headline-line + .ag01-komp__headline-line {
	margin-top: 0.02em;
}

@media (min-width: 1900px) {
	.ag01-komp {
		--ag01-komp-layout-offset: calc((100vw - 1920px) / 2);
		--ag01-komp-viewport-h: 1080px;
		--ag01-komp-stage-h: 950px;
		--ag01-komp-pad-x: calc(var(--ag01-komp-layout-offset) + 182px);
		--ag01-komp-intro-top: 118px;
		--ag01-komp-intro-h: 110px;
		--ag01-komp-rule-top: 34px;
		--ag01-komp-gap-intro-showcase: 120px;
		--ag01-komp-intro-left-w: 260px;
		--ag01-komp-gap-intro-cols: 218px;
		--ag01-komp-gap-title-category: 42px;
		--ag01-komp-gap-category-items: 14px;
		--ag01-komp-gap-intro-text-panels: 24px;
		--ag01-komp-intro-body-w: 450px;
		--ag01-komp-intro-link-w: 220px;
		--ag01-komp-graphic-h: 920px;
		--ag01-komp-graphic-bleed-y: 400px;
		--ag01-komp-graphic-bleed-x: 56px;
		--ag01-komp-showcase-left: -48px;
		--ag01-komp-gap-graphic-headline: 132px;
		--ag01-komp-headline-bottom: 80px;
		--ag01-komp-headline-size: 120px;
		--ag01-komp-title-size: 32px;
		--ag01-komp-list-size: 16px;
		--ag01-komp-body-size: 18px;
		--ag01-komp-link-size: 17.1px;
		--ag01-komp-link-line: 27.4px;
	}

	.ag01-komp__section-title {
		font-size: 32px;
	}

	.ag01-komp__category-item {
		font-size: 16px;
	}

	.ag01-komp__intro-text {
		font-size: 18px;
	}

	.ag01-komp__intro-link-wrap .ohio-widget.button.-default,
	.ag01-komp__intro-link {
		font-size: 17.1px;
		font-weight: 800;
		line-height: 27.4px;
		letter-spacing: 0;
		color: #ffffff;
	}

	.ag01-komp {
		--ag01-komp-headline-size: 120px;
	}
}

.ag01-komp--animated {
	--komp-p: 0;
	--komp-slide-p: 0;
	--komp-headline-p: 0;
	--komp-texture-p: 0;
	--ag01-komp-scroll-distance: 260vh;
}

.ag01-komp--animated .ag01-komp__stage {
	position: sticky;
	top: 0;
	z-index: 1;
	/* Fill the real viewport during pin. Layout metrics stay capped at 1080,
	   but the stage must not letterbox below the logo on tall screens. */
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
}

/* Flush logo to the screen edge: desktop only — mobile uses its own showcase layout */
.ag01-komp--animated:not(.ag01-komp--mobile) .ag01-komp__showcase {
	bottom: calc(-1 * var(--ag01-komp-graphic-bleed-y) - 2px);
}

.ag01-komp--animated .ag01-komp__intro {
	height: auto;
	min-height: var(--ag01-komp-intro-h);
}

.ag01-komp--animated .ag01-komp__scroll-track {
	display: block;
	width: 100%;
	height: var(--ag01-komp-scroll-distance);
	pointer-events: none;
}

.ag01-komp--static:not(.ag01-komp--animated) .ag01-komp__scroll-track {
	display: none;
	height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ag01-komp--animated .ag01-komp__stage {
		position: relative;
		top: 0;
	}

	.ag01-komp--animated .ag01-komp__slide-track {
		transform: none;
		will-change: auto;
	}

	.ag01-komp--animated .ag01-komp__scroll-track {
		display: none;
		height: 0;
	}

	.ag01-komp__rule {
		transform: scaleX(1);
		transition: none;
	}

	.ag01-komp--animated .ag01-komp__intro,
	.ag01-komp--animated .ag01-komp__intro-left,
	.ag01-komp--animated .ag01-komp__intro-body,
	.ag01-komp--animated .ag01-komp__intro-link-wrap,
	.ag01-komp--animated .ag01-komp__showcase,
	.ag01-komp--animated .ag01-komp__graphic,
	.ag01-komp--animated .ag01-komp__headline {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition: none;
	}
}

.ag01-komp--mobile {
	/* Farben kommen aus Admin/Inline (wie Desktop) — kein erzwungenes Weiss */
	--ag01-komp-color-rule: rgba(255, 255, 255, 0.35);
	--ag01-komp-mobile-pad-x: clamp(1.25rem, 5vw, 1.75rem);
	--ag01-komp-mobile-pad-top: clamp(1.25rem, 4vh, 2rem);
	/*
	 * Anschnitt nur links + unten. Obere Rundung bleibt vollständig sichtbar.
	 */
	--ag01-komp-mobile-graphic-h: clamp(13.5rem, 40vh, 17.5rem);
	--ag01-komp-mobile-graphic-w: clamp(9.25rem, 41vw, 12.75rem);
	--ag01-komp-mobile-graphic-bleed-y: clamp(2.75rem, 9vh, 4.5rem);
	--ag01-komp-mobile-graphic-bleed-x: clamp(1.75rem, 9vw, 3rem);
	/* Bildmarke + Headline-Block 20px tiefer */
	--ag01-komp-mobile-graphic-shift-y: 20px;
	--ag01-komp-mobile-headline-size: clamp(1.65rem, 7vw, 2.35rem);
	--ag01-komp-mobile-logo-headline-gap: 0.85rem;
	--ag01-komp-mobile-headline-lift: clamp(2.75rem, 10vh, 5.25rem);
	--ag01-komp-gap-intro-showcase: clamp(1rem, 3vh, 1.75rem);
	/* Sticky runway (shorter than desktop) — real iPhone needs this to "hang" */
	--ag01-komp-scroll-distance: 180vh;
	/* Keep section dark so the runway never flashes page-white */
	background: var(--ag01-komp-color-bg);
	color: var(--ag01-komp-color-text);
}

.ag01-komp--mobile.ag01-komp--animated {
	position: relative;
	min-height: 0;
	background: var(--ag01-komp-color-bg);
}

.ag01-komp--mobile .ag01-komp__stage {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	min-height: 0;
	height: auto;
	padding: var(--ag01-komp-mobile-pad-top) var(--ag01-komp-mobile-pad-x)
		clamp(1.5rem, 4vh, 2rem);
	background: var(--ag01-komp-color-bg);
}

/*
 * Mobile stage: relative by default. Real iPhone Safari/Chrome cannot use
 * CSS sticky here — body/Elementor overflow + .site-content transform kill it.
 * JS promotes .is-js-pinned → position:fixed for the runway.
 */
.ag01-komp--mobile.ag01-komp--animated .ag01-komp__stage {
	--ag01-komp-mobile-stage-h-fallback: 100vh;
	position: relative;
	top: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--ag01-komp-gap-intro-showcase);
	box-sizing: border-box;
	/* Hard clip — logo may sit past edges but must never paint outside the dark stage */
	overflow: hidden !important;
	clip-path: inset(0);
	-webkit-clip-path: inset(0);
	isolation: isolate;
	/* Showcase sits absolute at bottom — no flex padding fight */
	padding-bottom: 0;
	background: var(--ag01-komp-color-bg);
	min-height: var(--ag01-komp-mobile-stage-h, var(--ag01-komp-mobile-stage-h-fallback));
	height: var(--ag01-komp-mobile-stage-h, var(--ag01-komp-mobile-stage-h-fallback));
	touch-action: pan-y;
}

.ag01-komp--mobile.ag01-komp--animated .ag01-komp__stage.is-js-pinned {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100vw !important;
	margin: 0 !important;
	z-index: 40;
}

/* After pin: dock to end of runway so release never exposes white track/page */
.ag01-komp--mobile.ag01-komp--animated .ag01-komp__stage.is-js-docked {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100vw !important;
	margin: 0 !important;
	z-index: 40;
}

.ag01-komp__pin-spacer {
	display: none;
	width: 100%;
	pointer-events: none;
	visibility: hidden;
	background: var(--ag01-komp-color-bg, #1d1d1b);
}

.ag01-komp__pin-spacer.is-active {
	display: block;
}

@supports (height: 100dvh) {
	.ag01-komp--mobile.ag01-komp--animated .ag01-komp__stage {
		--ag01-komp-mobile-stage-h-fallback: 100dvh;
	}
}

.ag01-komp--mobile.ag01-komp--animated .ag01-komp__scroll-track {
	display: block;
	height: var(--ag01-komp-scroll-distance);
	min-height: var(--ag01-komp-scroll-distance);
	/* Same dark as stage — never flash page-white between pin states */
	background: var(--ag01-komp-color-bg);
	pointer-events: none;
}

/*
 * Kill iOS sticky blockers. Keep Elementor wrappers dark (not transparent)
 * so the scroll runway never becomes a white void.
 * Diagnosed on 25.agentur01.ch: body/elementor overflow + .site-content transform.
 */
@media (max-width: 900px) {
	html:has(.ag01-komp--mobile),
	body:has(.ag01-komp--mobile) {
		overflow-x: visible !important;
	}

	.site-content:has(.ag01-komp--mobile) {
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		will-change: auto !important;
	}

	.elementor:has(.ag01-komp--mobile),
	.elementor-element:has(.ag01-komp--mobile),
	.elementor-element:has(.ag01-komp--mobile) > .e-con-inner,
	.elementor-shortcode:has(.ag01-komp--mobile),
	.ag01-komp-breakout:has(.ag01-komp--mobile),
	.ag01-komp-breakout.is-full-bleed:has(.ag01-komp--mobile) {
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		transform: none !important;
	}

	/* Match plugin dark BG on the Elementor parent that wraps Kompetenzen */
	.elementor-element:has(.ag01-komp--mobile) {
		background-color: var(--ag01-komp-color-bg, #1d1d1b) !important;
		background-image: none !important;
	}
}

.ag01-komp--mobile .ag01-komp__intro {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(0.875rem, 2.5vh, 1.25rem);
	width: 100%;
	height: auto;
	min-height: 0;
}

.ag01-komp--mobile .ag01-komp__rule {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.ag01-komp--mobile .ag01-komp__intro-left,
.ag01-komp--mobile .ag01-komp__intro-body,
.ag01-komp--mobile .ag01-komp__intro-link-wrap {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
}

.ag01-komp--mobile .ag01-komp__intro-left {
	order: 1;
}

/*
 * Compact category jump points — keep stage height free for sticky slide changes.
 * Progressive reveal (is-visible) again so swipe/scroll drives the list + showcase.
 */
.ag01-komp--mobile .ag01-komp__category-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ag01-komp--mobile .ag01-komp__category-item {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	font-size: clamp(0.95rem, 4vw, 1.1rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ag01-komp-color-muted);
	transition: opacity 0.45s ease, max-height 0.45s ease, color 0.35s ease;
	pointer-events: auto;
	cursor: pointer;
}

.ag01-komp--mobile .ag01-komp__category-item.is-visible {
	max-height: 2.2rem;
	opacity: 0.55;
}

.ag01-komp--mobile .ag01-komp__category-item.is-visible.is-active {
	opacity: 1;
	color: var(--ag01-komp-color-text);
	font-weight: 700;
}

.ag01-komp--mobile .ag01-komp__category-link {
	display: inline-block;
	padding: 0.05rem 0;
	color: inherit;
	text-decoration: none;
}

.ag01-komp--mobile .ag01-komp__section-title {
	font-size: clamp(1.25rem, 5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
}

.ag01-komp--mobile .ag01-komp__intro-link-wrap {
	order: 2;
	justify-content: flex-start;
	width: auto;
	max-width: 100%;
}

.ag01-komp--mobile .ag01-komp__intro-link-wrap .ohio-widget-holder.-right {
	justify-content: flex-start;
}

.ag01-komp--mobile .ag01-komp__intro-link-wrap .ohio-widget.button.-default,
.ag01-komp--mobile .ag01-komp__intro-link {
	font-size: var(--ag01-komp-link-size);
	font-weight: 800;
	line-height: var(--ag01-komp-link-line, 27.4px);
	letter-spacing: 0;
	color: var(--ag01-komp-color-text) !important;
}

.ag01-komp--mobile .ag01-komp__intro-body {
	order: 3;
}

.ag01-komp--mobile .ag01-komp__intro-text-viewport {
	display: grid;
	width: 100%;
	overflow: visible;
}

.ag01-komp--mobile .ag01-komp__intro-text {
	font-size: clamp(1rem, 4.2vw, 1.125rem);
	line-height: var(--ag01-komp-body-line-height);
}

.ag01-komp--mobile .ag01-komp__intro-text-panel {
	grid-area: 1 / 1;
}

/*
 * Mobile showcase: flush to stage bottom/left (no Überstand past dark stage).
 * Stage clips the mark → Anschnitt links + unten. Graphic taller than window
 * → Anschnitt oben+unten innerhalb des Fensters.
 */
.ag01-komp--mobile .ag01-komp__showcase {
	position: absolute;
	top: auto;
	left: calc(-1 * var(--ag01-komp-mobile-graphic-bleed-x));
	right: 0;
	bottom: calc(-1 * var(--ag01-komp-mobile-graphic-shift-y));
	width: auto;
	height: var(--ag01-komp-mobile-graphic-h);
	margin: 0;
	flex: none;
	overflow: hidden;
	pointer-events: none;
}

.ag01-komp--mobile .ag01-komp__graphic {
	position: absolute;
	/* top: 0 → obere Rundung komplett; nur unten (+ links) angeschnitten */
	top: 0;
	left: calc(-0.35 * var(--ag01-komp-mobile-graphic-bleed-x));
	width: calc(
		var(--ag01-komp-mobile-graphic-w) + (0.7 * var(--ag01-komp-mobile-graphic-bleed-x))
	);
	height: calc(100% + var(--ag01-komp-mobile-graphic-bleed-y));
	z-index: 1;
	overflow: hidden;
}

.ag01-komp--mobile .ag01-komp__graphic-media {
	width: 100%;
	height: 100%;
	transform: none;
}

.ag01-komp--mobile .ag01-komp__headline {
	position: absolute;
	top: 0;
	/* Start rechts vom Logo — kein Überdecken von WERBUNG etc. */
	left: calc(var(--ag01-komp-mobile-graphic-w) + var(--ag01-komp-mobile-logo-headline-gap));
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	z-index: 20;
	pointer-events: none;
}

.ag01-komp--mobile .ag01-komp__headline-viewport {
	overflow: visible;
	width: 100%;
	height: 100%;
}

.ag01-komp--mobile .ag01-komp__headline-track {
	display: flex;
	flex-wrap: nowrap;
	width: calc(var(--komp-slide-count, 4) * 100%);
	height: 100%;
	will-change: transform;
	transform: translate3d(
		calc(var(--komp-slide-p, 0) * -100% / var(--komp-slide-count, 4)),
		0,
		0
	);
}

.ag01-komp--mobile .ag01-komp__headline-track .ag01-komp__slide-panel {
	position: relative;
	flex: 0 0 calc(100% / var(--komp-slide-count, 4));
	width: calc(100% / var(--komp-slide-count, 4));
	min-width: 0;
	height: 100%;
	overflow: visible;
}

.ag01-komp--mobile .ag01-komp__headline-set {
	position: absolute;
	right: var(--ag01-komp-mobile-pad-x);
	/* Über dem unteren Stage-Rand — nicht zu tief */
	bottom: var(--ag01-komp-mobile-headline-lift);
	left: 0;
	top: auto;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	padding: 0;
	gap: 0.28em;
	white-space: nowrap;
	z-index: 21;
}

.ag01-komp--mobile .ag01-komp__headline-line {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	font-size: var(--ag01-komp-mobile-headline-size);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.02em;
	margin: 0;
	padding-left: 0;
	/* Beide Zeilen sichtbar — kein Abschneiden langer Wörter */
	max-height: none;
	overflow: visible;
}

.ag01-komp--mobile .ag01-komp__headline-line + .ag01-komp__headline-line {
	margin-top: 0;
	margin-left: 0;
}

@media (max-width: 900px) {
	/* True viewport breakout — matches hero; no white side gutters */
	.ag01-komp-breakout.is-full-bleed,
	.ag01-komp-breakout.is-full-bleed.alignfull,
	.ag01-komp-breakout.is-full-bleed.is-parent-full-bleed,
	.ag01-komp-breakout.is-full-bleed.is-parent-full-bleed.alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		/* visible — overflow-x:clip kills position:sticky/fixed pin on iOS */
		overflow-x: visible;
		overflow-y: visible;
	}

	.ag01-komp--mobile .ag01-komp__section-title,
	.ag01-komp--mobile .ag01-komp__intro-text,
	.ag01-komp--mobile .ag01-komp__headline-line {
		color: var(--ag01-komp-color-text);
	}

	.ag01-komp--mobile .ag01-komp__intro-link-wrap .ohio-widget.button.-default,
	.ag01-komp--mobile .ag01-komp__intro-link,
	.ag01-komp--mobile .ag01-komp__intro-link-wrap .ohio-widget.button.-default:hover,
	.ag01-komp--mobile .ag01-komp__intro-link:hover {
		color: var(--ag01-komp-color-text) !important;
	}

	.ag01-komp--mobile .ag01-komp__rule {
		background: var(--ag01-komp-color-rule);
	}
}