/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:          #ffffff;
  --bg-2:        #f8fafc;
  --bg-3:        #f1f5f9;
  /* Borders */
  --border:      #e2e8f0;
  --border-2:    #cbd5e1;
  /* Accent — indigo */
  --accent:      #6366f1;
  --accent-h:    #4f46e5;
  --accent-dim:  #eef2ff;
  /* Text */
  --tx:          #0f172a;
  --tx-2:        #475569;
  --tx-3:        #94a3b8;
  /* Console colours */
  --c-ok:        #059669;
  --c-err:       #dc2626;
  --c-info:      #6366f1;
  /* Run button */
  --run:         #16a34a;
  --run-h:       #15803d;
  /* Layout */
  --navbar-h:    52px;
  --sidebar-w:   220px;
  /* Fonts */
  /* Schriften des Betriebssystems: keine Verbindung zu fremden Servern,
     dadurch keine Übertragung der IP-Adresse an Dritte (DSGVO). */
  --font:        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:        ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, 'DejaVu Sans Mono', monospace;
  /* Misc */
  --radius:      6px;
  --t:           150ms ease;
  --shadow:      0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 20px 48px rgba(0,0,0,.18);
}

/* ── Dark theme ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0d1117;
  --bg-2:        #161b22;
  --bg-3:        #21262d;
  --border:      #30363d;
  --border-2:    #484f58;
  --accent:      #818cf8;
  --accent-h:    #a5b4fc;
  --accent-dim:  #1e1b4b;
  --tx:          #e6edf3;
  --tx-2:        #8b949e;
  --tx-3:        #6e7681;
  --c-ok:        #3fb950;
  --c-err:       #f85149;
  --c-info:      #818cf8;
  --run:         #238636;
  --run-h:       #2ea043;
  --shadow:      0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:   0 20px 48px rgba(0,0,0,.6);
}

/* ── Global ──────────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ───────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar {
  height: var(--navbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 28px;
  width: auto;
  align-self: center;
  opacity: 0.9;
}

.brand-name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* dark mode gradient stays readable */
[data-theme="dark"] .brand-name {
  background: linear-gradient(135deg, #818cf8, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-3);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .3px;
}

.legal-links {
  margin-top: 12px;
  font-size: 11px;
  color: var(--tx-3);
}
.legal-links a { color: inherit; }

/* Ausführungszähler in der Seitenleiste */
.state-row--counter { cursor: pointer; }
.state-row--counter:hover .sv { color: var(--accent); }

/* Ergebnis der Syntaxpruefung */
.console-line.ok { color: #2f9e6e; }

/* Befehlsbeschreibung im Pop-up */
.cmd-item { cursor: pointer; }
.cmd-example {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre;
  overflow-x: auto;
  margin: 14px 0;
}
.cmd-more { font-size: 12px; color: var(--tx-3); }

/* Feedback-Dialog */
.feedback-actions { margin: 14px 0; line-height: 1.9; }
.feedback-note { font-size: 12px; color: var(--tx-3); }

/* Weltansicht (Tab "Welt") */
.world-body {
  font-family: var(--sans, inherit);
  overflow-x: auto;
}
.is-hidden { display: none !important; }

/* ── Mit der Tastatur bedienbar ───────────────────────────────── */
/* Es gab bisher keine einzige Fokusregel: Wer ohne Maus arbeitet, musste
   raten, wo er gerade steht - je nach Farbschema war der Ring des Browsers
   auf dem dunklen Hintergrund kaum zu sehen. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Innerhalb der Listen sitzt der Ring enger am Wort */
.cmd-list li:focus-visible { outline-offset: 0; }

/* Sprunglinks: unsichtbar, bis sie den Fokus bekommen - dann oben links */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}


.world-grid {
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 100%;
}
.world-cell {
  width: 36px;
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 15px;
  line-height: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
}
.world-cell.is-blocked { background: var(--bg-3); }

/* Wasserflaeche: die ganze Zelle wird blau, damit eine Flaeche als Flaeche wirkt */
.world-cell.is-water { background: #cfe6f5; }
.world-mark-water.is-small { top: 1px; right: 2px; }

/* Spielplatz: helles Gruen, damit er sich vom Wasser abhebt */
.world-cell.is-playground { background: #dcf2d4; }

/* Lenny laesst sich auf ein anderes Feld ziehen */
.world-cell.is-draggable { cursor: grab; touch-action: none; }
.world-grid.is-dragging .world-cell.is-draggable { cursor: grabbing; }
.world-cell.is-drop-ok { outline: 2px solid var(--accent); outline-offset: -2px; }
.world-cell.is-drop-no { outline: 2px solid #d9534f; outline-offset: -2px; cursor: not-allowed; }
.world-mark-playground.is-small { top: 1px; right: 2px; }
/* Spielzeug: liegt nur herum, deshalb keine eigene Faerbung der Zelle */
.world-mark-toy.is-small { bottom: 1px; right: 2px; }
.world-cell.has-lenny { border-color: var(--accent); }
.world-head {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--tx-3);
  font-family: var(--mono);
}
.world-lenny { color: var(--accent); font-weight: 700; }

/* Lenny auf dem Spielfeld */
.world-lenny-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.world-lenny-icon.is-mirrored { transform: scaleX(-1); }

/* Kleiner Pfeil für die Blickrichtung, oben links in der Zelle */
/* Knochen, Hürde und Hütte: normal mittig, neben Lenny klein in der Ecke */
.world-mark.is-small {
  position: absolute;
  font-size: 10px;
  line-height: 1;
}
.world-mark-hut.is-small,
.world-mark-log.is-small { top: 1px; right: 2px; }
.world-mark-bone.is-small { bottom: 1px; left: 2px; }
.world-mark-saison.is-small { bottom: 1px; right: 2px; }

.world-dir {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 10px;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
}

.world-legend-lenny {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.world-legend-lenny .world-lenny-icon {
  width: 18px;
  height: 18px;
}
.world-count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  font-family: var(--mono);
  color: var(--tx-3);
}
.world-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--tx-3);
}
.world-legend span { white-space: nowrap; }
.world-caption {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--tx-3);
  font-family: var(--mono);
}

