

<!-- 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>Interaktive Demo — ClassMirror</title>


    <meta


        name="description"


        content="Teste die ClassMirror-Lernmethode mit einer kostenlosen interaktiven Demo."


    >


    <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="Interaktive Demo — ClassMirror"


    >


    <meta


        property="og:description"


        content="Teste die ClassMirror-Lernmethode mit einer kostenlosen interaktiven Demo."


    >


    <meta


        property="og:locale"


        content="en_GB"


    >


    <meta


        name="twitter:title"


        content="Interaktive Demo — ClassMirror"


    >


    <meta


        name="twitter:description"


        content="Teste die ClassMirror-Lernmethode mit einer kostenlosen interaktiven Demo."


    >


    <link


        rel="stylesheet"


        href="https://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>

    .cm-demo {

        width: 100%;

        max-width: 100%;

        min-height: 78vh;

        padding: 48px 20px 82px;

        overflow-x: hidden;

        background:

            radial-gradient(circle at 8% 0%, rgba(108, 77, 246, 0.15), transparent 31%),

            radial-gradient(circle at 100% 18%, rgba(38, 197, 167, 0.11), transparent 28%),

            #f7f8fc;

    }


    .cm-demo * {

        box-sizing: border-box;

    }


    .cm-demo-container {

        width: min(1160px, 100%);

        min-width: 0;

        max-width: 100%;

        margin: 0 auto;

    }


    .cm-demo-hero {

        display: grid;

        grid-template-columns:

            minmax(0, 1.3fr)

            minmax(300px, 0.7fr);

        gap: 22px;

        align-items: stretch;

        margin-bottom: 22px;

    }


    .cm-demo-intro,

    .cm-demo-summary,

    .cm-demo-workspace,

    .cm-demo-final,

    .cm-demo-step {

        min-width: 0;

        max-width: 100%;

    }


    .cm-demo-intro,

    .cm-demo-summary,

    .cm-demo-workspace,

    .cm-demo-final {

        background: #ffffff;

        border: 1px solid #e5e7ef;

        border-radius: 25px;

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

    }


    .cm-demo-intro {

        padding: 35px;

    }


    .cm-demo-badge {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 8px 12px;

        color: #5a3fce;

        font-size: 12px;

        font-weight: 900;

        letter-spacing: 0.04em;

        text-transform: uppercase;

        background: #efecff;

        border-radius: 999px;

    }


    .cm-demo-badge::before {

        width: 8px;

        height: 8px;

        content: "";

        background: #26c5a7;

        border-radius: 50%;

        box-shadow: 0 0 0 5px rgba(38, 197, 167, 0.13);

    }


    .cm-demo-intro h1 {

        max-width: 760px;

        margin: 15px 0 12px;

        color: #222738;

        font-size: clamp(35px, 4.6vw, 54px);

        line-height: 1.07;

        letter-spacing: -0.025em;

        text-wrap: balance;

        overflow-wrap: break-word;

    }


    .cm-demo-intro > p {

        max-width: 790px;

        margin: 0;

        color: #686e80;

        font-size: 17px;

        line-height: 1.75;

    }


    .cm-demo-notes {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        margin: 24px 0 0;

        padding: 0;

        list-style: none;

    }


    .cm-demo-notes li {

        padding: 9px 12px;

        color: #4f5567;

        font-size: 13px;

        font-weight: 800;

        background: #f7f8fc;

        border: 1px solid #e8eaf1;

        border-radius: 999px;

    }


    .cm-demo-summary {

        padding: 28px;

        color: #ffffff;

        background: linear-gradient(145deg, #2d1d69, #6c4df6);

        border: 0;

    }


    .cm-demo-summary small {

        display: block;

        margin-bottom: 9px;

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

        font-size: 12px;

        font-weight: 900;

        letter-spacing: 0.05em;

        text-transform: uppercase;

    }


    .cm-demo-summary h2 {

        margin: 0 0 8px;

        color: #ffffff;

        font-size: 25px;

    }


    .cm-demo-summary p {

        margin: 0 0 24px;

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

        line-height: 1.6;

    }


    .cm-demo-progress-label {

        display: flex;

        justify-content: space-between;

        gap: 12px;

        margin-bottom: 9px;

        font-size: 13px;

        font-weight: 900;

    }


    .cm-demo-progress-track {

        height: 10px;

        overflow: hidden;

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

        border-radius: 999px;

    }


    .cm-demo-progress-value {

        width: 0;

        height: 100%;

        background: #ffffff;

        border-radius: inherit;

        transition: width 0.35s ease;

    }


    .cm-demo-progress-steps {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 7px;

        margin-top: 13px;

    }


    .cm-demo-progress-step {

        min-width: 0;

        padding: 7px 5px;

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

        font-size: 10px;

        font-weight: 900;

        text-align: center;

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

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

        border-radius: 8px;

    }


    .cm-demo-progress-step.current {

        color: #342469;

        background: #ffffff;

        border-color: #ffffff;

    }


    .cm-demo-progress-step.completed {

        color: #ffffff;

        background: rgba(52, 214, 165, 0.28);

        border-color: rgba(105, 242, 200, 0.44);

    }


    .cm-demo-topic-card {

        margin-top: 23px;

        padding: 16px;

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

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

        border-radius: 16px;

    }


    .cm-demo-topic-card strong {

        display: block;

        margin-bottom: 5px;

    }


    .cm-demo-topic-card span {

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

        font-size: 13px;

        line-height: 1.5;

    }


    .cm-demo-workspace {

        padding: 32px;

    }


    .cm-demo-step {

        display: none;

    }


    .cm-demo-step.active {

        display: block;

        animation: cmDemoEnter 0.28s ease;

    }


    @keyframes cmDemoEnter {

        from {

            opacity: 0;

            transform: translateY(8px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }


    .cm-demo-student {

        display: flex;

        align-items: center;

        gap: 14px;

        margin-bottom: 22px;

    }


    .cm-demo-avatar {

        display: flex;

        flex: 0 0 auto;

        align-items: center;

        justify-content: center;

        width: 58px;

        height: 58px;

        color: #ffffff;

        font-size: 20px;

        font-weight: 950;

        background: #31a86d;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(49, 168, 109, 0.22);

    }


    .cm-demo-step[data-student="samir"] .cm-demo-avatar {

        background: #e59300;

        box-shadow: 0 10px 25px rgba(229, 147, 0, 0.22);

    }


    .cm-demo-step[data-student="maya"] .cm-demo-avatar {

        background: #6c4df6;

        box-shadow: 0 10px 25px rgba(108, 77, 246, 0.22);

    }


    .cm-demo-student h2 {

        margin: 0 0 4px;

        color: #252a3b;

        font-size: 23px;

    }


    .cm-demo-student p {

        margin: 0;

        color: #73798a;

        font-size: 14px;

    }


    .cm-demo-question {

        margin: 0 0 20px;

        padding: 22px;

        color: #2d3243;

        font-size: clamp(19px, 3vw, 25px);

        font-weight: 850;

        line-height: 1.45;

        background: #f8f8fd;

        border: 1px solid #e8e8f3;

        border-radius: 18px;

    }


    .cm-demo-answer-label {

        display: flex;

        justify-content: space-between;

        gap: 12px;

        margin-bottom: 9px;

        color: #303547;

        font-size: 14px;

        font-weight: 900;

    }


    .cm-demo-answer-label span {

        color: #858b9a;

        font-size: 12px;

        font-weight: 700;

    }


    .cm-demo-textarea {

        width: 100%;

        min-height: 170px;

        padding: 17px;

        resize: vertical;

        color: #2d3243;

        font: inherit;

        line-height: 1.65;

        background: #ffffff;

        border: 1px solid #dfe2eb;

        border-radius: 15px;

        outline: none;

        transition: border-color 0.2s ease, box-shadow 0.2s ease;

    }


    .cm-demo-textarea:focus {

        border-color: #6c4df6;

        box-shadow: 0 0 0 4px rgba(108, 77, 246, 0.10);

    }


    .cm-demo-textarea[disabled] {

        color: #555b6c;

        background: #f6f7fa;

        cursor: default;

    }


    .cm-demo-answer-meta {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 7px 13px;

        margin-top: 9px;

        color: #7e8495;

        font-size: 11px;

        font-weight: 750;

    }


    .cm-demo-readiness {

        color: #9c6400;

        font-weight: 900;

    }


    .cm-demo-readiness.ready {

        color: #3462a0;

    }


    .cm-demo-readiness.detailed {

        color: #238154;

    }


    .cm-demo-answer-quality {

        height: 6px;

        margin-top: 9px;

        overflow: hidden;

        background: #e7e8ee;

        border-radius: 999px;

    }


    .cm-demo-answer-quality-value {

        width: 0;

        height: 100%;

        background: #d7992e;

        border-radius: inherit;

        transition:

            width 0.22s ease,

            background 0.22s ease;

    }


    .cm-demo-answer-quality-value.ready {

        background: #5783c5;

    }


    .cm-demo-answer-quality-value.detailed {

        background: #32a16b;

    }


    .cm-demo-feedback {

        display: none;

        margin-top: 17px;

        padding: 15px 17px;

        color: #4a5061;

        font-size: 14px;

        font-weight: 750;

        line-height: 1.55;

        background: #f5f7fb;

        border: 1px solid #e3e6ee;

        border-radius: 13px;

    }


    .cm-demo-feedback.visible {

        display: block;

    }


    .cm-demo-feedback.good {

        color: #12653f;

        background: #eaf8f1;

        border-color: #bce7d1;

    }


    .cm-demo-feedback.partial {

        color: #725400;

        background: #fff8de;

        border-color: #ead99b;

    }


    .cm-demo-actions {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        margin-top: 20px;

    }


    .cm-demo-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        min-height: 50px;

        padding: 11px 20px;

        color: #ffffff;

        font: inherit;

        font-size: 14px;

        font-weight: 950;

        text-decoration: none;

        background: #6c4df6;

        border: 0;

        border-radius: 13px;

        cursor: pointer;

        transition: transform 0.18s ease, box-shadow 0.18s ease;

    }


    .cm-demo-button:hover {

        transform: translateY(-1px);

        box-shadow: 0 11px 25px rgba(108, 77, 246, 0.22);

    }


    .cm-demo-button.secondary {

        color: #5540ba;

        background: #f0edff;

    }


    .cm-demo-button[disabled] {

        opacity: 0.52;

        cursor: not-allowed;

        transform: none;

        box-shadow: none;

    }


    .cm-demo-privacy {

        color: #858b9a;

        font-size: 12px;

        font-weight: 750;

    }


    .cm-demo-final {

        display: none;

        padding: 34px;

    }


    .cm-demo-final.visible {

        display: block;

        animation: cmDemoEnter 0.3s ease;

    }


    .cm-demo-final-grid {

        display: grid;

        grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);

        gap: 28px;

        align-items: center;

    }


    .cm-demo-score-ring {

        --score-angle: 0deg;


        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 190px;

        height: 190px;

        margin: 0 auto;

        background:

            radial-gradient(

                circle at center,

                #ffffff 62%,

                transparent 63%

            ),

            conic-gradient(

                #6c4df6 var(--score-angle),

                #eceaf7 0

            );

        border-radius: 50%;

        transition: background 0.6s ease;

    }


    .cm-demo-score-ring strong {

        color: #2d234e;

        font-size: 49px;

        line-height: 1;

    }


    .cm-demo-score-ring span {

        margin-top: 7px;

        color: #777d8d;

        font-size: 13px;

        font-weight: 900;

    }


    .cm-demo-final h2 {

        margin: 0 0 9px;

        color: #252a3b;

        font-size: clamp(29px, 4vw, 41px);

    }


    .cm-demo-final-description {

        margin: 0 0 21px;

        color: #6d7384;

        line-height: 1.7;

    }


    .cm-demo-metrics {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 10px;

        margin-bottom: 21px;

    }


    .cm-demo-metric {

        padding: 14px;

        background: #f8f8fd;

        border: 1px solid #e9e9f2;

        border-radius: 13px;

    }


    .cm-demo-metric span {

        display: block;

        margin-bottom: 5px;

        color: #7d8393;

        font-size: 12px;

        font-weight: 850;

    }


    .cm-demo-metric strong {

        color: #332963;

        font-size: 22px;

    }


    .cm-demo-question-results {

        margin-bottom: 21px;

    }


    .cm-demo-question-results h3 {

        margin: 0 0 10px;

        color: #343949;

        font-size: 15px;

    }


    .cm-demo-question-result-grid {

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 9px;

    }


    .cm-demo-question-result {

        padding: 12px;

        background: #fafafd;

        border: 1px solid #e7e8ef;

        border-radius: 12px;

    }


    .cm-demo-question-result span {

        display: block;

        margin-bottom: 4px;

        color: #777d8e;

        font-size: 11px;

        font-weight: 850;

    }


    .cm-demo-question-result strong {

        color: #392d70;

        font-size: 19px;

    }


    .cm-demo-recommendation {

        margin-bottom: 22px;

        padding: 15px 17px;

        color: #5540a8;

        font-size: 14px;

        font-weight: 800;

        line-height: 1.6;

        background: #f0edff;

        border: 1px solid #dcd5ff;

        border-radius: 13px;

    }


    .cm-demo-final-actions,

    .cm-demo-result-tools {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

    }


    .cm-demo-result-tools {

        margin-top: 12px;

    }


    .cm-demo-result-status {

        min-height: 18px;

        margin: 9px 0 0;

        color: #72788a;

        font-size: 11px;

        font-weight: 750;

    }


    .cm-demo-disclaimer {

        margin-top: 17px;

        color: #8a8f9e;

        font-size: 12px;

        line-height: 1.55;

    }


    .cm-demo-hidden-copy {

        display: none;

    }


    @media (max-width: 1050px) {

        .cm-demo-hero,

        .cm-demo-final-grid {

            grid-template-columns: 1fr;

        }


        .cm-demo-summary {

            max-width: 760px;

        }

    }


    @media (max-width: 720px) {

        .cm-demo-metrics,

        .cm-demo-question-result-grid {

            grid-template-columns: 1fr;

        }

    }


    @media (max-width: 600px) {

        .cm-demo {

            padding: 28px 14px 60px;

        }


        .cm-demo-intro,

        .cm-demo-summary,

        .cm-demo-workspace,

        .cm-demo-final {

            padding: 24px;

            border-radius: 20px;

        }


        .cm-demo-actions,

        .cm-demo-final-actions,

        .cm-demo-result-tools {

            align-items: stretch;

            flex-direction: column;

        }


        .cm-demo-answer-meta {

            align-items: flex-start;

            flex-direction: column;

        }


        .cm-demo-button {

            width: 100%;

        }

    }


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

        .cm-demo-step.active,

        .cm-demo-final.visible {

            animation: none;

        }


        .cm-demo-progress-value,

        .cm-demo-answer-quality-value,

        .cm-demo-score-ring {

            transition: none;

        }

    }


    @media print {

        .cm-demo-hero,

        .cm-demo-workspace,

        .cm-demo-final-actions,

        .cm-demo-result-tools,

        .cm-demo-disclaimer {

            display: none !important;

        }


        .cm-demo {

            padding: 0;

            background: #ffffff;

        }


        .cm-demo-final {

            display: block !important;

            padding: 0;

            border: 0;

            box-shadow: none;

        }

    }

