/* Gemeinsame Formsprache der Werkzeuge.
 *
 * Leitbild ist ein Messgerät, nicht eine Web-App. Deshalb: keine abgerundeten
 * Ecken, keine Schlagschatten, keine Kacheln mit Rahmen, kein Leuchten an
 * Bedienelementen. Getrennt wird mit Haarlinien, Hierarchie entsteht über
 * Typografie und Abstand. Zahlen laufen tabellarisch, damit beim Ziehen am
 * Regler nichts springt.
 *
 * Schrift ist Bahnschrift, die auf jedem Windows liegt und auf DIN 1451
 * beruht. Technisch, deutsch, und kostet keinen Download.
 */

:root{
  --bg:#0a0a0b;
  --ink:#e9e9ea;
  --dim:#83838c;
  --faint:#55555d;
  --rule:#232327;
  --rule-strong:#34343a;
  --live:#d8a24a;      /* aktuelle Kurve, gedecktes Bernstein */
  --ref:#7aa7c7;       /* eingefroren, entsättigtes Stahlblau */
  --mark:#a8546f;      /* Marker, gedecktes Rosé */
  --warn:#c8813c;
  --ok:#6f9f7a;
  --grid:#17171a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:"Bahnschrift","DIN Next LT Pro","Segoe UI Variable Text","Inter",
              "Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit;font-variant-numeric:inherit}

.app{display:flex;flex-direction:column;height:100%;padding:0 28px 14px}

/* -------------------------------------------------------------- Kopfzeile */
.head{display:flex;align-items:center;gap:16px;height:52px;flex:0 0 auto;
  border-bottom:1px solid var(--rule-strong)}
.head .no{font-size:12px;letter-spacing:.24em;color:var(--faint)}
.head h1{font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.head .sub{font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.head .sp{flex:1}
.nav{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase}
.nav a{color:var(--faint);text-decoration:none}
.nav a:hover{color:var(--ink)}

/* --------------------------------------------------------------- Bedienung */
.bar{flex:0 0 auto;display:flex;align-items:stretch;gap:0;
  border-top:1px solid var(--rule-strong)}
.bar > *{padding:12px 18px 4px;border-right:1px solid var(--rule)}
.bar > *:first-child{padding-left:0}
.bar > *:last-child{border-right:0;padding-right:0}
/* zweite Reihe für Schalter, wenn eine Zeile nicht reicht */
.bar.second{border-top:1px solid var(--rule);justify-content:flex-end;
  align-items:flex-end}
.bar.second > *{padding:8px 0 6px;border-right:0}

.ctl{min-width:0}
.ctl .lab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);
  margin-bottom:6px}
.ctl .val{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:0;
  text-transform:none}
.ctl .val small{font-size:12px;color:var(--dim);margin-left:3px;font-weight:400}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:transparent;cursor:ew-resize;display:block}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule-strong)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:20px;
  background:var(--live);margin-top:-9px;border:0}
input[type=range]:focus{outline:none}
input[type=range]:focus::-webkit-slider-thumb{width:5px;background:var(--ink)}
input[type=range]::-moz-range-track{height:2px;background:var(--rule-strong)}
input[type=range]::-moz-range-thumb{width:3px;height:20px;background:var(--live);
  border:0;border-radius:0}

/* Schaltflächen: Text mit Tastenkürzel, keine Pillen */
.keys{display:flex;align-items:flex-end;gap:0}
.keys button{background:none;border:0;border-left:1px solid var(--rule);
  color:var(--dim);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px 9px;cursor:pointer;white-space:nowrap;line-height:1}
