/* ================================================================
   Grundlagen – identisch in allen Werkzeugen (nicht ändern)
   ================================================================ */
:root{
  /* Flächen und Text */
  --grund:#faf8f4; --flaeche:#f3efe7; --karte:#ffffff;
  --text:#22262b; --leise:#5f656c; --linie:#e2ddd3;
  /* Fachfarben */
  --inf:#1e5175; --inf-hell:#e8eef3;
  --wr:#9a4423;  --wr-hell:#f6e9e2;
  --akzent:#c8643b;                       /* Hervorhebung, nur für Flächen/Grafik und große Schrift */
  /* Rückmeldungen */
  --richtig:#2f7a4f; --richtig-hell:#e6f2ea;
  --falsch:#b3261e;  --falsch-hell:#fbe9e7;
  --hinweis:#8a6100; --hinweis-hell:#fbf3dc;
  /* Datenfarben für Diagramme, Kategorien, Markierungen – in dieser Reihenfolge */
  --d1:#1e5175; --d2:#c8643b; --d3:#2f7a4f; --d4:#7a4fa0; --d5:#b08a1e; --d6:#2a8a96;
  /* Schrift */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* Formen */
  --r-klein:6px; --r:10px; --r-rund:999px;
  --schatten:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
  --abstand:1rem;
}
:root[data-thema="dunkel"]{
  --grund:#16191c; --flaeche:#1c2024; --karte:#21262b;
  --text:#e8e5df; --leise:#a3a9b0; --linie:#363c43;
  --inf:#8db9d9; --inf-hell:#1f2d38;
  --wr:#e3997a;  --wr-hell:#3a261d;
  --akzent:#e08a62;
  --richtig:#7cc59a; --richtig-hell:#1c3226;
  --falsch:#f08a80;  --falsch-hell:#3a1f1c;
  --hinweis:#e2c06a; --hinweis-hell:#352c14;
  --d1:#8db9d9; --d2:#e08a62; --d3:#7cc59a; --d4:#b99be0; --d5:#e2c06a; --d6:#6cc3cc;
  --schatten:none;
}
:root[data-fach="informatik"]{ --fach:var(--inf); --fach-hell:var(--inf-hell); }
:root[data-fach="wr"]        { --fach:var(--wr);  --fach-hell:var(--wr-hell); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.tafel{font-size:125%}
body{margin:0;background:var(--grund);color:var(--text);font:1rem/1.55 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:1.5rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
a{color:var(--fach);text-underline-offset:.2em}
code,kbd,.mono{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:3px solid var(--fach);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}

/* Kopfleiste */
.kopf{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.25rem;border-bottom:1px solid var(--linie);background:var(--karte)}
.kopf .heim{font-family:var(--serif);color:var(--leise);text-decoration:none;font-size:.95rem;white-space:nowrap}
.kopf .heim:hover{color:var(--fach)}
.kopf .name{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.kopf .name small{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fach);font-weight:600}
.kopf .name strong{font-family:var(--serif);font-weight:400;font-size:1.35rem}
.kopf .schalter{display:flex;gap:.4rem}

/* Seitenrahmen */
main{max-width:72rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.fuss{max-width:72rem;margin:0 auto;padding:1rem 1.25rem 2rem;border-top:1px solid var(--linie);color:var(--leise);font-size:.85rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.fuss a{color:inherit}

/* Bausteine */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--schatten)}
.knopf{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.45rem 1rem;border-radius:var(--r-klein);border:1px solid var(--fach);background:var(--fach);color:#fff;font-weight:600;cursor:pointer;text-decoration:none}
:root[data-thema="dunkel"] .knopf:not(.zweit):not(.leise){color:#111}
.knopf:hover{filter:brightness(1.08)}
.knopf.zweit{background:transparent;color:var(--fach)}
.knopf.leise{background:transparent;border-color:var(--linie);color:var(--text);font-weight:400}
.knopf[aria-pressed="true"]{background:var(--fach-hell);border-color:var(--fach);color:var(--fach);font-weight:600}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-block;padding:.1rem .55rem;border-radius:var(--r-rund);background:var(--fach-hell);color:var(--fach);font-size:.8rem;font-weight:600}
.kasten{border-radius:var(--r-klein);padding:.7rem 1rem;border-left:4px solid;margin:.8rem 0}
.kasten>b:first-child{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}
.kasten.info{background:var(--fach-hell);border-color:var(--fach)}
.kasten.aufgabe{background:var(--flaeche);border-color:var(--fach)}
.kasten.richtig{background:var(--richtig-hell);border-color:var(--richtig)}
.kasten.falsch{background:var(--falsch-hell);border-color:var(--falsch)}
.kasten.hinweis{background:var(--hinweis-hell);border-color:var(--hinweis)}
input[type=text],input[type=number],select,textarea{min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--karte)}
table{border-collapse:collapse;background:var(--karte)}
th,td{border:1px solid var(--linie);padding:.45rem .7rem;text-align:left}
th{background:var(--flaeche);font-weight:600}
.markiert{background:var(--fach-hell);outline:2px solid var(--fach);outline-offset:-2px}
.tafel-aus{} html.tafel .tafel-aus{display:none}

@media (max-width:600px){
  .kopf{padding:.6rem 1rem} main{padding:1rem 1rem 2rem}
  .kopf .heim span{display:none}
}
@media print{
  .kopf .schalter,.knopf{display:none}
  body{background:#fff}
}
/* ================================================================
   Ab hier: Regeln von mAIgic
   ================================================================ */

/* Hilfsklassen */
.hidden{display:none!important}
.stack{display:flex;flex-direction:column;gap:.75rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row.spread{justify-content:space-between}
.grow{flex:1}
.center{text-align:center}
.muted{color:var(--leise)}
.small{font-size:.875rem}
.wrap{max-width:40rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--abstand)}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fach);font-weight:600;margin:0}
p{margin:0 0 .5em}
label{display:block;font-weight:600;margin-bottom:.25rem}
input:not([type]),input[type=password]{min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--karte);width:100%}
input[type=text],select{width:100%}
input.code{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;text-align:center;font-size:1.25rem}
input[type=range]{accent-color:var(--fach);width:100%}
input[type=checkbox]{accent-color:var(--fach);width:1.2rem;height:1.2rem}

