/* ===================================
   COURSE BADGES
   =================================== */

.course-badge {
    position: absolute;
    padding: 8px 40px 20px 40px; /* Noch weniger hoch */
    font-size: 0.95rem; /* Größer: von 0.75rem auf 0.95rem */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 10;
    white-space: nowrap;
    border-radius: 20px; /* Sehr runde Ecken für alle Badges */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

/* Badge "Beliebt" - 45° nach rechts gedreht, überlappend an linker oberer Ecke, Orange ohne Animation */
.badge-beliebt {
    top: 5px;
    left: -70px;
    background: linear-gradient(to bottom, #ff9800 0%, #ff8c00 30%, #ff7f00 60%, rgba(230, 115, 0, 0.7) 80%, rgba(230, 115, 0, 0) 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: rotate(-45deg) !important; /* 45° gedreht - nach rechts */
    transform-origin: center !important;
    border: none;
    border-radius: 20px; /* Sehr runde Ecken (wie alle anderen Badges) */
    box-shadow: 
        0 2px 8px rgba(255, 152, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    width: 220px;
    padding: 8px 40px 35px 40px; /* Beliebt weiter nach unten */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem; /* Größer: von 0.75rem auf 0.95rem */
}

/* Entferne alle Pseudo-Elemente für professionelles Design */
.badge-beliebt::before,
.badge-beliebt::after {
    display: none;
}

/* Badge "Empfohlen" - 45° nach rechts gedreht, überlappend an linker oberer Ecke, Discokugel-Farbe: Mittelblau */
.badge-empfohlen {
    top: 25px;
    left: -125px;
    background: linear-gradient(to bottom, #a8c5e8 0%, #6a8fc5 30%, #6a8fc5 70%, rgba(74, 111, 165, 0.7) 85%, rgba(74, 111, 165, 0) 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    transform: rotate(-45deg) !important; /* 45° gedreht - nach rechts */
    transform-origin: center !important;
    border-radius: 20px; /* Sehr runde Ecken (wie alle anderen Badges) */
    border: none;
    box-shadow: 
        0 2px 8px rgba(106, 143, 197, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    width: 350px;
    padding: 8px 40px 20px 40px; /* Noch weniger hoch */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem; /* Größer: von 0.75rem auf 0.95rem */
}

.badge-empfohlen::before,
.badge-empfohlen::after {
    display: none;
}

/* Badge "Neu" - 30° nach links gedreht, überlappend an rechter oberer Ecke, Discokugel-Farben */
.badge-neu {
    top: 15px;
    right: -100px; /* Nach rechts verschoben */
    left: auto; /* Left entfernen */
    background: linear-gradient(to bottom, #ff69b4 0%, #ffc0cb 15%, #87ceeb 30%, #a8c5e8 45%, #ffd700 60%, rgba(147, 112, 219, 0.7) 80%, rgba(147, 112, 219, 0) 100%);
    background-size: 100% 100%;
    /* Animation entfernt für transparenten Gradient */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: rotate(30deg) !important; /* 30° gedreht - nach links */
    transform-origin: center !important;
    border: none;
    border-radius: 20px; /* Sehr runde Ecken (wie alle anderen Badges) */
    box-shadow: 
        0 2px 8px rgba(255, 105, 180, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    width: 350px;
    padding: 8px 40px 20px 40px; /* Noch weniger hoch */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem; /* Größer: von 0.75rem auf 0.95rem */
}

.badge-neu::before,
.badge-neu::after {
    display: none;
}

/* ALLE Icons in course-image Containern - einheitlich weiß und synchron pulsierend */
.course-image .course-icon,
.course-image .course-stars .course-icon,
.badge-beliebt .course-icon,
.badge-empfohlen .course-icon,
.badge-neu .course-icon,
.course-badge .course-icon {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    animation: iconPulse 2s ease-in-out infinite;
    animation-delay: 0s !important; /* WICHTIG: Alle Icons starten exakt synchron */
    animation-fill-mode: both !important; /* Startet sofort im ersten Frame */
}

/* Pulsierende Animation für Icons - verwendet nur scale, nicht rotate */
/* WICHTIG: Alle Icons verwenden diese exakt gleiche Animation für Synchronisation */
@keyframes iconPulse {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.5));
    }
    50% {
        transform: scale(1.15);
        filter: brightness(1.3) drop-shadow(0 4px 16px rgba(255, 255, 255, 0.8));
    }
    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.5));
    }
}

/* WICHTIG: Badges müssen ihre Rotation behalten - keine Animation auf den Badges selbst! */
/* Zusätzliche Sicherheit: Rotation am Ende nochmal explizit setzen */
.badge-beliebt {
    transform: rotate(-45deg) !important; /* Badge "Beliebt" 45° nach rechts */
    transform-origin: center !important;
}

.badge-empfohlen {
    transform: rotate(-45deg) !important; /* Badge "Empfohlen" 45° nach rechts */
    transform-origin: center !important;
}

.badge-neu {
    transform: rotate(30deg) !important; /* Badge "Neu" 30° nach links */
    transform-origin: center !important;
}