/* TMS-Trainer – Stylesheet (hell/dunkel automatisch) */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface2: #eef1f8;
  --text: #1b2232;
  --muted: #5d6679;
  --border: #dde2ee;
  --primary: #2f5bea;
  --primary-ink: #ffffff;
  --primary-soft: #e6ecfe;
  --ok: #188a4a;
  --ok-soft: #e1f5e9;
  --bad: #c9352b;
  --bad-soft: #fde9e7;
  --warn: #b86e00;
  --warn-soft: #fff3dc;
  --mid: #d39b1b;
  --chart1: #2f5bea;
  --chart2: #e0742a;
  --grid: #e3e7f0;
  --shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 4px 16px rgba(20, 30, 60, .06);
  --r: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f131c;
    --surface: #171c28;
    --surface2: #1f2533;
    --text: #e6e9f2;
    --muted: #9aa3b7;
    --border: #2b3242;
    --primary: #6d8dff;
    --primary-ink: #0b1020;
    --primary-soft: #1e2a4d;
    --ok: #4cc97f;
    --ok-soft: #173326;
    --bad: #ff7a70;
    --bad-soft: #3a1c1b;
    --warn: #f2b14b;
    --warn-soft: #3a2c12;
    --mid: #e8b84a;
    --chart1: #7b98ff;
    --chart2: #ff9a55;
    --grid: #283043;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: .2em 0 .4em; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .7em; }
h3 { font-size: 1rem; margin: 1em 0 .5em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.loading { padding: 80px 16px; text-align: center; color: var(--muted); }
button, input, select { font: inherit; color: inherit; }

/* Layout */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); text-decoration: none !important; }
.brand .logo { background: var(--primary); color: var(--primary-ink); border-radius: 8px; padding: 2px 7px; font-size: .85rem; letter-spacing: .04em; }
.brand.big { font-size: 1.5rem; justify-content: center; margin-bottom: 6px; }
.brand.big .logo { font-size: 1.1rem; padding: 4px 10px; }
.mainnav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.navlink { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; color: var(--muted); white-space: nowrap; font-size: .93rem; text-decoration: none !important; }
.navlink:hover { background: var(--surface2); color: var(--text); }
.navlink.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.countdown { font-size: .82rem; color: var(--muted); white-space: nowrap; background: var(--surface2); padding: 4px 10px; border-radius: 99px; }
#main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 80px; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 8px 12px 0; gap: 6px 10px; }
  .mainnav { order: 3; flex-basis: 100%; padding-bottom: 6px; }
  .navlink { flex-direction: column; gap: 0; padding: 5px 9px; font-size: .72rem; }
  .navlink .ni { font-size: 1.1rem; }
  .countdown { margin-left: auto; }
  #main { padding: 14px 12px 60px; }
  h1 { font-size: 1.35rem; }
}

