/* ===== Farben: dunkel (Standard) ===== */
:root,
:root[data-theme="dark"]{
  --bg:#0e1116; --bg2:#161b22; --bg3:#1d2430;
  --fg:#e8edf4; --fgStrong:#fff; --dim:#93a1b5; --line:#2a3444;
  --acc:#4da3ff; --ok:#3fcf8e; --warn:#f5a623; --hot:#ff5f6d;
  --sattler:#4da3ff; --kurscheidt:#f5a623;
  --kurzBg:linear-gradient(135deg,rgba(77,163,255,.13),rgba(124,92,255,.09));
  --merkeBg:rgba(63,207,142,.09); --merkeLn:rgba(63,207,142,.28);
  --persBg:rgba(245,166,35,.09);  --persLn:rgba(245,166,35,.28);
  --shadow:none;
}
/* ===== Farben: hell ===== */
:root[data-theme="light"]{
  --bg:#f7f9fc; --bg2:#fff; --bg3:#eef2f8;
  --fg:#1a2230; --fgStrong:#000; --dim:#5c6b80; --line:#dde4ee;
  --acc:#0b66d0; --ok:#0f9d63; --warn:#b8730a; --hot:#d63241;
  --sattler:#0b66d0; --kurscheidt:#b8730a;
  --kurzBg:linear-gradient(135deg,rgba(11,102,208,.08),rgba(124,92,255,.06));
  --merkeBg:rgba(15,157,99,.08);  --merkeLn:rgba(15,157,99,.3);
  --persBg:rgba(184,115,10,.08);  --persLn:rgba(184,115,10,.3);
  --shadow:0 1px 2px rgba(20,35,60,.05),0 2px 8px rgba(20,35,60,.04);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--fg); overflow:hidden;
  -webkit-text-size-adjust:100%;
  transition:background .18s,color .18s;
}
b,strong{color:var(--fgStrong);font-weight:640}
kbd{
  background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:12px;font-family:inherit
}

/* ---------- Kopfzeile ---------- */
#top{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;background:var(--bg2);border-bottom:1px solid var(--line);
  height:56px;flex:0 0 auto;
}
#top h1{font-size:15px;font-weight:700;white-space:nowrap}
#top h1 span{color:var(--dim);font-weight:400}
.tabs{display:flex;gap:6px;margin-left:auto}
.tab{
  padding:7px 15px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;transition:.15s;
}
.tab:hover{color:var(--fg)}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff}
#themeBtn{
  width:36px;height:36px;flex:0 0 36px;border-radius:9px;
  border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:16px;line-height:1;transition:.15s;
}
#themeBtn:hover{background:var(--bg3)}
#burger{display:none;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--fg);cursor:pointer;font-size:17px}

/* ---------- Layout ---------- */
#main{height:calc(100vh - 56px);height:calc(100dvh - 56px);overflow:hidden}
.view{display:none;height:100%}
.view.on{display:flex}

/* ---------- LERNEN ---------- */
#lern{flex-direction:row}
#lernNav{
  width:300px;flex:0 0 300px;border-right:1px solid var(--line);
  background:var(--bg2);overflow-y:auto;display:flex;flex-direction:column;
}
#navSearchBox{padding:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2);z-index:2}
#navSearch{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);font:inherit;font-size:14px;
}
#navSearch:focus{outline:none;border-color:var(--acc)}
#navList{padding:10px;flex:1}
.grp{margin-bottom:15px}
.grp-t{
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:6px 10px;
}
.nav-i{
  padding:8px 11px;border-radius:7px;cursor:pointer;font-size:13.5px;
  line-height:1.4;transition:.12s;color:var(--fg);opacity:.82;
}
.nav-i:hover{background:var(--bg3);opacity:1}
.nav-i.on{background:var(--acc);color:#fff;font-weight:600;opacity:1}
#lernBody{flex:1;overflow-y:auto;padding:28px 36px}

/* ---------- Antwortdarstellung ---------- */
.a-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;background:var(--bg3);color:var(--dim);
}
.badge.s{background:color-mix(in srgb,var(--sattler) 16%,transparent);color:var(--sattler)}
.badge.k{background:color-mix(in srgb,var(--kurscheidt) 16%,transparent);color:var(--kurscheidt)}
.a-frage{font-size:23px;font-weight:700;line-height:1.3;margin-bottom:18px}
.a-kurz{
  background:var(--kurzBg);border-left:3px solid var(--acc);
  border-radius:0 10px 10px 0;padding:15px 18px;
  font-size:16px;line-height:1.65;margin-bottom:20px;
}
.sec{margin-bottom:20px}
.sec h3{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);
  margin-bottom:9px;font-weight:700;
}
.pts{list-style:none}
.pts li{
  padding:8px 0 8px 24px;position:relative;line-height:1.6;
  border-bottom:1px solid var(--line);font-size:15px;
}
.pts li:last-child{border:none}
.pts li:before{
  content:"";position:absolute;left:6px;top:15px;
  width:6px;height:6px;border-radius:50%;background:var(--acc);
}
.detail{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:15px 18px;font-size:14.5px;line-height:1.75;box-shadow:var(--shadow);
}
.merke{
  background:var(--merkeBg);border:1px solid var(--merkeLn);
  border-radius:10px;padding:13px 17px;font-size:14.5px;line-height:1.65;
}
.merke:before{content:"MERKE  ";font-size:10.5px;letter-spacing:1.2px;color:var(--ok);font-weight:700}
.pers{
  background:var(--persBg);border:1px solid var(--persLn);
  border-radius:10px;padding:13px 17px;font-size:14.5px;line-height:1.65;
}
.pers:before{content:"EIGENE ANTWORT VORBEREITEN  ";font-size:10.5px;letter-spacing:1.2px;color:var(--warn);font-weight:700}

