/* Brotkrumen. Eine Fassung für Kategorie-, Ratgeber- und Produktseite.
   Vorher lagen drei da: eine mit ol/li, eine mit gedrehten Chevron-Bildern,
   eine mit einem ›-Zeichen direkt im Markup – in drei Schriftgrößen und drei
   Farben. Der Trenner kommt jetzt aus dem CSS, das Markup ist überall gleich.

   Auf dem Handy schiebt sich eine lange Kette seitlich weg, statt zwei Zeilen
   zu belegen und die Seite nach unten zu drücken. */

.breadcrumb ol {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
	overflow-x: auto;
	margin: 0;
	padding: var(--ffg-space-4) 0;
	font-size: var(--ffg-size-sm);
	list-style: none;
	scrollbar-width: none;
	white-space: nowrap;
}

.breadcrumb ol::-webkit-scrollbar {
	display: none;
}

.breadcrumb li {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
}

.breadcrumb li + li::before {
	content: "›";
	color: var(--ffg-brown-logo);
}

.breadcrumb a {
	color: var(--ffg-text);
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb [aria-current] {
	color: var(--ffg-brown-dark);
	font-weight: 600;
}