/* ==========================================================================
   Quiz-Design v2 (qz.css)
   Baut auf ui-base.css (Tokens, Animationen) und ui-components.css (ui-btn …) auf.
   ========================================================================== */

/* ---------- Gruppen-Akzente (Abschnitt 2.4) ---------- */
.qz--grp-frage    { --ui-accent: var(--ui-orange); --ui-accent-deep: var(--ui-orange-deep); --ui-accent-soft: var(--ui-orange-soft); }
.qz--grp-zuordnen { --ui-accent: var(--ui-grape);  --ui-accent-deep: var(--ui-grape-deep);  --ui-accent-soft: var(--ui-grape-soft); }
.qz--grp-luecke   { --ui-accent: var(--ui-mint);   --ui-accent-deep: var(--ui-mint-deep);   --ui-accent-soft: var(--ui-mint-soft); }
.qz--grp-abgabe   { --ui-accent: var(--ui-brand);  --ui-accent-deep: var(--ui-brand-deep);  --ui-accent-soft: var(--ui-brand-soft); }
.qz--grp-spiel    { --ui-accent: var(--ui-coral);  --ui-accent-deep: var(--ui-coral-deep);  --ui-accent-soft: var(--ui-coral-soft); }
.qz--grp-ki       { --ui-accent: var(--ui-sun);    --ui-accent-deep: var(--ui-sun-deep);    --ui-accent-soft: var(--ui-sun-soft); }

/* ---------- Hülle ---------- */
.qz-admin { margin: 0 1.25rem 1.25rem; }
.qz {
  display: grid;
  background: var(--ui-card);
  color: var(--ui-ink);
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: var(--ui-shadow-card);
  overflow: hidden;
  font: 500 1.06rem/1.55 var(--ui-font-body);
  text-align: left;
  animation: ui-pop-in .5s var(--ui-spring) both;
}
@media (min-width: 744px) { .qz { font-size: 1.1rem; } }

