*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:#f5f7fc; --surface:#ffffff; --surface2:#eef2ff; --border:#d7dff1;
    --accent:#6f5ef6; --accent2:#5247c7; --text:#1f2745; --muted:#5f6888;
    --success:#178a5d; --success-bg:#e9f8f0; --danger:#d94d63; --danger-bg:#fff0f3;
    --radius:12px; --font:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
  }
  body { background:linear-gradient(180deg,#f9fbff 0%, #eef3ff 100%); color:var(--text); font-family:var(--font); min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem 4rem; }
  .quiz-shell { width:100%; max-width:680px; }
  .quiz-header { text-align:center; margin-bottom:2rem; }
  .quiz-header .tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); background:rgba(124,106,247,.15); border:1px solid rgba(124,106,247,.3); padding:4px 14px; border-radius:99px; margin-bottom:1rem; }
  .quiz-header h1 { font-size:2rem; font-weight:600; color:var(--text); margin-bottom:.4rem; }
  .quiz-header p { font-size:.9rem; color:var(--muted); }

  /* ── Semesterübersicht ── */

.semester-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.semester-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 1.4rem;
  text-align: left;

  font-family: var(--font);
  color: var(--text);

  background:
    linear-gradient(
      145deg,
      var(--surface),
      rgba(238, 243, 255, .92)
    );

  border: 1.5px solid var(--border);
  border-radius: 16px;

  cursor: pointer;

  transition:
    transform .18s,
    border-color .18s,
    box-shadow .18s,
    background .18s;
}

.semester-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);

  background:
    linear-gradient(
      145deg,
      rgba(124, 106, 247, .11),
      var(--surface)
    );

  box-shadow:
    0 12px 32px rgba(82, 71, 199, .08);
}

.semester-card.current {
  border-color: rgba(111, 94, 246, .45);
}

.semester-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.15rem;
}

.semester-number {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 13px;

  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;

  color: var(--accent2);

  background: rgba(124, 106, 247, .14);
  border: 1px solid rgba(124, 106, 247, .3);
}

.semester-current {
  padding: 4px 9px;

  border-radius: 99px;

  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;

  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(23, 138, 93, .22);
}

.semester-title {
  margin-bottom: 5px;

  font-size: 1.1rem;
  font-weight: 600;
}

