/* FH Wedel - Chip nach design-system/components/forms/Chip.jsx (Handoff
   03.10.2026): Pill, 14 px SemiBold, 44 px hoch, Innenabstand 16 px, Schrift
   Dunkelblau; inaktiv weiss mit Rahmen, gedrueckt Dunkelblau. Zahl leiser
   als das Label, Kontrast ueber 4,5:1 (Grau 700 auf Weiss, Hellblau auf
   Blau). Gemeinsam fuer alle Filter (Studiengangsliste, FKM-Aussteller). */
.fhw-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    margin: 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--fh-blau);
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.fhw-chip:hover {
    border-color: var(--fh-blau);
}

.fhw-chip[aria-pressed="true"] {
    border-color: var(--chip-pressed-border, var(--fh-blau));
    background: var(--fh-blau);
    color: var(--text-invers);
}

.fhw-chip__zahl {
    color: var(--grau-700);
    font-weight: var(--weight-body);
}

.fhw-chip[aria-pressed="true"] .fhw-chip__zahl {
    color: var(--chip-count-on, var(--fh-blau-hell));
}

/* Hervorgehoben (Chip.jsx ton="gelb"), z. B. Dual und Master+ in der FKM */
.fhw-chip--gelb {
    border-color: var(--fh-gelb);
    background: var(--fh-gelb-tint);
    color: var(--fh-blau);
}

/* Ohne Treffer bei der aktuellen Auswahl (Studiengangsliste): ausgegraut,
   bleibt fokussierbar (aria-disabled statt disabled), Klick ohne Wirkung.
   Inaktive Bedienelemente sind von der Kontrastanforderung ausgenommen. */
.fhw-chip[aria-disabled="true"],
.fhw-chip[aria-disabled="true"]:hover {
    border-color: var(--border-strong);
    background: var(--surface-card);
    color: var(--grau-500);
    cursor: default;
}

.fhw-chip[aria-disabled="true"] .fhw-chip__zahl {
    color: var(--grau-500);
}

/* Windows-Kontrast: gedrueckt (Highlight) und ausgegraut (GrayText) bleiben
   unterscheidbar; Systemfarben sind Schluesselwoerter, keine eigenen Farben. */
@media (forced-colors: active) {
    .fhw-chip:focus-visible {
        outline-color: CanvasText;
    }

    .fhw-chip[aria-pressed="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    .fhw-chip[aria-pressed="true"] .fhw-chip__zahl {
        color: HighlightText;
    }

    .fhw-chip[aria-disabled="true"],
    .fhw-chip[aria-disabled="true"] .fhw-chip__zahl {
        color: GrayText;
        border-color: GrayText;
    }
}