/* Group-Block: Stil „precisis-hero-rings“ — Aufbau wie Ursprungs-Prototyp (wrapper / flex / col / ray). */

.wp-block-group.is-style-precisis-hero-rings {
	/* Original-prototyp :root-Variablen (scoped) */
	--precisis-hero-rings-laser-y: 50px;
	--precisis-hero-rings-laser-dot-size: 45px;
	--precisis-hero-rings-laser-beam-height: 2px;
	--precisis-hero-rings-laser-color: #b1d500;
	--precisis-hero-rings-hero-color: #007c48;
	--precisis-hero-rings-bg-deep: #1f3b4c;
	--precisis-hero-rings-rings-step: 100px;
	--precisis-hero-rings-rings-inner: 145px;
	--precisis-hero-rings-ray-intro-duration: 1s;
	--precisis-hero-rings-ring-fade-duration: 0.4s;
	--precisis-hero-rings-ring-fade-gap: 0.055s;

	/* Horizontales Innenpadding des Wrappers (= linker Offset bis zur Ray-Spalte, auch für Beam-Pull). */
	--precisis-hero-rings-layout-pad-x: 50px;

	/* Punkt (und Ringe) nach rechts verschieben; Linie wird um denselben Wert verlängert. */
	--precisis-hero-rings-dot-offset-x: 100px;

	/* Endbreite der Ray-Einfahr-Animation (% der Spaltenbreite); mobil in @media überschreibbar. */
	--precisis-hero-rings-ray-target-width: 70%;

	/* Unterer Verlauf (.is-style-precisis-hero-rings::after), volle Zeilenbreite inkl. Root-Padding-Ausgleich; Höhe hier. */
	--precisis-hero-rings-bottom-gradient-height: 350px;

	position: relative;
	isolation: isolate;
	/*
	 * Kein overflow:hidden hier: bricht position:sticky bei .sticky-bar-nav u. a.
	 * (gleiches Muster wie precisis-laser.css). Clip nur auf .precisis-hero-rings__deco.
	 */
	overflow: visible;

	width: 100%;
	height: auto;
	max-height:1000px;
	display: flex;
	flex-direction: column;

	background: linear-gradient(
		to top,
		var(--precisis-hero-rings-hero-color) 8.31%,
		var(--precisis-hero-rings-hero-color) 90.73%
	);
}

/*
 * Volle Breite wie .sticky-bar-nav: Root-Padding negieren (--wp--style--root--padding-*),
 * sonst endet der Verlauf innerhalb der alignfull-Innenbox.
 */
.wp-block-group.is-style-precisis-hero-rings::after {
	content: "";
	position: absolute;
	left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	bottom: 0;
	height: var(--precisis-hero-rings-bottom-gradient-height);
	max-height: 50%;
	background: linear-gradient(
		0deg,
		var(--precisis-hero-rings-bg-deep) 5.72%,
		rgba(31, 59, 76, 0) 90.79%
	);
	/* Über Hero-Inhalt (Kinder z-index 3), damit der Boden-Verlauf auch Bilder überlagert;
	 * .sticky-bar-nav bleibt darüber (precisis-sticky-bar-nav.css, z-index 999998). */
	z-index: 15;
	pointer-events: none;
}

/*
 * Redaktioneller Inhalt über der Dekoration (Deko z-index 1). Boden-Verlauf: Hero ::after (höherer z-index).
 * Kein position:relative hier — das würde position:sticky auf .sticky-bar-nav überschreiben.
 * Als Flex-Kinder reicht z-index für die Stapelreihenfolge (CSS Flex Layout).
 */
.wp-block-group.is-style-precisis-hero-rings > *:not(.precisis-hero-rings__deco) {
	z-index: 3;
	/* Flex-Spalte: verhindert zu breite Kinder / ermöglicht constrained + alignfull */
	min-width: 0;
	box-sizing: border-box;
}

/*
 * Hero ist bereits alignfull (100vw): verschachteltes alignfull nicht nochmal mit
 * Viewport-Margins ausladen — sonst Scrollbars / Layoutbruch; volle Zeilenbreite reicht.
 * Ausnahme: .sticky-bar-nav nutzt eigenen Root-Padding-Ausgleich (precisis-sticky-bar-nav.css).
 */
