/* High Performance Learning — gemeinsames Design (Rechenheft + Filzstift) */
:root{
  --paper:#F6FAFE;
  --grid:#DFEBF7;
  --ink:#1A2E56;
  --ink-soft:#5C6E90;
  --card:#FFFFFF;
  --line:#D3E2F1;
  --marker:#FF7A1F;
  --marker-deep:#D95F06;
  --marker-soft:#FFF0E3;
  --ok:#0E9F5D;
  --ok-bg:#E3F6EC;
  --trap:#CC4527;
  --trap-bg:#FDECE6;
  --note:#FFF3C4;
  --note-ink:#7A5E00;
  --focus:#2E6BE6;
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1830; --grid:#1A2848; --ink:#E8EEFB; --ink-soft:#9DACCB;
    --card:#16233F; --line:#26375C;
    --marker:#FF8A38; --marker-deep:#FFA05C; --marker-soft:#33261A;
    --ok:#3BC98A; --ok-bg:#12301F;
    --trap:#FF7A5C; --trap-bg:#3A1D14;
    --note:#3A3212; --note-ink:#E8CE6E;
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:26px 26px;
  line-height:1.55;
  min-height:100vh;
  padding-bottom:90px;
}
.display{
  font-family:"Arial Rounded MT Bold", "SF Pro Rounded", ui-rounded, "Nunito", -apple-system, sans-serif;
  letter-spacing:-0.01em;
}
.wrap{max-width:660px; margin:0 auto; padding:20px 16px;}
.wrap.wide{max-width:860px;}

/* ---------- Kopf ---------- */
header.top{padding-top:26px; text-align:center;}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--marker-deep);
  background:var(--marker-soft); border-radius:99px; padding:4px 14px;
}
header.top h1{font-size:30px; margin-top:10px;}
header.top p.sub{color:var(--ink-soft); font-size:15px; margin-top:4px;}
a.home{
  display:inline-block; margin-top:8px; color:var(--ink-soft);
  font-size:13px; font-weight:700; text-decoration:none;
}
a.home:hover{color:var(--marker-deep);}

/* ---------- Lernpfad (Fortschritt) ---------- */
.path{display:flex; justify-content:space-between; gap:2px; margin:26px auto 8px; max-width:640px;}
.path .step{flex:1; text-align:center; position:relative;}
.path .step::before{
  content:""; position:absolute; top:13px; left:-50%; width:100%; height:3px;
  background:var(--line); z-index:0;
}
.path .step:first-child::before{display:none;}
.path .dot{
  position:relative; z-index:1;
  width:28px; height:28px; border-radius:50%; margin:0 auto;
  background:var(--card); border:3px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--ink-soft);
  transition:all .3s;
}
.path .lbl{font-size:10.5px; font-weight:700; color:var(--ink-soft); margin-top:4px;}
.path .step.done .dot{background:var(--ok); border-color:var(--ok); color:#fff;}
.path .step.done::before{background:var(--ok);}
.path .step.now .dot{background:var(--marker); border-color:var(--marker); color:#fff; transform:scale(1.15);}
.path .step.now .lbl{color:var(--marker-deep);}
.path .step.now::before{background:var(--ok);}
@media(max-width:520px){ .path .lbl{display:none;} }

/* ---------- Karten & Bausteine ---------- */
main#app{margin-top:14px;}
.card{
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:22px;
  box-shadow:0 3px 14px rgba(26,46,86,.06);
  margin-bottom:16px;
  animation:pop .35s ease both;
}
@keyframes pop{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  .card{animation:none;}
  *{transition:none !important;}
}
.card h2{font-size:22px; margin-bottom:10px;}
.card p{margin-bottom:10px;}
.card p:last-child{margin-bottom:0;}
.muted{color:var(--ink-soft); font-size:14px;}
.bignum{font-variant-numeric:tabular-nums; font-weight:800;}

/* Coach-Notiz (Post-it) */
.coach{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--note); color:var(--note-ink);
  border-radius:6px 18px 18px 18px;
  padding:14px 16px; margin-bottom:16px;
  transform:rotate(-0.4deg);
  box-shadow:2px 3px 0 rgba(26,46,86,.08);
  font-size:15px;
}
.coach .avatar{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  background:var(--card); border:2px solid var(--note-ink);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.coach b{font-weight:800;}

/* Feedback-Boxen */
.fb{border-radius:14px; padding:14px 16px; margin-top:14px; font-size:15px; animation:pop .3s ease both;}
.fb.ok{background:var(--ok-bg); color:var(--ok); border:1.5px solid var(--ok);}
.fb.trap{background:var(--trap-bg); color:var(--trap); border:1.5px solid var(--trap);}
.fb.info{background:var(--marker-soft); color:var(--marker-deep); border:1.5px solid var(--marker);}
.fb b{font-weight:800;}

/* Buttons */
.btn{
  display:inline-block; border:none; cursor:pointer;
  font-family:inherit; font-size:17px; font-weight:800;
  padding:13px 26px; border-radius:99px;
  background:var(--marker); color:#fff;
  box-shadow:0 3px 0 var(--marker-deep);
  transition:transform .12s, box-shadow .12s;
  text-decoration:none;
}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--marker-deep);}
.btn.secondary{
  background:var(--card); color:var(--ink); border:2px solid var(--line);
  box-shadow:0 3px 0 var(--line);
}
.btn.small{font-size:14px; padding:8px 18px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px;}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.nextrow{margin-top:18px; text-align:right;}