.ph{color:var(--dim);text-align:center;padding:70px 20px}
.ph h2{font-size:20px;color:var(--fg);margin-bottom:12px;font-weight:640}
.ph p{max-width:520px;margin:0 auto 10px}

/* ---------- KARTEN ---------- */
#karten{flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;overflow-y:auto}
#cardWrap{width:100%;max-width:760px}
#card{
  background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:32px;min-height:320px;display:flex;flex-direction:column;
  justify-content:center;cursor:pointer;transition:.15s;box-shadow:var(--shadow);
}
#cardQ{font-size:22px;font-weight:700;line-height:1.35;text-align:center}
#cardA{margin-top:22px;display:none;text-align:left}
#cardA.on{display:block}
#cardHint{text-align:center;color:var(--dim);font-size:12.5px;margin-top:18px}
.kbtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.kb{
  padding:10px 19px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;transition:.14s;
}
.kb:hover{border-color:var(--acc)}
.kb.sm{padding:7px 14px;font-size:13px}
.kb.sm.on{background:var(--acc);border-color:var(--acc);color:#fff}
.kb.g{border-color:var(--merkeLn);color:var(--ok)}
.kb.r{border-color:color-mix(in srgb,var(--hot) 40%,transparent);color:var(--hot)}
#kStat{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums;text-align:center}

/* ---------- SPICKZETTEL ---------- */
#spick{overflow-y:auto;padding:26px 34px;display:block}
#spick.on{display:block}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:15px;max-width:1400px}
.sp-c{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:17px 19px;box-shadow:var(--shadow)}
.sp-c h3{font-size:13.5px;font-weight:700;margin-bottom:10px;color:var(--acc)}
.sp-c ol,.sp-c ul{padding-left:19px;font-size:13.5px;line-height:1.75}
.sp-c li::marker{color:var(--dim)}
.sp-h{font-size:20px;font-weight:700;margin:24px 0 14px}
.sp-h:first-child{margin-top:0}
.foot{
  max-width:1400px;margin:30px auto 10px;padding:16px 2px;
  border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.7;
}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}

/* ---------- Mobil ---------- */
@media(max-width:820px){
  #top{padding:10px 12px;gap:8px}
  #top h1{font-size:13.5px}
  #top h1 span{display:none}
  #burger{display:block}
  .tabs{
    position:fixed;top:56px;left:0;right:0;z-index:30;
    flex-direction:column;gap:0;background:var(--bg2);
    border-bottom:1px solid var(--line);padding:8px;display:none;
  }
  .tabs.open{display:flex}
  .tab{width:100%;text-align:left;border:none;border-radius:8px;padding:12px 14px;font-size:15px}

  #lern{flex-direction:column}
  #lernNav{
    width:100%;flex:0 0 auto;max-height:44%;
    border-right:none;border-bottom:1px solid var(--line);
  }
  #lernBody{padding:20px 16px}
  .a-frage{font-size:20px}
  .a-kurz{font-size:15px;padding:13px 15px}
  #spick{padding:18px 14px}
  .sp-grid{grid-template-columns:1fr}
  #card{padding:22px;min-height:260px}
  #cardQ{font-size:19px}
  #karten{padding:16px;gap:14px;justify-content:flex-start}
}