/* ============================================================
   Kursinhalt: Lernumgebung im TEACON-Stil
   Ergänzt css/course.css. Alles, was der Content-Renderer erzeugt.
   ============================================================ */

.lesson {
  max-width: 720px;
  margin: 0 auto;
  color: var(--navy);
  font-size: 1.04rem;
  line-height: 1.82;
}

/* Lernfläche: weiss, ohne Kartenrahmen, viel Luft */
.step-card.plain {
  background: var(--white);
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Kapitelleiste */
.lsn-bar {
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.lsn-crumb { font-size: 0.84rem; color: var(--text-muted); }
.lsn-crumb b { color: var(--navy); font-weight: 600; }

/* Freistehender Sprung zum Kapitelquiz */
.lsn-quizjump {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  text-align: left; cursor: pointer;
  background: var(--navy); border: none; border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-16);
  color: #fff; font-family: var(--font);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lsn-quizjump:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(19,13,76,0.22); }
.lsn-quizjump:hover .lqj-arr { transform: translateX(5px); }
.lqj-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--tan); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lqj-icon svg { width: 22px; height: 22px; }
.lqj-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lqj-text strong { font-size: 1.02rem; font-weight: 700; }
.lqj-text span { font-size: 0.87rem; color: rgba(255,255,255,0.66); line-height: 1.45; }
.lqj-arr { width: 22px; height: 22px; flex-shrink: 0; color: var(--tan); transition: transform .18s ease; }

/* Abschnittskopf */
.lsn-sechead { margin-bottom: var(--sp-16); }
.lsn-sechead h1 {
  font-size: 1.95rem; font-weight: 800; line-height: 1.2;
  margin: 0; color: var(--navy); letter-spacing: -0.01em;
}
.lsn-sechead .lsn-lead { margin-top: var(--sp-5); }

/* ---------- Fliesstext ---------- */
.lesson h2 {
  position: relative;
  font-size: 1.62rem; font-weight: 800; line-height: 1.28;
  margin: var(--sp-24) 0 var(--sp-6); padding-top: var(--sp-6);
  letter-spacing: -0.01em;
}
.lesson h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 4px; border-radius: 999px; background: var(--tan);
}
.lesson h2:first-child { margin-top: 0; }

.lesson h3 {
  font-size: 1.2rem; font-weight: 700; color: var(--navy);
  margin: var(--sp-12) 0 var(--sp-4); padding-left: var(--sp-4);
  border-left: 3px solid var(--cream-dark);
}
.lesson p { margin: 0 0 var(--sp-6); }
.lesson strong { font-weight: 700; }
.lesson em { font-style: italic; }
.lesson a { color: var(--tan); text-decoration: underline; text-underline-offset: 3px; }

.lesson ul, .lesson ol { margin: 0 0 var(--sp-6); padding-left: var(--sp-6); }
.lesson li { margin-bottom: var(--sp-2); line-height: 1.7; }
.lesson ul.tight li, .lesson ol.tight li { margin-bottom: 4px; }

/* ---------- Mathematischer Satz ---------- */
/* Grundschrift für alles Mathematische: Serif, damit Variablen und
   Zahlen sich vom Fliesstext abheben, wie im Lehrbuch. */
.v, .frac, .sqrt, .fml, .mth {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
}
.v  { font-style: italic; font-size: 1.06em; letter-spacing: .01em; }
.mth { font-size: 1.04em; }

/* Hoch- und Tiefstellung */
.lesson sup, .lesson sub,
.qz-why sup, .qz-why sub,
.wk-t sup, .wk-t sub {
  font-size: 0.68em; line-height: 0; position: relative; font-style: normal;
}
.lesson sup, .qz-why sup, .wk-t sup { top: -0.55em; }
.lesson sub, .qz-why sub, .wk-t sub { bottom: -0.22em; }
.v sup, .v sub { font-style: normal; }

/* Bruch mit echtem Bruchstrich */
.frac {
  display: inline-flex; flex-direction: column; align-items: stretch;
  vertical-align: -0.52em; text-align: center;
  margin: 0 0.26em; line-height: 1.18;
}
.frac > span:first-child { padding: 0 0.42em 0.14em; border-bottom: 1.4px solid currentColor; }
.frac > span:last-child  { padding: 0.16em 0.42em 0; }
/* verschachtelte Brüche etwas kleiner */
.frac .frac { font-size: 0.9em; margin: 0 0.18em; }

/* Wurzel mit Radikal und Überstrich */
.sqrt { display: inline-flex; align-items: stretch; margin: 0 0.1em; white-space: nowrap; }
.sqrt > i {
  font-style: normal; font-size: 1.32em; line-height: 0.86;
  align-self: flex-start; margin-right: -0.06em;
}
/* Radikal wächst mit, wenn ein Bruch darunter steht */
.sqrt:has(.frac) > i { font-size: 2.35em; line-height: 0.56; }
.sqrt:has(.frac) > span { padding-top: 0.2em; }
.sqrt > span {
  border-top: 1.3px solid currentColor;
  padding: 0.14em 0.24em 0 0.16em;
}

/* Operatoren bekommen Luft */
.op { padding: 0 0.22em; }