</style>


<link

    rel="stylesheet"

    href="/static/classmirror_demo_v133.css?v=133.0"

>


    <!-- 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://myclassmirror.com/demo?lang=de">


    <link


        rel="alternate"


        hreflang="fr"


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


    >


    <link


        rel="alternate"


        hreflang="en"


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


    >


    <link


        rel="alternate"


        hreflang="es"


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


    >


    <link


        rel="alternate"


        hreflang="ar"


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


    >


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

<link


        rel="alternate"


        hreflang="x-default"


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


    >


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


    <meta property="og:image" content="https://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://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://myclassmirror.com/",


        "applicationCategory": "EducationalApplication",


        "operatingSystem": "Web",


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


        "description": "Teste die ClassMirror-Lernmethode mit einer kostenlosen interaktiven Demo.",


        "image": "https://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://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=""


                aria-current="false"


            >


                Hilfe


            </a>


                <a


                    href="/demo"


                    class="active"


                    aria-current="page"


                >


                    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="/demo?lang=fr"


                        class="language-menu-option "


                        lang="fr"


                        hreflang="fr"


                        role="menuitem"


                    >


                        <span>FR</span>


                        <small>Français</small>


                    </a>


                    <a


                        href="/demo?lang=en"


                        class="language-menu-option active"


                        lang="en"


                        hreflang="en"


                        role="menuitem"


                    >


                        <span>EN</span>


                        <small>English</small>


                    </a>


                    <a


                        href="/demo?lang=es"


                        class="language-menu-option "


                        lang="es"


                        hreflang="es"


                        role="menuitem"


                    >


                        <span>ES</span>


                        <small>Español</small>


                    </a>


                    <a


                        href="/demo?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="cm-demo"

    id="cm-demo-root"

    data-readiness-short="Zu kurz"

    data-readiness-ready="Bereit zur Prüfung"

    data-readiness-detailed="Ausführliche Erklärung"

    data-leave-warning="Deine Antworten in der Demo sind noch nicht vollständig. Möchtest du diese Seite wirklich verlassen?"

