/**
 * Breadcrumb-Modul: Struktur-CSS des Pfades.
 *
 * Konsumiert ausschließlich `--pasb-*`-Custom-Properties (erzeugt von
 * PAS_Breadcrumb_Design_CSS). Nicht gesetzte Variablen fallen auf den `var()`-Fallback
 * zurück – dann erbt der Pfad die Schrift des Themes.
 *
 * Die Regeln für schmale Bildschirme liegen NICHT hier, sondern werden mit der
 * eingestellten Umschaltbreite als Inline-Media-Query erzeugt.
 */

.pasb {
	margin-top: var(--pasb-margin-top, 0);
	margin-bottom: var(--pasb-margin-bottom, 16px);
}

.pasb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--pasb-justify, flex-start);
	row-gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--pasb-font-family, inherit);
	font-size: var(--pasb-font-size, inherit);
	font-weight: var(--pasb-font-weight, inherit);
	line-height: var(--pasb-line-height, inherit);
	letter-spacing: var(--pasb-letter-spacing, normal);
	text-transform: var(--pasb-transform, none);
}

.pasb__list::before,
.pasb__list::after {
	display: none; /* Theme-Float-Clears neutralisieren. */
}

.pasb__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------------------------------------------
 * Ebenen (Link / reiner Text / aktuelle Seite)
 * ------------------------------------------------------------------------- */
.pasb__link,
.pasb__text {
	display: inline-flex;
	align-items: center;
	color: var(--pasb-color, inherit);
	text-decoration: var(--pasb-decoration, none);
	transition: color 0.15s ease;
}

.pasb__link:hover,
.pasb__link:focus {
	color: var(--pasb-color-hover, inherit);
	text-decoration: var(--pasb-decoration-hover, underline);
}

.pasb__current {
	color: var(--pasb-current-color, inherit);
	font-weight: var(--pasb-current-font-weight, inherit);
	font-size: var(--pasb-current-font-size, inherit);
}

/* Der optionale Selbstlink der aktuellen Seite behält seinen Hover. */
a.pasb__current:hover,
a.pasb__current:focus {
	color: var(--pasb-color-hover, inherit);
}

/* ----------------------------------------------------------------------------
 * Trennzeichen
 * ------------------------------------------------------------------------- */
.pasb__sep {
	display: inline-block;
	flex: 0 0 auto;
	margin-left: var(--pasb-sep-gap-left, 8px);
	margin-right: var(--pasb-sep-gap-right, 8px);
	color: var(--pasb-sep-color, inherit);
	font-size: var(--pasb-sep-size, inherit);
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Vor der ersten Ebene steht kein Trennzeichen. */
.pasb__item:first-child .pasb__sep {
	display: none;
}

/* ----------------------------------------------------------------------------
 * Icons
 *
 * Höhe steuert die Größe, Breite folgt – zwei Katalog-Icons sind nicht quadratisch
 * und würden bei fester Breite verzerren.
 * ------------------------------------------------------------------------- */
.pasb__icon {
	display: block;
	width: auto;
	color: var(--pasb-icon-color, currentColor);
	transition: color 0.15s ease;
}

.pasb__item[data-level="home"] .pasb__icon {
	height: var(--pasb-home-icon-size, 16px);
}

.pasb__item[data-level="shop"] .pasb__icon {
	height: var(--pasb-shop-icon-size, 16px);
}

.pasb__link:hover .pasb__icon,
.pasb__link:focus .pasb__icon {
	color: var(--pasb-icon-color-hover, currentColor);
}

/* ----------------------------------------------------------------------------
 * Prefix („Zurück"-Zeichen vor der Eltern-Ebene auf schmalen Bildschirmen)
 * ------------------------------------------------------------------------- */
.pasb__prefix {
	display: none;
	flex: 0 0 auto;
	margin-right: 0.35em;
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;
}