/* ---------- Formelblock ---------- */
/* ---------- Boxen ---------- */
.bx { border-radius: var(--radius); padding: var(--sp-8); margin: var(--sp-2) 0 var(--sp-8); }
.bx > :last-child { margin-bottom: 0; }
.bx-hd {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--sp-3);
}
.bx-hd svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Definition, navy, das Fundament */
.bx-def { background: var(--navy); color: #fff; }
.bx-def .bx-hd { color: var(--tan); }
.bx-def strong { color: #fff; }
.bx-def .v { color: #fff; }

/* Merksatz: Sand, das Wichtigste */
.bx-key { background: rgba(219, 154, 83, 0.13); border-left: 3px solid var(--tan); }
.bx-key .bx-hd { color: var(--brown); }

/* Prüfungshinweis, korallrot, Achtung */
.bx-exam { background: rgba(232, 112, 95, 0.11); border-left: 3px solid var(--coral); }
.bx-exam .bx-hd { color: var(--coral-dark); }

/* Typischer Fehler */
.bx-trap { background: var(--cream); border: 1px dashed var(--tan); }
.bx-trap .bx-hd { color: var(--brown); }

/* Intuition / Alltagsbild */
.bx-int { background: rgba(46, 158, 91, 0.09); border-left: 3px solid #2E9E5B; }
.bx-int .bx-hd { color: #1F7A45; }

/* ---------- Formeln ---------- */
.fml {
  background: var(--cream); border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-6); margin: var(--sp-2) 0 var(--sp-8);
  text-align: center;
  font-size: 1.3rem; line-height: 2.1; color: var(--navy);
}
.fml .frac { font-size: 1.05em; vertical-align: -0.56em; }
.fml .sqrt > i { font-size: 1.4em; }
.fml .lbl {
  display: block; font-family: var(--font); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown);
  margin-bottom: var(--sp-3);
}
.fml .note {
  display: block; font-family: var(--font); font-size: 0.86rem;
  color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.6;
}
.bx-def .fml { background: rgba(255,255,255,0.09); color: #fff; }
.bx-def .fml .lbl { color: var(--tan); }
.bx-def .fml .note { color: rgba(255,255,255,0.7); }

/* Bruch */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 4px; }
.frac > span:first-child { border-bottom: 1.4px solid currentColor; padding: 0 6px 2px; }
.frac > span:last-child { padding: 2px 6px 0; }

/* ---------- Durchgerechnetes Beispiel ---------- */
.ex {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin: var(--sp-4) 0 var(--sp-10); overflow: hidden;
}
.ex-hd {
  background: var(--cream); padding: var(--sp-4) var(--sp-6);
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.98rem; color: var(--navy);
}
.ex-hd svg { width: 18px; height: 18px; color: var(--tan); flex-shrink: 0; }
.ex-body { padding: var(--sp-6) var(--sp-6) var(--sp-2); }
.ex-given { background: var(--cream); border-radius: 10px; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); font-size: 0.95rem; }
.ex-step { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ex-no {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ex-step > div { flex: 1; min-width: 0; }
.ex-step h5 { margin: 0 0 var(--sp-2); font-size: 0.98rem; font-weight: 700; }
.ex-step .frac, .ex-given .frac, .ex-res .frac { font-size: 1.06em; }
.ex-body { line-height: 1.85; }
.ex-step p:last-child { margin-bottom: 0; }
.ex-res {
  background: rgba(219,154,83,0.14); border-radius: 10px;
  padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-6);
  font-weight: 600; color: var(--navy);
}
.ex-res::before {
  content: "Ergebnis"; display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown); margin-bottom: 4px;
}

/* ---------- Tabellen ---------- */
.lsn-table-wrap { overflow-x: auto; margin: var(--sp-2) 0 var(--sp-8); -webkit-overflow-scrolling: touch; }
.lsn-table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 0.94rem; }
.lsn-table th {
  background: var(--navy); color: #fff; text-align: left;
  padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.02em;
}
.lsn-table th:first-child { border-top-left-radius: 8px; }
.lsn-table th:last-child { border-top-right-radius: 8px; }
.lsn-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.lsn-table tbody tr:nth-child(even) { background: var(--cream); }
.lsn-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Diagramme ---------- */
.fig { margin: var(--sp-4) 0 var(--sp-10); }
/* Die Grafikfläche hebt sich deutlich vom Fliesstext ab: kräftigerer
   Rahmen, eigener Schatten und oben eine schmale Farbkante. So sieht man
   auf einen Blick, wo der Text aufhört und die Abbildung anfängt. */
.fig-box {
  border: 1.5px solid rgba(19,13,76,0.20); border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-6); background: var(--white);
  box-shadow: 0 1px 2px rgba(19,13,76,.04), 0 18px 44px -34px rgba(19,13,76,.42);
  position: relative; overflow: hidden;
}
.fig-box::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 55%, var(--tan) 55%, var(--tan) 100%);
}
.fig svg { display: block; width: 100%; height: auto; }
/* Die Bildunterschrift trägt hier echte Erklärung, nicht nur eine
   Beschriftung, deshalb linksbündig, etwas grösser und mit eigenem
   Hintergrund, damit sie sichtbar zur Grafik gehört. */
