/* Ausblenden gefilterter Varianten */
.hm-df-hidden {
    display: none !important;
}

/* Beide Filterstufen stecken in einem gemeinsamen, dezent hinterlegten Block.
   Ohne ihn stehen bis zu vier UI-Zeilen in derselben Gewichtung ueber der
   Abfahrtsliste und das Auge trennt Filter und Ergebnis nicht mehr.
   Die Toenung ist bewusst relativ (3 % Schwarz) statt eines festen Grautons -
   so passt sie sich jedem Shop-Hintergrund an. */
.hm-df-filter {
    margin: 12px 0 14px 0;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .035);
    border-radius: 6px;
}

.hm-df-stage + .hm-df-stage {
    margin-top: 10px;
}

.hm-df-prompt {
    display: block;
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    opacity: .65;
}

/* Reihe mit den Chips */
.hm-df-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-df-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.hm-df-chip:hover,
.hm-df-chip:focus {
    border-color: #888;
    background: #f5f5f5;
}

.hm-df-chip.is-active {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* Tage ohne buchbare Abfahrt, und Orte ohne buchbare Abfahrt am gewaehlten
   Tag. Sie bleiben anklickbar, damit der Kunde die Ausverkauft-Meldung sieht. */
.hm-df-chip.is-unavailable {
    opacity: .55;
}

.hm-df-chip.is-unavailable::after {
    content: " ·";
}

/* Der aktive Chip bleibt auch ausgegraut klar erkennbar. */
.hm-df-chip.is-active.is-unavailable {
    opacity: .75;
}

@media (max-width: 480px) {
    .hm-df-chip {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }
}