.semester-description {
  margin-bottom: 12px;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.semester-modules {
  color: var(--accent2);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.semester-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  margin-top: auto;
  padding-top: 1.2rem;

  color: var(--muted);

  font-family: var(--mono);
  font-size: 10px;
}

  /* Module selection */
  .section-intro { margin-bottom:1rem; }
  .section-intro .eyebrow { display:block; margin-bottom:.35rem; color:var(--accent2); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
  .section-intro h2 { color:var(--text); font-size:1.15rem; font-weight:600; }
  .module-grid { display:grid; gap:12px; }
  .module-card { display:flex; align-items:center; gap:14px; width:100%; padding:1.25rem; color:var(--text); text-align:left; font-family:var(--font); background:linear-gradient(135deg,var(--surface),rgba(238,243,255,.96)); border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:transform .18s,border-color .18s,background .18s; }
  .module-card:hover { transform:translateY(-2px); border-color:var(--accent); background:linear-gradient(135deg,rgba(124,106,247,.12),var(--surface)); }
  .module-card:active { transform:translateY(0); }
  .module-icon { display:grid; place-items:center; flex:0 0 48px; height:48px; color:var(--accent2); font-family:var(--mono); font-size:1.25rem; font-weight:600; background:rgba(124,106,247,.14); border:1px solid rgba(124,106,247,.35); border-radius:12px; }
  .module-copy { display:flex; flex:1; min-width:0; flex-direction:column; }
  .module-title { margin-bottom:3px; font-size:1rem; font-weight:600; }
  .module-sub { color:var(--muted); font-size:12px; line-height:1.45; }
  .module-meta { margin-top:8px; color:var(--accent2); font-size:11px; font-weight:600; }
  .module-arrow { color:var(--muted); font-size:1.2rem; transition:transform .18s,color .18s; }
  .module-card:hover .module-arrow { color:var(--accent2); transform:translateX(3px); }

  /* Block selection cards */
  .block-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:1.5rem; }
  .block-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem; cursor:pointer; transition:all .2s; text-align:left; position:relative; }
  .block-card:hover:not(.disabled) { border-color:var(--accent); background:rgba(124,106,247,.08); }
  .block-card.active { border-color:var(--accent); background:rgba(124,106,247,.15); }
  .block-card.disabled { opacity:.5; cursor:not-allowed; }
  .block-card .bc-title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:.25rem; }
  .block-card .bc-sub { font-size:12px; color:var(--muted); }
  .block-card .bc-count { display:inline-block; margin-top:.5rem; font-size:11px; font-weight:600; color:var(--accent2); background:rgba(124,106,247,.15); padding:2px 10px; border-radius:99px; }
  .block-card .bc-badge { position:absolute; top:12px; right:12px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--surface2); border:1px solid var(--border); padding:2px 8px; border-radius:99px; }
  .block-card.full-width { grid-column:1 / -1; }

  .cat-filter { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:1.5rem; }
  .cat-btn { padding:6px 16px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-family:var(--font); font-size:13px; cursor:pointer; transition:all .2s; }
  .cat-btn:hover { border-color:var(--accent); color:var(--accent2); }
  .cat-btn.active { background:rgba(124,106,247,.2); border-color:var(--accent); color:var(--accent2); font-weight:500; }

  .start-count { font-size:13px; color:var(--muted); text-align:center; margin-bottom:1.5rem; }
  .start-btn { display:block; width:100%; padding:14px; background:var(--accent); color:#fff; font-family:var(--font); font-size:1rem; font-weight:600; border:none; border-radius:var(--radius); cursor:pointer; transition:opacity .2s, transform .1s; }
  .start-btn:hover { opacity:.88; }
  .start-btn:active { transform:scale(.98); }
  .start-btn:disabled { opacity:.4; cursor:not-allowed; }

  .back-link { display:inline-block; margin-bottom:1rem; font-size:13px; color:var(--muted); cursor:pointer; background:none; border:none; font-family:var(--font); }
  .back-link:hover { color:var(--accent2); }

  .empty-note { background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:2rem; text-align:center; color:var(--muted); font-size:14px; line-height:1.6; }

  .progress-wrap { margin-bottom:1.5rem; }
  .progress-row { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:8px; }
  .progress-row .q-cat { background:var(--surface2); border:1px solid var(--border); padding:2px 10px; border-radius:99px; font-size:12px; color:var(--accent2); }
  .progress-track { height:4px; background:var(--surface2); border-radius:99px; overflow:hidden; }
  .progress-fill { height:4px; background:var(--accent); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }

  .q-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; margin-bottom:1rem; }
  .q-text { font-size:1.05rem; font-weight:500; line-height:1.6; color:var(--text); margin-bottom:1.25rem; }
  .code-block { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px 16px; font-family:var(--mono); font-size:13px; color:#a89cf8; margin-bottom:1.25rem; white-space:pre; overflow-x:auto; }

  .option-btn { display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:13px 16px; margin-bottom:8px; cursor:pointer; font-family:var(--font); font-size:14px; color:var(--text); transition:border-color .15s, background .15s; }
  .option-btn:hover:not(:disabled) { border-color:var(--accent); background:rgba(124,106,247,.08); }
  .option-btn.selected { border-color:var(--accent); background:rgba(124,106,247,.15); }
  .option-btn.correct { border-color:var(--success); background:var(--success-bg); color:var(--success); }
  .option-btn.wrong { border-color:var(--danger); background:var(--danger-bg); color:var(--danger); }
  .option-key { font-weight:600; font-size:12px; color:var(--muted); min-width:20px; margin-top:1px; }
  .option-btn.selected .option-key { color:var(--accent2); }
  .option-btn.correct .option-key { color:var(--success); }
  .option-btn.wrong .option-key { color:var(--danger); }

  .feedback { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:1rem; }
  .feedback.ok { border-left:3px solid var(--success); }
  .feedback.bad { border-left:3px solid var(--danger); }
  .source-note { margin-top:8px; padding-top:8px; color:var(--muted); font-size:11px; border-top:1px solid var(--border); }

  .action-row { display:flex; gap:10px; }
  .btn { flex:1; padding:12px; border-radius:10px; font-family:var(--font); font-size:.95rem; font-weight:500; cursor:pointer; transition:opacity .2s, transform .1s; border:1px solid var(--border); background:var(--surface2); color:var(--text); }
  .btn:hover { opacity:.8; }
  .btn:active { transform:scale(.98); }
  .btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

  .score-wrap { text-align:center; padding:1rem 0 2rem; }
  .score-ring { width:130px; height:130px; border-radius:50%; border:4px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; flex-direction:column; }
  .score-pct { font-size:2.2rem; font-weight:600; color:var(--text); line-height:1; }
  .score-pct-label { font-size:12px; color:var(--muted); }
  .score-title { font-size:1.3rem; font-weight:600; margin-bottom:.3rem; }
  .score-sub { color:var(--muted); font-size:.9rem; margin-bottom:2rem; }
  .score-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:2rem; }
  .score-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
  .score-card .sc-label { font-size:12px; color:var(--muted); margin-bottom:4px; }
  .score-card .sc-val { font-size:1.4rem; font-weight:600; }
  .sc-green { color:var(--success); }
  .sc-red { color:var(--danger); }

