/* Sichtbare Brotkrumen-Navigation (nav.crumbs) auf Unterseiten der zweiten Ebene (blog/*, produkte/*, gutachten/*).
   Wird vom Build gerendert (build.mjs: {{CRUMBS}} aus denselben Daten wie die BreadcrumbList-JSON-LD) und
   nur auf diesen Seiten eingebunden. Schrift-Rolle: klein = step--1. */
.crumbs { font-size: var(--step--1); color: var(--color-muted); line-height: 1.4; }
/* flex-direction/padding explizit: .legal ol (base.css) setzt column + padding-left bei gleicher Spezifität */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: .1rem .45rem; }
.crumbs li { overflow-wrap: anywhere; }
.crumbs li + li::before { content: "›" / ""; margin-right: .45rem; color: var(--color-muted); }
.crumbs a { color: var(--color-ink); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.crumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }
/* Produktseiten: Krümel stehen als eigene Zeile über dem Buybox-Abschnitt (Klasse container vom Build) */
.crumbs.container { padding-block: var(--space-s) 0; }
/* Blog/Gutachten: Krümel sind erstes Kind des .flow-Containers → Abstand zum Eyebrow/H1 klein halten */
.flow > .crumbs + * { margin-top: var(--space-2xs); }