/*
 * Competenza Academy
 * Globale Content-Seiten und Pageheader
 */

.ca-content-page-header {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: clamp(300px, 28vw, 390px);
    overflow: hidden;

    color: #ffffff;
    background-color: #303438;
}

.ca-content-page-header__background,
.ca-content-page-header__overlay {
    position: absolute;
    inset: 0;
}

.ca-content-page-header__background {
    z-index: -3;

    background-image: var(
        --ca-page-header-image,
        none
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    transform: scale(1.025);
}

.ca-content-page-header__overlay {
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(31, 34, 37, 0.94) 0%,
            rgba(31, 34, 37, 0.84) 46%,
            rgba(31, 34, 37, 0.62) 100%
        );
}

.ca-content-page-header--no-image
.ca-content-page-header__overlay {
    background:
        linear-gradient(
            115deg,
            #303438 0%,
            #3b4045 100%
        );
}

.ca-content-page-header::after {
    position: absolute;
    right: -100px;
    bottom: -220px;
    z-index: -1;

    width: 520px;
    height: 320px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    content: "";
    transform: rotate(-12deg);
}

.ca-content-page-header__container {
    width: min(
        calc(100% - 48px),
        var(--ca-container, 1280px)
    );
    margin-inline: auto;
    padding-block: clamp(64px, 8vw, 104px);
}

