/**
 * Pollux Pfade: Übersicht ([pollux_pfade]) und Pfad-Box in Beiträgen.
 * Nutzt die Design-Tokens des Pollux-Labs-Themes, mit Fallback-Werten.
 */

/* ---- Übersicht ---- */
.pollux-pfade__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	margin: 0 0 var(--space-7, 48px);
}
.pollux-pfade__nav a {
	padding: 6px 14px;
	border: 1px solid var(--line-strong, #c9c5bd);
	border-radius: var(--radius-pill, 999px);
	font-size: var(--text-sm, .88rem);
	font-weight: var(--weight-medium, 500);
	color: var(--ink, #24262b);
	text-decoration: none;
	transition: border-color var(--transition-fast, 140ms), color var(--transition-fast, 140ms);
}
.pollux-pfade__nav a:hover {
	border-color: var(--accent, #1f7a8c);
	color: var(--accent, #1f7a8c);
}

.pollux-pfad {
	margin: 0 0 var(--space-8, 64px);
	scroll-margin-top: var(--space-8, 64px);
}
.pollux-pfad__bar {
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent, #1f7a8c);
	margin-bottom: var(--space-3, 12px);
}
.pollux-pfad__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3, 12px);
	margin: 0 0 var(--space-2, 8px);
	font-size: var(--text-sm, .88rem);
	color: var(--ink-3, #6b6f78);
}
.entry-content .pollux-pfad__title { margin: 0 0 var(--space-3, 12px); }
.pollux-pfad__intro {
	font-size: var(--text-md, 1.25rem);
	line-height: var(--leading-snug, 1.35);
	color: var(--ink, #24262b);
	margin: 0 0 var(--space-3, 12px);
}
.entry-content .pollux-pfad__media {
	margin: var(--space-5, 24px) 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	background: var(--bg-alt, #f3f1ec);
}
.entry-content .pollux-pfad__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.pollux-pfad__skills {
	color: var(--ink-2, #55585f);
	margin: 0 0 var(--space-5, 24px);
}

/* Schritte */
.entry-content .pollux-pfad__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pfad;
	border-top: 1px solid var(--line, #dedad2);
}
.entry-content .pollux-pfad__step {
	counter-increment: pfad;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2, 8px) var(--space-4, 16px);
	margin: 0;
	padding: var(--space-3, 12px);
	border-bottom: 1px solid var(--line, #dedad2);
}
.pollux-pfad__step::before {
	content: counter(pfad, decimal-leading-zero);
	flex: none;
	font-family: var(--font-mono, monospace);
	font-size: var(--text-sm, .88rem);
	color: var(--ink-3, #6b6f78);
	font-variant-numeric: tabular-nums;
}
.pollux-pfad__step a {
	flex: 1 1 16rem;
	text-decoration: none;
	color: var(--ink, #24262b);
}
.pollux-pfad__step a:hover {
	color: var(--accent, #1f7a8c);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pollux-pfad__step-meta {
	flex: none;
	font-size: var(--text-sm, .88rem);
	color: var(--ink-3, #6b6f78);
	white-space: nowrap;
}
.pollux-pfad__step.is-final {
	background: var(--accent-soft, #e3f1f4);
	border-bottom-color: transparent;
	border-radius: var(--radius-md, 8px);
}
.pollux-pfad__step.is-final a { font-weight: var(--weight-semibold, 600); }
.pollux-pfad__step.is-final::before,
.pollux-pfad__step.is-final .pollux-pfad__step-meta { color: var(--accent-soft-ink, #1c5b69); }

/* Zugabe */
.entry-content .pollux-pfad__bonus-label,
.pollux-pfad__bonus-label {
	margin: var(--space-5, 24px) 0 var(--space-2, 8px);
	font-size: var(--text-xs, .76rem);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: var(--tracking-label, .08em);
	text-transform: uppercase;
	color: var(--ink-3, #6b6f78);
}
.entry-content .pollux-pfad__bonus {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px) var(--space-5, 24px);
}
.entry-content .pollux-pfad__bonus li { margin: 0; }

/* ---- Pfad-Box im Beitrag ---- */
.pollux-pfad-box {
	background: var(--accent-soft, #e3f1f4);
	border-radius: var(--radius-md, 8px);
	padding: var(--space-4, 16px) var(--space-5, 24px);
	margin: 0 0 var(--space-6, 32px);
	color: var(--ink, #24262b);
}
.pollux-pfad-box--next {
	margin: var(--space-7, 48px) 0 var(--space-6, 32px);
	padding: var(--space-5, 24px);
}
.pollux-pfad-box__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--space-2, 8px);
	font-size: var(--text-xs, .76rem);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: var(--tracking-label, .08em);
	text-transform: uppercase;
	color: var(--accent-soft-ink, #1c5b69);
}
.pollux-pfad-box__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent, #1f7a8c);
	flex: none;
}
.entry-content .pollux-pfad-box__text { margin: 0; }
.pollux-pfad-box__row + .pollux-pfad-box__row {
	margin-top: var(--space-4, 16px);
	padding-top: var(--space-4, 16px);
	border-top: 1px solid color-mix(in oklab, var(--accent, #1f7a8c) 22%, transparent);
}
.entry-content a.pollux-pfad-box__next {
	display: block;
	margin-top: var(--space-2, 8px);
	font-family: var(--font-display, inherit);
	font-size: var(--text-lg, 1.5rem);
	font-weight: var(--weight-display, 600);
	line-height: var(--leading-tight, 1.15);
	color: var(--ink, #24262b);
	text-decoration: none;
}
.pollux-pfad-box__next span { color: var(--accent-soft-ink, #1c5b69); }
.entry-content a.pollux-pfad-box__next:hover { color: var(--accent, #1f7a8c); }
.entry-content .pollux-pfad-box__done {
	margin: var(--space-2, 8px) 0 0;
	font-weight: var(--weight-semibold, 600);
}
.entry-content a.pollux-pfad-box__prev {
	display: inline-block;
	margin-top: var(--space-3, 12px);
	font-size: var(--text-sm, .88rem);
	font-weight: var(--weight-body, 400);
	color: var(--ink-2, #55585f);
}