

<!-- CLASSMIRROR V216b SESSION LABELS BEGIN -->

    
<!-- CLASSMIRROR V216b SESSION LABELS END -->


<!DOCTYPE html>


<html


    lang="de"


    dir="ltr"


>


<head>


    <meta charset="UTF-8">


    <meta


        name="viewport"


        content="width=device-width, initial-scale=1.0"


    >


    <title>Hilfezentrum — ClassMirror</title>


    <meta


        name="description"


        content="Hilfe zu ClassMirror: Konto, Lernsitzungen, Mirror Score, Premium, Familie und technische Fragen."


    >


    <meta


        name="keywords"


        content="ClassMirror, apprentissage, intelligence artificielle, élèves virtuels, révision, enseignement"


    >


    <meta


        name="author"


        content="Yassine Douich"


    >


    <meta


        property="og:type"


        content="website"


    >


    <meta


        property="og:site_name"


        content="ClassMirror"


    >


    <meta


        property="og:title"


        content="Hilfezentrum — ClassMirror"


    >


    <meta


        property="og:description"


        content="Hilfe zu ClassMirror: Konto, Lernsitzungen, Mirror Score, Premium, Familie und technische Fragen."


    >


    <meta


        property="og:locale"


        content="en_GB"


    >


    <meta


        name="twitter:title"


        content="Hilfezentrum — ClassMirror"


    >


    <meta


        name="twitter:description"


        content="Hilfe zu ClassMirror: Konto, Lernsitzungen, Mirror Score, Premium, Familie und technische Fragen."


    >


    <link


        rel="stylesheet"


        href="https://www.myclassmirror.com/static/css/style.css"


    >


    <!--


        Ce style minimal est volontairement placé après style.css.


        Il garantit que les liens de langue restent visibles et cliquables.


    -->


    <style>


        .language-switcher {


            position: relative;


            z-index: 10000;


            display: inline-flex;


            align-items: center;


            gap: 6px;


            direction: ltr;


            pointer-events: auto;


        }


        .language-switcher a {


            position: relative;


            z-index: 10001;


            display: inline-flex;


            align-items: center;


            justify-content: center;


            min-width: 34px;


            height: 30px;


            padding: 0 7px;


            color: inherit;


            font-size: 13px;


            font-weight: 700;


            line-height: 1;


            text-decoration: none;


            background: transparent;


            border-radius: 7px;


            cursor: pointer;


            pointer-events: auto;


        }


        .language-switcher a:hover {


            color: #6c4df6;


            background: rgba(108, 77, 246, 0.10);


        }


        .language-switcher a.active {


            color: #ffffff;


            background: #6c4df6;


        }


        html[dir="rtl"] body {


            direction: rtl;


            text-align: right;


        }


        html[dir="rtl"] .language-switcher {


            direction: ltr;


        }


        /* =====================================================


           MENU DE COMPTE CONNECTÉ


        ===================================================== */


        .nav-container {


            overflow: visible;


        }


        .nav-links {


            min-width: 0;


            gap: 12px;


        }


        .nav-links > a,


        .account-menu-button {


            white-space: nowrap;


        }


        .language-switcher {


            flex: 0 0 auto;


        }


        .account-menu {


            position: relative;


            z-index: 10020;


            flex: 0 0 auto;


        }


        .account-menu-button {


            display: inline-flex;


            align-items: center;


            justify-content: center;


            gap: 8px;


            min-height: 42px;


            padding: 8px 14px;


            color: #ffffff;


            font: inherit;


            font-size: 14px;


            font-weight: 850;


            line-height: 1;


            background: #6c4df6;


            border: 1px solid #6c4df6;


            border-radius: 12px;


            cursor: pointer;


        }


        .account-menu-button:hover {


            background: #5b3fe0;


            border-color: #5b3fe0;


        }


        .account-menu-arrow {


            display: inline-block;


            font-size: 15px;


            transition: transform 0.2s ease;


        }


        .account-menu.open .account-menu-arrow {


            transform: rotate(180deg);


        }


        .account-menu-panel {


            position: absolute;


            top: calc(100% + 10px);


            right: 0;


            z-index: 10030;


            display: none;


            width: min(290px, calc(100vw - 32px));


            max-height: min(520px, calc(100vh - 110px));


            overflow-y: auto;


            padding: 9px;


            background: #ffffff;


            border: 1px solid #e4e6ef;


            border-radius: 16px;


            box-shadow: 0 20px 50px rgba(31, 35, 48, 0.16);


        }


        .account-menu.open .account-menu-panel {


            display: grid;


            gap: 3px;


        }


        .account-menu-panel a {


            display: flex;


            align-items: center;


            min-height: 42px;


            padding: 10px 12px;


            color: #3f4558;


            font-size: 14px;


            font-weight: 760;


            line-height: 1.3;


            text-decoration: none;


            border-radius: 10px;


        }


        .account-menu-panel a:hover {


            color: #563dc8;


            text-decoration: none;


            background: #f1eeff;


        }


        .account-menu-separator {


            height: 1px;


            margin: 6px 3px;


            background: #eceef4;


        }


        .account-menu-panel .account-menu-logout {


            color: #a32936;


            background: #fff5f6;


        }


        .account-menu-panel .account-menu-logout:hover {


            color: #8b1f2a;


            background: #ffe9eb;


        }


        html[dir="rtl"] .account-menu-panel {


            right: auto;


            left: 0;


        }


        @media (max-width: 1080px) {


            .nav-links {


                gap: 9px;


            }


            .nav-links > a {


                font-size: 13px;


            }


            .language-switcher a {


                min-width: 31px;


                padding: 0 5px;


            }


        }


        html {


            scroll-behavior: smooth;


        }


        body.navigation-open {


            overflow: hidden;


        }


        .skip-link {


            position: fixed;


            top: 10px;


            left: 10px;


            z-index: 20000;


            padding: 10px 14px;


            color: #ffffff;


            font-size: 13px;


            font-weight: 900;


            text-decoration: none;


            background: #4f35c5;


            border-radius: 10px;


            box-shadow: 0 12px 30px rgba(39, 25, 101, 0.24);


            transform: translateY(-150%);


        }


        .skip-link:focus {


            transform: translateY(0);


        }


        html[dir="rtl"] .skip-link {


            right: 10px;


            left: auto;


        }


        .nav-links > a.active,


        .account-menu-panel a.active {


            color: #5a3fce;


            background: #f0edff;


        }


        .nav-links > a.active {


            border-radius: 9px;


        }


        .account-menu-button.active {


            box-shadow: 0 0 0 3px rgba(108, 77, 246, 0.18);


        }


        .account-plan-badge {


            display: inline-flex;


            align-items: center;


            justify-content: center;


            min-height: 22px;


            padding: 3px 7px;


            color: #5036ba;


            font-size: 9px;


            font-weight: 950;


            letter-spacing: 0.04em;


            text-transform: uppercase;


            background: #f1eeff;


            border-radius: 999px;


        }


        .account-menu-button .account-plan-badge {


            color: #5338bd;


            background: #ffffff;


        }


        .footer-portal-form button[disabled] {


            opacity: 0.68;


            cursor: wait;


        }


        #main-content:focus {


            outline: none;


        }


        @media (max-width: 900px) {


            .nav-links > a.active {


                width: 100%;


            }


            .account-menu-button .account-plan-badge {


                margin-inline-start: auto;


            }


        }


        @media (prefers-reduced-motion: reduce) {


            html {


                scroll-behavior: auto;


            }


            .skip-link,


            .account-menu-arrow {


                transition: none;


            }


        }


        @media (max-width: 900px) {


            .nav-container {


                align-items: center;


            }


            .nav-links.open {


                max-height: calc(100vh - 92px);


                overflow-y: auto;


            }


            .language-switcher {


                justify-content: center;


                width: 100%;


                padding: 7px 0;


            }


            .account-menu {


                width: 100%;


            }


            .account-menu-button {


                width: 100%;


            }


            .account-menu-panel {


                position: static;


                width: 100%;


                max-height: none;


                margin-top: 7px;


                box-shadow: none;


            }


            html[dir="rtl"] .account-menu-panel {


                right: auto;


                left: auto;


            }


        }


        /* =====================================================


           IDENTITÉ VISUELLE CLASSMIRROR


        ===================================================== */


        .classmirror-brand-logo {


            display: inline-flex;


            align-items: center;


            justify-content: center;


            flex: 0 0 auto;


            width: 238px;


            height: 58px;


            padding: 0;


            overflow: hidden;


            text-decoration: none;


            background: transparent;


            border-radius: 12px;


        }


        .classmirror-brand-logo:hover {


            text-decoration: none;


        }


        .classmirror-brand-logo-image {


            display: block;


            width: 100%;


            height: 100%;


            max-width: none;


            object-fit: cover;


            object-position: center;


        }


        .classmirror-footer-logo {


            position: relative;


            display: inline-flex;


            align-items: center;


            justify-content: center;


            width: 220px;


            height: 66px;


            padding: 0;


            overflow: hidden;


            color: #ffffff;


            text-decoration: none;


            background: transparent;


            border-radius: 12px;


        }


        .classmirror-footer-logo:hover {


            color: #ffffff;


            text-decoration: none;


        }


        .classmirror-footer-logo-image {


            display: block;


            width: 100%;


            height: 100%;


            max-width: none;


            object-fit: cover;


            object-position: center;


        }


        /*


           L’icône du PNG reste inchangée. Cette zone recouvre uniquement


           l’ancien mot bleu et le remplace par un texte blanc lisible.


        */


        .classmirror-footer-logo-word {


            position: absolute;


            top: 0;


            right: 0;


            bottom: 0;


            z-index: 2;


            display: flex;


            align-items: center;


            width: 69%;


            padding-inline-start: 7px;


            color: #ffffff;


            font-size: 25px;


            font-weight: 850;


            line-height: 1;


            letter-spacing: -0.035em;


            white-space: nowrap;


            background: #11162a;


        }


        html[dir="rtl"] .classmirror-footer-logo-word {


            right: auto;


            left: 0;


            justify-content: flex-end;


            padding-inline-start: 0;


            padding-inline-end: 7px;


        }


        @media (max-width: 1080px) {


            .classmirror-brand-logo {


                width: 205px;


                height: 52px;


            }


        }


        @media (max-width: 900px) {


            .classmirror-brand-logo {


                width: 188px;


                height: 48px;


            }


            .classmirror-footer-logo {


                width: 190px;


                height: 58px;


            }


        }


        @media (max-width: 480px) {


            .classmirror-brand-logo {


                width: 165px;


                height: 44px;


            }


        }


        /* =====================================================


           CLASSMIRROR — MENU MODERNE V1


           Conserve les routes et le système multilingue existants.


        ===================================================== */


        .navbar {


            position: sticky;


            top: 0;


            z-index: 11000;


            width: 100%;


            background: rgba(255, 255, 255, 0.94);


            border-bottom: 1px solid rgba(89, 76, 150, 0.08);


            box-shadow: 0 8px 28px rgba(31, 35, 48, 0.055);


            backdrop-filter: blur(16px);


            -webkit-backdrop-filter: blur(16px);


        }


        .nav-container {


            width: min(1760px, calc(100% - 48px));


            min-height: 86px;


            margin: 0 auto;


            gap: 28px;


        }


        .classmirror-brand-logo {


            width: 220px;


            height: 54px;


        }


        .nav-links {


            flex: 1 1 auto;


            justify-content: flex-end;


            align-items: center;


            gap: 7px;


        }


        .nav-links > a:not(.nav-button) {


            position: relative;


            display: inline-flex;


            align-items: center;


            justify-content: center;


            min-height: 44px;


            padding: 0 13px;


            color: #474c60;


            font-size: 15px;


            font-weight: 780;


            line-height: 1;


            text-decoration: none;


            background: transparent;


            border-radius: 11px;


            transition:


                color 0.18s ease,


                background 0.18s ease,


                transform 0.18s ease;


        }


        .nav-links > a:not(.nav-button):hover {


            color: #5d43d6;


            text-decoration: none;


            background: #f6f4ff;


            transform: translateY(-1px);


        }


        .nav-links > a.active:not(.nav-button) {


            color: #5d43d6;


            background: transparent;


        }


        .nav-links > a.active:not(.nav-button)::after {


            content: "";


            position: absolute;


            right: 13px;


            bottom: 3px;


            left: 13px;


            height: 3px;


            background: #6c4df6;


            border-radius: 999px;


        }


        .nav-login-link {


            margin-inline-start: 5px;


            border: 1px solid #e3dffc;


        }


        .nav-register-button {


            display: inline-flex;


            align-items: center;


            justify-content: center;


            min-height: 46px;


            margin-inline-start: 3px;


            padding: 0 18px;


            color: #ffffff !important;


            font-size: 15px;


            font-weight: 850;


            line-height: 1;


            text-decoration: none !important;


            white-space: nowrap;


            background: linear-gradient(135deg, #7655ff 0%, #6544ee 100%);


            border: 1px solid #6544ee;


            border-radius: 13px;


            box-shadow: 0 10px 24px rgba(108, 77, 246, 0.20);


            transition:


                transform 0.18s ease,


                box-shadow 0.18s ease,


                background 0.18s ease;


        }


        .nav-register-button:hover {


            color: #ffffff !important;


            background: linear-gradient(135deg, #6d4cf6 0%, #5b3fe0 100%);


            box-shadow: 0 13px 28px rgba(108, 77, 246, 0.27);


            transform: translateY(-1px);


        }


        /* ----- Sélecteur de langue compact ----- */


        .language-menu {


            position: relative;


            z-index: 10040;


            flex: 0 0 auto;


            margin-inline: 5px 2px;


        }


        .language-menu-button {


            display: inline-flex;


            align-items: center;


            justify-content: center;


            gap: 7px;


            min-width: 92px;


            min-height: 44px;


            padding: 0 12px;


            color: #454a5c;


            font: inherit;


            font-size: 14px;


            font-weight: 850;


            line-height: 1;


            background: #f8f7fc;


            border: 1px solid #e6e2f7;


            border-radius: 12px;


            cursor: pointer;


            transition:


                color 0.18s ease,


                border-color 0.18s ease,


                background 0.18s ease,


                box-shadow 0.18s ease;


        }


        .language-menu-button:hover,


        .language-menu.open .language-menu-button {


            color: #5a3fce;


            background: #f3f0ff;


            border-color: #d5cdfb;


            box-shadow: 0 8px 22px rgba(87, 65, 180, 0.10);


        }


        .language-menu-globe {


            font-size: 16px;


            line-height: 1;


        }


        .language-menu-current {


            min-width: 20px;


            text-align: center;


        }


        .language-menu-arrow {


            font-size: 13px;


            transition: transform 0.18s ease;


        }


        .language-menu.open .language-menu-arrow {


            transform: rotate(180deg);


        }


        .language-menu-panel {


            position: absolute;


            top: calc(100% + 10px);


            right: 0;


            z-index: 10050;


            display: none;


            width: 190px;


            padding: 8px;


            background: #ffffff;


            border: 1px solid #e5e2f1;


            border-radius: 15px;


            box-shadow: 0 20px 48px rgba(31, 35, 48, 0.16);


        }


        .language-menu.open .language-menu-panel {


            display: grid;


            gap: 3px;


        }


        .language-menu-option {


            display: grid;


            grid-template-columns: 36px 1fr;


            align-items: center;


            min-height: 43px;


            padding: 7px 10px;


            color: #44495a;


            text-decoration: none;


            border-radius: 10px;


        }


        .language-menu-option > span {


            font-size: 13px;


            font-weight: 900;


        }


        .language-menu-option > small {


            font-size: 12px;


            font-weight: 680;


            opacity: 0.78;


        }


        .language-menu-option:hover,


        .language-menu-option.active {


            color: #563dc8;


            text-decoration: none;


            background: #f1eeff;


        }


        html[dir="rtl"] .language-menu-panel {


            right: auto;


            left: 0;


        }


        /* ----- Compte connecté harmonisé ----- */


        .account-menu-button {


            min-height: 46px;


            padding: 0 15px;


            border-radius: 13px;


            box-shadow: 0 9px 22px rgba(108, 77, 246, 0.16);


        }


        .account-menu-button.active {


            box-shadow:


                0 0 0 3px rgba(108, 77, 246, 0.13),


                0 9px 22px rgba(108, 77, 246, 0.16);


        }


        /* ----- Responsive ----- */


        @media (max-width: 1240px) {


            .nav-container {


                width: min(100% - 30px, 1760px);


                gap: 16px;


            }


            .classmirror-brand-logo {


                width: 196px;


                height: 50px;


            }


            .nav-links {


                gap: 3px;


            }


            .nav-links > a:not(.nav-button) {


                padding-inline: 9px;


                font-size: 14px;


            }


            .language-menu {


                margin-inline: 2px 0;


            }


            .language-menu-button {


                min-width: 84px;


                padding-inline: 10px;


            }


            .nav-register-button {


                padding-inline: 14px;


                font-size: 14px;


            }


        }


        @media (max-width: 900px) {


            .navbar {


                position: sticky;


            }


            .nav-container {


                width: calc(100% - 24px);


                min-height: 72px;


            }


            .classmirror-brand-logo {


                width: 180px;


                height: 46px;


            }


            .nav-links {


                align-items: stretch;


                gap: 5px;


                padding: 10px;


                background: #ffffff;


                border: 1px solid #ece9f7;


                border-radius: 16px;


                box-shadow: 0 18px 38px rgba(31, 35, 48, 0.12);


            }


            .nav-links > a:not(.nav-button) {


                justify-content: flex-start;


                width: 100%;


                min-height: 45px;


                padding-inline: 14px;


            }


            .nav-links > a.active:not(.nav-button) {


                background: #f3f0ff;


            }


            .nav-links > a.active:not(.nav-button)::after {


                display: none;


            }


            .nav-login-link {


                margin-inline-start: 0;


            }


            .nav-register-button {


                width: 100%;


                min-height: 47px;


                margin-inline-start: 0;


            }


            .language-menu {


                width: 100%;


                margin: 0;


            }


            .language-menu-button {


                justify-content: flex-start;


                width: 100%;


                min-height: 45px;


                padding-inline: 14px;


            }


            .language-menu-arrow {


                margin-inline-start: auto;


            }


            .language-menu-panel,


            html[dir="rtl"] .language-menu-panel {


                position: static;


                width: 100%;


                margin-top: 6px;


                box-shadow: none;


            }


        }


        @media (prefers-reduced-motion: reduce) {


            .nav-links > a:not(.nav-button),


            .nav-register-button,


            .language-menu-button,


            .language-menu-arrow {


                transition: none;


            }


        }


    </style>


<style>
    .help-page {
        min-height: 78vh;
        padding: 48px 20px 82px;
        background:
            radial-gradient(circle at 5% 0%, rgba(108, 77, 246, 0.15), transparent 30%),
            radial-gradient(circle at 100% 25%, rgba(38, 197, 167, 0.10), transparent 28%),
            #f7f8fc;
    }

    .help-container {
        width: min(1240px, 100%);
        margin: 0 auto;
    }

    .help-hero {
        padding: 42px;
        color: #ffffff;
        text-align: center;
        background: linear-gradient(140deg, #27185e, #6c4df6 68%, #8a6df8);
        border-radius: 28px;
        box-shadow: 0 24px 58px rgba(48, 31, 111, 0.22);
    }

    .help-hero h1 {
        max-width: 850px;
        margin: 14px auto 12px;
        color: #ffffff;
        font-size: clamp(35px, 5vw, 57px);
        line-height: 1.06;
    }

    .help-hero > p {
        max-width: 800px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.82);
        font-size: 17px;
        line-height: 1.75;
    }

    .help-search-wrap {
        position: relative;
        width: min(720px, 100%);
        margin: 27px auto 0;
    }

    .help-search-icon {
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        color: #6c4df6;
        font-size: 21px;
        pointer-events: none;
    }

    html[dir="rtl"] .help-search-icon {
        right: 18px;
        left: auto;
    }

    .help-search {
        width: 100%;
        min-height: 60px;
        padding: 0 20px 0 54px;
        color: #292e3f;
        font: inherit;
        font-size: 16px;
        background: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.45);
        border-radius: 17px;
        outline: none;
        box-shadow: 0 13px 32px rgba(20, 12, 62, 0.20);
    }

    html[dir="rtl"] .help-search {
        padding-right: 54px;
        padding-left: 20px;
    }

    .help-search:focus {
        border-color: #d8d0ff;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 13px 32px rgba(20, 12, 62, 0.20);
    }

    .help-quick-panel,
    .help-guides-panel {
        margin-top: 24px;
        padding: 30px;
        background: #ffffff;
        border: 1px solid #e5e8f0;
        border-radius: 24px;
        box-shadow: 0 16px 42px rgba(37, 31, 78, 0.07);
    }

    .help-section-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 20px;
    }

    .help-section-heading h2 {
        margin: 0 0 6px;
        color: #252a3a;
        font-size: clamp(25px, 4vw, 34px);
    }

    .help-section-heading p {
        margin: 0;
        color: #6d7283;
        line-height: 1.6;
    }

    .help-result-count {
        flex: 0 0 auto;
        color: #6c4df6;
        font-size: 13px;
        font-weight: 900;
    }

    .quick-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .quick-card {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 112px;
        padding: 19px;
        color: inherit;
        text-decoration: none;
        background: #f8f8fd;
        border: 1px solid #e8e8f3;
        border-radius: 18px;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .quick-card:hover {
        transform: translateY(-3px);
        border-color: #cfc5ff;
        box-shadow: 0 12px 28px rgba(64, 45, 142, 0.10);
    }

    .quick-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        color: #ffffff;
        font-weight: 900;
        background: #6c4df6;
        border-radius: 14px;
    }

    .quick-card strong {
        display: block;
        margin-bottom: 5px;
        color: #282d3d;
    }

    .quick-card p {
        margin: 0;
        color: #707587;
        font-size: 13px;
        line-height: 1.55;
    }

    .help-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 24px;
    }

    .help-filter {
        min-height: 39px;
        padding: 8px 14px;
        color: #5f6576;
        font: inherit;
        font-size: 13px;
        font-weight: 850;
        background: #f7f7fb;
        border: 1px solid #e1e3eb;
        border-radius: 999px;
        cursor: pointer;
    }

    .help-filter:hover,
    .help-filter.active {
        color: #ffffff;
        background: #6c4df6;
        border-color: #6c4df6;
    }

    .help-category-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
    }

    .help-category {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e4e7ef;
        border-radius: 20px;
    }

    .category-heading {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 21px;
        background: #fafafd;
        border-bottom: 1px solid #eceef4;
    }

    .category-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 23px;
        background: #efecff;
        border-radius: 15px;
    }

    .category-heading h3 {
        margin: 0 0 4px;
        color: #292e3e;
        font-size: 19px;
    }

    .category-heading p {
        margin: 0;
        color: #757a8a;
        font-size: 13px;
        line-height: 1.45;
    }

    .help-article + .help-article {
        border-top: 1px solid #eceef4;
    }

    .help-article summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 21px;
        color: #34394a;
        font-weight: 850;
        line-height: 1.45;
        list-style: none;
        cursor: pointer;
    }

    .help-article summary::-webkit-details-marker {
        display: none;
    }

    .help-article summary::after {
        content: "+";
        flex: 0 0 auto;
        color: #6c4df6;
        font-size: 23px;
        font-weight: 700;
    }

    .help-article[open] summary::after {
        content: "−";
    }

    .article-answer {
        padding: 0 21px 20px;
        color: #676d7e;
        line-height: 1.72;
    }

    .help-empty {
        display: none;
        padding: 38px 20px;
        text-align: center;
        background: #fafafd;
        border: 1px dashed #d5d8e4;
        border-radius: 18px;
    }

    .help-empty.visible {
        display: block;
    }

    .help-empty h3 {
        margin: 0 0 8px;
        color: #303545;
    }

    .help-empty p {
        margin: 0 0 18px;
        color: #737889;
    }

    .help-contact-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        margin-top: 24px;
        padding: 28px 30px;
        color: #ffffff;
        background: linear-gradient(135deg, #252066, #4d3bc0);
        border-radius: 23px;
        box-shadow: 0 18px 42px rgba(39, 29, 105, 0.18);
    }

    .help-contact-banner h2 {
        margin: 0 0 7px;
        color: #ffffff;
    }

    .help-contact-banner p {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.6;
    }

    .help-contact-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 47px;
        padding: 10px 18px;
        color: #392b8a;
        font-weight: 900;
        text-decoration: none;
        background: #ffffff;
        border-radius: 12px;
    }

    .is-hidden {
        display: none !important;
    }

    @media (max-width: 900px) {
        .quick-grid,
        .help-category-grid {
            grid-template-columns: 1fr;
        }

        .help-contact-banner {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 620px) {
        .help-page {
            padding: 26px 14px 62px;
        }

        .help-hero,
        .help-quick-panel,
        .help-guides-panel {
            padding: 23px;
            border-radius: 20px;
        }

        .help-section-heading {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    .help-page,
    .help-container,
    .help-hero,
    .help-quick-panel,
    .help-guides-panel {
        min-width: 0;
        max-width: 100%;
    }

    .help-page {
        overflow-x: hidden;
    }

    .help-search {
        padding-right: 54px;
    }

    html[dir="rtl"] .help-search {
        padding-right: 54px;
        padding-left: 54px;
    }

    .help-search-clear {
        position: absolute;
        top: 50%;
        right: 12px;
        display: none;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        color: #6151ad;
        font: inherit;
        font-size: 18px;
        font-weight: 900;
        background: #f0edff;
        border: 0;
        border-radius: 10px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .help-search-clear.visible {
        display: inline-flex;
    }

    html[dir="rtl"] .help-search-clear {
        right: auto;
        left: 12px;
    }

    .help-search-shortcut {
        margin: 10px 0 0;
        color: rgba(255, 255, 255, 0.72);
        font-size: 11px;
        font-weight: 750;
    }

    .help-search-shortcut kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 25px;
        min-height: 23px;
        margin: 0 3px;
        padding: 2px 6px;
        color: #4e3ba2;
        font: inherit;
        font-size: 10px;
        font-weight: 900;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.70);
        border-radius: 6px;
        box-shadow: 0 2px 0 rgba(33, 21, 82, 0.20);
    }

    .help-guides-tools {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .help-tool-button {
        min-height: 38px;
        padding: 7px 12px;
        color: #5b45bd;
        font: inherit;
        font-size: 11px;
        font-weight: 900;
        background: #f2efff;
        border: 1px solid #ddd6fb;
        border-radius: 10px;
        cursor: pointer;
    }

    .help-tool-button:hover {
        color: #ffffff;
        background: #684be8;
        border-color: #684be8;
    }

    .help-filter {
        position: relative;
    }

    .help-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 23px;
        min-height: 21px;
        margin-left: 5px;
        padding: 1px 6px;
        color: inherit;
        font-size: 10px;
        background: rgba(108, 77, 246, 0.09);
        border-radius: 999px;
    }

    html[dir="rtl"] .help-filter-count {
        margin-right: 5px;
        margin-left: 0;
    }

    .help-filter.active .help-filter-count {
        background: rgba(255, 255, 255, 0.18);
    }

    .help-category {
        scroll-margin-top: 20px;
    }

    .help-article {
        scroll-margin-top: 20px;
    }

    .help-article summary:focus-visible,
    .help-filter:focus-visible,
    .help-tool-button:focus-visible,
    .help-search-clear:focus-visible,
    .help-copy-link:focus-visible,
    .help-back-top:focus-visible,
    .quick-card:focus-visible {
        outline: 3px solid rgba(108, 77, 246, 0.30);
        outline-offset: 3px;
    }

    .article-answer p {
        margin: 0;
    }

    .article-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #eceef4;
    }

    .help-copy-link {
        min-height: 32px;
        padding: 5px 9px;
        color: #6047c8;
        font: inherit;
        font-size: 10px;
        font-weight: 900;
        background: #f1efff;
        border: 1px solid #ded8fb;
        border-radius: 8px;
        cursor: pointer;
    }

    .help-copy-status {
        min-height: 17px;
        margin: 13px 0 0;
        color: #74798a;
        font-size: 10px;
        text-align: center;
    }

    .help-back-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 35;
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 46px;
        min-height: 46px;
        max-width: min(185px, calc(100vw - 28px));
        padding: 8px 12px;
        color: #ffffff;
        font: inherit;
        font-size: 11px;
        font-weight: 900;
        background: #5c41cc;
        border: 0;
        border-radius: 14px;
        box-shadow:
            0 15px 30px
            rgba(58, 38, 143, 0.24);
        cursor: pointer;
    }

    .help-back-top.visible {
        display: inline-flex;
    }

    @media (max-width: 900px) {
        .help-guides-tools {
            justify-content: flex-start;
            width: 100%;
        }
    }

    @media (max-width: 620px) {
        .help-guides-tools {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .help-tool-button {
            width: 100%;
        }

        .help-filters {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .help-filter {
            width: 100%;
        }

        .help-back-top {
            right: 13px;
            bottom: 13px;
        }
    }

    @media (max-width: 430px) {
        .help-guides-tools,
        .help-filters {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .quick-card,
        .help-filter,
        .help-tool-button {
            transition: none;
        }
    }

</style>


    <!-- CLASSMIRROR_SEO_V33_BEGIN -->


        <meta name="robots" content="index, follow, max-image-preview:large">


        <meta name="googlebot" content="index, follow, max-image-preview:large">


    <link rel="canonical" href="https://www.myclassmirror.com/help?lang=de">


    <link


        rel="alternate"


        hreflang="fr"


        href="https://www.myclassmirror.com/help?lang=fr"


    >


    <link


        rel="alternate"


        hreflang="en"


        href="https://www.myclassmirror.com/help?lang=en"


    >


    <link


        rel="alternate"


        hreflang="es"


        href="https://www.myclassmirror.com/help?lang=es"


    >


    <link


        rel="alternate"


        hreflang="ar"


        href="https://www.myclassmirror.com/help?lang=ar"


    >


    <link
        rel="alternate"
        hreflang="de"
        href="https://www.myclassmirror.com/help?lang=de"
    >

<link


        rel="alternate"


        hreflang="x-default"


        href="https://www.myclassmirror.com/help?lang=fr"


    >


    <meta property="og:url" content="https://www.myclassmirror.com/help?lang=de">


    <meta property="og:image" content="https://www.myclassmirror.com/static/classmirror-social-preview.png">


    <meta property="og:image:type" content="image/png">


    <meta property="og:image:width" content="1200">


    <meta property="og:image:height" content="630">


    <meta property="og:image:alt" content="ClassMirror">


    <meta name="twitter:card" content="summary_large_image">


    <meta name="twitter:image" content="https://www.myclassmirror.com/static/classmirror-social-preview.png">


    <meta name="twitter:image:alt" content="ClassMirror">


    <script type="application/ld+json">


    {


        "@context": "https://schema.org",


        "@type": "WebApplication",


        "name": "ClassMirror",


        "url": "https://www.myclassmirror.com/",


        "applicationCategory": "EducationalApplication",


        "operatingSystem": "Web",


        "inLanguage": ["fr", "en", "es", "ar", "de"],


        "description": "Hilfe zu ClassMirror: Konto, Lernsitzungen, Mirror Score, Premium, Familie und technische Fragen.",


        "image": "https://www.myclassmirror.com/static/classmirror-social-preview.png",


        "creator": {


            "@type": "Person",


            "name": "Yassine Douich"


        }


    }


    </script>


    <!-- CLASSMIRROR_SEO_V33_END -->


<!-- CLASSMIRROR_RESPONSIVE_V45_1_CSS -->


<link rel="stylesheet" href="/static/responsive_v45_1.css?v=45.1">


<!-- CLASSMIRROR_MIRROR_FLOW_V97_HEAD_BEGIN -->


<link rel="stylesheet" href="/static/classmirror_mirror_flow_v97.css?v=162.0">


<!-- CLASSMIRROR_MIRROR_FLOW_V97_HEAD_END -->


    <!-- CLASSMIRROR_V136B_DISCOVER_STYLE_BEGIN -->


    <style>


        .cm-discover-menu {


            position: relative;


            flex: 0 0 auto;


        }


        .cm-discover-menu > summary {


            display: inline-flex;


            min-height: 40px;


            align-items: center;


            justify-content: center;


            gap: 6px;


            padding: 8px 10px;


            color: inherit;


            font: inherit;


            font-size: 14px;


            font-weight: 760;


            line-height: 1;


            white-space: nowrap;


            list-style: none;


            border-radius: 9px;


            cursor: pointer;


            user-select: none;


        }


        .cm-discover-menu > summary::-webkit-details-marker {


            display: none;


        }


        .cm-discover-menu > summary::marker {


            content: "";


        }


        .cm-discover-menu > summary:hover,


        .cm-discover-menu.active > summary {


            color: #5a3fce;


            background: #f0edff;


        }


        .cm-discover-arrow {


            font-size: 12px;


            transition: transform .18s ease;


        }


        .cm-discover-menu[open] .cm-discover-arrow {


            transform: rotate(180deg);


        }


        .cm-discover-panel {


            position: absolute;


            top: calc(100% + 9px);


            left: 50%;


            z-index: 10040;


            display: grid;


            width: 220px;


            padding: 8px;


            background: #ffffff;


            border: 1px solid #e4e6ef;


            border-radius: 14px;


            box-shadow: 0 18px 45px rgba(31, 35, 48, .16);


            transform: translateX(-50%);


        }


        .cm-discover-panel a {


            display: flex;


            min-height: 40px;


            align-items: center;


            padding: 9px 11px;


            color: #3f4558;


            font-size: 14px;


            font-weight: 760;


            line-height: 1.25;


            text-decoration: none;


            border-radius: 9px;


        }


        .cm-discover-panel a:hover,


        .cm-discover-panel a.active {


            color: #563dc8;


            text-decoration: none;


            background: #f1eeff;


        }


        @media (max-width: 1180px) and (min-width: 901px) {


            .nav-links {


                gap: 7px;


            }


            .nav-links > a,


            .cm-discover-menu > summary {


                font-size: 12.5px;


                padding-inline: 7px;


            }


            .classmirror-brand-logo {


                width: 198px;


                height: 50px;


            }


        }


        @media (max-width: 900px) {


            .cm-discover-menu {


                width: 100%;


            }


            .cm-discover-menu > summary {


                width: 100%;


                justify-content: space-between;


                min-height: 42px;


                padding: 10px 12px;


            }


            .cm-discover-panel {


                position: static;


                width: 100%;


                margin-top: 4px;


                padding: 5px 0 5px 12px;


                background: transparent;


                border: 0;


                box-shadow: none;


                transform: none;


            }


            html[dir="rtl"] .cm-discover-panel {


                padding-right: 12px;


                padding-left: 0;


            }


            .cm-discover-panel a {


                width: 100%;


            }


        }


    </style>


    <!-- CLASSMIRROR_V136B_DISCOVER_STYLE_END -->


<!-- CLASSMIRROR_FOOTER_V11_CSS_BEGIN -->

<link rel="stylesheet" href="/static/classmirror_footer_v11.css?v=11.0">

<!-- CLASSMIRROR_FOOTER_V11_CSS_END -->


<!-- CLASSMIRROR V239B GLOBAL FEATURE ACCESS BEGIN -->
<link rel="stylesheet" href="/static/classmirror_feature_access_v239.css?v=239.0">
<script defer src="/static/classmirror_feature_access_v239.js?v=239.0"></script>
<!-- CLASSMIRROR V239B GLOBAL FEATURE ACCESS END -->

<!-- CLASSMIRROR V240C FEATURE MASTER BEGIN -->

<script id="cm-v240c-master-state">
window.ClassMirrorFeatureMasterV240c = {"argument_map": true, "cause_effect": true, "code": true, "comparison": true, "course_source": true, "data_chart": true, "diagram": true, "dictation": true, "flashcards": true, "function_graph": true, "handwriting_tablet": true, "map": true, "mastery_path": true, "math_editor": true, "mirrorreport": true, "outline": true, "placevalue": true, "pseudocode": true, "scientific_table": true, "sign_table": false, "simple_table": true, "source_analysis": true, "timeline": true, "variation": true, "vocabulary": true};
</script>
<style id="cm-v240c-master-style">


</style>

<!-- CLASSMIRROR V240C FEATURE MASTER END -->


<!-- CLASSMIRROR V249 OWNER ADMIN PUR : BEGIN -->


<!-- CLASSMIRROR V249 OWNER ADMIN PUR : END -->


<!-- CLASSMIRROR V249b OWNER HISTORY : BEGIN -->


<!-- CLASSMIRROR V249b OWNER HISTORY : END -->

</head>


<body


    class="language-de ltr"


>


<a


    href="#main-content"


    class="skip-link"


>


    Skip to main content


</a>


<!-- =====================================================


     BARRE DE NAVIGATION


===================================================== -->


<header class="navbar">


    <div class="nav-container">


        <a


            href="/"


            class="logo classmirror-brand-logo"


            aria-label="ClassMirror — Accueil"


        >


            <img


                src="https://www.myclassmirror.com/static/classmirror-logo.png"


                alt="ClassMirror"


                class="classmirror-brand-logo-image"


                width="238"


                height="58"


                decoding="async"


                fetchpriority="high"


            >


        </a>


        <button


            type="button"


            class="mobile-menu-button"


            id="mobile-menu-button"


            aria-label="Menu"


            aria-controls="main-navigation"


            aria-expanded="false"


        >


            <span></span>


            <span></span>


            <span></span>


        </button>


        <nav


            class="nav-links"


            id="main-navigation"


            aria-label="Navigation principale"


        >


            <a


                href="/"


                class=""


                aria-current="false"


            >


                Startseite


            </a>


            <a


                href="/about"


                class=""


                aria-current="false"


            >


                Über uns


            </a>


            <!-- CLASSMIRROR_V136B_DISCOVER_MENU_BEGIN -->


            <details


                class="cm-discover-menu"


            >


                <summary


                    aria-label="Entdecken"


                >


                        Entdecken


                    <span class="cm-discover-arrow" aria-hidden="true">▾</span>


                </summary>


                <div class="cm-discover-panel">


                    <a


                        href="/examples"


                        class=""


                        aria-current="false"


                    >


                            Beispiele


                    </a>


                    <a


                        href="/mirror-score"


                        class=""


                        aria-current="false"


                    >


                        Mirror Score


                    </a>


                    <a href="/pedagogy">

                      Pädagogik

                      
                    </a>


                    <!-- CLASSMIRROR_V131B_TOOLS_MENU_BEGIN -->

                    <a

                        href="/tools"

                        class=""

                        aria-current="false"

                    >

                        
                            Werkzeuge

                        
                    </a>

                    <!-- CLASSMIRROR_V138_MENU_TEACHERS_BEGIN -->

                    <a href="/teachers">

                      Lehrkräfte

                      
                    </a>

                    <!-- CLASSMIRROR_V140_MENU_STUDENTS_BEGIN -->

                    <a href="/students">

                      Schüler

                      
                    </a>

                    <!-- CLASSMIRROR_V142_MENU_SCHOOLS_BEGIN -->

                    <a href="/schools">

                      Schulen

                      
                    </a>

                    <!-- CLASSMIRROR_V142_MENU_SCHOOLS_END -->

                    <!-- CLASSMIRROR_V140_MENU_STUDENTS_END -->

                    <!-- CLASSMIRROR_V138_MENU_TEACHERS_END -->

                    <!-- CLASSMIRROR_V131B_TOOLS_MENU_END -->


                                    <!-- CLASSMIRROR_V137_PARENTS_MENU_BEGIN -->


                    <a


                        href="/for-parents"


                        class=""


                        aria-current="false"


                    >


                            Für Eltern


                    </a>


                    <!-- CLASSMIRROR_V137_PARENTS_MENU_END -->


                    <!-- CLASSMIRROR_V138_SUBJECTS_MENU_BEGIN -->


                    <a


                        href="/subjects"


                        class=""


                        aria-current="false"


                    >


                            Fächer


                    </a>


                    <!-- CLASSMIRROR_V138_SUBJECTS_MENU_END -->


                    <!-- CLASSMIRROR_V139_LEVELS_MENU_BEGIN -->


                    <a


                        href="/levels"


                        class=""


                        aria-current="false"


                    >


                            Niveaus


                    </a>


                    <!-- CLASSMIRROR_V139_LEVELS_MENU_END -->


                    <!-- CLASSMIRROR_V140_FOR_SCHOOLS_MENU_BEGIN -->


                                        <!-- CLASSMIRROR_V133D_FAMILY_MENU_BEGIN -->

                    <a

                        href="/family"

                        class=""

                        aria-current="false"

                    >

                      Familie

                      
                    </a>

                    <!-- CLASSMIRROR_V133D_FAMILY_MENU_END -->


                    <!-- CLASSMIRROR_V140_FOR_SCHOOLS_MENU_END -->


</div>


            </details>


            <!-- CLASSMIRROR_V136B_DISCOVER_MENU_END -->


<a


                href="/pricing"


                class=""


                aria-current="false"


            >


                Preise


            </a>


            <a


                href="/help"


                class="active"


                aria-current="page"


            >


                Hilfe


            </a>


                <a


                    href="/demo"


                    class=""


                    aria-current="false"


                >


                    Demo


                </a>


            <!-- =================================================


                 SÉLECTEUR DE LANGUE


            ================================================== -->


            <div


                class="language-menu"


                id="language-menu"


                dir="ltr"


            >


                <button


                    type="button"


                    class="language-menu-button"


                    id="language-menu-button"


                    aria-label="Sélection de la langue"


                    aria-controls="language-menu-panel"


                    aria-expanded="false"


                    aria-haspopup="true"


                >


                    <span class="language-menu-globe" aria-hidden="true">🌐</span>


                    <span class="language-menu-current">DE</span>


                    <span class="language-menu-arrow" aria-hidden="true">▾</span>


                </button>


                <div


                    class="language-menu-panel"


                    id="language-menu-panel"


                    role="menu"


                    aria-label="Sélection de la langue"


                >


                    <a


                        href="/help?lang=fr"


                        class="language-menu-option "


                        lang="fr"


                        hreflang="fr"


                        role="menuitem"


                    >


                        <span>FR</span>


                        <small>Français</small>


                    </a>


                    <a


                        href="/help?lang=en"


                        class="language-menu-option active"


                        lang="en"


                        hreflang="en"


                        role="menuitem"


                    >


                        <span>EN</span>


                        <small>English</small>


                    </a>


                    <a


                        href="/help?lang=es"


                        class="language-menu-option "


                        lang="es"


                        hreflang="es"


                        role="menuitem"


                    >


                        <span>ES</span>


                        <small>Español</small>


                    </a>


                    <a


                        href="/help?lang=ar"


                        class="language-menu-option "


                        lang="ar"


                        hreflang="ar"


                        role="menuitem"


                    >


                        <span>AR</span>


                        <small>العربية</small>


                    </a>

                    <!-- CLASSMIRROR V255a DEUTSCH LANGUAGE OPTION -->
                    <a
                        href="/language/de"
                        class="language-menu-option"
                        lang="de"
                        hreflang="de"
                    >
                        <span aria-hidden="true">🇩🇪</span>
                        <small>Deutsch</small>
                    </a>


                </div>


            </div>


                <a


                    href="/login"


                    class="nav-login-link"


                >


                    Anmelden


                </a>


                <a


                    href="/register"


                    class="nav-button nav-register-button"


                >


                    Konto erstellen


                </a>


        </nav>


    </div>


</header>


<!-- =====================================================


     CONTENU PRINCIPAL


===================================================== -->


<main


    id="main-content"


    tabindex="-1"


>


<section class="help-page">
    <div class="help-container">
        <header class="help-hero">
            <span class="badge">Hilfezentrum</span>
            <h1>Wie können wir dir helfen?</h1>
            <p>Finde schnell Antworten zur Nutzung von ClassMirror, zu Lernsitzungen, Konten, Premium und Familienfunktionen.</p>

            <div class="help-search-wrap">
                <span class="help-search-icon" aria-hidden="true">⌕</span>
                <label class="sr-only" for="help-search">In der Hilfe suchen</label>
                <input
                    type="search"
                    class="help-search"
                    id="help-search"
                    placeholder="Suche nach einem Thema, zum Beispiel Mirror Score, Passwort oder Sitzung..."
                    autocomplete="off"
                    aria-describedby="help-search-shortcut"
                >

                <button
                    type="button"
                    class="help-search-clear"
                    id="help-search-clear"
                    aria-label="Suche löschen"
                    title="Suche löschen"
                >
                    ×
                </button>
            </div>

            <p
                class="help-search-shortcut"
                id="help-search-shortcut"
            >
                Drücke / oder Ctrl K zum Suchen
                <kbd>/</kbd>
                <kbd>Ctrl K</kbd>
            </p>
        </header>

        <section class="help-quick-panel">
            <div class="help-section-heading">
                <div>
                    <h2>Schnellzugriff</h2>
                    <p>Die häufigsten Hilfethemen direkt öffnen.</p>
                </div>
            </div>

            <div class="quick-grid">
                
                    
                    <a
                        class="quick-card"
                        href="/demo"
                    >
                        <span class="quick-icon">▶</span>
                        <span>
                            <strong>Eine Lernsitzung starten</strong>
                            <p>Fach, Niveau und Thema wählen und die Sitzung beginnen.</p>
                        </span>
                    </a>
                
                    
                    <a
                        class="quick-card"
                        href="/mirror-score"
                    >
                        <span class="quick-icon">📊</span>
                        <span>
                            <strong>Mirror Score verstehen</strong>
                            <p>Beherrschung, Klarheit, Genauigkeit und Verbesserungsbereiche verstehen.</p>
                        </span>
                    </a>
                
                    
                    <a
                        class="quick-card"
                        href="/login"
                    >
                        <span class="quick-icon">🔐</span>
                        <span>
                            <strong>Konto und Passwort</strong>
                            <p>Anmeldung, Passwort und E-Mail-Bestätigung verwalten.</p>
                        </span>
                    </a>
                
            </div>
        </section>

        <section class="help-guides-panel">
            <div class="help-section-heading">
                <div>
                    <h2>Hilfezentrum</h2>
                    <p>Finde schnell Antworten zur Nutzung von ClassMirror, zu Lernsitzungen, Konten, Premium und Familienfunktionen.</p>
                </div>
                <div class="help-guides-tools">
                    <span
                        class="help-result-count"
                        id="help-result-count"
                        data-result-label="Ergebnisse"
                        role="status"
                        aria-live="polite"
                    ></span>

                    <button
                        type="button"
                        class="help-tool-button"
                        id="help-expand-visible"
                    >
                        Sichtbare Hilfen öffnen
                    </button>

                    <button
                        type="button"
                        class="help-tool-button"
                        id="help-collapse-all"
                    >
                        Alle schließen
                    </button>
                </div>
            </div>

            <div class="help-filters" role="group" aria-label="Hilfezentrum">
                <button
                    type="button"
                    class="help-filter active"
                    data-help-filter="all"
                    aria-pressed="true"
                >
                    Alle
                    <span
                        class="help-filter-count"
                        data-help-filter-count="all"
                    ></span>
                </button>
                
                    <button
                        type="button"
                        class="help-filter"
                        data-help-filter="start"
                        aria-pressed="false"
                    >
                        🚀 Erste Schritte
                        <span
                            class="help-filter-count"
                            data-help-filter-count="start"
                        ></span>
                    </button>
                
                    <button
                        type="button"
                        class="help-filter"
                        data-help-filter="learning"
                        aria-pressed="false"
                    >
                        🧠 Lernen und Mirror Score
                        <span
                            class="help-filter-count"
                            data-help-filter-count="learning"
                        ></span>
                    </button>
                
                    <button
                        type="button"
                        class="help-filter"
                        data-help-filter="tools"
                        aria-pressed="false"
                    >
                        🛠 Werkzeuge
                        <span
                            class="help-filter-count"
                            data-help-filter-count="tools"
                        ></span>
                    </button>
                
                    <button
                        type="button"
                        class="help-filter"
                        data-help-filter="account"
                        aria-pressed="false"
                    >
                        👤 Konto und Zugang
                        <span
                            class="help-filter-count"
                            data-help-filter-count="account"
                        ></span>
                    </button>
                
                    <button
                        type="button"
                        class="help-filter"
                        data-help-filter="premium"
                        aria-pressed="false"
                    >
                        ★ Premium und Familie
                        <span
                            class="help-filter-count"
                            data-help-filter-count="premium"
                        ></span>
                    </button>
                
            </div>

            <div class="help-category-grid" id="help-category-grid">
                
                    <section
                        class="help-category"
                        id="help-category-start"
                        data-help-category="start"
                    >
                        <header class="category-heading">
                            <span class="category-icon" aria-hidden="true">🚀</span>
                            <div>
                                <h3>Erste Schritte</h3>
                                <p>Die wichtigsten Schritte für den Einstieg in ClassMirror.</p>
                            </div>
                        </header>

                        <div>
                            
                                <details
                                    class="help-article"
                                    id="help-start-1"
                                    data-help-article
                                    data-help-keywords="start neue sitzung thema fach niveau lina jad maya"
                                >
                                    <summary>Wie starte ich eine neue Lernsitzung?</summary>

                                    <div class="article-answer">
                                        <p>Öffne „Neue Sitzung“, wähle Fach, Niveau, Sprache und Thema. Danach stellen Lina, Jad und Maya Fragen, die dein Verständnis prüfen.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-start-1"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-start-2"
                                    data-help-article
                                    data-help-keywords="konto registrierung demo kostenlos"
                                >
                                    <summary>Muss ich ein Konto erstellen?</summary>

                                    <div class="article-answer">
                                        <p>Die öffentliche Demo kann ohne Konto ausprobiert werden. Für persönliche Sitzungen, Verlauf und Fortschritt benötigst du ein ClassMirror-Konto.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-start-2"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-start-3"
                                    data-help-article
                                    data-help-keywords="sprache deutsch französisch englisch spanisch arabisch"
                                >
                                    <summary>Welche Sprachen unterstützt ClassMirror?</summary>

                                    <div class="article-answer">
                                        <p>Deutsch steht zusätzlich zu Französisch, Englisch, Spanisch und Arabisch zur Verfügung.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-start-3"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                        </div>
                    </section>
                
                    <section
                        class="help-category"
                        id="help-category-learning"
                        data-help-category="learning"
                    >
                        <header class="category-heading">
                            <span class="category-icon" aria-hidden="true">🧠</span>
                            <div>
                                <h3>Lernen und Mirror Score</h3>
                                <p>Fragen, Antworten, Bewertung und Lernfortschritt.</p>
                            </div>
                        </header>

                        <div>
                            
                                <details
                                    class="help-article"
                                    id="help-learning-1"
                                    data-help-article
                                    data-help-keywords="mirror score beherrschung klarheit genauigkeit"
                                >
                                    <summary>Was ist der Mirror Score?</summary>

                                    <div class="article-answer">
                                        <p>Der Mirror Score fasst mehrere Dimensionen deiner Erklärung zusammen, darunter Beherrschung, Klarheit und Genauigkeit.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-learning-1"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-learning-2"
                                    data-help-article
                                    data-help-keywords="lina jad maya fragen"
                                >
                                    <summary>Warum stellen Lina, Jad und Maya unterschiedliche Fragen?</summary>

                                    <div class="article-answer">
                                        <p>Die drei virtuellen Schüler haben unterschiedliche pädagogische Rollen. Sie prüfen Grundlagen, logisches Denken und vertieftes Verständnis.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-learning-2"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-learning-3"
                                    data-help-article
                                    data-help-keywords="fortsetzen sitzung verlauf dashboard"
                                >
                                    <summary>Kann ich meine letzte Sitzung fortsetzen?</summary>

                                    <div class="article-answer">
                                        <p>Ja. Eine noch nicht abgeschlossene Sitzung kann über deinen Lernbereich oder Verlauf wieder geöffnet werden.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-learning-3"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                        </div>
                    </section>
                
                    <section
                        class="help-category"
                        id="help-category-tools"
                        data-help-category="tools"
                    >
                        <header class="category-heading">
                            <span class="category-icon" aria-hidden="true">🛠</span>
                            <div>
                                <h3>Werkzeuge</h3>
                                <p>Text, Sprache, Mathematik, Code und fachspezifische Hilfsmittel.</p>
                            </div>
                        </header>

                        <div>
                            
                                <details
                                    class="help-article"
                                    id="help-tools-1"
                                    data-help-article
                                    data-help-keywords="werkzeuge fach niveau"
                                >
                                    <summary>Warum sehe ich nicht immer dieselben Werkzeuge?</summary>

                                    <div class="article-answer">
                                        <p>ClassMirror zeigt Werkzeuge passend zu Fach, Niveau und Aufgabe.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-tools-1"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-tools-2"
                                    data-help-article
                                    data-help-keywords="mikrofon spracheingabe diktat"
                                >
                                    <summary>Wie verwende ich die Spracheingabe?</summary>

                                    <div class="article-answer">
                                        <p>Erlaube dem Browser den Mikrofonzugriff und starte anschließend die Spracheingabe im Antwortbereich.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-tools-2"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-tools-3"
                                    data-help-article
                                    data-help-keywords="code programmierung editor python java c"
                                >
                                    <summary>Wie funktioniert der Code-Editor?</summary>

                                    <div class="article-answer">
                                        <p>Bei Programmieraufgaben kann der Code-Bereich geöffnet werden. Deine Lösung bleibt Teil der pädagogischen Antwort.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-tools-3"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                        </div>
                    </section>
                
                    <section
                        class="help-category"
                        id="help-category-account"
                        data-help-category="account"
                    >
                        <header class="category-heading">
                            <span class="category-icon" aria-hidden="true">👤</span>
                            <div>
                                <h3>Konto und Zugang</h3>
                                <p>Anmeldung, E-Mail, Passwort und Rollen.</p>
                            </div>
                        </header>

                        <div>
                            
                                <details
                                    class="help-article"
                                    id="help-account-1"
                                    data-help-article
                                    data-help-keywords="anmelden login passwort email"
                                >
                                    <summary>Ich kann mich nicht anmelden. Was kann ich prüfen?</summary>

                                    <div class="article-answer">
                                        <p>Prüfe E-Mail-Adresse, Passwort und gegebenenfalls die E-Mail-Bestätigung. Nutze bei Bedarf „Passwort vergessen“.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-account-1"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-account-2"
                                    data-help-article
                                    data-help-keywords="konto profil email"
                                >
                                    <summary>Wie ändere ich meine Kontodaten?</summary>

                                    <div class="article-answer">
                                        <p>Öffne „Mein Konto“. Dort findest du die verfügbaren Profil- und Kontoeinstellungen.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-account-2"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-account-3"
                                    data-help-article
                                    data-help-keywords="lernender lehrkraft familie"
                                >
                                    <summary>Was ist der Unterschied zwischen Lernenden, Lehrkräften und Familie?</summary>

                                    <div class="article-answer">
                                        <p>Lernende nutzen persönliche Sitzungen, Lehrkräfte organisieren schulische Arbeit und Familie dient der Begleitung verknüpfter Kinder.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-account-3"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                        </div>
                    </section>
                
                    <section
                        class="help-category"
                        id="help-category-premium"
                        data-help-category="premium"
                    >
                        <header class="category-heading">
                            <span class="category-icon" aria-hidden="true">★</span>
                            <div>
                                <h3>Premium und Familie</h3>
                                <p>Tarife, Abonnement und zusätzliche Funktionen.</p>
                            </div>
                        </header>

                        <div>
                            
                                <details
                                    class="help-article"
                                    id="help-premium-1"
                                    data-help-article
                                    data-help-keywords="kostenlos premium klassencode"
                                >
                                    <summary>Ist ClassMirror kostenlos nutzbar?</summary>

                                    <div class="article-answer">
                                        <p>ClassMirror besitzt einen kostenlosen Zugang. Zusätzliche persönliche Funktionen können über Premium verfügbar sein.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-premium-1"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-premium-2"
                                    data-help-article
                                    data-help-keywords="premium abonnement paddle"
                                >
                                    <summary>Wo verwalte ich mein Abonnement?</summary>

                                    <div class="article-answer">
                                        <p>Wenn ein Premium-Abonnement aktiv ist, kannst du die verfügbaren Optionen über deinen Konto- oder Zahlungsbereich verwalten.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-premium-2"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                                <details
                                    class="help-article"
                                    id="help-premium-3"
                                    data-help-article
                                    data-help-keywords="familie kinder fortschritt"
                                >
                                    <summary>Was bietet der Familienbereich?</summary>

                                    <div class="article-answer">
                                        <p>Der Familienbereich kann Fortschritt, Ziele, Wiederholung und weitere familienbezogene Informationen zusammenführen.</p>

                                        <div class="article-tools">
                                            <button
                                                type="button"
                                                class="help-copy-link"
                                                data-help-copy-link
                                                data-help-target="help-premium-3"
                                                data-copy-label="Link zum Artikel kopieren"
                                                data-copied-label="Link zum Artikel kopiert"
                                            >
                                                🔗 Link zum Artikel kopieren
                                            </button>
                                        </div>
                                    </div>
                                </details>
                            
                        </div>
                    </section>
                
            </div>

            <div class="help-empty" id="help-empty">
                <h3>Keine passende Hilfe gefunden</h3>
                <p>Versuche einen anderen Suchbegriff oder kontaktiere den ClassMirror-Support.</p>
                <a class="button button-primary" href="/contact">Support kontaktieren</a>
            </div>
        </section>

        <p
            class="help-copy-status"
            id="help-copy-status"
            role="status"
            aria-live="polite"
        ></p>

        <section class="help-contact-banner">
            <div>
                <h2>Keine passende Hilfe gefunden</h2>
                <p>Versuche einen anderen Suchbegriff oder kontaktiere den ClassMirror-Support.</p>
            </div>
            <a class="help-contact-button" href="/contact">Support kontaktieren</a>
        </section>
    </div>
</section>

<button
    type="button"
    class="help-back-top"
    id="help-back-top"
    aria-label="Nach oben"
>
    ↑ Nach oben
</button>


</main>


<!-- =====================================================


     PIED DE PAGE


===================================================== -->


<footer class="site-footer cm-footer-v11">

    <div class="cm-footer-v11-inner">

        <div class="cm-footer-v11-brand">

            <a href="/" class="cm-footer-v11-logo cm250g-footer-brand" aria-label="ClassMirror">

                <span class="cm250g-footer-icon" aria-hidden="true">
                    <img
                        src="https://www.myclassmirror.com/static/classmirror-logo.png"
                        alt=""
                        loading="lazy"
                        decoding="async"
                    >
                </span>

                <span class="cm250g-footer-word">
                    ClassMirror
                </span>

            </a>

            <p class="cm-footer-v11-description">

                Lerne durch Erklären. ClassMirror verwandelt Wiederholung in einen aktiven Dialog mit Fragen, Feedback und klar erkennbarem Fortschritt.

                
            </p>

            <div class="cm-footer-v11-pills">

                <span>Lernen</span>
                <b class="cm250g-pill-dot" aria-hidden="true">·</b>
                <span>Erklären</span>
                <b class="cm250g-pill-dot" aria-hidden="true">·</b>
                <span>Fortschritt</span>

            </div>

        </div>


        <nav class="cm-footer-v11-column" aria-label="Découvrir">

            <h3>Entdecken</h3>

            <a href="/">Startseite</a>

            <a href="/demo">Demo</a>

            <a href="/about">Über uns</a>

            <a href="/pricing">Preise</a>

        </nav>


        <nav class="cm-footer-v11-column" aria-label="Espaces ClassMirror">

            <h3>Bereiche</h3>

            
                <a href="/register">Konto erstellen</a>

                <a href="/login">Anmelden</a>

                                <a href="/parent/register">Für Familien</a>

            
        </nav>


        <div class="cm-footer-v11-column cm-footer-v11-offers">

            <h3>Premium</h3>

            <a href="/pricing" class="cm-footer-v11-offer">

                <span>Libre Premium</span>

                <strong>5,90 € <small>/ Monat</small></strong>

            </a>

            <a href="/premium/families" class="cm-footer-v11-offer family">

                <span>Family Premium</span>

                <strong>17,90 € <small>/ Monat</small></strong>

                <em>Bis zu 5 Kinder</em>

            </a>

        </div>


        <nav class="cm-footer-v11-column" aria-label="Aide">

            <h3>Hilfe</h3>

            <a href="/help">Hilfezentrum</a>

            <a href="/contact">Kontakt</a>

            <a href="/privacy">Datenschutz</a>

            <a href="/terms">Bedingungen</a>

        </nav>

    </div>


    <div class="cm-footer-v11-bottom">

        <p>© 2026 ClassMirror. Tous droits réservés.</p>

        <div class="cm-footer-v11-bottom-links">

            <a href="/privacy">Datenschutz</a>

            <span>·</span>

            <a href="/terms">Bedingungen</a>

            <span>·</span>

            <a href="/contact">Kontakt</a>

        </div>

        <p class="cm-footer-v11-signature">

            ClassMirror · Lernen durch Erklären

        </p>

    </div>

</footer>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const searchInput = document.getElementById(
            "help-search"
        );
        const clearSearchButton = document.getElementById(
            "help-search-clear"
        );
        const filterButtons = Array.from(
            document.querySelectorAll(
                "[data-help-filter]"
            )
        );
        const filterCounts = Array.from(
            document.querySelectorAll(
                "[data-help-filter-count]"
            )
        );
        const categories = Array.from(
            document.querySelectorAll(
                "[data-help-category]"
            )
        );
        const articles = Array.from(
            document.querySelectorAll(
                "[data-help-article]"
            )
        );
        const emptyState = document.getElementById(
            "help-empty"
        );
        const resultCount = document.getElementById(
            "help-result-count"
        );
        const expandButton = document.getElementById(
            "help-expand-visible"
        );
        const collapseButton = document.getElementById(
            "help-collapse-all"
        );
        const copyButtons = Array.from(
            document.querySelectorAll(
                "[data-help-copy-link]"
            )
        );
        const copyStatus = document.getElementById(
            "help-copy-status"
        );
        const backTopButton = document.getElementById(
            "help-back-top"
        );
        const resultLabel = resultCount
            ? (resultCount.dataset.resultLabel || "")
            : "";

        let activeCategory = "all";

        function normalise(value) {
            return String(value || "")
                .toLocaleLowerCase()
                .normalize("NFD")
                .replace(/[\u0300-\u036f]/g, "")
                .trim();
        }

        function articleIsVisible(article) {
            return !article.classList.contains(
                "is-hidden"
            );
        }

        function updateFilterCounts() {
            const categoryTotals = {};
            let total = 0;

            categories.forEach(function (category) {
                const categoryId =
                    category.dataset.helpCategory || "";
                const count = category.querySelectorAll(
                    "[data-help-article]"
                ).length;

                categoryTotals[categoryId] = count;
                total += count;
            });

            filterCounts.forEach(function (element) {
                const key =
                    element.dataset.helpFilterCount || "";

                element.textContent = String(
                    key === "all"
                        ? total
                        : (categoryTotals[key] || 0)
                );
            });
        }

        function updateSearchUrl(query) {
            try {
                const url = new URL(
                    window.location.href
                );

                if (query) {
                    url.searchParams.set("q", query);
                } else {
                    url.searchParams.delete("q");
                }

                window.history.replaceState(
                    {},
                    "",
                    url.pathname
                    + url.search
                    + url.hash
                );
            } catch (error) {
                return;
            }
        }

        function refresh(options) {
            const settings = options || {};
            const query = normalise(
                searchInput ? searchInput.value : ""
            );
            let visibleArticles = 0;

            categories.forEach(function (category) {
                const categoryId =
                    category.dataset.helpCategory || "";
                const categoryAllowed =
                    activeCategory === "all"
                    || activeCategory === categoryId;
                let categoryVisibleArticles = 0;

                category.querySelectorAll(
                    "[data-help-article]"
                ).forEach(function (article) {
                    const searchable = normalise(
                        article.textContent
                        + " "
                        + (
                            article.dataset.helpKeywords
                            || ""
                        )
                    );
                    const queryAllowed =
                        !query
                        || searchable.includes(query);
                    const visible =
                        categoryAllowed
                        && queryAllowed;

                    article.classList.toggle(
                        "is-hidden",
                        !visible
                    );

                    if (visible) {
                        categoryVisibleArticles += 1;
                        visibleArticles += 1;
                    } else {
                        article.removeAttribute("open");
                    }
                });

                category.classList.toggle(
                    "is-hidden",
                    categoryVisibleArticles === 0
                );
            });

            if (emptyState) {
                emptyState.classList.toggle(
                    "visible",
                    visibleArticles === 0
                );
            }

            if (resultCount) {
                resultCount.textContent =
                    visibleArticles
                    + " "
                    + resultLabel;
            }

            if (clearSearchButton && searchInput) {
                clearSearchButton.classList.toggle(
                    "visible",
                    Boolean(searchInput.value)
                );
            }

            if (!settings.skipUrl) {
                updateSearchUrl(
                    searchInput
                        ? searchInput.value.trim()
                        : ""
                );
            }
        }

        function selectFilter(button) {
            activeCategory =
                button.dataset.helpFilter || "all";

            filterButtons.forEach(function (item) {
                const selected = item === button;

                item.classList.toggle(
                    "active",
                    selected
                );
                item.setAttribute(
                    "aria-pressed",
                    String(selected)
                );
            });

            refresh();
        }

        function clearSearch() {
            if (!searchInput) {
                return;
            }

            searchInput.value = "";
            refresh();
            searchInput.focus();
        }

        async function copyGuideLink(button) {
            const targetId =
                button.dataset.helpTarget || "";
            const target = document.getElementById(
                targetId
            );

            if (!targetId || !target) {
                return;
            }

            const url = new URL(
                window.location.href
            );
            url.hash = targetId;

            try {
                if (
                    navigator.clipboard
                    && window.isSecureContext
                ) {
                    await navigator.clipboard.writeText(
                        url.toString()
                    );
                } else {
                    const temporaryField =
                        document.createElement("textarea");

                    temporaryField.value =
                        url.toString();
                    temporaryField.setAttribute(
                        "readonly",
                        ""
                    );
                    temporaryField.style.position =
                        "fixed";
                    temporaryField.style.opacity =
                        "0";

                    document.body.appendChild(
                        temporaryField
                    );
                    temporaryField.select();
                    document.execCommand("copy");
                    temporaryField.remove();
                }

                button.textContent =
                    "✓ "
                    + button.dataset.copiedLabel;

                if (copyStatus) {
                    copyStatus.textContent =
                        button.dataset.copiedLabel;
                }

                window.setTimeout(function () {
                    button.textContent =
                        "🔗 "
                        + button.dataset.copyLabel;
                }, 1600);
            } catch (error) {
                window.prompt(
                    button.dataset.copyLabel,
                    url.toString()
                );
            }
        }

        filterButtons.forEach(function (button) {
            button.addEventListener(
                "click",
                function () {
                    selectFilter(button);
                }
            );
        });

        if (searchInput) {
            searchInput.addEventListener(
                "input",
                function () {
                    refresh();
                }
            );

            searchInput.addEventListener(
                "keydown",
                function (event) {
                    if (event.key === "Escape") {
                        event.preventDefault();
                        clearSearch();
                    }
                }
            );
        }

        if (clearSearchButton) {
            clearSearchButton.addEventListener(
                "click",
                clearSearch
            );
        }

        if (expandButton) {
            expandButton.addEventListener(
                "click",
                function () {
                    articles.forEach(function (article) {
                        if (articleIsVisible(article)) {
                            article.setAttribute(
                                "open",
                                ""
                            );
                        }
                    });
                }
            );
        }

        if (collapseButton) {
            collapseButton.addEventListener(
                "click",
                function () {
                    articles.forEach(function (article) {
                        article.removeAttribute("open");
                    });
                }
            );
        }

        articles.forEach(function (article) {
            article.addEventListener(
                "toggle",
                function () {
                    if (!article.open) {
                        return;
                    }

                    articles.forEach(function (other) {
                        if (
                            other !== article
                            && !(
                                expandButton
                                && expandButton.matches(":focus")
                            )
                        ) {
                            other.removeAttribute("open");
                        }
                    });
                }
            );
        });

        copyButtons.forEach(function (button) {
            button.addEventListener(
                "click",
                function () {
                    copyGuideLink(button);
                }
            );
        });

        document.addEventListener(
            "keydown",
            function (event) {
                const target = event.target;
                const isEditable =
                    target instanceof HTMLInputElement
                    || target instanceof HTMLTextAreaElement
                    || target?.isContentEditable;

                if (
                    !isEditable
                    && event.key === "/"
                ) {
                    event.preventDefault();
                    searchInput?.focus();
                }

                if (
                    !isEditable
                    && (
                        event.ctrlKey
                        || event.metaKey
                    )
                    && event.key.toLowerCase() === "k"
                ) {
                    event.preventDefault();
                    searchInput?.focus();
                }
            }
        );

        function updateBackTop() {
            if (!backTopButton) {
                return;
            }

            backTopButton.classList.toggle(
                "visible",
                window.scrollY > 750
            );
        }

        if (backTopButton) {
            backTopButton.addEventListener(
                "click",
                function () {
                    window.scrollTo({
                        top: 0,
                        behavior: "smooth"
                    });
                }
            );
        }

        window.addEventListener(
            "scroll",
            updateBackTop,
            {passive: true}
        );

        updateFilterCounts();

        try {
            const url = new URL(
                window.location.href
            );
            const initialQuery =
                url.searchParams.get("q") || "";

            if (searchInput && initialQuery) {
                searchInput.value = initialQuery;
            }
        } catch (error) {
            // L'aide reste utilisable sans URL API.
        }

        refresh({skipUrl: true});
        updateBackTop();

        if (window.location.hash) {
            const target = document.querySelector(
                window.location.hash
            );

            if (
                target
                && target.matches(
                    "[data-help-article]"
                )
            ) {
                target.setAttribute("open", "");

                window.setTimeout(function () {
                    target.scrollIntoView({
                        behavior: "smooth",
                        block: "center"
                    });
                }, 120);
            }
        }
    });
</script>


<!--


    JavaScript global minimal :


    menu mobile, menu du compte et protection Paddle.


    Les liens de langue restent des liens HTML normaux.


-->


<script>


    document.addEventListener("DOMContentLoaded", function () {


        const mobileMenuButton = document.getElementById(


            "mobile-menu-button"


        );


        const navigation = document.getElementById(


            "main-navigation"


        );


        const accountMenu = document.getElementById(


            "account-menu"


        );


        const accountMenuButton = document.getElementById(


            "account-menu-button"


        );


        const languageMenu = document.getElementById(


            "language-menu"


        );


        const languageMenuButton = document.getElementById(


            "language-menu-button"


        );


        const paymentForms = Array.from(


            document.querySelectorAll(


                "[data-global-payment-form]"


            )


        );


        function setNavigationLock(locked) {


            document.body.classList.toggle(


                "navigation-open",


                Boolean(locked)


                && window.innerWidth <= 900


            );


        }


        function closeAccountMenu(options) {


            const settings = options || {};


            if (!accountMenu || !accountMenuButton) {


                return;


            }


            const wasOpen = accountMenu.classList.contains(


                "open"


            );


            accountMenu.classList.remove("open");


            accountMenuButton.setAttribute(


                "aria-expanded",


                "false"


            );


            if (


                wasOpen


                && settings.restoreFocus


            ) {


                accountMenuButton.focus();


            }


        }


        function closeLanguageMenu(options) {


            const settings = options || {};


            if (!languageMenu || !languageMenuButton) {


                return;


            }


            const wasOpen = languageMenu.classList.contains(


                "open"


            );


            languageMenu.classList.remove("open");


            languageMenuButton.setAttribute(


                "aria-expanded",


                "false"


            );


            if (


                wasOpen


                && settings.restoreFocus


            ) {


                languageMenuButton.focus();


            }


        }


        function closeMobileMenu(options) {


            const settings = options || {};


            if (!mobileMenuButton || !navigation) {


                setNavigationLock(false);


                return;


            }


            const wasOpen = navigation.classList.contains(


                "open"


            );


            navigation.classList.remove("open");


            mobileMenuButton.classList.remove("open");


            mobileMenuButton.setAttribute(


                "aria-expanded",


                "false"


            );


            setNavigationLock(false);


            if (


                wasOpen


                && settings.restoreFocus


            ) {


                mobileMenuButton.focus();


            }


        }


        function openMobileMenu() {


            if (!mobileMenuButton || !navigation) {


                return;


            }


            navigation.classList.add("open");


            mobileMenuButton.classList.add("open");


            mobileMenuButton.setAttribute(


                "aria-expanded",


                "true"


            );


            setNavigationLock(true);


        }


        if (mobileMenuButton && navigation) {


            mobileMenuButton.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                    if (


                        navigation.classList.contains(


                            "open"


                        )


                    ) {


                        closeLanguageMenu();


                        closeAccountMenu();


                        closeMobileMenu();


                    } else {


                        openMobileMenu();


                    }


                }


            );


            navigation.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                }


            );


        }


        if (accountMenu && accountMenuButton) {


            accountMenuButton.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                    closeLanguageMenu();


                    const isOpen =


                        accountMenu.classList.toggle(


                            "open"


                        );


                    accountMenuButton.setAttribute(


                        "aria-expanded",


                        String(isOpen)


                    );


                }


            );


            accountMenu.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                }


            );


        }


        if (languageMenu && languageMenuButton) {


            languageMenuButton.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                    closeAccountMenu();


                    const isOpen =


                        languageMenu.classList.toggle(


                            "open"


                        );


                    languageMenuButton.setAttribute(


                        "aria-expanded",


                        String(isOpen)


                    );


                }


            );


            languageMenu.addEventListener(


                "click",


                function (event) {


                    event.stopPropagation();


                }


            );


        }


        document.addEventListener("click", function () {


            closeLanguageMenu();


            closeAccountMenu();


            closeMobileMenu();


        });


        document.addEventListener(


            "keydown",


            function (event) {


                if (event.key !== "Escape") {


                    return;


                }


                closeLanguageMenu({


                    restoreFocus: true


                });


                closeAccountMenu({


                    restoreFocus: true


                });


                closeMobileMenu({


                    restoreFocus: true


                });


            }


        );


        if (navigation) {


            navigation


                .querySelectorAll("a")


                .forEach(function (link) {


                    link.addEventListener(


                        "click",


                        function () {


                            closeLanguageMenu();


                            closeAccountMenu();


                            if (


                                window.innerWidth <= 900


                            ) {


                                closeMobileMenu();


                            }


                        }


                    );


                });


        }


        window.addEventListener(


            "resize",


            function () {


                if (window.innerWidth > 900) {


                    closeMobileMenu();


                }


            }


        );


        paymentForms.forEach(function (form) {


            form.addEventListener(


                "submit",


                function (event) {


                    const button = form.querySelector(


                        'button[type="submit"]'


                    );


                    if (!button) {


                        return;


                    }


                    if (button.disabled) {


                        event.preventDefault();


                        return;


                    }


                    button.disabled = true;


                    button.setAttribute(


                        "aria-busy",


                        "true"


                    );


                    if (button.dataset.loadingText) {


                        button.textContent =


                            button.dataset.loadingText;


                    }


                }


            );


        });


    });


