:root{
  color-scheme:dark;
  --bg:#030304;
  --text:#d4d8de;
  --text-leise:#aab;
  --akzent:#79bdf0;
  --akzent-hell:#8fd0ff;
  --akzent-rgb:120,190,240;
  --linie:rgba(255,255,255,.10);
  --feld:rgba(0,0,0,.34);
  --mono:ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column;padding:14px;gap:12px;overflow:hidden}
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;background:radial-gradient(36% 30% at 14% 8%,rgba(150,158,172,.30),transparent 70%),radial-gradient(30% 30% at 88% 14%,rgba(100,150,200,.20),transparent 70%),radial-gradient(40% 34% at 70% 96%,rgba(120,124,134,.26),transparent 70%),radial-gradient(28% 26% at 28% 88%,rgba(90,130,175,.16),transparent 70%);filter:blur(30px)}
#bar,#main,#fmain,#vs,#vd,#vu,#va,#vg,#vf{position:relative;z-index:1}
[hidden]{display:none!important}
/* Die Bereiche: Startseite, Übersicht, Lektionsansicht, Klassenzimmer, Admin. Immer nur einer ist sichtbar. */
#vl,#vf{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
#vs,#vd,#vu,#va,#vg{flex:1;min-height:0;overflow:auto}

/* Glasflächen */
.g{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 55%,rgba(255,255,255,.045));border:1px solid var(--linie);border-radius:22px;backdrop-filter:blur(40px) saturate(170%);-webkit-backdrop-filter:blur(40px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 60px rgba(0,0,0,.6)}
.col{display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* Bedienelemente */
button,select{font:inherit;color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);padding:6px 12px;cursor:pointer}
select{max-width:340px;appearance:none;-webkit-appearance:none;padding:7px 38px 7px 16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aab4c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px,linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
option,optgroup{background:#15171a}
button:hover,select:hover{border-color:rgba(121,189,240,.7)}
button:disabled{opacity:.4;cursor:not-allowed;border-color:rgba(255,255,255,.12)}
button.p{background:linear-gradient(180deg,#8bc9f7,#5aa8e0);color:#04121c;border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px rgba(90,168,224,.22);font-weight:600}
button:focus-visible,select:focus-visible,textarea:focus-visible,#say:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:2px}
input[type=checkbox]{accent-color:var(--akzent)}
label{font-size:13px;color:var(--text-leise);display:flex;gap:6px;align-items:center}

/* Kopfleiste */
#bar,.kopf{display:flex;gap:10px;align-items:center;padding:10px 14px;flex-wrap:wrap;border-radius:20px}
#bar b,.kopf b{color:var(--akzent);margin-right:6px}
#bar select{flex:0 1 auto;min-width:110px;text-overflow:ellipsis}
#bar button,#bar label{flex:none;white-space:nowrap}
@media(min-width:901px){#bar{flex-wrap:nowrap}}
.sp{flex:1}
#pg,.pg{flex:0 1 150px;min-width:60px;height:8px;border-radius:8px;background:rgba(255,255,255,.10);overflow:hidden;margin-left:6px}
#pg i,.pg i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#5aa8e0,var(--akzent-hell));transition:width .6s cubic-bezier(.2,.9,.3,1.2)}
#pgt,.pgt{font-size:13px;color:var(--text-leise);white-space:nowrap}

/* Aufteilung: Editor links, rechts Vorschau über Assistent */
#main,#fmain{flex:1;min-height:0;display:grid;gap:12px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,.75fr) minmax(0,1.25fr);grid-template-areas:"ed pv" "ed as"}
#ed,#fed{grid-area:ed;padding:0;position:relative}
#pvc,#fpc{grid-area:pv}
#fas{grid-area:as;padding:16px 18px;overflow:auto}
/* Links die Kugel, immer mittig im Feld. Rechts der Text, nur er scrollt. */
#as{grid-area:as;display:flex;flex-direction:row;gap:14px;padding:22px 14px 22px 26px;border-color:rgba(var(--akzent-rgb),.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 60px rgba(0,0,0,.6),0 0 46px rgba(var(--akzent-rgb),.14)}
#orbw{flex:none;width:230px;display:flex;align-items:center;justify-content:center}
#asr{flex:1;min-width:0;min-height:0;overflow:auto;display:grid;grid-auto-rows:min-content;grid-template-columns:minmax(0,1fr);row-gap:10px;align-content:start;padding:0 12px}
.ph{padding:14px 20px 10px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-leise);flex:none}

/* Assistent */
/* Kugel im Stil von Siri: dunkles Glas, darin fließende Farben.
   .orb trägt Größe, Leuchten und Bewegung. .orbi schneidet den Inhalt rund aus;
   clip-path hält den Kreis auch während der Animationen (overflow allein wird dabei kurz eckig). */
.orb{width:150px;height:150px;border-radius:50%;position:relative;box-shadow:0 0 34px rgba(80,150,255,.45),0 0 80px rgba(190,90,255,.22);animation:idle 4s ease-in-out infinite}
.orbi{position:absolute;inset:0;border-radius:50%;overflow:hidden;clip-path:circle(50%);isolation:isolate;background:radial-gradient(circle at 50% 58%,#101a4a,#04050f 78%)}
.orbi i{position:absolute;inset:-18%;border-radius:50%;mix-blend-mode:screen;filter:blur(13px);animation:spin 9s linear infinite}
.orbi i:nth-child(1){background:radial-gradient(circle at 30% 38%,#22d3ee 0,transparent 36%),radial-gradient(circle at 72% 66%,#2f6bff 0,transparent 40%)}
.orbi i:nth-child(2){background:radial-gradient(circle at 68% 30%,#ff4fd8 0,transparent 34%),radial-gradient(circle at 34% 74%,#8b5cf6 0,transparent 38%);animation-duration:13s;animation-direction:reverse}
.orbi i:nth-child(3){inset:8%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85) 0,rgba(160,220,255,.4) 18%,transparent 46%);filter:blur(9px);animation:kern 3.2s ease-in-out infinite}
/* Glas: Glanzlicht oben, heller Rand, Schatten unten */
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 58% 34% at 50% 15%,rgba(255,255,255,.38),transparent 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 20px rgba(255,255,255,.22),inset 0 -14px 26px rgba(0,0,10,.5)}
.orb.on{animation:talk .45s ease-in-out infinite}
.orb.on .orbi i{animation-duration:2.6s}
.orb.on .orbi i:nth-child(3){animation-duration:.5s}
@keyframes kern{50%{transform:scale(1.25);opacity:.75}}
@keyframes idle{50%{transform:scale(1.06)}}
@keyframes talk{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}65%{transform:scale(.97)}}
@keyframes spin{to{transform:rotate(360deg)}}
.orb.jubel{animation:jubel .9s ease-out}
@keyframes jubel{30%{transform:scale(1.22);box-shadow:0 0 70px rgba(140,210,255,.9),0 0 140px rgba(90,170,255,.5)}60%{transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.orb,.orb.on,.orb.jubel,.orbi i,#fb.ok,button.puls,mark{animation:none}#pg i{transition:none}}

.lab{color:var(--akzent);font-weight:600;margin:0}
#lessonl{display:none}
#lt{margin:0;font-size:13px;color:var(--text-leise)}
#task{margin:0;font-size:23px;line-height:1.3;font-weight:600;color:#fff}
#say{background:rgba(var(--akzent-rgb),.06);border:1px solid rgba(var(--akzent-rgb),.18);border-radius:16px;padding:16px 18px;font-size:19px;line-height:1.5;cursor:pointer}
.nx{display:block;text-align:right;font-size:12px;color:var(--akzent);margin-top:6px}
#exw{background:var(--feld);border:1px solid var(--linie);border-radius:12px;padding:8px 14px 10px}
#exw span{font-size:12px;color:#8e9aa8}
#ex{margin:4px 0 0;font:13px/1.5 var(--mono);color:#bfe0f7;white-space:pre;overflow:auto;max-height:110px}
#chk{font-size:14px;color:var(--text-leise)}
/* Rückmeldung und Knöpfe bleiben unten im Feld sichtbar, auch wenn der Text darüber lang ist */
#ft{position:sticky;bottom:0;z-index:1;display:grid;gap:10px;margin:0 -12px;padding:12px;border-radius:14px;background:#0d0f13}
#fb{min-height:24px;font-size:17px;line-height:1.45;border-left:3px solid #556;padding-left:12px}
#fb:empty{display:none}
#fb.ok{border-color:var(--akzent);color:#c4dff3;font-weight:600;animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(.96);opacity:.3}60%{transform:scale(1.03)}}
#fb.no{border-color:#e6b3c4;color:#fff;background:rgba(230,179,196,.10);border-radius:0 10px 10px 0;padding:8px 12px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.dd{display:flex;gap:22px;flex-wrap:wrap}
details{font-size:13px;color:var(--text-leise)}
summary{cursor:pointer;color:var(--akzent)}
details li{margin:2px 0}

/* Erfolgsmoment */
button.puls{animation:puls 1.2s ease-in-out infinite;background:linear-gradient(180deg,#8bc9f7,#5aa8e0);color:#04121c;border-color:rgba(255,255,255,.3);font-weight:600}
@keyframes puls{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 6px rgba(var(--akzent-rgb),.28),0 6px 24px rgba(90,168,224,.55)}}
#kf{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
#kf i{position:absolute;width:9px;height:14px;border-radius:2px;animation:kf 1.5s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes kf{70%{opacity:1}to{transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r));opacity:0}}

/* Bereich für Lehrkräfte */
dialog{color:var(--text);padding:24px 26px;width:min(520px,calc(100vw - 28px));background:linear-gradient(145deg,rgba(40,44,52,.96),rgba(18,20,24,.96))}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog h2{margin:0 0 6px;font-size:20px;color:var(--akzent)}
dialog h3{margin:20px 0 6px;font-size:14px;color:var(--text-leise);font-weight:600}
dialog p{margin:0 0 10px}
.einst{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.einst input{margin-top:3px}
.fbq{border:1px solid var(--linie);border-radius:14px;margin:14px 0 0;padding:10px 16px 14px;display:grid;gap:8px}
.fbq legend{padding:0 6px;font-weight:600;line-height:1.35}
.fbq textarea.feld{font-size:15px;resize:vertical}
#fbf>.fehler{margin-top:14px}
dialog .klein{font-size:13px;color:var(--text-leise)}
dialog .end{justify-content:flex-end;margin-top:24px}
.feld{font:inherit;font-size:17px;width:100%;padding:10px 14px;color:var(--text);background:var(--feld);border:1px solid var(--linie);border-radius:12px}
.feld:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:2px}
#pinf,.fehler{min-height:22px;margin:8px 0 12px;color:#e6b3c4;font-size:14px}

/* Abschluss eines Moduls und große Ansicht des eigenen Werks */
#ab h2{font-size:26px}
#abm{font-size:17px;line-height:1.5}
#abl{margin:0 0 14px;padding:0;list-style:none}
#abl li{padding:3px 0 3px 26px;position:relative}
#abl li::before{content:"✓";position:absolute;left:4px;color:var(--akzent-hell);font-weight:700}
#abw{color:var(--text-leise);font-size:14px}
#gr{width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:0;border:0;border-radius:0;background:var(--bg)}
#gr[open]{display:flex;flex-direction:column}
#grf{flex:1;min-height:0;width:100%;border:0;background:#fff}

#lf{position:relative;z-index:1;margin:auto;max-width:520px;text-align:center;font-size:17px}

/* Startseite */
#vs{display:flex;flex-direction:column;position:relative}
.skopf{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 12px 0}
.skopf b{color:var(--akzent);font-size:19px}
.mitte{flex:1;width:100%;max-width:920px;margin:0 auto;padding:8px 0 10px;display:flex;flex-direction:column;justify-content:center}
/* Links Überschrift, ein Satz und die Wahl der Rolle; rechts das Code-Beispiel.
   Formulare erscheinen erst nach der Wahl, damit die Seite ruhig bleibt. */
.mitte.start{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;align-content:center;padding:56px 12px 10px}
.mitte h1{margin:0;font-size:clamp(32px,4.4vw,50px);line-height:1.1;color:#fff;letter-spacing:-.01em}
.mitte h1 em{font-style:normal;color:var(--akzent-hell)}
.unter{margin:14px 0 30px;max-width:640px;font-size:17px;line-height:1.45;color:var(--text-leise)}
.slinks{max-width:420px}
.rollen{display:flex;flex-direction:column;gap:10px}
.rolle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;font-size:16px;text-align:left}
.rolle span{opacity:.55}
.slinks .karte .row{flex-wrap:wrap}
.sdemo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:14px}
.sdemo pre{margin:0;padding:6px 8px;font:14px/1.6 var(--mono);white-space:pre-wrap;color:var(--text)}
.sdemo pre b{font-weight:400;color:var(--akzent-hell)}
.sdemo .lbl{display:block;margin-bottom:8px;font:11px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.sdemo .pfeil{padding:0 10px;font-size:18px;color:var(--akzent);opacity:.7}
.fenster{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.fenster .leiste{display:flex;gap:5px;padding:7px 10px;background:#e9edf2}
.fenster .leiste i{width:8px;height:8px;border-radius:50%;background:#c3cad3}
.vorschau{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;color:#111}
.vorschau strong{font-size:22px}
.vorschau span:last-child{font-size:14px}
.sfuss{display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.sfuss button{background:none;border:0;box-shadow:none;padding:2px 4px;font-size:13px;color:var(--text-leise)}
.sfuss button:hover{color:var(--akzent-hell)}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.karte{padding:20px 24px}
.feld.code{font:22px var(--mono);letter-spacing:.3em;text-transform:uppercase}
.feld.schmal{width:auto;flex:1 1 260px;min-width:0}
.karte h2,.modul h2{margin:0 0 6px;font-size:20px;color:var(--akzent)}
.karte p{margin:0 0 12px}
.karte .feld+.feld{margin-top:10px}

/* Übersicht */
#vd,#vu,#va,#vg{display:flex;flex-direction:column;gap:12px}
#kl,#kd,#kli{display:grid;gap:12px}
#kl>p{margin:0;color:var(--text-leise)}
.kcode{font:600 20px var(--mono);letter-spacing:.2em;color:var(--akzent-hell);padding:4px 8px 4px 12px}
.klasse .row{margin-top:12px}
#dr,.wr{font-size:13px;color:var(--text-leise)}
.wn{cursor:pointer}
#fc .klein{margin:14px 0 8px;font-size:13px;color:var(--text-leise)}
.wn:hover{text-decoration:underline}
#pff .feld{max-width:320px}
#pfb{border-color:#e6b3c4;color:#e6b3c4}
#dm{display:grid;gap:12px}
.pfad{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--text-leise)}
.pfad button{padding:4px 10px;font-size:14px}
.pfad b{color:var(--text)}
#dm h2.ebene{margin:8px 0 0;font-size:22px}
.sprachen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.skarte{display:grid;gap:6px;justify-items:start;text-align:left;padding:22px 24px;border-radius:20px}
.skarte b{font-size:20px;color:var(--akzent)}
.skarte .lt{font-size:14px;color:var(--text-leise);line-height:1.45}
.skarte .pg{width:100%;flex:none;margin:4px 0 0}
.szeichen{font:600 18px var(--mono);color:var(--akzent-hell);padding:6px 10px;border:1px solid var(--linie);border-radius:10px}
.lkarte[data-z="lehrer"] .lz{color:#e6b3c4}
.mhinweis{margin:-6px 0 14px}
.weiter{margin-top:4px}
#pya,#fpya{flex:1;min-height:0;margin:0 20px 20px;padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font:14px/1.5 var(--mono);color:#e6edf3;background:#05070b;border:1px solid var(--linie);border-radius:14px}
#pya .leise,#fpya .leise{color:var(--text-leise)}
#pya .fehl,#fpya .fehl{color:#ffb4c6}
.fspr{gap:6px;align-items:center;flex-wrap:nowrap}
.fspr button{padding:4px 12px;font-size:13px}
.fspr button[aria-pressed="true"]{border-color:rgba(var(--akzent-rgb),.8);color:var(--akzent-hell);background:rgba(var(--akzent-rgb),.14)}
#fedn{margin-left:6px}
.sbaum{margin-top:12px}
.sbaum summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--text)}
.sbaum fieldset{border:1px solid var(--linie);border-radius:14px;margin:10px 0 0;padding:10px 16px 12px;display:grid;gap:6px}
.sbaum legend{padding:0 6px;color:var(--akzent);font-size:14px}
.sbaum .row{margin-top:6px}
.modul{padding:22px 26px}
.mkopf{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mkopf h2{margin:0 auto 0 0}
.lek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lkarte{display:grid;gap:4px;justify-items:start;text-align:left;padding:16px 18px;border-radius:16px}
.lkarte b{color:var(--text-leise);font-size:13px;font-weight:600}
.lt{font-size:17px;font-weight:600}
.lz,.ls{font-size:13px;color:var(--text-leise)}
.lkarte[data-z="offen"] .lz{color:var(--akzent)}
.lkarte[data-z="fertig"]{border-color:rgba(var(--akzent-rgb),.7)}
.lkarte[data-z="fertig"] .lz{color:var(--akzent-hell);font-weight:600}

/* Lehrer-Übersicht */
.tw{overflow:auto}
#utab{width:100%;border-collapse:collapse}
#utab th{text-align:left;font-size:13px;font-weight:600;color:var(--text-leise);padding:6px 12px 8px 0;white-space:nowrap}
#utab td{padding:10px 12px 10px 0;border-top:1px solid var(--linie);vertical-align:middle}
#utab .uk{font-weight:600}
#utab td:nth-child(n+4):not(:last-child){white-space:nowrap}
#utab button{font-size:13px;white-space:nowrap}
#utab button.an{border-color:rgba(var(--akzent-rgb),.7);color:var(--akzent-hell)}
#ul,#ualt{margin:0;color:var(--text-leise)}
#ualt{margin-bottom:12px}
#utab .ok{color:var(--akzent-hell)}
/* Code und Vorschau eines Schülers */
#sv{width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:0;border:0;border-radius:0;background:var(--bg)}
#sv[open]{display:flex;flex-direction:column}
#sv .ph{gap:12px}
#sv .ph b{font-size:17px;color:var(--text)}
#sv .ph .row{align-items:center;flex-wrap:nowrap;white-space:nowrap}
#svh{margin:0;padding:0 20px 12px;color:var(--text-leise)}
#svi{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#svc{margin:0;padding:12px 14px 12px 0;overflow:auto;font:13px/1.55 var(--mono);white-space:pre;tab-size:2;color:#b9c0ca;background:var(--feld);border-top:1px solid var(--linie);counter-reset:z}
#svc span::before{counter-increment:z;content:counter(z);display:inline-block;width:38px;margin-right:12px;text-align:right;font-size:11px;color:#59626f}
#svf{width:100%;height:100%;border:0;background:#fff}
@media(max-width:900px){#svi{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr}}

/* Menü mit drei Strichen: schiebt sich von rechts herein */
.mb{flex:none;display:grid;gap:4px;align-content:center;width:40px;height:36px;padding:0 10px}
.mb i{display:block;height:2px;border-radius:2px;background:var(--text)}
#mn{margin:0 0 0 auto;width:min(560px,100vw);max-width:100vw;height:100vh;max-height:100vh;padding:0;border-radius:22px 0 0 22px;overflow:hidden;animation:rein .32s cubic-bezier(.2,.8,.2,1)}
#mn[open]{display:flex;flex-direction:column}
#mn.zu{animation:raus .22s ease-in forwards}
#mn::backdrop{animation:blende .3s}
@keyframes rein{from{transform:translateX(100%)}}
@keyframes raus{to{transform:translateX(100%)}}
@keyframes blende{from{opacity:0}}
.mnk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 12px;flex:none}
.mnk h2{margin:0;font-size:22px}
.mnr{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 14px;border-bottom:1px solid var(--linie);flex:none}
.mnr button{font-size:13px}
.mnr button[aria-pressed="true"]{border-color:rgba(var(--akzent-rgb),.7);color:var(--akzent-hell)}
#mni{flex:1;min-height:0;overflow:auto;padding:6px 24px 28px;line-height:1.6}
#mni h3{margin:22px 0 6px;font-size:15px;color:var(--akzent)}
#mni ul{margin:0 0 10px;padding-left:20px}
#mni li{margin:3px 0}
.warn{border-left:3px solid #e6b3c4;background:rgba(230,179,196,.10);border-radius:0 10px 10px 0;padding:10px 12px;color:#fff}
@media(prefers-reduced-motion:reduce){#mn,#mn.zu,#mn::backdrop{animation:none}}

/* Editor: Textarea liegt durchsichtig über der Highlight-Ebene */
#cw,#fcw{position:relative;flex:1;min-height:0;margin:0 14px 14px;border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:var(--feld)}
#hl,#ta,#fhl,#fta{position:absolute;inset:0;margin:0;padding:12px 14px;font:13px/1.55 var(--mono);white-space:pre;overflow:auto;border:0;tab-size:2}
#hl,#ta,#fhl,#fta{padding-left:50px}
#hl,#fhl{color:#b9c0ca;pointer-events:none;overflow:hidden}
/* Zeilennummern: klein und unauffällig, gleiche Zeilenhöhe wie der Code */
#zn,#fzn{position:absolute;top:0;bottom:0;left:0;width:38px;margin:0;padding:12px 8px 12px 0;font:11px/20.15px var(--mono);text-align:right;color:#59626f;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;border-right:1px solid var(--linie)}
#ta,#fta{background:transparent;color:transparent;caret-color:var(--akzent-hell);resize:none;outline:none}
/* Schreibfeld: Der Platzhaltertext ist unsichtbar, stattdessen steht ein Stift im blauen Feld */
mark{position:relative;cursor:text;background:rgba(var(--akzent-rgb),.28);color:transparent;border-radius:5px;outline:1.5px solid var(--akzent-hell);animation:feld 1.6s ease-in-out infinite}
mark::after{content:"✎";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:600 12px/1 -apple-system,"Segoe UI",system-ui,sans-serif;white-space:nowrap}
mark.l::after{content:"✎ hier"}
@keyframes feld{50%{background:rgba(var(--akzent-rgb),.5);box-shadow:0 0 12px rgba(var(--akzent-rgb),.6)}}
#ta::selection,#fta::selection{color:transparent;background:rgba(var(--akzent-rgb),.45)}
#leg{margin-left:14px;color:var(--text-leise)}
#leg mark{animation:none;font:12px var(--mono);margin-right:4px}

/* Vorschau */
#pv,#fpv{background:#fff;flex:1;min-height:0;width:calc(100% - 28px);margin:0 14px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5);filter:brightness(.8)}
#ttl,#fttl{color:#e8eaee;font-weight:400;margin-left:10px}
#pvc .ph,#fpc .ph{padding-top:10px}
#pvc .ph button,#fpc .ph button{font-size:13px;padding:4px 10px}

/* Schmale Fenster: alles untereinander, die Seite scrollt */
/* Tabs oben: Klassenzimmer, Lerneinheiten, Spiele */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:7px 16px;border-radius:12px}
.tabs button[aria-current]{cursor:default;color:var(--akzent-hell);border-color:rgba(var(--akzent-rgb),.8);background:linear-gradient(180deg,rgba(var(--akzent-rgb),.28),rgba(var(--akzent-rgb),.10))}
/* Spiele */
#gc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.spielkarte p{margin:0 0 14px;color:var(--text);font-size:16px;line-height:1.55}
.spielkarte .row{align-items:center;margin-top:14px;margin-bottom:6px}
/* Hinweistexte brechen um, statt aus der Karte zu laufen */
.spielkarte p.pgt{white-space:normal;margin:16px 0 0;font-size:15px;line-height:1.5}
.spielkarte.bald{opacity:.6}
/* Admin: Statistik */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kachel{display:grid;gap:4px;padding:18px 20px;border-radius:18px;border:1px solid var(--linie);background:rgba(255,255,255,.04)}
.kachel b{font-size:26px;color:var(--akzent-hell)}
.kachel span{font-size:13px;color:var(--text-leise)}
#atab,#astab{width:100%;border-collapse:collapse}
#astab th,#atab th{text-align:left;font-size:13px;font-weight:600;color:var(--text-leise);padding:6px 12px 8px 0;white-space:nowrap}
#atab td,#astab td{padding:10px 12px 10px 0;border-top:1px solid var(--linie)}
.leise{margin:0;color:var(--text-leise)}
.verlauf{display:flex;align-items:flex-end;gap:6px;height:160px;overflow-x:auto;padding-top:8px}
.tag{flex:0 0 34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.tag i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--akzent-hell),rgba(var(--akzent-rgb),.45))}
.tag span{font-size:11px;color:var(--text-leise);white-space:nowrap}
.aklein{margin:0 4px 8px}
/* Bug-Jagd */
#sp{width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:0;border:0;border-radius:0;background:var(--bg)}
#sp[open]{display:flex;flex-direction:column}
#sp .ph{gap:12px}
#sp .ph b{font-size:17px;color:var(--text)}
#sp .ph .row{align-items:center;flex-wrap:nowrap;white-space:nowrap}
#spk{flex:1;min-height:0;overflow:auto;padding:8px 24px 24px;display:flex;flex-direction:column;gap:12px;width:min(900px,100%);margin:0 auto}
#spm{margin:0;font-size:24px;color:var(--akzent)}
#spe{margin:0;color:var(--text);font-size:17px;line-height:1.5}
#spc{background:var(--feld);border:1px solid var(--linie);border-radius:16px;padding:8px 0;font:15px/1.6 var(--mono);overflow:auto}
#spc:empty{display:none}
#spc .sz{display:flex;gap:14px;width:100%;text-align:left;padding:3px 16px;border:0;border-radius:0;background:none;box-shadow:none;color:#c8cfd9;font:inherit;white-space:pre}
#spc button.sz{cursor:pointer}
#spc button.sz:hover{background:rgba(var(--akzent-rgb),.14)}
#spc .nr{flex:none;width:28px;text-align:right;color:#59626f}
#spc .gewaehlt{background:rgba(var(--akzent-rgb),.28)}
#spc .richtig{background:rgba(80,200,120,.28);color:#e8fff0}
#spc .falsch{background:rgba(230,100,120,.30);color:#ffe8ee}
.zeit{position:relative;height:30px;border-radius:15px;background:var(--feld);border:1px solid var(--linie);overflow:hidden}
.zeit i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(var(--akzent-rgb),.5),var(--akzent));transition:width .25s linear}
.zeit span{position:relative;display:block;text-align:center;line-height:28px;font-weight:600}
#spr{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#spr li{display:flex;gap:14px;align-items:center;padding:10px 16px;border-radius:14px;border:1px solid var(--linie);background:rgba(255,255,255,.04)}
#spr li.ich{border-color:rgba(var(--akzent-rgb),.8);background:rgba(var(--akzent-rgb),.14)}
#spr .platz{flex:none;width:32px;font-weight:700;color:var(--akzent-hell)}
#spr .name{flex:1;font-weight:600}
#spr .pkt{font-variant-numeric:tabular-nums;color:var(--text-leise)}
/* Bug-Jagd und Quiz allein: dieselbe Gestaltung wie das Klassenspiel */
#ez{width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:0;border:0;border-radius:0;background:var(--bg)}
#ez[open]{display:flex;flex-direction:column}
#ez .ph{gap:12px}
#ez .ph b{font-size:17px;color:var(--text)}
#ez .ph .row{align-items:center;flex-wrap:nowrap;white-space:nowrap}
#ezk{flex:1;min-height:0;overflow:auto;padding:8px 24px 24px;display:flex;flex-direction:column;gap:12px;width:min(900px,100%);margin:0 auto}
#ezm{margin:0;font-size:24px;color:var(--akzent)}
#eze{margin:0;color:var(--text);font-size:17px;line-height:1.5}
#ezc{background:var(--feld);border:1px solid var(--linie);border-radius:16px;padding:8px 0;font:15px/1.6 var(--mono);overflow:auto}
#ezc:empty{display:none}
#ezc .sz{display:flex;gap:14px;width:100%;text-align:left;padding:3px 16px;border:0;border-radius:0;background:none;box-shadow:none;color:#c8cfd9;font:inherit;white-space:pre}
#ezc button.sz{cursor:pointer}
#ezc button.sz:hover{background:rgba(var(--akzent-rgb),.14)}
#ezc .nr{flex:none;width:28px;text-align:right;color:#59626f}
#ezc .gewaehlt{background:rgba(var(--akzent-rgb),.28)}
#ezc .richtig{background:rgba(80,200,120,.28);color:#e8fff0}
#ezc .falsch{background:rgba(230,100,120,.30);color:#ffe8ee}
#ez.quiz #ezc{font:17px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif;padding:16px 0}
#ez.quiz #ezc .qf{margin:0 16px 12px;font-size:21px;line-height:1.4;color:var(--text)}
#ez.quiz #ezc .qc{margin:0 16px 12px;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.25);font:15px/1.6 var(--mono);color:#c8cfd9;overflow:auto;white-space:pre}
#ez.quiz #ezc .sz{white-space:normal;padding:10px 16px;color:var(--text);font-size:18px;border-top:1px solid var(--linie)}
#ez.quiz #ezc .nr{width:28px;text-align:center;color:var(--akzent);font-weight:700}
#spf{position:fixed;right:16px;bottom:16px;z-index:5;padding:10px 18px;border-radius:16px}
/* Leinwand: nur die Rangliste, groß */
#sp.quiz #spc{font:17px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif;padding:16px 0}
#sp.quiz #spc .qf{margin:0 16px 12px;font-size:21px;line-height:1.4;color:var(--text)}
#sp.quiz #spc .qc{margin:0 16px 12px;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.25);font:15px/1.6 var(--mono);color:#c8cfd9;overflow:auto;white-space:pre}
#sp.quiz #spc .sz{white-space:normal;padding:10px 16px;color:var(--text);font-size:18px;border-top:1px solid var(--linie)}
#sp.quiz #spc .nr{width:28px;text-align:center;color:var(--akzent);font-weight:700}
#sp.leinwand #spc,#sp.leinwand #spe,#sp.leinwand #spa,#sp.leinwand #spz,#sp.leinwand #spx,#sp.leinwand #sps{display:none}
#sp.leinwand #spk{width:min(1100px,100%);justify-content:flex-start}
#sp.leinwand #spm{font-size:44px;text-align:center}
#sp.leinwand #spr li{padding:14px 24px;font-size:30px}
#sp.leinwand #spr .platz{width:60px}
@media(max-width:900px){#sp #spk{padding:8px 14px 20px}#spc{font-size:13px}}
/* Niedrige Laptop-Bildschirme: Assistent bekommt mehr Höhe, die Kugel wird kleiner */
@media(max-height:820px) and (min-width:901px){
  #main{grid-template-rows:minmax(0,.55fr) minmax(0,1.45fr)}
  #as{gap:8px;padding:18px 10px 18px 22px}
  #orbw{width:150px}
  .orb{width:110px;height:110px}
  #task{font-size:20px}
  #say{font-size:17px;padding:12px 16px}
}
@media(max-width:900px){
  #vl,#vf{flex:none}
  #vs,#vd,#vu,#va,#vg{flex:none;overflow:visible}
  .mitte.start{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:72px}
  .slinks{max-width:none}
  .lek{grid-template-columns:repeat(2,minmax(0,1fr))}
  html,body{height:auto}
  body{min-height:100%;overflow:auto}
  #main,#fmain{flex:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"as" "ed" "pv"}
  #fas{overflow:visible}
  #as{overflow:visible}
  #asr{overflow:visible}
  #ft{position:static}
  #ed,#fed{height:70vh}
  #pvc,#fpc{height:60vh}
}
@media(max-width:600px){
  .zwei,.lek{grid-template-columns:minmax(0,1fr)}
  .sdemo{grid-template-columns:minmax(0,1fr)}
  .sdemo .pfeil{justify-self:center;transform:rotate(90deg);padding:4px 0}
  #as{flex-direction:column;padding:18px 6px}
  #orbw{width:auto}
  .orb{width:96px;height:96px}
}

/* Frei programmieren */
#fvl{flex:none;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 14px 12px}
#fvl button{font:13px var(--mono);padding:3px 10px}
#fvl .fvh{font-size:12px;color:var(--text-leise);margin-right:4px}
#fasi{display:grid;gap:12px;align-content:start}
.fass{display:flex;gap:14px;align-items:center}
#forbw{flex:none}
#forb{width:72px;height:72px}
#fsay{flex:1;min-width:0;background:rgba(var(--akzent-rgb),.06);border:1px solid rgba(var(--akzent-rgb),.18);border-radius:16px;padding:12px 16px;font-size:16px;line-height:1.5;cursor:pointer}
.fbox{background:var(--feld);border:1px solid var(--linie);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.fbox h3{margin:0;font-size:15px;color:var(--akzent)}
.fbox p{margin:0}
#fid{font-size:17px;line-height:1.4;color:var(--text)}
#fwk{max-width:100%}
.ftabs{margin:0}
/* Werkzeug-Bereich: nichts scrollt, nichts ragt über den Rand */
#fas{overflow:hidden;padding:12px 14px}
#fasi{grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
#fasi>*{min-width:0}
.fass{gap:10px}
#forb{width:56px;height:56px}
#fsay{font-size:15px;padding:8px 12px;max-height:5.2em;overflow:hidden}
#fsay .nx{margin-top:2px}
.fbox{min-width:0;padding:10px 12px;gap:6px}
.fbox p,.fbox .pgt{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.35}
.fbox .row{min-width:0}
.fbox .row>*{min-width:0}
.fbox button{padding:5px 10px;font-size:14px}
#fwn{flex:1 1 120px;min-width:0}
#fwk{flex:0 1 auto;max-width:100%}
#fid{font-size:15px}
.fbliste{display:grid;gap:14px}
.fbkarte{border:1px solid var(--linie);border-radius:14px;padding:12px 16px}
.fbkarte h3{margin:0 0 8px;font-size:15px}
.fbkarte dl{margin:0;display:grid;gap:4px}
.fbkarte dt{color:var(--text-leise);font-size:13px;margin-top:6px}
.fbkarte dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fbkarte dd.leer{color:var(--text-leise)}