.qz-head {
  display: grid;
  gap: .35rem;
  padding: 1.1rem 1.25rem 1rem;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ui-accent) 22%, transparent) 1.5px, transparent 2px) 0 0 / 16px 16px,
    var(--ui-accent-soft);
  border-bottom: 2px solid color-mix(in srgb, var(--ui-accent) 25%, var(--ui-line));
}
.qz-head-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.qz-type {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .7rem .2rem .45rem;
  border-radius: var(--ui-r-pill);
  background: var(--ui-card);
  color: var(--ui-accent-deep);
  font: 800 .8rem var(--ui-font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ui-accent) 30%, var(--ui-line));
}
.qz-emo { font-size: 1.05rem; }
.qz-title { margin: 0; font: 800 1.5rem/1.15 var(--ui-font-display); text-wrap: balance; color: var(--ui-ink); }
.qz-task { color: var(--ui-ink-soft); }
.qz-task > :last-child { margin-bottom: 0; }
.qz-hint { margin: 0; color: var(--ui-ink-soft); font-weight: 700; }
.qz-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.qz-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .65rem;
  border-radius: var(--ui-r-pill);
  background: var(--ui-card);
  border: 1.5px solid var(--ui-line);
  font: 800 .92rem var(--ui-font-display);
  font-variant-numeric: tabular-nums;
}
.qz-streak { background: var(--ui-grape); color: #fff; border-color: var(--ui-grape-deep); box-shadow: 0 3px 0 var(--ui-grape-deep); }
.qz-streak.is-enter { animation: ui-pop-in .45s var(--ui-spring); }
.qz-pill--done { background: var(--ui-mint); color: #fff; border-color: var(--ui-mint-deep); }
.qz-counter { font: 700 .92rem var(--ui-font-display); color: var(--ui-ink-soft); font-variant-numeric: tabular-nums; }

.qz-progress { height: .75rem; margin: 1rem 1.25rem 0; border-radius: var(--ui-r-pill); background: var(--ui-paper); border: 2px solid var(--ui-line); overflow: hidden; }
.qz-progress-bar { height: 100%; width: 0; border-radius: var(--ui-r-pill); background: linear-gradient(90deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 70%, var(--ui-sun))); transition: width .6s var(--ui-spring); }

.qz-body { display: grid; gap: 1rem; padding: 1.2rem 1.25rem 1.3rem; }
.qz-stage { display: grid; gap: 1rem; }

/* ---------- Frage & Antwortoptionen ---------- */
.qz-question { display: grid; gap: 1rem; }
.qz-question.is-in { animation: ui-slide-in .38s var(--ui-ease-out); }
.qz-question.is-out { animation: ui-slide-out .28s var(--ui-ease-out) forwards; }
.qz-question-text { margin: 0; font: 700 1.25rem/1.35 var(--ui-font-display); text-wrap: balance; }
.qz-question-img { max-width: min(100%, 22rem); max-height: 16rem; border-radius: 16px; border: 2px solid var(--ui-line); object-fit: contain; background: var(--ui-paper); }
.qz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .75rem; }
.qz-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.6rem;
  padding: .7rem 1rem;
  text-align: left;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-btn);
  background: var(--ui-card);
  color: var(--ui-ink);
  box-shadow: 0 var(--ui-edge) 0 var(--ui-line);
  font: 800 1.02rem/1.3 var(--ui-font-body);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s, background .15s, opacity .2s;
  animation: ui-rise .4s var(--ui-spring) both;
}
.qz-options > :nth-child(2) { animation-delay: .05s; }
.qz-options > :nth-child(3) { animation-delay: .10s; }
.qz-options > :nth-child(4) { animation-delay: .15s; }
.qz-options > :nth-child(5) { animation-delay: .20s; }
.qz-options > :nth-child(6) { animation-delay: .25s; }
.qz-options > :nth-child(7) { animation-delay: .30s; }
.qz-options > :nth-child(8) { animation-delay: .35s; }
.qz-option:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.qz-option:disabled { cursor: default; }
.qz-option-key { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 11px; background: var(--ui-accent-soft); color: var(--ui-accent-deep); font: 800 1.05rem var(--ui-font-display); }
.qz-option-text { min-width: 0; overflow-wrap: anywhere; }
.qz-option .qz-tick { margin-left: auto; flex: none; width: 1.8rem; height: 1.8rem; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: ui-draw .45s .1s var(--ui-ease-out) forwards; }
.qz-option.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: 0 var(--ui-edge) 0 var(--ui-accent-deep); }
.qz-option.is-selected .qz-option-key { background: var(--ui-accent); color: #fff; }
.qz-option.is-correct { background: var(--ui-mint-soft); border-color: var(--ui-mint); box-shadow: 0 var(--ui-edge) 0 var(--ui-mint-deep); animation: ui-bounce .55s var(--ui-spring); }
.qz-option.is-correct .qz-option-key { background: var(--ui-mint); color: #fff; }
.qz-option.is-correct .qz-tick { stroke: var(--ui-mint-deep); }
.qz-option.is-wrong { background: var(--ui-coral-soft); border-color: var(--ui-coral); box-shadow: 0 var(--ui-edge) 0 var(--ui-coral-deep); animation: ui-shake .45s ease; }
.qz-option.is-wrong .qz-option-key { background: var(--ui-coral); color: #fff; }
.qz-option.is-wrong .qz-tick { stroke: var(--ui-coral-deep); }
.qz-option.is-reveal { border-color: var(--ui-mint); border-style: dashed; background: var(--ui-mint-soft); animation: ui-glow 1.2s ease-in-out 2; }
.qz-option.is-dim { opacity: .5; }
.qz-options--tf .qz-option { justify-content: center; min-height: 4.2rem; font-size: 1.15rem; }
.qz-options--tf .qz-option-key { background: none; font-size: 1.6rem; width: auto; }

/* Lücke im Satz (Lückentext-Auswahl) */
.qz-gap-slot {
  display: inline-block;
  min-width: 4.5em;
  padding: 0 .5em;
  border-radius: 10px;
  border: 2px dashed var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-deep);
  text-align: center;
  line-height: 1.5;
}
.qz-gap-slot.is-correct { border-style: solid; border-color: var(--ui-mint); background: var(--ui-mint-soft); color: var(--ui-mint-deep); animation: ui-bounce .5s var(--ui-spring); }
.qz-gap-slot.is-wrong { border-style: solid; border-color: var(--ui-coral); background: var(--ui-coral-soft); color: var(--ui-coral-deep); animation: ui-shake .45s ease; }

/* ---------- Rückmeldung ---------- */
.qz-feedback { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .85rem 1rem; border-radius: var(--ui-r-panel); border: 2px solid transparent; animation: ui-rise .4s var(--ui-spring); }
.qz-feedback.is-correct { background: var(--ui-mint-soft); border-color: color-mix(in srgb, var(--ui-mint) 45%, transparent); }
.qz-feedback.is-wrong { background: var(--ui-coral-soft); border-color: color-mix(in srgb, var(--ui-coral) 45%, transparent); }
.qz-feedback.is-info { background: var(--ui-paper); border-color: var(--ui-line); }
.qz-feedback-face { font-size: 2.1rem; line-height: 1; animation: ui-wiggle .8s ease .1s; }
.qz-feedback-text { flex: 1 1 14rem; min-width: 0; }
.qz-feedback-title { margin: 0; font: 800 1.15rem var(--ui-font-display); }
.qz-feedback.is-correct .qz-feedback-title { color: var(--ui-mint-deep); }
.qz-feedback.is-wrong .qz-feedback-title { color: var(--ui-coral-deep); }
.qz-feedback-explain { margin: .1rem 0 0; font-size: .95rem; }
.qz-feedback-explain:empty { display: none; }
.qz-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; color: var(--ui-ink-soft); }

/* ---------- Hinweis-Raten ---------- */
.qz-hints { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.qz-hint-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .7rem .9rem; border-radius: 4px var(--ui-r-panel) var(--ui-r-panel) var(--ui-r-panel); background: var(--ui-card); border: 2px solid var(--ui-line); border-left: 5px solid var(--ui-accent); animation: ui-rise .4s var(--ui-spring); }
.qz-hint-nr { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent-deep); font: 800 .95rem var(--ui-font-display); }
.qz-guess { display: flex; gap: .6rem; flex-wrap: wrap; }
.qz-guess .ui-input { flex: 1 1 12rem; width: auto; }
.qz-guess-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.qz-guess-feedback { margin: 0; color: var(--ui-coral-deep); font-weight: 800; }
.qz-guess-feedback:empty { display: none; }