>

    <div class="cm-demo-container">

        <div class="cm-demo-hero">

            <header class="cm-demo-intro">

                <span class="cm-demo-badge">Kostenlose interaktive Demo</span>

                <h1>Erkläre ein Konzept. Entdecke, was du wirklich verstanden hast.</h1>

                <p>Beantworte drei Fragen von Lina, Jad und Maya. Diese kurze Simulation zeigt die ClassMirror-Methode, ohne dass du ein Konto erstellen musst.</p>

                <ul class="cm-demo-notes">

                    <li>✓ Kein Konto erforderlich</li>

                    <li>✓ Keine Antwort wird gespeichert</li>

                    <li>✓ Etwa 3 Minuten</li>

                </ul>

            </header>


            <aside class="cm-demo-summary">

                <small>Fortschritt der Demo</small>

                <div class="cm-demo-progress-label">

                    <span id="cm-demo-progress-text">0 / 3</span>

                    <span id="cm-demo-progress-percent">0%</span>

                </div>

                <div

                    class="cm-demo-progress-track"

                    id="cm-demo-progress-track"

                    role="progressbar"

                    aria-label="Fortschritt der Demo"

                    aria-valuemin="0"

                    aria-valuemax="100"

                    aria-valuenow="0"

                >

                    <div

                        class="cm-demo-progress-value"

                        id="cm-demo-progress-value"

                    ></div>

                </div>


                <div

                    class="cm-demo-progress-steps"

                    aria-hidden="true"

                >

                    <span

                        class="cm-demo-progress-step current"

                        data-demo-progress-step="0"

                    >

                        Lina

                    </span>

                    <span

                        class="cm-demo-progress-step"

                        data-demo-progress-step="1"

                    >

                        Samir

                    </span>

                    <span

                        class="cm-demo-progress-step"

                        data-demo-progress-step="2"

                    >

                        Maya

                    </span>

                </div>


                <div class="cm-demo-topic-card">

                    <strong>Photosynthese</strong>

                    <span>Erkläre, wie eine Pflanze Lichtenergie in chemische Energie umwandelt.</span>

                </div>

            </aside>

        </div>


        <section class="cm-demo-workspace" id="cm-demo-workspace">

            <article

                class="cm-demo-step active"

                data-index="0"

                data-student="lina"

                data-keywords="lumiere|light|luz|ضوء;water|eau|agua|ماء;carbon dioxide|dioxyde de carbone|dioxido de carbono|ثاني اكسيد الكربون;glucose|glucosa|سكر|غلوكوز;oxygen|oxygene|oxigeno|اكسجين"

            >

                <div class="cm-demo-student">

                    <div class="cm-demo-avatar">L</div>

                    <div>

                        <h2>Lina</h2>

                        <p>Prüft die Grundlagen</p>

                    </div>

                </div>

                <div class="cm-demo-question"><span>Frage 1/3 — </span>Was braucht eine Pflanze für die Photosynthese und was produziert sie dabei?</div>

                <label class="cm-demo-answer-label" for="cm-demo-answer-1">

                    Deine Erklärung

                    <span>Schreibe mindestens zwei oder drei Sätze.</span>

                </label>

                <textarea

                    class="cm-demo-textarea"

                    id="cm-demo-answer-1"

                    placeholder="Erkläre die Idee mit deinen eigenen Worten..."

                    maxlength="1200"

                    aria-describedby="cm-demo-answer-meta-1 cm-demo-feedback-1"

                ></textarea>


                <div

                    class="cm-demo-answer-meta"

                    id="cm-demo-answer-meta-1"

                >

                    <span>

                        <strong data-demo-word-count>0</strong>

                        Wörter

                    </span>


                    <span

                        class="cm-demo-readiness"

                        data-demo-readiness

                    >

                        Zu kurz

                    </span>


                    <span>⌨ Strg + Eingabetaste zum Prüfen</span>

                </div>


                <div

                    class="cm-demo-answer-quality"

                    aria-hidden="true"

                >

                    <div

                        class="cm-demo-answer-quality-value"

                        data-demo-quality-value

                    ></div>

                </div>


                <div

                    class="cm-demo-feedback"

                    id="cm-demo-feedback-1"

                    aria-live="polite"

                ></div>

                <div class="cm-demo-actions">

                    <span class="cm-demo-privacy">🔒 Dein Text bleibt in diesem Browser.</span>

                    <button type="button" class="cm-demo-button cm-demo-check">Meine Erklärung prüfen</button>

                </div>

            </article>


            <article

                class="cm-demo-step"

                data-index="1"

                data-student="samir"

                data-keywords="chlorophyll|chlorophylle|clorofila|كلوروفيل;chloroplast|chloroplaste|cloroplasto|بلاستيدات;absorb|absorbe|absorber|يمتص;light energy|energie lumineuse|energia luminosa|طاقة ضوئية"

            >

                <div class="cm-demo-student">

                    <div class="cm-demo-avatar">J</div>

                    <div>

                        <h2>Samir</h2>

                        <p>Prüft das logische Denken</p>

                    </div>

                </div>

                <div class="cm-demo-question"><span>Frage 2/3 — </span>Warum sind Chlorophyll und Chloroplasten für diesen Prozess wichtig?</div>

                <label class="cm-demo-answer-label" for="cm-demo-answer-2">

                    Deine Erklärung

                    <span>Schreibe mindestens zwei oder drei Sätze.</span>

                </label>

                <textarea

                    class="cm-demo-textarea"

                    id="cm-demo-answer-2"

                    placeholder="Erkläre die Idee mit deinen eigenen Worten..."

                    maxlength="1200"

                    aria-describedby="cm-demo-answer-meta-2 cm-demo-feedback-2"

                ></textarea>


                <div

                    class="cm-demo-answer-meta"

                    id="cm-demo-answer-meta-2"

                >

                    <span>

                        <strong data-demo-word-count>0</strong>

                        Wörter

                    </span>


                    <span

                        class="cm-demo-readiness"

                        data-demo-readiness

                    >

                        Zu kurz

                    </span>


                    <span>⌨ Strg + Eingabetaste zum Prüfen</span>

                </div>


                <div

                    class="cm-demo-answer-quality"

                    aria-hidden="true"

                >

                    <div

                        class="cm-demo-answer-quality-value"

                        data-demo-quality-value

                    ></div>

                </div>


                <div

                    class="cm-demo-feedback"

                    id="cm-demo-feedback-2"

                    aria-live="polite"

                ></div>

                <div class="cm-demo-actions">

                    <span class="cm-demo-privacy">🔒 Dein Text bleibt in diesem Browser.</span>

                    <button type="button" class="cm-demo-button cm-demo-check">Meine Erklärung prüfen</button>

                </div>

            </article>


            <article

                class="cm-demo-step"

                data-index="2"

                data-student="maya"

                data-keywords="less|decrease|diminue|disminuye|ينخفض;light|lumiere|luz|ضوء;energy|energie|energia|طاقة;rate|speed|vitesse|velocidad|معدل;limiting factor|facteur limitant|factor limitante|عامل محدد"

            >

                <div class="cm-demo-student">

                    <div class="cm-demo-avatar">M</div>

                    <div>

                        <h2>Maya</h2>

                        <p>Untersucht Grenzen und Zusammenhänge</p>

                    </div>

                </div>

                <div class="cm-demo-question"><span>Frage 3/3 — </span>Was geschieht mit der Photosynthese, wenn die Pflanze nur sehr wenig Licht erhält? Begründe deine Antwort.</div>

                <label class="cm-demo-answer-label" for="cm-demo-answer-3">

                    Deine Erklärung

                    <span>Schreibe mindestens zwei oder drei Sätze.</span>

                </label>

                <textarea

                    class="cm-demo-textarea"

                    id="cm-demo-answer-3"

                    placeholder="Erkläre die Idee mit deinen eigenen Worten..."

                    maxlength="1200"

                    aria-describedby="cm-demo-answer-meta-3 cm-demo-feedback-3"

                ></textarea>


                <div

                    class="cm-demo-answer-meta"

                    id="cm-demo-answer-meta-3"

                >

                    <span>

                        <strong data-demo-word-count>0</strong>

                        Wörter

                    </span>


                    <span

                        class="cm-demo-readiness"

                        data-demo-readiness

                    >

                        Zu kurz

                    </span>


                    <span>⌨ Strg + Eingabetaste zum Prüfen</span>

                </div>


                <div

                    class="cm-demo-answer-quality"

                    aria-hidden="true"

                >

                    <div

                        class="cm-demo-answer-quality-value"

                        data-demo-quality-value

                    ></div>

                </div>


                <div

                    class="cm-demo-feedback"

                    id="cm-demo-feedback-3"

                    aria-live="polite"

                ></div>

                <div class="cm-demo-actions">

                    <span class="cm-demo-privacy">🔒 Dein Text bleibt in diesem Browser.</span>

                    <button type="button" class="cm-demo-button cm-demo-check">Meine Erklärung prüfen</button>

                </div>

            </article>

        </section>


        <section class="cm-demo-final" id="cm-demo-final" aria-live="polite">

            <div class="cm-demo-final-grid">

                <div>

                    <div

                        class="cm-demo-score-ring"

                        id="cm-demo-score-ring"

                        role="progressbar"

                        aria-label="Mirror Score"

                        aria-valuemin="0"

                        aria-valuemax="100"

                        aria-valuenow="0"

                    >

                        <strong id="cm-demo-score">0</strong>

                        <span>Mirror Score</span>

                    </div>

                </div>

                <div>

                    <span class="cm-demo-badge">Beispielhaftes Ergebnis</span>

                    <h2>Dein Demo-Mirror-Score</h2>

                    <p class="cm-demo-final-description">Dieser Score schätzt die Vollständigkeit und Klarheit deiner drei Erklärungen. Eine echte ClassMirror-Sitzung verwendet personalisierte KI-Fragen und eine ausführlichere Bewertung.</p>

                    <div class="cm-demo-metrics">

                        <div class="cm-demo-metric">

                            <span>Abdeckung der Konzepte</span>

                            <strong id="cm-demo-coverage">0%</strong>

                        </div>

                        <div class="cm-demo-metric">

                            <span>Klarheit</span>

                            <strong id="cm-demo-clarity">0%</strong>

                        </div>

                        <div class="cm-demo-metric">

                            <span>Tiefe</span>

                            <strong id="cm-demo-depth">0%</strong>

                        </div>

                    </div>

                    <div class="cm-demo-question-results">

                        <h3>Score für jede Frage</h3>


                        <div class="cm-demo-question-result-grid">

                            <div class="cm-demo-question-result">

                                <span>Lina</span>

                                <strong id="cm-demo-lina-score">0%</strong>

                            </div>


                            <div class="cm-demo-question-result">

                                <span>Samir</span>

                                <strong id="cm-demo-samir-score">0%</strong>

                            </div>


                            <div class="cm-demo-question-result">

                                <span>Maya</span>

                                <strong id="cm-demo-maya-score">0%</strong>

                            </div>

                        </div>

                    </div>


                    <div class="cm-demo-recommendation">

                        Empfehlung: Verwende präzise wissenschaftliche Begriffe und verbinde jede Ursache klar mit ihrer Wirkung.

                    </div>


                    <div class="cm-demo-final-actions">

                        
                            <a href="/register" class="cm-demo-button">Kostenloses Konto erstellen</a>

                            <a href="/pricing" class="cm-demo-button secondary">Premium ansehen</a>

                        
                        <button

                            type="button"

                            class="cm-demo-button secondary"

                            id="cm-demo-restart"

                        >

                            Demo neu starten

                        </button>

                    </div>


                    <div class="cm-demo-result-tools">

                        <button

                            type="button"

                            class="cm-demo-button secondary"

                            id="cm-demo-copy-result"

                            data-copy-label="Ergebnis kopieren"

                            data-copied-label="Ergebnis kopiert"

                        >

                            Ergebnis kopieren

                        </button>


                        <button

                            type="button"

                            class="cm-demo-button secondary"

                            id="cm-demo-print-result"

                        >

                            Ergebnis drucken

                        </button>

                    </div>


                    <p

                        class="cm-demo-result-status"

                        id="cm-demo-result-status"

                        role="status"

                        aria-live="polite"

                    ></p>


                    <p class="cm-demo-disclaimer">

                        Diese öffentliche Demo ist eine pädagogische Simulation. Der lokale, schlüsselwortbasierte Score ist keine KI-Bewertung und wird nicht gespeichert.

                    </p>

                </div>

            </div>

        </section>


        <div class="cm-demo-hidden-copy" aria-hidden="true">

            <span id="cm-demo-copy-good">Gute Erklärung: Du hast mehrere wesentliche Ideen abgedeckt.</span>

            <span id="cm-demo-copy-partial">Guter Anfang. Ergänze präzisere Begriffe oder erkläre die Zusammenhänge deutlicher.</span>

            <span id="cm-demo-copy-short">Erweitere deine Antwort auf mindestens zwei vollständige Sätze, bevor du fortfährst.</span>

            <span id="cm-demo-copy-next">Nächste Frage</span>

            <span id="cm-demo-copy-finish">Meinen Mirror Score ansehen</span>

            <span id="cm-demo-copy-check">Meine Erklärung prüfen</span>

        </div>

    </div>

