/* ===================================
   COURSE IMAGES
   =================================== */

.course-image {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, #ffffff 0%, #c7ecff 24%, #89c6ff 52%, #7aa9ff 78%, #6b8ef5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important; /* WICHTIG: Badges werden am Rand abgeschnitten wenn sie über course-image hinausgehen */
}

/* Verschiedene Blautöne für die Kurskarten - stärkere Unterschiede mit Discokugel-Farben */
.courses-grid .course-card:nth-child(1) .course-image {
    background: linear-gradient(135deg, #ffe9bf 0%, #ffd8a8 30%, #ffb8a6 56%, #93d5ff 82%, #6ea8ff 100%);
}

.course-card.featured .course-image {
    background: linear-gradient(135deg, #e7d4ff 0%, #c5c6ff 30%, #9eb8ff 55%, #7ac8ff 80%, #79d0ef 100%);
}

.courses-grid .course-card:nth-child(3) .course-image {
    background: linear-gradient(135deg, #bff9f2 0%, #9deed8 30%, #82ddff 56%, #7abaff 82%, #7c8cff 100%);
}

/* Online-Kurs Hintergrund heller */
.course-image-online {
    background: linear-gradient(135deg, #c6f4ff 0%, #9de7ff 25%, #80d9ff 50%, #89b8ff 75%, #af95ff 100%) !important;
}

.courses-grid .course-card:nth-child(4) .course-image {
    background: linear-gradient(135deg, #d8ffe9 0%, #bafad3 30%, #90efd9 56%, #88d7ff 82%, #84b7ff 100%);
}

.courses-grid .course-card:nth-child(5) .course-image {
    background: linear-gradient(135deg, #ffd6ec 0%, #ffc2dd 30%, #f6b8ff 56%, #b9d1ff 82%, #8db8ff 100%);
}

.courses-grid .course-card:nth-child(6) .course-image {
    background: linear-gradient(135deg, #ffe9c4 0%, #ffd6a6 30%, #ffbfae 56%, #9ed7ff 82%, #80bbff 100%);
}

.course-icon {
    font-size: 4rem;
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(15, 23, 42, 0.3);
}

/* Zwei Sterne für Fortgeschrittene */
.course-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.course-stars .course-icon {
    font-size: 3.5rem;
}