/*
 * Go lernen — Gestaltung.
 *
 * Zwei Spalten: links liest man, rechts tippt man. Auf dem Handy fällt es
 * untereinander, aber der Hauptfall ist der große Schirm — Code tippt niemand
 * auf dem Telefon.
 *
 * Farbe bedeutet etwas: Cyan ist Go, Grün heißt "sitzt", Rot ist der Compiler.
 * Nichts davon ist Zierde.
 */

:root {
  --bg:        #0a0e14;
  --flaeche:   #111823;
  --linie:     #1e2a3a;
  --text:      #dbe3f0;
  --muted:     #8a9cbd;
  --faint:     #5a6b85;
  --cyan:      #4ad6e8;
  --gruen:     #3fd6a8;
  --rot:       #ff6b7a;
  --gelb:      #e8b45a;
  --mono: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
}

* { box-sizing: border-box; }

/* Muss vor allem anderen stehen und muss !important sein.
 *
 * Das hidden-Attribut wirkt ueber die Regel [hidden] { display: none } des
 * Browsers — und die hat weniger Gewicht als jede eigene Klasse mit display.
 * Ohne diese Zeile blieb die Anmeldung nach dem Anmelden stehen, weil
 * ".tor { display: flex }" staerker war als das hidden daneben. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ Tor */

.tor { display: flex; align-items: center; justify-content: center; height: 100%; }
.tor form {
  width: min(22rem, 90vw);
  border: 1px solid var(--linie); border-radius: 14px;
  background: var(--flaeche); padding: 1.8rem;
  text-align: center;
}
.tor h1 { margin: 0 0 .3rem; font-size: 1.6rem; }
.tor p { color: var(--muted); font-size: .85rem; margin: 0 0 1.2rem; }
.tor input { width: 100%; margin-bottom: .7rem; }
.tor button { width: 100%; }

h1 span { color: var(--cyan); }

/* -------------------------------------------------------------- Gerüst */

#app { display: flex; flex-direction: column; height: 100%; }

header {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
header h1 { margin: 0; font-size: 1.1rem; }

#reiter { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
#reiter button {
  background: transparent; border: 1px solid var(--linie); color: var(--muted);
  border-radius: 8px; padding: .25rem .7rem; font: inherit; font-size: .82rem;
  cursor: pointer; display: flex; align-items: center; gap: .4rem;
}
#reiter button:hover { color: var(--text); border-color: var(--faint); }
#reiter button.aktiv { color: var(--bg); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
#reiter button .haken { color: var(--gruen); font-size: .9em; }
#reiter button.aktiv .haken { color: var(--bg); }

main { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); min-height: 0; }

/* ------------------------------------------------------------- Lektion */

.lektion { overflow-y: auto; padding: 1.6rem 1.8rem 3rem; border-right: 1px solid var(--linie); }
.lektion .kopf { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .2rem; }
.lektion .nr {
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid var(--linie); border-radius: 5px; padding: .25rem .45rem;
}
.lektion h2 { margin: 0; font-size: 1.15rem; }
.reflex {
  color: var(--gelb); font-size: .88rem; margin: .5rem 0 1.2rem;
  border-left: 2px solid var(--gelb); padding-left: .8rem;
}
.text { color: var(--muted); font-size: .92rem; }
.text b { color: var(--text); }
.text code, .aufgabe code, .panel code {
  font: .85em var(--mono); background: rgba(0,0,0,.4); padding: .1rem .3rem; border-radius: 4px;
  color: var(--cyan);
}
.text pre, .aufgabe pre {
  font: 12.5px/1.6 var(--mono); background: rgba(0,0,0,.4); padding: .7rem .9rem;
  border-radius: 8px; overflow-x: auto; color: var(--text);
}
.text pre code, .aufgabe pre code { background: none; padding: 0; }

.aufgabe, .panel {
  margin-top: 1.4rem; border: 1px solid var(--linie); border-radius: 10px; padding: .9rem 1rem;
  font-size: .9rem; color: var(--muted);
}
.aufgabe { border-color: rgba(74,214,232,.3); background: rgba(74,214,232,.05); }
.panel { background: rgba(0,0,0,.2); }
.lbl {
  font: 600 .65rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: .5rem;
}
.aufgabe .lbl { color: var(--cyan); }

/* ------------------------------------------------------------ Werkbank */

