/**
 * filterbar.css — Sticky-Top-Filter für Stage / Strang / Studienprogramm.
 * Quelle: docs/curriculum-source/reference-implementation/styles.css.
 */

.filterbar {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    padding: 14px 22px; background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
    font-size: 13px;
}

.fb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-group.right { margin-left: auto; }

.fb-label {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-soft); padding-right: 4px;
}

.fb-chip {
    border: 1px solid var(--line); background: white;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
    cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
    transition: all 0.12s;
}

.fb-chip:hover { border-color: var(--ink); }
.fb-chip.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.fb-chip.strand .dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink));
    display: inline-block;
}

.fb-chip.strand.dim { opacity: 0.4; }
.fb-chip.strand.active {
    background: var(--c, var(--ink)); color: white; border-color: transparent;
}
.fb-chip.strand.active .dot { background: white; }

.fb-chip.clear { padding: 2px 9px; font-size: 16px; line-height: 1; }

.fb-stat { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }