/* ──────────────────────────────────────────────────────────────────────────
 * pd-subnav.css — sticky in-page section nav + persistent contact CTA (CD-treu)
 *
 * Löst zwei Feedback-Punkte (Besprechung 08.07.) in einer Leiste:
 *   1) Orientierung/Wayfinding auf der langen Produktseite (Sprungmarken)
 *   2) „CTA verschwindet" → Kontakt-Button + Telefon dauerhaft sichtbar
 *
 * Dunkelblaue Leiste (--c-secondary, im CI-Rahmen freigegeben), weiß-gefüllter
 * CTA für maximalen Kontrast. Klebt bündig unter dem fixierten Header
 * (top: --header-h, wie die frühere .sticky-cta).
 *
 * Kontrast: Links rgba(255,255,255,.85) auf #004f8e → ~6,5:1 (AA). Aktiv +
 * CTA-Text #005ea8 auf Weiß → ~5,6:1 (AA).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumb-Zeile — schmales helles Band direkt unter der Anker-Nav ──────
 * Sitzt direkt unter der Subnav. Bewusst hell (weiß, graue Schrift), damit es
 * NICHT mit dem dunkelblauen Band verschwimmt (das Problem der früheren zwei
 * gleich-blauen Bänder). Haarlinie unten grenzt es sauber vom weißen Hero ab. */

.pd-breadcrumb {
	background: var(--c-surface);
	border-bottom: 0.0625rem solid var(--c-border-light);
}

.pd-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0.625rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.pd-breadcrumb li {
	display: inline-flex;
	align-items: center;
}

/* ▶ Trenner — Marken-Formensprache (wie Buttons/Sektionen), dezent grau */
.pd-breadcrumb li + li::before {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	margin: 0 0.625rem;
	border-style: solid;
	border-width: 0.25rem 0 0.25rem 0.375rem;
	border-color: transparent transparent transparent var(--c-border-light);
}

.pd-breadcrumb a {
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.pd-breadcrumb a:hover {
	color: var(--c-primary);
}

.pd-breadcrumb [aria-current="page"] {
	color: var(--c-text);
	font-weight: 600;
}

.pd-subnav {
	position: sticky;
	top: var(--header-h);
	z-index: 90;
	background: var(--c-secondary);
	transition: box-shadow 0.2s ease;
}

/* Schatten erst, wenn die Leiste wirklich klebt (Feedback Lisa 14.08., Punkt 4).
   Im Ruhezustand sitzt sie bündig am Header und braucht keine Abhebung — der
   Schatten fiel dort auf die Breadcrumb-Zeile darunter und ließ deren oberen
   Abstand kleiner wirken als den unteren. .is-stuck setzt pd-subnav.js. */
.pd-subnav.is-stuck {
	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.18);
}

.pd-subnav__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 3.5rem;
}

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

.pd-subnav__link {
	display: inline-block;
	padding: 1rem 0.9rem;
	color: rgb(var(--c-white-rgb) / 0.85);
	font-size: 0.9375rem;
	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;
}

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

.pd-subnav__link.is-active {
	color: var(--c-white);
	border-bottom-color: var(--c-white);
}

/* Zustand: die Keyline war weiß und damit dasselbe Signal wie der Hover-Text —
   der aktive Abschnitt ging in der Leiste unter. Mint auf --c-secondary: 5,3:1. */
.theme-cd .pd-subnav__link.is-active {
	border-bottom-color: var(--c-service);
}

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

.pd-subnav__tel {
	flex: none;
	color: var(--c-white);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.pd-subnav__tel:hover {
	text-decoration: underline;
	color: var(--c-white);
}

/* CTA in der Dauerleiste — nur Größe. Farben, Hover und Dreieck kommen aus
   cta.css über btn--primary btn--invert, damit der Button in der Leiste
   dieselbe Rolle spielt wie der im Hero (Feedback Lisa 14.08., Punkt 2). */
.pd-subnav__cta {
	flex: none;
	padding: 0.6rem 1.4rem;
	font-size: 0.9375rem;
}

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

/* Sprungziele: scroll-margin, damit Header + Subnav die Überschrift nicht
   verdecken (Header ~4,5rem + Subnav ~3,5rem). */
.pd [id="leistung"],
.pd [id="branchen"],
.pd [id="referenzen"],
.pd [id="details"],
.pd [id="faq"],
.pd [id="kontakt"] {
	scroll-margin-top: calc(var(--header-h) + 4rem);
}

/* Responsive */

@media (max-width: 48rem) {
	.pd-subnav {
		top: var(--header-h-mobile);
	}

	/* Zweizeilig: Sprungmarken über die volle Breite (Zeile 1), vollbreiter CTA
	   darunter (Zeile 2). So drängt der CTA die Links nicht mehr zusammen und
	   wird selbst zum großen Tap-Target. */
	.pd-subnav__inner {
		flex-wrap: wrap;
		gap: 0.4rem 0;
		min-height: 0;
		padding-block: 0.5rem;
	}

	.pd-subnav__list {
		flex: 1 1 100%;
		order: 1;
		/* dezenter Rechts-Fade als Scroll-Hinweis */
		-webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
		mask-image: linear-gradient(to right, #000 92%, transparent 100%);
	}

	.pd-subnav__link {
		padding: 0.5rem 0.7rem;
	}

	/* Telefon weicht dem vollbreiten CTA */
	.pd-subnav__tel {
		display: none;
	}

	.pd-subnav__cta {
		order: 2;
		flex: 1 1 100%;
		text-align: center;
		padding-block: 0.7rem;
	}

	/* Breadcrumb — größere Tap-Targets (statt 18px) */
	.pd-breadcrumb a,
	.pd-breadcrumb [aria-current="page"] {
		display: inline-block;
		padding-block: 0.35rem;
	}

	/* Sprungziele: höhere Nav-Zone auf Mobil einrechnen */
	.pd [id="leistung"],
	.pd [id="branchen"],
	.pd [id="referenzen"],
	.pd [id="details"],
	.pd [id="faq"],
	.pd [id="kontakt"] {
		scroll-margin-top: calc(var(--header-h-mobile) + 6rem);
	}
}