/* ---------- Dialog ---------- */
.qz-chat { display: flex; flex-direction: column; gap: .6rem; max-height: 24rem; min-height: 8rem; overflow-y: auto; padding: .9rem; border-radius: var(--ui-r-panel); background: var(--ui-paper); border: 2px solid var(--ui-line); scroll-behavior: smooth; }
.qz-bubble { max-width: 82%; padding: .6rem .9rem; border-radius: 18px; background: var(--ui-card); border: 2px solid var(--ui-line); animation: ui-rise .35s var(--ui-spring); overflow-wrap: anywhere; }
.qz-bubble--partner { align-self: flex-start; border-bottom-left-radius: 4px; border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-line)); }
.qz-bubble--me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--ui-brand-soft); border-color: color-mix(in srgb, var(--ui-brand) 35%, var(--ui-line)); }
.qz-bubble--me.is-correct { background: var(--ui-mint-soft); border-color: var(--ui-mint); }
.qz-bubble--me.is-wrong { background: var(--ui-coral-soft); border-color: var(--ui-coral); }
.qz-bubble--note { align-self: center; max-width: 92%; padding: .3rem .8rem; border-radius: var(--ui-r-pill); border-style: dashed; font-size: .9rem; font-weight: 700; color: var(--ui-ink-soft); }
.qz-typing { align-self: flex-start; display: inline-flex; gap: .3rem; padding: .7rem .9rem; border-radius: 18px 18px 18px 4px; background: var(--ui-card); border: 2px solid var(--ui-line); }
.qz-typing span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ui-line-deep); animation: ui-skeleton 1s ease-in-out infinite; }
.qz-typing span:nth-child(2) { animation-delay: .15s; }
.qz-typing span:nth-child(3) { animation-delay: .3s; }

/* ---------- Ergebnis & bereits gespielt ---------- */
.qz-result { display: grid; justify-items: center; gap: .8rem; padding: .25rem 0; text-align: center; animation: ui-pop-in .5s var(--ui-spring); }
.qz-record { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; border-radius: var(--ui-r-pill); background: var(--ui-sun); font: 800 1rem var(--ui-font-display); box-shadow: 0 4px 0 var(--ui-sun-deep); animation: ui-tada 1s ease .9s both; }
.qz-result-title { margin: 0; font: 800 1.9rem/1.1 var(--ui-font-display); }
.qz-stars { display: flex; gap: .4rem; font-size: 3rem; line-height: 1; }
.qz-star { opacity: 0; transform: scale(.2); }
.qz-star.is-on { animation: ui-star-pop .55s var(--ui-spring) forwards; }
.qz-star.is-off { filter: grayscale(1); animation: ui-star-ghost .4s ease forwards; }
.qz-star:nth-child(1) { animation-delay: .25s; }
.qz-star:nth-child(2) { animation-delay: .53s; }
.qz-star:nth-child(3) { animation-delay: .81s; }
.qz-stars--static .qz-star { opacity: 1; transform: none; animation: none; }
.qz-stars--static .qz-star.is-off { opacity: .28; }
.qz-result-score { margin: 0; font: 800 1.5rem var(--ui-font-display); font-variant-numeric: tabular-nums; }
.qz-result-score small { font-size: .98rem; color: var(--ui-ink-soft); font-weight: 700; }
.qz-result-best { margin: 0; color: var(--ui-ink-soft); font-size: .95rem; }
.qz-played { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qz-played .qz-stars { font-size: 2rem; }
.qz-played-text { margin: 0; font-weight: 700; }
.qz-played .qz-actions { justify-content: flex-end; }

/* ---------- Hover nur mit Maus ---------- */
@media (hover: hover) {
  .qz-option:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ui-line-deep); border-color: var(--ui-accent); }
  .qz-option.is-selected:hover:not(:disabled) { box-shadow: 0 7px 0 var(--ui-accent-deep); }
}

/* Ratefeld (Hinweis-Raten): Ergebnis direkt am Feld sichtbar */
.qz .ui-input.is-correct { border-color: var(--ui-mint); background: var(--ui-mint-soft); }
.qz .ui-input.is-wrong { border-color: var(--ui-coral); background: var(--ui-coral-soft); animation: ui-shake .45s ease; }

/* ==========================================================================
   Welle C: Abgaben (Freitext, Bild, Datei, Externe Aufgabe) und Lückentext
   ========================================================================== */
.qz-pill--wait { background: var(--ui-sun-soft); border-color: color-mix(in srgb, var(--ui-sun) 60%, transparent); color: #8a6200; }
.qz-aufgabe { padding: .9rem 1rem; border-radius: var(--ui-r-panel); background: var(--ui-accent-soft); border: 2px solid color-mix(in srgb, var(--ui-accent) 25%, var(--ui-line)); font-weight: 600; }

/* Abgabe-Schritte */
.qz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.qz-steps li { position: relative; display: grid; justify-items: center; gap: .3rem; text-align: center; font: 800 .9rem/1.2 var(--ui-font-display); color: var(--ui-ink-soft); }
.qz-steps li + li::before { content: ""; position: absolute; top: 1.2rem; right: 50%; width: 100%; height: .35rem; border-radius: var(--ui-r-pill); background: var(--ui-line); z-index: 0; transform: translateY(-50%); }
.qz-steps li.is-done + li::before { background: var(--ui-mint); }
.qz-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ui-card); border: 3px solid var(--ui-line-deep); box-shadow: 0 3px 0 var(--ui-line-deep); font: 800 1rem var(--ui-font-display); color: var(--ui-ink); }
.qz-steps li.is-done { color: var(--ui-ink); }
.qz-steps li.is-done .qz-step-dot { background: var(--ui-mint); border-color: var(--ui-mint-deep); box-shadow: 0 3px 0 var(--ui-mint-deep); color: #fff; }
.qz-steps li.is-wait .qz-step-dot { background: var(--ui-sun-soft); border-color: var(--ui-sun); box-shadow: 0 3px 0 var(--ui-sun-deep); animation: ui-float 3s ease-in-out infinite; }

.qz-bewertung { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.qz-bewertung .qz-stars { font-size: 2.2rem; }
.qz-teacher { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.qz-teacher-avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ui-brand-soft); border: 2px solid var(--ui-line); font-size: 1.4rem; }
.qz-teacher .qz-bubble { max-width: none; margin: 0; }
.qz-bubble-meta { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 700; color: var(--ui-ink-soft); }
.qz-antwort { display: grid; gap: .35rem; }
.qz-antwort .ui-well { overflow-wrap: anywhere; }

/* Freitext */
.qz-freitext .ui-textarea { min-height: 10rem; }
.qz-freitext-meta { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }

/* Upload */
.qz-upload { display: grid; gap: 1rem; }
.qz-drop { position: relative; min-height: 11rem; align-content: center; transition: border-color .15s, background .15s; }
.qz-drop:focus-within { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.qz-drop.is-chosen { border-style: solid; border-color: var(--ui-mint); background: var(--ui-mint-soft); }
.qz-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.qz-drop-emo { font-size: 2.6rem; line-height: 1; }
.qz-drop-preview { max-width: min(100%, 16rem); max-height: 12rem; border-radius: 14px; border: 2px solid var(--ui-line); object-fit: contain; }
.qz-abgabe-bild { display: grid; gap: .4rem; justify-items: center; margin: 0; }
.qz-abgabe-bild img { max-width: 100%; max-height: 24rem; border-radius: var(--ui-r-panel); border: 2px solid var(--ui-line); box-shadow: 0 5px 0 var(--ui-line); object-fit: contain; background: var(--ui-paper); }
.qz-datei-link { display: flex; align-items: center; gap: .8rem; min-height: 3.6rem; padding: .7rem 1rem; border-radius: var(--ui-r-btn); background: var(--ui-paper); border: 2px solid var(--ui-line); box-shadow: 0 4px 0 var(--ui-line); color: var(--ui-ink); text-decoration: none; }
.qz-datei-link small { display: block; }
.qz-datei-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--ui-coral-soft); font-size: 1.4rem; flex: none; }

/* Externe Aufgabe */
.qz-ext-schritte { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.qz-ext-schritte li { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-weight: 700; }

/* Lückentext */
.qz-wordbank { display: grid; gap: .5rem; padding: .9rem; border-radius: var(--ui-r-panel); background: var(--ui-paper); border: 2.5px dashed var(--ui-line-deep); }
.qz-wordbank-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.qz-word { min-height: 2.75rem; padding: .3rem .9rem; border: 2px solid var(--ui-line); border-radius: var(--ui-r-chip); background: var(--ui-card); box-shadow: 0 4px 0 var(--ui-line-deep); color: var(--ui-ink); font: 800 1rem var(--ui-font-body); cursor: pointer; transition: transform .12s, opacity .2s; }
.qz-word:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.qz-word.is-used { opacity: .4; text-decoration: line-through; }
.qz-cloze { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.qz-cloze-item { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .8rem .9rem; border-radius: var(--ui-r-panel); background: var(--ui-card); border: 2px solid var(--ui-line); }
.qz-cloze-nr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent-deep); font: 800 .95rem var(--ui-font-display); }
.qz-cloze-text { margin: 0; line-height: 2.4; font-weight: 600; }
.qz-gap {
  width: 9em;
  max-width: 100%;
  min-height: 2.75rem;
  margin: 0 .3em;
  padding: .1rem .6rem;
  border: 0;
  border-bottom: 3px solid var(--ui-accent);
  border-radius: 10px 10px 4px 4px;
  background: var(--ui-accent-soft);
  color: var(--ui-ink);
  font: 800 max(16px, 1rem) var(--ui-font-body);
  text-align: center;
  vertical-align: baseline;
}
.qz-gap:focus { outline: none; background: var(--ui-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 35%, transparent); }
.qz-cloze-loesung { margin: .2rem 0 0; font-size: .92rem; color: var(--ui-mint-deep); }
.qz-cloze--review .qz-cloze-text { line-height: 2; }
.qz-result .qz-cloze { width: 100%; text-align: left; }