</section>


<section class="cm133-after">

    <div class="cm133-after-container">

        <div class="cm133-after-head">

            <span class="cm133-eyebrow">

                Von der Demo zum echten Lernen

            </span>


            <h2>

                Die Demo zeigt das Prinzip. Eine echte Sitzung geht deutlich weiter.

            </h2>


            <p>

                In ClassMirror beeinflussen Thema, Niveau und vorherige Antworten die Fragen und das Feedback.

            </p>

        </div>


        <div class="cm133-after-grid">

            <article>

                <span>01</span>

                <h3>

                    Adaptive Fragen

                </h3>

                <p>

                    Folgefragen können sich je nach dem ändern, was du bereits erklärt hast.

                </p>

            </article>


            <article>

                <span>02</span>

                <h3>

                    Niveauangepasstes Lernen

                </h3>

                <p>

                    Erwartetes Denken und Wortschatz passen sich an das Lernniveau an.

                </p>

            </article>


            <article>

                <span>03</span>

                <h3>

                    Nützliches Feedback

                </h3>

                <p>

                    Das Ergebnis zeigt, was verstanden wurde und was als Nächstes wiederholt werden sollte.

                </p>

            </article>

        </div>


        <div class="cm133-after-cta">

            <div>

                <strong>

                    Bereit, dein eigenes Thema zu erklären?

                </strong>

                <span>

                    Erstelle eine Sitzung mit deinem Fach und deinem Lernniveau.

                </span>

            </div>


                <a href="/register" class="cm133-button">

                    Kostenloses Konto erstellen

                </a>

            
        </div>

    </div>