</script>


<!-- CLASSMIRROR_MARKETING_V45_SCRIPT -->


<script src="/static/marketing_v45.js?v=45" defer></script>


<!-- CLASSMIRROR_RESPONSIVE_V45_1_JS -->


<script src="/static/responsive_v45_1.js?v=45.1" defer></script>


<!-- CLASSMIRROR_MIRROR_FLOW_V97_SCRIPT_BEGIN -->


<script defer src="/static/classmirror_mirror_flow_v97.js?v=162.0"></script>


<!-- CLASSMIRROR_MIRROR_FLOW_V97_SCRIPT_END -->


<!-- CLASSMIRROR_JAD_VISIBLE_V98_BEGIN -->


<script defer src="/static/classmirror_jad_visible_v98.js?v=98.0"></script>


<!-- CLASSMIRROR_JAD_VISIBLE_V98_END -->


<!-- CLASSMIRROR V250d FOOTER VRAI LOGO : BEGIN -->

<style id="cm-v250d-footer-vrai-logo">

/*
 * V250d
 * Cible directement le vrai branding du footer.
 *
 * Objectif :
 * - symbole nettement plus grand
 * - mot ClassMirror compact
 * - bon contraste
 * - aucun changement sur le logo du header
 */


/* CONTENEUR DU LOGO FOOTER */

