:root {
  --grund: #f5f6f8;
  --flaeche: #ffffff;
  --rand: #d9dde4;
  --text: #1c2330;
  --leise: #5d6878;
  --akzent: #1f6feb;
  --akzent-weich: #e8f0fe;
  --gut: #1a7f45;
  --gut-weich: #e6f5ec;
  --offen: #b4451f;
  --offen-weich: #fdeee7;
  --code-grund: #1f2430;
  --code-text: #e6e9ef;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12151b;
    --flaeche: #191d25;
    --rand: #2c333f;
    --text: #e6e9ef;
    --leise: #98a3b3;
    --akzent: #58a6ff;
    --akzent-weich: #16243a;
    --gut: #4ac07c;
    --gut-weich: #14291d;
    --offen: #ff9066;
    --offen-weich: #2e1b14;
    --code-grund: #0d1117;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Kopf ---------- */
header {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopfzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marke { font-weight: 700; font-size: 18px; margin-right: auto; }
.marke span { color: var(--leise); font-weight: 400; font-size: 14px; }

.balken {
  height: 8px;
  width: 160px;
  background: var(--rand);
  border-radius: 99px;
  overflow: hidden;
}
.balken i { display: block; height: 100%; background: var(--gut); width: 0; transition: width .4s; }
.stand { font-size: 14px; color: var(--leise); white-space: nowrap; }

.schritte { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.schritt {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 11px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.schritt:hover { border-color: var(--akzent); }
.schritt[aria-current="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.schritt.fertig { background: var(--gut-weich); border-color: var(--gut); color: var(--gut); }
.schritt[aria-current="true"].fertig { background: var(--gut); color: #fff; }

/* ---------- Aufteilung ---------- */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px 40px;
  align-items: start;
  max-width: 1700px;
  margin: 0 auto;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow: hidden;
}

.kartenkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rand);
  font-size: 14px;
  color: var(--leise);
  flex-wrap: wrap;
}
.kartenkopf strong { color: var(--text); font-family: var(--mono); font-size: 13px; }
.kartenkopf .rechts { margin-left: auto; display: flex; gap: 8px; }

/* ---------- Lektionstext ---------- */
.lektion { padding: 4px 22px 24px; max-height: calc(100vh - 190px); overflow-y: auto; }
.lektion h1 { font-size: 24px; margin: 20px 0 4px; }
.lektion h2 { font-size: 19px; margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid var(--rand); }
.lektion h3 { font-size: 16px; margin: 20px 0 6px; }
.lektion p, .lektion li { font-size: 15.5px; }
.lektion ul, .lektion ol { padding-left: 22px; }
.lektion li { margin: 4px 0; }
.lektion code { font-family: var(--mono); font-size: 13.5px; background: var(--akzent-weich); color: var(--akzent); padding: 1px 5px; border-radius: 4px; }
.lektion pre.code {
  background: var(--code-grund);
  color: var(--code-text);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.lektion pre.code code { background: none; color: inherit; padding: 0; font-size: 13.5px; line-height: 1.5; }
.lektion table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14.5px; }
.lektion th, .lektion td { border: 1px solid var(--rand); padding: 6px 10px; text-align: left; }
.lektion th { background: var(--akzent-weich); }
.lektion blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--akzent); background: var(--akzent-weich); border-radius: 0 8px 8px 0; }
.lektion a { color: var(--akzent); }

/* ---------- Editor ---------- */
.editorbox { position: relative; display: flex; background: var(--code-grund); overflow: hidden; }
.zeilen {
  white-space: pre;
  padding: 12px 8px 12px 12px;
  color: #6b7688;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  text-align: right;
  user-select: none;
  min-width: 44px;
}
textarea.code {
  flex: 1;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--code-text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px 12px 4px;
  min-height: 320px;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

button.tat {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
button.tat:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
button.tat:disabled { opacity: .5; cursor: default; }
button.tat.wichtig { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button.tat.wichtig:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }

/* ---------- Ausgabe ---------- */
.ausgabe {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px 14px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
}
.ausgabe.leer { color: var(--leise); font-family: var(--schrift); }
.fehlerkasten { background: var(--offen-weich); border-top: 1px solid var(--rand); padding: 12px 14px; }
.fehlerkasten b { color: var(--offen); }
.fehlerkasten .erklaerung { font-family: var(--schrift); font-size: 14.5px; margin-top: 6px; }

.punkte { list-style: none; margin: 0; padding: 8px 0; }
.punkte li { display: flex; gap: 10px; padding: 5px 14px; align-items: flex-start; font-size: 14.5px; }
.punkte .marke-ok, .punkte .marke-offen { font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.punkte .marke-ok { color: var(--gut); }
.punkte .marke-offen { color: var(--offen); }
.punkte .tipp { display: block; color: var(--leise); font-size: 13.5px; white-space: pre-wrap; margin-top: 3px; font-family: var(--mono); }
.punkte li.offen { background: var(--offen-weich); }

.schluss { padding: 12px 14px; border-top: 1px solid var(--rand); font-size: 15px; }
.schluss.gut { background: var(--gut-weich); color: var(--gut); font-weight: 600; }

.hinweis { padding: 10px 14px; font-size: 14px; color: var(--leise); }

/* ---------- Fuss ---------- */
footer { padding: 0 20px 30px; text-align: center; color: var(--leise); font-size: 13px; }
footer button.tat { font-size: 13px; padding: 4px 10px; }

/* ---------- Ladeschirm ---------- */
#lader {
  position: fixed; inset: 0; background: var(--grund);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  z-index: 100; text-align: center; padding: 20px;
}
#lader .titel { font-size: 20px; font-weight: 700; }
#lader .text { color: var(--leise); }
.pkt { display: flex; gap: 6px; }
.pkt i { width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); animation: hopp 1.1s infinite; }
.pkt i:nth-child(2) { animation-delay: .18s; }
.pkt i:nth-child(3) { animation-delay: .36s; }
@keyframes hopp { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- Handy ---------- */
.umschalter { display: none; gap: 6px; margin-top: 10px; }

@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .umschalter { display: flex; }
  body.zeigt-code .spalte-text { display: none; }
  body.zeigt-text .spalte-code { display: none; }
  .lektion { max-height: none; }
}

/* ---------- Fragen und Antworten ---------- */
#fragen { padding: 4px 0 8px; }

.frage {
  border-top: 1px solid var(--rand);
  padding: 12px 14px;
}
.frage:first-child { border-top: 0; }
.frage.neu { background: var(--akzent-weich); }

.fragekopf { font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.fragetext {
  font-size: 15px;
  border-left: 3px solid var(--rand);
  padding-left: 10px;
  margin-bottom: 10px;
}
.antworttext { font-size: 15px; }
.antworttext p { margin: 8px 0; }
.antworttext h4 { margin: 12px 0 4px; font-size: 15.5px; }
.antworttext ul { margin: 8px 0; padding-left: 20px; }
.antworttext code { font-family: var(--mono); font-size: 13.5px; background: var(--akzent-weich); color: var(--akzent); padding: 1px 5px; border-radius: 4px; }
.antworttext pre.ausgabe { background: var(--code-grund); color: var(--code-text); border-radius: 8px; padding: 10px 12px; }
.wartet { font-size: 14.5px; color: var(--leise); font-style: italic; }

/* ---------- Frage-Dialog ---------- */
dialog#fragedialog {
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  padding: 20px 22px;
  max-width: 560px;
  width: calc(100% - 40px);
}
dialog#fragedialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog#fragedialog h3 { margin: 0 0 8px; font-size: 18px; }
dialog#fragedialog .leise { color: var(--leise); font-size: 14px; margin: 0 0 12px; }
dialog#fragedialog textarea {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  resize: vertical;
}
.dialogknoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }