#cbm-tag-bubbles {
    margin-top:10px;
}

.cbm-bubble {
    display:inline-block;
    background:#722835;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    margin:4px 4px 0 0;
    font-size:12px;
}

.cbm-remove {
    margin-left:6px;
    cursor:pointer;
    font-weight:bold;
}

/* ==============================================
   BOOKCARD TAG SLOT (DYNAMIC HEIGHT VIA PHP)
============================================== */

.book-tags-slot{
    padding: 3px 12px 0 12px;
    min-height: 32px;   /* Basiswert */
}

/* ==============================================
   BOOKCARD TAGS
============================================== */

.cbm-bookcard-tags{
    display:flex;
    align-items:flex-start;
    overflow:visible;
    white-space:nowrap;
    position:relative;   /* wichtig */
}

.cbm-bookcard-tags::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:30px;                /* Stärke der Ausblendung */
    pointer-events:none;
    background:linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,1)
    );
}
.cbm-bookcard-tag{
    display:inline-block;
    background:#f6d4d4;
    color:#000000;

    font-weight:500;
    letter-spacing:.25px;

    margin-right:8px;
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration:none;

    pointer-events:auto;
    transition:all .15s ease;
}

.cbm-bookcard-tag:hover{
    background:#eebbbb;
    transform:none;
    box-shadow:0 3px 6px rgba(0,0,0,.12);
    transition:all .15s ease;
}

.cbm-more-tags{
    display:inline-block;
    cursor:pointer;

    background:#eeeeee;
    color:#333;

    font-weight:600;
    letter-spacing:.2px;

    margin-right:8px;
    flex-shrink:0;

    pointer-events:auto;
    transition:all .15s ease;
}

.cbm-more-tags:hover{
    background:#e2e2e2;
    transform:none;
}

/* ==============================================
   PREMIUM TOOLTIP (DESKTOP ONLY)
============================================== */

@media (hover: hover){

    .cbm-bookcard-tag{
        position:relative;
    }

    .cbm-bookcard-tag:hover::after{

        content: attr(title);

        position:absolute;
        left:50%;
        bottom:calc(100% + 2px);
        transform:translateX(-50%);

        background:#111;
        color:#fff;

        padding:6px 10px;
        border-radius:8px;

        font-size:11px;
        font-weight:500;

        white-space:nowrap;

        box-shadow:0 8px 20px rgba(0,0,0,.25);

        opacity:0;
        pointer-events:none;

        transition:opacity .15s ease, transform .15s ease;
        z-index:50;
    }

    .cbm-bookcard-tag:hover::after{
        opacity:1;
        transform:translateX(-50%) translateY(-2px);
    }
}

.cbm-hidden-tag{
    display:none;
}