@media (hover: hover) {
  .qz-word:hover { transform: translateY(-2px); border-color: var(--ui-accent); }
  .qz-datei-link:hover { border-color: var(--ui-brand); }
}

/* ==========================================================================
   Welle B: Zuordnen (Kategorien, Sortieren, Paare, Satzbausteine)
   Ziehen/Antippen: q_generisch/static/q_generisch/js/qz-dnd.js
   ========================================================================== */
.qz-board { display: grid; gap: 1rem; }
.qz-bank {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: .6rem;
  min-height: 4.5rem;
  padding: .9rem;
  border: 2.5px dashed var(--ui-line-deep);
  border-radius: var(--ui-r-panel);
  background: var(--ui-paper);
  transition: background .2s, border-color .2s, transform .25s var(--ui-spring);
}
.qz-bank-empty { margin: auto; color: var(--ui-ink-soft); font-weight: 700; font-size: .95rem; text-align: center; }
.qz-bank:has(.qz-chip) .qz-bank-empty { display: none; }
.qz-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .8rem; }
.qz-zone {
  display: grid;
  align-content: start;
  gap: .6rem;
  min-height: 9rem;
  padding: .8rem;
  border: 2.5px solid var(--ui-line);
  border-radius: var(--ui-r-panel);
  background: var(--ui-card);
  transition: background .2s, border-color .2s, transform .25s var(--ui-spring);
}
.qz-zone-title { display: flex; align-items: center; gap: .45rem; margin: 0; font: 800 1.15rem/1.2 var(--ui-font-display); }
.qz-zone-title .qz-emo { font-size: 1.35rem; }
.qz-zone-items { display: flex; flex-wrap: wrap; gap: .6rem; min-height: 2.75rem; }
.qz-zone-hint { display: none; margin: 0; font-size: .85rem; font-weight: 700; color: var(--ui-accent-deep); }
.qz-zone.is-target .qz-zone-hint { display: block; }
:is(.qz-zone, .qz-bank, .qz-slot, .qz-satz).is-over { background: var(--ui-accent-soft); border-color: var(--ui-accent); transform: scale(1.02); }
:is(.qz-zone, .qz-bank, .qz-slot, .qz-satz).is-target { border-style: dashed; border-color: var(--ui-accent); cursor: pointer; animation: ui-breathe 1.4s ease-in-out infinite; }
:is(.qz-zone, .qz-bank, .qz-slot, .qz-satz):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }

/* Karte: ohne .qz-Vorfahre gestylt, weil der fliegende Klon an <body> hängt */
.qz-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  max-width: 100%;
  padding: .45rem .85rem;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-chip);
  background: var(--ui-card);
  box-shadow: 0 4px 0 var(--ui-line-deep);
  color: var(--ui-ink);
  font: 800 1rem/1.25 var(--ui-font-body);
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, opacity .15s;
}
.qz-chip img { display: block; max-width: 8rem; max-height: 4.5rem; border-radius: 8px; pointer-events: none; }
.qz-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ui-line-deep); }
.qz-chip.is-picked { border-color: var(--ui-accent); background: var(--ui-accent-soft); transform: translateY(-3px) rotate(-2deg); box-shadow: 0 7px 0 var(--ui-accent-deep); }
.qz-chip.is-ghost { opacity: .3; }
.qz-chip.is-flying {
  position: fixed;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  transform: rotate(-4deg) scale(1.08);
  border-color: var(--ui-accent);
  box-shadow: 0 18px 30px -12px rgba(10, 50, 100, .45);
}
.qz-chip--intro { animation: ui-rise .4s var(--ui-spring) calc(var(--i, 0) * 50ms) both; }
.qz-chip.is-landed { animation: ui-land .4s var(--ui-spring); }
.qz-chip.is-correct { background: var(--ui-mint-soft); border-color: var(--ui-mint); box-shadow: 0 4px 0 var(--ui-mint-deep); animation: ui-bounce .5s var(--ui-spring) both; }
.qz-chip.is-wrong { background: var(--ui-coral-soft); border-color: var(--ui-coral); box-shadow: 0 4px 0 var(--ui-coral-deep); animation: ui-shake .45s ease both; }
.qz-chip:disabled { cursor: default; opacity: 1; }
.qz-chip-hint { font-size: .82rem; font-weight: 700; color: var(--ui-ink-soft); }