/* ── Multi-Select ── */
.multi-note {
  font-size: 12px;
  color: var(--accent2);
  font-style: italic;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: rgba(124,106,247,.1);
  border-radius: 8px;
  display: inline-block;
}
.cb {
  font-size: 16px;
  min-width: 20px;
  margin-top: -1px;
  color: var(--muted);
}
.option-btn.selected .cb { color: var(--accent2); }
.option-btn.correct .cb  { color: var(--success); }
.option-btn.wrong .cb    { color: var(--danger); }

/* ── Pause / Fortsetzen ── */
.quiz-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}
.bc-resume {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(52,211,153,.3);
  padding: 3px 10px;
  border-radius: 99px;
}
.resume-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}
.resume-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .75rem;
}
.resume-sub {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}
.resume-actions { margin-top:1.5rem; }

@media (max-width: 560px) {
  body { padding-top:1.25rem; }
  .quiz-header { margin-bottom:1.5rem; }
  .quiz-header h1 { font-size:1.7rem; }
  .block-grid { grid-template-columns:1fr; }
  .block-card.full-width { grid-column:auto; }
  .q-card { padding:1.2rem; }
  .action-row { flex-direction:column; }
  .module-card { padding:1rem; }
  .module-icon { flex-basis:42px; height:42px; }
}