/* Interpreter-Version neben dem Namen */
.brand-version {
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-3);
  letter-spacing: .3px;
}

/* Language pills */
.lang-tabs {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  padding: 3px 10px;
  border: none;
  background: transparent;
  color: var(--tx-3);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--t);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Flagge: klein, mit dünnem Rand, damit Weiß auf hellem Grund sichtbar bleibt */
.flagge {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  outline: 1px solid rgba(0, 0, 0, .25);
  outline-offset: -1px;
  flex: none;
}

.lang-btn:hover { background: var(--bg); color: var(--tx-2); }
.lang-btn.active { background: var(--accent); color: #fff; }

/* Hinweis in der Kopfzeile, wenn der Expertenmodus gilt */
.modus-badge {
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Nav right */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--tx-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t);
}
.nav-btn:hover { background: var(--bg-3); color: var(--tx); border-color: var(--border-2); }
.nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.icon-btn { font-size: 14px; padding: 5px 9px; }

/* ── Workspace ───────────────────────────────────────────────── */
.workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
/* scrollbar-width/color not supported in older Safari — webkit fallback above handles it */
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

/* Collapsible sections */
.sidebar-section { margin-bottom: 4px; }

.sidebar-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--t);
}
.sidebar-section > summary::-webkit-details-marker { display: none; }

.sidebar-section > summary::before {
  content: '›';
  font-size: 14px;
  color: var(--tx-3);
  width: 12px;
  text-align: center;
  transition: transform var(--t);
  flex-shrink: 0;
}
.sidebar-section[open] > summary::before { transform: rotate(90deg); }

.sidebar-section > summary span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--tx-3);
}
.sidebar-section > summary:hover { background: var(--bg-3); }
.sidebar-section > summary:hover span { color: var(--tx-2); }

/* Lists inside sections */
.cmd-list {
  list-style: none;
  padding: 3px 4px 6px 20px;
}

.cmd-list li {
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--tx-2);
  border-radius: 4px;
  cursor: default;
  transition: all var(--t);
}
.cmd-list li:hover { background: var(--bg-3); color: var(--accent); }

/* Operator list */
.op-list li { display: inline-block; margin: 1px; }

/* Example list */
.ex-list li {
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 8px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-list li.ex-group {
  cursor: default;
  padding: 8px 8px 2px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.7;
}
.ex-list li.ex-group:hover { background: none; color: inherit; }
.ex-list li.ex-hint {
  cursor: default;
  white-space: normal;
  font-size: 0.85em;
  opacity: 0.8;
}
.ex-list li.ex-hint:hover { background: none; color: inherit; }
.ex-list li:hover { background: var(--accent-dim); color: var(--accent); }
.ex-list li.active { background: var(--accent); color: #fff; }

/* Lenny state panel */
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
}

.state-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--tx-3);
  margin-bottom: 8px;
}