.site-footer .classmirror-footer-logo{
    display:inline-flex !important;
    align-items:center !important;

    gap:10px !important;

    width:auto !important;
    height:auto !important;

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

    overflow:visible !important;

    text-decoration:none !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* VRAIE IMAGE DU FOOTER */

.site-footer .classmirror-footer-logo-image{
    display:block !important;

    width:76px !important;
    height:76px !important;

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

    max-width:76px !important;
    max-height:76px !important;

    object-fit:contain !important;
    object-position:center !important;

    flex:0 0 76px !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* MOT CLASSMIRROR */

.site-footer .classmirror-footer-logo-word{
    display:inline-block !important;

    width:auto !important;
    height:auto !important;

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

    font-size:19px !important;
    line-height:1.05 !important;

    font-weight:750 !important;
    letter-spacing:-0.2px !important;

    color:#58a6ff !important;

    opacity:1 !important;
    visibility:visible !important;

    white-space:nowrap !important;

    position:static !important;
    inset:auto !important;

    transform:none !important;

    background:none !important;
}


/*
 * Empêcher d'anciennes règles de recouvrir
 * ou couper le logo du footer.
 */

.site-footer .classmirror-footer-logo::before,
.site-footer .classmirror-footer-logo::after,
.site-footer .classmirror-footer-logo-word::before,
.site-footer .classmirror-footer-logo-word::after{
    content:none !important;
    display:none !important;
}


/* MOBILE */

@media(max-width:700px){

    .site-footer .classmirror-footer-logo{
        gap:8px !important;
    }

    .site-footer .classmirror-footer-logo-image{
        width:62px !important;
        height:62px !important;

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

        max-width:62px !important;
        max-height:62px !important;

        flex-basis:62px !important;
    }

    .site-footer .classmirror-footer-logo-word{
        font-size:17px !important;
    }
}

</style>

<!-- CLASSMIRROR V250d FOOTER VRAI LOGO : END -->


<!-- CLASSMIRROR V250g FOOTER BRAND : BEGIN -->

<style id="cm-v250g-footer-brand">

/* -----------------------------------------
   Branding footer uniquement
   ----------------------------------------- */

.cm-footer-v11 .cm250g-footer-brand{
    display:inline-flex !important;
    align-items:center !important;

    gap:12px !important;

    width:auto !important;
    max-width:none !important;

    margin:0 0 16px 0 !important;

    text-decoration:none !important;

    overflow:visible !important;
}


/*
 * Fenêtre carrée contenant uniquement
 * la partie gauche du PNG = symbole.
 */

.cm-footer-v11 .cm250g-footer-icon{
    position:relative !important;

    display:block !important;

    width:68px !important;
    height:68px !important;

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

    overflow:hidden !important;

    border-radius:18px !important;

    flex:0 0 68px !important;
}


.cm-footer-v11 .cm250g-footer-icon img{
    position:absolute !important;

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

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

    max-width:none !important;

    transform:translateY(-50%) !important;

    object-fit:initial !important;
}


/* Texte séparé */

.cm-footer-v11 .cm250g-footer-word{
    display:inline-block !important;

    font-size:19px !important;
    line-height:1 !important;

    font-weight:750 !important;

    letter-spacing:-.25px !important;

    color:#58a6ff !important;

    white-space:nowrap !important;
}


/* -----------------------------------------
   Apprendre · Expliquer · Progresser
   ----------------------------------------- */

.cm-footer-v11 .cm-footer-v11-pills{
    display:flex !important;

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

    gap:8px !important;
}


.cm-footer-v11 .cm-footer-v11-pills span{
    display:inline-block !important;

    font-size:12px !important;

    margin:0 !important;
}


.cm-footer-v11 .cm250g-pill-dot{
    display:inline-block !important;

    margin:0 2px !important;

    font-size:14px !important;
    font-weight:400 !important;

    opacity:.55 !important;
}


/*
 * Désactive les séparateurs CSS de V250f,
 * puisqu'on utilise maintenant de vrais caractères.
 */

.cm-footer-v11
.cm-footer-v11-pills
span::after{
    content:none !important;
}


/* -----------------------------------------
   Liens des colonnes
   ----------------------------------------- */

.cm-footer-v11 .cm-footer-v11-column{
    display:flex !important;

    flex-direction:column !important;

    gap:10px !important;
}


.cm-footer-v11 .cm-footer-v11-column a{
    display:block !important;
}


/* Mobile */

@media(max-width:600px){

    .cm-footer-v11 .cm250g-footer-icon{
        width:58px !important;
        height:58px !important;

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

        flex-basis:58px !important;
    }

    .cm-footer-v11 .cm250g-footer-icon img{
        width:194px !important;
    }

    .cm-footer-v11 .cm250g-footer-word{
        font-size:18px !important;
    }
}

</style>

<!-- CLASSMIRROR V250g FOOTER BRAND : END -->

<style id="cm-v250h-icon-hd">

/*
 * V250h
 * La nouvelle image est déjà une vraie icône carrée.
 * Plus aucun zoom ou déplacement interne nécessaire.
 */

.cm-footer-v11 .cm250g-footer-icon{
    width:72px !important;
    height:72px !important;

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

    flex:0 0 72px !important;

    overflow:visible !important;

    border-radius:18px !important;
}


.cm-footer-v11 .cm250g-footer-icon img{
    position:static !important;

    display:block !important;

    width:72px !important;
    height:72px !important;

    max-width:72px !important;
    max-height:72px !important;

    transform:none !important;

    object-fit:contain !important;
    object-position:center !important;

    image-rendering:auto !important;

    opacity:1 !important;
}


/* Petit nom ClassMirror */

.cm-footer-v11 .cm250g-footer-word{
    font-size:18px !important;
    font-weight:750 !important;
}


@media(max-width:600px){

    .cm-footer-v11 .cm250g-footer-icon,
    .cm-footer-v11 .cm250g-footer-icon img{
        width:60px !important;
        height:60px !important;

        min-width:60px !important;
        min-height:60px !important;
    }

    .cm-footer-v11 .cm250g-footer-icon{
        flex-basis:60px !important;
    }

    .cm-footer-v11 .cm250g-footer-word{
        font-size:17px !important;
    }
}

</style>


</body>


</html>