.fig figcaption {
  margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  background: var(--cream); border-radius: 12px;
  font-size: 0.9rem; color: var(--text-muted);
  line-height: 1.75; text-align: left;
}
.fig figcaption b, .fig figcaption strong { color: var(--navy); font-weight: 700; }

/* Diagramm-Grundelemente */
.ax { stroke: var(--navy); stroke-width: 1.6; }
.grid-l { stroke: #E8E4E0; stroke-width: 1; }
.curve { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.c-blue { stroke: var(--navy); }
.c-tan  { stroke: var(--tan); }
.c-red  { stroke: var(--coral); }
.c-green{ stroke: #2E9E5B; }
.dash { stroke-dasharray: 5 4; stroke-width: 1.4; stroke: var(--text-faint); fill: none; }
.pt { fill: var(--coral); stroke: #fff; stroke-width: 2; }
.lbl-ax { font: 600 13px var(--font); fill: var(--navy); }
.lbl-c  { font: 700 13px var(--font); }
.lbl-t  { font: 400 12px var(--font); fill: var(--text-muted); }
.lbl-p  { font: 700 12px var(--font); fill: var(--coral-dark); }

/* ---------- Fortschritt im Kapitel ---------- */
.lsn-foot {
  margin-top: var(--sp-20); padding-top: var(--sp-10);
  border-top: 2px solid var(--line);
}
.lsn-recap { background: var(--navy); color: #fff; border-radius: var(--radius); padding: var(--sp-10); margin-top: var(--sp-20); }
.lsn-recap h4 { margin: 0 0 var(--sp-5); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tan); }
.lsn-recap ol { margin: 0; padding-left: var(--sp-6); }
.lsn-recap li { margin-bottom: var(--sp-3); line-height: 1.65; color: rgba(255,255,255,0.88); }
.lsn-recap li:last-child { margin-bottom: 0; }
.lsn-recap strong { color: #fff; }

@media (max-width: 700px) {
  .lesson { font-size: 0.98rem; }
  .lsn-head h1 { font-size: 1.65rem; }
  .lesson h2 { font-size: 1.3rem; }
  .bx { padding: var(--sp-5); }
  .fml { font-size: 1.08rem; padding: var(--sp-5) var(--sp-4); }
  .fig-box { padding: var(--sp-4); }
}

/* ============================================================
   Quiz
   ============================================================ */
.qz { max-width: 760px; margin: 0 auto; }
.qz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.qz-kicker { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); margin-bottom: 6px; }
.qz-title { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--navy); }
.qz-counter { font-size: 0.9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qz-counter b { color: var(--navy); font-size: 1.1rem; }
.qz-track { height: 5px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; margin-bottom: var(--sp-10); }
.qz-track span { display: block; height: 100%; background: var(--tan); border-radius: 999px; transition: width .35s ease; }

.qz-text { font-size: 1.14rem; line-height: 1.65; font-weight: 600; color: var(--navy); margin: 0 0 var(--sp-6); }
.qz-hint-btn {
  background: none; border: none; cursor: pointer; padding: 0; margin: 0 0 var(--sp-4);
  font: 600 0.86rem var(--font); color: var(--tan); text-decoration: underline; text-underline-offset: 3px;
}
.qz-hint { background: rgba(219,154,83,0.13); border-radius: 10px; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); font-size: 0.94rem; line-height: 1.6; color: var(--brown); }

.qz-opts { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.qz-opt {
  display: flex; align-items: flex-start; gap: var(--sp-4); width: 100%; text-align: left;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; font: 400 1rem var(--font); color: var(--navy);
  line-height: 1.55; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qz-opt:not(:disabled):hover { border-color: var(--navy); transform: translateY(-1px); }
.qz-letter {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream); color: var(--navy); font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.qz-otext { flex: 1; min-width: 0; }
.qz-opt.right { border-color: #2E9E5B; background: rgba(46,158,91,0.09); }
.qz-opt.right .qz-letter { background: #2E9E5B; color: #fff; }
.qz-opt.wrong { border-color: var(--coral); background: rgba(232,112,95,0.09); }
.qz-opt.wrong .qz-letter { background: var(--coral); color: #fff; }
.qz-opt.dim { opacity: 0.45; }
.qz-opt:disabled { cursor: default; }

.qz-why {
  background: var(--cream); border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-6); margin-bottom: var(--sp-6);
  font-size: 0.98rem; line-height: 1.7;
}
.qz-why > :last-child { margin-bottom: 0; }
.qz-why .fml { background: rgba(255,255,255,0.75); font-size: 1.08rem; }
.qz-verdict { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.qz-verdict.ok { color: #1F7A45; }
.qz-verdict.no { color: var(--coral-dark); }
.qz-nav { display: flex; justify-content: flex-end; }

/* Auswertung */
.qz-result { text-align: center; padding: var(--sp-6) 0; }
.qz-ring { position: relative; width: 132px; height: 132px; margin: 0 auto var(--sp-6); }
.qz-ring svg { width: 100%; height: 100%; }
.qz-ring-fill { transition: stroke-dasharray .9s cubic-bezier(.3,.7,.3,1); }
.qz-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 800; color: var(--navy);
}
.qz-ring-num small { font-size: 1rem; font-weight: 600; color: var(--text-faint); }
.qz-result h3 { margin: 0 0 var(--sp-3); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.qz-result > p { color: var(--text-muted); max-width: 460px; margin: 0 auto var(--sp-8); line-height: 1.7; }
.qz-review { display: grid; gap: var(--sp-2); text-align: left; margin-bottom: var(--sp-8); }
.qz-rev { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--cream); font-size: 0.9rem; }
.qz-rev-no { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700; color: #fff; }
.qz-rev.ok .qz-rev-no { background: #2E9E5B; }
.qz-rev.no .qz-rev-no { background: var(--coral); }
.qz-rev-q { color: var(--text-muted); line-height: 1.45; }
.qz-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Interaktive Tools
   ============================================================ */
.tool {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: var(--sp-4) 0 var(--sp-10); background: var(--white);
}
.tl-hd {
  background: var(--navy); color: #fff; padding: var(--sp-4) var(--sp-6);
  display: flex; align-items: center; gap: 10px;
}
.tl-hd svg { width: 18px; height: 18px; color: var(--tan); flex-shrink: 0; }
.tl-hd strong { font-size: 0.98rem; font-weight: 700; }
.tl-hd span { font-size: 0.84rem; color: rgba(255,255,255,0.65); margin-left: auto; }
.tl-body { padding: var(--sp-6); }
.tl-ctrls { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); }
@media (min-width: 620px) { .tl-ctrls.two { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }
@media (min-width: 620px) { .tl-ctrls.three { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-6); } }
.tl-ctrl label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.tl-ctrl label b { font-variant-numeric: tabular-nums; color: var(--brown); font-size: 0.98rem; }
.tl-ctrl input[type=range] { width: 100%; margin: 0; accent-color: var(--tan); height: 22px; cursor: pointer; }
.tl-out { background: var(--cream); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.tl-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 7px 0; font-size: 0.94rem; border-bottom: 1px solid rgba(19,13,76,0.07); }
.tl-row:last-child { border-bottom: none; }
.tl-row b { font-variant-numeric: tabular-nums; }
.tl-row.total { border-top: 1.5px solid var(--navy); border-bottom: none; margin-top: 6px; padding-top: 11px; font-weight: 700; }
.tl-verdict { margin-top: var(--sp-5); border-radius: 10px; padding: var(--sp-4) var(--sp-5); font-size: 0.95rem; line-height: 1.6; font-weight: 600; }
.tl-verdict.go { background: rgba(46,158,91,0.13); color: #1F7A45; }
.tl-verdict.stop { background: rgba(232,112,95,0.13); color: var(--coral-dark); }
.tl-fig { margin-bottom: var(--sp-5); }
.tl-fig svg { display: block; width: 100%; height: auto; }

/* Auswahlfeld in Tools */
.tl-sel {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--white);
  font: 400 0.94rem var(--font); color: var(--navy); cursor: pointer;
}
.tl-sel:focus { outline: 2px solid var(--tan); outline-offset: 1px; }

/* ============================================================
   Selbsteinschätzung am Ende einer Unit
   ============================================================ */
.lsn-rate {
  margin-top: var(--sp-16); padding: var(--sp-8);
  border: 1px dashed var(--tan); border-radius: var(--radius-lg);
  background: var(--cream);
}
.lsn-rate.rated { border-style: solid; }
.lr-head { margin-bottom: var(--sp-5); }
.lr-head strong { display: block; font-size: 1.02rem; color: var(--navy); margin-bottom: 4px; }
.lr-head span { font-size: 0.86rem; color: var(--text-muted); }
.lr-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 640px) { .lr-btns { grid-template-columns: 1fr; } }
.lr-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px var(--sp-4); border-radius: var(--radius); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line);
  font: 600 0.9rem var(--font); color: var(--navy);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, color .16s ease;
  text-align: center; line-height: 1.3;
}
.lr-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.lr-btn:hover { transform: translateY(-2px); }
.lr-btn.green:hover  { border-color: #2E9E5B; color: #1F7A45; }
.lr-btn.orange:hover { border-color: var(--tan); color: var(--brown); }
.lr-btn.red:hover    { border-color: var(--coral); color: var(--coral-dark); }
.lr-btn.green.active  { background: #2E9E5B; border-color: #2E9E5B; color: #fff; }
.lr-btn.orange.active { background: var(--tan); border-color: var(--tan); color: #fff; }
.lr-btn.red.active    { background: var(--coral); border-color: var(--coral); color: #fff; }

/* Marker im Kursmenü */
.si-rate { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.si-rate.green  { background: #2E9E5B; }
.si-rate.orange { background: #DB9A53; }
.si-rate.red    { background: #E8705F; }

/* ============================================================
   Schrittfolgen: Kurvenverschiebung Schritt für Schritt
   ============================================================ */
.walk {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: var(--sp-4) 0 var(--sp-10);
  background: var(--white);
}
.walk:focus { outline: 2px solid var(--tan); outline-offset: 2px; }
.walk:focus:not(:focus-visible) { outline: none; }

.wk-hd {
  background: var(--navy); color: #fff;
  padding: var(--sp-4) var(--sp-6);
  display: flex; align-items: center; gap: 10px;
}
.wk-hd svg { width: 18px; height: 18px; color: var(--tan); flex-shrink: 0; }
.wk-hd strong { font-size: 0.98rem; font-weight: 700; }
.wk-count { margin-left: auto; font-size: 0.84rem; color: rgba(255,255,255,0.62); font-variant-numeric: tabular-nums; }

.wk-stage { position: relative; padding: var(--sp-6) var(--sp-6) 0; }
.wk-step { display: none; }
.wk-step.on { display: block; }
.wk-step svg { display: block; width: 100%; height: auto; }

/* Schrittpunkte */
.wk-dots { display: flex; gap: var(--sp-2); justify-content: center; padding: var(--sp-5) var(--sp-6) 0; }
.wk-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white);
  font: 700 0.8rem var(--font); color: var(--text-faint);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.wk-dot:hover { border-color: var(--navy); color: var(--navy); }
.wk-dot.past { background: var(--cream-dark); border-color: var(--cream-dark); color: var(--brown); }
.wk-dot.on { background: var(--tan); border-color: var(--tan); color: #fff; transform: scale(1.12); }

/* Erklärtext */
.wk-texts { padding: var(--sp-5) var(--sp-6) 0; min-height: 132px; }
.wk-t { display: none; }
.wk-t.on { display: block; }
.wk-t.fade { animation: wk-in .32s ease both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wk-t h5 { margin: 0 0 var(--sp-3); font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.wk-t p { margin: 0 0 var(--sp-3); font-size: 0.96rem; line-height: 1.7; color: var(--text-muted); }
.wk-t p:last-child { margin-bottom: 0; }
.wk-moves {
  background: rgba(219,154,83,0.14); border-left: 3px solid var(--tan);
  border-radius: 0 8px 8px 0; padding: var(--sp-3) var(--sp-4);
  color: var(--brown) !important; font-size: 0.92rem !important;
}
.wk-moves em { font-style: normal; font-weight: 700; }

/* Navigation */
.wk-nav { display: flex; gap: var(--sp-3); padding: var(--sp-6); align-items: center; }
.wk-nav button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white); border-radius: 999px;
  padding: 10px 18px; font: 600 0.9rem var(--font); color: var(--navy);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.wk-nav button svg { width: 16px; height: 16px; }
.wk-nav button:hover:not(:disabled) { border-color: var(--navy); background: var(--cream); }
.wk-nav button:disabled { opacity: 0.35; cursor: default; }
.wk-play { margin-left: auto; background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.wk-play:hover { background: #1C1566 !important; }
.wk-play.running svg { display: none; }

/* Hervorhebung bewegter Kurven in den Schritt-SVGs */
.wk-new { stroke-dasharray: 900; animation: wk-draw 1s ease forwards; }
@keyframes wk-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.wk-old { opacity: 0.3; }
.wk-pulse { animation: wk-pop .5s ease both; }
@keyframes wk-pop { 0% { r: 0; opacity: 0; } 60% { r: 11; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wk-new, .wk-pulse, .wk-t.fade { animation: none; }
  .wk-new { stroke-dasharray: none; }
}

@media (max-width: 640px) {
  .wk-stage, .wk-texts, .wk-nav { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .wk-nav { flex-wrap: wrap; }
  .wk-play { margin-left: 0; width: 100%; justify-content: center; order: 3; }
}

/* ============================================================
   Folien innerhalb einer Unit
   Ein Thema pro Bildschirm statt endlosem Scrollen.
   ============================================================ */
.lsn-slide { display: none; }
.lsn-slide.on { display: block; animation: ls-in .28s ease both; }
@keyframes ls-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lsn-slide.on { animation: none; } }

/* Innerhalb einer Folie beginnt die Überschrift ohne grossen Vorlauf */
.lsn-slide > h2:first-child { margin-top: 0; }
.lsn-slide .lsn-head + h2,
.lsn-slide .lsn-sechead + h2 { margin-top: var(--sp-12); }

.lsn-slidenav {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-top: var(--sp-16); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.lsn-slidenav button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0;
  border: 1.5px solid var(--line); background: var(--white); border-radius: 999px;
  padding: 11px 20px; font: 600 0.92rem var(--font); color: var(--navy);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.lsn-slidenav button svg { width: 16px; height: 16px; }
.lsn-slidenav button:hover:not(:disabled) { border-color: var(--navy); background: var(--cream); }
.lsn-slidenav button:disabled { opacity: 0.32; cursor: default; }
.ls-next.finish { background: var(--navy); border-color: var(--navy); color: #fff; }
.ls-next.finish:hover { background: #1C1566; border-color: #1C1566; color: #fff; }

.ls-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ls-dots { display: flex; gap: 7px; }
.ls-dot {
  padding: 0 !important; border: none !important; background: none !important;
  width: 26px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ls-dot span {
  display: block; width: 100%; height: 5px; border-radius: 999px;
  background: var(--cream-dark); transition: background .18s ease;
}
.ls-dot:hover span { background: var(--lavender); }
.ls-dot.past span { background: var(--tan); opacity: 0.55; }
.ls-dot.on span { background: var(--tan); }
.ls-label {
  font-size: 0.82rem; color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

@media (max-width: 640px) {
  .lsn-slidenav { flex-wrap: wrap; gap: var(--sp-4); }
  .ls-mid { order: -1; width: 100%; }
  .lsn-slidenav button { flex: 1; justify-content: center; }
}

/* Werkzeugleiste: Symbol plus Beschriftung */
.toolbar-btn { display: inline-flex; align-items: center; gap: 8px; }
.toolbar-btn svg { width: 16px; height: 16px; }

/* ============================================================
   Übungsaufgaben mit aufklappbarer Lösung
   ============================================================ */
.tk {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-8); margin: var(--sp-10) 0 var(--sp-12);
  background: var(--white);
}
.tk-hd { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tk-no {
  flex-shrink: 0; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em;
  color: #fff; background: var(--navy); border-radius: 999px; padding: 5px 13px;
  font-variant-numeric: tabular-nums;
}
.tk-hd h4 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
.tk-ask { color: var(--text); line-height: 1.75; }
.tk-ask p { margin: 0 0 var(--sp-3); }
.tk-ask p:last-child { margin-bottom: 0; }
.tk-ask ol, .tk-ask ul { margin: var(--sp-3) 0 0; padding-left: var(--sp-6); }
.tk-ask li { margin-bottom: var(--sp-2); line-height: 1.7; }
.tk-ask .tk-geg {
  background: var(--cream); border-radius: var(--radius); padding: var(--sp-5);
  margin-bottom: var(--sp-4); font-size: 0.96rem;
}

.tk-fold { margin-top: var(--sp-5); border-radius: var(--radius); overflow: hidden; }
.tk-fold summary {
  display: flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-5);
  font-size: 0.93rem; font-weight: 600; transition: background .16s ease;
}
.tk-fold summary::-webkit-details-marker { display: none; }
.tk-fold summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.tk-fold summary span { flex: 1; min-width: 0; }
.tk-chev { display: flex; flex-shrink: 0; transition: transform .22s ease; }
.tk-chev svg { width: 17px; height: 17px; }
.tk-fold[open] .tk-chev { transform: rotate(180deg); }

.tk-hint summary { background: rgba(219,154,83,0.16); color: var(--brown); }
.tk-hint summary:hover { background: rgba(219,154,83,0.26); }
.tk-hint .tk-body {
  background: rgba(219,154,83,0.08); padding: var(--sp-5) var(--sp-6);
  color: var(--text); line-height: 1.75; font-size: 0.96rem;
}
.tk-sol summary { background: var(--navy); color: #fff; }
.tk-sol summary:hover { background: #1B1466; }
.tk-sol[open] summary { border-radius: 0; }
.tk-sol .tk-body { background: var(--cream); padding: var(--sp-6); }
.tk-sol .tk-body > .ex-step:first-child { margin-top: 0; }
.tk-sol .fig { margin: var(--sp-6) 0 var(--sp-4); }
.tk-sol .fig-box { background: var(--white); }
.tk-note {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.7;
}
.tk-note b { color: var(--navy); }

@media (max-width: 700px) {
  .tk { padding: var(--sp-5); }
  .tk-sol .tk-body, .tk-hint .tk-body { padding: var(--sp-5) var(--sp-4); }
}

/* ---------- Antwortoptionen in Klausuraufgaben ---------- */
.tk-ask .kl-opt { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.tk-ask .kl-opt li {
  background: var(--cream); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5); line-height: 1.65; margin: 0;
}
.tk-ask .lsn-table-wrap { margin: var(--sp-4) 0; }
.tk .mth { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.tk-sol .fml { margin: var(--sp-4) 0; }

/* ============================================================
   Lernkarten
   ============================================================ */
.fcs { margin: var(--sp-6) 0 var(--sp-10); }
.fcs-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.fcs-count { font-size: 0.92rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fcs-count b { font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.fcs-tools { display: flex; gap: var(--sp-3); }
.fcs-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--white); color: var(--navy);
  border-radius: 999px; padding: 8px 16px; font: 600 0.85rem var(--font);
  cursor: pointer; transition: background .16s ease, border-color .16s ease;
}
.fcs-btn:hover { background: var(--cream); border-color: var(--tan); }
.fcs-btn svg { width: 15px; height: 15px; }

.fcs-stage { position: relative; perspective: 1600px; min-height: 300px; }

.fc {
  display: none; width: 100%; padding: 0; border: none; background: none;
  cursor: pointer; font-family: var(--font); text-align: left;
}
.fc.on { display: block; }
.fc-inner {
  position: relative; display: block; width: 100%; min-height: 300px;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.22,.9,.28,1);
}
.fc[aria-pressed="true"] .fc-inner { transform: rotateY(180deg); }

.fc-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-5);
  padding: var(--sp-10) var(--sp-8); border-radius: var(--radius-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fc-front { background: var(--white); border: 1px solid var(--line); }
.fc-back  { background: var(--navy); transform: rotateY(180deg); }

.fc-nr {
  position: absolute; top: var(--sp-5); left: var(--sp-6);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.fc-back .fc-nr { color: rgba(255,255,255,0.45); }

.fc-q {
  font-size: 1.32rem; font-weight: 700; line-height: 1.45;
  color: var(--navy); text-align: center; max-width: 34ch;
}
.fc-a {
  font-size: 1.18rem; font-weight: 500; line-height: 1.6;
  color: #fff; text-align: center; max-width: 38ch;
}
.fc-hint {
  position: absolute; bottom: var(--sp-6);
  font-size: 0.78rem; color: var(--text-faint);
}
.fc-back .fc-hint { color: rgba(255,255,255,0.5); }
.fc:hover .fc-front { border-color: var(--tan); }

.fcs-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.fcs-nav button {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 11px 22px; font: 600 0.92rem var(--font); cursor: pointer;
  border: 1px solid var(--line); background: var(--white); color: var(--navy);
  transition: background .16s ease, opacity .16s ease;
}
.fcs-nav button:hover:not(:disabled) { background: var(--cream); }
.fcs-nav button:disabled { opacity: 0.4; cursor: default; }
.fcs-nav button svg { width: 16px; height: 16px; }
.fcs-flip { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.fcs-flip:hover { background: #1B1466 !important; }

.fcs-track { height: 5px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; margin-top: var(--sp-6); }
.fcs-fill { display: block; height: 100%; background: var(--tan); border-radius: 999px; transition: width .25s ease; }

@media (max-width: 700px) {
  .fc-inner, .fcs-stage { min-height: 260px; }
  .fc-face { padding: var(--sp-8) var(--sp-5); }
  .fc-q { font-size: 1.12rem; }
  .fc-a { font-size: 1.02rem; }
  .fcs-nav button { padding: 10px 16px; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-inner { transition: none; }
}

/* ---------- Fallunterscheidung (piecewise) ---------- */
.cs { display: inline-flex; align-items: stretch; gap: 6px; vertical-align: middle; margin: 0 .2em; }
.cs-brace {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 1em; line-height: 1; display: flex; align-items: center;
  transform: scaleY(2.6) scaleX(1.1); transform-origin: center; padding: 0 .18em; color: var(--navy);
}
.cs-rows { display: grid; gap: 4px; }
.cs-row { display: grid; grid-template-columns: auto auto; gap: 0 1.4em; align-items: baseline; }
.cs-val { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.cs-cond { color: var(--text-muted); font-size: 0.92em; }

/* ---------- Spielmatrix in Normalform ---------- */
.kl-matrix { min-width: 0; width: auto; }
.kl-matrix th, .kl-matrix td { text-align: center; padding: 9px 16px; }
.kl-matrix tbody th { background: var(--cream); font-weight: 700; color: var(--navy); }
.kl-matrix td { font-variant-numeric: tabular-nums; }

/* ============================================================
   Lösungen lesbarer setzen
   Jeder Rechenschritt steht auf einer eigenen Zeile, das
   Endergebnis in einem eigenen Block. Dazu mehr Luft zwischen
   den Schritten, damit lange Herleitungen nicht als Textwand
   wirken.
   ============================================================ */

.sol-line { margin: 0 0 var(--sp-3); line-height: 1.9; }
.sol-line:last-child { margin-bottom: 0; }
.sol-line + .sol-line { padding-top: var(--sp-1); }

.sol-answer {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: rgba(46,158,91,0.10); border-left: 3px solid #2E9E5B;
  border-radius: 0 10px 10px 0; line-height: 1.7; color: var(--navy);
}
.sol-answer strong { color: #1F7A45; }

.res-teil { margin-bottom: var(--sp-3); line-height: 1.8; }
.res-teil:last-child { margin-bottom: 0; }

/* Mehr Abstand zwischen den nummerierten Schritten */
.tk-sol .ex-step, .ex-body .ex-step { margin-bottom: var(--sp-8); }
.tk-sol .ex-step:last-of-type { margin-bottom: var(--sp-5); }
.tk-sol .ex-step > div {
  background: var(--white); border-radius: 12px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.tk-sol .ex-step h5 {
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line); color: var(--navy);
}
.tk-sol .ex-no { margin-top: var(--sp-4); }
.tk-sol .tk-body { padding: var(--sp-8) var(--sp-6) var(--sp-6); line-height: 1.85; }
.tk-sol .ex-res { margin-top: var(--sp-4); }

/* Formeln bekommen Luft nach oben und unten */
.sol-line .frac, .res-teil .frac { font-size: 1.08em; }
.tk-sol .sol-line .cs, .tk-sol .sol-line .kl-matrix { margin: var(--sp-3) 0; }

@media (max-width: 700px) {
  .tk-sol .tk-body { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .tk-sol .ex-step > div { padding: var(--sp-4); }
  .tk-sol .ex-step { margin-bottom: var(--sp-6); }
}

/* ============================================================
   Auswahlgrafiken in der Aufgabenstellung
   Vier Darstellungen zur Wahl, die richtige grün umrandet.
   ============================================================ */
.tk-wahl { margin: var(--sp-6) 0 0; }
.tk-wahl-box {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--sp-5); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tk-wahl-box svg { width: 100%; min-width: 440px; height: auto; display: block; }
.tk-wahl figcaption {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--cream); border-radius: 12px;
  font-size: 0.9rem; line-height: 1.75; color: var(--text-muted);
}
.tk-wahl figcaption b, .tk-wahl figcaption strong { color: var(--navy); }

@media (max-width: 640px) {
  .tk-wahl-box { padding: var(--sp-3); border-radius: 12px; }
  .tk-wahl figcaption { padding: var(--sp-4); font-size: 0.86rem; }
}

/* ============================================================
   Buchhaltung: T-Konten und Buchungssätze
   ============================================================ */

.kt { margin: var(--sp-6) 0; }
.kt-name {
  text-align: center; font-weight: 700; color: var(--navy); font-size: 1rem;
  padding-bottom: var(--sp-2); margin-bottom: 0;
}
.kt-body {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--navy); border-radius: 10px; overflow: hidden;
  background: var(--white);
}
.kt-seite { padding: 0; }
.kt-soll { border-right: 1.5px solid var(--navy); }
.kt-kopf {
  padding: 8px var(--sp-4); background: var(--navy); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.kt-z {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 9px var(--sp-4); border-bottom: 1px solid var(--line);
  font-size: 0.92rem; line-height: 1.5;
}
.kt-z:last-child { border-bottom: none; }
.kt-z span { color: var(--text); min-width: 0; }
.kt-z b { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-z.kt-saldo { background: var(--cream); font-style: italic; }
.kt-z.kt-saldo b { font-style: normal; font-weight: 800; }
.kt-note { margin-top: var(--sp-3); font-size: 0.86rem; color: var(--text-muted); line-height: 1.7; }

.kt-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0; }
.kt-reihe .kt { margin: 0; }
.kt-klein .kt-name { font-size: 0.92rem; }
.kt-klein .kt-z { padding: 7px var(--sp-3); font-size: 0.86rem; }
.kt-klein .kt-kopf { padding: 6px var(--sp-3); font-size: 0.66rem; }

/* ---------- Buchungssatz ---------- */
.bu {
  margin: var(--sp-6) 0; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.bu-hd {
  padding: var(--sp-4) var(--sp-5); background: var(--cream);
  font-size: 0.72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--brown);
}
.bu-kopf, .bu-z {
  display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 110px;
  gap: var(--sp-3); align-items: baseline; padding: 11px var(--sp-5);
}
.bu-kopf {
  background: var(--navy); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.bu-z { border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.bu-z:last-child { border-bottom: none; }
.bu-z:nth-child(even) { background: #FDFCFB; }
.bu-nr {
  grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: .08em;
  color: var(--brown); text-transform: uppercase; margin-bottom: -4px;
}
.bu-soll { font-weight: 700; color: var(--navy); }
.bu-an { color: var(--text-faint); font-style: italic; text-align: center; font-size: 0.86rem; }
.bu-haben { font-weight: 700; color: var(--navy); }
.bu-b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); white-space: nowrap; }
.bu-note { grid-column: 1 / -1; font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; margin-top: 2px; }
.bu-fuss {
  padding: var(--sp-4) var(--sp-5); background: var(--cream);
  font-size: 0.86rem; color: var(--text-muted); line-height: 1.7;
}

@media (max-width: 620px) {
  .kt-body { grid-template-columns: 1fr; }
  .kt-soll { border-right: none; border-bottom: 1.5px solid var(--navy); }
  .bu-kopf { display: none; }
  .bu-z { grid-template-columns: minmax(0,1fr) 100px; gap: 6px var(--sp-3); }
  .bu-an { display: none; }
  .bu-haben { grid-column: 1; padding-left: var(--sp-5); position: relative; }
  .bu-haben::before { content: "an "; color: var(--text-faint); font-style: italic; font-weight: 400; position: absolute; left: 0; }
  .bu-b { grid-row: 1; grid-column: 2; }
}

/* ---------- Kontenkunde: Typ-Marker in den Tabellen ---------- */
.kt-tag {
  display: inline-block; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  font-size: .78em; font-weight: 700; letter-spacing: .01em;
  border: 1px solid currentColor;
}
.kt-tag-a { color: #251C74; background: rgba(37,28,116,.08); }
.kt-tag-p { color: #7A4A12; background: rgba(122,74,18,.09); }
.kt-tag-w { color: #9E3A26; background: rgba(158,58,38,.08); }
.kt-tag-e { color: #146638; background: rgba(20,102,56,.09); }
.kt-tag-m { color: #4F45B4; background: rgba(79,69,180,.09); }

/* ---------- Cashflow-Schemata ---------- */
.cf-schema { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.cf-grp {
  border-left: 3px solid var(--tan);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
}
.cf-hd {
  font-weight: 800; color: var(--navy);
  font-size: .95rem; margin-bottom: var(--sp-1);
}
.cf-z {
  font-size: .9rem; color: var(--text);
  padding: 2px 0 2px var(--sp-3); line-height: 1.5;
}
.cf-z.cf-start {
  border-left: 3px solid var(--tan); margin-left: calc(-1 * var(--sp-4) - 3px);
  padding-left: calc(var(--sp-4) + var(--sp-3));
}
.cf-sub { color: var(--text-muted); font-size: .85em; }
.cf-tot {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--navy); color: #fff; border-radius: var(--radius-sm, 8px);
  font-weight: 800; font-size: .98rem;
}
@media (max-width: 640px) {
  .cf-grp { padding-left: var(--sp-3); }
  .cf-z { padding-left: var(--sp-2); font-size: .86rem; }
}

/* Einzelne Folie: nur der Abschluss-Knopf, ohne Punkte und Zurück. */
.lsn-slidenav.solo .ls-prev,
.lsn-slidenav.solo .ls-dots { display: none; }
.lsn-slidenav.solo .ls-mid { justify-content: flex-start; }
.lsn-slidenav.solo { justify-content: space-between; }