/* ==========================================================
 * Competenza Academy – eigene Masteriyo-Kurskarten
 * ========================================================== */

.ca-widget-courses {
    padding-block: clamp(84px, 7vw, 116px) !important;
    background: #f4f5f6 !important;
}

.ca-widget-courses .ca-widget-section-header {
    margin-bottom: clamp(48px, 5vw, 70px) !important;
}

/* Raster */

.ca-course-grid {
    display: grid;
    grid-template-columns:
        repeat(
            var(--ca-course-columns, 3),
            minmax(0, 1fr)
        );
    gap: clamp(24px, 2.4vw, 34px);
    align-items: stretch;
}

/* Karte */

.ca-course-card {
    display: flex;
    min-width: 0;
    height: 100%;
    overflow: hidden;

    border: 1px solid #d9dee2;
    border-radius: 0;

    background: #ffffff;
    box-shadow: none;

    flex-direction: column;

    transition: border-color 180ms ease;
}

.ca-course-card:hover {
    border-color: #aeb6bc;
}

/* Bild */

.ca-course-card__media {
    position: relative;

    display: block;
    height: 230px;
    min-height: 230px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf1f4,
            #e5eaed
        );
}

.ca-course-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ca-course-card__difficulty {
    position: absolute;
    top: 20px;
    left: 20px;

    padding: 7px 11px;

    border: 1px solid rgba(237, 128, 8, 0.38);

    color: #a95a00;
    background: #fff8ef;

    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.2;
}

/* Inhalt */

.ca-course-card__body {
    display: flex;
    min-height: 310px;
    padding: 28px;

    flex: 1 1 auto;
    flex-direction: column;
}

.ca-course-card__categories {
    display: flex;
    margin-bottom: 16px;
    gap: 8px;
    flex-wrap: wrap;
}

.ca-course-card__categories span {
    padding: 6px 9px;

    border: 1px solid #d9dee2;

    color: #666666;
    background: #ffffff;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.ca-course-card__title {
    margin: 0 0 18px;

    font-size: clamp(1.22rem, 1.55vw, 1.48rem);
    letter-spacing: -0.025em;
    line-height: 1.28;
}

.ca-course-card__title a {
    color: #172033;
    text-decoration: none;
}

.ca-course-card__author {
    display: flex;
    margin-bottom: 20px;

    color: #4f5967;

    align-items: center;
    gap: 11px;
}

.ca-course-card__author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.ca-course-card__author span {
    font-size: 0.92rem;
}

.ca-course-card__excerpt {
    margin: 0 0 22px;

    color: #667085;

    font-size: 0.94rem;
    line-height: 1.65;
}

.ca-course-card__features {
    display: grid;
    margin: 0 0 22px;
    padding: 0;

    list-style: none;

    gap: 10px;
}

.ca-course-card__features li {
    position: relative;

    padding-left: 27px;

    color: #667085;

    font-size: 0.94rem;
    line-height: 1.55;
}

.ca-course-card__features li::before {
    position: absolute;
    top: 0.4em;
    left: 2px;

    width: 10px;
    height: 6px;

    content: "";

    border-bottom: 2px solid #666666;
    border-left: 2px solid #666666;

    transform: rotate(-45deg);
}

/* Masteriyo-Metadaten innerhalb unseres Markups */

.ca-course-card__meta {
    margin-top: auto;
}

.ca-course-card__meta
.masteriyo-course--content__stats {
    display: flex !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #667085 !important;
    background: transparent !important;

    gap: 22px !important;
    align-items: center !important;
}