/* ── Statistik-Anzeige (Modul-Karten) ── */
.module-stats {
  display:flex; align-items:center; gap:8px;
  margin-top:8px; font-size:11px; font-weight:600; color:var(--muted);
}
.module-stats-bar {
  flex:0 0 60px; height:5px; border-radius:99px;
  background:var(--surface2); overflow:hidden;
}
.module-stats-fill {
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Statistik-Anzeige (Block-Karten) ── */
.bc-stats { display:flex; align-items:center; gap:8px; margin-top:10px; }
.bc-bar {
  flex:1; height:5px; border-radius:99px;
  background:var(--surface2); overflow:hidden;
}
.bc-bar-fill {
  display:block; height:100%; border-radius:99px;
  background:var(--danger); transition:width .5s cubic-bezier(.4,0,.2,1);
}
.bc-bar-fill.good { background:var(--success); }
.bc-best {
  flex:0 0 auto; font-size:10px; font-weight:600; color:var(--muted);
}

/* ── Live-Pills in der Quiz-Topbar ── */
.quiz-topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.quiz-pills { display:flex; align-items:center; gap:6px; margin-bottom:1rem; }
.pill {
  font-size:12px; font-weight:600; padding:3px 11px; border-radius:99px;
  border:1px solid var(--border); background:var(--surface2);
}
.pill-ok { color:var(--success); border-color:rgba(52,211,153,.35); background:var(--success-bg); }
.pill-bad { color:var(--danger); border-color:rgba(248,113,113,.35); background:var(--danger-bg); }
.pill-review { color:var(--accent2); border-color:rgba(124,106,247,.4); background:rgba(124,106,247,.14); }

/* ── Fehler-üben-Button (Ergebnisscreen) ── */
.btn-review {
  width:100%; margin-bottom:1rem; padding:13px;
  border-radius:10px; font-family:var(--font); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:opacity .2s, transform .1s;
  color:var(--accent2); background:rgba(124,106,247,.14);
  border:1.5px solid rgba(124,106,247,.4);
}
.btn-review:hover { opacity:.85; }
.btn-review:active { transform:scale(.98); }

/* ── Score-Ring Farbvarianten ── */
.score-ring.ring-good { border-color:var(--success); }
.score-ring.ring-bad { border-color:var(--danger); }

/* ── Computergrafik-Lernblätter ── */
.block-intro { margin-top:.25rem; margin-bottom:1rem; }
.worksheet-grid { grid-template-columns:1fr; }
.bc-ready {
  color:var(--success) !important;
  background:var(--success-bg) !important;
  border-color:rgba(52,211,153,.3) !important;
}
.lesson-back { margin-bottom:1.25rem; }
.lesson-page { display:grid; gap:1rem; }
.lesson-hero {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.75rem; border:1px solid rgba(124,106,247,.35); border-radius:18px;
  background:linear-gradient(135deg,rgba(124,106,247,.16),var(--surface));
}
.lesson-kicker {
  display:block; margin-bottom:.55rem; color:var(--accent2); font-size:11px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.lesson-hero h2 { max-width:520px; margin-bottom:.55rem; font-size:1.5rem; line-height:1.25; }
.lesson-hero p { max-width:560px; color:var(--muted); font-size:14px; line-height:1.6; }
.lesson-badge {
  display:grid; place-items:center; flex:0 0 86px; height:86px; border-radius:50%;
  color:var(--accent2); font-family:var(--mono); font-weight:600;
  background:rgba(124,106,247,.16); border:1px solid rgba(124,106,247,.4);
}
.lesson-toc {
  display:flex; flex-wrap:wrap; gap:7px; position:sticky; top:8px; z-index:5;
  padding:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:12px;
}
.lesson-toc a {
  color:var(--muted); text-decoration:none; font-size:11px; font-weight:600;
  padding:5px 10px; border-radius:99px; border:1px solid transparent;
}
.lesson-toc a:hover { color:var(--accent2); border-color:var(--border); background:var(--surface2); }
.lesson-section {
  scroll-margin-top:72px; padding:1.55rem; background:var(--surface);
  border:1px solid var(--border); border-radius:16px;
}
.lesson-section-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:1.25rem; }
.lesson-number {
  display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:10px;
  color:var(--accent2); background:rgba(124,106,247,.14);
  border:1px solid rgba(124,106,247,.32); font-family:var(--mono); font-size:12px;
}
.lesson-section-heading h3 { margin-bottom:3px; font-size:1.18rem; line-height:1.3; }
.lesson-section-heading p { color:var(--muted); font-size:13px; line-height:1.5; }
.lesson-grid { display:grid; gap:10px; }
.lesson-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lesson-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lesson-card {
  min-width:0; padding:1rem; background:var(--surface2); border:1px solid var(--border);
  border-radius:11px;
}
.lesson-card-wide { margin-bottom:1rem; }
.lesson-card h4 { margin-bottom:.45rem; color:var(--text); font-size:14px; }
.lesson-card p { color:var(--muted); font-size:13px; line-height:1.65; }
.lesson-card .formula { margin-top:.7rem; }
.lesson-flow { display:flex; align-items:stretch; gap:8px; margin-bottom:1rem; }
.flow-step {
  display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 8px; text-align:center; border:1px solid var(--border); border-radius:11px;
  background:var(--surface2);
}
.flow-step span {
  display:grid; place-items:center; width:24px; height:24px; margin-bottom:6px;
  border-radius:50%; color:var(--accent2); background:rgba(124,106,247,.15); font-size:11px;
}
.flow-step strong { font-family:var(--mono); font-size:12px; }
.flow-step small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.flow-arrow { display:grid; place-items:center; color:var(--muted); }
.lesson-note, .lesson-callout, .lesson-warning {
  margin-top:1rem; padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.65;
  color:var(--muted); background:var(--bg); border:1px solid var(--border);
}
.lesson-callout { border-left:3px solid var(--accent); }
.lesson-warning { border-left:3px solid #fbbf24; }
.lesson-note strong, .lesson-callout strong, .lesson-warning strong { color:var(--text); }
.lesson-code {
  margin:1rem 0; padding:14px 16px; overflow-x:auto; white-space:pre;
  color:#b8affb; background:var(--bg); border:1px solid var(--border); border-radius:10px;
  font-family:var(--mono); font-size:12px; line-height:1.65;
}
.lesson-code code { font-family:inherit; }
.formula {
  overflow-x:auto; padding:11px 13px; color:var(--text); text-align:center;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  font-family:var(--mono); font-size:13px; line-height:1.55;
}
.formula-accent { color:var(--accent2); border-color:rgba(124,106,247,.38); }
.formula-main { margin-bottom:1rem; padding:16px; color:var(--accent2); font-size:15px; }
.formula-stack { display:grid; gap:8px; margin:1rem 0; }
.rgba-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px; }
.rgba-row span {
  padding:8px; border-radius:8px; color:var(--muted); text-align:center;
  background:var(--bg); border:1px solid var(--border); font-size:11px;
}
.rgba-row b { color:var(--accent2); }
.lesson-subheading { margin:1.35rem 0 .7rem; font-size:1rem; }
.lesson-text { margin:.65rem 0; color:var(--muted); font-size:13px; line-height:1.7; }
.derivation { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:1rem 0; }
.derivation > div {
  display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface2);
}
.derivation span {
  display:grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%;
  color:var(--accent2); background:rgba(124,106,247,.15); font-size:11px; font-weight:600;
}
.derivation p { color:var(--muted); font-size:12px; line-height:1.5; }
.derivation p strong { color:var(--text); }
.derivation-vertical { grid-template-columns:1fr; }
.point-grid, .result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:1rem; }
.point-grid > div, .result-grid > div {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface2); text-align:center;
}
.point-grid span { color:var(--accent2); font-size:15px; font-weight:600; }
.point-grid code { color:var(--text); font-family:var(--mono); font-size:11px; }
.result-grid span { color:var(--muted); font-size:11px; }
.result-grid strong { color:var(--accent2); font-size:14px; }
.result-grid small { color:var(--muted); font-size:10px; }
.lesson-details { margin-top:1rem; border:1px solid var(--border); border-radius:10px; background:var(--surface2); }
.lesson-details summary { padding:12px 14px; color:var(--text); cursor:pointer; font-size:13px; font-weight:600; }
.lesson-details[open] summary { border-bottom:1px solid var(--border); }
.lesson-details > p { padding:0 14px 14px; color:var(--muted); font-size:12px; line-height:1.6; }
.lesson-details .lesson-code { margin:12px 14px; }
.formula-list { display:grid; gap:7px; }
.formula-list > div {
  display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr); gap:14px;
  align-items:center; padding:11px 12px; border-radius:9px; background:var(--surface2);
  border:1px solid var(--border);
}
.formula-list span { color:var(--muted); font-size:12px; }
.formula-list strong { overflow-x:auto; color:var(--text); font-family:var(--mono); font-size:12px; line-height:1.5; }
.priority-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.priority-card { padding:1rem; border:1px solid var(--border); border-radius:10px; background:var(--surface2); }
.priority-card > span { display:block; margin-bottom:.6rem; color:var(--accent2); font-size:12px; font-weight:600; }
.priority-card ul { padding-left:17px; color:var(--muted); font-size:12px; line-height:1.75; }
.priority-high { border-top:3px solid var(--success); }
.priority-low { border-top:3px solid var(--muted); }
.qa-list { display:grid; gap:8px; }
.qa-item { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface2); }
.qa-item summary {
  display:flex; align-items:flex-start; gap:10px; padding:13px 14px; cursor:pointer;
  color:var(--text); font-size:13px; line-height:1.5; list-style:none;
}
.qa-item summary::-webkit-details-marker { display:none; }
.qa-item summary span {
  display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:50%;
  color:var(--accent2); background:rgba(124,106,247,.15); font-size:11px; font-weight:600;
}
.qa-item[open] summary { border-bottom:1px solid var(--border); }
.qa-item > div { padding:13px 14px 14px 49px; }
.qa-item p { color:var(--muted); font-size:13px; line-height:1.7; }
.lesson-quiz-button { margin-top:1rem; }