.werkbank { display: flex; flex-direction: column; min-height: 0; }
.leiste {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--linie);
}
#dauer { color: var(--faint); font: .75rem var(--mono); }
#marke { font-size: .82rem; margin-left: auto; }
#marke.gut { color: var(--gruen); }
#marke.offen { color: var(--faint); }

textarea {
  flex: 1; min-height: 12rem; resize: none;
  background: #070b11; color: var(--text); border: 0; border-bottom: 1px solid var(--linie);
  padding: 1rem 1.1rem; font: 13.5px/1.65 var(--mono); tab-size: 4;
}
textarea:focus { outline: none; }

.ausgabe {
  height: 38%; min-height: 8rem; overflow: auto; padding: .9rem 1.1rem;
  font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word;
  background: #060a0f;
}
.ausgabe .leer { color: var(--faint); }
.ausgabe .compilerfehler { color: var(--rot); }
.ausgabe .kopfzeile {
  color: var(--faint); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.ausgabe .gut { color: var(--gruen); }

/* ------------------------------------------------------------ Bedienung */

button {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--cyan); color: #04121a; border: 0; border-radius: 8px;
  padding: .4rem .9rem; font-weight: 600;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: default; }
button.klein {
  background: transparent; color: var(--muted); border: 1px solid var(--linie); font-weight: 400;
}
button.klein:hover { color: var(--text); border-color: var(--faint); }
.taste { font: .7rem var(--mono); opacity: .6; margin-left: .3rem; }

input {
  background: #070b11; border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text); padding: .5rem .7rem; font: inherit;
}
input:focus { outline: none; border-color: var(--cyan); }

.fehler { color: var(--rot); font-size: .82rem; margin-top: .6rem; min-height: 1.2em; }

/* ---------------------------------------------------------------- Handy */

/* Der Umschalter selbst — am Rechner gibt es ihn nicht, dort steht beides
 * nebeneinander. */
.handy-schalter { display: none; gap: .4rem; padding: .5rem .8rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.handy-schalter button {
  flex: 1; background: transparent; border: 1px solid var(--linie); color: var(--muted);
  font-weight: 400; border-radius: 8px; padding: .5rem;
}
.handy-schalter button.aktiv { background: var(--cyan); border-color: var(--cyan); color: var(--bg); font-weight: 600; }
.handy-schalter button .marke { color: var(--gruen); margin-left: .35rem; }
.handy-schalter button.aktiv .marke { color: var(--bg); }

/* Zeichenleiste über dem Editor. */
/* Umbrechen statt scrollen: Als eine scrollbare Zeile lagen die Haelfte der
 * Zeichen ausserhalb des Schirms — unsichtbar, und niemand wischt in einer
 * Knopfleiste. Zwei Reihen, in denen alles zu sehen ist, schlagen eine
 * elegante Zeile, von der man nur die Haelfte hat. */
.zeichen {
  display: none; flex-wrap: wrap; gap: .3rem;
  padding: .45rem .6rem; border-bottom: 1px solid var(--linie); background: rgba(0,0,0,.25);
}
.zeichen button {
  flex: 1 0 auto; min-width: 2.1rem; padding: .45rem .4rem;
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
  font: 600 .95rem var(--mono); border-radius: 7px;
}
.zeichen button:active { background: var(--cyan); color: var(--bg); }

/* Auf dem Handy ist immer genau EINES sichtbar — Lektion oder Werkbank —, dafür
 * über die ganze Fläche. Vorher standen beide untereinander, jedes auf halber
 * Höhe: Man las durch einen Schlitz und tippte durch einen zweiten.
 *
 * Umgeschaltet wird über eine Klasse am <main>; das JS setzt sie. Ohne JS
 * (oder auf einem Leseschritt) bleibt die Lektion sichtbar — der sichere
 * Zustand ist der, der nichts versteckt. */
@media (max-width: 900px) {
  /* minmax(0,1fr), NICHT 1fr: Ein 1fr ist mindestens so breit wie sein Inhalt.
     Eine lange Codezeile hat damit die ganze Spalte ueber den Schirmrand
     geschoben, und die rechte Haelfte des Editors war nicht mehr erreichbar. */
  main { grid-template-columns: minmax(0, 1fr); }
  .lektion { border-right: 0; padding: 1.1rem 1.1rem 3rem; }
  .werkbank { min-height: 0; }

  main.handy-code .lektion { display: none; }
  main.handy-lektion .werkbank { display: none; }

  .handy-schalter { display: flex; }

  /* Reiterleiste: eine scrollbare Zeile statt einer Wand aus sechzehn Knöpfen. */
  header { gap: .6rem; padding: .6rem .8rem; }
  #reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  #reiter::-webkit-scrollbar { display: none; }
  #reiter button { flex: none; }
  .teilkopf { display: none; }

  /* Fingerkuppen brauchen mehr Fläche als ein Mauszeiger. */
  button { padding: .55rem 1rem; }
  .punkt { width: .9rem; height: .9rem; }
  .blaettern button { padding: .7rem 1rem; }

  .zeichen { display: flex; }
  .ausgabe { height: auto; max-height: 45vh; }
  textarea { min-height: 40vh; }
  /* KEIN overflow-x: hidden am body: Das verhindert nicht das Überstehen,
     es schneidet nur ab — und dann kommt man an den Rest gar nicht mehr heran.
     Überstehendes soll scrollen, nicht verschwinden. */
  .werkbank, .editor { max-width: 100%; }
  .zeilen { width: 2.4rem; padding-right: .4rem; }
  .lektion h2 { font-size: 1.05rem; }
  .text { font-size: .95rem; }
}



/* --------------------------------------------------- Teile in den Reitern */

#reiter { align-items: center; }
.teilkopf {
  font: 600 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-left: .8rem; padding-right: .2rem;
}
.teilkopf:first-child { margin-left: 0; }
#reiter button { min-width: 2.2rem; justify-content: center; }

.lektion .teil {
  font: 600 .65rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: .6rem;
}

/* ------------------------------------------------------------- Schritte */

.schrittleiste {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.1rem;
}
#l-schrittzahl { font: .72rem var(--mono); color: var(--faint); }

.punkte { display: flex; gap: .35rem; }
.punkt {
  width: .7rem; height: .7rem; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--linie); cursor: pointer;
}
.punkt:hover { border-color: var(--faint); }
.punkt.gut { background: var(--gruen); border-color: var(--gruen); }
.punkt.hier { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(74,214,232,.15); }
.punkt.hier.gut { background: var(--gruen); }

