/* =========================================================
 * Competenza Academy – finale UI-Korrekturen
 * ========================================================= */

/* =========================================================
 * Buttons
 *
 * Der Inhalt bleibt vollständig stehen.
 * Ausschließlich die linke Farbfläche wächst nach rechts.
 * ========================================================= */

.ca-button,
.ca-widget-button,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn,
.mto-account-wrapper .mto-continue-course button {
    position: relative !important;
    isolation: isolate;

    min-height: 48px;

    /*
     * Festes Padding – auch beim Hover unverändert.
     */
    padding:
        13px
        24px
        13px
        30px !important;

    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;

    transform: none !important;

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

/*
 * Auch eventuell vorhandene innere Buttonelemente
 * dürfen sich nicht mehr bewegen.
 */
.ca-button > *,
.ca-widget-button > *,
.ca-account-button > *,
.masteriyo .masteriyo-btn-primary > *,
.masteriyo .masteriyo-submit > *,
.masteriyo .masteriyo-single-course--btn > *,
.mto-account-wrapper .mto-continue-course button > * {
    position: relative;
    z-index: 2;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    transition:
        color 180ms ease,
        opacity 180ms ease !important;
}

/*
 * Der Farbbalken ist eine vollständige Fläche,
 * die zunächst auf 6 px beschnitten wird.
 */
.ca-button::before,
.ca-widget-button::before,
.ca-account-button::before,
.masteriyo .masteriyo-btn-primary::before,
.masteriyo .masteriyo-submit::before,
.masteriyo .masteriyo-single-course--btn::before,
.mto-account-wrapper .mto-continue-course button::before {
    position: absolute !important;
    z-index: 0 !important;

    inset: 0 !important;

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

    content: "";

    border: 0 !important;
    background: var(--ca-button-accent, #ed8008) !important;

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

    pointer-events: none;

    transform: none !important;

    transition:
        clip-path 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Beim Hover wächst nur die Farbfläche.
 * Button und Text behalten ihre Position.
 */
.ca-button:hover::before,
.ca-button:focus-visible::before,
.ca-widget-button:hover::before,
.ca-widget-button:focus-visible::before,
.ca-account-button:hover::before,
.ca-account-button:focus-visible::before,
.masteriyo .masteriyo-btn-primary:hover::before,
.masteriyo .masteriyo-btn-primary:focus-visible::before,
.masteriyo .masteriyo-submit:hover::before,
.masteriyo .masteriyo-submit:focus-visible::before,
.masteriyo .masteriyo-single-course--btn:hover::before,
.masteriyo .masteriyo-single-course--btn:focus-visible::before,
.mto-account-wrapper .mto-continue-course button:hover::before,
.mto-account-wrapper .mto-continue-course button:focus-visible::before {
    clip-path: inset(0 calc(100% - 56px) 0 0);
}

/*
 * Chevron innerhalb der wachsenden Farbfläche.
 */
.ca-button::after,
.ca-widget-button::after,
.ca-account-button::after,
.masteriyo .masteriyo-btn-primary::after,
.masteriyo .masteriyo-submit::after,
.masteriyo .masteriyo-single-course--btn::after,
.mto-account-wrapper .mto-continue-course button::after {
    position: absolute !important;
    z-index: 1 !important;

    top: 50% !important;
    left: 20px !important;

    width: 9px !important;
    height: 9px !important;

    content: "";

    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-9px, -50%)
        rotate(45deg) !important;

    transition:
        opacity 150ms ease,
        transform 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

.ca-button:hover::after,
.ca-button:focus-visible::after,
.ca-widget-button:hover::after,
.ca-widget-button:focus-visible::after,
.ca-account-button:hover::after,
.ca-account-button:focus-visible::after,
.masteriyo .masteriyo-btn-primary:hover::after,
.masteriyo .masteriyo-btn-primary:focus-visible::after,
.masteriyo .masteriyo-submit:hover::after,
.masteriyo .masteriyo-submit:focus-visible::after,
.masteriyo .masteriyo-single-course--btn:hover::after,
.masteriyo .masteriyo-single-course--btn:focus-visible::after,
.mto-account-wrapper .mto-continue-course button:hover::after,
.mto-account-wrapper .mto-continue-course button:focus-visible::after {
    opacity: 1;

    transform:
        translate(0, -50%)
        rotate(45deg) !important;
}

/*
 * Frühere Hoverregeln neutralisieren:
 * kein wachsendes Padding und kein seitlicher Versatz.
 */
.ca-button:hover,
.ca-button:focus-visible,
.ca-widget-button:hover,
.ca-widget-button:focus-visible,
.ca-account-button:hover,
.ca-account-button:focus-visible,
.masteriyo .masteriyo-btn-primary:hover,
.masteriyo .masteriyo-btn-primary:focus-visible,
.masteriyo .masteriyo-submit:hover,
.masteriyo .masteriyo-submit:focus-visible,
.masteriyo .masteriyo-single-course--btn:hover,
.masteriyo .masteriyo-single-course--btn:focus-visible,
.mto-account-wrapper .mto-continue-course button:hover,
.mto-account-wrapper .mto-continue-course button:focus-visible {
    padding:
        13px
        24px
        13px
        30px !important;

    color: #ffffff !important;
    background: #474b4f !important;

    transform: none !important;
}

/*
 * Farbvarianten.
 */
.ca-button-primary,
.ca-widget-button-primary,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn,
.mto-account-wrapper .mto-continue-course button {
    --ca-button-accent: #ed8008;
}

.ca-button-success,
.ca-widget-button-success {
    --ca-button-accent: #7bb41d;
}

.ca-button-info,
.ca-widget-button-info {
    --ca-button-accent: #9db3c2;
}

.ca-button-danger,
.ca-widget-button-danger {
    --ca-button-accent: #c83b3b;
}

.ca-button-default,
.ca-widget-button-default,
.ca-button-dark,
.ca-widget-button-dark {
    --ca-button-accent: #666666;
}

/*
 * Helle Sekundärbuttons.
 */
.ca-button-secondary,
.ca-widget-button-secondary {
    color: #34383c !important;
    background: #ffffff !important;

    outline: 1px solid #d7dbde;
    outline-offset: -1px;

    --ca-button-accent: #666666;
}

.ca-button-secondary:hover,
.ca-button-secondary:focus-visible,
.ca-widget-button-secondary:hover,
.ca-widget-button-secondary:focus-visible {
    color: #ffffff !important;
    background: #565a5e !important;
    outline-color: transparent;
}

/* =========================================================
 * USP-Bereich
 * ========================================================= */

.elementor-widget-competenza-academy-facts,
.elementor-widget-competenza-academy-facts
.elementor-widget-container,
.ca-widget-facts {
    width: 100%;

    background: #ffffff !important;
}

/*
 * Deutliche Abgrenzung zur vorherigen und folgenden Section,
 * ohne erneut eine große graue Fläche aufzubauen.
 */
.ca-widget-facts {
    padding-block: clamp(34px, 4vw, 52px) !important;

    border-top: 1px solid #dde1e4 !important;
    border-bottom: 1px solid #dde1e4 !important;
}

.ca-widget-facts-grid {
    gap: clamp(16px, 1.5vw, 22px) !important;

    background: transparent !important;
}

/*
 * Einzelne USP-Module bleiben als weiße Karten erhalten.
 */
.ca-widget-fact {
    min-height: 184px !important;

    border: 1px solid #dfe3e6 !important;
    border-top:
        4px solid var(--ca-fact-accent) !important;

    background: #ffffff !important;
}

/*
 * Etwas feinerer Kontrast zur weißen Gesamtfläche.
 */
.ca-widget-fact:hover {
    border-color: #cbd1d5 !important;
    border-top-color: var(--ca-fact-accent) !important;
}

/* =========================================================
 * Off-Canvas-Logo
 * ========================================================= */

.ca-offcanvas-brand,
.ca-offcanvas-brand:link,
.ca-offcanvas-brand:visited,
.ca-offcanvas-brand:hover,
.ca-offcanvas-brand:active {
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;

    -webkit-tap-highlight-color: transparent;
}

.ca-offcanvas-brand img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/*
 * Barrierefreier eigener Fokuszustand statt blauem
 * Browserrahmen direkt um das Logo.
 */
.ca-offcanvas-brand:focus {
    outline: 0;
}

.ca-offcanvas-brand:focus-visible {
    outline: 2px solid #ed8008 !important;
    outline-offset: 6px;

    box-shadow: none !important;
}

/*
 * Auch das Logo selbst darf nie den Fokusrahmen erhalten.
 */
.ca-offcanvas-brand:focus-visible img {
    outline: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
 * Mobile
 * ========================================================= */

@media (max-width: 640px) {
    .ca-widget-facts {
        padding-block: 24px !important;
    }

    /*
     * Mobile Buttons behalten ebenfalls ihre Position.
     */
    .ca-button:hover,
    .ca-button:focus-visible,
    .ca-widget-button:hover,
    .ca-widget-button:focus-visible,
    .ca-account-button:hover,
    .ca-account-button:focus-visible {
        padding:
            13px
            24px
            13px
            30px !important;
    }
}

/* =========================================================
 * Reduzierte Bewegung
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ca-button,
    .ca-widget-button,
    .ca-account-button,
    .ca-button::before,
    .ca-widget-button::before,
    .ca-account-button::before,
    .ca-button::after,
    .ca-widget-button::after,
    .ca-account-button::after {
        transition: none !important;
    }
}

/* =========================================================
 * USP-Rahmen und Button-Hover
 * ========================================================= */

/* ---------------------------------------------------------
 * USP-Boxen: einheitlicher Rahmen
 * --------------------------------------------------------- */

.ca-widget-fact {
    position: relative;

    /*
     * Rundum identische Rahmenlinie.
     */
    border: 1px solid #dfe3e6 !important;
    border-top: 1px solid #dfe3e6 !important;

    overflow: hidden;
}

/*
 * Der farbige Akzent liegt separat innerhalb der Box.
 * Dadurch wird die eigentliche Border nicht verändert.
 */
.ca-widget-fact::after {
    position: absolute;
    z-index: 1;

    inset: 0 0 auto 0;

    display: block !important;

    width: 100%;
    height: 4px;

    content: "";

    background: var(--ca-fact-accent);

    pointer-events: none;
}

.ca-widget-fact:hover {
    border-color: #c8ced2 !important;
}

/*
 * Icon und Text oberhalb des Akzentbalkens halten.
 */
.ca-widget-fact-icon,
.ca-widget-fact-copy {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------
 * Buttoninhalt beim Hover nach rechts verschieben
 * --------------------------------------------------------- */

/*
 * Links wird dauerhaft etwas Platz für den kleinen Balken
 * gelassen.
 */
.ca-button,
.ca-widget-button,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn,
.mto-account-wrapper .mto-continue-course button {
    padding:
        13px
        24px
        13px
        30px !important;
}

/*
 * Direkte Textknoten können mit CSS nicht animiert werden.
 * Bei normalen Links bewegt sich deshalb der gesamte Inhalt
 * über text-indent kontrolliert nach rechts.
 */
.ca-button,
.ca-widget-button,
.ca-account-button {
    text-indent: 0;

    transition:
        text-indent 275ms cubic-bezier(.19, 1, .22, 1),
        background-color 180ms ease,
        color 180ms ease !important;
}

.ca-button:hover,
.ca-button:focus-visible,
.ca-widget-button:hover,
.ca-widget-button:focus-visible,
.ca-account-button:hover,
.ca-account-button:focus-visible {
    /*
     * Genügend Platz für Farbfläche und Chevron.
     */
    text-indent: 42px;
}

/*
 * Falls der Button innere Spans enthält, wird nicht zusätzlich
 * doppelt verschoben.
 */
.ca-button > *,
.ca-widget-button > *,
.ca-account-button > * {
    transform: none !important;
}

/*
 * Masteriyo verwendet häufig innere Spans.
 * Dort verschieben wir gezielt die sichtbaren Inhalte.
 */
.masteriyo .masteriyo-btn-primary > *,
.masteriyo .masteriyo-submit > *,
.masteriyo .masteriyo-single-course--btn > *,
.mto-account-wrapper .mto-continue-course button > * {
    transform: translateX(0) !important;

    transition:
        transform 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

.masteriyo .masteriyo-btn-primary:hover > *,
.masteriyo .masteriyo-btn-primary:focus-visible > *,
.masteriyo .masteriyo-submit:hover > *,
.masteriyo .masteriyo-submit:focus-visible > *,
.masteriyo .masteriyo-single-course--btn:hover > *,
.masteriyo .masteriyo-single-course--btn:focus-visible > *,
.mto-account-wrapper .mto-continue-course button:hover > *,
.mto-account-wrapper .mto-continue-course button:focus-visible > * {
    transform: translateX(42px) !important;
}

/*
 * Die Farbfläche bleibt auf 56 px begrenzt.
 */
.ca-button:hover::before,
.ca-button:focus-visible::before,
.ca-widget-button:hover::before,
.ca-widget-button:focus-visible::before,
.ca-account-button:hover::before,
.ca-account-button:focus-visible::before,
.masteriyo .masteriyo-btn-primary:hover::before,
.masteriyo .masteriyo-btn-primary:focus-visible::before,
.masteriyo .masteriyo-submit:hover::before,
.masteriyo .masteriyo-submit:focus-visible::before,
.masteriyo .masteriyo-single-course--btn:hover::before,
.masteriyo .masteriyo-single-course--btn:focus-visible::before,
.mto-account-wrapper .mto-continue-course button:hover::before,
.mto-account-wrapper .mto-continue-course button:focus-visible::before {
    clip-path: inset(0 calc(100% - 56px) 0 0);
}

/*
 * Text darf bei schmaleren Buttons nicht abgeschnitten werden.
 */
.ca-button,
.ca-widget-button,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn {
    white-space: nowrap;
}

/* ---------------------------------------------------------
 * Mobile: etwas kleinere Verschiebung
 * --------------------------------------------------------- */

@media (max-width: 640px) {
    .ca-button:hover,
    .ca-button:focus-visible,
    .ca-widget-button:hover,
    .ca-widget-button:focus-visible,
    .ca-account-button:hover,
    .ca-account-button:focus-visible {
        text-indent: 36px;
    }

    .masteriyo .masteriyo-btn-primary:hover > *,
    .masteriyo .masteriyo-btn-primary:focus-visible > *,
    .masteriyo .masteriyo-submit:hover > *,
    .masteriyo .masteriyo-submit:focus-visible > *,
    .masteriyo .masteriyo-single-course--btn:hover > *,
    .masteriyo .masteriyo-single-course--btn:focus-visible > * {
        transform: translateX(36px) !important;
    }
}


/* =========================================================
 * Einheitliches Button-Verhalten
 * ========================================================= */

/*
 * Alte Mischlogik vollständig deaktivieren.
 */
.ca-button,
.ca-widget-button,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn,
.mto-account-wrapper .mto-continue-course button {
    text-indent: 0 !important;

    padding:
        13px
        24px
        13px
        30px !important;

    justify-content: center;

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

.ca-button:hover,
.ca-button:focus-visible,
.ca-widget-button:hover,
.ca-widget-button:focus-visible,
.ca-account-button:hover,
.ca-account-button:focus-visible,
.masteriyo .masteriyo-btn-primary:hover,
.masteriyo .masteriyo-btn-primary:focus-visible,
.masteriyo .masteriyo-submit:hover,
.masteriyo .masteriyo-submit:focus-visible,
.masteriyo .masteriyo-single-course--btn:hover,
.masteriyo .masteriyo-single-course--btn:focus-visible,
.mto-account-wrapper .mto-continue-course button:hover,
.mto-account-wrapper .mto-continue-course button:focus-visible {
    text-indent: 0 !important;

    padding:
        13px
        24px
        13px
        30px !important;

    transform: none !important;
}

/*
 * Sämtlicher sichtbarer Buttoninhalt sitzt nun in
 * genau einem gemeinsamen Label.
 */
.ca-button-label {
    position: relative;
    z-index: 2;

    display: inline-flex;

    min-width: 0;

    align-items: center;
    justify-content: center;
    gap: 8px;

    white-space: nowrap;

    transform: translateX(0);

    transition:
        transform 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Einheitlich: Das Label bewegt sich immer nach rechts.
 */
.ca-button:hover > .ca-button-label,
.ca-button:focus-visible > .ca-button-label,
.ca-widget-button:hover > .ca-button-label,
.ca-widget-button:focus-visible > .ca-button-label,
.ca-account-button:hover > .ca-button-label,
.ca-account-button:focus-visible > .ca-button-label,
.masteriyo .masteriyo-btn-primary:hover > .ca-button-label,
.masteriyo .masteriyo-btn-primary:focus-visible > .ca-button-label,
.masteriyo .masteriyo-submit:hover > .ca-button-label,
.masteriyo .masteriyo-submit:focus-visible > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    transform: translateX(28px) !important;
}

/*
 * Frühere Transformationen auf beliebigen Kindelementen
 * neutralisieren.
 */
.ca-button > *:not(.ca-button-label),
.ca-widget-button > *:not(.ca-button-label),
.ca-account-button > *:not(.ca-button-label),
.masteriyo .masteriyo-btn-primary > *:not(.ca-button-label),
.masteriyo .masteriyo-submit > *:not(.ca-button-label),
.masteriyo
.masteriyo-single-course--btn > *:not(.ca-button-label),
.mto-account-wrapper
.mto-continue-course
button > *:not(.ca-button-label) {
    transform: none !important;
}

/*
 * Farbfläche immer von links nach rechts.
 */
.ca-button::before,
.ca-widget-button::before,
.ca-account-button::before,
.masteriyo .masteriyo-btn-primary::before,
.masteriyo .masteriyo-submit::before,
.masteriyo .masteriyo-single-course--btn::before,
.mto-account-wrapper .mto-continue-course button::before {
    clip-path: inset(0 calc(100% - 6px) 0 0) !important;
}

.ca-button:hover::before,
.ca-button:focus-visible::before,
.ca-widget-button:hover::before,
.ca-widget-button:focus-visible::before,
.ca-account-button:hover::before,
.ca-account-button:focus-visible::before,
.masteriyo .masteriyo-btn-primary:hover::before,
.masteriyo .masteriyo-btn-primary:focus-visible::before,
.masteriyo .masteriyo-submit:hover::before,
.masteriyo .masteriyo-submit:focus-visible::before,
.masteriyo .masteriyo-single-course--btn:hover::before,
.masteriyo .masteriyo-single-course--btn:focus-visible::before,
.mto-account-wrapper
.mto-continue-course button:hover::before,
.mto-account-wrapper
.mto-continue-course button:focus-visible::before {
    clip-path: inset(0 calc(100% - 56px) 0 0) !important;
}

@media (max-width: 640px) {
    .ca-button:hover > .ca-button-label,
    .ca-button:focus-visible > .ca-button-label,
    .ca-widget-button:hover > .ca-button-label,
    .ca-widget-button:focus-visible > .ca-button-label,
    .ca-account-button:hover > .ca-button-label,
    .ca-account-button:focus-visible > .ca-button-label,
    .masteriyo
    .masteriyo-btn-primary:hover > .ca-button-label,
    .masteriyo
    .masteriyo-btn-primary:focus-visible > .ca-button-label {
        transform: translateX(24px) !important;
    }
}


/* =========================================================
 * USP-Boxen – finale Ausrichtung
 * ========================================================= */

.ca-widget-facts-grid {
    align-items: stretch !important;
}

/*
 * Alle vier Karten erhalten vollständig identische Rahmen.
 * Ältere last-child-Regeln werden ausdrücklich überschrieben.
 */
.ca-widget-fact,
.ca-widget-fact:first-child,
.ca-widget-fact:last-child,
.ca-widget-fact:nth-child(2),
.ca-widget-fact:nth-child(3),
.ca-widget-fact:nth-child(4) {
    box-sizing: border-box;

    min-height: 176px !important;

    padding:
        34px
        clamp(24px, 2vw, 32px) !important;

    grid-template-columns:
        64px
        minmax(0, 1fr) !important;

    align-content: start !important;
    align-items: start !important;
    gap: 24px;

    border: 1px solid #dfe3e6 !important;
    border-top: 1px solid #dfe3e6 !important;
    border-right: 1px solid #dfe3e6 !important;
    border-bottom: 1px solid #dfe3e6 !important;
    border-left: 1px solid #dfe3e6 !important;

    background: #ffffff !important;
}

/*
 * Der Farbakzent ist unabhängig vom eigentlichen Kartenrahmen.
 */
.ca-widget-fact::after {
    position: absolute;
    z-index: 3;

    inset: 0 0 auto 0;

    display: block !important;

    width: 100%;
    height: 4px;

    content: "";

    background: var(--ca-fact-accent);

    pointer-events: none;
}

/*
 * Iconflächen beginnen in jeder Karte exakt auf derselben Höhe.
 */
.ca-widget-fact-icon {
    align-self: start !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;
}

/*
 * Keine vertikale Zentrierung abhängig von der Textlänge.
 */
.ca-widget-fact-copy {
    display: block !important;

    align-self: start !important;

    padding-top: 3px;
    margin: 0 !important;
}

.ca-widget-fact-copy strong {
    display: block;

    min-height: 22px;

    margin: 0 0 8px !important;

    line-height: 1.35;
}

.ca-widget-fact-copy > span {
    display: block;

    margin: 0;

    line-height: 1.55;
}

/*
 * Hover verändert ausschließlich die Rahmenfarbe,
 * nicht Größe oder Position.
 */
.ca-widget-fact:hover {
    border: 1px solid #c8ced2 !important;
}

@media (max-width: 640px) {
    .ca-widget-fact,
    .ca-widget-fact:last-child {
        min-height: 138px !important;

        padding: 24px 22px !important;

        grid-template-columns:
            56px
            minmax(0, 1fr) !important;

        gap: 18px;
    }

    .ca-widget-fact-icon {
        width: 56px !important;
        height: 56px !important;
    }
}

/* =========================================================
 * Button-Label – sanfte Skalierung beim Hover
 * ========================================================= */

.ca-button-label {
    transform:
        translateX(0)
        scale(1) !important;

    transform-origin: center center;

    transition:
        transform 275ms cubic-bezier(.19, 1, .22, 1),
        font-size 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Einheitlich:
 * leicht nach rechts bewegen und minimal verkleinern.
 */
.ca-button:hover > .ca-button-label,
.ca-button:focus-visible > .ca-button-label,
.ca-widget-button:hover > .ca-button-label,
.ca-widget-button:focus-visible > .ca-button-label,
.ca-account-button:hover > .ca-button-label,
.ca-account-button:focus-visible > .ca-button-label,
.masteriyo .masteriyo-btn-primary:hover > .ca-button-label,
.masteriyo .masteriyo-btn-primary:focus-visible > .ca-button-label,
.masteriyo .masteriyo-submit:hover > .ca-button-label,
.masteriyo .masteriyo-submit:focus-visible > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    transform:
        translateX(26px)
        scale(0.95) !important;
}

/*
 * Bei sehr schmalen Buttons etwas weniger Verschiebung.
 */
@media (max-width: 640px) {
    .ca-button:hover > .ca-button-label,
    .ca-button:focus-visible > .ca-button-label,
    .ca-widget-button:hover > .ca-button-label,
    .ca-widget-button:focus-visible > .ca-button-label,
    .ca-account-button:hover > .ca-button-label,
    .ca-account-button:focus-visible > .ca-button-label,
    .masteriyo
    .masteriyo-btn-primary:hover > .ca-button-label,
    .masteriyo
    .masteriyo-btn-primary:focus-visible > .ca-button-label {
        transform:
            translateX(22px)
            scale(0.94) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-button-label {
        transition: none !important;
    }
}

/* =========================================================
 * Button-Hover – Text sicher innerhalb des Buttons halten
 * ========================================================= */

.ca-button,
.ca-widget-button,
.ca-account-button,
.masteriyo .masteriyo-btn-primary,
.masteriyo .masteriyo-submit,
.masteriyo .masteriyo-single-course--btn,
.mto-account-wrapper .mto-continue-course button {
    box-sizing: border-box;
}

/*
 * Der Header-CTA benötigt für die aufklappende Farbfläche
 * und „Meine Academy“ etwas mehr Gesamtbreite.
 */
.ca-account-button,
.ca-account-button.ca-button,
.ca-account-button.ca-button-primary {
    min-width: 190px !important;
    padding-right: 26px !important;
}

/*
 * Ruhiger Ausgangszustand.
 */
.ca-button-label {
    max-width: 100%;

    transform:
        translateX(0)
        scale(1) !important;

    transform-origin: left center !important;

    transition:
        transform 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Nur noch eine leichte Verschiebung.
 * 26 px waren für kompakte Buttons deutlich zu viel.
 */
.ca-button:hover > .ca-button-label,
.ca-button:focus-visible > .ca-button-label,
.ca-widget-button:hover > .ca-button-label,
.ca-widget-button:focus-visible > .ca-button-label,
.ca-account-button:hover > .ca-button-label,
.ca-account-button:focus-visible > .ca-button-label,
.masteriyo .masteriyo-btn-primary:hover > .ca-button-label,
.masteriyo .masteriyo-btn-primary:focus-visible > .ca-button-label,
.masteriyo .masteriyo-submit:hover > .ca-button-label,
.masteriyo .masteriyo-submit:focus-visible > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    transform:
        translateX(14px)
        scale(0.96) !important;
}

/*
 * Sehr breite Vollflächenbuttons brauchen keine
 * zusätzliche Verkleinerung.
 */
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    transform:
        translateX(14px)
        scale(0.98) !important;
}

@media (max-width: 640px) {
    .ca-account-button,
    .ca-account-button.ca-button,
    .ca-account-button.ca-button-primary {
        min-width: 0 !important;
        width: 100% !important;
    }

    .ca-button:hover > .ca-button-label,
    .ca-button:focus-visible > .ca-button-label,
    .ca-widget-button:hover > .ca-button-label,
    .ca-widget-button:focus-visible > .ca-button-label,
    .ca-account-button:hover > .ca-button-label,
    .ca-account-button:focus-visible > .ca-button-label {
        transform:
            translateX(12px)
            scale(0.96) !important;
    }
}

/* =========================================================
 * Button-Hover – kompakter Farbbereich und Morphing
 * ========================================================= */

:root {
    --ca-button-accent-open: 42px;
}

/*
 * Ausgangszustand des Labels.
 */
.ca-button-label {
    display: inline-flex;
    min-width: 0;

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

    font-size: 1em;
    letter-spacing: 0;

    white-space: nowrap;

    transform:
        translateX(0)
        scale(1) !important;

    transform-origin: center center !important;

    transition:
        transform 300ms cubic-bezier(.19, 1, .22, 1),
        font-size 300ms cubic-bezier(.19, 1, .22, 1),
        letter-spacing 300ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Die farbige Fläche öffnet sich nur noch kompakt.
 */
.ca-button:hover::before,
.ca-button:focus-visible::before,
.ca-widget-button:hover::before,
.ca-widget-button:focus-visible::before,
.ca-account-button:hover::before,
.ca-account-button:focus-visible::before,
.masteriyo .masteriyo-btn-primary:hover::before,
.masteriyo .masteriyo-btn-primary:focus-visible::before,
.masteriyo .masteriyo-submit:hover::before,
.masteriyo .masteriyo-submit:focus-visible::before,
.masteriyo .masteriyo-single-course--btn:hover::before,
.masteriyo .masteriyo-single-course--btn:focus-visible::before,
.mto-account-wrapper
.mto-continue-course button:hover::before,
.mto-account-wrapper
.mto-continue-course button:focus-visible::before {
    clip-path:
        inset(
            0
            calc(100% - var(--ca-button-accent-open))
            0
            0
        ) !important;
}

/*
 * Chevron passend zur schmaleren Farbfläche positionieren.
 */
.ca-button::after,
.ca-widget-button::after,
.ca-account-button::after,
.masteriyo .masteriyo-btn-primary::after,
.masteriyo .masteriyo-submit::after,
.masteriyo .masteriyo-single-course--btn::after,
.mto-account-wrapper
.mto-continue-course button::after {
    left: 14px !important;

    width: 8px !important;
    height: 8px !important;
}

/*
 * Morphing-Effekt:
 * - leicht kleinere Schrift
 * - minimal engere Laufweite
 * - nur geringe Verschiebung nach rechts
 */
.ca-button:hover > .ca-button-label,
.ca-button:focus-visible > .ca-button-label,
.ca-widget-button:hover > .ca-button-label,
.ca-widget-button:focus-visible > .ca-button-label,
.ca-account-button:hover > .ca-button-label,
.ca-account-button:focus-visible > .ca-button-label,
.masteriyo .masteriyo-btn-primary:hover > .ca-button-label,
.masteriyo .masteriyo-btn-primary:focus-visible > .ca-button-label,
.masteriyo .masteriyo-submit:hover > .ca-button-label,
.masteriyo .masteriyo-submit:focus-visible > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    font-size: 0.92em;
    letter-spacing: -0.015em;

    transform:
        translateX(8px)
        scale(0.98) !important;
}

/*
 * Der Headerbutton kann wieder etwas kompakter werden.
 */
.ca-account-button,
.ca-account-button.ca-button,
.ca-account-button.ca-button-primary {
    min-width: 174px !important;
}

/*
 * Breite Vollflächenbuttons benötigen kaum Verschiebung.
 */
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    font-size: 0.95em;
    letter-spacing: -0.01em;

    transform:
        translateX(6px)
        scale(0.99) !important;
}

@media (max-width: 640px) {
    :root {
        --ca-button-accent-open: 40px;
    }

    .ca-button:hover > .ca-button-label,
    .ca-button:focus-visible > .ca-button-label,
    .ca-widget-button:hover > .ca-button-label,
    .ca-widget-button:focus-visible > .ca-button-label,
    .ca-account-button:hover > .ca-button-label,
    .ca-account-button:focus-visible > .ca-button-label {
        font-size: 0.93em;
        letter-spacing: -0.01em;

        transform:
            translateX(7px)
            scale(0.98) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-button-label {
        transition: none !important;
    }
}

/* =========================================================
 * Button-Hover – ohne Schriftverkleinerung
 * ========================================================= */

:root {
    --ca-button-accent-open: 42px;
}

/*
 * Schrift bleibt in Größe, Laufweite und Skalierung stabil.
 */
.ca-button-label {
    font-size: inherit !important;
    letter-spacing: inherit !important;

    transform:
        translateX(0)
        scale(1) !important;

    transform-origin: center center !important;

    transition:
        transform 275ms cubic-bezier(.19, 1, .22, 1) !important;
}

/*
 * Beim Hover nur eine sehr geringe Bewegung nach rechts.
 */
.ca-button:hover > .ca-button-label,
.ca-button:focus-visible > .ca-button-label,
.ca-widget-button:hover > .ca-button-label,
.ca-widget-button:focus-visible > .ca-button-label,
.ca-account-button:hover > .ca-button-label,
.ca-account-button:focus-visible > .ca-button-label,
.masteriyo .masteriyo-btn-primary:hover > .ca-button-label,
.masteriyo .masteriyo-btn-primary:focus-visible > .ca-button-label,
.masteriyo .masteriyo-submit:hover > .ca-button-label,
.masteriyo .masteriyo-submit:focus-visible > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:hover > .ca-button-label,
.masteriyo .masteriyo-single-course--btn:focus-visible > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:hover > .ca-button-label,
.mto-account-wrapper
.mto-continue-course button:focus-visible > .ca-button-label {
    font-size: inherit !important;
    letter-spacing: inherit !important;

    transform:
        translateX(6px)
        scale(1) !important;
}

/*
 * Kompakte Farbfläche bleibt erhalten.
 */
.ca-button:hover::before,
.ca-button:focus-visible::before,
.ca-widget-button:hover::before,
.ca-widget-button:focus-visible::before,
.ca-account-button:hover::before,
.ca-account-button:focus-visible::before,
.masteriyo .masteriyo-btn-primary:hover::before,
.masteriyo .masteriyo-btn-primary:focus-visible::before,
.masteriyo .masteriyo-submit:hover::before,
.masteriyo .masteriyo-submit:focus-visible::before,
.masteriyo .masteriyo-single-course--btn:hover::before,
.masteriyo .masteriyo-single-course--btn:focus-visible::before,
.mto-account-wrapper
.mto-continue-course button:hover::before,
.mto-account-wrapper
.mto-continue-course button:focus-visible::before {
    clip-path:
        inset(
            0
            calc(100% - var(--ca-button-accent-open))
            0
            0
        ) !important;
}

/*
 * Pfeil mittig in der schmaleren Farbfläche.
 */
.ca-button::after,
.ca-widget-button::after,
.ca-account-button::after,
.masteriyo .masteriyo-btn-primary::after,
.masteriyo .masteriyo-submit::after,
.masteriyo .masteriyo-single-course--btn::after,
.mto-account-wrapper
.mto-continue-course button::after {
    left: 14px !important;
}

/*
 * Der Headerbutton braucht keine übermäßige Zusatzbreite mehr.
 */
.ca-account-button,
.ca-account-button.ca-button,
.ca-account-button.ca-button-primary {
    min-width: 176px !important;
}

@media (max-width: 640px) {
    .ca-button:hover > .ca-button-label,
    .ca-button:focus-visible > .ca-button-label,
    .ca-widget-button:hover > .ca-button-label,
    .ca-widget-button:focus-visible > .ca-button-label,
    .ca-account-button:hover > .ca-button-label,
    .ca-account-button:focus-visible > .ca-button-label {
        transform:
            translateX(5px)
            scale(1) !important;
    }
}