/*
  Chrome-Stylesheet: für Bausteine, die unabhängig vom `frame`
  (shared/standalone) auf jeder Seite gleich aussehen sollen, siehe
  partials/breadcrumbs.njk. Deshalb hier mit festen Farbwerten statt
  CSS-Variablen — shared und standalone Seiten nutzen unterschiedliche
  Custom-Property-Namen, ein var()-Verweis wäre auf der jeweils anderen
  Seite nicht definiert. Immer geladen, siehe layouts/base.njk.
*/
.breadcrumbs {
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  background: #F1F5F9;
  border-bottom: 1px solid rgba(11, 31, 42, 0.12);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(36, 59, 74, 0.65);
}
.breadcrumbs li:not(:first-child)::before {
  content: "\203A";
  color: rgba(36, 59, 74, 0.4);
}
.breadcrumbs a {
  color: #243B4A;
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: rgba(36, 59, 74, 0.65);
}