/* Knöpfe: Ergänzungen zu .knopf */
.knopf{justify-content:center}
.knopf.small{min-height:2.5rem;padding:.3rem .75rem;font-size:.9rem}
.knopf.block{width:100%}
.knopf.gefahr{color:var(--falsch);border-color:var(--falsch)}
.gruppe{display:flex;gap:.35rem;flex-wrap:wrap}

/* Leiste unter dem Kopf (Phase, Name, Raumcode) */
.leiste{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:var(--abstand)}
.leiste .grow{min-width:0}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14rem;display:inline-block;vertical-align:bottom}
.reiter{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:var(--abstand)}
.chip.richtig{background:var(--richtig-hell);color:var(--richtig)}
.chip.falsch{background:var(--falsch-hell);color:var(--falsch)}

/* Aufnahmefeld */
.trace-box{position:relative;width:100%;aspect-ratio:1/1;max-width:100%;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.trace-box canvas{width:100%;height:100%;display:block}
.trace-box .hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:var(--leise);pointer-events:none}
.hold-btn{width:100%;min-height:4.5rem;font-size:1.15rem;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.hold-btn.aktiv{background:var(--fach-hell);color:var(--fach)}

/* Zauberbuch */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips .count{color:var(--leise);font-weight:400;font-family:var(--mono);font-size:.85em}
.dot{width:.65rem;height:.65rem;border-radius:var(--r-rund);display:inline-block;flex:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem}
.spell-card{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:.6rem;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;text-align:left;color:var(--text)}
.spell-card:hover{border-color:var(--fach)}
.spell-card canvas{width:100%;aspect-ratio:1/1;display:block}
.spell-card .name{font-weight:600;display:flex;align-items:center;gap:.35rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:.5rem}
.thumb{position:relative;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);padding:0;cursor:pointer;overflow:hidden;display:block;width:100%;color:var(--text)}
.thumb canvas{width:100%;aspect-ratio:1/1;display:block}
.thumb .cap{font-size:.8rem;color:var(--leise);padding:.1rem .4rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.thumb.flagged{border-color:var(--falsch)}
.thumb.flagged::after{content:"⚑";position:absolute;top:.2rem;right:.4rem;color:var(--falsch)}
.thumb.mine{border-color:var(--fach)}
.empty{text-align:center;color:var(--leise);padding:2rem 1rem;border:1px dashed var(--linie);border-radius:var(--r)}

/* Dialoge */
dialog{background:var(--karte);color:var(--text);border:1px solid var(--linie);border-radius:var(--r);padding:0;width:min(36rem,calc(100vw - 1.5rem));max-height:calc(100vh - 1.5rem);box-shadow:var(--schatten)}
dialog::backdrop{background:rgba(34,38,43,.4)}
dialog .dlg-head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--linie)}
dialog .dlg-head h2{margin:0;flex:1;font-size:1.25rem}
dialog .dlg-body{padding:1rem;overflow:auto;max-height:calc(100vh - 7rem)}
dialog.wide{width:min(62rem,calc(100vw - 1.5rem))}
.gross-canvas{width:100%;max-width:26rem;aspect-ratio:1/1;display:block;margin:0 auto;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r)}
.icon-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem}
.icon-pick .knopf{font-size:1.3rem;padding:0;min-height:2.75rem}

