/*
 * 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 */

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .lektion { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 50vh; }
  .werkbank { min-height: 60vh; }
}