.code-editor { position: relative; flex: 1; min-height: 390px; overflow: hidden; border: 1px solid #aeb8ce; border-radius: 6px; background: #fbfcff; }
.code-editor textarea, .code-editor pre { position: absolute; inset: 0; margin: 0; padding: 12px 12px 12px 52px; border: 0; border-radius: 0; font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: auto; tab-size: 2; }
.code-editor textarea { z-index: 2; width: 100%; height: 100%; min-height: 0; resize: none; background: transparent; color: transparent; caret-color: #172342; }
.code-editor textarea::selection { background: #b8c9ff99; color: transparent; }
.code-editor pre { z-index: 1; background: transparent; color: #172342; pointer-events: none; }
.code-editor ol { position: absolute; z-index: 3; inset: 0 auto 0 0; width: 42px; margin: 0; padding: 12px 6px 12px 0; overflow: hidden; list-style: none; text-align: right; color: #7c879b; background: #f0f2f7; border-right: 1px solid #d4dae7; font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; }
.syntax-status { min-height: 1.35em; margin: 7px 0 0; color: #216440; font-size: .88rem; }
.syntax-status.error { color: #a52d44; }
.syntax-class, .syntax-declaration { color: #2268b5; font-weight: 700; }.syntax-type { color: #4b6f9a; font-weight: 700; }.syntax-method { color: #008563; font-weight: 700; }.syntax-control { color: #a24c16; font-weight: 700; }.syntax-string { color: #b24121; }.syntax-comment { color: #58885a; font-style: italic; }.syntax-number { color: #8a4076; }.syntax-boolean { color: #7b3fa0; font-weight: 700; }
.code-line { display: block; min-height: 1.45em; margin-left: -4px; padding-left: 4px; }.frame-class-doc, .frame-method-doc, .frame-method-start, .frame-method-end, .frame-field { margin-left: -4px; margin-right: 4px; padding-left: 8px; padding-right: 8px; }.frame-class-doc { background: #dff4df; }.frame-method-doc, .frame-method-start, .frame-method-end { background: #fff5ad; }.frame-field { background: #e5f1ff; }.frame-method-body { margin-left: 12px; padding-left: 8px; margin-right: 14px; background: #ffffff; border-left: 2px solid #fff0a3; border-right: 2px solid #fff0a3; }.frame-first { border-top-left-radius: 5px; border-top-right-radius: 5px; margin-top: 2px; }.frame-last { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 2px; }
@media(max-width:800px){.code-editor{min-height:330px}}
.frame-view { position: absolute; z-index: 4; inset: 0; overflow: auto; padding: 8px 10px 8px 42px; background: #fafafa; color: #111; font: 17px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }.frame-numbers { position: absolute; z-index: 6; inset: 0 auto 0 0; width: 38px; pointer-events: none; color: #7d7d7d; font: 17px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }.frame-numbers span { position: absolute; right: 7px; }.stride-class { margin: 0; border-left: 2px solid #7ecf8b; border-right: 2px solid #7ecf8b; background: #ddf6df; }.stride-class-head, .stride-class-tail { padding: 3px 8px; background: #ddf6df; }.stride-content { padding: 0 8px 8px 38px; background: #ddf6df; }.stride-fields { margin: 0 0 10px; padding: 4px 8px; background: #fff; border: 1px solid #d4d4d4; border-radius: 5px; }.stride-method { margin: 10px 0; background: #fff8a4; border: 1px solid #e1d46c; border-radius: 5px; overflow: hidden; }.stride-method-head, .stride-method-tail { padding: 3px 8px; background: #fff8a4; }.stride-method-body { margin: 0 8px; padding: 4px 8px; background: #fff; border-left: 1px solid #dadada; border-right: 1px solid #dadada; }.stride-method-tail { margin: 0 8px; }.stride-line { display: block; white-space: pre; min-height: 1.35em; }.stride-empty { min-height: 1.35em; }.frame-view .syntax-class, .frame-view .syntax-declaration { color: #f00000; font-weight: 400; }.frame-view .syntax-type { color: #111; font-weight: 400; }.frame-view .syntax-method { color: #111; font-weight: 400; }.frame-view .syntax-control { color: #8d0059; font-weight: 400; }.frame-view .syntax-string { color: #008600; }.frame-view .syntax-comment { color: #1548bd; font-style: normal; }.frame-view .syntax-number { color: #111; }.frame-view .syntax-boolean { color: #008acb; font-weight: 400; }
.stride-control { margin: 5px 0 5px 12px; background: #eeeeff; border: 1px solid #c7c7e6; border-radius: 5px; overflow: hidden; }.stride-control-head, .stride-control-tail { padding: 2px 7px; background: #eeeeff; }.stride-control-body { margin: 0 7px; padding: 3px 7px; background: #fff; border-left: 1px solid #d2d2ed; border-right: 1px solid #d2d2ed; }
.stride-gap { min-height: 0; }.stride-blank { min-height: 1.35em; }.syntax-error-line { background: #fff0f0; text-decoration: underline wavy #d40000 2px; text-underline-offset: 4px; }

/* Die Rahmen folgen der Greenfoot-/Stride-Geometrie: der Rahmen beginnt an
   der Quelltext-Einrückung, sein Kopftext direkt an der Rahmenkante. */
.stride-content { padding: 0 0 8px 38px; }
.stride-fields { padding: 4px 2px; }
.stride-method-head, .stride-method-tail { padding: 3px 2px; }
.stride-method-body { margin: 0 3px; padding: 4px 6px; }
.stride-method-tail { margin: 0 3px; }
.stride-control { margin-left: 8px; }
.stride-control-head, .stride-control-tail { padding-left: 3px; padding-right: 3px; }
.stride-control-body { margin: 0 3px; padding: 3px 6px; }
/* Rahmen übernehmen die erste Einrückung. Der Quelltext bleibt im DOM und
   beim Kopieren unverändert; er wird nur innerhalb seines Rahmens bündig
   dargestellt. Weitere Einrückungen (z. B. im Methodenrumpf) bleiben sichtbar. */
.stride-line { padding-left: 0; text-indent: 0; }

/* Jede sichtbare Quelltextzeile hat dieselbe Höhe. Abstand entsteht nur
   durch tatsächliche Leerzeilen im Programm, nicht durch Rahmen-Padding. */
.frame-view, .frame-numbers { line-height: 1.45em; }
.stride-line, .stride-blank { min-height: 1.45em; height: 1.45em; line-height: 1.45em; box-sizing: border-box; }
.stride-class-head, .stride-class-tail,
.stride-fields,
.stride-method-head, .stride-method-tail, .stride-method-body,
.stride-control-head, .stride-control-tail, .stride-control-body { padding-top: 0; padding-bottom: 0; }
.stride-fields, .stride-method, .stride-control { margin-top: 0; margin-bottom: 0; }
.stride-method-tail { margin-left: 0; margin-right: 0; }

/* Strukturierte Einrückung: Jede Rahmenebene entspricht vier Zeichenbreiten.
   Die vier Leerzeichen bleiben zugleich im gespeicherten Quelltext erhalten. */
.stride-method-body { margin-left: 4ch; margin-right: 3px; }
.stride-control { margin-left: 4ch; margin-right: 0; }
.stride-control-body { margin-left: 4ch; margin-right: 3px; }

/* Der Texteditor bleibt die einzige Quelle. Diese Ebene zeichnet nur Rahmen
   hinter exakt denselben Zeichenpositionen und nimmt keine Eingaben an. */
.code-editor textarea { z-index: 4; color: transparent; caret-color: #172342; background: transparent; }
.code-editor textarea::selection { color: transparent; background: #9ebff399; }
.code-editor ol { z-index: 5; }
.frame-background { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.frame-background, .frame-canvas { font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
.frame-canvas { position: absolute; top: 12px; left: 52px; right: 12px; transform-origin: top left; }
.code-frame { position: absolute; right: 0; box-sizing: border-box; border-radius: 5px; }
.frame-class { background: #ddf6df; border-left: 2px solid #7ecf8b; border-right: 2px solid #7ecf8b; }
.frame-fields { background: #fff; border: 1px solid #d4d4d4; }
.frame-method { background: #fff8a4; border: 1px solid #e1d46c; }
.frame-method-body { background: #fff; border-left: 1px solid #e5d66e; border-right: 1px solid #e5d66e; }
.frame-control { background: #eeeeff; border: 1px solid #c7c7e6; }
.frame-control-body { background: #fff; border-left: 1px solid #d2d2ed; border-right: 1px solid #d2d2ed; }
#syntaxHighlight { z-index: 3; }
#syntaxHighlight, .code-editor textarea { tab-size: 4; }
#syntaxHighlight .syntax-declaration { color: #f00000; font-weight: 400; }
#syntaxHighlight .syntax-class, #syntaxHighlight .syntax-type, #syntaxHighlight .syntax-method { color: #111; font-weight: 400; }
#syntaxHighlight .syntax-control { color: #8d0059; font-weight: 400; }
#syntaxHighlight .syntax-string { color: #008600; }
#syntaxHighlight .syntax-comment { color: #1548bd; font-style: normal; }
#syntaxHighlight .syntax-boolean { color: #008acb; font-weight: 400; }

.cm-editor-host { position: absolute; inset: 0; }
.syntax-modifier { color: #c81919; font-weight: 700; }
.frame-view .syntax-modifier, #syntaxHighlight .syntax-modifier { color: #f00000; font-weight: 400; }
.cm-editor-host > .cm-editor { height: 100%; }