/* Meldungen */
.toast-host{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:calc(100% - 2rem);max-width:30rem}
.toast{background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--fach);padding:.6rem 1rem;border-radius:var(--r-klein);box-shadow:var(--schatten);text-align:center}
.toast.error{border-left-color:var(--falsch)}
.toast.ok{border-left-color:var(--richtig)}

/* Ergebnis und Effekte */
.ergebnis{text-align:center}
.ergebnis .big-icon{font-size:3rem;line-height:1}
.ergebnis h2{margin:.25rem 0}
.effect-layer{position:fixed;inset:0;pointer-events:none;z-index:200}
.effect-icon{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%) scale(.3);font-size:7rem;z-index:201;pointer-events:none;animation:erscheinen 1.3s ease-out forwards}
@keyframes erscheinen{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
@media (prefers-reduced-motion:reduce){.effect-icon{animation:none;opacity:0}}

/* Tafel / Lehrkraft */
.board-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--abstand)}
@media (max-width:900px){.board-grid{grid-template-columns:minmax(0,1fr)}}
.raumcode{display:inline-flex;align-items:center;gap:.6rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);padding:.25rem .6rem .25rem .25rem;cursor:pointer;color:var(--text)}
.room-code{font-family:var(--mono);font-size:1.3rem;font-weight:600;letter-spacing:.06em;color:var(--fach)}
.qr-mini{width:2.75rem;height:2.75rem;display:block}
.qr-big{width:min(65vh,80vw);height:min(65vh,80vw);background:#fff;padding:.75rem;border-radius:var(--r)}
.join-overlay{position:fixed;inset:0;background:var(--grund);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;text-align:center;cursor:pointer}
.join-overlay .room-code{font-size:clamp(2.5rem,8vw,5.5rem)}
.bars{display:flex;flex-direction:column;gap:.5rem}
.bar{display:grid;grid-template-columns:minmax(5rem,10rem) 1fr auto;gap:.5rem;align-items:center}
.bar .track{height:1rem;background:var(--flaeche);border-radius:var(--r-klein);overflow:hidden}
.bar .fill{height:100%;transition:width .4s}
.bar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .wert{font-family:var(--mono);font-size:.9rem;text-align:right;white-space:nowrap;min-width:3rem}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
.feed .item{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);overflow:hidden}
.feed .item canvas{width:100%;aspect-ratio:1/1;display:block}
.feed .item .cap{padding:.2rem .5rem .4rem;font-size:.85rem}
.feed .item.ok{border-color:var(--richtig)}
.feed .item.bad{border-color:var(--falsch)}
.stat{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--fach)}
.phase-banner{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.phase-banner h2{margin:0}
table.matrix{border-collapse:separate;border-spacing:3px;background:transparent}
table.matrix th,table.matrix td{border:none}
table.matrix th{background:transparent;color:var(--leise);text-align:center;padding:.25rem .4rem}
table.matrix th.rowh{text-align:right;white-space:nowrap;color:var(--text);font-weight:400}
table.matrix td{min-width:2.3rem;height:2.4rem;text-align:center;border-radius:var(--r-klein);font-family:var(--mono);font-weight:600}
.matrix-wrap{overflow-x:auto}
.duel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,1.1fr) minmax(0,1fr);gap:var(--abstand);align-items:stretch}
@media (max-width:800px){.duel-grid{grid-template-columns:1fr}}
.duel-player{text-align:center}
.duel-player.winner{outline:3px solid var(--fach);outline-offset:-1px}
.duel-player .qr{width:13rem;height:13rem;display:block;margin:0 auto;background:#fff;padding:.4rem;border-radius:var(--r-klein)}
.duel-player .pname{font-family:var(--serif);font-size:1.6rem}
.duel-player .ptime{font-family:var(--mono);font-size:2.2rem;color:var(--fach)}
.duel-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;min-width:14rem}
.countdown{font-family:var(--serif);font-size:6rem;color:var(--fach);line-height:1}
.countdown.laeuft{font-family:var(--mono);font-size:2.6rem}
.target{font-family:var(--serif);font-size:2rem}
.target .ti{font-size:4rem;display:block}
.slider-row{display:grid;grid-template-columns:1fr 4rem;gap:.6rem;align-items:center}
.slider-row output{font-family:var(--mono)}
.player-banner{font-family:var(--serif);font-size:1.5rem;text-align:center}
.big-countdown{font-family:var(--serif);font-size:5.5rem;text-align:center;color:var(--fach);line-height:1}
html.tafel .board{max-width:none}