@media (max-width:700px) {
  .lesson-grid-3, .priority-grid { grid-template-columns:1fr; }
  .lesson-flow { flex-direction:column; }
  .flow-arrow { transform:rotate(90deg); min-height:20px; }
  .formula-list > div { grid-template-columns:1fr; gap:5px; }
}

@media (max-width:560px) {
  .lesson-hero { align-items:flex-start; padding:1.25rem; }
  .lesson-badge { display:none; }
  .lesson-hero h2 { font-size:1.25rem; }
  .lesson-section { padding:1.15rem; }
  .lesson-grid-2, .derivation, .point-grid, .result-grid { grid-template-columns:1fr; }
  .rgba-row { grid-template-columns:repeat(2,1fr); }
  .lesson-toc { position:static; }
  .qa-item > div { padding-left:14px; }
  .semester-grid {
  grid-template-columns: 1fr;
}

.semester-card {
  min-height: 190px;
}
}


/* ── Scrollbarer Lern-Chat ── */
.chat-lesson-section { padding-bottom:1rem; }
.study-chat {
  max-height:680px; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  padding:18px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,var(--bg),rgba(245,247,252,.78));
  scrollbar-width:thin; scrollbar-color:rgba(124,106,247,.55) transparent;
}
.study-chat::-webkit-scrollbar { width:9px; }
.study-chat::-webkit-scrollbar-track { background:transparent; }
.study-chat::-webkit-scrollbar-thumb { background:rgba(124,106,247,.42); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
.study-chat::-webkit-scrollbar-thumb:hover { background:rgba(124,106,247,.66); background-clip:padding-box; }
.chat-message {
  width:min(88%,760px); margin:0 0 18px; padding:17px 18px; border-radius:15px;
  border:1px solid var(--border); box-shadow:0 7px 24px rgba(0,0,0,.12);
}
.chat-message:last-child { margin-bottom:0; }
.chat-assistant { margin-right:auto; background:var(--surface); border-top-left-radius:5px; }
.chat-user { margin-left:auto; background:rgba(124,106,247,.15); border-color:rgba(124,106,247,.38); border-top-right-radius:5px; }
.chat-role {
  margin-bottom:10px; color:var(--accent2); font-size:10px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
}
.chat-message h3 { margin:1.25rem 0 .8rem; font-size:1.25rem; }
.chat-message h4 { margin:1.25rem 0 .5rem; color:var(--text); font-size:1rem; }
.chat-message h5 { margin:1rem 0 .4rem; color:var(--text); font-size:.9rem; }
.chat-message p { margin:.5rem 0; color:var(--muted); font-size:13px; line-height:1.75; }
.chat-message p strong { color:var(--text); }
.chat-message code { font-family:var(--mono); color:#c8c1ff; }
.chat-code {
  margin:.8rem 0; padding:13px 14px; overflow-x:auto; color:#c8c1ff;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  font-family:var(--mono); font-size:12px; line-height:1.6; white-space:pre;
}
.chat-code code { font-family:inherit; }
.chat-formula {
  margin:.75rem 0; padding:11px 13px; overflow-x:auto; text-align:center;
  color:var(--text); background:var(--bg); border:1px solid var(--border);
  border-radius:9px; font-family:var(--mono); font-size:12.5px; line-height:1.7;
}
.chat-formula-accent, .chat-formula-main { color:var(--accent2); border-color:rgba(124,106,247,.38); }
.chat-formula-main { padding:14px; font-size:14px; }
.chat-note, .chat-success {
  margin:.9rem 0; padding:12px 13px; color:var(--muted); background:var(--bg);
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px;
  font-size:13px; line-height:1.65;
}
.chat-success { border-left-color:var(--success); background:var(--success-bg); }
.chat-note strong, .chat-success strong { color:var(--text); }
.chat-result-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:.8rem 0; }
.chat-result-row span {
  padding:9px; color:var(--accent2); background:var(--bg); border:1px solid var(--border);
  border-radius:8px; text-align:center; font-family:var(--mono); font-size:11px; line-height:1.45;
}
.chat-formula-list { display:grid; gap:6px; margin:.8rem 0; }
.chat-formula-list > div {
  display:grid; grid-template-columns:minmax(145px,.7fr) minmax(0,1.3fr); gap:10px;
  padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg);
}
.chat-formula-list b { color:var(--text); font-size:11px; }
.chat-formula-list span { overflow-x:auto; color:var(--muted); font-family:var(--mono); font-size:11px; line-height:1.45; }
.chat-question-list { padding-left:1.3rem; color:var(--muted); font-size:13px; line-height:1.75; }
.chat-scroll-hint { margin:.65rem 0 0; color:var(--muted); text-align:center; font-size:11px; }

