/* === START: Competenza Masteriyo Player CSS-only === */

:root {
    --ca-company: #666666;
    --ca-concept: #bdccd8;
    --ca-analytic: #7bb41d;
    --ca-academy: #ed8008;
    --ca-border: #dfe4e8;
    --ca-surface: #ffffff;
    --ca-surface-soft: #f5f7f8;
    --ca-text: #222222;
}


/* =========================================================
 * ALTE JS-DEKORATIONEN NEUTRALISIEREN
 * ========================================================= */

body button.ca-player-submit-button-react-safe::before,
body button.ca-player-submit-button-react-safe::after,
body button.ca-complete-quiz-button-ci::before,
body button.ca-complete-quiz-button-ci::after,
body button.ca-question-submit-button::before,
body button.ca-question-submit-button::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
 * WISSENSTEST ABGEBEN
 * ========================================================= */

body button[aria-label="Wissenstest abgeben"] {
    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 280px !important;
    min-height: 48px !important;

    padding: 12px 24px !important;
    overflow: hidden !important;

    color: #ffffff !important;
    background: var(--ca-company) !important;
    background-image: none !important;

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

    box-shadow:
        inset 6px 0 0 var(--ca-analytic) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-indent: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        box-shadow 220ms ease,
        transform 120ms ease !important;
}

/*
 * Masteriyo bringt selbst bereits ein Haken-Icon mit.
 * Dieses Icon wird vollständig entfernt.
 */
body button[aria-label="Wissenstest abgeben"]
    .chakra-button__icon,