/* k-nächste-Nachbarn sichtbar machen */
.schritte .knopf{font-size:.85rem}
.knn-liste{display:flex;flex-direction:column;gap:.3rem}
.knn-zeile{display:grid;grid-template-columns:2rem 3rem minmax(0,10rem) 1fr 4rem;gap:.6rem;align-items:center;padding:.25rem .4rem;border-radius:var(--r-klein)}
.knn-zeile .track{height:.8rem;background:var(--flaeche);border-radius:var(--r-klein);overflow:hidden;display:block}
.knn-zeile .fill{display:block;height:100%}
.knn-zeile .knn-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knn-mini{width:3rem;height:3rem;display:block;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein)}
.knn-grenze{border-top:2px dashed var(--hinweis);color:var(--hinweis);font-size:.85rem;font-weight:600;padding:.2rem .4rem 0;margin:.2rem 0}
@media (max-width:500px){.knn-zeile{grid-template-columns:1.5rem 2.5rem minmax(0,1fr) 4rem}.knn-zeile .track{display:none}}
.knn-ok{color:var(--richtig);font-weight:700}
.knn-nein{color:var(--falsch);font-weight:700}
table.knn-k td,table.knn-k th{text-align:center;min-width:2.4rem}
table.knn-k td{font-size:1.2rem}
.knn-karte{position:relative;width:100%;aspect-ratio:4/3;display:block;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.knn-karte-bild{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.knn-zoom{position:absolute;top:.4rem;right:.4rem}
.knopf.zweit.knn-zoom:not([aria-pressed="true"]){background:var(--karte)}
html.tafel .knn-karte{aspect-ratio:16/10}
.legende{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem}
.legende .stern{font-size:1.1rem;line-height:1}
.ki-casts{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:.5rem}
@media (max-width:600px){.schritte .schritt-name{display:none}.schritte .knopf{min-width:2.75rem}}
.stack>*{min-width:0;max-width:100%}
.tw{overflow-x:auto;min-width:0;max-width:100%}
@media (max-width:600px){table.knn-k td,table.knn-k th{min-width:2rem;padding:.35rem .4rem}}

/* Erklärung Schritt für Schritt: auf breiten Flächen (Tafel) Bild links, Text rechts, ohne Scrollen */
.knn-dialog{width:min(88rem,calc(100vw - 1.5rem))}
.knn-dialog .dlg-body{max-height:calc(100vh - 5rem)}
.knn-erklaerung{container-type:inline-size;--knn-h:calc(100vh - 17rem)}
.knn-titel{margin:0}
.knn-schritt{display:flex;flex-direction:column;gap:var(--abstand)}
.knn-bild{min-width:0}
.knn-bild .gross-canvas{max-width:26rem}
.knn-bild .knn-karte{aspect-ratio:4/3}
.knn-regler .slider-row{grid-template-columns:1fr auto;gap:var(--abstand)}
.knn-regler label .muted{font-weight:400}
.knn-regler .knn-k-wert{font-family:inherit;padding:.15rem .8rem;border:2px solid var(--fach);border-radius:var(--r-klein);background:var(--fach-hell);color:var(--fach);font-weight:700;font-size:1.6rem;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.knn-k-wahl{min-height:2rem;padding:.1rem .55rem}
@container (min-width:48rem){
  .knn-schritt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .knn-bild .gross-canvas{width:min(100%,var(--knn-h));max-width:none;margin:0 auto}
  .knn-bild .knn-karte{width:min(100%,calc(var(--knn-h) * 4 / 3));max-width:none;margin:0 auto}
  .knn-scroll{max-height:var(--knn-h);overflow:auto}
  .knn-text{max-height:var(--knn-h);overflow:auto;padding-right:.25rem}
  .knn-bild:has(.varianten){max-height:var(--knn-h);overflow:auto}
  .knn-text>*{flex-shrink:0}
}
/* Erklärfenster im Vollbild: füllt den ganzen Bildschirm */
dialog.knn-dialog.voll{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:var(--karte)}
dialog.knn-dialog.voll::backdrop{background:var(--grund)}
dialog.knn-dialog.voll .dlg-body{max-height:calc(100vh - 4.5rem)}
dialog.knn-dialog.voll .knn-erklaerung{--knn-h:calc(100vh - 15.5rem)}
[hidden]{display:none!important}
/* Auswertung: Validierungstabelle und Präzisionszeile der Matrix */
table.val-tabelle{width:100%;font-size:.92rem}
table.val-tabelle td,table.val-tabelle th{padding:.3rem .55rem;white-space:nowrap}
table.matrix tfoot td{height:auto;font-weight:400;color:var(--leise);font-size:.8rem;border-top:1px solid var(--linie)}
/* Lernziele, Phasenziel, Fortschritt */
.phasen-ziel{margin:0;color:var(--leise)}
.kasten .phasen-ziel{margin-top:.35rem;color:inherit}
ol.lernziele{margin:0;padding-left:1.3rem;display:grid;gap:.3rem}
.chip.fertig{background:var(--richtig-hell);color:var(--richtig)}

/* Erklärung: Denkaufgaben, Fachbegriffe, Schritt 7 */
details.loesung{margin-top:.5rem}
details.loesung summary,details summary{cursor:pointer;font-weight:600;color:var(--fach)}
details.loesung p{margin:.4rem 0 0}
.fachbegriff{margin:0}
.fachbegriff .chip{font-size:.7rem}
details.pseudocode pre{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-klein);padding:.6rem .8rem;overflow-x:auto;font-size:.85rem;margin:.5rem 0}
.varianten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.variante{margin:0;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-klein);padding:.4rem;text-align:center}
.variante canvas{width:100%;aspect-ratio:1/1;max-height:7rem;display:block}
.varianten-titel{margin:0}
.variante figcaption{font-size:.8rem;line-height:1.35}
ol.merksaetze{margin:.3rem 0 0;padding-left:1.2rem;display:grid;gap:.2rem}
.knn-schritt.ergebnis-zuerst>.knn-text{order:-1}
@container (min-width:48rem){.knn-schritt.ergebnis-zuerst>.knn-text{order:0}}
/* Nur die Zusammenfassung drucken */
@media print{
  body.drucke-auswahl *{visibility:hidden}
  body.drucke-auswahl .druck-bereich,body.drucke-auswahl .druck-bereich *{visibility:visible}
  body.drucke-auswahl .druck-bereich{position:absolute;left:0;top:0;width:100%}
  body.drucke-auswahl .druck-bereich .knn-text{max-height:none;overflow:visible}
  body.drucke-auswahl .druck-bereich details{display:block}
}
/* Ring statt Punkt ab dem 7. Zauber */
.dot.ring{background:transparent;border:.18rem solid;box-sizing:border-box}
.thumb.flagged .cap{white-space:normal;overflow:visible}
/* Sei die KI */
.sei-oben{display:grid;grid-template-columns:minmax(0,9rem) 1fr;gap:var(--abstand);align-items:center}
.sei-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.sei-karte{display:flex;flex-direction:column;align-items:stretch;gap:.2rem;padding:.35rem;background:var(--karte);border:2px solid var(--linie);border-radius:var(--r-klein);cursor:pointer;font:inherit;color:inherit}
.sei-karte canvas{width:100%;aspect-ratio:1/1;max-height:8rem;display:block}
.sei-karte .cap{font-size:.75rem;text-align:center}
.sei-karte.gewaehlt{border-color:var(--fach);background:var(--fach-hell)}
.sei-karte.treffer{border-color:var(--richtig);box-shadow:0 0 0 2px var(--richtig) inset}
.sei-karte:disabled{cursor:default;opacity:1}
/* Großer Zauberstab auf dem Handy */
.caster .voll-zu{display:none}
.caster.voll{position:fixed;inset:0;z-index:50;background:var(--grund);padding:max(.8rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.8rem}
.caster.voll .trace-box{flex:1;min-height:0;aspect-ratio:auto}
.caster.voll .hold-btn{min-height:28vh;font-size:1.4rem}
.caster.voll .voll-knopf{display:none}
.caster.voll .voll-zu{display:inline-flex;position:absolute;top:.6rem;right:.6rem}
body.zauberstab-offen{overflow:hidden}
/* Ergebnis als kurzer Moment */
@media (prefers-reduced-motion:no-preference){
  .ergebnis .big-icon{animation:auftauchen .5s ease-out}
  @keyframes auftauchen{from{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}
}
/* Duell-Arena: eigenes dunkles Spielfeld (bewusste Ausnahme von der hellen Gestaltung) */
.arena{background:radial-gradient(ellipse at 50% 0%,#24384c 0%,#121c26 70%);border-radius:var(--r);padding:var(--abstand);color:#e9eef3}
.arena .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#e9eef3;box-shadow:none}
.arena .eyebrow,.arena .muted{color:#a9bccb}
.arena .duel-player .ptime{color:#9fd0ff}
.arena .duel-player.winner{outline-color:#ffd166;box-shadow:0 0 2.5rem rgba(255,209,102,.35)}
.arena .stat{color:#fff}
.arena .duel-live{width:100%;aspect-ratio:1/1;max-height:42vh;display:block;background:rgba(0,0,0,.25);border-radius:var(--r-klein)}
.arena .versuche{color:#ffb3a1}
.arena .target{color:#fff}
.arena .countdown{color:#ffd166}
.arena .kasten{background:rgba(255,255,255,.06);color:#e9eef3}
.arena .knopf.leise,.arena select{background:rgba(255,255,255,.08);color:#e9eef3;border-color:rgba(255,255,255,.25)}
.arena .duel-player .qr{background:#fff}
/* Bühne: randlose Beamer-Ansicht ohne Bedienelemente */
body.buehne .kopf,body.buehne .fuss{display:none}
body.buehne main#app{max-width:none;padding:1.2rem 1.6rem}
.buehne-rahmen{display:flex;flex-direction:column;gap:1.2rem;min-height:calc(100vh - 2.4rem)}
.buehne-kopf{display:flex;align-items:center;gap:1.2rem}
.buehne-phase{font-family:var(--serif);font-size:2.6rem;line-height:1.1}
.buehne-auftrag{color:var(--leise);font-size:1.15rem;max-width:60rem}
.buehne-zahlen{text-align:right;font-size:1.2rem;color:var(--leise)}
.buehne-code .room-code{font-size:1.6rem}
.buehne-code .qr-mini{width:4rem;height:4rem}
.buehne-start{display:flex;gap:3rem;align-items:center;justify-content:center;flex:1}
.buehne-start .lernziele{font-size:1.4rem}
.buehne-wolken{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;flex:1;align-content:start}
.buehne-wolke{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:.8rem;display:flex;flex-direction:column;gap:.4rem}
.buehne-wolke .wolke{width:100%;aspect-ratio:1/1;display:block}
.buehne-wolke .wolke.leer{display:flex;align-items:center;justify-content:center;color:var(--leise)}
.buehne-wolke .wolke-name{font-size:1.4rem;font-weight:600}
.buehne-wolke .track{height:.7rem;background:var(--flaeche);border-radius:var(--r-rund);overflow:hidden}
.buehne-wolke .fill{height:100%}
.buehne-wolke .wolke-zahl{color:var(--leise)}
@media (prefers-reduced-motion:no-preference){
  .buehne-wolke.neu{animation:neu-spur 1.2s ease-out}
  @keyframes neu-spur{0%{box-shadow:0 0 0 0 var(--fach);transform:scale(1.03)}100%{box-shadow:0 0 0 1.2rem transparent;transform:scale(1)}}
}
.buehne-spur{width:100%;max-height:55vh;aspect-ratio:1/1;display:block}
.buehne-ergebnis{font-family:var(--serif);font-size:2.4rem;text-align:center}
body.buehne .arena{flex:1}
body.buehne .arena .knopf,body.buehne .arena select,body.buehne .arena .qr+p{display:none}
body.buehne .knn-karte{max-height:calc(100vh - 12rem);aspect-ratio:16/9}
.duel-player .pstatus{font-size:1.3rem;color:var(--leise);white-space:nowrap}
.arena .duel-player .pstatus{color:#a9bccb}
body.buehne.arena-aktiv{background:#121c26;color:#e9eef3}
body.buehne.arena-aktiv .raumcode{background:#fff}
body.buehne .arena .duel-live{max-height:58vh}
body.buehne .duel-grid{grid-template-columns:minmax(0,1.3fr) minmax(16rem,1fr) minmax(0,1.3fr)}
body.buehne .arena .pname{font-size:2.2rem}
body.buehne .arena .target{font-size:2.2rem}
/* Aufklappbare Vertiefungen („Mehr dazu“) */
details.mehr{border-left:3px solid var(--linie);padding:.1rem 0 .1rem .7rem}
details.mehr>summary{font-size:.9rem}
details.mehr p{margin:.4rem 0 0}
details.mehr-karte>summary{cursor:pointer;list-style-position:inside}
details.mehr-karte[open]>summary{margin-bottom:.6rem}
details.mehr-karte .knopf{margin-top:.6rem}
/* Sei die KI als Klassenrunde */
.sei-karte{position:relative}
.sei-buchstabe{position:absolute;top:.25rem;left:.4rem;font-weight:700;color:var(--leise);font-size:.85rem}
.sei-stimmen{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.8rem}
.sei-balken{display:block;height:.45rem;background:var(--fach);border-radius:var(--r-rund);min-width:2px}
.sei-zaehler{margin:0;color:var(--leise)}
.sei-zaehler.gross{font-size:1.6rem;color:var(--text)}
.sei-buehne{grid-template-columns:repeat(9,minmax(0,1fr))}
.sei-buehne .sei-karte canvas{max-height:none}
.sei-buehne .cap,.sei-buehne .sei-stimmen{font-size:1rem}
.sei-buehne .sei-buchstabe{font-size:1.2rem}
body.buehne .sei-oben{grid-template-columns:minmax(0,16rem) 1fr}
@media (max-width:1100px){.sei-buehne{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.buehne .sei-oben .variante canvas{max-height:12rem}
.sei-karte{padding-top:1.1rem}