.state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.state-grid .state-row {
  display: contents;
}

.state-grid .sk {
  font-size: 11px;
  color: var(--tx-3);
  font-family: var(--mono);
}

.state-grid .sv {
  font-size: 11px;
  color: var(--tx);
  font-family: var(--mono);
  font-weight: 500;
}

/* ── Main area ───────────────────────────────────────────────── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Panel shared ────────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  height: 40px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.panel-left {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  /* Darf wachsen, damit die Registerleiste den freien Platz bekommt */
  flex: 1 1 auto;
  min-width: 0;
}

.panel-tab {
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  color: var(--tx-3);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.panel-tab.active {
  color: var(--tx);
  border-bottom-color: var(--accent);
}

.panel-hint {
  font-size: 11px;
  color: var(--tx-3);
  white-space: nowrap;
  /* Behält seine Breite; eng wird es zuerst bei den Reitern */
  flex: 0 0 auto;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  background: var(--bg);
  color: var(--tx-2);
}
.btn:active { transform: scale(.97); }

.btn-run {
  background: var(--run);
  color: #fff;
  border-color: transparent;
  padding: 5px 16px;
  font-weight: 600;
}
.btn-run:hover { background: var(--run-h); }

.btn-secondary { background: var(--bg); color: var(--tx-2); }
.btn-secondary:hover { background: var(--bg-3); color: var(--tx); border-color: var(--border-2); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--tx-3); }
.btn-ghost:hover { background: var(--bg-3); color: var(--tx-2); border-color: var(--border); }

.btn-sm { padding: 3px 9px; font-size: 11px; }
.hidden-file-input { display: none; }

/* ── Editor panel ────────────────────────────────────────────── */
.editor-panel {
  flex: 55 55 0;
  min-height: 80px;
}

.editor-body {
  flex: 1;
  overflow: hidden;
  background: var(--bg);
}

#codeEditor {
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--tx);
  tab-size: 2;
  caret-color: var(--accent);
}
#codeEditor::placeholder { color: var(--tx-3); }

/* Anklickbare Fehlermeldung: fuehrt zur Stelle im Programm */
.console-line.is-jump { cursor: pointer; text-decoration: underline dotted; }
.console-line.is-jump:hover { filter: brightness(1.25); }

/* Spalte mit den Zeilennummern links neben dem Editor */
.editor-body.has-line-numbers { position: relative; }
.editor-body.has-line-numbers #codeEditor { padding-left: 8px; }
.editor-line-numbers {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  padding: 16px 6px 16px 0;
  box-sizing: content-box;
  text-align: right;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--tx-3);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  user-select: none;
  pointer-events: none;
}
.editor-line-numbers span { display: block; }

/* Hervorhebung der gerade ausgefuehrten Zeile im langsamen Modus.
   Der Balken liegt hinter dem Textfeld, das dafuer durchsichtig wird. */
.editor-body.has-line-marker { position: relative; }
.editor-body.has-line-marker #codeEditor { position: relative; background: transparent; z-index: 1; }
.editor-line-marker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  transition: top .15s linear;
}

/* ── Resize divider ──────────────────────────────────────────── */
.resize-divider {
  flex-shrink: 0;
  height: 5px;
  background: var(--border);
  cursor: row-resize;
  position: relative;
  transition: background var(--t);
}
.resize-divider::after {
  content: '';
  position: absolute;
  inset: 1px 0;
  background: transparent;
  transition: background var(--t);
}
.resize-divider:hover,
.resize-divider.dragging {
  background: var(--accent);
}

/* ── Console panel ───────────────────────────────────────────── */
/* Geteilte Ansicht: Ausgabe (oder Variablen) links, die Welt rechts. Damit
   muss niemand zwischen zwei Reitern hin- und herschalten, um ein Programm
   zu lesen, das schreibt *und* Lenny bewegt. */
.console-panel.geteilt {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.console-panel.geteilt > .panel-header { grid-row: 1; grid-column: 1 / -1; }
.console-panel.geteilt > #consoleOutput,
.console-panel.geteilt > #varsView { grid-row: 2; grid-column: 1; min-height: 0; }
.console-panel.geteilt > #worldView {
  grid-row: 2;
  grid-column: 2;
  min-height: 0;
  border-left: 1px solid var(--border);
}

.console-panel {
  flex: 45 45 0;
  min-height: 60px;
}