/* Sortieren: Liste mit Griff (Ziehen) und ▲/▼; außerhalb des Griffs darf die Seite scrollen */
.qz-sortlist { display: grid; gap: .55rem; counter-reset: qz-sort; }
.qz-sortlist .qz-chip { display: flex; width: 100%; padding: .4rem .5rem .4rem .4rem; touch-action: pan-y; counter-increment: qz-sort; }
.qz-sortlist .qz-chip::before {
  content: counter(qz-sort);
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-deep);
  font: 800 .95rem var(--ui-font-display);
}
.qz-sortlist .qz-chip.is-flying::before { content: "⠿"; }
.qz-chip-grip { display: grid; place-items: center; flex: none; width: 2.75rem; align-self: stretch; color: var(--ui-ink-soft); font-size: 1.3rem; cursor: grab; touch-action: none; }
.qz-chip-text { flex: 1; min-width: 0; }
.qz-sort-moves { display: flex; gap: .3rem; flex: none; }
.qz-sort-move {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
}
.qz-sort-move:disabled { opacity: .35; cursor: default; }
.qz-sort-move:active:not(:disabled) { transform: translateY(2px); }

/* Paare: links feste Karte, rechts ein Ablagefeld für genau eine Karte */
.qz-pairs { display: grid; gap: .6rem; }
.qz-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.qz-pair-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .5rem .8rem;
  border-radius: var(--ui-r-chip);
  background: var(--ui-accent-soft);
  font-weight: 800;
}
.qz-pair-left img { max-width: 8rem; max-height: 4.5rem; border-radius: 8px; }
.qz-pair-link { font-size: 1.2rem; transition: transform .3s var(--ui-spring); }
.qz-pair.is-filled .qz-pair-link { transform: scale(1.25); }
.qz-slot {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .3rem;
  border: 2.5px dashed var(--ui-line-deep);
  border-radius: calc(var(--ui-r-chip) + 4px);
  background: var(--ui-paper);
  transition: background .2s, border-color .2s, transform .25s var(--ui-spring);
}
.qz-slot .qz-chip { width: 100%; }
.qz-slot-empty { margin: 0 auto; color: var(--ui-ink-soft); font-size: .85rem; font-weight: 700; }
.qz-slot:has(.qz-chip) { border-style: solid; border-color: var(--ui-line); }
.qz-slot:has(.qz-chip) .qz-slot-empty { display: none; }

/* Satzbausteine: der Satz wächst von links nach rechts */
.qz-satz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-height: 4.5rem;
  padding: .8rem;
  border: 2.5px solid var(--ui-line);
  border-bottom-width: 5px;
  border-radius: var(--ui-r-panel);
  background: var(--ui-card);
  transition: background .2s, border-color .2s, transform .25s var(--ui-spring);
}
.qz-satz-items { display: contents; }
.qz-satz-leer { margin: 0; color: var(--ui-ink-soft); font-weight: 700; font-size: .95rem; }
.qz-satz:has(.qz-chip) .qz-satz-leer { display: none; }
.qz-check { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
.qz-check-hint { margin: 0; color: var(--ui-ink-soft); font-weight: 700; font-size: .92rem; }
.qz-loesung { margin: 0; font-weight: 700; }

/* Auswertung (Ergebniskarte) */
.qz-review { display: grid; gap: .8rem; width: 100%; text-align: left; }
.qz-review .qz-chip { cursor: default; touch-action: auto; user-select: text; -webkit-user-select: text; animation: none; }
.qz-review .qz-zone { min-height: 0; }
.qz-review-title { margin: .4rem 0 0; font: 800 1.05rem var(--ui-font-display); }
.qz-review .qz-sortlist .qz-chip { touch-action: auto; }
.qz-review .qz-pair .qz-chip { flex-wrap: wrap; row-gap: .1rem; }
.qz-review .qz-pair .qz-chip-hint { flex-basis: 100%; }



/* Denkformate: Begriffsgruppen, Ursache/Folge und lesbarer Quellabsatz. */
.qz-options--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-options--raster .qz-option { min-height: calc(var(--ui-gap) * 3); padding: calc(var(--ui-gap) / 2); flex-direction: column; overflow-wrap: anywhere; }
.qz-options--raster .qz-option-text { text-align: center; }
.qz-options--raster .qz-tick { position: absolute; inset-inline-end: calc(var(--ui-gap) / 2); inset-block-start: calc(var(--ui-gap) / 2); width: var(--ui-gap); height: var(--ui-gap); }
.qz-option.is-gruppe { opacity: 1; }
.qz-option.is-gruppe:not(.is-wrong) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.qz-gruppe-label { padding: var(--ui-gap); border-radius: var(--ui-r-chip); background: var(--ui-accent-soft); font-weight: 800; }
.qz-kausal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ui-gap); }
.qz-kausal-karte { min-width: 0; padding: var(--ui-gap); border: solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-card); overflow-wrap: anywhere; }
.qz-kausal-karte p { margin: var(--ui-gap) 0 0; white-space: pre-line; }
.qz-kausal-karte.is-correct { border-color: var(--ui-mint); background: var(--ui-mint-soft); }
.qz-kausal-karte.is-wrong { border-color: var(--ui-coral); background: var(--ui-coral-soft); }
.qz-kausal-korrektur { color: var(--ui-ink); font-weight: 800; }
.qz-kausal-pfeil { font: 800 calc(var(--ui-gap) * 2) var(--ui-font-display); }
.qz-absatz { width: 100%; max-width: 65ch; padding: var(--ui-gap-lg); border: solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-card); font-family: var(--ui-font-body); line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.qz[data-qz-type="kernaussage"] .qz-option { flex-wrap: wrap; }
.qz[data-qz-type="kernaussage"] .qz-option-text { flex: 1; }
.qz-distraktor-etikett { flex-basis: 100%; text-align: center; padding: calc(var(--ui-gap) / 4) calc(var(--ui-gap) / 2); border-radius: var(--ui-r-pill); background: var(--ui-coral-soft); color: var(--ui-coral-deep); }
.qz[data-qz-type="ausreisser"] .qz-feedback-explain,
.qz[data-qz-type="ursache-wirkung"] .qz-feedback-explain,
.qz[data-qz-type="kernaussage"] .qz-feedback-explain,
.qz[data-qz-type="laut-text"] .qz-feedback-explain,
.qz[data-qz-type="beleg"] .qz-feedback-explain,
.qz[data-qz-type="antwort-begruendung"] .qz-feedback-explain,
.qz[data-qz-type="konzept-detektiv"] .qz-feedback-explain,
.qz[data-qz-type="wer-hat-recht"] .qz-feedback-explain,
.qz[data-qz-type="vorhersage"] .qz-feedback-explain,
.qz[data-qz-type="regel-anwenden"] .qz-feedback-explain,
.qz[data-qz-type="fallaufgabe"] .qz-feedback-explain { white-space: pre-line; }
@media (max-width: 600px) {
  .qz-kausal { grid-template-columns: minmax(0, 1fr); }
  .qz-kausal-pfeil { justify-self: center; transform: rotate(90deg); }
}

