/* VDX Breadcrumb – Basis-Styles für Ellipsen und eingeklappte Ebenen (ohne JavaScript). */

.vdx-breadcrumb,
.vdx-breadcrumb__item,
.vdx-breadcrumb__collapse,
.vdx-breadcrumb__collapsed {
	display: inline;
}

.vdx-breadcrumb__toggle {
	display: inline;
	cursor: pointer;
	list-style: none;
}

/* Aufklapp-Dreieck des Browsers entfernen. */
.vdx-breadcrumb__toggle::-webkit-details-marker {
	display: none;
}

.vdx-breadcrumb__toggle::marker {
	content: "";
}

.vdx-breadcrumb__toggle:hover {
	text-decoration: underline;
}

.vdx-breadcrumb__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Inhalt von <details> inline statt als Block darstellen (sonst Umbruch beim Aufklappen).
 * Eigene Regeln, damit ältere Browser ohne ::details-content nicht die übrigen Regeln verwerfen.
 * Zugeklappt explizit ausblenden: content-visibility (Browser-Standard) greift bei Inline-Boxen nicht.
 */
.vdx-breadcrumb__collapse::details-content {
	display: inline;
}

.vdx-breadcrumb__collapse:not([open])::details-content {
	display: none;
}

/* Geöffnet: Ellipse ausblenden, eingeblendete Ebenen stehen an ihrer Stelle. */
.vdx-breadcrumb__collapse[open] > .vdx-breadcrumb__toggle {
	display: none;
}

.vdx-breadcrumb__ellipsis {
	opacity: 0.7;
}