/* Kopfzeile: Maße nach Vorlage (60px hoch bei 1920px) */
:where(.top-bar) {
    --top-bar-bg: var(--color-white);
    --top-bar-color: var(--color-primary);
    --top-bar-height: clamp(34px, 3.125vw, 60px);
    --top-bar-inset: clamp(12px, 1.15vw, 22px);
    --top-bar-font-size: var(--font-size-txt-s);
    --top-bar-brand-size: 0.9em;
}

.top-bar {
    display: flex;
    align-items: center;
    min-height: var(--top-bar-height);
    padding: 0 var(--top-bar-inset);
    background: var(--top-bar-bg);
    color: var(--top-bar-color);
    font-size: var(--top-bar-font-size);
    line-height: 1.3;
    letter-spacing: 0.03em;
}

.top-bar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* flex: Leerraum aus dem Template-Markup fällt weg, Trenner sitzt mittig */
.top-bar__item {
    display: flex;
    align-items: baseline;
}

.top-bar__item + .top-bar__item::before {
    content: '|';
    margin: 0 0.3em;
}

.top-bar__item--brand {
    font-size: var(--top-bar-brand-size);
    font-weight: var(--font-weight-txt-bold);
    letter-spacing: 0.073em;
    text-transform: uppercase;
}

.top-bar a {
    color: inherit;
}

.top-bar a:hover,
.top-bar a:focus-visible {
    text-decoration: underline;
}

/* Mobil: zentriert, Einträge brechen um */
@media (max-width: 599px) {
    .top-bar {
        justify-content: center;
        padding: 6px 12px;
        font-size: 11px;
    }

    .top-bar__list {
        justify-content: center;
        row-gap: 2px;
    }
}