.wp-block-group.alignfull.is-style-precisis-hero-rings > .wp-block-group.alignfull:not( .sticky-bar-nav ),
.wp-block-group.is-style-precisis-hero-rings.alignfull > .wp-block-group.alignfull:not( .sticky-bar-nav ) {
	width: 100%;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Volllayout wie Prototyp-section — volle Bezugsbreite für Strahl-Mathematik.
 *
 * min-width + width 100%: bei abs. Positionierung + Flex kann die used width sonst zu klein sein;
 * dann werden beam-pull und negative margin falsch (Strahl startet nicht am Viewportrand).
 *
 * Ohne max-width am Wrapper gibt es keine seitliche Zentrier-Lücke mehr — beam-pull-inner ist nur
 * noch das horizontale Wrapper-Padding (bis zur Ray-Spalte) plus Root-Padding bis zum Browserrand.
 */
.precisis-hero-rings__deco {
	position: absolute;
	inset: 0;
	height: 300px;
	box-sizing: border-box;
	z-index: 1;
	pointer-events: none;
	display: flex;
	flex-direction: column;

	min-width: 100%;
	width: 100%;

	--precisis-hero-rings-beam-pull-inner: var(--precisis-hero-rings-layout-pad-x);
	/* Root-Padding: Deko liegt innerhalb Padding-Box → bis Browserrand nachziehen. */
	--precisis-hero-rings-beam-pull: calc(
		var(--precisis-hero-rings-beam-pull-inner) +
			var(--wp--style--root--padding-left, 0px)
	);
}

/* .wrapper — volle Breite (kein max-width), sonst bleibt seitlicher Leerraum und der Strahl startet nicht viewport-bündig links */
.precisis-hero-rings__wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	padding: 0 var(--precisis-hero-rings-layout-pad-x);
	box-sizing: border-box;
}

/* .flex-container — padding-top nur wenn Ringe sichtbar (nicht .hide-rings). */
.precisis-hero-rings__flex-container {
	flex: 1 1 auto;
	min-height: 0;
	padding-top: 0;
	display: flex;
	align-items: stretch;
	gap: 100px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.wp-block-group.is-style-precisis-hero-rings:not( .hide-rings ) {
	overflow: hidden;
}
.wp-block-group.is-style-precisis-hero-rings:not( .hide-rings ) .precisis-hero-rings__deco {
	padding-top: 600px;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-precisis-hero-rings:not( .hide-rings ) .precisis-hero-rings__deco {
		padding-top: 0;
	}
}


/* .col */
.precisis-hero-rings__flex-container > .precisis-hero-rings__col {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	align-self: stretch;
	box-sizing: border-box;
}

.precisis-hero-rings__flex-container > .precisis-hero-rings__col:last-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.precisis-hero-rings__flex-container > .precisis-hero-rings__col:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.precisis-hero-rings__flex-container > .precisis-hero-rings__col:first-child .precisis-hero-rings__ray {
	top: 0;
}

/* .ray — Dot ragt nach rechts; nicht abschneiden */
.precisis-hero-rings__ray {
	position: relative;
	z-index: 10;
	top: var(--precisis-hero-rings-laser-y);
	width: 50%;
	box-sizing: border-box;
	overflow: visible;
	animation: precisis-hero-rings-ray-width var(--precisis-hero-rings-ray-intro-duration) ease forwards;
}

/* .line — nach links bis zum Außenrand der Hero-Group (Viewport bei alignfull) */
.precisis-hero-rings__line {
	z-index: 20;
	display: block;
	width: calc(
		100% - var(--precisis-hero-rings-laser-dot-size) + var(--precisis-hero-rings-beam-pull) +
			var(--precisis-hero-rings-dot-offset-x)
	);
	margin-left: calc(-1 * var(--precisis-hero-rings-beam-pull));
	height: var(--precisis-hero-rings-laser-beam-height);
	transform: translateY(-50%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--precisis-hero-rings-laser-color) 100%
	);
	box-shadow: 0 0 50px 0 var(--precisis-hero-rings-laser-color);
	pointer-events: none;
}

/* .dot */
.precisis-hero-rings__dot {
	position: absolute;
	right: 0;
	z-index: 2;
	width: var(--precisis-hero-rings-laser-dot-size);
	height: var(--precisis-hero-rings-laser-dot-size);
	border-radius: 999px;
	transform: translate(
		calc(-50% + var(--precisis-hero-rings-dot-offset-x)),
		-50%
	);
	background: radial-gradient(
		50% 50% at 50% 50%,
		#b1d500 34.62%,
		rgba(177, 213, 0, 0) 100%
	);
	pointer-events: none;
	will-change: left, box-shadow;
	animation: precisis-hero-rings-radial-pulse 1.5s ease-out infinite;
}

