/* ──────────────────────────────────────────────────────────────────────────
 * bold-pd-nav.css — sticky in-page section nav (navy bar under the site header)
 * Mirrors the dosomat-move anchor nav: navy bar, active link teal, teal CTA.
 * Contrast notes:
 *   - Inactive links rgba(255,255,255,.85) on navy #002a4e → > 9:1. AA pass.
 *   - Active link teal #02e8c2 on navy #002a4e → 9.4:1. AA pass.
 *   - Teal "Kontakt" button: dark ink #00231d on #02e8c2 → > 12:1. AA pass.
 * The site header is position:fixed; it offsets content via `.page-header-mellow + *`.
 * --site-header-h tracks that offset so this bar sticks flush beneath it.
 * ────────────────────────────────────────────────────────────────────────── */

.bold-pd {
	--site-header-h: 7.6875rem; /* matches header.css `.page-header-mellow + *` margin-top */
	/* The injected header is position:fixed and its `+ *` offset lands on the
	   fixed sticky bar (no layout effect), so <main> needs the offset itself. */
	margin-top: var(--site-header-h);
}

@media (max-height: 850px), (max-width: 90rem) {
	.bold-pd {
		--site-header-h: 4.0625rem;
	}
}

.bold-pd .pd-nav {
	position: sticky;
	/* --site-header-now tracks the header's *live* height (it collapses on scroll
	   via .scrolled in the shared header). Falls back to the static offset with no JS. */
	top: var(--site-header-now, var(--site-header-h));
	z-index: 50;
	background: var(--c-navy);
	border-bottom: 0.0625rem solid rgb(var(--c-teal-rgb) / 0.25);
}

.bold-pd .pd-nav__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3.75rem;
}

.bold-pd .pd-nav__list {
	display: flex;
	flex: 1;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.bold-pd .pd-nav__link {
	display: inline-block;
	padding: 1.1rem 1rem;
	color: rgb(var(--c-white-rgb) / 0.85);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 0.1875rem solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bold-pd .pd-nav__link:hover {
	color: var(--c-white);
}

.bold-pd .pd-nav__link.is-active {
	color: var(--c-teal);
	border-bottom-color: var(--c-teal);
}

.bold-pd .pd-nav__link:focus-visible {
	outline: 0.125rem solid var(--c-teal);
	outline-offset: -0.125rem;
}

.bold-pd .pd-nav__cta {
	flex: none;
	background: var(--c-teal);
	color: var(--c-teal-ink);
	border-color: var(--c-teal);
	font-weight: 700;
}

.bold-pd .pd-nav__cta:hover {
	background: #2ff5d2;
	border-color: #2ff5d2;
}

.bold-pd .pd-nav__cta:focus-visible {
	outline: 0.125rem solid var(--c-white);
	outline-offset: 0.125rem;
}

/* Anchored sections need scroll-margin so the sticky bars don't cover the heading. */
.bold-pd [id="branchen"],
.bold-pd [id="referenzen"],
.bold-pd [id="details"],
.bold-pd [id="faq"],
.bold-pd [id="kontakt"] {
	scroll-margin-top: calc(var(--site-header-now, var(--site-header-h)) + 4.5rem);
}

@media (max-width: 48rem) {
	.bold-pd .pd-nav__inner {
		gap: 0.5rem;
	}
	.bold-pd .pd-nav__link {
		padding: 0.9rem 0.7rem;
		font-size: 0.9375rem;
	}
	/* CTA is redundant on mobile (persistent bottom bar + header handle contact);
	   hiding it gives the scrollable link strip the full width so all sections show.
	   Scoped to .pd-nav so the hero CTA (which reuses .pd-nav__cta) stays visible. */
	.bold-pd .pd-nav .pd-nav__cta {
		display: none;
	}
	/* subtle right fade as a scroll affordance for the link strip */
	.bold-pd .pd-nav__inner {
		position: relative;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}
}