.blaettern { display: flex; gap: .5rem; margin-top: 1.4rem; }
.blaettern button { flex: 1; }

/* ------------------------------------------------------- Zeilen im Editor
 *
 * Die Zeilenspalte MUSS Schriftgröße, Zeilenhöhe und oberen Abstand exakt mit
 * dem Textfeld teilen — sonst laufen Nummer und Zeile auseinander, und zwar
 * umso weiter, je länger der Code ist.
 */

.editor { flex: 1; display: flex; min-height: 12rem; overflow: hidden; background: #070b11; }

.zeilen {
  flex: none; width: 3rem; overflow: hidden;
  padding: 1rem .6rem 1rem 0; text-align: right;
  font: 13.5px/1.65 var(--mono);
  color: var(--faint); background: rgba(0,0,0,.25);
  border-right: 1px solid var(--linie);
  user-select: none;
}
.zn { white-space: pre; }
.zn.schlecht {
  color: var(--rot); font-weight: 700;
  background: rgba(255,107,122,.14);
  border-radius: 3px 0 0 3px;
}

/* ------------------------------------------------------------- Faerbung
 *
 * Zwei Schichten uebereinander: unten <pre id="hl"> mit dem eingefaerbten
 * Text, darueber das echte Textfeld, dessen Schrift durchsichtig ist. Man
 * tippt also im Textfeld und sieht die Farben darunter.
 *
 * Die beiden MUESSEN in Schriftart, Groesse, Zeilenhoehe, Abstaenden und
 * Tabulatorbreite exakt uebereinstimmen — sonst wandern Text und Faerbung mit
 * jeder Zeile weiter auseinander. Deshalb steht das hier gebuendelt.
 */
.editor .feld { position: relative; flex: 1; min-width: 0; display: flex; }

.editor .feld .hl,
.editor .feld textarea {
  margin: 0;
  padding: 1rem 1.1rem 1rem .8rem;
  font: 13.5px/1.65 var(--mono);
  tab-size: 4;
  white-space: pre;
  border: 0;
}

.editor .feld .hl {
  position: absolute; inset: 0;
  overflow: hidden;          /* gescrollt wird per JS, im Gleichtakt */
  pointer-events: none;      /* Klicks gehen ans Textfeld darunter */
  color: var(--text);
  background: transparent;
}

.hl .k { color: var(--cyan); }              /* Schluesselwoerter */
.hl .s { color: var(--gruen); }             /* Zeichenketten */
.hl .c { color: var(--faint); font-style: italic; }  /* Kommentare */
.hl .n { color: var(--gelb); }              /* Zahlen */

.editor .feld textarea {
  position: relative;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
}

.editor textarea {
  flex: 1; min-height: 0; white-space: pre; overflow: auto;
  /* min-width: 0 ist Pflicht, nicht Kosmetik: Ein Flex-Element ist von sich aus
     mindestens so breit wie sein Inhalt. Bei wrap="off" und einer langen Zeile
     wird das Textfeld dadurch breiter als der Schirm — und die ganze Seite
     schiebt sich waagerecht mit. Mit 0 scrollt stattdessen das Feld selbst. */
  min-width: 0;
}

.fehlerlink { color: var(--rot); text-decoration: underline; cursor: pointer; }
.fehlerlink:hover { color: #fff; }

/* --------------------------------------------- Lesen und Wiederholung */

/* Ein Leseschritt bekommt die ganze Breite: kein Editor, keine Ausgabe, nichts,
   was ablenkt. Der Text steht dann in einer lesbaren Spaltenbreite mittig. */
main.nur-lesen { grid-template-columns: 1fr; }
main.nur-lesen .lektion {
  border-right: 0;
  max-width: 52rem; margin: 0 auto; padding-top: 2.4rem;
}
main.nur-lesen .text { font-size: .98rem; }

.aufgabe.wdh { border-color: rgba(232,180,90,.35); background: rgba(232,180,90,.05); }
.aufgabe.wdh .lbl { color: var(--gelb); }

/* Der Hinweis, warum ein Schritt noch nicht abgehakt ist. Gelb, nicht rot:
   Es ist kein Fehler, es fehlt nur noch etwas. */
.ausgabe .hinweis { color: var(--gelb); }

/* ------------------------------------------- Erinnerung und Spickzettel
 *
 * Beides ist Nachschlagewerk, kein Stoff. Deshalb steht es leiser als die
 * Aufgabe: gedeckte Farbe, kein Rahmen, der um Aufmerksamkeit bittet. Wer es
 * nicht braucht, soll darüber hinweglesen können.
 */

.erinnerung {
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px dashed var(--linie);
  font-size: .82rem; color: var(--faint);
}
.erinnerung code { color: var(--muted); }
.erinnerung b { color: var(--muted); font-weight: 600; }

.spick {
  margin-top: .9rem;
  border: 1px solid var(--linie); border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.spick > summary {
  cursor: pointer; list-style: none;
  padding: .6rem .9rem;
  display: flex; align-items: baseline; gap: .6rem;
}
.spick > summary::-webkit-details-marker { display: none; }
.spick > summary::before {
  content: "▸"; color: var(--faint); font-size: .8rem;
}
.spick[open] > summary::before { content: "▾"; }
.spick > summary:hover .spick-lbl { color: var(--cyan); }
.spick-lbl {
  font: 600 .65rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.spick-was { font-size: .78rem; color: var(--faint); }

#l-spick-inhalt { padding: 0 .9rem 1rem; }
.spick-gruppe + .spick-gruppe { margin-top: .9rem; }
.spick-titel {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); opacity: .8; margin-bottom: .35rem;
}
.spick-zeile {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .1rem .9rem; padding: .18rem 0;
  font-size: .82rem; color: var(--faint);
}
.spick-zeile code {
  font: 12px/1.5 var(--mono); color: var(--cyan);
  background: rgba(0,0,0,.35); border-radius: 4px; padding: .12rem .35rem;
  justify-self: start; overflow-wrap: anywhere;
}
.spick-zeile span code { background: none; padding: 0; color: var(--muted); }

/* Auf schmalem Schirm passen zwei Spalten nicht mehr nebeneinander. */
@media (max-width: 1200px) {
  .spick-zeile { grid-template-columns: 1fr; }
}

/* Sitzung weg — muss auffallen, nicht huebsch sein. */
#sitzung-weg {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 100;
  padding: .7rem 1rem;
  background: #7E241B;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
#sitzung-weg button {
  margin-left: .8rem;
  padding: .3rem .8rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}