.precisis-hero-rings__glow {
	position: absolute;
	left: -100px;
	top: -100px;
	width: 240px;
	height: 240px;
	border-radius: 100%;
	background: radial-gradient(
		50% 50% at 50% 50%,
		var(--precisis-hero-rings-laser-color),
		transparent 100%
	);
	mix-blend-mode: soft-light;
	z-index: 1;
}

.precisis-hero-rings__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.precisis-hero-rings__rings > .precisis-hero-rings__ring-parallax-layer {
	--ring-i: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: precisis-hero-rings-ring-reveal var(--precisis-hero-rings-ring-fade-duration) ease forwards;
	animation-delay: calc(
		var(--precisis-hero-rings-ray-intro-duration) + var(--ring-i) * var(--precisis-hero-rings-ring-fade-gap)
	);
}

.precisis-hero-rings__rings span.precisis-hero-rings__ring-visual {
	--ring-i: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	width: calc(
		var(--precisis-hero-rings-rings-inner) + var(--precisis-hero-rings-rings-step) * var(--ring-i)
	);
	height: calc(
		var(--precisis-hero-rings-rings-inner) + var(--precisis-hero-rings-rings-step) * var(--ring-i)
	);
	translate: -50% -50%;
	border-radius: 50%;
	box-shadow:
		inset 0 0 24px rgb(177 213 0 / 0.2),
		inset 0 0 48px rgb(31 59 76 / 0.45),
		inset 0 2px 6px rgb(0 0 0 / 0.35);
}

@keyframes precisis-hero-rings-ray-width {
	from {
		width: 0%;
	}

	to {
		width: var(--precisis-hero-rings-ray-target-width);
	}
}

@keyframes precisis-hero-rings-ring-reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes precisis-hero-rings-radial-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(177, 213, 0, 0.8);
	}

	100% {
		box-shadow: 0 0 0 2em rgba(177, 213, 0, 0);
	}
}

/*
 * hide-rings: Ringe ausblenden, Hero-Hintergrund + Boden-Gradient (::after) entfernen, kein Top-Padding der Deko-Zeile.
 */
.wp-block-group.is-style-precisis-hero-rings.hide-rings {
	background: none;
}

.wp-block-group.is-style-precisis-hero-rings.hide-rings::after {
	content: none;
	display: none;
}

.wp-block-group.is-style-precisis-hero-rings.hide-rings .precisis-hero-rings__rings {
	display: none !important;
	visibility: hidden;
	pointer-events: none;
}

/*
 * connect-to-scroll: Strahl per precisis-laser.js (--laser-start/--laser-end + --precisis-hero-ray-scroll-x) seitlich bewegen.
 */
.wp-block-group.is-style-precisis-hero-rings.connect-to-scroll {
	--laser-start: 45;
	--laser-end: 88;
	--precisis-hero-ray-scroll-x: 0px;
}

/*
 * Innerer Wrapper wie alignwide: gleiche max-width, zentriert — Strahl-Start links bündig mit Wide-Spalte.
 */