.console-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.console-body::-webkit-scrollbar { width: 6px; }
.console-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.console-line { color: var(--c-ok); }
.console-line.error { color: var(--c-err); }
.console-line.info { color: var(--tx-3); font-style: italic; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.modal.open { display: flex; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal-box {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 840px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in .15s ease;
}

.modal-box--sm { max-width: 560px; }

@keyframes modal-in {
  from { opacity: 0; transform: scale(.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
}

.modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--tx-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--t);
}
.modal-close:hover { background: var(--c-err); color: #fff; border-color: transparent; }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

/* ── Help / markdown content ─────────────────────────────────── */
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4 {
  color: var(--tx);
  font-weight: 600;
  margin: 18px 0 8px;
  line-height: 1.3;
}
.modal-body h1 { font-size: 18px; }
.modal-body h2 { font-size: 15px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.modal-body h3 { font-size: 13px; }

.modal-body p  { color: var(--tx-2); font-size: 13px; line-height: 1.65; margin: 8px 0; }
.modal-body hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

.modal-body a { color: var(--accent); text-decoration: none; }
.modal-body a:hover { text-decoration: underline; }

.modal-body code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--accent);
}

.modal-body pre {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 8px 0;
}
.modal-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--tx-2);
  font-size: 12px;
}

.modal-body ul, .modal-body ol {
  padding-left: 20px;
  color: var(--tx-2);
  font-size: 13px;
  line-height: 1.7;
  margin: 6px 0;
}

.modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}
.modal-body th {
  background: var(--bg-3);
  font-weight: 600;
  color: var(--tx);
  padding: 7px 10px;
  border: 1px solid var(--border);
  text-align: left;
}
.modal-body td {
  color: var(--tx-2);
  padding: 6px 10px;
  border: 1px solid var(--border);
}
.modal-body tr:nth-child(even) td { background: var(--bg-2); }

/* Help collapsible sections */
.help-group-title {
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--tx-3) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 4px !important;
  margin: 20px 0 10px !important;
}

.help-doc-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}

.help-doc-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  transition: background var(--t);
  -webkit-user-select: none;
  user-select: none;
}
.help-doc-section > summary::-webkit-details-marker { display: none; }
.help-doc-section > summary:hover { background: var(--bg-3); }

.help-doc-source {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--tx-3);
  flex-shrink: 0;
}

.help-markdown { padding: 14px 16px; }

.help-status {
  color: var(--tx-3);
  font-size: 13px;
  text-align: center;
  padding: 48px 20px;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Diagnosefeld (nur mit ?diagnose=1 in der Adresse)
   Zeigt die Laufzeiten des letzten Laufs. Liegt über allem, damit es nichts
   verschiebt, und ist zusammenklappbar, damit es nicht im Weg steht.
--------------------------------------------------------------------------- */
.diagnose {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 900;
  width: 290px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font-size: 12px;
  color: var(--tx);
}

.diagnose-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.diagnose-kopf button {
  font: inherit;
  padding: 2px 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--tx);
  cursor: pointer;
}

.diagnose-kopf button:hover { background: var(--accent-dim); }

.diagnose-inhalt { padding: 8px 10px 10px; }

.diagnose table { width: 100%; border-collapse: collapse; }

.diagnose td {
  padding: 2px 0;
  vertical-align: baseline;
}

.diagnose td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diagnose .d-gruppe {
  padding-top: 7px;
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}

.diagnose .d-gesamt td {
  padding-top: 5px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

/* Der dickste Posten wird hervorgehoben: Darauf soll der Blick zuerst fallen */
.diagnose .d-spitze td { color: var(--c-err); font-weight: 600; }

.diagnose.zu .diagnose-inhalt { display: none; }

/* ---------------------------------------------------------------------------
   Registerleiste über dem Editor (nur im Expertenmodus)
   Ein Reiter je offenem Programm. Sie wächst nach rechts und scrollt, statt
   die Knöpfe daneben zu verdrängen.
--------------------------------------------------------------------------- */
.register-leiste {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Die Leiste nimmt den Platz, der nach dem Hinweis übrig ist, und scrollt,
     sobald es eng wird - verdrängt wird der Hinweis dadurch nie. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Auf schmalen Geräten weicht zuerst der Hinweis, dann bekommt die Leiste
   den ganzen Platz */
@media (max-width: 900px) {
  .panel-hint { display: none; }
  .register-leiste { max-width: 100%; }
}

.register-leiste::-webkit-scrollbar { display: none; }

.register-leiste .panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px 6px 0 0;
}

.register-leiste .panel-tab:hover { background: var(--bg-3); }

.register-leiste .reiter-name { cursor: pointer; }

/* Das Kreuz bleibt blass, bis man den Reiter berührt: Es soll da sein,
   aber nicht zum Draufklicken einladen */
.reiter-zu,
.reiter-neu {
  font: inherit;
  line-height: 1;
  padding: 1px 4px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--tx-3);
  cursor: pointer;
}