.ca-course-card__meta
.masteriyo-course--content__stats > div {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.ca-course-card__meta
.masteriyo-course--content__stats svg {
    width: 19px !important;
    height: 19px !important;
    fill: #7a8492 !important;
}

.ca-course-card__meta
.masteriyo-course--content__stats span {
    color: #667085 !important;
}

/* Fortschritt */

.ca-course-card__progress {
    padding: 0 28px 24px;

    background: #ffffff;
}

.ca-course-card__progress-label {
    display: flex;
    margin-bottom: 11px;

    align-items: baseline;
    gap: 8px;
}

.ca-course-card__progress-label strong {
    color: #172033;

    font-size: 1rem;
    font-weight: 750;
}

.ca-course-card__progress-label span {
    color: #667085;

    font-size: 0.82rem;
}

.ca-course-card__progress-track {
    width: min(100%, 240px);
    height: 6px;
    overflow: hidden;

    background: #e4eadc;
}

.ca-course-card__progress-track > span {
    display: block;
    height: 100%;

    background: #7bb41d;
}

/* Kartenfuß */

.ca-course-card__footer {
    display: flex;
    min-height: 84px;
    padding: 18px 26px;

    border-top: 1px solid #e1e5e8;

    background: #ffffff;

    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ca-course-card__price {
    color: #172033;

    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.25;
}

.ca-course-card__action {
    flex: 0 0 auto;
}

/* Native Masteriyo-Buttons und Fallback */

.ca-course-card__action
.masteriyo-btn,
.ca-course-card__fallback-button {
    position: relative;
    isolation: isolate;

    display: inline-flex;

    min-width: 150px;
    min-height: 46px;
    padding: 12px 20px 12px 28px;
    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;

    color: #ffffff !important;
    background: #565a5e !important;
    box-shadow: none !important;

    align-items: center;
    justify-content: center;

    font-size: 0.84rem !important;
    font-weight: 750 !important;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;

    transform: none !important;
    transition: background-color 180ms ease;
}

.ca-course-card__action
.masteriyo-btn::before,
.ca-course-card__fallback-button::before {
    position: absolute;
    z-index: -1;
    inset: 0;

    content: "";

    background: #ed8008;

    clip-path: inset(0 calc(100% - 6px) 0 0);
}

.ca-course-card__action
.masteriyo-btn:hover,
.ca-course-card__fallback-button:hover {
    color: #ffffff !important;
    background: #45494d !important;
}

/* Masteriyo-Fremdeffekte entfernen */

.ca-course-card__action
.masteriyo-btn::after {
    display: none !important;
}

.ca-course-card__action
.masteriyo-btn:hover {
    padding-left: 28px !important;
    transform: none !important;
}

/* Responsive */

@media (max-width: 1050px) {
    .ca-course-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .ca-course-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ca-course-card__body {
        min-height: 0;
        padding: 24px 22px;
    }

    .ca-course-card__progress {
        padding: 0 22px 22px;
    }

    .ca-course-card__footer {
        padding: 18px 22px;

        align-items: stretch;
        flex-direction: column;
    }

    .ca-course-card__action,
    .ca-course-card__action .masteriyo-btn,
    .ca-course-card__fallback-button {
        width: 100%;
    }
}

/* COMPETENZA_COURSE_CONTINUE_BUTTON_START */

/*
 * Fortsetzen = aktiver Lernfortschritt.
 * Deshalb Analytic-Grün statt Academy-Orange.
 */
.ca-course-card__action .masteriyo-btn-continue,
.ca-course-card__action
.masteriyo-single-course--btn.masteriyo-btn-continue {
    position: relative !important;
    isolation: isolate !important;

    padding-left: 28px !important;
    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: #ffffff !important;
    background: #565a5e !important;
    box-shadow: none !important;
}

/*
 * Sichtbarer grüner Statusbalken.
 */
.ca-course-card__action .masteriyo-btn-continue::before,
.ca-course-card__action
.masteriyo-single-course--btn.masteriyo-btn-continue::before {
    position: absolute !important;
    z-index: -1 !important;

    inset: 0 auto 0 0 !important;

    display: block !important;
    width: 6px !important;
    height: 100% !important;

    content: "" !important;

    background: #7bb41d !important;

    clip-path: none !important;
    opacity: 1 !important;

    transition: width 200ms ease !important;
}

/*
 * Ruhiger Hover:
 * grüner Balken wird etwas breiter,
 * der komplette Button wird nicht grün.
 */
.ca-course-card__action .masteriyo-btn-continue:hover,
.ca-course-card__action
.masteriyo-single-course--btn.masteriyo-btn-continue:hover {
    padding-left: 34px !important;

    color: #ffffff !important;
    background: #45494d !important;

    box-shadow: none !important;
    transform: none !important;
}

.ca-course-card__action .masteriyo-btn-continue:hover::before,
.ca-course-card__action
.masteriyo-single-course--btn.masteriyo-btn-continue:hover::before {
    width: 12px !important;

    clip-path: none !important;
}

/*
 * Keine fremden Pfeile oder Masteriyo-Pseudoelemente.
 */
.ca-course-card__action .masteriyo-btn-continue::after,
.ca-course-card__action
.masteriyo-single-course--btn.masteriyo-btn-continue::after {
    display: none !important;
}

/* COMPETENZA_COURSE_CONTINUE_BUTTON_END */

/* COMPETENZA_PROGRESS_FULL_WIDTH_START */

.ca-course-card__progress-track {
    width: 100% !important;
    max-width: none !important;
    height: 6px;

    overflow: hidden;

    background: #e4eadc;
}

.ca-course-card__progress-track > span {
    display: block;
    height: 100%;

    background: #7bb41d;
}

/* COMPETENZA_PROGRESS_FULL_WIDTH_END */

/* COMPETENZA_COURSE_BUTTON_STATES_START */

/*
 * Verbindliche Statusfarben:
 *
 * company  #666666
 * concept  #bdccd8
 * analytic #7bb41d
 * academy  #ed8008
 */

.ca-course-card__action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.ca-course-card__action .ca-course-card__button {
    --ca-course-action-color: #ed8008;
    --ca-course-icon-color: #ffffff;

    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;

    min-width: 180px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 20px 0 26px !important;

    overflow: hidden !important;

    color: #ffffff !important;
    background: #555b61 !important;

    border: 0 !important;
    border-radius: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    transform: none !important;

    transition:
        padding-left 190ms ease,
        background-color 190ms ease !important;
}

/* Linker Statusbalken */

.ca-course-card__action
.ca-course-card__button::before {
    position: absolute !important;
    z-index: 1 !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 6px !important;
    height: auto !important;

    content: "" !important;

    background:
        var(--ca-course-action-color) !important;

    opacity: 1 !important;

    transition: width 190ms ease !important;
}

/* Pfeil erscheint erst beim Hover */

.ca-course-card__button-icon {
    position: absolute !important;
    z-index: 3 !important;

    top: 50% !important;
    left: 0 !important;

    display: inline-flex !important;

    width: 46px !important;
    height: 100% !important;

    color:
        var(--ca-course-icon-color) !important;

    align-items: center !important;
    justify-content: center !important;

    opacity: 0 !important;

    transform:
        translateY(-50%)
        translateX(-7px) !important;

    transition:
        opacity 150ms ease,
        transform 190ms ease !important;
}

.ca-course-card__button-icon svg {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    fill: none !important;
    stroke: currentColor !important;
}

.ca-course-card__button-label {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    color: inherit !important;

    transition: transform 190ms ease !important;
}

/* Einheitlicher Hover */

.ca-course-card__action
.ca-course-card__button:hover,
.ca-course-card__action
.ca-course-card__button:focus-visible {
    padding-left: 60px !important;

    color: #ffffff !important;
    background: #454a4f !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ca-course-card__action
.ca-course-card__button:hover::before,
.ca-course-card__action
.ca-course-card__button:focus-visible::before {
    width: 46px !important;
}

.ca-course-card__button:hover
.ca-course-card__button-icon,
.ca-course-card__button:focus-visible
.ca-course-card__button-icon {
    opacity: 1 !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}

/* Company: keine direkte Buchungsaktion */

.ca-course-card__button--company {
    --ca-course-action-color: #666666;
}

/* Concept: begonnen */

.ca-course-card__button--concept {
    --ca-course-action-color: #bdccd8;
    --ca-course-icon-color: #172033;
}

/* Analytic: abgeschlossen */

.ca-course-card__button--analytic {
    --ca-course-action-color: #7bb41d;
}

/* Academy: starten oder buchen */

.ca-course-card__button--academy {
    --ca-course-action-color: #ed8008;
}

/*
 * Alte Masteriyo-Pseudoelemente und Buttonzustände
 * innerhalb der eigenen Karte neutralisieren.
 */

.ca-course-card__action
.ca-course-card__button::after {
    display: none !important;
    content: none !important;
}

.ca-course-card__action
.ca-course-card__button.masteriyo-btn,
.ca-course-card__action
.ca-course-card__button.masteriyo-btn-primary,
.ca-course-card__action
.ca-course-card__button.masteriyo-enroll-btn,
.ca-course-card__action
.ca-course-card__button.masteriyo-single-course--btn {
    min-width: 180px !important;
    min-height: 46px !important;

    color: #ffffff !important;
    background-color: #555b61 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

/* COMPETENZA_COURSE_BUTTON_STATES_END */

/* COMPETENZA_COURSE_BUTTON_STATUS_COLORS_START */

/*
 * Verbindliche CI-Zuordnung:
 *
 * company  = nicht buchbar / nur Details
 * concept  = begonnen
 * analytic = abgeschlossen
 * academy  = starten oder buchen
 */

/* Company: Details ansehen / nicht direkt buchbar */

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--company {
    --ca-course-action-color: #666666 !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--company::before {
    background: #666666 !important;
}

/* Concept: begonnener Kurs / Fortsetzen */

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--concept {
    --ca-course-action-color: #bdccd8 !important;
    --ca-course-icon-color: #172033 !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--concept::before {
    background: #bdccd8 !important;
}

/* Analytic: abgeschlossener Kurs / Kurs ansehen */

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--analytic {
    --ca-course-action-color: #7bb41d !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--analytic::before {
    background: #7bb41d !important;
}

/* Academy: Kurs starten oder kostenpflichtig buchen */

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--academy {
    --ca-course-action-color: #ed8008 !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--academy::before {
    background: #ed8008 !important;
}

/*
 * Auch im Hover bleibt die jeweilige Statusfarbe
 * im expandierenden Icon-Feld erhalten.
 */

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--company:hover::before,
.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--company:focus-visible::before {
    background: #666666 !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--concept:hover::before,
.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--concept:focus-visible::before {
    background: #bdccd8 !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--analytic:hover::before,
.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--analytic:focus-visible::before {
    background: #7bb41d !important;
}

.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--academy:hover::before,
.ca-course-card__action
a.ca-course-card__button.ca-course-card__button--academy:focus-visible::before {
    background: #ed8008 !important;
}

/* COMPETENZA_COURSE_BUTTON_STATUS_COLORS_END */