.wp-block-group.is-style-precisis-hero-rings.connect-to-scroll .precisis-hero-rings__wrapper {
	max-width: min(100%, var(--wp--style--global--wide-size, 1500px));
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

.wp-block-group.is-style-precisis-hero-rings.connect-to-scroll:not( .hide-rings ) .precisis-hero-rings__ray {
	animation: none;
	width: var(--precisis-hero-rings-ray-target-width);
	transform: translateX(var(--precisis-hero-ray-scroll-x, 0px));
}

/*
 * Ohne Ringe (hide-rings): Breiten-Einfahrt beibehalten, zusätzlich Scroll-Verschiebung auf X.
 */
.wp-block-group.is-style-precisis-hero-rings.connect-to-scroll.hide-rings .precisis-hero-rings__ray {
	transform: translateX(var(--precisis-hero-ray-scroll-x, 0px));
}

/*
 * Volle Viewport-Breite bei alignfull (Theme-Layout).
 */
.wp-block-group.alignfull.is-style-precisis-hero-rings,
.wp-block-group.is-style-precisis-hero-rings.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group.alignfull.is-style-precisis-hero-rings,
.wp-block-cover.alignfull .wp-block-cover__inner-container .wp-block-group.alignfull.is-style-precisis-hero-rings {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

.wp-block-cover.alignfull:has(.wp-block-group.alignfull.is-style-precisis-hero-rings) {
	overflow: visible;
}


@supports (width: 100dvw) {
	.wp-block-group.alignfull.is-style-precisis-hero-rings,
	.wp-block-group.is-style-precisis-hero-rings.alignfull {
		width: 100dvw;
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50dvw);
	}

	.wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group.alignfull.is-style-precisis-hero-rings,
	.wp-block-cover.alignfull .wp-block-cover__inner-container .wp-block-group.alignfull.is-style-precisis-hero-rings {
		width: 100dvw;
		margin-left: calc(50% - 50dvw) !important;
		margin-right: calc(50% - 50dvw) !important;
	}
}

@media (max-width: 1200px) {
	.wp-block-group.is-style-precisis-hero-rings::after {
		max-height: 25%;
	}
}


@media (max-width: 781px) {
	/*
	 * Layout: Spalten untereinander. Ringe + Laser (Variablen, Glow, Strahl-Schatten) wie Desktop —
	 * keine Verkleinerung unter 782px.
	 *
	 * Ringe/Laser vertikal nach unten (<782px): nur Deko-Schicht, nicht der Redaktionsinhalt der Group.
	 */
	.wp-block-group.is-style-precisis-hero-rings {
		/* Gesamte Deko-Zeile nach unten schieben (Abstand oberhalb der beiden Spalten) */
		--precisis-hero-rings-flex-padding-top-mobile: clamp(180px, 35vw, 500px);
		/*
		 * Laser vertikal: Anteil von oben relativ zur Höhe der ersten Deko-Spalte (min-height unten).
		 * z. B. 80% = weit unten; alternativ Längen wie 45vh möglich.
		 */
		--precisis-hero-rings-laser-y-mobile: 60%;
		/* Bezugsfläche für Prozent — erhöhen = mehr Platz, gleiches % wirkt weiter unten absolut */
		--precisis-hero-rings-laser-column-min-height-mobile: 50vh;
		/*
		 * Wie weit der Laser in X „reinfährt“: Endbreite der Animation = % der Spaltenbreite
		 * (.precisis-hero-rings__ray). Kleiner = kürzerer Strahl, bis z. B. 100%.
		 */
		--precisis-hero-rings-ray-target-width: 20%;
	}

	.precisis-hero-rings__flex-container {
		flex-direction: column;
		padding-top: var(--precisis-hero-rings-flex-padding-top-mobile);
		gap: clamp(2rem, 8vw, 100px);
	}

	.wp-block-group.is-style-precisis-hero-rings.hide-rings .precisis-hero-rings__flex-container {
		padding-top: 0;
	}

	.precisis-hero-rings__flex-container > .precisis-hero-rings__col:last-child {
		min-height: 0;
	}

	/*
	 * %-top braucht eine Höhe der Spalte; Strahl absolut, Mitte auf der %-Linie (translateY -50%).
	 */
	.precisis-hero-rings__flex-container > .precisis-hero-rings__col:first-child {
		position: relative;
		justify-content: flex-start;
		min-height: var(--precisis-hero-rings-laser-column-min-height-mobile);
		flex: 1 1 auto;
	}

	.precisis-hero-rings__flex-container > .precisis-hero-rings__col:first-child .precisis-hero-rings__ray {
		position: absolute;
		left: 0;
		width: 50%;
		max-width: 100%;
		top: var(--precisis-hero-rings-laser-y-mobile);
		transform: translateY(-50%);
	}

	/*
	 * Scroll-Nudge (precisis-laser.js): X aus --precisis-hero-ray-scroll-x, Y beibehalten.
	 */
	.wp-block-group.is-style-precisis-hero-rings.connect-to-scroll .precisis-hero-rings__flex-container > .precisis-hero-rings__col:first-child .precisis-hero-rings__ray {
		transform: translate(var(--precisis-hero-ray-scroll-x, 0px), -50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.precisis-hero-rings__ray {
		width: var(--precisis-hero-rings-ray-target-width);
		animation: none;
	}

	.precisis-hero-rings__dot {
		animation: none;
	}

	.precisis-hero-rings__rings > .precisis-hero-rings__ring-parallax-layer {
		animation: none;
		opacity: 1;
	}
}