.code-editor {
      position: relative;
      width: 100%;
      height: 50%;
      font-family: monospace;
    }
    .code-editor .highlight,
    .code-editor textarea {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 10px;
      line-height: 1.4;
      font-size: 14px;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: auto;
      font-family: monospace;

    }
    .code-editor .highlight {
      position: absolute;
      top: 0;
      left: 0;
      color: transparent;          /* text becomes visible only via spans */
      background: white;
      pointer-events: none;
      z-index: 1;
    }
    .code-editor textarea {
      position: absolute;
      top: 0;
      left: 0;
      background: transparent;
      color: transparent;     /* Versteckt den doppelten Text in der textarea */
      caret-color: black;     /* sorgt dafür, dass der Cursor sichtbar bleibt */
      z-index: 2;
      border: 1px solid #ccc;
      resize: none;
      font-family: monospace;
      font-size: 14px;
      line-height: 1.4;
    }

    /* gleiche Rendering-Properties für beide Layer, um Rendering-Unschärfen zu vermeiden */
    .code-editor .highlight,
    .code-editor textarea {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: none;
      backface-visibility: hidden;
    }

    .code-editor .highlight code { color: black; }

    /* token styles */
    .token.keyword { color: #0000ff; font-weight: 700; }
    .token.string  { color: #a31515; }
    .token.comment { color: #008000; font-style: italic; }