:root{
    --bg:#12161d; --panel:#1b212b; --panel2:#232b37; --line:#333d4d;
    --text:#e7ecf3; --muted:#93a1b5; --accent:#ffd21e; --teal:#2ec4d6;
    --green:#4ecb71; --red:#ef5b5b;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:system-ui,"Segoe UI",Roboto,sans-serif;font-size:14px;
    height:100vh;overflow:hidden;
  }
  button{font:inherit;color:inherit;cursor:pointer}
  a{color:var(--teal);text-decoration:none}
  a:hover{text-decoration:underline}

  /* ---------------- Login ---------------- */
  #login{
    height:100%;display:grid;place-items:center;padding:20px;
    background:
      radial-gradient(900px 500px at 50% -10%,#1d2634 0%,transparent 60%),
      linear-gradient(#161d27,#0e131a);
  }
  .card{
    width:100%;max-width:380px;background:var(--panel);
    border:1px solid var(--line);border-radius:16px;padding:28px 26px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
  .logo .name{font-size:20px;font-weight:800;letter-spacing:.3px}
  .logo .name span{color:var(--accent)}
  .logo .sub{color:var(--muted);font-size:12px}

  .field{margin-bottom:14px}
  .field label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
  .field input{
    width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;
    color:var(--text);padding:11px 12px;font:inherit;
  }
  .field input:focus{outline:none;border-color:var(--teal)}
  .btn{
    width:100%;background:var(--accent);border:none;border-radius:9px;color:#1a1206;
    font-weight:700;padding:12px;margin-top:6px;
  }
  .btn:hover{filter:brightness(1.06)}
  .btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line);font-weight:600}
  .btn.ghost:hover{background:#2c3646;filter:none}
  .linkrow{display:flex;justify-content:flex-end;margin:4px 2px 2px}
  .linkrow button{background:none;border:none;color:var(--teal);font-size:12px;padding:2px}
  .linkrow button:hover{text-decoration:underline}
  .err{color:#ffb4b4;font-size:12.5px;min-height:17px;margin:4px 2px 0;text-align:center}

  .demo{
    margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
    color:var(--muted);font-size:12px;
  }
  .demo h4{margin:0 0 8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .demo .quick{display:flex;gap:8px}
  .demo .quick button{
    flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
    color:var(--text);padding:8px;font-size:12px;
  }
  .demo .quick button:hover{background:#2c3646}
  .foot{margin-top:16px;color:#5f6b7d;font-size:10.5px;text-align:center;line-height:1.5}

  /* ---------------- App-Shell ---------------- */
  #app{height:100%;display:none;grid-template-columns:230px 1fr;grid-template-rows:56px 1fr}
  #app.on{display:grid}
  .topbar{
    grid-column:1 / -1;display:flex;align-items:center;gap:12px;
    background:#0d1117;border-bottom:1px solid var(--line);padding:0 16px;
  }
  .topbar .brand{font-weight:800}
  .topbar .brand span{color:var(--accent)}
  .topbar .spacer{flex:1}
  .who{display:flex;align-items:center;gap:10px}
  .who .av{
    width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#57d9e8,#1d9fb2);color:#062;font-weight:800;color:#06303a;
  }
  .who .meta{line-height:1.2}
  .who .meta .n{font-weight:600;font-size:13px}
  .who .meta .r{color:var(--muted);font-size:11px}
  .role-badge{
    font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    padding:2px 7px;border-radius:20px;border:1px solid;
  }
  .role-teacher{color:#ffe08a;border-color:#6b5a1e;background:#2a2412}
  .role-student{color:#9ff0b6;border-color:#245c38;background:#12251a}
  .role-admin{color:#c9b3ff;border-color:#4a3a7a;background:#211a33}
  .logout{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
  .logout:hover{background:#3a2020;border-color:var(--red);color:#ffb4b4}

  .sidebar{background:var(--panel);border-right:1px solid var(--line);padding:12px 10px;overflow-y:auto;
    display:flex;flex-direction:column}
  /* Impressum sitzt unten in der Seitenleiste — auf jeder Seite erreichbar */
  .navfuss{margin-top:auto;padding:12px 10px 4px;color:var(--muted);font-size:12px}
  .navfuss a{color:var(--muted);text-decoration:none}
  .navfuss a:hover{color:var(--teal);text-decoration:underline}
  .navitem{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    background:none;border:none;border-radius:9px;color:var(--muted);
    padding:11px 12px;margin-bottom:3px;font-weight:600;
  }
  .navitem .ic{width:22px;text-align:center;font-size:16px}
  .navitem:hover{background:var(--panel2);color:var(--text)}
  .navitem.active{background:#1f3327;color:#fff;box-shadow:inset 3px 0 0 var(--green)}

  .content{position:relative;overflow:auto;background:var(--bg)}
  .view{display:none;padding:26px 30px;max-width:900px}
  .view.active{display:block}
  .view.full{max-width:none;padding:0;position:absolute;inset:0}
  .view.full.active{display:block}
  iframe{width:100%;height:100%;border:0;display:block;background:#0e131a}

  h1{font-size:22px;margin:0 0 6px}
  .lead{color:var(--muted);margin:0 0 22px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
  .tile{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  }
  .tile .ic{font-size:24px}
  .tile h3{margin:10px 0 4px;font-size:15px}
  .tile p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
  .tile.click{cursor:pointer;transition:border-color .12s}
  .tile.click:hover{border-color:var(--teal)}
  .empty{
    border:1px dashed var(--line);border-radius:14px;padding:34px;text-align:center;
    color:var(--muted);
  }
  .empty .big{font-size:34px;margin-bottom:8px}

  /* ---------------- Modal ---------------- */
  .modal{position:fixed;inset:0;background:rgba(6,9,13,.66);display:none;place-items:center;z-index:50;padding:20px}
  .modal.on{display:grid}
  .modal .card{max-width:360px}
  .modal h3{margin:0 0 6px;font-size:17px}
  .modal p{color:var(--muted);font-size:12.5px;margin:0 0 16px;line-height:1.5}
  .modal .ok{color:#a8f0bf;font-size:12.5px;min-height:17px;margin-top:8px}
  .modal .x{display:flex;gap:8px;margin-top:8px}
  .modal .x .btn{margin-top:0}

  /* ---------------- Scratch-Modul ---------------- */
  .scratch-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:920px){.scratch-grid{grid-template-columns:1fr}}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
  .panel .ph{margin:0 0 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .panel .field{margin-bottom:12px}
  .panel textarea{width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit;resize:vertical}
  .panel textarea:focus{outline:none;border-color:var(--teal)}
  .scbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
  .scbtns .btn{width:auto;margin-top:0;padding:10px 14px}
  .msg{font-size:12.5px;min-height:16px;margin-top:10px}
  .msg.err{color:#ffb4b4}
  .msg.ok{color:#a8f0bf}
  .hintline2{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 0}
  .previewBox{min-height:230px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
  .previewEmpty{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.6}
  .scembed{width:100%;max-width:485px;height:402px;border:1px solid var(--line);border-radius:10px;background:#000}
  .previewNote{color:#5f6b7d;font-size:11px;text-align:center;line-height:1.5;max-width:485px}
  .tk{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
  .tkthumb{width:96px;height:72px;object-fit:cover;border-radius:8px;background:#0e131a;flex:0 0 auto}
  .tkbody{flex:1;min-width:0}
  .tktitle{font-weight:700}
  .tkdesc{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tkmeta{color:#5f6b7d;font-size:11px;margin-top:4px}
  .tkact{display:flex;gap:6px;flex:0 0 auto}
  .mini{background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:7px 10px;font-size:12px}
  .mini:hover{background:#2c3646}
  .mini.del:hover{background:#3a2020;border-color:var(--red);color:#ffb4b4}

  /* ---------------- Kurse / Module / Fortschritt ---------------- */
  .frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
  .frow>input,.frow>div{flex:1;min-width:140px}
  .frow input[type=text],.frow input[type=number]{width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit}
  .frow input:focus{outline:none;border-color:var(--teal)}
  .lbl{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
  select{width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit}
  select:focus{outline:none;border-color:var(--teal)}
  .krow{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}
  .kicon{font-size:26px}
  .kbody{flex:1;min-width:0}
  .ktitle{font-weight:700;font-size:15px}
  .kmeta{color:var(--muted);font-size:12px;margin-top:3px}
  .kdesc{color:#7d8a9c;font-size:12px;margin-top:2px}
  .kact{display:flex;gap:8px;align-items:center}
  .chead{display:flex;align-items:center;gap:12px}
  .ctabs{display:flex;gap:6px;margin:16px 0 18px;border-bottom:1px solid var(--line)}
  .ctab{background:none;border:none;color:var(--muted);font-weight:600;padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
  .ctab.active{color:var(--text);border-color:var(--accent)}
  .mrow{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
  .mnum{width:44px;height:44px;flex:0 0 auto;border-radius:10px;background:var(--panel2);display:grid;place-items:center;font-weight:800;color:var(--accent)}
  .mbody{flex:1;min-width:0}
  .mtitle{font-weight:700}
  .mitems{color:var(--muted);font-size:12.5px;margin-top:3px}
  .badge{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:20px;white-space:nowrap}
  .badge.levels{background:#12303a;color:#8fe3f0;border:1px solid #1d5563}
  .badge.scratch{background:#33240f;color:#ffcf8a;border:1px solid #6b5a1e}
  .picker{margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#161d27}
  .picklist{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .pick{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}
  .pick input{accent-color:var(--accent)}
  .pick .pdel{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:1px 4px;margin-left:1px;border-radius:5px}
  .pick .pdel:hover{color:#ffb4b4;background:rgba(239,91,91,.16)}
  .muted{color:var(--muted);font-size:12.5px}
  .plegend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-bottom:14px;flex-wrap:wrap}
  .plegend .cell{width:26px;height:24px;font-size:12px;cursor:default}
  .ptable-wrap{margin-bottom:22px;overflow-x:auto}
  .pcaption{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .ptable{border-collapse:collapse;width:100%;font-size:13px}
  .ptable th,.ptable td{border:1px solid var(--line);padding:8px 10px;text-align:center}
  .ptable th{background:var(--panel2);color:var(--muted);font-weight:600}
  .ptable th:first-child,.ptable td.sname{text-align:left}
  .ptable .sname{font-weight:600}
  .cell{width:34px;height:30px;border-radius:7px;border:1px solid var(--line);font-weight:800;cursor:pointer;background:var(--panel2);color:var(--muted)}
  .cell.done{background:#12301f;border-color:#245c38;color:#7ff0a6}
  .cell.prog{background:#33290f;border-color:#6b5a1e;color:#ffd88a}
  .cell.open{background:#2a1c1c;border-color:#5a2e2e;color:#e58a8a}
  .cell:hover{filter:brightness(1.2)}
  .drow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
  .drow span{color:var(--muted)}
  .drow:last-child{border-bottom:none}
  .realdot{color:var(--green);font-size:9px;vertical-align:middle}

  /* ---------------- Schüler: Level spielen ---------------- */
  .crs{margin-bottom:26px}
  .crs h2{font-size:16px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .modblock{margin-bottom:14px}
  .modhd{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 8px}
  .mnum.sm{width:32px;height:26px;font-size:12px;border-radius:7px}
  .prow{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:7px}
  .picon{font-size:20px;flex:0 0 auto}
  .pbody{flex:1;min-width:0}
  .ptitle{font-weight:600}
  .pmeta{color:var(--muted);font-size:11.5px;margin-top:2px}
  .pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
  .pill.done{background:#12301f;color:#7ff0a6;border:1px solid #245c38}
  .pill.open{background:#2a1c1c;color:#e58a8a;border:1px solid #5a2e2e}
  .pill.locked{background:#161c25;color:#6b7688;border:1px solid #2b3340}
  .btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
  .runnerbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:#0d1117}
  .rtitle{display:flex;align-items:center;gap:8px}
  .rspacer{flex:1}
  .rstate{font-size:12.5px;color:var(--muted);font-weight:600}
  .rstate.ok{color:#a8f0bf}
  .runnerstage{position:absolute;left:0;right:0;top:47px;bottom:0;display:flex;flex-direction:column;background:#0e131a}
  .runframe{flex:1;width:100%;border:0;display:block}
  .runframe.scratch{max-width:485px;height:402px;flex:0 0 auto;margin:18px auto 0;border:1px solid var(--line);border-radius:10px}
  .runnote{color:var(--muted);font-size:12px;text-align:center;padding:12px}
  /* Level-Leiste (alle Level des Moduls) oben im Runner */
  .rname{font-weight:700;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .lvstrip{display:flex;gap:6px;overflow-x:auto;flex:1;padding:2px;scrollbar-width:thin}
  /* offene Level = gelb, erledigte = grün; das aktuelle Level bekommt einen weißen Rahmen */
  .lvchip{width:28px;height:28px;flex:0 0 auto;border-radius:8px;border:2px solid transparent;background:var(--accent);color:#1a1206;font-weight:700;font-size:12px;cursor:pointer}
  .lvchip.done{background:var(--green);color:#0d2416}
  .lvchip.locked{background:#0e131b;color:#3d4653;cursor:not-allowed}   /* noch nicht freigeschaltet = schwarz */
  .lvchip:hover{filter:brightness(1.08)}
  .lvchip.locked:hover{filter:none}
  .lvchip.active{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
  /* Feedback-Overlay nach dem Ausführen */
  .feedback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,10,14,.72);z-index:20;padding:20px}
  .feedback[hidden]{display:none}
  .fbcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 30px;text-align:center;max-width:430px;box-shadow:0 14px 44px rgba(0,0,0,.55)}
  .fbcard.ok{border-color:var(--green)} .fbcard.err{border-color:var(--red)}
  .fbicon{font-size:44px;line-height:1;margin-bottom:10px}
  .fbmsg{font-size:16px;font-weight:600;margin-bottom:18px}
  .fbcard.ok .fbmsg{color:#a8f0bf} .fbcard.err .fbmsg{color:#ffb4b4}
  .fbbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .fbbtns .btn{width:auto;margin:0;padding:10px 16px}

  /* ---------------- Kundenverwaltung (Kind + Eltern) ---------------- */
  .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  @media(max-width:620px){.cgrid{grid-template-columns:1fr}}
  .cgrid input,.cgrid select{width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit}
  .cgrid input:focus,.cgrid select:focus{outline:none;border-color:var(--teal)}
  /* Abschnitts-Überschrift innerhalb eines Kunden-Formulars/-Eintrags */
  .cusec{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;
         color:var(--muted);font-weight:700;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .cusec .mini{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
  /* Zwei Spalten (Kind | Eltern) in der Kundenliste */
  .cucols{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
  @media(max-width:620px){.cucols{grid-template-columns:1fr}}

  /* ---------------- Kursvorlagen & Durchführungen ---------------- */
  .badge.st-geplant{background:#1a2330;color:#9fc3e8;border:1px solid #2f4a63}
  .badge.st-laufend{background:#12301f;color:#7ff0a6;border:1px solid #245c38}
  .badge.st-beendet{background:#2a2430;color:#c3b0d6;border:1px solid #4a3a5a}
  .chead .badge{margin-left:2px}
  code{background:#10151d;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:ui-monospace,Consolas,monospace;font-size:12px}
  .frow select{width:100%}

  /* ---------------- Scratch: Muster + Start-Vorlage ---------------- */
  .scslot{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#161d27}
  .scslot .cusec{margin-bottom:4px}
  .scslot .field{margin-bottom:0}
  .scslot input[type=text]{width:100%;background:#10151d;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit}
  .scslot input[type=text]:focus{outline:none;border-color:var(--teal)}
  /* Schülersicht: Umschalter zwischen Muster und Vorlage */
  .scstage{flex:1;display:flex;flex-direction:column;overflow:auto}
  .sctabs{display:flex;gap:6px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
  .sctab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;padding:9px 14px;margin-bottom:-1px}
  .sctab.active{color:var(--text);border-color:var(--accent)}
  .sctab:disabled{opacity:.4;cursor:not-allowed}
  .scauftrag{padding:12px 16px;color:var(--muted);font-size:13px;line-height:1.55;border-bottom:1px solid var(--line)}
  .scpanel{flex:1;display:flex;flex-direction:column;overflow:auto}
  /* Eingebetteter Scratch-Editor mit Aufgabenfläche rechts */
  .edwrap{flex:1;display:flex;min-height:520px;overflow:hidden}
  .edmain{flex:1;display:flex;flex-direction:column;min-width:0}
  .edbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#0d1117;border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
  .edstate{font-size:12.5px;color:var(--muted);font-weight:600}
  .edstate.ok{color:#a8f0bf} .edstate.err{color:#ffb4b4}
  .eddirty{font-size:12px;font-weight:700;color:#ffd88a;background:#33290f;border:1px solid #6b5a1e;border-radius:20px;padding:3px 10px;white-space:nowrap}
  .eddirty[hidden]{display:none}
  .edframe{flex:1;width:100%;border:0;display:block;min-height:480px;background:#fff}

  /* Aufgabenfläche: ein-/ausklappbar */
  .edside{position:relative;flex:0 0 340px;background:var(--panel);border-left:1px solid var(--line);
          display:flex;flex-direction:column;transition:flex-basis .18s ease}
  .edside.zu{flex-basis:26px}
  .edside.zu .edsidebody{display:none}
  .edtoggle{position:absolute;left:-13px;top:14px;z-index:5;width:26px;height:26px;border-radius:50%;
            background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:14px;line-height:1;
            display:grid;place-items:center;padding:0}
  .edtoggle:hover{background:#2c3646;border-color:var(--teal)}
  .edsidebody{padding:16px 16px 20px;overflow-y:auto;flex:1}
  .edsidehd{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
  .edtitle{font-weight:800;font-size:15.5px;margin-bottom:6px}
  .edauftrag{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 14px}
  .edprog{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden;margin-bottom:6px}
  .edprogbar{height:100%;width:0;background:var(--green);transition:width .2s}
  .edprogtxt{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:12px}
  .edteil{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#161d27}
  .edteil.fertig{border-color:#245c38;background:#12251a}
  .edteilkopf{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;cursor:pointer}
  .edteilkopf input{accent-color:var(--green);width:17px;height:17px;margin-top:1px;flex:0 0 auto;cursor:pointer}
  .edteiltext{flex:1;font-size:13.5px;line-height:1.45}
  .edteil.fertig .edteiltext{color:#9fd8b3}
  .edmehr{background:none;border:none;color:var(--muted);font-size:13px;padding:0 3px;flex:0 0 auto}
  .edmehr:hover{color:var(--text)}
  .eddetail{padding:0 12px 11px 37px;color:var(--muted);font-size:12.5px;line-height:1.6}
  .eddetail[hidden]{display:none}
  /* ---- Blockbilder in der Hilfe: Farbe = Kategorie, Form = Blockart ----
     Nachgebaut wie in Scratch: Startblock mit runder Kappe, Klammerblock mit Arm,
     rundes Feld für Werte, Sechseck für Ja/Nein-Blöcke. */
  .edblocks{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:2px 0 12px}
  .scblk{position:relative;display:inline-flex;align-items:center;min-height:26px;
    background:var(--c);color:#fff;font-weight:700;font-size:12px;line-height:1.25;
    padding:5px 11px;border-radius:5px;max-width:100%;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.35)}
  .scblk span{white-space:normal}
  .scblk::after{content:"";position:absolute;left:13px;bottom:-4px;width:15px;height:4px;
    background:var(--c);border-radius:0 0 4px 4px}
  .scblk-hut{border-radius:15px 15px 5px 5px;padding-top:9px}
  .scblk-kappe{border-radius:5px 5px 5px 5px}
  .scblk-kappe::after{display:none}
  .scblk-wert{border-radius:999px;padding:4px 12px;min-height:22px}
  .scblk-wert::after{display:none}
  .scblk-logik{border-radius:0;padding:4px 14px;min-height:22px;
    clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 9px 100%, 0 50%)}
  .scblk-logik::after{display:none}
  /* Klammerblock: Kopfzeile + Arm links + Fußleiste darunter */
  .scblk-c{border-radius:5px 5px 0 0;margin-bottom:26px}
  .scblk-c::after{display:none}
  .scblk-c .scarm{position:absolute;left:0;top:100%;width:15px;height:15px;background:var(--c)}
  .scblk-c .scfuss{position:absolute;left:0;top:calc(100% + 15px);width:62px;height:11px;
    background:var(--c);border-radius:0 0 5px 5px;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
  /* Weiter-Kasten nach dem Abgeben */
  .ednext{margin-top:16px;border:1px solid #245c38;background:#12251a;border-radius:10px;padding:12px}
  .ednext[hidden]{display:none}
  .ednexthd{font-weight:800;font-size:13.5px;color:#9fd8b3;margin-bottom:9px}
  .ednextbtns{display:flex;flex-direction:column;gap:8px}
  .ednextbtns .btn{width:100%;margin:0;padding:9px 12px;font-size:13px}
  .btn.gesperrt,.btn:disabled{opacity:.45;cursor:not-allowed}
  /* ---- Info-Leiste (keine Einwilligung, nur Information) ---- */
  .cookiebar{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:14px 18px;box-shadow:0 12px 34px rgba(0,0,0,.5);
    max-width:860px;margin:0 auto;
  }
  .cookiebar .ckt{flex:1;min-width:260px;color:var(--muted);font-size:13px;line-height:1.6}
  .cookiebar .ckt b{color:var(--text)}
  .cookiebar .btn{width:auto;margin:0;padding:10px 20px;white-space:nowrap}

  /* ---- Platzhalter für externe Inhalte (Zwei-Klick-Lösung) ---- */
  .extblock{
    display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
    background:#161d27;border:1px dashed var(--line);border-radius:14px;
    padding:26px 22px;margin:10px 0;min-height:180px;justify-content:center;
  }
  .extblock .extico{font-size:26px}
  .extblock .exttext{max-width:420px}
  .extblock .exttext b{display:block;margin-bottom:6px;font-size:14.5px}
  .extblock .exttext p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}
  .extblock .extbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .extblock .btn{width:auto;margin:0;padding:9px 16px;font-size:13px}

  /* Checklisten-Editor in der Lehrer-Maske */
  .teil-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
  .teil-nr{color:var(--muted);font-weight:700;font-size:12px;padding-top:11px;min-width:16px}
  .teil-felder{flex:1;display:flex;flex-direction:column;gap:6px}
  @media(max-width:1100px){
    .edwrap{flex-direction:column}
    .edside{flex:0 0 auto;max-height:300px;border-left:none;border-top:1px solid var(--line)}
    .edside.zu{flex-basis:auto;max-height:34px}
    .edtoggle{left:auto;right:12px;top:4px}
  }

  /* Leiste für Mehrfachauswahl (Lektionen bzw. Level in der Bibliothek) */
  .bulkbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
  .mrow .mSel{accent-color:var(--accent);width:17px;height:17px;flex:0 0 auto;cursor:pointer}

/* Pflichtfeld-Sternchen in Formularen */
.pflicht{ color:#ff8a7a; font-weight:800; }
/* Hervorhebung des nächsten Kurstermins in der Terminliste */
.tmrow.heute{ outline:2px solid var(--accent); outline-offset:-2px; background:rgba(255,210,30,.07); }
.tmheute{ display:inline-block; background:var(--accent); color:#1a1a1a; font-weight:800;
          font-size:11px; padding:2px 8px; border-radius:999px; margin-left:8px; }

/* Modul-Überschrift: gruppiert Lektionen in Kurs-, Vorlagen- und Schüleransicht */
.modgroup{ margin:22px 0 10px; padding:10px 14px; border-radius:10px;
           background:linear-gradient(90deg, rgba(255,210,30,.14), rgba(255,210,30,.02));
           border-left:4px solid var(--accent);
           font-weight:800; font-size:15px; letter-spacing:.2px; }
.modgroup:first-child{ margin-top:0; }

/* Bonus-Aufgaben: freiwillige Zusatz-Level am Lektionsende */
.pill.bonus{ background:rgba(255,210,30,.16); color:var(--accent); font-size:11px; }
.prow.bonusrow{ border-left:3px solid rgba(255,210,30,.45); }

/* ---------- Admin-Kalender ---------- */
.calkopf{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;
          color:var(--muted); font-weight:700; font-size:12px; text-align:center; }
.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.caltag{ min-height:92px; background:var(--panel); border:1px solid var(--line);
         border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:4px; }
.caltag.leer{ background:none; border:none; }
.caltag.heutetag{ outline:2px solid var(--accent); outline-offset:-2px; }
.calnum{ font-weight:800; font-size:12px; color:var(--muted); }
.caltag.heutetag .calnum{ color:var(--accent); }
.calchip{ border:none; text-align:left; font-size:11px; font-weight:600; line-height:1.3;
          padding:3px 6px; border-radius:6px; cursor:pointer; color:#10202c;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calchip.abgesagt{ text-decoration:line-through; opacity:.55; }
.calchip.f0{ background:#8fd2a5; } .calchip.f1{ background:#8fc4e8; }
.calchip.f2{ background:#e8b6d9; } .calchip.f3{ background:#f0cf8a; }
.calchip.f4{ background:#b8b6ee; } .calchip.f5{ background:#a5ddd6; }
.callegende{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; align-items:center; }
.callg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.caldot{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.caldot.f0{ background:#8fd2a5; } .caldot.f1{ background:#8fc4e8; }
.caldot.f2{ background:#e8b6d9; } .caldot.f3{ background:#f0cf8a; }
.caldot.f4{ background:#b8b6ee; } .caldot.f5{ background:#a5ddd6; }
/* Absage-Kennzeichnung in der Terminliste */
.tmabgesagt{ display:inline-block; background:#5a1f1f; color:#ff9a8a; font-weight:800;
             font-size:11px; padding:2px 8px; border-radius:999px; margin-left:8px; }