/* Live-Demo: Leiste und Handy-Modus (Vorbild: TeacherOS Lite). Gilt nur für diese Demo-Seite. */
#demo-leiste{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:8px 14px;background:#292236;color:#fff4e8;font:500 14px/1.35 system-ui,sans-serif}
#demo-leiste b{color:#f0b4c8}
#demo-leiste button{font:inherit;border:1px solid #f0b4c8;background:transparent;color:#fff4e8;border-radius:999px;padding:3px 12px;cursor:pointer}
#demo-leiste a{color:#f0b4c8}
#demo-fokus{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#1f2533}
#demo-fokus[hidden]{display:none}
#demo-fokus button{font:600 15px/1.2 system-ui,sans-serif;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #3d4759;
  background:#2a3245;color:#fff;cursor:pointer}
#demo-fokus button[aria-expanded=true]{background:#f0b4c8;color:#292236;border-color:#f0b4c8}
#demo-kurs{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#benotung-root .app{position:relative;min-width:0}
#benotung-root .main{min-width:0}
#benotung-root .demo-tools{display:contents}
#benotung-root .demo-tools-kopf,#benotung-root .demo-backdrop{display:none}
@media (max-width:820px){
  #demo-leiste{position:static;gap:10px;padding:6px 12px;font-size:13px}
  #demo-leiste .lang{display:none}
  #benotung-root[data-focus] .app,#benotung-root[data-focus] .app.collapsed{grid-template-columns:minmax(0,1fr);
    height:calc(100dvh - var(--demo-kopf,96px));min-height:0;overflow:hidden}
  #benotung-root[data-focus] .sidebar.rail{display:none}
  #benotung-root[data-focus] .sidebar:not(.rail){position:absolute;inset:0 auto 0 0;width:min(340px,90%);height:100%;max-height:none;
    z-index:12;overflow:auto;box-shadow:0 0 40px rgba(0,0,0,.35)}
  #benotung-root[data-focus] .demo-backdrop{display:block;position:absolute;inset:0;z-index:11;border:0;border-radius:0;
    background:rgba(0,0,0,.4);width:100%;height:100%;padding:0}
  #benotung-root[data-focus] .main{display:flex;flex-direction:column;padding:0;height:100%;overflow:hidden}
  #benotung-root[data-focus] .demo-tools{display:none}
  #benotung-root[data-focus][data-tools] .demo-tools{display:block;position:absolute;inset:0;z-index:10;overflow:auto;padding:12px;
    background:var(--bg,#f4f6fb);overscroll-behavior:contain}
  #benotung-root[data-focus] .demo-tools-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
  #benotung-root[data-focus] .demo-tools .btn,#benotung-root[data-focus] .demo-tools .tab,#benotung-root[data-focus] .sidebar button{min-height:44px}
  #benotung-root[data-focus] .demo-tools input,#benotung-root[data-focus] .demo-tools select{font-size:16px}
  #benotung-root[data-focus] .demo-matrix-pane{display:flex;flex-direction:column;flex:1;min-height:0}
  #benotung-root[data-focus] .demo-matrix-pane>.hint{display:none}
  #benotung-root[data-focus] .matrix-wrap{flex:1;min-height:0;overflow:auto;border-radius:0;border-left:0;border-right:0;
    overscroll-behavior:contain;box-shadow:none}
  #benotung-root[data-focus] table.matrix thead{position:sticky;top:0;z-index:4}
  #benotung-root[data-focus] table.matrix thead th{position:static}
  #benotung-root[data-focus] table.matrix thead th.stu-name{position:sticky;left:0;z-index:5}
  #benotung-root[data-focus] .gcell-btn{min-height:44px}
  #benotung-root .modal-back{padding:6px}
  #benotung-root .modal{max-height:100%;max-width:100%}
}