@media (max-width:700px) {
  .study-chat { max-height:620px; padding:12px; }
  .chat-message { width:94%; padding:14px; }
  .chat-result-row, .chat-formula-list > div { grid-template-columns:1fr; }
}

/* ── Blatt 2: Möbiusband-Erklärungen ── */
.moebius-mini-steps,
.moebius-build,
.orientation-loop {
  display:flex; align-items:stretch; gap:8px; margin:1rem 0;
}
.moebius-mini-steps span,
.moebius-build > div:not(.flow-arrow),
.orientation-loop > div:not(.flow-arrow) {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:76px; padding:10px; text-align:center; border:1px solid var(--border);
  border-radius:10px; background:var(--surface2); color:var(--muted); font-size:11px;
}
.moebius-mini-steps b { align-self:center; color:var(--accent2); }
.moebius-build span {
  display:grid; place-items:center; width:25px; height:25px; margin-bottom:6px;
  border-radius:50%; color:var(--accent2); background:rgba(124,106,247,.15); font-size:11px;
}
.moebius-build strong,
.orientation-loop strong { color:var(--text); font-size:12px; }
.moebius-build small,
.orientation-loop span { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.moebius-focus { border-top:3px solid var(--accent); }
.moebius-cell-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:1rem auto;
  width:min(100%,420px);
}
.moebius-cell-grid span {
  padding:12px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface2); color:var(--accent2); text-align:center;
  font-family:var(--mono); font-size:11px;
}