/* Karten & Raster */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card.center { text-align: center; padding: 36px 20px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cardhead h1, .cardhead h2 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card { margin-bottom: 0; }
.grid2 + .card, .grid2 + section { margin-top: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hero > div:first-child { flex: 1 1 340px; }
.hero p { margin: 0; max-width: 60ch; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 10px; }
.kpis.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.kv { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kl { font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); width: 100%; } }

.pill { display: inline-block; font-size: .78rem; padding: 3px 10px; border-radius: 99px; background: var(--surface2); color: var(--muted); font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.mid { background: var(--warn-soft); color: var(--warn); }
.pill.no { background: var(--bad-soft); color: var(--bad); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; font-size: .95rem; text-decoration: none !important; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { background: var(--surface2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 11px; font-size: .85rem; border-radius: 8px; }
.btn.wide { width: 100%; }
.btn.flagged { border-color: var(--warn); color: var(--warn); }
.btn.dangerbtn { background: var(--bad); border-color: var(--bad); color: #fff; }
.linkbtn { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 8px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .formrow > input { font-weight: 400; color: var(--text); }
input, select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); min-width: 0; }
input:focus, select:focus, .btn:focus-visible, .opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.formrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; align-items: flex-end; }
.formrow > .field { flex: 1 1 180px; }
label.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; cursor: pointer; }
.formmsg { color: var(--bad); min-height: 1.2em; font-size: .9rem; }
.daypick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.daychip { position: relative; cursor: pointer; }
.daychip input { position: absolute; opacity: 0; }
.daychip span { display: inline-block; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.daychip input:checked + span { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.daychip input:focus-visible + span { outline: 2px solid var(--primary); }

/* Auth */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.authcard { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); text-align: center; }
.authform { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }

/* Meter */
.meter { height: 10px; background: var(--surface2); border-radius: 99px; overflow: hidden; flex: 1; min-width: 60px; }
.meter > div { height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s; }
.meter > div.good { background: var(--ok); }
.meter > div.mid { background: var(--mid); }
.meter > div.low { background: var(--bad); }
.meter.small { height: 6px; }

/* Tagesaufgaben */
.tasks { list-style: none; margin: 0 0 12px; padding: 0; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task .check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: .8rem; color: #fff; }
.task.done .check { background: var(--ok); border-color: var(--ok); }
.task.done .tlabel { color: var(--muted); text-decoration: line-through; }
.task .tbody { flex: 1; min-width: 0; }
.task .tlabel { font-weight: 600; }
.task .tdetail { font-size: .83rem; margin-bottom: 4px; }
.task.info { justify-content: center; padding: 16px; }

/* Schnellstart */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.qbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--surface2); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none !important; text-align: center; }
.qbtn:hover { background: var(--primary-soft); color: var(--primary); }
.qi { font-size: 1.3rem; }

/* Heatmap */
.heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; max-width: 420px; }
.heat.wide { grid-template-columns: repeat(16, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); max-width: 100%; }
.hc { display: inline-block; aspect-ratio: 1; min-width: 10px; border-radius: 3px; background: var(--surface2); }
.hc.l1 { background: color-mix(in srgb, var(--ok) 30%, var(--surface2)); }
.hc.l2 { background: color-mix(in srgb, var(--ok) 55%, var(--surface2)); }
.hc.l3 { background: color-mix(in srgb, var(--ok) 80%, var(--surface2)); }
.hc.l4 { background: var(--ok); }
.hc.today { outline: 2px solid var(--primary); outline-offset: 1px; }
.heatlegend { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.heatlegend .hc { width: 12px; }

/* Trefferquote */
.accbars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.accrow { display: grid; grid-template-columns: 64px 1fr 48px 44px; gap: 10px; align-items: center; }
.acclabel { font-weight: 600; font-size: .9rem; }
.accval { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Untertest-Kacheln */
.subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.subcard { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); box-shadow: var(--shadow); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.subcard:hover { border-color: var(--primary); transform: translateY(-1px); }
.subcard h3 { margin: 0 0 4px; }
.subcard p { margin: 2px 0; }
.subicon { font-size: 1.8rem; line-height: 1; }
.subcard > div:last-child { flex: 1; min-width: 0; }
.config select { min-width: 200px; }
.tips { margin-top: 16px; }
.tips summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.warnbox { background: var(--warn-soft); color: var(--warn); padding: 10px 14px; border-radius: 10px; }
.errorbox { border-color: var(--bad); }

/* Quiz */
.quizhead { position: sticky; top: 52px; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg); padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.qmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qprog { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; background: var(--surface2); padding: 4px 10px; border-radius: 8px; }
.timer.warn { background: var(--warn-soft); color: var(--warn); }
.timer.crit { background: var(--bad-soft); color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
@media (max-width: 760px) { .quizhead { top: 96px; } }

.quizlayout { display: block; }
.quizlayout.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.quizlayout.split .ctxpane { position: sticky; top: 112px; max-height: calc(100vh - 130px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 20px; }
@media (max-width: 900px) {
  .quizlayout.split { display: block; }
  .quizlayout.split .ctxpane { position: static; max-height: 55vh; margin-bottom: 14px; }
}
.qpane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.ctx { margin-bottom: 16px; }
.ctx.small { font-size: .9rem; }
.passage { background: var(--surface2); border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 8px; font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; }
.passage p { margin: .4em 0; }
.longtext { font-family: var(--serif); font-size: 1.02rem; line-height: 1.7; }
.longtext h3 { font-family: var(--font); font-size: 1.05rem; position: sticky; top: 0; background: var(--surface); padding: 10px 0 6px; margin: 0; }
.longtext p { margin: .7em 0; }
.pnum { display: inline-block; min-width: 1.6em; font-family: var(--font); font-size: .75rem; color: var(--muted); font-weight: 700; vertical-align: 1px; }
.stem { font-weight: 600; font-size: 1.04rem; margin-bottom: 14px; line-height: 1.55; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; line-height: 1.45; }
.opt:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.opt:disabled { cursor: default; }
.opt .letter, .revopts .letter { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--surface2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.opt.chosen { border-color: var(--primary); background: var(--primary-soft); }
.opt.chosen .letter { background: var(--primary); color: var(--primary-ink); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .letter { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .letter { background: var(--bad); color: #fff; }
.opt:disabled:not(.right):not(.wrong) { opacity: .7; }
.feedback { margin-top: 14px; padding: 12px 16px; border-radius: 10px; }
.feedback.ok { background: var(--ok-soft); }
.feedback.ok strong { color: var(--ok); }
.feedback.bad { background: var(--bad-soft); }
.feedback.bad strong { color: var(--bad); }
.expl { margin-top: 6px; font-size: .94rem; line-height: 1.55; }
.qnav { display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; }
.qnav .btn.primary { margin-left: auto; }
.gridwrap { margin-top: 14px; }
.gridwrap summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.qgrid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.gcell { width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: .82rem; font-variant-numeric: tabular-nums; }
.gcell.done { background: var(--primary-soft); border-color: var(--primary); }
.gcell.ok { background: var(--ok-soft); border-color: var(--ok); }
.gcell.bad { background: var(--bad-soft); border-color: var(--bad); }
.gcell.flag { box-shadow: inset 0 -3px 0 var(--warn); }
.gcell.cur { outline: 2px solid var(--text); outline-offset: 1px; }

/* Diagramme */
.chart { margin: 0 0 8px; }
.chart figcaption { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.chart svg { width: 100%; height: auto; max-height: 360px; display: block; }
.chart .grid, .trend .grid { stroke: var(--grid); stroke-width: 1; }
.chart .grid.v { stroke-dasharray: 2 4; }
.chart .axis { stroke: var(--muted); stroke-width: 1.2; }
.chart .tick, .trend .tick { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.chart .axlabel { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.chart .legend { fill: var(--text); font-size: 13px; font-family: var(--font); }
.c1 { fill: var(--chart1); }
.c2 { fill: var(--chart2); }
.line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.line.l1 { stroke: var(--chart1); }
.line.l2 { stroke: var(--chart2); }
.trend { width: 100%; height: auto; display: block; }
.tablewrap { overflow-x: auto; }
.datatable, table.plain { border-collapse: collapse; width: 100%; font-size: .93rem; }
.datatable th, .datatable td { border: 1px solid var(--border); padding: 7px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.datatable th:first-child, .datatable thead th { text-align: left; }
.datatable thead th { background: var(--surface2); }
table.plain th, table.plain td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.plain thead th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
table.plain tr.muted td { color: var(--muted); }
.cellbar { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.cellbar span { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.slow { color: var(--bad); }
.fast { color: var(--ok); }

/* Ergebnis */
.result h2 { font-size: 1.3rem; }
.bigscore { display: flex; align-items: baseline; gap: 16px; margin: 6px 0 10px; }
.bigscore .num { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bigscore .pct { font-size: 1.4rem; color: var(--muted); font-weight: 700; }
.topics { margin-top: 12px; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) 50px 120px; gap: 10px; align-items: center; font-size: .9rem; padding: 3px 0; }
.reviewlist { display: flex; flex-direction: column; gap: 6px; }
.rev { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.rev summary { cursor: pointer; line-height: 1.5; }
.rev[open] { background: var(--surface2); }
.rev .stem { margin-top: 10px; }
.badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: .8rem; color: #fff; }
.badge.ok { background: var(--ok); }
.badge.bad { background: var(--bad); }
.revopts { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.revopts li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; }
.revopts li.right { background: var(--ok-soft); }
.revopts li.right .letter { background: var(--ok); color: #fff; }
.revopts li.wrong { background: var(--bad-soft); }
.revopts li.wrong .letter { background: var(--bad); color: #fff; }

/* Fakten lernen */
.faktengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 12px; }
.agegroup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 4px 14px 12px; }
.agegroup h3 { color: var(--primary); }
.faktentable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.faktentable th { text-align: left; font-size: .75rem; color: var(--muted); text-transform: uppercase; padding: 4px 6px; }
.faktentable td { padding: 6px; border-top: 1px solid var(--border); }
.faktentable td:first-child { font-weight: 700; }

/* Kopfrechnen */
.drill { max-width: 560px; margin: 0 auto; text-align: center; }
.drillq { font-size: 2.4rem; font-weight: 800; margin: 24px 0 16px; font-variant-numeric: tabular-nums; }
.drillrow { display: flex; gap: 8px; justify-content: center; }
.drillin { font-size: 1.4rem; width: 200px; text-align: center; }
.drillfb { min-height: 1.6em; margin: 12px 0; font-weight: 700; }
.drillfb.ok { color: var(--ok); }
.drillfb.bad { color: var(--bad); }

/* Karteikarten */
.flashwrap { max-width: 680px; margin: 0 auto; }
.flashcard { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 34px 26px; min-height: 220px; margin: 10px 0 16px; display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; }
.ffront { font-size: 1.25rem; font-weight: 700; }
.fback { border-top: 1px dashed var(--border); padding-top: 18px; font-size: 1.05rem; line-height: 1.6; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade { flex-direction: column; gap: 0; padding: 10px 6px; }
.grade.g0 { border-color: var(--bad); color: var(--bad); }
.grade.g1 { border-color: var(--warn); color: var(--warn); }
.grade.g2 { border-color: var(--ok); color: var(--ok); }
.grade.g3 { border-color: var(--primary); color: var(--primary); }
.forecast { display: flex; gap: 8px; align-items: flex-end; height: 140px; }
.fcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.fbar { width: 70%; background: var(--primary); border-radius: 6px 6px 0 0; min-height: 2px; }

/* Lernplan */
.timeline { display: flex; gap: 4px; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
.tseg { display: flex; flex-direction: column; padding: 8px 10px; min-width: 70px; background: var(--surface2); font-size: .85rem; overflow: hidden; white-space: nowrap; }
.tseg.ph-grundlagen { background: color-mix(in srgb, var(--chart1) 18%, var(--surface)); }
.tseg.ph-training { background: color-mix(in srgb, var(--mid) 22%, var(--surface)); }
.tseg.ph-simulation { background: color-mix(in srgb, var(--chart2) 22%, var(--surface)); }
.tseg.ph-endspurt { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); }
.tseg.cur { box-shadow: inset 0 -4px 0 var(--primary); }
.phasedesc { padding-left: 18px; font-size: .92rem; }
.phasedesc li { margin: 4px 0; }
.planlist { display: flex; flex-direction: column; gap: 6px; }
.planday { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.planday.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.planday.past { opacity: .75; }
.planday summary { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-wrap: wrap; }
.planday .tasks { margin-top: 8px; }
.pdate { font-weight: 700; min-width: 110px; }
.pinfo { flex: 1; }

/* Statistik */
.weaklist { list-style: none; padding: 0; margin: 0; }
.weaklist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.danger { border-color: var(--bad); }

/* ---------- Lernbereich ---------- */
.spacer { height: 16px; }
.cta { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); }
.ctarow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ctarow h2 { margin: 2px 0 4px; }
.ctarow p { margin: 0; max-width: 70ch; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.levelbox { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--surface2); border-radius: 10px; }
.lvsub { font-weight: 700; }
.lvtag { display: inline-block; width: fit-content; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--surface2); color: var(--muted); }
.lvtag.low { background: var(--bad-soft); color: var(--bad); }
.lvtag.mid { background: var(--warn-soft); color: var(--warn); }
.lvtag.high { background: var(--ok-soft); color: var(--ok); }
.accrow.wide { grid-template-columns: 110px 1fr 56px 120px; }
@media (max-width: 560px) { .accrow.wide { grid-template-columns: 80px 1fr 44px; } .accrow.wide .lvtag { grid-column: 2 / 4; } }
.lessonlist { display: flex; flex-direction: column; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); text-decoration: none !important; background: var(--surface); }
.lrow:hover { border-color: var(--primary); }
.lrow.isdone .ltitle { color: var(--muted); }
.licon { font-size: 1.3rem; }
.lmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ltitle { font-weight: 600; }
.lbadge { font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.lbadge.done { background: var(--ok-soft); color: var(--ok); }
.lbadge.read { background: var(--warn-soft); color: var(--warn); }
.lbadge.new { background: var(--surface2); color: var(--muted); }
.lmark { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.lmark.bad { color: var(--bad); border: 1px solid var(--bad); }
.lmark.ok { color: var(--ok); border: 1px solid var(--ok); }
.nextlesson { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px; border-radius: 13px; background: var(--primary-soft); }
.nextlesson .lrow { flex: 1 1 300px; }
.pathlist { columns: 2; column-gap: 32px; font-size: .9rem; padding-left: 22px; }
.pathlist li { break-inside: avoid; margin: 2px 0; }
.pathlist li.isdone a { color: var(--muted); text-decoration: line-through; }
@media (max-width: 700px) { .pathlist { columns: 1; } }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tab { padding: 6px 12px; border-radius: 9px; color: var(--muted); text-decoration: none !important; font-weight: 600; font-size: .92rem; }
.tab:hover { background: var(--surface2); }
.tab.active { background: var(--primary-soft); color: var(--primary); }
.crumbs { margin-bottom: 8px; color: var(--muted); }
.lessonwrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.lessonwrap > .lesson { margin: 0; }
.ltoc { position: sticky; top: 72px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; font-size: .88rem; }
.ltoc ul { padding-left: 16px; margin: 8px 0 12px; }
.ltoc li { margin: 4px 0; }
@media (max-width: 900px) { .lessonwrap { display: block; } .ltoc { display: none; } }
.lesson { padding: 28px 34px; }
@media (max-width: 600px) { .lesson { padding: 18px 16px; } }
.lhead { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lesson h1 { font-size: 1.75rem; margin-top: 12px; }
.lsummary { font-size: 1.08rem; color: var(--muted); margin-top: 0; }
.mdbody { font-size: 1.04rem; line-height: 1.7; max-width: 76ch; }
.mdbody h3 { font-size: 1.28rem; margin: 1.6em 0 .5em; padding-top: 6px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.mdbody h4 { font-size: 1.06rem; margin: 1.3em 0 .4em; }
.mdbody p { margin: .7em 0; }
.mdbody ul, .mdbody ol { padding-left: 22px; }
.mdbody li { margin: .25em 0; }
.mdtable { border-collapse: collapse; width: 100%; font-size: .94rem; margin: 10px 0; }
.mdtable th, .mdtable td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.mdtable thead th { background: var(--surface2); }
.mdbox { margin: 16px 0; padding: 12px 16px; border-radius: 10px; border-left: 4px solid var(--primary); background: var(--primary-soft); }
.mdbox p:first-of-type { margin-top: 4px; }
.mdbox p:last-child { margin-bottom: 2px; }
.mdboxhead { font-weight: 700; }
.mdbox.tipp { border-color: var(--ok); background: var(--ok-soft); }
.mdbox.achtung { border-color: var(--warn); background: var(--warn-soft); }
.mdbox.beispiel { border-color: var(--muted); background: var(--surface2); }
.checksec { margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--border); }
.cq { margin: 18px 0 24px; }
.passbox { border-color: var(--ok); background: var(--ok-soft); }
.failbox { border-color: var(--warn); background: var(--warn-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); font-size: .85rem; background: var(--surface); }
.subcard.static { cursor: default; }
.subcard.static:hover { transform: none; }
.tipsbox ul { margin: 0; padding-left: 20px; }
.tipsbox li { margin: 4px 0; }