.reiter-zu { opacity: .35; }
.panel-tab:hover .reiter-zu,
.panel-tab.active .reiter-zu { opacity: 1; }
.reiter-zu:hover { background: var(--c-err); color: #fff; }

.reiter-neu { font-size: 13px; }
.reiter-neu:hover { background: var(--bg-3); color: var(--tx); }

/* Mehr Reiter als Platz: Der rechte Rand blendet aus, damit ein halb
   sichtbarer Name als Fortsetzung lesbar ist und nicht als Fehler */
.register-leiste.scrollt {
  /* Beide Ränder blenden aus. Nur rechts zu verblassen sah aus, als sei der
     erste Reiter kaputt ("amm5.lny"), sobald die Leiste nach rechts gescrollt war. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Schmale Geräte
   ───────────────────────────────────────────────────────────────────────────
   Bis 900 Pixel Breite ist kein Platz für Seitenleiste, neun Sprachknöpfe und
   sieben Werkzeuge nebeneinander. Die Seitenleiste wird zur Schublade, die
   Werkzeuge der Kopfzeile ziehen in sie um, und die Knopfleiste des Editors
   lässt sich seitlich schieben. Start und Stopp bleiben immer sichtbar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Der Knopf für die Schublade; auf breiten Schirmen gibt es ihn nicht */
.menu-btn { display: none; }

/* Die Sammelstelle für Sprachwahl und Werkzeuge in der Schublade */
.sidebar-tools { display: none; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(15, 23, 42, .45);
  border: 0;
}

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }

  /* Die Höhe folgt dem sichtbaren Bereich: Auf dem Telefon wandert die
     Adressleiste beim Scrollen, und 100vh wäre dann zu hoch. */
  .app { height: 100dvh; }

  .navbar {
    gap: 10px;
    padding: 0 10px;
  }

  /* Sprachwahl und Werkzeuge stehen jetzt in der Schublade */
  .navbar .lang-tabs,
  .navbar .nav-right { display: none; }

  .brand-version { display: none; }

  /* ── Seitenleiste als Schublade ─────────────────────────────── */
  .sidebar {
    position: fixed;
    top: var(--navbar-h);
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(80vw, 300px);
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
  }

  .sidebar.offen { transform: translateX(0); }

  .sidebar-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-tools .lang-tabs,
  .sidebar-tools .nav-right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Finger brauchen mehr Fläche als ein Mauszeiger */
  .sidebar-tools .lang-btn,
  .sidebar-tools .nav-btn {
    min-height: 38px;
    padding: 6px 10px;
  }

  .cmd-list li,
  .ex-list li { padding-top: 7px; padding-bottom: 7px; }

  /* ── Knopfleiste des Editors ────────────────────────────────── */
  /* Nur im Editor: Im Ausgabefenster stehen Reiter und "Leeren" weiter
     nebeneinander, sonst deckt der Knopf den Welt-Reiter zu. */
  .editor-panel .panel-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 40px;
    padding: 4px 10px;
    gap: 6px;
  }

  .console-panel .panel-header { padding: 0 10px; }

  /* Die Reiter bekommen eine eigene Zeile, sonst bleibt für die Knöpfe nichts */
  .editor-panel .panel-left {
    order: 2;
    width: 100%;
  }

  .editor-panel .panel-actions {
    order: 1;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  .editor-panel .panel-actions::-webkit-scrollbar { display: none; }
  .editor-panel .panel-actions .btn { flex: 0 0 auto; min-height: 36px; }

  .register-leiste { max-width: 100%; }

  /* ── Aufteilung der Höhe ────────────────────────────────────── */
  /* Ohne Maus lässt sich die Trennlinie nicht ziehen, also feste Anteile */
  .resize-divider { display: none; }
  .editor-panel { flex: 1 1 50%; min-height: 0; }
  .console-panel { flex: 1 1 50%; min-height: 0; }

  /* Nebeneinander ist auf 360 Pixeln nichts zu lesen: untereinander */
  .console-panel.geteilt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  }
  .console-panel.geteilt > #consoleOutput,
  .console-panel.geteilt > #varsView { grid-row: 2; grid-column: 1; }
  .console-panel.geteilt > #worldView {
    grid-row: 3;
    grid-column: 1;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  /* ── Weltansicht ────────────────────────────────────────────── */
  /* Zehn Felder zu 36 Pixeln passen nicht auf 360 Pixel Breite */
  .world-cell,
  .world-head { width: 28px; height: 28px; font-size: 13px; }
}

