/* ============================================================
   CDL COMPONENTS – BADGES
   Clean, modular, no Bootstrap override
   ============================================================ */

/* -------------------------------------------
   Core look for all CDL-specific badges
------------------------------------------- */
.cdl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}

/* -------------------------------------------
   AR / VR / VIEW badges (3D-Lab)
------------------------------------------- */
.cdl-badge-ar {
    color: #0a7a3a;
    background: #eaf7ee;
    border-color: #cdeed4;
}

.cdl-badge-vr {
    color: #0b5ed7;
    background: #e8f1ff;
    border-color: #d1e1ff;
}

.cdl-badge-view {
    color: #333;
}


/* -------------------------------------------
   Premium / Free chips
------------------------------------------- */
.cdl-chip-premium {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.75rem;
    background: #c8a06f;
    color: #fff;
}

.cdl-chip-free {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.75rem;
    background: #e7f9eb;
    color: #0a7a3a;
}


/* -------------------------------------------
   Date label
------------------------------------------- */
.cdl-date-chip {
    position: absolute;
    bottom: 0.8rem;
    left: 0.8rem;
    font-size: 0.8rem;
    color: #666;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    backdrop-filter: blur(4px);
}


/* -------------------------------------------
   Termin-Badges (Webinar / Gruppe / Einzel)
------------------------------------------- */
.cdl-badge-webinar {
    background: rgba(88, 143, 255, 0.15);
    color: #3366cc;
    border: none;
}

.cdl-badge-gruppe {
    background: rgba(83, 200, 138, 0.15);
    color: #2e9d6e;
    border: none;
}

.cdl-badge-einzel {
    background: rgba(255, 193, 7, 0.15);
    color: var(--primary);
    border: none;
}


/* -------------------------------------------
   Zielgruppen-Badges (Schüler, Lehrer)
------------------------------------------- */
.cdl-badge-schueler {
    background: rgba(170, 108, 57, 0.08);
    color: #aa6c39;
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
}

.cdl-badge-lehrer {
    background: rgba(60, 60, 60, 0.08);
    color: #333;
    border-radius: 20px;
    padding: 0.35rem 0.75rem;
}


/* -------------------------------------------
   Number circle badge (learning-steps)
------------------------------------------- */
.cdl-badge-step {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid rgba(0,0,0,0.08);
}