</section>


</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://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 root = document.getElementById("cm-demo-root");

        const workspace = document.getElementById(

            "cm-demo-workspace"

        );

        const finalPanel = document.getElementById(

            "cm-demo-final"

        );

        const steps = Array.from(

            document.querySelectorAll(".cm-demo-step")

        );

        const progressValue = document.getElementById(

            "cm-demo-progress-value"

        );

        const progressTrack = document.getElementById(

            "cm-demo-progress-track"

        );

        const progressText = document.getElementById(

            "cm-demo-progress-text"

        );

        const progressPercent = document.getElementById(

            "cm-demo-progress-percent"

        );

        const progressSteps = Array.from(

            document.querySelectorAll(

                "[data-demo-progress-step]"

            )

        );

        const restartButton = document.getElementById(

            "cm-demo-restart"

        );

        const copyResultButton = document.getElementById(

            "cm-demo-copy-result"

        );

        const printResultButton = document.getElementById(

            "cm-demo-print-result"

        );

        const resultStatus = document.getElementById(

            "cm-demo-result-status"

        );

        const scoreRing = document.getElementById(

            "cm-demo-score-ring"

        );

        const scoreElement = document.getElementById(

            "cm-demo-score"

        );

        const coverageElement = document.getElementById(

            "cm-demo-coverage"

        );

        const clarityElement = document.getElementById(

            "cm-demo-clarity"

        );

        const depthElement = document.getElementById(

            "cm-demo-depth"

        );

        const questionScoreElements = [

            document.getElementById("cm-demo-lina-score"),

            document.getElementById("cm-demo-samir-score"),

            document.getElementById("cm-demo-maya-score")

        ];

        const goodCopy = document.getElementById(

            "cm-demo-copy-good"

        ).textContent;

        const partialCopy = document.getElementById(

            "cm-demo-copy-partial"

        ).textContent;

        const shortCopy = document.getElementById(

            "cm-demo-copy-short"

        ).textContent;

        const nextCopy = document.getElementById(

            "cm-demo-copy-next"

        ).textContent;

        const finishCopy = document.getElementById(

            "cm-demo-copy-finish"

        ).textContent;

        const checkCopy = document.getElementById(

            "cm-demo-copy-check"

        ).textContent;


        const scores = new Array(steps.length).fill(null);

        let currentIndex = 0;

        let demoStarted = false;

        let demoFinished = false;


        function normalise(value) {

            return String(value || "")

                .toLocaleLowerCase()

                .normalize("NFD")

                .replace(/[\u0300-\u036f]/g, "")

                .replace(/[^\p{L}\p{N}\s]/gu, " ")

                .replace(/\s+/g, " ")

                .trim();

        }


        function countWords(value) {

            const cleanValue = normalise(value);


            return cleanValue

                ? cleanValue.split(" ").filter(Boolean).length

                : 0;

        }


        function keywordCoverage(step, answer) {

            const groups = (

                step.dataset.keywords || ""

            )

                .split(";")

                .filter(Boolean)

                .map(function (group) {

                    return group

                        .split("|")

                        .map(normalise)

                        .filter(Boolean);

                });


            if (!groups.length) {

                return 0;

            }


            const cleanAnswer = normalise(answer);

            const hits = groups.filter(

                function (alternatives) {

                    return alternatives.some(

                        function (keyword) {

                            return cleanAnswer.includes(

                                keyword

                            );

                        }

                    );

                }

            ).length;


            return Math.round(

                hits / groups.length * 100

            );

        }


        function evaluate(step, answer) {

            const words = countWords(answer);

            const coverage = keywordCoverage(

                step,

                answer

            );

            const lengthScore = Math.min(

                100,

                Math.round(words / 55 * 100)

            );

            const sentenceCount = answer

                .split(/[.!?؟]+/)

                .filter(function (part) {

                    return part.trim().length > 8;

                })

                .length;

            const clarity = Math.min(

                100,

                35

                + sentenceCount * 18

                + Math.min(words, 35)

            );

            const depth = Math.min(

                100,

                Math.round(

                    coverage * 0.62

                    + lengthScore * 0.38

                )

            );

            const total = Math.round(

                coverage * 0.5

                + clarity * 0.25

                + depth * 0.25

            );


            return {

                total: total,

                coverage: coverage,

                clarity: clarity,

                depth: depth,

                words: words

            };

        }


        function completedCount() {

            return scores.filter(Boolean).length;

        }


        function updateProgress() {

            const completed = completedCount();

            const percent = steps.length

                ? Math.round(

                    completed / steps.length * 100

                )

                : 0;


            if (progressValue) {

                progressValue.style.width =

                    percent + "%";

            }


            if (progressText) {

                progressText.textContent =

                    completed + " / " + steps.length;

            }


            if (progressPercent) {

                progressPercent.textContent =

                    percent + "%";

            }


            if (progressTrack) {

                progressTrack.setAttribute(

                    "aria-valuenow",

                    String(percent)

                );

            }


            progressSteps.forEach(

                function (progressStep, index) {

                    progressStep.classList.toggle(

                        "completed",

                        Boolean(scores[index])

                    );

                    progressStep.classList.toggle(

                        "current",

                        !demoFinished

                        && index === currentIndex

                    );

                }

            );

        }


        function updateAnswerState(step) {

            const textarea = step.querySelector(

                ".cm-demo-textarea"

            );

            const wordCountElement = step.querySelector(

                "[data-demo-word-count]"

            );

            const readiness = step.querySelector(

                "[data-demo-readiness]"

            );

            const qualityValue = step.querySelector(

                "[data-demo-quality-value]"

            );


            if (!textarea) {

                return;

            }


            const words = countWords(textarea.value);

            const percentage = Math.min(

                100,

                words / 35 * 100

            );


            if (wordCountElement) {

                wordCountElement.textContent =

                    String(words);

            }


            if (qualityValue) {

                qualityValue.style.width =

                    percentage.toFixed(1) + "%";

                qualityValue.classList.remove(

                    "ready",

                    "detailed"

                );

            }


            if (readiness) {

                readiness.classList.remove(

                    "ready",

                    "detailed"

                );


                if (words >= 30) {

                    readiness.textContent =

                        root.dataset

                            .readinessDetailed;

                    readiness.classList.add(

                        "detailed"

                    );

                    qualityValue?.classList.add(

                        "detailed"

                    );

                } else if (words >= 12) {

                    readiness.textContent =

                        root.dataset

                            .readinessReady;

                    readiness.classList.add(

                        "ready"

                    );

                    qualityValue?.classList.add(

                        "ready"

                    );

                } else {

                    readiness.textContent =

                        root.dataset

                            .readinessShort;

                }

            }


            if (textarea.value.trim()) {

                demoStarted = true;

            }

        }


        function showStep(index) {

            steps.forEach(function (step, stepIndex) {

                const active = stepIndex === index;


                step.classList.toggle(

                    "active",

                    active

                );

                step.setAttribute(

                    "aria-hidden",

                    String(!active)

                );

            });


            currentIndex = index;

            updateProgress();


            const textarea = steps[index]

                ?.querySelector("textarea");


            if (textarea && !textarea.disabled) {

                textarea.focus();

            }


            workspace?.scrollIntoView({

                behavior: "smooth",

                block: "start"

            });

        }


        function average(key) {

            const completedScores =

                scores.filter(Boolean);


            if (!completedScores.length) {

                return 0;

            }


            return Math.round(

                completedScores.reduce(

                    function (total, item) {

                        return total + item[key];

                    },

                    0

                ) / completedScores.length

            );

        }


        function animateScore(targetScore) {

            const reducedMotion =

                window.matchMedia(

                    "(prefers-reduced-motion: reduce)"

                ).matches;


            const duration = reducedMotion ? 0 : 650;

            const startTime = performance.now();


            function frame(now) {

                const progress = duration

                    ? Math.min(

                        1,

                        (now - startTime) / duration

                    )

                    : 1;

                const currentScore = Math.round(

                    targetScore * progress

                );


                if (scoreElement) {

                    scoreElement.textContent =

                        String(currentScore);

                }


                if (scoreRing) {

                    scoreRing.style.setProperty(

                        "--score-angle",

                        Math.round(

                            currentScore * 3.6

                        ) + "deg"

                    );

                    scoreRing.setAttribute(

                        "aria-valuenow",

                        String(currentScore)

                    );

                }


                if (progress < 1) {

                    window.requestAnimationFrame(

                        frame

                    );

                }

            }


            window.requestAnimationFrame(frame);

        }


        function showFinal() {

            if (!scores.every(Boolean)) {

                return;

            }


            const totalScore = average("total");

            const coverageScore =

                average("coverage");

            const clarityScore =

                average("clarity");

            const depthScore = average("depth");


            if (workspace) {

                workspace.style.display = "none";

            }


            finalPanel?.classList.add("visible");


            if (coverageElement) {

                coverageElement.textContent =

                    coverageScore + "%";

            }


            if (clarityElement) {

                clarityElement.textContent =

                    clarityScore + "%";

            }


            if (depthElement) {

                depthElement.textContent =

                    depthScore + "%";

            }


            questionScoreElements.forEach(

                function (element, index) {

                    if (element && scores[index]) {

                        element.textContent =

                            scores[index].total + "%";

                    }

                }

            );


            demoFinished = true;

            currentIndex = steps.length;

            updateProgress();

            animateScore(totalScore);


            finalPanel?.scrollIntoView({

                behavior: "smooth",

                block: "start"

            });

        }


        function validateStep(step, index) {

            const button = step.querySelector(

                ".cm-demo-check"

            );

            const textarea = step.querySelector(

                ".cm-demo-textarea"

            );

            const feedback = step.querySelector(

                ".cm-demo-feedback"

            );


            if (

                !button

                || !textarea

                || !feedback

            ) {

                return;

            }


            if (

                step.dataset.validated === "true"

            ) {

                if (index === steps.length - 1) {

                    showFinal();

                } else {

                    showStep(index + 1);

                }

                return;

            }


            const answer = textarea.value.trim();

            const result = evaluate(step, answer);


            if (result.words < 12) {

                feedback.textContent = shortCopy;

                feedback.className =

                    "cm-demo-feedback visible partial";

                textarea.focus();

                return;

            }


            scores[index] = result;

            step.dataset.validated = "true";

            feedback.textContent =

                result.total >= 67

                    ? goodCopy

                    : partialCopy;

            feedback.className =

                result.total >= 67

                    ? "cm-demo-feedback visible good"

                    : "cm-demo-feedback visible partial";

            textarea.disabled = true;

            button.textContent =

                index === steps.length - 1

                    ? finishCopy

                    : nextCopy;


            updateProgress();

        }


        function resultSummary() {

            const title = finalPanel

                ?.querySelector("h2")

                ?.textContent

                ?.trim()

                || "ClassMirror";

            const score = scoreElement

                ?.textContent

                ?.trim()

                || "0";


            return [

                title,

                "Mirror Score: " + score + "/100",

                coverageElement

                    ?.parentElement

                    ?.textContent

                    ?.trim(),

                clarityElement

                    ?.parentElement

                    ?.textContent

                    ?.trim(),

                depthElement

                    ?.parentElement

                    ?.textContent

                    ?.trim(),

                "Lina: "

                    + (

                        questionScoreElements[0]

                            ?.textContent

                        || "0%"

                    ),

                "Samir: "

                    + (

                        questionScoreElements[1]

                            ?.textContent

                        || "0%"

                    ),

                "Maya: "

                    + (

                        questionScoreElements[2]

                            ?.textContent

                        || "0%"

                    )

            ]

                .filter(Boolean)

                .join("\n");

        }


        async function copyResult() {

            if (!copyResultButton) {

                return;

            }


            const summary = resultSummary();


            try {

                if (

                    navigator.clipboard

                    && window.isSecureContext

                ) {

                    await navigator.clipboard.writeText(

                        summary

                    );

                } else {

                    const temporaryField =

                        document.createElement(

                            "textarea"

                        );


                    temporaryField.value = summary;

                    temporaryField.setAttribute(

                        "readonly",

                        ""

                    );

                    temporaryField.style.position =

                        "fixed";

                    temporaryField.style.opacity =

                        "0";


                    document.body.appendChild(

                        temporaryField

                    );

                    temporaryField.select();

                    document.execCommand("copy");

                    temporaryField.remove();

                }


                copyResultButton.textContent =

                    copyResultButton.dataset

                        .copiedLabel;


                if (resultStatus) {

                    resultStatus.textContent =

                        copyResultButton.dataset

                            .copiedLabel;

                }


                window.setTimeout(function () {

                    copyResultButton.textContent =

                        copyResultButton.dataset

                            .copyLabel;

                }, 1600);

            } catch (error) {

                window.prompt(

                    copyResultButton.dataset

                        .copyLabel,

                    summary

                );

            }

        }


        function resetDemo() {

            scores.fill(null);

            currentIndex = 0;

            demoStarted = false;

            demoFinished = false;


            steps.forEach(function (step) {

                const textarea = step.querySelector(

                    ".cm-demo-textarea"

                );

                const feedback = step.querySelector(

                    ".cm-demo-feedback"

                );

                const button = step.querySelector(

                    ".cm-demo-check"

                );


                step.dataset.validated = "false";


                if (textarea) {

                    textarea.value = "";

                    textarea.disabled = false;

                }


                if (feedback) {

                    feedback.textContent = "";

                    feedback.className =

                        "cm-demo-feedback";

                }


                if (button) {

                    button.textContent = checkCopy;

                }


                updateAnswerState(step);

            });


            if (workspace) {

                workspace.style.display = "";

            }


            finalPanel?.classList.remove("visible");


            if (scoreElement) {

                scoreElement.textContent = "0";

            }


            if (scoreRing) {

                scoreRing.style.setProperty(

                    "--score-angle",

                    "0deg"

                );

                scoreRing.setAttribute(

                    "aria-valuenow",

                    "0"

                );

            }


            [

                coverageElement,

                clarityElement,

                depthElement

            ].forEach(function (element) {

                if (element) {

                    element.textContent = "0%";

                }

            });


            questionScoreElements.forEach(

                function (element) {

                    if (element) {

                        element.textContent = "0%";

                    }

                }

            );


            if (resultStatus) {

                resultStatus.textContent = "";

            }


            showStep(0);

        }


        steps.forEach(function (step, index) {

            const button = step.querySelector(

                ".cm-demo-check"

            );

            const textarea = step.querySelector(

                ".cm-demo-textarea"

            );


            step.dataset.validated = "false";


            button?.addEventListener(

                "click",

                function () {

                    validateStep(step, index);

                }

            );


            textarea?.addEventListener(

                "input",

                function () {

                    updateAnswerState(step);

                }

            );


            textarea?.addEventListener(

                "keydown",

                function (event) {

                    if (

                        event.ctrlKey

                        && event.key === "Enter"

                    ) {

                        event.preventDefault();

                        button?.click();

                    }

                }

            );


            updateAnswerState(step);

        });


        restartButton?.addEventListener(

            "click",

            resetDemo

        );


        copyResultButton?.addEventListener(

            "click",

            copyResult

        );


        printResultButton?.addEventListener(

            "click",

            function () {

                window.print();

            }

        );


        window.addEventListener(

            "beforeunload",

            function (event) {

                if (

                    !demoStarted

                    || demoFinished

                ) {

                    return;

                }


                event.preventDefault();

                event.returnValue =

                    root?.dataset.leaveWarning

                    || "";

            }

        );


        updateProgress();

        showStep(0);

    });

</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>