/* .sticky-bar-nav: Sprungmarken-Liste; Spy-Klasse .is-precisis-sticky-active am li */

/*
 * Platzhalter unter Hero-Ringen: hält Zeilenfläche, wenn die Nav per JS auf fixed geschaltet wird.
 */
.precisis-sticky-bar-nav-flow-placeholder {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	flex-shrink: 0;
	pointer-events: none;
}

/*
 * „Viewport-Sticky“: JS hängt die Nav beim Pinnen an document.body an (fixed sonst in Stapelkontexten
 * unterhalb späteren Blocks gefangen). WP sticky wird durch fixed übertüncht.
 */
body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned {
	--precisis-sticky-nav-grad-duration: 0.45s;
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	/* Über Site-Header / Hero-Schichten (#wpadminbar ~99999); bei Konflikten ggf. nur hier anheben */
	z-index: 999999;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	isolation: isolate;
}

body.admin-bar:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned {
		top: 46px;
	}
}

/*
 * Über anderen Hero-Inhalten (Hero-Kinder-Regel nutzt nur z-index: 3); ohne position,
 * damit WP-sticky nicht überschrieben wird. Auch wenn .sticky-bar-nav nicht direktes Kind ist.
 */
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav {
	--precisis-sticky-nav-grad-duration: 0.45s;
	z-index: 999998;
	isolation: isolate;
}

/*
 * Volle Breite ohne globales Root-Padding — ohne 100vw: Zeilenbreite + Ausgleichsmargins (Theme JSON).
 */
.wp-block-group.alignfull.is-style-precisis-hero-rings > .sticky-bar-nav,
.wp-block-group.is-style-precisis-hero-rings.alignfull > .sticky-bar-nav,
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav,
.wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-group.alignfull.is-style-precisis-hero-rings > .sticky-bar-nav,
.wp-block-cover.alignfull .wp-block-cover__inner-container .wp-block-group.alignfull.is-style-precisis-hero-rings > .sticky-bar-nav {
	--precisis-sticky-nav-root-pl: var(--wp--style--root--padding-left, 0px);
	--precisis-sticky-nav-root-pr: var(--wp--style--root--padding-right, 0px);

	width: calc(100% + var(--precisis-sticky-nav-root-pl) + var(--precisis-sticky-nav-root-pr) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	max-width: none;
	margin-left: calc(-1 * (var(--precisis-sticky-nav-root-pl) + var(--wp--style--root--padding-left))) !important;
	margin-right: calc(-1 * (var(--precisis-sticky-nav-root-pr) + var(--wp--style--root--padding-right))) !important;
	box-sizing: border-box;
}

.sticky-bar-nav .wp-block-list{
	padding-top: 15px;
	padding-bottom: 15px;
}

/*
 * Hero-Sticky: zwei Überlagerungen (::before = im Hero-Bereich, ::after = nach erster Section).
 * Wechsel per opacity (Übergang wirkt zuverlässig — background-image ist nicht interpolierbar).
 */
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav::before,
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
	transition: opacity var(--precisis-sticky-nav-grad-duration, 0.45s) ease;
}

/* Hero-Zustand: heller Streifen rechts auslaufen; darunter weiter die WP-Group-Hintergrundfarbe. */
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav::before {
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	opacity: 1;
	background-image: linear-gradient(
		to left,
		#ffffff 0%,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* Nach erste Section — gleiche Fläche, Standard-Verlauf (per Variable überschreibbar). */
.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav::after {
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	opacity: 0;
	background-image: var(
		--precisis-sticky-nav-gradient-beyond,
		linear-gradient(90deg, rgb(31, 59, 76) 0%, rgb(73, 138, 178) 99%)
	);
}

.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav.is-precisis-sticky-beyond-first-section::before {
	opacity: 0;
}

.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav.is-precisis-sticky-beyond-first-section::after {
	opacity: 1;
}

.wp-block-group.is-style-precisis-hero-rings .sticky-bar-nav .wp-block-list {
	position: relative;
	z-index: 2;
}

/* Gepinnt unter body: gleiches Crossfade ohne Hero-Vorfahr. */
body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned::before,
body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	transform: none;
	pointer-events: none;
	transition: opacity var(--precisis-sticky-nav-grad-duration, 0.45s) ease;
}

body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned::before {
	z-index: 0;
	opacity: 1;
	background-image: linear-gradient(
		to left,
		#ffffff 0%,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned::after {
	z-index: 1;
	opacity: 0;
	background-image: var(
		--precisis-sticky-nav-gradient-beyond-pinned,
		var(
			--precisis-sticky-nav-gradient-beyond,
			linear-gradient(90deg, rgb(31, 59, 76) 0%, rgb(73, 138, 178) 99%)
		)
	);
}

body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned.is-precisis-sticky-beyond-first-section::before {
	opacity: 0;
}

body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned.is-precisis-sticky-beyond-first-section::after {
	opacity: 1;
}

body:not( .wp-admin ) .sticky-bar-nav.is-precisis-viewport-sticky.is-precisis-sticky-pinned .wp-block-list {
	position: relative;
	z-index: 2;
}

.is-sticky-stack .sticky-bar-nav.wp-block-group.is-position-sticky {
	transform: none !important;
	opacity: 1 !important;
	will-change: auto !important;
	transition: none !important;
}

.wp-block-group:has( > .sticky-bar-nav.is-position-sticky ),
.wp-block-column:has( > .sticky-bar-nav.is-position-sticky ) {
	overflow: visible;
}

body:not( .wp-admin ) .wp-site-blocks > main:has( .sticky-bar-nav ) {
	overflow-anchor: none;
}

.sticky-bar-nav,
.sticky-bar-nav .wp-block-list {
	overflow-anchor: none;
}


.sticky-bar-nav .wp-block-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--wp--preset--spacing--large, 2rem);
	row-gap: var(--wp--preset--spacing--small, 0.75rem);
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
	box-sizing: border-box;
}

.sticky-bar-nav .wp-block-list > li {
	margin: 0;
	list-style-type: none;
}

.sticky-bar-nav .wp-block-list a {
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
	font-weight: 300;
	opacity: 0.82;
	padding-bottom: 13px;
	border-bottom: 4px solid transparent;
	box-sizing: border-box;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.sticky-bar-nav .wp-block-list a:hover,
.sticky-bar-nav .wp-block-list a:focus-visible {
	opacity: 1;
	border-bottom-color: var(--wp--preset--color--base, #fff);
}

.sticky-bar-nav .wp-block-list > li.is-precisis-sticky-active a {
	opacity: 1;
	border-bottom-color: var(--wp--preset--color--base, #fff);
}

@media (max-width: 782px) {
	.sticky-bar-nav {
		overflow-x: visible;
	}

	.sticky-bar-nav .wp-block-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		row-gap: 0;
		max-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border-light, #3d5a6d) transparent;
		margin-inline-end: -24px;
		padding-inline-end: 24px;
	}

	.sticky-bar-nav .wp-block-list::-webkit-scrollbar {
		height: 5px;
	}

	.sticky-bar-nav .wp-block-list::-webkit-scrollbar-thumb {
		background-color: var(--wp--preset--color--border-light, #3d5a6d);
		border-radius: 3px;
	}

	.sticky-bar-nav .wp-block-list > li {
		flex-shrink: 0;
	}

	.sticky-bar-nav .wp-block-list a {
		white-space: nowrap;
	}
}