/* Rateschutz (q_generisch/rateschutz.py): Zu-schnell-Hinweis, Lesephase, Sicherheitsabfrage, Textverweis, Sperre */
.qz-zu-schnell { margin: 0; padding: calc(var(--ui-gap) / 2) var(--ui-gap); border-radius: var(--ui-r-chip); background: var(--ui-sun-soft); font-weight: 800; animation: ui-rise .35s var(--ui-spring); }
.qz-lesen { justify-self: start; }
.qz-sicherheit { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--ui-gap) / 2); padding: var(--ui-gap); border-radius: var(--ui-r-panel); border: 2px solid var(--ui-line); background: var(--ui-paper); animation: ui-rise .35s var(--ui-spring); }
.qz-sicherheit-frage { flex-basis: 100%; margin: 0; font: 800 1.02rem var(--ui-font-display); }
.qz-sicherheit-ergebnis { margin: calc(var(--ui-gap) / 3) 0 0; font-weight: 700; color: var(--ui-ink-soft); }
.qz-textverweis { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--ui-gap) / 2); margin-top: calc(var(--ui-gap) / 3); }
.qz-textverweis p { flex: 1 1 14rem; margin: 0; font-weight: 700; }
.qz-result-wertung { margin: 0; padding: calc(var(--ui-gap) / 3) var(--ui-gap); border-radius: var(--ui-r-pill); background: var(--ui-sun-soft); font-size: .92rem; font-weight: 700; }
.qz-textverweis-ende { margin: 0; color: var(--ui-ink-soft); font-weight: 700; }
.qz-sperre { width: 100%; text-align: left; }

