/**
*  Lokale Navigation in der Seitenleiste
*
*  Kontraste (WCAG AA, geprüft, auf --paper):
*  - Titel   --ink-navy-soft: 12 : 1
*  - Links   --ink-navy: 15 : 1
*  - Aktiv   --warm-3: 5,4 : 1
*
*  Zielgröße: jede Zeile mindestens 2,75rem (44 px) hoch.
**/

.c-local-nav {
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--paper-line);
	border-radius: 0.35rem;
	background: var(--surface-card);
}

.c-local-nav__title {
	--eyebrow-color: var(--ink-navy-soft);
	margin: 0 0 var(--space-xs);
	padding-inline-start: var(--space-xs);
	border-inline-start: 4px solid var(--stripe);
}

.c-local-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-local-nav__item {
	margin: 0;
	padding: 0;
	border-block-end: 1px solid var(--paper-line);

	&:last-child {
		border-block-end: 0;
	}
}

.c-local-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	min-block-size: 2.75rem;
	padding-block: 0.5rem;
	color: var(--ink-navy);
	font-family: var(--font-interface);
	font-size: var(--fs-0);
	line-height: 1.3;
	text-decoration: none;

	&:hover {
		color: var(--color-highlight-strong);
	}

	&:focus-visible {
		outline: 3px solid var(--ink-navy);
		outline-offset: 2px;
	}

	&.is-active {
		color: var(--color-highlight-strong);
		font-weight: 700;

		&::after {
			content: "→";
			content: "→" / "";
		}
	}
}