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

.ag01-hero-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-hero-breakout.is-full-bleed.is-parent-full-bleed.alignfull,
.has-global-padding .entry-content > .ag01-hero-breakout.is-full-bleed.is-parent-full-bleed.alignfull,
.ag01-hero-breakout.is-full-bleed.is-parent-full-bleed,
.ag01-hero-breakout.is-full-bleed.is-parent-full-bleed.alignfull {
	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-hero-breakout.is-full-bleed.alignfull:not(.is-parent-full-bleed),
.has-global-padding .entry-content > .ag01-hero-breakout.is-full-bleed.alignfull:not(.is-parent-full-bleed),
.ag01-hero-breakout.is-full-bleed:not(.is-parent-full-bleed) {
	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-hero-breakout.alignfull:not(.is-full-bleed),
.has-global-padding .entry-content > .ag01-hero-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-hero-breakout,
.entry-content > .ag01-hero-breakout,
.wp-block-post-content > .ag01-hero-breakout {
	max-width: none !important;
}

.ag01-hero {
	
	--ag01-ref-w: 1920;
	--ag01-ref-h: 1080;
	--ag01-layout-w: min(100vw, 1920px);
	--ag01-layout-offset: max(0px, calc((100vw - var(--ag01-layout-w)) / 2));
	--ag01-viewport-h: min(100svh, 1080px);
	--ag01-logo-aspect-w: 232.452;
	--ag01-logo-aspect-h: 369.665;
	--ag01-stage-h: calc(100svh - var(--ag01-admin-bar));
	--ag01-logo-top: calc(176 / var(--ag01-ref-h) * var(--ag01-viewport-h));
	--ag01-logo-left: calc(var(--ag01-layout-offset) + 355 / var(--ag01-ref-w) * var(--ag01-layout-w));
	--ag01-logo-w: calc(var(--ag01-logo-h) * var(--ag01-logo-aspect-w) / var(--ag01-logo-aspect-h));
	--ag01-logo-h: calc(728 / var(--ag01-ref-h) * var(--ag01-viewport-h));
	--ag01-gap-logo-text: calc(150 / var(--ag01-ref-w) * var(--ag01-layout-w));
	--ag01-text-w: calc(400 / var(--ag01-ref-w) * var(--ag01-layout-w));
	--ag01-text-left: calc(var(--ag01-logo-left) + var(--ag01-logo-w) + var(--ag01-gap-logo-text));
	--ag01-text-top: var(--ag01-logo-top);
	--ag01-text-h: var(--ag01-logo-h);
	--ag01-headline-inset-top: calc(150 / var(--ag01-ref-h) * var(--ag01-viewport-h));
	--ag01-gap-headline-body: calc(30 / var(--ag01-ref-h) * var(--ag01-viewport-h));
	--ag01-color-text: #1d1d1b;
	--ag01-color-muted: #666666;
	--ag01-color-bg: #ffffff;
	--ag01-font-family: "Ubuntu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ag01-admin-bar: var(--wp-admin--admin-bar--height, 0px);

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

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

.ag01-hero--static .ag01-hero__stage {
	position: relative;
	width: 100%;
	min-height: var(--ag01-stage-h);
	height: var(--ag01-stage-h);
	padding: 0;
	overflow: visible;
}

.ag01-hero--static .ag01-hero__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.ag01-hero--static .ag01-hero__logo {
	position: absolute;
	top: var(--ag01-logo-top);
	left: var(--ag01-logo-left);
	width: var(--ag01-logo-w);
	height: var(--ag01-logo-h);
	line-height: 0;
}

.ag01-hero--static .ag01-hero__logo-media {
	width: 100%;
	height: 100%;
}

.ag01-hero--static .ag01-hero__text {
	position: absolute;
	top: var(--ag01-text-top);
	left: var(--ag01-text-left);
	width: var(--ag01-text-w);
	height: var(--ag01-text-h);
	display: flex;
	flex-direction: column;
	padding-top: var(--ag01-headline-inset-top);
}

.ag01-hero--static .ag01-hero__body-block {
	margin-top: var(--ag01-gap-headline-body);
}

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

@media (min-width: 1900px) and (min-height: 1000px) {
	.ag01-hero--static {
		--ag01-layout-offset: calc((100vw - 1920px) / 2);
		--ag01-viewport-h: 1080px;
		--ag01-logo-top: 176px;
		--ag01-logo-left: calc(var(--ag01-layout-offset) + 355px);
		--ag01-logo-h: 728px;
		--ag01-text-top: 176px;
		--ag01-gap-logo-text: 150px;
		--ag01-text-w: 400px;
		--ag01-text-h: 728px;
		--ag01-headline-inset-top: 150px;
		--ag01-gap-headline-body: 30px;
	}
}

.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;
}

.ag01-hero .ag01-logo-mask-shadow {
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ag01-hero--static .ag01-logo-mask-shadow {
	-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-hero__logo-media {
	position: relative;
	width: 100%;
	height: 100%;
	/* Visible so the bg-colored contour can cover fringe outside the mask */
	overflow: visible;
}

/* ~2px contour in page/hero bg — follows --ag01-color-bg during scroll color tween */
.ag01-logo-mask-contour {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	color: var(--ag01-color-bg, #ffffff);
}

.ag01-logo-mask-contour__path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.75;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/*
 * Never show logo (incl. dark contour) on the still-white first paint.
 * Inline style in markup + these rules; JS clears inline when ready.
 */
.ag01-hero__logo-media.is-texture-pending,
.ag01-hero--animated .ag01-hero__logo-media:not(.is-texture-ready) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

.ag01-hero__logo-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-hero__logo-media.is-texture-ready {
		transition: none;
	}
}

.ag01-hero__logo-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-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	/* Avoid subpixel seam without clipping the logo curves */
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ag01-hero--static .ag01-hero__logo-texture-wrap {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.ag01-hero__logo-texture-wrap.has-video-poster {
	background-image: var(--ag01-video-poster);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Bleed must cover parallax shift (textureShiftX/Y) + theme max-width overrides */
.ag01-hero img.ag01-hero__texture,
.ag01-hero video.ag01-hero__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-origin: center center;
}

.ag01-hero--static:not(.ag01-hero--animated) .ag01-hero__texture {
	transform: none;
}

.ag01-hero__logo-fallback {
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #e8e8e8;
}

.ag01-hero__headline-block {
	margin: 0;
}

.ag01-hero__headline {
	margin: 0;
	font-size: clamp(2rem, calc(58 / var(--ag01-ref-w, 1920) * 100vw), 3.625rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.ag01-hero__headline--bold {
	font-weight: 700;
}

.ag01-hero__headline--regular {
	font-weight: 300;
}

.ag01-hero__headline--bold + .ag01-hero__headline--regular {
	margin-top: 0;
}

.ag01-hero__body-block {
	margin: 0;
	max-width: var(--ag01-text-w, 25rem);
}

.ag01-hero__paragraph {
	margin: 0;
	font-size: clamp(0.875rem, calc(15 / var(--ag01-ref-w, 1920) * 100vw), 0.9375rem);
	font-weight: 300;
	line-height: 1.65;
	color: var(--ag01-color-muted);
}

@media (max-width: 900px) {
	/* True viewport breakout — not parent width (avoids white side gutters) */
	.ag01-hero-breakout.is-full-bleed,
	.ag01-hero-breakout.is-full-bleed.alignfull,
	.ag01-hero-breakout.is-full-bleed.is-parent-full-bleed,
	.ag01-hero-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;
		overflow-x: clip;
	}

	.ag01-hero {
		--ag01-stage-h: auto;
		--ag01-exit-y: 0px;
		--ag01-exit-opacity: 1;
		--ag01-logo-opacity: 1;
		/* No scroll pin on mobile — normal swipe after headline */
		--ag01-scroll-distance: 0vh;
		--ag01-mobile-pad-x: clamp(1.5rem, 6vw, 2.25rem);
		/* Mehr Luft oben (Android/Header) — asymmetrisch */
		--ag01-mobile-pad-top: calc(
			clamp(5.75rem, 16vh, 8.5rem) + env(safe-area-inset-top, 0px)
		);
		--ag01-mobile-pad-bottom: clamp(2.5rem, 8vh, 4.5rem);
		/* Endgröße von Anfang an (wie Desktop-Endzustand) */
		--ag01-mobile-logo-h: clamp(11.5rem, 40vh, 17rem);
		--ag01-mobile-logo-w: calc(
			var(--ag01-mobile-logo-h) * var(--ag01-logo-aspect-w) / var(--ag01-logo-aspect-h)
		);
		--ag01-mobile-gap-logo-text: clamp(0.875rem, 2.4vh, 1.5rem);
		--ag01-mobile-gap-headline-body: clamp(0.75rem, 2vh, 1.15rem);
		--ag01-mobile-logo-x: 0px;
		--ag01-mobile-logo-scale: 1;
		background: var(--ag01-color-bg);
		color: var(--ag01-color-text);
		min-height: 100vh;
		min-height: 100dvh;
	}

	.ag01-hero:not(.ag01-hero--animated) {
		min-height: 100vh;
		min-height: 100dvh;
		--ag01-scroll-distance: 0px;
		--ag01-mobile-logo-x: 0px;
		--ag01-mobile-logo-scale: 1;
	}

	.ag01-hero .ag01-hero__stage,
	.ag01-hero--static .ag01-hero__stage,
	.ag01-hero--animated .ag01-hero__stage,
	.ag01-hero--mobile .ag01-hero__stage,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__stage {
		position: relative !important;
		top: 0 !important;
		display: flex !important;
		align-items: center !important;
		/* Oben ausrichten — nicht vertikal mittig (wirkte unter Header zu hoch) */
		justify-content: flex-start !important;
		height: auto !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		padding: var(--ag01-mobile-pad-top) var(--ag01-mobile-pad-x) var(--ag01-mobile-pad-bottom) !important;
		overflow: visible;
		box-sizing: border-box;
	}

	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__stage {
		/* Relative — normal document flow, no sticky lock */
		position: relative !important;
		top: 0 !important;
		z-index: 1;
	}

	.ag01-hero .ag01-hero__inner,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: var(--ag01-mobile-gap-logo-text);
		width: 100%;
		height: auto;
		padding-top: 0.5rem;
		transform: none;
		opacity: 1;
		will-change: auto;
	}

	.ag01-hero:not(.ag01-hero--animated) .ag01-hero__inner,
	.ag01-hero--mobile:not(.ag01-hero--animated) .ag01-hero__inner {
		transform: none !important;
		opacity: 1 !important;
		will-change: auto;
	}

	/* Logo sichtbar über dem Text — Flow-Layout, Animation per Transform */
	.ag01-hero .ag01-hero__logo,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__logo {
		display: block !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: var(--ag01-mobile-logo-w) !important;
		height: var(--ag01-mobile-logo-h) !important;
		margin: 0 auto;
		opacity: var(--ag01-logo-opacity, 1);
		line-height: 0;
		flex-shrink: 0;
		transform: translate3d(var(--ag01-mobile-logo-x), 0, 0)
			scale(var(--ag01-mobile-logo-scale));
		transform-origin: center center;
		will-change: transform, opacity;
	}

	.ag01-hero:not(.ag01-hero--animated) .ag01-hero__logo,
	.ag01-hero--mobile:not(.ag01-hero--animated) .ag01-hero__logo {
		transform: none !important;
		will-change: auto;
	}

	.ag01-hero .ag01-hero__text,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__text {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100%;
		max-width: 100%;
		height: auto;
		padding-top: 0;
		padding-right: 0;
		box-sizing: border-box;
		color: var(--ag01-color-text);
		overflow-x: clip;
		overflow-y: visible;
		text-align: left;
		z-index: 3;
	}

	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__headline-block {
		transform: translate3d(calc((1 - var(--p-headline)) * var(--text-fly-x)), 0, 0);
		opacity: var(--p-headline);
		will-change: transform, opacity;
	}

	/* Kleiner Fließtext unter der Headline — mobil wieder sichtbar */
	.ag01-hero .ag01-hero__body-block,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__body-block {
		display: block !important;
		margin-top: var(--ag01-mobile-gap-headline-body);
		max-width: 100%;
	}

	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__body-block {
		transform: translate3d(calc((1 - var(--p-body)) * var(--text-fly-x)), 0, 0);
		opacity: var(--p-body);
		will-change: transform, opacity;
	}

	.ag01-hero:not(.ag01-hero--animated) .ag01-hero__headline-block,
	.ag01-hero--mobile:not(.ag01-hero--animated) .ag01-hero__headline-block,
	.ag01-hero:not(.ag01-hero--animated) .ag01-hero__body-block,
	.ag01-hero--mobile:not(.ag01-hero--animated) .ag01-hero__body-block {
		transform: none !important;
		opacity: 1 !important;
	}

	.ag01-hero__headline,
	.ag01-hero--mobile .ag01-hero__headline {
		font-size: clamp(2.5rem, 11.5vw, 3.75rem);
		line-height: 1.05;
		letter-spacing: -0.03em;
		color: var(--ag01-color-text);
		margin: 0;
	}

	.ag01-hero__headline--bold,
	.ag01-hero--mobile .ag01-hero__headline--bold {
		font-weight: 800;
	}

	.ag01-hero__headline--regular,
	.ag01-hero--mobile .ag01-hero__headline--regular {
		font-weight: 300;
	}

	.ag01-hero .ag01-hero__paragraph,
	.ag01-hero--mobile .ag01-hero__paragraph {
		margin: 0;
		max-width: 100%;
		font-size: clamp(0.875rem, 3.9vw, 1rem);
		font-weight: 300;
		line-height: 1.55;
		color: var(--ag01-color-muted);
	}

	.ag01-hero .ag01-hero__scroll-track,
	.ag01-hero--animated.ag01-hero--mobile .ag01-hero__scroll-track,
	.ag01-hero:not(.ag01-hero--animated) .ag01-hero__scroll-track,
	.ag01-hero--mobile:not(.ag01-hero--animated) .ag01-hero__scroll-track {
		display: none !important;
		height: 0 !important;
		max-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.ag01-hero--animated.ag01-hero--mobile {
		min-height: 100vh;
		min-height: 100dvh;
	}
}

.ag01-hero--animated {
	--p: 0;
	--p-headline: 0;
	--p-body: 0;
	/* Compact pin — less empty sticky space after animation */
	--ag01-scroll-distance: 85vh;
	--ag01-logo-start-scale: 1;
	--ag01-logo-opacity: 1;
	--text-fly-x: 1000px;
	--texture-scale: 1.08;
	--texture-tx: -28px;
	--texture-ty: 0px;
	--ag01-exit-y: 0px;
	--ag01-exit-opacity: 1;
}

.ag01-hero--animated .ag01-hero__stage {
	position: sticky;
	top: var(--ag01-admin-bar);
	z-index: 1;
	overflow: visible;
}

.ag01-hero--animated .ag01-hero__inner {
	overflow: visible;
	transform: translate3d(0, var(--ag01-exit-y), 0);
	opacity: var(--ag01-exit-opacity);
	will-change: transform, opacity;
}

.ag01-hero--animated .ag01-hero__text {
	z-index: 3;
	top: var(--ag01-text-top-current, var(--ag01-text-top));
	left: var(--ag01-text-left-current, var(--ag01-text-left));
	overflow: visible;
	will-change: top, left;
}

.ag01-hero--animated .ag01-hero__logo {
	z-index: 2;
	top: var(--ag01-logo-top-current, var(--ag01-logo-top));
	left: var(--ag01-logo-left-current, var(--ag01-logo-left));
	width: var(--ag01-logo-w-current, var(--ag01-logo-w));
	height: var(--ag01-logo-h-current, var(--ag01-logo-h));
	margin-bottom: 0;
	padding-bottom: 0;
	opacity: var(--ag01-logo-opacity, 1);
	will-change: top, left, width, height, opacity;
}

.ag01-hero--animated .ag01-hero__texture {
	transform: translate3d(var(--texture-tx), var(--texture-ty), 0) scale(var(--texture-scale));
	will-change: transform;
}

.ag01-hero--animated .ag01-hero__headline-block {
	overflow: visible;
	opacity: 1;
	transform: translate3d(calc((1 - var(--p-headline)) * var(--text-fly-x)), 0, 0);
	will-change: transform;
}

.ag01-hero--animated .ag01-hero__headline--bold,
.ag01-hero--animated .ag01-hero__headline--regular {
	transform: none;
}

.ag01-hero--animated .ag01-hero__body-block {
	overflow: visible;
	opacity: 1;
	transform: translate3d(calc((1 - var(--p-body)) * var(--text-fly-x)), 0, 0);
	will-change: transform;
}

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

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

	.ag01-hero--animated .ag01-hero__inner {
		transform: none;
		opacity: 1;
		will-change: auto;
	}

	.ag01-hero--animated .ag01-hero__logo {
		top: var(--ag01-logo-top) !important;
		left: var(--ag01-logo-left) !important;
		width: var(--ag01-logo-w) !important;
		height: var(--ag01-logo-h) !important;
		will-change: auto;
	}

	.ag01-hero--animated .ag01-hero__text {
		top: var(--ag01-text-top) !important;
		left: var(--ag01-text-left) !important;
		will-change: auto;
	}

	.ag01-hero--animated .ag01-hero__texture {
		transform: none;
		will-change: auto;
	}

	.ag01-hero--animated .ag01-hero__headline-block,
	.ag01-hero--animated .ag01-hero__body-block {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	.ag01-hero--animated .ag01-hero__scroll-track {
		display: none;
		height: 0;
	}
}