/* Lese-Quiztypen: Stimmt das laut Text?, Beleg markieren, Antwort und Begründung, Überschriften zuordnen */
.qz-options--laut-text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qz-options--laut-text .qz-option { flex-direction: column; justify-content: center; text-align: center; }
.qz-options--laut-text .qz-option-key { background: none; font-size: 1.4rem; width: auto; }
.qz-beleg { max-width: 65ch; padding: var(--ui-gap-lg); border: solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-card); line-height: 1.8; }
.qz-beleg-satz { display: inline; padding: .1em .2em; border: 0; border-radius: calc(var(--ui-r-chip) / 2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.qz-beleg-satz:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.qz-beleg-satz:disabled { cursor: default; }
.qz-beleg-satz.is-correct { background: var(--ui-mint-soft); box-shadow: inset 0 -3px 0 var(--ui-mint); }
.qz-beleg-satz.is-wrong { background: var(--ui-coral-soft); box-shadow: inset 0 -3px 0 var(--ui-coral); }
.qz-beleg-satz.is-reveal { box-shadow: inset 0 -3px 0 var(--ui-mint); }
.qz-begruendung-frage { margin-top: var(--ui-gap); }
.qz-pairs--absatz .qz-pair { grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr); }
.qz-pairs--absatz .qz-pair-left { font-weight: 400; line-height: 1.6; background: var(--ui-paper); border: 2px solid var(--ui-line); }
/* Anwendungs-Quiztypen: Konzept-Detektiv (Konzeptleiste) und Wer hat recht? (Aussagen mit Namen) */
.qz-konzepte { display: flex; flex-wrap: wrap; gap: calc(var(--ui-gap) / 2); }
.qz-konzept { flex: 1 1 12rem; min-width: 0; padding: calc(var(--ui-gap) / 2) var(--ui-gap); border: 2px solid var(--ui-line); border-radius: var(--ui-r-chip); background: var(--ui-paper); overflow-wrap: anywhere; }
.qz-konzept summary { cursor: pointer; font-weight: 800; }
.qz-konzept p { margin: calc(var(--ui-gap) / 3) 0 0; color: var(--ui-ink-soft); }
.qz-options--personen .qz-option-text { display: flex; flex: 1; flex-direction: column; gap: calc(var(--ui-gap) / 4); text-align: left; }
.qz-person { font: 800 .95rem var(--ui-font-display); color: var(--ui-accent-deep); }
/* Was passiert, wenn …? (Richtung je Größe) und Regel anwenden (Eingabe, Code, Tabelle) */
.qz-aenderung { margin: 0; padding: calc(var(--ui-gap) / 2) var(--ui-gap); border-radius: var(--ui-r-chip); background: var(--ui-sun-soft); }
.qz-vorhersage { display: grid; gap: var(--ui-gap); }
.qz-vorhersage-zeile { display: grid; gap: calc(var(--ui-gap) / 3); padding: calc(var(--ui-gap) / 2); border: 2px solid var(--ui-line); border-radius: var(--ui-r-chip); background: var(--ui-paper); }
.qz-vorhersage-zeile.is-correct { border-color: var(--ui-mint); background: var(--ui-mint-soft); }
.qz-vorhersage-zeile.is-wrong { border-color: var(--ui-coral); background: var(--ui-coral-soft); }
.qz-vorhersage-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.qz-richtungen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--ui-gap) / 3); }
.qz-richtung { min-height: calc(var(--ui-gap) * 2.4); padding: calc(var(--ui-gap) / 4); border: 2px solid var(--ui-line); border-radius: var(--ui-r-chip); background: var(--ui-card); color: var(--ui-ink); font: 700 .95rem var(--ui-font-body); cursor: pointer; }
.qz-richtung[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.qz-richtung.is-reveal { box-shadow: inset 0 -3px 0 var(--ui-mint); }
.qz-richtung:disabled { cursor: default; }
.qz-richtung:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 1px; }
.qz-pruefen { justify-self: start; }
.qz-code { margin: 0; padding: var(--ui-gap); border: 2px solid var(--ui-line); border-radius: var(--ui-r-panel); background: var(--ui-paper); overflow-x: auto; font: .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.qz-tipp { margin: 0; padding: calc(var(--ui-gap) / 2) var(--ui-gap); border-radius: var(--ui-r-chip); background: var(--ui-sun-soft); font-weight: 700; }
.qz-eingabe { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--ui-gap) / 2); }
.qz-eingabe .ui-input { flex: 1 1 10rem; min-width: 0; }
.qz-eingabe .ui-input.is-correct { border-color: var(--ui-mint); background: var(--ui-mint-soft); }
.qz-eingabe .ui-input.is-wrong { border-color: var(--ui-coral); background: var(--ui-coral-soft); }
.qz-einheit { font-weight: 800; }
/* Fallaufgabe in Schritten: Fall bleibt oben, Schrittpunkte und Zwischenstand über der Frage */
.qz-fall { display: grid; justify-items: center; }
.qz-fall-schritt { display: grid; gap: var(--ui-gap); }
.qz-schritte { display: flex; align-items: center; gap: calc(var(--ui-gap) / 3); margin: 0; }
.qz-schritt-punkt { width: .7rem; height: .7rem; border: 2px solid var(--ui-accent); border-radius: 50%; }
.qz-schritt-punkt.is-done, .qz-schritt-punkt.is-current { background: var(--ui-accent); }
.qz-schritt-punkt.is-current { box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.qz-schritte-text { margin-left: calc(var(--ui-gap) / 3); color: var(--ui-ink-soft); font-size: .9rem; font-weight: 700; }
.qz-zwischenstand { padding: calc(var(--ui-gap) / 2) var(--ui-gap); border-left: 4px solid var(--ui-mint); border-radius: var(--ui-r-chip); background: var(--ui-mint-soft); }
.qz-zwischenstand-titel { margin: 0; font-weight: 800; }
.qz-zwischenstand ul { margin: calc(var(--ui-gap) / 4) 0 0; padding-left: 1.2em; }
@media (max-width: 600px) {
  .qz-options--laut-text { grid-template-columns: minmax(0, 1fr); }
  .qz-pairs--absatz .qz-pair { grid-template-columns: minmax(0, 1fr); }
  .qz-pairs--absatz .qz-pair-link { justify-self: center; }
}

@media (hover: hover) {
  .qz-stage .qz-chip:hover:not(:disabled):not(.is-picked) { transform: translateY(-2px); border-color: var(--ui-accent); }
  .qz-sort-move:hover:not(:disabled) { border-color: var(--ui-accent); }
  .qz-beleg-satz:hover:not(:disabled) { background: var(--ui-accent-soft); }
  .qz-richtung:hover:not(:disabled) { border-color: var(--ui-accent); }
}