.keys button:first-child{border-left:0}
.keys button:hover{color:var(--ink);background:#111114}
.keys button.on{color:var(--live);background:#14120e}
.keys button.on.ref{color:var(--ref);background:#0e1216}
.keys button i{font-style:normal;color:var(--faint);margin-right:7px}
.keys button.on i{color:inherit;opacity:.65}

/* Segmentierte Auswahl, etwa Voreinstellungen */
.seg{display:flex;border:1px solid var(--rule)}
.seg button{background:none;border:0;border-left:1px solid var(--rule);color:var(--dim);
  font-size:12px;letter-spacing:.09em;padding:7px 13px;cursor:pointer;line-height:1.5;
  white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button.on{color:var(--bg);background:var(--live)}
.seg button i{font-style:normal;opacity:.5;margin-right:6px}

/* ---------------------------------------------------------------- Messwerte */
.meters{flex:0 0 auto;display:flex;border-top:1px solid var(--rule-strong)}
.meter{flex:1;padding:11px 0 12px;border-left:1px solid var(--rule)}
.meter:first-child{border-left:0}
.meter .k{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);padding-left:16px}
.meter:first-child .k,.meter:first-child .v,.meter:first-child .d{padding-left:0}
.meter .v{font-size:30px;font-weight:600;line-height:1.1;margin-top:3px;
  padding-left:16px}
.meter .v u{text-decoration:none;font-size:13px;color:var(--dim);margin-left:4px;
  font-weight:400}
.meter .d{font-size:12px;color:var(--ref);height:15px;margin-top:1px;padding-left:16px;
  letter-spacing:.02em}

/* ------------------------------------------------------------------- Fläche */
.stage{flex:1 1 auto;position:relative;min-height:0}
.stage canvas{width:100%;height:100%;display:block}

.note{position:absolute;pointer-events:none;background:#0a0a0bee;
  border:1px solid var(--rule-strong);padding:5px 9px;font-size:12px;opacity:0;
  transition:opacity .1s;white-space:nowrap}

.foot{flex:0 0 auto;font-size:11px;color:var(--faint);letter-spacing:.02em;
  padding-top:9px;line-height:1.45}
.hint{color:var(--dim)}

/* Infobox des Glossars. Erklärbare Begriffe bekommen eine gepunktete Unterlinie,
   damit man sieht, wo sich das Überfahren lohnt. */
[data-term]{cursor:help}
[data-term]:hover{color:var(--ink)}
.k[data-term],.lab span[data-term]{border-bottom:1px dotted var(--faint)}
.gloss{position:fixed;z-index:99;max-width:390px;background:#0d0d10;
  border:1px solid var(--rule-strong);border-left:2px solid var(--live);
  padding:12px 15px 13px;font-size:12.5px;line-height:1.52;color:var(--dim);
  opacity:0;transition:opacity .11s;pointer-events:none;letter-spacing:.01em}
.gloss b{display:block;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;font-weight:600}

/* nur im erweiterten Modus sichtbar */
body:not(.adv) .adv-only{display:none}

/* Course. Built on instrument.css but calmer: nobody here is operating an
   instrument, they are trying to understand something. One column, generous
   space, and locked units collapse to their heading. */

/* instrument.css setzt html,body auf height:100% und overflow:hidden, weil die
   Werkzeuge feste Instrumententafeln sind. Eine Lernstrecke muss scrollen.
   overflow:hidden verhindert nur das Scrollen von Hand, scrollIntoView
   funktioniert weiter, deshalb ist der Fehler in einem automatischen Durchlauf
   unsichtbar. */
html, body.kurs { height: auto; overflow-y: auto; overflow-x: hidden; }

body.kurs {
  margin: 0;
  background: var(--bg, #0a0a0b);
  color: var(--ink, #e8e6e1);
  font: 15px/1.55 Bahnschrift, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------- header */
.k-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: 54px; box-sizing: border-box; padding: 0 26px;
  background: color-mix(in srgb, var(--bg, #0a0a0b) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule, #22222a);
}
.k-top h1 { margin: 0; font-size: 16px; font-weight: 600; }
.k-top .sub { font-size: 12px; color: var(--dim, #83838c); }
.k-top .sp { margin-left: auto; }
.k-bal { position: relative; width: 170px; height: 3px; background: var(--grid, #26262c); }
.k-bal i { position: absolute; left: 0; top: 0; height: 3px; width: 0; display: block;
  background: var(--live, #d8a24a); transition: width .35s ease; }
#zaehler { font: 12px/1 Consolas, monospace; color: var(--dim, #83838c);
  white-space: nowrap; }
.k-top button {
  background: none; border: 1px solid var(--rule, #22222a); color: var(--dim, #83838c);
  font: 11px/1 Bahnschrift, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; cursor: pointer; white-space: nowrap;
}
.k-top button:hover { color: var(--ink, #e8e6e1); border-color: var(--rule-strong, #3a3a44); }
.k-top #refbtn { border-color: var(--live, #d8a24a); color: var(--live, #d8a24a); }
.k-top a { color: var(--dim, #83838c); text-decoration: none; font-size: 12px;
  white-space: nowrap; }
.k-top a:hover { color: var(--ink, #e8e6e1); }

/* ------------------------------------------------------------------ progress */
#rail {
  position: fixed; left: 13px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px; z-index: 40;
}
#rail .pt {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
}
#rail .pt.ok { background: var(--good, #6f9f7a); border-color: var(--good, #6f9f7a); }
#rail .pt.jetzt { border-color: var(--live, #d8a24a); box-shadow: 0 0 0 3px
  color-mix(in srgb, var(--live, #d8a24a) 22%, transparent); }

/* ---------------------------------------------------------------------- unit */
#kurs { max-width: 880px; margin: 0 auto; padding: 20px 26px 55vh; }

.ein {
  border-top: 1px solid var(--rule, #22222a);
  padding: 30px 0 46px;
  /* The header is sticky and 54 px tall. Without this offset scrollIntoView
     parks the title underneath it and the reader sees a headless unit. */
  scroll-margin-top: 72px;
}

.kap {
  margin: 34px 0 4px; padding: 0 0 2px;
  scroll-margin-top: 72px;
}
.kap:first-child { margin-top: 4px; }
.kap-n {
  display: block; font: 11px/1 Consolas, monospace; letter-spacing: .18em;
  text-transform: uppercase; color: var(--live, #d8a24a); margin-bottom: 6px;
}
.kap h3 {
  margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim, #9a9aa2);
}
.kap p { margin: 7px 0 0; font-size: 14px; color: var(--dim, #83838c); max-width: 64ch; }
.kap.zu { opacity: .3; }

.ein-kopf { display: flex; align-items: baseline; gap: 14px; }
.ein-nr {
  font: 12px/1 Consolas, monospace; color: var(--faint, #55555d);
  letter-spacing: .06em; padding-top: 6px;
}
.ein-tt { display: flex; flex-direction: column; gap: 3px; }
.ein-tt h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.005em; }
.ein-kap {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint, #55555d);
}
.ein-hak { margin-left: auto; font-size: 17px; color: var(--good, #6f9f7a);
  opacity: 0; transition: opacity .3s; }
.ein.fertig .ein-hak { opacity: 1; }
.ein.fertig .ein-tt h2 { color: var(--dim, #9a9aa2); }

.ein-leib { padding-top: 16px; }

.ein-recap {
  display: flex; gap: 11px; align-items: baseline;
  margin: 0 0 15px; padding: 9px 13px;
  border: 1px solid var(--rule, #22222a);
  font-size: 14px; line-height: 1.5; color: var(--dim, #9a9aa2); max-width: 72ch;
}
.ein-recap b {
  flex: 0 0 auto; font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint, #55555d); font-weight: 600; padding-top: 2px;
}

.ein-frage {
  margin: 0 0 18px; font-size: 19px; line-height: 1.5; max-width: 64ch;
}
.ein-stage { margin: 0 0 10px; }
.ein-cv { display: block; width: 100%; }
.ein-ctl {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 28px;
  padding: 14px 0 4px;
}

.ein.zu .ein-leib { display: none; }
.ein.zu { padding: 16px 0; opacity: .32; }
.ein.zu .ein-tt h2 { font-size: 18px; font-weight: 500; }
.ein.zu .ein-kap { display: none; }
.ein.zu .ein-kopf::after {
  content: 'locked'; margin-left: auto; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #55555d);
}

/* ---------------------------------------------------------------------- task */
.ein-auf {
  border-left: 2px solid var(--live, #d8a24a);
  padding: 10px 0 10px 14px; margin: 8px 0 0; max-width: 68ch;
}
.ein-auf b {
  display: block; font-size: 10.5px; letter-spacing: .16em; font-weight: 600;
  text-transform: uppercase; color: var(--live, #d8a24a); margin-bottom: 4px;
}
.ein-auf-t { font-size: 15px; }
.ein-ziel { font-size: 12.5px; color: var(--dim, #83838c); margin-top: 5px; }
.ein.fertig .ein-auf { border-left-color: var(--good, #6f9f7a); opacity: .5; }
.ein.fertig .ein-auf b { color: var(--good, #6f9f7a); }

/* ---------------------------------------------------------------------- quiz */
.ein-quiz { margin-top: 22px; max-width: 68ch; }
.ein-q { font-size: 15.5px; margin-bottom: 10px; }
.ein-a { display: flex; flex-wrap: wrap; gap: 8px; }
.ein-a button {
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--ink, #e8e6e1); font: 14px/1.3 Bahnschrift, sans-serif;
  padding: 9px 14px; cursor: pointer; text-align: left;
}
.ein-a button:hover { border-color: var(--live, #d8a24a); }
.ein-a button.ok { border-color: var(--good, #6f9f7a); color: var(--good, #6f9f7a); }
.ein-a button.nein { border-color: var(--mark, #a8546f); color: var(--mark, #a8546f);
  text-decoration: line-through; }
.ein-a.gel button { pointer-events: none; }
.ein-warum { margin-top: 9px; font-size: 13.5px; line-height: 1.5;
  color: var(--mark, #c2566f); max-width: 66ch; }

/* ------------------------------------------------------------------- insight */
.ein-fazit {
  margin-top: 24px; max-width: 68ch; display: none;
  border: 1px solid var(--rule-strong, #3a3a44);
  border-left: 2px solid var(--good, #6f9f7a);
  padding: 15px 18px 17px;
  background: color-mix(in srgb, var(--good, #6f9f7a) 5%, transparent);
}
.ein-fazit.da { display: block; animation: auf .4s ease; }
@keyframes auf { from { opacity: 0; transform: translateY(-7px); } }
.ein-fazit > b {
  display: block; font-size: 10.5px; letter-spacing: .16em; font-weight: 600;
  text-transform: uppercase; color: var(--good, #6f9f7a); margin-bottom: 6px;
}
.fz-frage {
  font-size: 13.5px; line-height: 1.45; color: var(--faint, #55555d);
  padding-left: 11px; border-left: 1px solid var(--rule-strong, #3a3a44);
  margin-bottom: 9px;
}
.fz-frage .term { color: var(--faint, #55555d); border-bottom-color: var(--rule-strong, #3a3a44); }
.fz-kurz {
  margin: 0 0 10px !important; font-size: 17px; line-height: 1.45; font-weight: 600;
  color: var(--good, #6f9f7a);
}
.ein-fazit p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.ein-next {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule, #22222a);
  font-size: 14px; line-height: 1.5; color: var(--dim, #9a9aa2);
}
.ein-next b {
  display: inline; font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint, #55555d); margin-right: 8px;
}
/* Tiefe, zugeklappt. Der Kurs soll ohne sie vollständig sein. */
.ein-tief {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule, #22222a);
}
.ein-tief summary {
  cursor: pointer; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim, #83838c); padding: 2px 0;
}
.ein-tief summary:hover { color: var(--live, #d8a24a); }
.ein-tief[open] summary { color: var(--live, #d8a24a); margin-bottom: 4px; }
.ein-tief p {
  margin: 9px 0 0 !important; font-size: 14px !important; line-height: 1.55;
  color: var(--dim, #9a9aa2);
}
.ein-tief code, .ein-tief b { font-family: Consolas, monospace; font-weight: 400;
  color: var(--ink, #e8e6e1); font-size: 13.5px; }

.ein-weiter {
  margin-top: 15px; background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--dim, #9a9aa2); font: 12.5px/1 Bahnschrift, sans-serif;
  letter-spacing: .04em; padding: 10px 15px; cursor: pointer;
}
.ein-weiter::after { content: '  ↓'; }
.ein-weiter:hover { color: var(--ink, #e8e6e1); border-color: var(--live, #d8a24a); }

/* ------------------------------------------------------------------ controls */
.ui-reg { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 220px; }
.ui-lab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim, #83838c);
}
.ui-val { font: 15px/1 Consolas, monospace; color: var(--live, #d8a24a);
  letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ui-hint { font-size: 11.5px; color: var(--faint, #55555d); text-transform: none;
  letter-spacing: 0; }
.ui-reg input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--rule-strong, #3a3a44); outline: none; cursor: pointer;
}
.ui-reg input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--live, #d8a24a); cursor: pointer;
}
.ui-reg input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border: none; border-radius: 50%;
  background: var(--live, #d8a24a); cursor: pointer;
}
.ui-btn {
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--ink, #e8e6e1); font: 13px/1 Bahnschrift, sans-serif;
  letter-spacing: .04em; padding: 11px 16px; cursor: pointer;
}
.ui-btn:hover { border-color: var(--live, #d8a24a); }
.ui-btn.stark { border-color: var(--live, #d8a24a); color: var(--live, #d8a24a); }
.ui-segw { display: flex; flex-direction: column; gap: 6px; }
.ui-seg { display: flex; }
.ui-seg button {
  background: none; border: 1px solid var(--rule-strong, #3a3a44); border-right: none;
  color: var(--dim, #83838c); font: 12.5px/1 Bahnschrift, sans-serif;
  padding: 10px 13px; cursor: pointer;
}
.ui-seg button:last-child { border-right: 1px solid var(--rule-strong, #3a3a44); }
.ui-seg button.on { color: var(--bg, #0a0a0b); background: var(--live, #d8a24a);
  border-color: var(--live, #d8a24a); }
/* Der Ableseblock nimmt seine Breite selbst und lässt sie sich nicht vom
   Regler daneben abhandeln, siehe UI.readout in kurs.js. */
.ui-abl { display: flex; gap: 24px; flex-wrap: wrap; flex: 0 0 auto; }
.ui-ab { display: flex; flex-direction: column; gap: 3px; }
.ui-ab .k { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim, #83838c); }
/* Tabellenziffern: eine 1 ist damit so breit wie eine 8, und die Zahl wandert
   beim Schieben nicht seitwärts, obwohl sich jede Stelle ändert. Consolas ist
   ohnehin dicktengleich, die Angabe kostet nichts und gilt auch, wenn der
   Rechner die Schrift nicht hat und eine Ersatzschrift einspringt. */
.ui-ab .v { font: 17px/1.1 Consolas, monospace; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --------------------------------------------------------------- term chips */
.term {
  background: none; border: none; border-bottom: 1px dashed var(--live, #d8a24a);
  color: var(--live, #d8a24a); font: inherit; padding: 0 1px; cursor: help;
}
.term:hover { border-bottom-style: solid; }

.term-pop {
  position: fixed; z-index: 200; width: 340px; box-sizing: border-box;
  background: var(--bg2, #131318); border: 1px solid var(--rule-strong, #3a3a44);
  border-top: 2px solid var(--live, #d8a24a);
  padding: 13px 16px 15px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.tp-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.tp-h b { font-size: 16px; color: var(--live, #d8a24a); }
.tp-h span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint, #55555d); }
.tp-s { font-size: 14.5px; line-height: 1.45; margin-bottom: 8px; }
.tp-l { font-size: 13px; line-height: 1.5; color: var(--dim, #9a9aa2); }
.tp-v { margin-top: 8px; font: 12px/1.3 Consolas, monospace; color: var(--live, #d8a24a); }
.tp-go {
  margin-top: 11px; background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--dim, #83838c); font: 11.5px/1 Bahnschrift, sans-serif;
  padding: 7px 10px; cursor: pointer;
}
.tp-go:hover { color: var(--ink, #e8e6e1); border-color: var(--live, #d8a24a); }
.tp-x {
  position: absolute; right: 7px; top: 5px; background: none; border: none;
  color: var(--faint, #55555d); font-size: 17px; cursor: pointer; line-height: 1;
}

/* --------------------------------------------------------- reference panel */
.ref {
  position: fixed; right: 0; top: 0; bottom: 0; width: 390px; z-index: 150;
  box-sizing: border-box; background: var(--bg2, #131318);
  border-left: 1px solid var(--rule-strong, #3a3a44);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column;
}
.ref.open { transform: none; box-shadow: -18px 0 50px rgba(0, 0, 0, .5); }
.ref-h {
  display: flex; align-items: center; height: 54px; flex: 0 0 auto;
  padding: 0 16px; border-bottom: 1px solid var(--rule, #22222a);
}
.ref-h b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--live, #d8a24a); }
.ref-x { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--dim, #83838c); font-size: 21px; line-height: 1; }
.ref-sub { padding: 12px 16px 4px; font-size: 12px; line-height: 1.5;
  color: var(--faint, #55555d); }
.ref-l { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 40px; }
.ref-r {
  padding: 11px 16px 12px; border-bottom: 1px solid var(--rule, #22222a);
  cursor: pointer; position: relative;
}
.ref-r:hover { background: rgba(255, 255, 255, .022); }
.ref-t { display: flex; align-items: baseline; gap: 8px; }
.ref-t b { font-size: 14.5px; color: var(--ink, #e8e6e1); }
.ref-t span { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint, #55555d); }
.ref-s { font-size: 13px; line-height: 1.45; color: var(--dim, #9a9aa2); margin-top: 4px; }
.ref-m { display: none; font-size: 12.5px; line-height: 1.5;
  color: var(--dim, #83838c); margin-top: 7px; }
.ref-v { display: none; margin-top: 6px; font: 11.5px/1.3 Consolas, monospace;
  color: var(--live, #d8a24a); }
.ref-r.auf .ref-m, .ref-r.auf .ref-v { display: block; }
.ref-g {
  position: absolute; right: 14px; top: 10px; background: none; border: none;
  color: var(--faint, #55555d); font: 10.5px/1 Consolas, monospace; cursor: pointer;
}
.ref-g:hover { color: var(--live, #d8a24a); }
.ref-r.zu { opacity: .34; }
.ref-r.zu .ref-g { display: none; }
.ref-r.zu::after {
  content: 'later'; position: absolute; right: 14px; top: 11px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint, #55555d);
}

@media (max-width: 780px) {
  #rail { display: none; }
  #kurs { padding: 20px 16px 50vh; }
  .ein-tt h2 { font-size: 21px; }
  .k-bal { display: none; }
  .ref { width: 100%; }
  .term-pop { width: calc(100vw - 24px); }
}

/* ---------------------------------------------------------------- intro block */
/* Kurz halten. Jede Zeile hier schiebt die erste Aufgabe nach unten, und wer die
   Seite öffnet, soll etwas zum Anfassen sehen und nicht einen Vorspann. */
.ein.intro { border: none; padding: 0 0 6px; }
.intro-mehr { max-width: 64ch; }
.intro-mehr summary {
  cursor: pointer; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim, #83838c); padding: 4px 0;
}
.intro-mehr summary:hover { color: var(--ink, #e8e6e1); }
.intro-mehr p {
  margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--dim, #9a9aa2);
}
.intro-mehr b { color: var(--live, #d8a24a); font-weight: 600; }

/* ------------------------------------------------------- flache Fenster ----
   Bei 700 px Höhe geht Titel, Rückblick, Frage, Leinwand, Regler und Aufgabe
   nicht gleichzeitig ins Bild, das ist keine Frage der Einstellung sondern des
   Platzes. Also wird das Beiwerk enger und die Leinwand behält ihre Höhe: was
   man bedient, ist wichtiger als der Abstand darum. */
@media (max-height: 780px) {
  .ein { padding: 20px 0 32px; }
  .ein-leib { padding-top: 11px; }
  .ein-tt h2 { font-size: 22px; }
  .ein-recap { margin-bottom: 10px; padding: 7px 11px; font-size: 13px; }
  .ein-frage { font-size: 17px; margin-bottom: 12px; }
  .ein-ctl { gap: 14px 24px; padding: 10px 0 2px; }
  .ein-auf { padding: 7px 0 7px 12px; margin-top: 5px; }
  .ein-auf-t { font-size: 14px; }
  .kap { margin: 24px 0 4px; }
  .kap p { display: none; }
  #kurs { padding-top: 14px; }
}

/* ------------------------------------------------------------- Bezahlwand ---
   Die Karte soll erklären und nicht drohen. Sie sitzt dort, wo die Erzählung
   weitergeht, sieht aus wie eine Einheit und nicht wie ein Riegel, und nennt
   zuerst den Inhalt und dann den Preis. */
.wand {
  border-top: 1px solid var(--rule, #22222a);
  padding: 34px 0 40px; scroll-margin-top: 72px;
}
.wand-tag {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--live, #d8a24a); margin-bottom: 7px;
}
.wand h2 {
  margin: 0 0 14px; font-size: 25px; font-weight: 600; line-height: 1.25;
  max-width: 30ch;
}
.wand-txt { margin: 0 0 20px; font-size: 16px; line-height: 1.55; max-width: 62ch;
  color: var(--dim, #9a9aa2); }
.wand-liste { margin: 0 0 24px; max-width: 62ch; }
.wand-r {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--rule, #22222a);
}
.wand-r:last-child { border-bottom: 1px solid var(--rule, #22222a); }
.wand-n { font: 12px/1 Consolas, monospace; color: var(--faint, #55555d);
  padding-top: 3px; }
.wand-r b { display: block; font-size: 15px; font-weight: 600; }
.wand-r span:not(.wand-n) { display: block; font-size: 13px; margin-top: 2px;
  color: var(--dim, #83838c); }
.wand-akt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; }
.wand-kauf {
  display: inline-block; text-decoration: none;
  background: var(--live, #d8a24a); color: var(--bg, #0a0a0b);
  font: 600 15px/1 Bahnschrift, sans-serif; letter-spacing: .02em;
  padding: 14px 22px;
}
.wand-kauf:hover { filter: brightness(1.08); }
.wand-preis { font: 15px/1 Consolas, monospace; color: var(--dim, #9a9aa2); }
.wand-key { max-width: 62ch; padding-top: 18px;
  border-top: 1px solid var(--rule, #22222a); }
.wand-key label { display: block; font-size: 13px; color: var(--dim, #83838c);
  margin-bottom: 8px; }
.wand-key > div { display: flex; gap: 8px; flex-wrap: wrap; }
.wand-key input {
  flex: 1 1 300px; min-width: 0; box-sizing: border-box;
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--ink, #e8e6e1); font: 13px/1 Consolas, monospace; padding: 11px 12px;
}
.wand-key input:focus { outline: none; border-color: var(--live, #d8a24a); }
.wand-key button {
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--ink, #e8e6e1); font: 13px/1 Bahnschrift, sans-serif;
  padding: 11px 18px; cursor: pointer;
}
.wand-key button:hover:not(:disabled) { border-color: var(--live, #d8a24a); }
.wand-key button:disabled { opacity: .5; cursor: default; }
.wand-hin { margin-top: 9px; font-size: 13px; color: var(--good, #6f9f7a);
  min-height: 18px; }
.wand-hin.fehler { color: var(--mark, #c2566f); }
/* Sobald der freie Teil durchgearbeitet ist, darf die Karte auffallen */
.wand.dran { border-left: 2px solid var(--live, #d8a24a); padding-left: 18px; }
#rail .pt.sperr { border-style: dashed; opacity: .45; }

/* ------------------------------------------------------------- Newsletter ---
   Zwei Karten. Die am Ende sieht aus wie eine Einheit ohne Leinwand, die in der
   Mitte ist ein schmaler Streifen und sperrt nichts. Beide bleiben unsichtbar,
   bis sie an der Reihe sind: eine Aufforderung, die schon in Einheit 3 im Bild
   steht, wird bis Einheit 21 zur Tapete. */
.abo { display: none; scroll-margin-top: 72px; }
.abo.dran { display: block; }
.abo-ende {
  border-top: 1px solid var(--rule, #22222a);
  border-left: 2px solid var(--live, #d8a24a);
  padding: 34px 0 44px 18px; margin-top: 8px;
}
.abo-tag {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--live, #d8a24a); margin-bottom: 7px;
}
.abo-ende h2 { margin: 0 0 14px; font-size: 25px; font-weight: 600;
  line-height: 1.25; max-width: 32ch; }
.abo-txt { margin: 0 0 14px; font-size: 16px; line-height: 1.55; max-width: 62ch;
  color: var(--dim, #9a9aa2); }
.abo-ende .abo-form { margin-top: 22px; }

/* Der Streifen in der Mitte. Kein Rahmen ganz herum, sonst sieht er aus wie
   eine gesperrte Einheit; nur eine Linie links, wie ein Einschub. */
.abo-mitte {
  position: relative; margin: 4px 0 10px;
  padding: 16px 40px 18px 16px;
  border-left: 2px solid var(--rule-strong, #3a3a44);
  background: color-mix(in srgb, var(--live, #d8a24a) 4%, transparent);
}
.abo-mitte-t { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5;
  max-width: 66ch; color: var(--dim, #9a9aa2); }
.abo-mitte-t b { color: var(--ink, #e8e6e1); font-weight: 600; }
.abo-zu {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  background: none; border: 1px solid var(--rule, #22222a); cursor: pointer;
  color: var(--faint, #55555d); font: 15px/1 Bahnschrift, sans-serif;
}
.abo-zu:hover { color: var(--ink, #e8e6e1);
  border-color: var(--rule-strong, #3a3a44); }
.abo-mitte .abo-hin { display: none; }

.abo-form { max-width: 62ch; }
.abo-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.abo-mail {
  flex: 1 1 260px; min-width: 0; box-sizing: border-box;
  background: none; border: 1px solid var(--rule-strong, #3a3a44);
  color: var(--ink, #e8e6e1); font: 14px/1 Consolas, monospace; padding: 12px 12px;
}
.abo-mail:focus { outline: none; border-color: var(--live, #d8a24a); }
.abo-mail:invalid:not(:placeholder-shown) { border-color: var(--mark, #a8546f); }
.abo-knopf {
  display: inline-block; text-decoration: none;
  background: var(--live, #d8a24a); color: var(--bg, #0a0a0b); border: none;
  font: 600 14px/1 Bahnschrift, sans-serif; letter-spacing: .02em;
  padding: 13px 20px; cursor: pointer;
}
.abo-knopf:hover { text-decoration: none; color: var(--bg, #0a0a0b); }
.abo-knopf:hover { filter: brightness(1.08); }
.abo-hin { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--faint, #55555d); max-width: 60ch; }
/* Nach dem Abschicken: keine Erfolgsmeldung, sondern was wirklich bekannt ist */
.abo-ab { border-left-color: var(--good, #6f9f7a); }
@media (max-width: 620px) {
  .abo-ende { padding: 26px 0 34px 14px; }
  .abo-ende h2 { font-size: 21px; }
  .abo-knopf { flex: 1 1 100%; }
}