body button[aria-label="Wissenstest abgeben"]
    > span[class*="button__icon"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body button[aria-label="Wissenstest abgeben"]:hover {
    color: #ffffff !important;
    background: var(--ca-company) !important;

    box-shadow:
        inset 48px 0 0 var(--ca-analytic),
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}

body button[aria-label="Wissenstest abgeben"]:focus,
body button[aria-label="Wissenstest abgeben"]:focus-visible {
    color: #ffffff !important;
    background: var(--ca-company) !important;

    outline:
        2px solid rgba(237, 128, 8, 0.42) !important;
    outline-offset: 2px !important;

    box-shadow:
        inset 6px 0 0 var(--ca-analytic) !important;
}

body button[aria-label="Wissenstest abgeben"]:active {
    transform: translateY(1px) !important;
}


/* =========================================================
 * FRAGE STELLEN / SENDEN
 * ========================================================= */

body button[aria-label="Frage stellen"],
body button[aria-label="Senden"] {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;

    padding: 12px 20px !important;

    color: #ffffff !important;
    background: var(--ca-company) !important;
    background-image: none !important;

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

    box-shadow:
        inset 6px 0 0 var(--ca-academy) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    transition:
        box-shadow 220ms ease,
        transform 120ms ease !important;
}

body button[aria-label="Frage stellen"]:hover,
body button[aria-label="Senden"]:hover {
    color: #ffffff !important;
    background: var(--ca-company) !important;

    box-shadow:
        inset 48px 0 0 var(--ca-academy),
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
 * FRAGENFORMULAR
 * ========================================================= */

body textarea[placeholder="What is your question?"],
body textarea[placeholder="Wie lautet Ihre Frage?"],
body textarea[placeholder="Antwort schreiben …"],
body textarea[placeholder="Antwort schreiben ..."] {
    min-height: 112px !important;

    padding: 14px 16px !important;

    color: var(--ca-text) !important;
    background: #ffffff !important;

    border: 1px solid var(--ca-border) !important;
    border-radius: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    resize: vertical !important;
}

body textarea[placeholder="What is your question?"]:focus,
body textarea[placeholder="Wie lautet Ihre Frage?"]:focus,
body textarea[placeholder="Antwort schreiben …"]:focus,
body textarea[placeholder="Antwort schreiben ..."]:focus {
    border-color: var(--ca-academy) !important;

    box-shadow:
        inset 4px 0 0 var(--ca-academy) !important;
}


/* =========================================================
 * WISSENSTEST-BESTÄTIGUNGSMODAL
 * ========================================================= */

body .chakra-modal__overlay {
    background:
        rgba(31, 35, 38, 0.62) !important;

    backdrop-filter:
        blur(2px) !important;

    -webkit-backdrop-filter:
        blur(2px) !important;
}

body section.chakra-modal__content[role="alertdialog"] {
    width:
        min(540px, calc(100vw - 32px)) !important;

    max-width: 540px !important;
    margin: 16px !important;
    overflow: hidden !important;

    color: var(--ca-company) !important;
    background: #ffffff !important;

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

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26) !important;
}

body section.chakra-modal__content[role="alertdialog"]::before {
    content: "" !important;

    display: block !important;

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

    background:
        linear-gradient(
            90deg,
            var(--ca-company) 0 25%,
            var(--ca-concept) 25% 50%,
            var(--ca-analytic) 50% 75%,
            var(--ca-academy) 75% 100%
        ) !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__header {
    margin: 0 !important;
    padding: 26px 28px 14px !important;

    color: var(--ca-text) !important;

    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__body {
    padding: 0 28px 28px !important;

    color: var(--ca-company) !important;

    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    padding: 18px 28px 24px !important;

    background: var(--ca-surface-soft) !important;

    border-top:
        1px solid var(--ca-border) !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer
    button {
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 20px !important;

    border-radius: 0 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease !important;
}

/* Abbrechen */

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer
    button:first-of-type {
    color: var(--ca-company) !important;
    background: #ffffff !important;

    border:
        1px solid var(--ca-concept) !important;

    box-shadow: none !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer
    button:first-of-type:hover {
    color: var(--ca-text) !important;
    background: #edf1f4 !important;

    border-color:
        var(--ca-company) !important;
}

/* Bestätigen */

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer
    button:last-of-type {
    color: #ffffff !important;
    background: var(--ca-company) !important;

    border: 0 !important;

    box-shadow:
        inset 6px 0 0 var(--ca-analytic) !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > .chakra-modal__footer
    button:last-of-type:hover {
    color: #ffffff !important;
    background: var(--ca-company) !important;

    box-shadow:
        inset 48px 0 0 var(--ca-analytic),
        0 7px 18px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
 * FRAGEN-/ANTWORTENBEREICH
 * ========================================================= */

body textarea[placeholder*="Antwort schreiben"] {
    border:
        1px solid var(--ca-border) !important;

    border-radius: 0 !important;
}

body textarea[placeholder*="Antwort schreiben"] + button,
body textarea[placeholder*="Antwort schreiben"]
    ~ button {
    color: #ffffff !important;
    background: var(--ca-company) !important;

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

    box-shadow:
        inset 6px 0 0 var(--ca-academy) !important;
}

/*
 * Bestehende orange Chatblasen neutralisieren.
 * Die Struktur wird nicht verändert.
 */
body [class*="question"] [class*="message"],
body [class*="reply"] [class*="message"] {
    border-radius: 0 !important;
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 600px) {
    body button[aria-label="Wissenstest abgeben"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > .chakra-modal__header {
        padding:
            22px 20px 14px !important;

        font-size: 18px !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > .chakra-modal__body {
        padding:
            0 20px 22px !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > .chakra-modal__footer {
        flex-direction:
            column-reverse !important;

        align-items:
            stretch !important;

        padding:
            16px 20px 20px !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > .chakra-modal__footer
        button {
        width: 100% !important;
    }
}

/* === ENDE: Competenza Masteriyo Player CSS-only === */

/* === START: Competenza Masteriyo stabile CSS-only-Selektoren === */

/*
 * Die Masteriyo-React-Komponenten besitzen nicht in jedem Zustand
 * aria-label-Attribute. Deshalb werden die Komponenten ausschließlich
 * über ihre vorhandene semantische Struktur angesprochen.
 */


/* =========================================================
 * WISSENSTEST ABGEBEN
 *
 * Das native Masteriyo-Abgabeicon verwendet als einziges Playericon
 * ein SVG mit viewBox 0 0 19 19.
 * ========================================================= */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
) {
    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 280px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 12px 24px !important;
    overflow: hidden !important;

    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;
    background-image: none !important;

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

    box-shadow:
        inset 6px 0 0 #7bb41d !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-indent: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer !important;

    transition:
        box-shadow 220ms ease,
        transform 120ms ease !important;
}


/*
 * Das native grüne Haken-Icon wird vollständig entfernt.
 */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
) > .chakra-button__icon {
    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;

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

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
}


/*
 * Alte Pseudoelemente sicher neutralisieren.
 */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
)::before,
body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
)::after {
    content: none !important;
    display: none !important;
}


/*
 * Hover: nur der Analytic-Balken wächst auf 48 px.
 * Kein Icon und keine zusätzliche Textverschiebung.
 */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):hover {
    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

    box-shadow:
        inset 48px 0 0 #7bb41d,
        0 7px 18px rgba(0, 0, 0, 0.16) !important;

    text-indent: 0 !important;
}


/*
 * Fokus erhält keine dauerhaft ausgefahrene Fläche.
 */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):focus,
body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):focus-visible {
    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

    outline:
        2px solid rgba(237, 128, 8, 0.42) !important;
    outline-offset: 2px !important;

    box-shadow:
        inset 6px 0 0 #7bb41d !important;
}


/* =========================================================
 * FRAGE STELLEN
 *
 * Auswahl über das Formular, das das Fragen-Textarea enthält.
 * Dadurch ist kein durch JavaScript gesetztes aria-label nötig.
 * ========================================================= */

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"],
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"] {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 12px 20px !important;

    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;
    background-image: none !important;

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

    box-shadow:
        inset 6px 0 0 #ed8008 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    transition:
        box-shadow 220ms ease,
        transform 120ms ease !important;
}

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]:hover,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]:hover {
    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

    box-shadow:
        inset 48px 0 0 #ed8008,
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
 * ANTWORT SENDEN
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"],
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;

    padding: 12px 20px !important;

    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

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

    box-shadow:
        inset 6px 0 0 #ed8008 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:hover,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:hover {
    background: #666666 !important;
    background-color: #666666 !important;

    box-shadow:
        inset 48px 0 0 #ed8008,
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
 * WISSENSTEST-BESTÄTIGUNGSMODAL
 * ========================================================= */

body div.chakra-modal__overlay {
    background:
        rgba(31, 35, 38, 0.64) !important;

    backdrop-filter:
        blur(2px) !important;

    -webkit-backdrop-filter:
        blur(2px) !important;
}

body section.chakra-modal__content[role="alertdialog"] {
    position: relative !important;

    width:
        min(540px, calc(100vw - 32px)) !important;

    max-width: 540px !important;

    margin: 16px !important;
    overflow: hidden !important;

    color: #666666 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;

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

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26) !important;
}


/*
 * Vierfarbige CI-Leiste.
 */

body section.chakra-modal__content[role="alertdialog"]::before {
    content: "" !important;

    position: absolute !important;
    z-index: 3 !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    display: block !important;

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

    background:
        linear-gradient(
            90deg,
            #666666 0,
            #666666 25%,
            #bdccd8 25%,
            #bdccd8 50%,
            #7bb41d 50%,
            #7bb41d 75%,
            #ed8008 75%,
            #ed8008 100%
        ) !important;
}


/*
 * Überschrift.
 */

body section.chakra-modal__content[role="alertdialog"]
    > header.chakra-modal__header {
    margin: 0 !important;

    padding:
        30px 28px 14px !important;

    color: #222222 !important;

    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    border: 0 !important;
}


/*
 * Modaltext.
 */

body section.chakra-modal__content[role="alertdialog"]
    > div.chakra-modal__body {
    padding:
        0 28px 28px !important;

    color: #666666 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}


/*
 * Footer.
 */

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    padding:
        18px 28px 24px !important;

    background: #f5f7f8 !important;
    background-color: #f5f7f8 !important;

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


/*
 * Modalbuttons.
 */

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer
    > button {
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 20px !important;

    border-radius: 0 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


/*
 * Abbrechen.
 */

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer
    > button:first-of-type {
    color: #666666 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;

    border:
        1px solid #bdccd8 !important;

    box-shadow: none !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer
    > button:first-of-type:hover {
    color: #222222 !important;
    background: #edf1f4 !important;
    background-color: #edf1f4 !important;

    border-color: #666666 !important;
}


/*
 * Bestätigen.
 */

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer
    > button:last-of-type {
    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

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

    box-shadow:
        inset 6px 0 0 #7bb41d !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer
    > button:last-of-type:hover {
    color: #ffffff !important;
    background: #666666 !important;
    background-color: #666666 !important;

    box-shadow:
        inset 48px 0 0 #7bb41d,
        0 7px 18px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 600px) {
    body button.chakra-button:has(
        > .chakra-button__icon
        > svg[viewBox="0 0 19 19"]
    ) {
        width: 100% !important;
        min-width: 0 !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > footer.chakra-modal__footer {
        flex-direction:
            column-reverse !important;

        align-items:
            stretch !important;

        padding:
            16px 20px 20px !important;
    }

    body section.chakra-modal__content[role="alertdialog"]
        > footer.chakra-modal__footer
        > button {
        width: 100% !important;
    }
}

/* === ENDE: Competenza Masteriyo stabile CSS-only-Selektoren === */

/* === START: Competenza Player Lucide-Icons und Radios CSS-only === */

/* =========================================================
 * LUCIDE-ICONS IN DEN CI-BUTTONS
 *
 * Icons erscheinen ausschließlich beim Hover.
 * Keine zusätzlichen DOM-Knoten und kein JavaScript.
 * ========================================================= */


/* ---------------------------------------------------------
 * Wissenstest abgeben: Lucide Circle Check
 * --------------------------------------------------------- */

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
) {
    transition:
        box-shadow 220ms ease,
        transform 120ms ease,
        padding 220ms ease !important;
}

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
)::before {
    content: "" !important;

    position: absolute !important;
    z-index: 3 !important;

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

    display: block !important;

    width: 20px !important;
    height: 20px !important;

    opacity: 0 !important;
    visibility: hidden !important;

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

    background:
        center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms ease !important;

    pointer-events: none !important;
}

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):hover {
    padding-left: 48px !important;
}

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):hover::before {
    opacity: 1 !important;
    visibility: visible !important;

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

body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):focus::before,
body button.chakra-button:has(
    > .chakra-button__icon
    > svg[viewBox="0 0 19 19"]
):focus-visible::before {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ---------------------------------------------------------
 * Frage stellen: Lucide Message Circle Question
 * --------------------------------------------------------- */

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"],
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"] {
    overflow: hidden !important;

    transition:
        box-shadow 220ms ease,
        transform 120ms ease,
        padding 220ms ease !important;
}

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]::before,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]::before {
    content: "" !important;

    position: absolute !important;
    z-index: 3 !important;

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

    display: block !important;

    width: 20px !important;
    height: 20px !important;

    opacity: 0 !important;
    visibility: hidden !important;

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

    background:
        center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") !important;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms ease !important;

    pointer-events: none !important;
}

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]:hover,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]:hover {
    padding-left: 48px !important;
}

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]:hover::before,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]:hover::before {
    opacity: 1 !important;
    visibility: visible !important;

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

body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]:focus::before,
body form:has(
    textarea[placeholder="Wie lautet Ihre Frage?"]
) button[type="submit"]:focus-visible::before,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]:focus::before,
body form:has(
    textarea[placeholder="What is your question?"]
) button[type="submit"]:focus-visible::before {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
 * RADIO-BUTTONS IM WISSENSTEST
 * ========================================================= */


/*
 * Browser-Input unsichtbar, aber weiterhin bedienbar.
 */

body label.chakra-radio {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    min-height: 48px !important;

    padding:
        12px 16px !important;

    color: #222222 !important;
    background: #ffffff !important;

    border:
        1px solid #dfe4e8 !important;

    border-radius: 0 !important;

    cursor: pointer !important;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease !important;
}

body label.chakra-radio:hover {
    background:
        #fafbfc !important;

    border-color:
        #bdccd8 !important;
}


/*
 * Native Chakra-Kontrollfläche.
 */

body label.chakra-radio
    > .chakra-radio__control {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex:
        0 0 20px !important;

    width:
        20px !important;

    min-width:
        20px !important;

    height:
        20px !important;

    margin:
        0 10px 0 0 !important;

    color:
        transparent !important;

    background:
        #ffffff !important;

    border:
        2px solid #bdccd8 !important;

    border-radius:
        50% !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease !important;
}


/*
 * Chakra-internes SVG bzw. altes Auswahlzeichen entfernen.
 */

body label.chakra-radio
    > .chakra-radio__control
    > svg,
body label.chakra-radio
    > .chakra-radio__control
    > span {
    display:
        none !important;
}


/*
 * Eigener innerer Auswahlpunkt.
 */

body label.chakra-radio
    > .chakra-radio__control::after {
    content:
        "" !important;

    display:
        block !important;

    width:
        8px !important;

    height:
        8px !important;

    background:
        #ed8008 !important;

    border-radius:
        50% !important;

    opacity:
        0 !important;

    transform:
        scale(0.55) !important;

    transition:
        opacity 140ms ease,
        transform 140ms ease !important;
}


/*
 * Ausgewählter Zustand.
 *
 * Chakra setzt üblicherweise data-checked bzw. aria-checked.
 */

body label.chakra-radio
    > .chakra-radio__control[data-checked],
body label.chakra-radio
    > .chakra-radio__control[aria-checked="true"] {
    background:
        #ffffff !important;

    border-color:
        #ed8008 !important;

    box-shadow:
        0 0 0 1px rgba(237, 128, 8, 0.12) !important;
}

body label.chakra-radio
    > .chakra-radio__control[data-checked]::after,
body label.chakra-radio
    > .chakra-radio__control[aria-checked="true"]::after {
    opacity:
        1 !important;

    transform:
        scale(1) !important;
}


/*
 * Fallback für Chakra-Versionen, bei denen data-checked
 * am Label statt am Control sitzt.
 */

body label.chakra-radio[data-checked]
    > .chakra-radio__control,
body label.chakra-radio[aria-checked="true"]
    > .chakra-radio__control {
    border-color:
        #ed8008 !important;
}

body label.chakra-radio[data-checked]
    > .chakra-radio__control::after,
body label.chakra-radio[aria-checked="true"]
    > .chakra-radio__control::after {
    opacity:
        1 !important;

    transform:
        scale(1) !important;
}


/*
 * Fokus über die versteckte Radioeingabe.
 */

body label.chakra-radio:has(
    input[type="radio"]:focus-visible
) {
    border-color:
        #ed8008 !important;

    box-shadow:
        inset 4px 0 0 #ed8008 !important;
}

body label.chakra-radio:has(
    input[type="radio"]:focus-visible
) > .chakra-radio__control {
    border-color:
        #ed8008 !important;

    box-shadow:
        0 0 0 3px rgba(237, 128, 8, 0.18) !important;
}


/*
 * Auswahlkarte dezent markieren.
 */

body label.chakra-radio:has(
    input[type="radio"]:checked
) {
    background:
        rgba(237, 128, 8, 0.035) !important;

    border-color:
        #ed8008 !important;
}

body label.chakra-radio:has(
    input[type="radio"]:checked
) > .chakra-radio__control {
    border-color:
        #ed8008 !important;
}

body label.chakra-radio:has(
    input[type="radio"]:checked
) > .chakra-radio__control::after {
    opacity:
        1 !important;

    transform:
        scale(1) !important;
}


/*
 * Deaktivierter Zustand.
 */

body label.chakra-radio:has(
    input[type="radio"]:disabled
) {
    opacity:
        0.55 !important;

    cursor:
        not-allowed !important;
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 600px) {
    body label.chakra-radio {
        min-height:
            52px !important;

        padding:
            14px !important;
    }
}

/* === ENDE: Competenza Player Lucide-Icons und Radios CSS-only === */

/* === START: Competenza Player Radio-Auswahlpunkt Fix === */

/*
 * Chakra zeichnet intern eigene Pseudoelemente.
 * Diese werden vollständig neutralisiert.
 */

body label.chakra-radio
    > .chakra-radio__control::before,
body label.chakra-radio
    > .chakra-radio__control::after {
    content: none !important;
    display: none !important;
}


/*
 * Grundzustand: weißer Kreis mit neutralem Rand.
 */

body label.chakra-radio
    > .chakra-radio__control {
    display: inline-block !important;

    flex: 0 0 20px !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    color: transparent !important;

    background:
        #ffffff !important;

    border:
        2px solid #bdccd8 !important;

    border-radius:
        50% !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;
}


/*
 * Chakra-eigene Grafiken und Elemente entfernen.
 */

body label.chakra-radio
    > .chakra-radio__control
    > svg,
body label.chakra-radio
    > .chakra-radio__control
    > span,
body label.chakra-radio
    > .chakra-radio__control
    > * {
    display: none !important;
}


/*
 * Ausgewählt:
 * Auswahlpunkt wird direkt als radialer Hintergrund gezeichnet.
 * Keine Pseudoelemente, daher kein C-/Ring-Effekt.
 */

body label.chakra-radio:has(
    input[type="radio"]:checked
) > .chakra-radio__control,
body label.chakra-radio[data-checked]
    > .chakra-radio__control,
body label.chakra-radio[aria-checked="true"]
    > .chakra-radio__control,
body label.chakra-radio
    > .chakra-radio__control[data-checked],
body label.chakra-radio
    > .chakra-radio__control[aria-checked="true"] {
    background:
        radial-gradient(
            circle at center,
            #ed8008 0,
            #ed8008 4px,
            transparent 4.5px,
            transparent 100%
        ),
        #ffffff !important;

    border-color:
        #ed8008 !important;

    box-shadow:
        0 0 0 1px rgba(237, 128, 8, 0.10) !important;
}


/*
 * Ausgewählte Antwortkarte.
 */

body label.chakra-radio:has(
    input[type="radio"]:checked
),
body label.chakra-radio[data-checked],
body label.chakra-radio[aria-checked="true"] {
    color:
        #222222 !important;

    background:
        rgba(237, 128, 8, 0.035) !important;

    border-color:
        #ed8008 !important;
}


/*
 * Tastaturfokus ohne blauen Chakra-Ring.
 */

body label.chakra-radio:has(
    input[type="radio"]:focus-visible
) {
    border-color:
        #ed8008 !important;

    outline:
        2px solid rgba(237, 128, 8, 0.22) !important;

    outline-offset:
        2px !important;

    box-shadow:
        none !important;
}

body label.chakra-radio:has(
    input[type="radio"]:focus-visible
) > .chakra-radio__control {
    border-color:
        #ed8008 !important;

    box-shadow:
        0 0 0 3px rgba(237, 128, 8, 0.16) !important;
}


/*
 * Nicht ausgewählter Zustand sicher zurücksetzen.
 */

body label.chakra-radio:not(:has(
    input[type="radio"]:checked
)) > .chakra-radio__control:not([data-checked]):not(
    [aria-checked="true"]
) {
    background:
        #ffffff !important;

    border-color:
        #bdccd8 !important;

    box-shadow:
        none !important;
}

/* === ENDE: Competenza Player Radio-Auswahlpunkt Fix === */

/* === START: Competenza Player Paginierung CI === */

/*
 * Minimalistische Paginierung:
 *
 * - keine Farbbalken
 * - keine Schatten
 * - keine Bewegung
 * - nur dezenter Farbwechsel
 */

body button[aria-label="Previous page"],
body button[aria-label="Next page"],
body button[aria-label^="Current page"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;

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

    color: #666666 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    border: 1px solid #dfe4e8 !important;
    border-radius: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

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


/* Pfeile */

body button[aria-label="Previous page"]:hover:not(:disabled),
body button[aria-label="Next page"]:hover:not(:disabled) {
    color: #222222 !important;

    background: #f3f5f6 !important;
    background-color: #f3f5f6 !important;

    border-color: #bdccd8 !important;

    box-shadow: none !important;
}


/* Aktuelle Seite */

body button[aria-label^="Current page"] {
    color: #ffffff !important;

    background: #ed8008 !important;
    background-color: #ed8008 !important;

    border-color: #ed8008 !important;

    box-shadow: none !important;
}

body button[aria-label^="Current page"]:hover {
    color: #ffffff !important;

    background: #d97200 !important;
    background-color: #d97200 !important;

    border-color: #d97200 !important;

    box-shadow: none !important;
}


/* Deaktivierte Pfeile */

body button[aria-label="Previous page"]:disabled,
body button[aria-label="Next page"]:disabled,
body button[aria-label="Previous page"][aria-disabled="true"],
body button[aria-label="Next page"][aria-disabled="true"] {
    color: #c9d0d5 !important;

    background: #fafbfc !important;
    background-color: #fafbfc !important;

    border-color: #edf0f2 !important;

    opacity: 1 !important;

    box-shadow: none !important;

    cursor: not-allowed !important;
}


/* Tastaturfokus */

body button[aria-label="Previous page"]:focus-visible,
body button[aria-label="Next page"]:focus-visible,
body button[aria-label^="Current page"]:focus-visible {
    outline: 2px solid rgba(237, 128, 8, 0.28) !important;
    outline-offset: 2px !important;

    box-shadow: none !important;
}


/* Pfeil-Icons */

body button[aria-label="Previous page"] svg,
body button[aria-label="Next page"] svg {
    width: 15px !important;
    height: 15px !important;

    color: currentColor !important;
}


/* Mobile Touchfläche */

@media (max-width: 600px) {
    body button[aria-label="Previous page"],
    body button[aria-label="Next page"],
    body button[aria-label^="Current page"] {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
}

/* === ENDE: Competenza Player Paginierung CI === */

/* === START: Competenza Player Antwortbutton-Icon CSS-only === */

/*
 * Antwortbutton:
 *
 * Default:
 * - Company-grau
 * - 6 px Academy-Balken
 * - kein Icon
 *
 * Hover:
 * - Academy-Fläche wächst auf 48 px
 * - Lucide-Send erscheint
 *
 * Keine DOM-Manipulation.
 */


/* =========================================================
 * BUTTON-GRUNDZUSTAND
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"],
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"],
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"] {
    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 12px 20px !important;
    overflow: hidden !important;

    color: #ffffff !important;

    background:
        #666666 !important;

    background-color:
        #666666 !important;

    background-image:
        none !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        inset 6px 0 0 #ed8008 !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    text-decoration:
        none !important;

    text-indent:
        0 !important;

    white-space:
        nowrap !important;

    transition:
        box-shadow 220ms ease,
        padding 220ms ease,
        transform 120ms ease !important;
}


/* =========================================================
 * LUCIDE SEND
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]::before,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]::before,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        3 !important;

    top:
        50% !important;

    left:
        14px !important;

    display:
        block !important;

    width:
        20px !important;

    height:
        20px !important;

    opacity:
        0 !important;

    visibility:
        hidden !important;

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

    background:
        center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") !important;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms ease !important;

    pointer-events:
        none !important;
}


/* =========================================================
 * HOVER
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:hover,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:hover,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:hover {
    padding-left:
        48px !important;

    color:
        #ffffff !important;

    background:
        #666666 !important;

    background-color:
        #666666 !important;

    box-shadow:
        inset 48px 0 0 #ed8008,
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:hover::before,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:hover::before,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:hover::before {
    opacity:
        1 !important;

    visibility:
        visible !important;

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


/* =========================================================
 * FOKUS
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:focus,
body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:focus-visible,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:focus,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:focus-visible,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:focus,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:focus-visible {
    padding-left:
        20px !important;

    outline:
        2px solid rgba(237, 128, 8, 0.42) !important;

    outline-offset:
        2px !important;

    box-shadow:
        inset 6px 0 0 #ed8008 !important;
}

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:focus::before,
body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:focus-visible::before,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:focus::before,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:focus-visible::before,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:focus::before,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:focus-visible::before {
    opacity:
        0 !important;

    visibility:
        hidden !important;

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


/* =========================================================
 * AKTIV
 * ========================================================= */

body form:has(
    textarea[placeholder="Antwort schreiben …"]
) button[type="submit"]:active,
body form:has(
    textarea[placeholder="Antwort schreiben ..."]
) button[type="submit"]:active,
body form:has(
    textarea[placeholder="Write a reply..."]
) button[type="submit"]:active {
    transform:
        translateY(1px) !important;
}

/* === ENDE: Competenza Player Antwortbutton-Icon CSS-only === */

/* === START: Competenza Player Modale final === */

/* =========================================================
 * GEMEINSAME MODAL-CI
 * ========================================================= */

body .chakra-modal__overlay {
    background:
        rgba(31, 35, 38, 0.64) !important;

    backdrop-filter:
        blur(2px) !important;

    -webkit-backdrop-filter:
        blur(2px) !important;
}

body section.chakra-modal__content {
    position: relative !important;

    overflow: hidden !important;

    color: #666666 !important;
    background: #ffffff !important;

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

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26) !important;
}

/*
 * Nur drei Markenbereiche:
 * concept → analytic → academy
 */

body section.chakra-modal__content::before {
    content: "" !important;

    position: absolute !important;
    z-index: 5 !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    display: block !important;

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

    background:
        linear-gradient(
            90deg,
            #bdccd8 0,
            #bdccd8 33.333%,
            #7bb41d 33.333%,
            #7bb41d 66.666%,
            #ed8008 66.666%,
            #ed8008 100%
        ) !important;
}


/* =========================================================
 * WISSENSTEST-ABGABEMODAL
 * ========================================================= */

body section.chakra-modal__content[role="alertdialog"] {
    width:
        min(540px, calc(100vw - 32px)) !important;

    max-width: 540px !important;

    margin: 16px !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > header.chakra-modal__header {
    margin: 0 !important;

    padding:
        30px 28px 14px !important;

    color: #222222 !important;

    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > div.chakra-modal__body {
    padding:
        0 28px 28px !important;

    color: #666666 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body section.chakra-modal__content[role="alertdialog"]
    > footer.chakra-modal__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    padding:
        18px 28px 24px !important;

    background: #f5f7f8 !important;

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


/* =========================================================
 * GEMEINSAME MODALBUTTONS
 * ========================================================= */

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button {
    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 20px !important;
    overflow: hidden !important;

    color: #ffffff !important;
    background: #666666 !important;

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

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;

    transition:
        padding 220ms ease,
        box-shadow 220ms ease,
        transform 120ms ease !important;
}


/* =========================================================
 * ABBRECHEN
 * ========================================================= */

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:first-of-type {
    color: #ffffff !important;
    background: #666666 !important;

    box-shadow:
        inset 6px 0 0 #bdccd8 !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:first-of-type::before {
    content: "" !important;

    position: absolute !important;

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

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

    opacity: 0 !important;
    visibility: hidden !important;

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

    background:
        center / 18px 18px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") !important;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms ease !important;

    pointer-events: none !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:first-of-type:hover {
    padding-left: 48px !important;

    box-shadow:
        inset 48px 0 0 #bdccd8,
        0 7px 18px rgba(0, 0, 0, 0.14) !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:first-of-type:hover::before {
    opacity: 1 !important;
    visibility: visible !important;

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


/* =========================================================
 * BESTÄTIGEN / ABSENDEN
 * ========================================================= */

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:last-of-type {
    color: #ffffff !important;
    background: #666666 !important;

    box-shadow:
        inset 6px 0 0 #7bb41d !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:last-of-type::before {
    content: "" !important;

    position: absolute !important;

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

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

    opacity: 0 !important;
    visibility: hidden !important;

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

    background:
        center / 18px 18px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") !important;

    transition:
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms ease !important;

    pointer-events: none !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:last-of-type:hover {
    padding-left: 48px !important;

    box-shadow:
        inset 48px 0 0 #7bb41d,
        0 7px 18px rgba(0, 0, 0, 0.16) !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:last-of-type:hover::before {
    opacity: 1 !important;
    visibility: visible !important;

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


/* Fokus: kein dauerhaft ausgefahrener Balken */

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:focus,
body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:focus-visible {
    padding-left: 20px !important;

    outline:
        2px solid rgba(237, 128, 8, 0.38) !important;

    outline-offset:
        2px !important;
}

body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:focus::before,
body section.chakra-modal__content
    > footer.chakra-modal__footer
    > button:focus-visible::before {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
 * ABSCHLUSS-/BEWERTUNGSMODAL
 * ========================================================= */

/*
 * Das Bewertungsmodal enthält mindestens ein Textfeld
 * und ein mehrzeiliges Textfeld.
 */

body section.chakra-modal__content:has(
    input
):has(
    textarea
) {
    width:
        min(680px, calc(100vw - 32px)) !important;

    max-width: 680px !important;

    margin: 16px !important;
}

body section.chakra-modal__content:has(
    input
):has(
    textarea
) > header.chakra-modal__header {
    padding:
        30px 38px 24px !important;

    color: #222222 !important;

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

body section.chakra-modal__content:has(
    input
):has(
    textarea
) > div.chakra-modal__body {
    padding:
        30px 38px !important;
}

body section.chakra-modal__content:has(
    input
):has(
    textarea
) > footer.chakra-modal__footer {
    display: flex !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    padding:
        20px 38px 24px !important;

    background: #f5f7f8 !important;

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


/* Formularelemente */

body section.chakra-modal__content:has(
    input
):has(
    textarea
) input,
body section.chakra-modal__content:has(
    input
):has(
    textarea
) textarea {
    width: 100% !important;

    padding: 12px 14px !important;

    color: #222222 !important;
    background: #ffffff !important;

    border:
        1px solid #bdccd8 !important;

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

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
}

body section.chakra-modal__content:has(
    input
):has(
    textarea
) input:focus,
body section.chakra-modal__content:has(
    input
):has(
    textarea
) textarea:focus {
    border-color: #ed8008 !important;

    box-shadow:
        inset 4px 0 0 #ed8008 !important;
}


/* Sterne */

body section.chakra-modal__content:has(
    input
):has(
    textarea
) svg {
    transition:
        color 140ms ease,
        transform 140ms ease !important;
}

body section.chakra-modal__content:has(
    input
):has(
    textarea
) button:hover svg,
body section.chakra-modal__content:has(
    input
):has(
    textarea
) [role="button"]:hover svg {
    color: #ed8008 !important;

    transform:
        scale(1.08) !important;
}


/* Schließen-Button */

body .chakra-modal__close-btn {
    top: 10px !important;
    right: 10px !important;

    width: 38px !important;
    height: 38px !important;

    color: #ffffff !important;
    background: #666666 !important;

    border-radius: 0 !important;

    box-shadow:
        inset 4px 0 0 #ed8008 !important;
}

body .chakra-modal__close-btn:hover {
    background: #666666 !important;

    box-shadow:
        inset 38px 0 0 #ed8008 !important;
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 600px) {
    body section.chakra-modal__content
        > footer.chakra-modal__footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;

        padding:
            16px 20px 20px !important;
    }

    body section.chakra-modal__content
        > footer.chakra-modal__footer
        > button {
        width: 100% !important;
    }

    body section.chakra-modal__content:has(
        input
    ):has(
        textarea
    ) > header.chakra-modal__header,
    body section.chakra-modal__content:has(
        input
    ):has(
        textarea
    ) > div.chakra-modal__body {
        padding-right: 22px !important;
        padding-left: 22px !important;
    }
}

/* === ENDE: Competenza Player Modale final === */