/* ═══════════════════════════════════════════════════════════════
   DEMO-QUIZ
   ═══════════════════════════════════════════════════════════════ */

.demoquiz { background: var(--surface-alt); }

.quiz-card {
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--border);
}

/* ── Auswahl ─────────────────────────────────────────────────── */
.quiz-pick { margin-bottom: var(--space-5); }

.quiz-label {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 1.1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.chip:hover { border-color: var(--accent); color: var(--accent-strong); }

.chip.is-active {
    background: var(--gradient);
    border-color: transparent;
    color: var(--white);
}

.quiz-hint {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

/* ── Spielansicht ────────────────────────────────────────────── */
.quiz-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}

.quiz-counter { color: var(--text-muted); }

.quiz-score {
    font-weight: 800;
    color: var(--accent-strong);
}

.quiz-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.quiz-progress > span {
    display: block;
    height: 100%;
    background: var(--gradient);
    transition: width var(--duration) var(--ease-out);
}

.quiz-question {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

.quiz-question:focus { outline: none; }

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.quiz-answer {
    display: block;
    width: 100%;
    padding: var(--space-4);
    text-align: left;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.quiz-answer:hover:not(:disabled) {
    border-color: var(--accent);
    transform: translateX(4px);
}

.quiz-answer:disabled { cursor: default; }

.quiz-answer.is-correct {
    border-color: var(--emerald);
    background: var(--emerald-light);
    color: #065F46;
}

.quiz-answer.is-wrong {
    border-color: var(--rose);
    background: var(--rose-light);
    color: #9F1239;
}

/* ── Erklärung ───────────────────────────────────────────────── */
.quiz-why {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    border-left: 4px solid var(--rose);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text);
}

.quiz-why.is-right { border-left-color: var(--emerald); }
.quiz-why strong { color: var(--accent-strong); }

.quiz-next {
    width: 100%;
    margin-top: var(--space-4);
}

/* ── Ergebnis ────────────────────────────────────────────────── */
.quiz-result { text-align: center; }

.quiz-stars {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    letter-spacing: 0.1em;
}

.quiz-stars span { color: var(--gray-300); }
.quiz-stars span.is-on { color: var(--amber); }

@media (prefers-reduced-motion: no-preference) {
    .quiz-stars span.is-on {
        animation: pop 500ms var(--ease-spring) backwards;
    }
    .quiz-stars span.is-on:nth-child(2) { animation-delay: 120ms; }
    .quiz-stars span.is-on:nth-child(3) { animation-delay: 240ms; }
}

@keyframes pop {
    from { transform: scale(0.2) rotate(-25deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.quiz-result-line {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.quiz-result-line strong { color: var(--accent-strong); }

.quiz-result-bar { margin-bottom: var(--space-4); }

.quiz-result-note {
    font-size: var(--text-sm);
    max-width: 44ch;
    margin-inline: auto;
    margin-bottom: var(--space-5);
}

.quiz-result-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

@media (min-width: 560px) {
    .quiz-result-cta { flex-direction: row; justify-content: center; }
}



/* ═══════════════════════════════════════════════════════════════
   LEXI-CHAT-DEMO
   Markup in includes/sections/demo_chat.php, Ablauf in chat-demo.js.

   Der Kasten ist ein Nachbau des Chats aus der App: lila Kopfleiste,
   XP-Banner, graue Lexi-Blasen mit Gesicht, lila Kind-Blasen, unten die
   echte Eingabeleiste mit Kamera, Mikrofon und Senden. Vorlage ist
   neue_screenshots/lerndex_lexi_chat_2.jpg.

   Deshalb greift er auf die --chat-*-Tokens zu und nicht auf --accent:
   die App sieht fuer Eltern und Kinder gleich aus, der Nachbau darf
   also im Kinder-Modus nicht nach Teal umkippen. Das ist die einzige
   bewusste Ausnahme von der Modus-Regel.

   Der Verlauf scrollt NICHT in sich. Ein scrollender Kasten mitten in
   der Seite faengt Mausrad und Wischgeste ab – man kommt dann nicht mehr
   weiter, ohne daneben zu zielen. Stattdessen reserviert chat-demo.js die
   volle Hoehe per min-height, bevor es die Nachrichten ausblendet: der
   Kasten steht von Anfang an in seiner Endgroesse da, es verschiebt sich
   nichts, und alles bleibt lesbar.
   ═══════════════════════════════════════════════════════════════ */
.demochat { background: var(--surface); }

/* ── Fachauswahl ueber dem Kasten ────────────────────────────── */
.chat-picker {
    max-width: 640px;
    margin: 0 auto var(--space-5);
    text-align: center;
}

.chat-picker-label {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}

.chat-picker .chip-row { justify-content: center; }

.chat-card {
    max-width: 640px;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}

/* ── Kopfleiste ──────────────────────────────────────────────── */
.chat-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--chat-brand);
    color: var(--white);
}

.chat-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--chat-brand-soft);
}

.chat-avatar img { width: 26px; height: auto; }

.chat-who {
    flex: 1;
    font-size: var(--text-xl);
    font-weight: 600;
}

/* Sagt vor der ersten Nachricht, dass hier kein echter Chat laeuft. */
.chat-tag {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--chat-brand);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ── XP-Banner ───────────────────────────────────────────────── */
.chat-xpbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--chat-brand-soft);
}

