/**
 * Schlagwort-Badges — BEW Widget
 *
 * Tag-Optik: kleine graue Plaketten mit blauer Schrift. Die schräge Kante
 * zitiert den advotec-Button (.slanted-button im Kit-CSS), fällt aber flacher
 * aus — Badges sind Beschriftung, keine Bedienelemente. Deshalb auch kein
 * Pfeil, kein Link und kein Hover-Verhalten.
 */

.bew-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 28px 0 0 0;
    padding: 0;
    list-style: none;
    /*
     * Der Kopfbereich legt einen Verlaufs-Overlay (z-index 5) über das Bild.
     * Ohne eigenen z-index läge die Badge-Zeile darunter und würde milchig.
     */
    position: relative;
    z-index: 6;
}

.bew-badge {
    --bew-badge-slant: 10px;

    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 18px 5px 12px;
    background-color: #EEF0F5;
    color: #1F3566;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.3;
    list-style: none;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--bew-badge-slant)) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--bew-badge-slant)) 100%, 0 100%);
}

.bew-badges__empty {
    margin: 28px 0 0 0;
    color: #888888;
    font-style: italic;
}