@media (max-width:700px) {
  .moebius-mini-steps,
  .moebius-build,
  .orientation-loop { flex-direction:column; }
  .moebius-mini-steps b,
  .moebius-build .flow-arrow,
  .orientation-loop .flow-arrow { transform:rotate(90deg); min-height:20px; }
}

/* ── Computergrafik: Untermenüs Blätter / Vorlesungen ── */
.cg-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cg-group-card { min-height:145px; }
.lecture-block-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lecture-block-grid .block-card { min-height:145px; }
.lecture-block-grid .bc-sub { padding-right:72px; line-height:1.55; }

/* ── Scrollbare Vorlesungsskripte ── */
.lecture-hero { background:linear-gradient(135deg,rgba(124,106,247,.18),rgba(41,220,180,.07)); }
.lecture-study-chat { max-height:760px; }
.lecture-chat-card { width:100%; max-width:none; margin-left:0; margin-right:0; }
.lecture-chat-card h3 { margin-top:.15rem; }
.lecture-bullets,
.lecture-steps,
.lecture-checklist {
  margin:.75rem 0; padding-left:1.35rem; color:var(--muted); font-size:13px; line-height:1.75;
}
.lecture-bullets li,
.lecture-steps li,
.lecture-checklist li { margin:.28rem 0; }
.lecture-bullets li::marker { color:var(--accent2); }
.lecture-steps li::marker { color:var(--accent2); font-weight:700; }
.lecture-check-card { border-color:rgba(41,220,180,.35); background:rgba(41,220,180,.055); }
.lecture-checklist { list-style:none; padding-left:0; display:grid; gap:7px; }
.lecture-checklist li {
  position:relative; padding:9px 10px 9px 34px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg);
}
.lecture-checklist li::before {
  content:"✓"; position:absolute; left:11px; top:9px; color:var(--success); font-weight:700;
}
.lecture-image-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:1rem; }
.lecture-image-grid:has(.lecture-figure:only-child) { grid-template-columns:1fr; }
.lecture-figure {
  overflow:hidden; margin:0; border:1px solid var(--border); border-radius:10px; background:var(--bg);
}
.lecture-figure a { display:block; }
.lecture-figure img { display:block; width:100%; max-height:360px; object-fit:contain; background:#fff; }
.lecture-figure figcaption { padding:8px 10px; color:var(--muted); font-size:10px; line-height:1.45; }
.lecture-page .chat-formula-list span { white-space:normal; overflow-wrap:anywhere; }

@media (max-width:760px) {
  .cg-group-grid,
  .lecture-block-grid,
  .lecture-image-grid { grid-template-columns:1fr; }
  .lecture-block-grid .bc-sub { padding-right:0; }
  .lecture-study-chat { max-height:670px; }
}

/* ── BWR: Vorlesungsskripte, Lexikon und Klausur-Fragetypen ── */
.bwr-page .lesson-section { scroll-margin-top:88px; }
.bwr-table-wrap {
  width:100%; margin:1rem 0; overflow-x:auto; border:1px solid var(--border);
  border-radius:12px; background:var(--surface2);
}
.bwr-table { width:100%; min-width:690px; border-collapse:collapse; font-size:12px; line-height:1.55; }
.bwr-table th, .bwr-table td { padding:11px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.bwr-table th { color:var(--text); background:rgba(124,106,247,.12); font-size:11px; letter-spacing:.03em; }
.bwr-table td { color:var(--muted); }
.bwr-table td:first-child { color:var(--text); font-weight:600; }
.bwr-table tr:last-child td { border-bottom:0; }
.bwr-glossary-table th:first-child, .bwr-glossary-table td:first-child { width:23%; }
.bwr-formula-list { margin-bottom:1rem; }

.goods-matrix {
  display:grid; grid-template-columns:minmax(130px,.75fr) repeat(2,minmax(0,1fr));
  gap:7px; margin:1rem 0;
}
.goods-matrix > div {
  min-height:86px; padding:11px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface2); color:var(--muted); font-size:11px; line-height:1.5;
}
.goods-matrix .goods-matrix-head, .goods-matrix .goods-matrix-side {
  min-height:auto; display:grid; place-items:center; color:var(--text); font-weight:600;
  background:rgba(124,106,247,.1); text-align:center;
}
.goods-matrix > div strong { display:block; margin-bottom:5px; color:var(--accent2); font-size:12px; }
.goods-matrix > div span { display:block; }

.competency-cloud { display:flex; flex-wrap:wrap; gap:8px; margin:1rem 0; }
.competency-cloud span {
  padding:7px 11px; border:1px solid rgba(124,106,247,.35); border-radius:99px;
  color:var(--accent2); background:rgba(124,106,247,.1); font-size:11px; font-weight:600;
}

.question-type-note {
  display:inline-block; margin-bottom:12px; padding:6px 12px; border-radius:8px;
  color:var(--accent2); background:rgba(124,106,247,.1); font-size:12px; font-style:italic;
}
.fill-answer-wrap { display:grid; gap:7px; margin-top:4px; }
.fill-answer-wrap > span { color:var(--muted); font-size:12px; font-weight:600; }
.fill-answer {
  width:100%; padding:13px 14px; border:1.5px solid var(--border); border-radius:10px;
  outline:none; color:var(--text); background:var(--surface2); font:500 14px var(--font);
  transition:border-color .2s, box-shadow .2s;
}
.fill-answer:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(124,106,247,.12); }
.fill-answer.correct { border-color:var(--success); background:var(--success-bg); }
.fill-answer.wrong { border-color:var(--danger); background:var(--danger-bg); }
.fill-solution {
  margin-top:10px; padding:10px 12px; border:1px solid rgba(52,211,153,.3); border-radius:9px;
  color:var(--muted); background:var(--success-bg); font-size:12px;
}
.fill-solution strong { color:var(--success); }

