/**
 * Brotkrumenspur (.sk-breadcrumbs)
 *
 * Wird nur auf Beitraegen und Kategorie-Archiven geladen, siehe
 * template-parts/breadcrumbs-pfad.php. Keine eigenen Farb- oder
 * Abstandswerte -- ausschliesslich Tokens aus main.css.
 *
 * Das Trennzeichen steht bewusst im CSS und nicht im Markup: im Text waere
 * es eine Stufe, die Vorlesehilfen mitsprechen. Als ::before eines
 * Listenpunkts bleibt es dekorativ, und aria-hidden ist dafuer nicht noetig,
 * weil erzeugter Inhalt ohnehin nicht im Barrierebaum landet.
 */

.sk-breadcrumbs {
	padding-block: var(--sk-space-sm) 0;
	font-family: var(--sk-font-body);
	font-size: var(--sk-fs-small);
	line-height: var(--sk-lh-body);
}

.sk-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-3xs) var(--sk-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2xs);
	margin: 0;
	padding: 0;
}

/*
 * Das Trennzeichen sitzt VOR jeder Stufe ausser der ersten. So bleibt es
 * auch dann korrekt, wenn die Zeile umbricht: der Winkel wandert mit der
 * Stufe in die naechste Zeile, statt am Ende der vorigen zu haengen.
 */
.sk-breadcrumbs__item + .sk-breadcrumbs__item::before {
	content: "\203A";
	color: var(--sk-color-text-dim);
}

.sk-breadcrumbs__link {
	color: var(--sk-color-text-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sk-breadcrumbs__link:hover,
.sk-breadcrumbs__link:focus-visible {
	color: var(--sk-color-gold);
	border-bottom-color: currentColor;
}

/*
 * Die aktuelle Seite ist kein Verweis. Sie bleibt heller als die Verweise
 * darueber, damit die Blickfuehrung am Ende des Pfades ankommt, und darf
 * auf schmalen Viewports gekuerzt werden -- der Titel eines Ratgeber-
 * beitrags ist laenger als eine Zeile auf dem Telefon.
 */
.sk-breadcrumbs__current {
	color: var(--sk-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

@media (max-width: 40rem) {
	.sk-breadcrumbs__current {
		max-width: 18ch;
	}
}

/* Der Pfad ist Navigation, kein Inhalt: im Druck faellt er weg. */
@media print {
	.sk-breadcrumbs {
		display: none;
	}
}