.ca-content-page-header__eyebrow {
    margin: 0 0 18px;

    color: var(--ca-academy, #ed8008);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ca-content-page-header__title {
    max-width: 920px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.ca-content-page-header__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 28px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.ca-content-page-header__breadcrumb a {
    color: inherit;
    text-decoration: none;

    transition:
        color 180ms ease;
}

.ca-content-page-header__breadcrumb a:hover,
.ca-content-page-header__breadcrumb a:focus-visible {
    color: var(--ca-academy, #ed8008);
}

.ca-content-page-header__separator {
    color: rgba(255, 255, 255, 0.4);
}

.ca-content-page-header__accent {
    display: block;

    width: clamp(84px, 9vw, 128px);
    height: 5px;
    margin-top: 30px;

    background-color: var(--ca-academy, #ed8008);
}

.ca-content-page {
    width: 100%;
    min-height: 240px;
}

.ca-content-page > .elementor {
    width: 100%;
}

/*
 * Normale Elementor-Content-Sektionen können
 * diese Klasse direkt im Feld "CSS-Klassen" erhalten.
 */
.ca-section {
    width: 100%;
    padding-block: clamp(80px, 8vw, 120px);
}

.ca-section--compact {
    padding-block: clamp(56px, 6vw, 88px);
}

.ca-section--white {
    background-color: #ffffff;
}

.ca-section--soft {
    background-color: var(
        --ca-surface-soft,
        #f6f7f8
    );
}

.ca-section--dark {
    color: #ffffff;
    background-color: #303438;
}

.ca-section__container {
    width: min(
        calc(100% - 48px),
        var(--ca-container, 1280px)
    );
    margin-inline: auto;
}

@media (max-width: 767px) {
    .ca-content-page-header {
        min-height: 260px;
    }

    .ca-content-page-header__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(31, 34, 37, 0.94) 0%,
                rgba(31, 34, 37, 0.8) 100%
            );
    }

    .ca-content-page-header__container {
        width: min(
            calc(100% - 36px),
            var(--ca-container, 1280px)
        );
        padding-block: 52px 58px;
    }

    .ca-content-page-header__eyebrow {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .ca-content-page-header__title {
        font-size: clamp(36px, 12vw, 52px);
    }

    .ca-content-page-header__breadcrumb {
        gap: 8px;
        margin-top: 22px;
        font-size: 13px;
    }

    .ca-content-page-header__accent {
        height: 4px;
        margin-top: 24px;
    }

    .ca-section__container {
        width: min(
            calc(100% - 36px),
            var(--ca-container, 1280px)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-content-page-header__background {
        transform: none;
    }
}

/* COMPETENZA_CONTENT_CONTAINER_START */

/*
 * Globaler Inhaltscontainer für alle Seiten mit dem
 * Template "Academy Content Page".
 *
 * Dadurch werden auch Shortcodes, Masteriyo-Ausgaben,
 * Gutenberg-Blöcke und Elementor-Inhalte automatisch
 * auf die verbindliche Academy-Breite begrenzt.
 */

.ca-content-page {
    width: 100%;
    min-height: 240px;
    padding-block: clamp(72px, 8vw, 112px);
    background-color: #ffffff;
}

.ca-content-page__container {
    width: min(
        calc(100% - 48px),
        var(--ca-container, 1280px)
    );
    margin-inline: auto;
}

/*
 * Elementor soll innerhalb des Containers immer
 * die komplette verfügbare Breite nutzen.
 */

.ca-content-page__container > .elementor,
.ca-content-page__container
.elementor-page,
.ca-content-page__container
.elementor-location-single {
    width: 100%;
    max-width: none;
}

/*
 * Elementor-Top-Level-Container dürfen nicht erneut
 * künstlich auf Browserbreite gezogen werden.
 */

.ca-content-page__container
.elementor
> .elementor-element,
.ca-content-page__container
.elementor
> .e-con,
.ca-content-page__container
.elementor
> .e-parent {
    max-width: 100%;
}

/*
 * WordPress- und Gutenberg-Full-Width-Blöcke bleiben
 * innerhalb des Content-Page-Containers.
 */

.ca-content-page__container
.alignfull {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.ca-content-page__container
.alignwide {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

/*
 * Masteriyo-Listen und weitere Plugin-Ausgaben dürfen
 * den Inhaltscontainer nicht überschreiten.
 */

.ca-content-page__container
.masteriyo-container,
.ca-content-page__container
.masteriyo-course-list,
.ca-content-page__container
.masteriyo-course-grid,
.ca-content-page__container
.masteriyo-courses,
.ca-content-page__container
[data-masteriyo] {
    width: 100%;
    max-width: 100%;
}

/*
 * Kein zusätzlicher äußerer Abstand, wenn ein eigenes
 * Academy-Widget bereits seine Section-Abstände besitzt.
 */

.ca-content-page__container
> .elementor
> .elementor-element:first-child,
.ca-content-page__container
> .elementor
> .e-con:first-child {
    margin-top: 0;
}

.ca-content-page__container
> .elementor
> .elementor-element:last-child,
.ca-content-page__container
> .elementor
> .e-con:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ca-content-page {
        padding-block: 56px 72px;
    }

    .ca-content-page__container {
        width: min(
            calc(100% - 36px),
            var(--ca-container, 1280px)
        );
    }
}

/* COMPETENZA_CONTENT_CONTAINER_END */

/* COMPETENZA_LEARNING_PAGE_START */

.ca-learning-section {
    width: 100%;
    margin: 0 !important;
    padding-block: clamp(88px, 8vw, 128px);
}

.ca-learning-eyebrow {
    margin-bottom: 18px !important;
}

.ca-learning-eyebrow,
.ca-learning-eyebrow .elementor-heading-title {
    color: var(--ca-academy, #ed8008) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.ca-learning-heading {
    margin-bottom: 26px !important;
}

.ca-learning-heading,
.ca-learning-heading .elementor-heading-title {
    max-width: 880px;

    color: var(--ca-ink, #2d3034) !important;

    font-size: clamp(34px, 4vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.ca-learning-lead,
.ca-learning-lead p,
.ca-learning-section-intro,
.ca-learning-section-intro p {
    color: var(--ca-text, #59636e);

    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.7;
}

.ca-learning-lead p:last-child,
.ca-learning-section-intro p:last-child {
    margin-bottom: 0;
}

.ca-learning-section-intro {
    max-width: 780px;
}

/* Einleitung */

.ca-learning-intro {
    display: flex;
    align-items: center;
    gap: clamp(48px, 6vw, 92px);
}

.ca-learning-intro__content {
    padding-right: clamp(0px, 3vw, 40px);
}

.ca-learning-intro__facts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ca-learning-fact {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 22px;

    padding: 25px 0;

    border-bottom: 1px solid var(--ca-border, #dce1e5);
}

.ca-learning-fact:first-child {
    border-top: 1px solid var(--ca-border, #dce1e5);
}

.ca-learning-fact__number {
    color: var(--ca-academy, #ed8008);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.ca-learning-fact strong {
    display: block;
    margin-bottom: 8px;

    color: var(--ca-ink, #2d3034);

    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.ca-learning-fact p {
    margin: 0;

    color: var(--ca-text, #59636e);

    font-size: 15px;
    line-height: 1.55;
}

/* Kursbereich */

.ca-learning-courses {
    border-top: 1px solid var(--ca-border, #dce1e5);
    border-bottom: 1px solid var(--ca-border, #dce1e5);

    background: var(--ca-surface-soft, #f6f7f8);
}

/* Überschriftenbereiche */

.ca-learning-formats,
.ca-learning-topics {
    padding-bottom: 40px;
}

.ca-learning-topics {
    margin-top: clamp(70px, 8vw, 112px) !important;
    padding-top: clamp(84px, 8vw, 120px);

    border-top: 1px solid var(--ca-border, #dce1e5);
}

/* Kartenraster */

.ca-learning-card-grid {
    display: grid !important;
    padding-bottom: clamp(88px, 8vw, 128px);
    gap: 28px;
}

.ca-learning-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ca-learning-card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ca-learning-card-grid > .elementor-column {
    width: 100% !important;
}

.ca-learning-card {
    --ca-learning-accent: var(--ca-academy, #ed8008);

    position: relative;

    min-height: 310px;
    padding: 34px 30px 36px;

    border: 1px solid var(--ca-border, #dce1e5);
    border-top: 5px solid var(--ca-learning-accent);

    background: #ffffff;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ca-learning-card:hover {
    border-color: #bdc4ca;

    box-shadow:
        0 18px 38px rgba(38, 43, 48, 0.08);

    transform: translateY(-3px);
}

.ca-learning-card--company {
    --ca-learning-accent: var(--ca-company, #666666);
}

.ca-learning-card--concept {
    --ca-learning-accent: var(--ca-concept, #bdccd8);
}

.ca-learning-card--analytic {
    --ca-learning-accent: var(--ca-analytic, #7bb41d);
}

.ca-learning-card--academy {
    --ca-learning-accent: var(--ca-academy, #ed8008);
}

.ca-learning-card__number {
    margin-bottom: 42px;

    color: var(--ca-learning-accent);

    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.ca-learning-card h3 {
    margin: 0 0 17px;

    color: var(--ca-ink, #2d3034);

    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.ca-learning-card p {
    margin: 0;

    color: var(--ca-text, #59636e);

    font-size: 16px;
    line-height: 1.65;
}

/* Individuelle Schulung */

.ca-learning-individual {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);

    padding-inline: clamp(34px, 5vw, 74px);

    border-left: 6px solid var(--ca-academy, #ed8008);

    background: #303438;
}

.ca-learning-individual
.ca-learning-heading,
.ca-learning-individual
.ca-learning-heading .elementor-heading-title {
    color: #ffffff !important;
}

.ca-learning-individual
.ca-learning-lead,
.ca-learning-individual
.ca-learning-lead p {
    color: rgba(255, 255, 255, 0.74);
}

.ca-learning-individual__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ca-learning-button .elementor-button {
    position: relative;

    min-height: 52px;
    padding: 16px 24px 16px 32px;

    overflow: hidden;

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

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

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    box-shadow: none !important;
}

.ca-learning-button .elementor-button::before {
    position: absolute;
    inset: 0 auto 0 0;

    width: 6px;

    content: "";

    background: var(--ca-academy, #ed8008);

    transition: width 180ms ease;
}

.ca-learning-button .elementor-button:hover::before,
.ca-learning-button .elementor-button:focus-visible::before {
    width: 18px;
}

/* Abschluss-CTA */

.ca-learning-final-cta {
    padding-bottom: 0;
}

.ca-learning-final-cta
.ca-widget-cta {
    margin-inline:
        calc(
            (100vw - min(
                calc(100vw - 48px),
                var(--ca-container, 1280px)
            )) / -2
        );
}

/* Responsive */

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

    .ca-learning-card-grid--three {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ca-learning-card {
        min-height: 280px;
    }
}

@media (max-width: 767px) {
    .ca-learning-section {
        padding-block: 68px;
    }

    .ca-learning-intro,
    .ca-learning-individual {
        display: block;
    }

    .ca-learning-intro__content {
        padding-right: 0;
        padding-bottom: 42px;
    }

    .ca-learning-card-grid--three,
    .ca-learning-card-grid--four {
        grid-template-columns: 1fr;
    }

    .ca-learning-card-grid {
        padding-bottom: 72px;
        gap: 20px;
    }

    .ca-learning-card {
        min-height: 0;
        padding: 28px 24px 30px;
    }

    .ca-learning-card__number {
        margin-bottom: 28px;
    }

    .ca-learning-individual {
        padding-inline: 24px;
    }

    .ca-learning-individual__action {
        padding-top: 34px;
        justify-content: flex-start;
    }

    .ca-learning-button,
    .ca-learning-button .elementor-button {
        width: 100%;
    }

    .ca-learning-final-cta
    .ca-widget-cta {
        margin-inline: -18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-learning-card {
        transition: none;
    }

    .ca-learning-card:hover {
        transform: none;
    }
}

/* COMPETENZA_LEARNING_PAGE_END */