/* 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;}

/* ---------- Brüche (ab 2. Klasse: mehrstufige Terme lesbar halten) ---------- */
.frac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; line-height:1.05; margin:0 3px;
  font-variant-numeric:tabular-nums; font-weight:700;
}
.frac .fz{ padding:0 3px; }
.frac .fn{ padding:0 3px; border-top:2px solid currentColor; }

/* ---------- Jahresauswahl (Startseite) ---------- */
.schultyp-toggle{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.stbtn{
  font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  background:var(--card); color:var(--ink-soft);
  border:2.5px solid var(--line); border-radius:99px; padding:9px 18px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.stbtn:hover{ border-color:var(--marker); }
.stbtn.active{
  background:var(--marker-soft); border-color:var(--marker-deep); color:var(--marker-deep);
}
.yeargrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:8px; }
.yearcard{
  background:var(--card); border:2.5px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; text-decoration:none; color:inherit; display:block;
  transition:transform .15s ease, border-color .15s ease;
}
.yearcard:hover{ transform:translateY(-2px); border-color:var(--marker); }
.yearcard .ynum{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em;
  color:var(--marker-deep); background:var(--marker-soft);
  border-radius:99px; padding:3px 10px; margin-bottom:8px;
}
.yearcard h3{ margin:2px 0 6px; font-size:19px; }
.yearcard p{ margin:0; font-size:14px; color:var(--ink-soft); }
.yearcard .ybar{
  height:8px; border-radius:99px; background:var(--paper);
  border:1.5px solid var(--line); overflow:hidden; margin-top:12px;
}
.yearcard .ybar i{ display:block; height:100%; background:var(--ok); }

/* ---------- Konstruktionsfläche (konstruktion.js) ---------- */
.kkleiste{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.kkwerk{
  font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  background:var(--card); color:var(--ink);
  border:2px solid var(--line); border-radius:12px; padding:8px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.kkwerk:hover{ border-color:var(--marker); }
.kkwerk.aktiv{ border-color:var(--marker); background:var(--marker-soft); color:var(--marker-deep); }
.kkwerk.kknebensache{ font-weight:700; font-size:13px; color:var(--ink-soft); }
.kkwerk:disabled{ opacity:.4; cursor:not-allowed; }
.kkflaeche{
  display:block; width:100%; max-width:520px; height:auto; margin:0 auto;
  border:1.5px solid var(--line); border-radius:14px;
  touch-action:none; cursor:crosshair; user-select:none;
}
.kkstatus{
  margin:8px 0 0; min-height:1.4em; text-align:center;
  font-size:13.5px; color:var(--ink-soft);
}

/* ---------- Maskottchen ----------
   Der Octopus sitzt über dem Seitenkopf aller Unterseiten. Die Startseite hat
   ihn größer als eigenes Bild (header.hero) und bekommt ihn deshalb hier nicht
   noch einmal. Der Pfad gilt relativ zu dieser Datei, also auch aus den Unterordnern. */
header.top:not(.hero)::before{
  content:""; display:block; width:64px; height:64px; margin:0 auto 6px;
  background:url("octopus.svg") center/contain no-repeat;
}

/* Okto, der Lerncoach, ist der Octopus aus dem Logo */
.coach .avatar img{ width:30px; height:30px; display:block; }

/* ---------- Schmale Bildschirme ----------
   Lange Wörter und Adressen dürfen umbrechen, Tabellen scrollen innerhalb ihrer
   Spalte statt die ganze Seite zu verbreitern. */
body{ overflow-wrap:break-word; }
/* Tabellen in AGB und Datenschutz nutzen das Tabellengerüst der Stellenwerttafel,
   brauchen aber normale Schrift und dürfen auf dem Handy seitlich scrollen. */
table.swt.vertrag{ display:block; max-width:100%; overflow-x:auto; font-size:15px; }
table.swt.vertrag td, table.swt.vertrag th{ font-size:15px; font-weight:600; padding:8px 12px; text-align:left; min-width:0; text-transform:none; letter-spacing:0; color:var(--ink); }