.match-board { display:grid; gap:14px; }
.match-rows { display:grid; gap:9px; }
.match-row {
  display:grid; grid-template-columns:minmax(180px,.9fr) minmax(220px,1.1fr); gap:9px;
  align-items:stretch;
}
.match-left {
  display:flex; align-items:center; padding:11px 12px; border:1px solid var(--border);
  border-radius:9px; color:var(--text); background:var(--surface2); font-size:12px; line-height:1.45;
}
.match-target {
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px;
  min-height:48px; padding:10px 12px; border:1.5px dashed var(--border); border-radius:9px;
  color:var(--muted); background:var(--bg); font:500 12px var(--font); text-align:left; cursor:pointer;
}
.match-target:hover:not(:disabled) { border-color:var(--accent2); color:var(--text); }
.match-target small { color:var(--success); font-size:10px; }
.match-assigned .match-target { border-style:solid; border-color:rgba(124,106,247,.5); color:var(--accent2); background:rgba(124,106,247,.1); }
.match-correct .match-target { border-style:solid; border-color:var(--success); color:var(--success); background:var(--success-bg); }
.match-wrong .match-target { border-style:solid; border-color:var(--danger); color:var(--danger); background:var(--danger-bg); }
.match-bank {
  display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface2);
}
.match-option {
  padding:8px 11px; border:1px solid var(--border); border-radius:8px; color:var(--text);
  background:var(--bg); font:500 11px var(--font); cursor:grab; transition:.15s ease;
}
.match-option:hover:not(:disabled), .match-option.picked { border-color:var(--accent2); color:var(--accent2); transform:translateY(-1px); }
.match-option.used { opacity:.48; }
.match-option.picked { opacity:1; box-shadow:0 0 0 2px rgba(124,106,247,.12); }
.match-option:disabled { cursor:default; }

@media (max-width:700px) {
  .goods-matrix { grid-template-columns:1fr; }
  .goods-matrix .goods-matrix-head:first-child { display:none; }
  .match-row { grid-template-columns:1fr; }
  .match-left { min-height:44px; }
  .bwr-table { min-width:620px; }
}

/* ── Lückentexte als Auswahlaufgabe ── */
.fill-choice-grid {
  display:grid;
  gap:8px;
}
.fill-choice-btn {
  min-height:52px;
}