/* Antwort-Optionen */
.opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.opt{
  flex:1 1 140px; cursor:pointer; font-family:inherit;
  font-size:18px; font-weight:800; color:var(--ink);
  background:var(--card); border:2.5px solid var(--line);
  border-radius:14px; padding:16px 12px; text-align:center;
  transition:border-color .15s, transform .12s;
}
.opts.col{flex-direction:column;}
.opts.col .opt{flex:none; text-align:left; font-size:15px; font-weight:600;}
.opt:hover{border-color:var(--marker);}
.opt.right{border-color:var(--ok); background:var(--ok-bg); color:var(--ok);}
.opt.wrong{border-color:var(--trap); background:var(--trap-bg); color:var(--trap);}
.opt:disabled{cursor:default; opacity:.9;}
.opt .sm{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:3px;}
.opt svg{display:block; margin:0 auto 6px;}

/* Eingaben */
.inputrow{display:flex; gap:10px; margin-top:12px; align-items:center; flex-wrap:wrap;}
input[type=text]{
  font-family:inherit; font-size:20px; font-weight:800; color:var(--ink);
  width:110px; text-align:center;
  padding:11px; border:2.5px solid var(--line); border-radius:12px;
  background:var(--card);
}
input[type=text]:focus{border-color:var(--marker); outline:none;}
textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  padding:12px; border:2.5px solid var(--line); border-radius:12px;
  background:var(--card); resize:vertical; min-height:80px;
}
textarea:focus{border-color:var(--marker); outline:none;}

/* Balken-Visual */
.bars{margin-top:16px;}
.barrow{margin-bottom:16px;}
.barrow .blabel{font-weight:800; font-size:15px; margin-bottom:6px; display:flex; justify-content:space-between;}
.bar{
  position:relative; height:44px; border-radius:10px;
  background:var(--card); border:2.5px solid var(--ink);
  overflow:hidden;
}
.bar .fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(180deg,#8B5A2B,#5C3A1A);
  transition:width 1s ease;
}
@media (prefers-color-scheme: dark){ .bar{border-color:var(--line);} }
.bar .ticks{position:absolute; inset:0; display:flex;}
.bar .ticks i{flex:1; border-right:1.5px dashed rgba(120,140,180,.5);}
.bar .ticks i:last-child{border-right:none;}

/* Stellenwerttafel */
table.swt{border-collapse:collapse; margin:12px auto; font-size:18px;}
table.swt th{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); padding:4px 14px; font-weight:800;
}
table.swt td{
  border:2px solid var(--line); background:var(--card);
  padding:8px 18px; text-align:center; font-weight:800; font-size:22px;
  min-width:54px;
}
table.swt td.comma{border:none; background:none; font-size:26px; color:var(--marker); min-width:auto; padding:0 4px;}
table.swt td.hl{background:var(--marker-soft); border-color:var(--marker); color:var(--marker-deep);}

/* Regel-Kasten */
.rule{
  border:2.5px dashed var(--marker); border-radius:14px;
  background:var(--marker-soft); padding:16px; margin-top:14px;
}
.rule h3{font-size:16px; color:var(--marker-deep); margin-bottom:8px;}
.rule ol{margin-left:20px;}
.rule li{margin-bottom:4px;}
.trapbox{
  border:2.5px solid var(--trap); border-radius:14px;
  background:var(--trap-bg); padding:16px; margin-top:14px; color:var(--trap);
}
.trapbox h3{font-size:16px; margin-bottom:6px;}

/* Zahlenstrahl */
.strahl-wrap{margin:14px 0; text-align:center;}
.strahl-wrap svg{max-width:100%; height:auto;}
.strahl-wrap svg.clickable{cursor:pointer;}