/* Noch schmaler: Telefone im Hochformat */
@media (max-width: 420px) {
  .world-cell,
  .world-head { width: 24px; height: 24px; font-size: 12px; }
  .brand-badge { display: none; }
  .panel-hint { display: none; }
}

@media (max-width: 900px) {
  /* Der Kopf der Ausgabe soll nicht umbrechen, sonst kostet "Leeren" eine Zeile */
  .console-panel .panel-header { flex-wrap: nowrap; }
}

@media (max-width: 900px) {
  /* In der Schublade steht das Abzeichen zwischen den Flaggen und würde sonst
     die Reihe sprengen */
  .sidebar-tools .modus-badge { font-size: 10px; padding: 3px 8px; }
}

/* Querformat auf dem Telefon: wenig Höhe, deshalb bekommt der Editor mehr davon */
@media (max-height: 520px) and (max-width: 900px) {
  .editor-panel { flex: 1 1 62%; }
  .console-panel { flex: 1 1 38%; }
}

/* Auf dem Schreibtisch braucht die Kopfzeile im Expertenmodus mehr Platz, als
   ein 1024er Bildschirm hat: neun Sprachen, das Abzeichen und sieben Werkzeuge.
   Die Sprachwahl darf deshalb schrumpfen und seitlich scrollen; die Werkzeuge
   rechts bleiben immer erreichbar. */
.navbar { min-width: 0; }

.navbar .lang-tabs {
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.navbar .lang-tabs::-webkit-scrollbar { display: none; }

.navbar .nav-right {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Nummern vor den Ausgabezeilen
   Gezählt wird über einen CSS-Zähler, nicht im Text: So lässt sich eine Zeile
   benennen ("schau auf Zeile 12"), aber beim Kopieren einer Fehlermeldung
   bleibt die Nummer zurück - erzeugter Inhalt landet nicht in der Zwischenablage.
   Der Zähler sitzt am Behälter und beginnt nach "Leeren" wieder bei 1.
--------------------------------------------------------------------------- */
.console-body { counter-reset: ausgabezeile; }

.console-line {
  counter-increment: ausgabezeile;
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 10px;
  align-items: baseline;
}

.console-line::before {
  content: counter(ausgabezeile);
  text-align: right;
  color: var(--tx-3);
  opacity: .6;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
}

/* Bei hundert Zeilen und mehr braucht die Spalte etwas mehr Platz */
.console-body.viele .console-line { grid-template-columns: 4ch 1fr; }

@media (max-width: 600px) {
  /* Auf dem Telefon zählt jede Stelle Breite */
  .console-line { gap: 6px; }
}

/* Der Bereich um die Registerleiste: Die Reiter scrollen, der Knopf für ein
   neues Register bleibt daneben stehen und ist immer erreichbar. */
.register-bereich {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
}

.register-bereich .register-leiste { flex: 0 1 auto; }
.register-bereich .reiter-neu { flex: 0 0 auto; }
.reiter-neu[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Reiter "Variablen": zeigt nach jedem Lauf, was in den Variablen steht.
   Variablen überleben einen Lauf, deshalb ist markiert, was schon vorher da war.
--------------------------------------------------------------------------- */
.vars-body table { width: 100%; border-collapse: collapse; }

.vars-body td {
  padding: 3px 10px 3px 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--border);
}

.vars-name { color: var(--tx); white-space: nowrap; }
.vars-wert { color: var(--c-ok); word-break: break-word; }

.vars-herkunft {
  color: var(--tx-3);
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}

.vars-leer { color: var(--tx-3); font-style: italic; }

.vars-kopf {
  color: var(--tx-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 6px;
}

/* ── Tastenkürzel in der Hilfe ────────────────────────────────── */
table.tastatur {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
}
table.tastatur th,
table.tastatur td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
table.tastatur th { font-size: 13px; color: var(--fg-dim, inherit); font-weight: 600; }
table.tastatur td:first-child { white-space: nowrap; width: 1%; }
kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  background: var(--bg-2, rgba(127,127,127,.12));
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
}