.chat-xpbar-flash { font-size: 1.1rem; line-height: 1; }

.chat-xpbar-body { flex: 1; min-width: 0; }

.chat-xpbar-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.chat-xpbar-left {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--chat-brand);
}

.chat-xpbar-count {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--chat-brand);
    opacity: 0.85;
}

.chat-xpbar-track {
    display: block;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--chat-brand-track);
    overflow: hidden;
}

.chat-xpbar-fill {
    display: block;
    height: 100%;
    background: var(--chat-brand);
    transition: width var(--duration) var(--ease-out);
}

/* ── Verlauf ─────────────────────────────────────────────────── */
.chat-stage { position: relative; }

.chat-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    list-style: none;
    background: var(--surface);
}

.chat-log[hidden] { display: none; }

/* Trenner wie das Datum in einem echten Chat, hier das Fach. */
.chat-day {
    align-self: center;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--chat-bubble);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* Eine Nachricht ist eine Spalte aus Zeile und optionaler Fussnote.
   Erst in .chat-line stehen Gesicht und Blase nebeneinander – das Gesicht
   soll an der Blase kleben, nicht an der Fussnote darunter. */
.chat-msg,
.chat-typing {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 92%;
}

.chat-msg[hidden],
.chat-typing[hidden] { display: none; }

.chat-line {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

.chat-bubble {
    padding: var(--space-3) var(--space-4);
    /* Groesser als der Fliesstext daneben: das hier liest ein Kind. */
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

.chat-face {
    display: grid;
    place-items: center;
    width: var(--chat-face);
    height: var(--chat-face);
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--chat-brand-soft);
}

.chat-face img { width: 22px; height: auto; }

/* Das Kind hat in der App keinen Bildavatar, sondern seinen Anfangsbuchstaben. */
.chat-face--kind {
    background: var(--chat-brand);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 700;
}

.chat-msg--lexi,
.chat-typing { align-self: flex-start; }

.chat-msg--lexi .chat-bubble,
.chat-typing .chat-bubble {
    border-radius: var(--chat-radius) var(--chat-radius)
                   var(--chat-radius) var(--chat-radius-tail);
    background: var(--chat-bubble);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.chat-msg--kind { align-self: flex-end; }

.chat-msg--kind .chat-bubble {
    border-radius: var(--chat-radius) var(--chat-radius)
                   var(--chat-radius-tail) var(--chat-radius);
    background: var(--chat-brand);
    color: var(--white);
}

/* Fussnote unter der letzten Blase. Eingerueckt um Gesicht plus Abstand,
   damit sie an der Blase haengt und nicht unter dem Avatar beginnt. */
.chat-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.chat-msg--lexi .chat-note {
    padding-left: calc(var(--chat-face) + var(--space-2));
}

.chat-note .icon { flex-shrink: 0; color: var(--accent); }

/* ── „Lexi denkt nach" ───────────────────────────────────────── */
.chat-typing .chat-bubble {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-muted);
}

.chat-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    border: 2px solid var(--chat-brand-track);
    border-top-color: var(--chat-brand);
}