/* Ordnen-Chips */
.chips{display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
.chip{
  font-family:inherit; font-size:22px; font-weight:800; color:var(--ink);
  background:var(--card); border:2.5px solid var(--line); border-radius:14px;
  padding:14px 20px; cursor:pointer; transition:all .15s;
}
.chip:hover{border-color:var(--marker);}
.chip.picked{background:var(--ok-bg); border-color:var(--ok); color:var(--ok);}
.chip .order{
  display:inline-flex; width:22px; height:22px; border-radius:50%;
  background:var(--ok); color:#fff; font-size:13px;
  align-items:center; justify-content:center; margin-right:6px;
  vertical-align:2px;
}

/* Mastery-Check */
.checkbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.checkbar .qnum{font-weight:800; color:var(--ink-soft); font-size:14px;}
.star{color:var(--marker); font-size:14px; font-weight:800;}
.resultlist{list-style:none; margin-top:10px;}
.resultlist li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1.5px solid var(--line); font-size:15px;
}
.resultlist li:last-child{border-bottom:none;}
.resultlist .mark{flex:0 0 24px; font-weight:900; font-size:17px;}
.resultlist .mark.ok{color:var(--ok);}
.resultlist .mark.no{color:var(--trap);}
.verdict{text-align:center; padding:10px 0 4px;}
.verdict .big{font-size:44px;}
.verdict h2{font-size:24px; margin-top:4px;}

/* Abschluss */
.badge{text-align:center; padding:8px 0;}
.badge .medal{font-size:62px; display:block; animation:pop .5s ease both;}
.srs{list-style:none; margin-top:10px;}
.srs li{
  display:flex; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1.5px dashed var(--line); font-size:15px;
}
.srs li:last-child{border-bottom:none;}
.srs li:has(a.lrow){padding:0;}
.srs a.lrow{display:flex; gap:12px; align-items:center; width:100%; padding:12px 6px; text-decoration:none; color:inherit;}
.srs .ltitle{flex:1; font-weight:700;}
.srs .when{font-weight:800; min-width:105px;}
.srs .date{color:var(--ink-soft); font-size:13.5px;}

/* Diagnose-Schublade */
#diagbtn{
  position:fixed; right:14px; bottom:14px; z-index:50;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--ink); color:var(--paper); border:none;
  border-radius:99px; padding:9px 16px; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
#diagpanel{
  position:fixed; right:14px; bottom:58px; z-index:50;
  width:min(360px, calc(100vw - 28px)); max-height:50vh; overflow:auto;
  background:var(--card); border:2px solid var(--ink);
  border-radius:14px; padding:14px; display:none;
  font-size:12.5px; box-shadow:0 8px 30px rgba(0,0,0,.25);
}
#diagpanel.open{display:block;}
#diagpanel h3{font-size:13px; margin-bottom:6px;}
#diagpanel p.hint{color:var(--ink-soft); margin-bottom:8px;}
#diagpanel ul{list-style:none;}
#diagpanel li{padding:5px 0; border-bottom:1px solid var(--line); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;}
#diagpanel li b{color:var(--marker-deep);}

/* ---------- Hub / Modul-Übersicht ---------- */
.hubgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; margin-top:16px;}
.modcard{
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:0 3px 14px rgba(26,46,86,.06);
}
.modcard.locked{opacity:.55;}
.modcard h3{font-size:16px; margin-bottom:2px;}
.modcard .mnum{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em;
  color:var(--marker-deep); background:var(--marker-soft);
  border-radius:99px; padding:2px 10px; margin-bottom:6px;
}
.modcard .mstat{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}
.lessonlist{list-style:none; margin-top:12px;}
.lessonlist li{border-bottom:1.5px dashed var(--line);}
.lessonlist li:last-child{border-bottom:none;}
.lessonlist .lrow{
  display:flex; align-items:center; gap:10px;
  padding:14px 6px; width:100%;
  text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:rgba(255,122,31,.15);
}
a.lrow:active{background:var(--marker-soft); border-radius:10px;}
.lessonlist .lnum{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:var(--card); border:2.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--ink-soft);
}
.lessonlist li.done .lnum{background:var(--ok); border-color:var(--ok); color:#fff;}
.lessonlist li.avail .lnum{border-color:var(--marker); color:var(--marker-deep);}
.lessonlist .ltitle{flex:1; font-weight:700; font-size:15px;}
.lessonlist li.planned .ltitle{color:var(--ink-soft); font-weight:600;}
.lessonlist a.ltitle{color:var(--ink); text-decoration:none;}
.lessonlist a.ltitle:hover{color:var(--marker-deep);}
.tag{
  font-size:11px; font-weight:800; border-radius:99px; padding:3px 10px; white-space:nowrap;
}
.tag.done{background:var(--ok-bg); color:var(--ok);}
.tag.avail{background:var(--marker-soft); color:var(--marker-deep);}
.tag.planned{background:var(--paper); color:var(--ink-soft); border:1.5px solid var(--line);}
.progressbar{
  height:10px; border-radius:99px; background:var(--paper);
  border:1.5px solid var(--line); overflow:hidden; margin-top:8px;
}
.progressbar .pfill{height:100%; background:var(--ok); border-radius:99px; transition:width .6s ease;}