/* ── +XP-Blase, die in der App nach jeder Nachricht hochsteigt ── */
.chat-xp-pop {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--chat-brand);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: 700;
    box-shadow: var(--shadow-hover);
    pointer-events: none;
}

.chat-xp-pop[hidden] { display: none; }

/* ── Eingabeleiste (Attrappe) ────────────────────────────────── */
.chat-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* Auf schmalen Geraeten kleiner: sonst bleibt vom Eingabefeld daneben
   kaum etwas uebrig. Ab 560px stehen sie in App-Groesse da. */
.chat-tool {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--chat-radius-btn);
}

.chat-tool--ghost {
    background: var(--chat-brand-soft);
    color: var(--chat-brand);
}

.chat-tool--solid {
    border-radius: var(--radius-pill);
    background: var(--chat-brand);
    color: var(--white);
}

.chat-input-field {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--chat-bubble);
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-send {
    display: grid;
    place-items: center;
    width: 44px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--chat-radius-btn);
    background: var(--chat-brand);
    color: var(--white);
    /* Nicht bedienbar – hier laeuft kein echter Chat. */
    cursor: not-allowed;
}

.chat-disclaimer {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.chat-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
    background: var(--surface-alt);
}

.chat-actions .btn { justify-content: center; }

@media (min-width: 560px) {
    .chat-log { padding: var(--space-5); }
    .chat-msg,
    .chat-typing { max-width: 82%; }
    .chat-tool { width: 38px; height: 38px; }
    .chat-input,
    .chat-disclaimer { padding-inline: var(--space-5); }
    .chat-actions {
        flex-direction: row;
        justify-content: flex-end;
        padding-inline: var(--space-5);
    }
}

/* Bewegung nur, wenn sie erwuenscht ist. Ohne diesen Block bleiben die
   Blasen einfach ohne Einflug stehen und der Kreis dreht sich nicht –
   chat-demo.js laeuft bei reduce ohnehin nicht an.

   Zwei Entscheidungen, die beide aus einem Fehler stammen:

   1. Der Einflug haengt an .is-in, nicht an .chat-msg selbst. Eine Animation
      direkt auf der Blase startet schon beim Laden und laeuft ab, bevor die
      Blase ueberhaupt eingeblendet wird – dann passiert spaeter nichts mehr.
      Die Klasse setzt chat-demo.js in dem Moment, in dem die Blase erscheint.

   2. Animiert wird ausschliesslich transform, ausdruecklich NICHT opacity.
      Der Browser haelt Animationen in einem Tab an, der nicht gerendert wird,
      die setTimeout-Kette in chat-demo.js laeuft aber weiter. Wer waehrend des
      Ablaufs den Tab wechselt, kaeme sonst zu Blasen zurueck, die bei
      opacity 0 stehengeblieben sind. Bleibt eine transform-Animation hier
      haengen, sitzt die Blase 8px zu tief – lesbar ist sie immer. */
@media (prefers-reduced-motion: no-preference) {
    .chat-msg.is-in {
        animation: chat-in var(--duration) var(--ease-out);
    }

    .chat-spinner {
        animation: chat-spin 900ms linear infinite;
    }

    /* Die +XP-Blase steigt auf und verblasst – wie das Overlay in der App
       (xp_gain_overlay.dart). Hier darf opacity animiert werden: sie ist
       reine Deko und wird danach ohnehin wieder auf hidden gesetzt. */
    .chat-xp-pop {
        animation: chat-xp 1200ms var(--ease-out) forwards;
    }

    @keyframes chat-in {
        from { transform: translateY(8px); }
        to   { transform: none; }
    }

    @keyframes chat-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes chat-xp {
        0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
        20%  { opacity: 1; transform: none; }
        70%  { opacity: 1; transform: none; }
        100% { opacity: 0; transform: translateY(-22px); }
    }
}