body.einfach-seite { background: #f4f7f6; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 16px; background: #fff; border-bottom: 1px solid #dde2e7; }
.leiste button, .leiste select, .code-kopf button { font: inherit; font-size: .9rem; padding: 5px 12px; border: 1px solid #b0b8bf; border-radius: 6px; background: #fff; cursor: pointer; }
.leiste button:hover, .code-kopf button:hover { background: #eef3f8; border-color: #1f6fd1; }
.leiste select { width: 230px; }
.leiste-hinweis { color: #66727f; font-size: .8rem; margin-left: auto; white-space: nowrap; }
@media (max-width: 1250px) { .leiste-hinweis { display: none; } }
.geteilt { flex: 1; min-height: 0; display: flex; }
#editor { flex: 1 1 60%; min-width: 0; border: 0; background: #f4f6f7; }
.codefeld { flex: 0 0 min(480px, 38%); display: flex; flex-direction: column; background: #1e232a; color: #dce3ea; min-width: 280px; }
.code-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #2a313a; white-space: nowrap; }
.code-kopf strong { margin-right: auto; }
.code-kopf .status { font-size: .8rem; }
.status.ok { color: #6fd08a; } .status.warn { color: #f1b45c; }
#code { flex: 1; margin: 0; padding: 14px 16px; overflow: auto; font: 13px/1.5 Consolas, "Courier New", monospace; white-space: pre; outline: none; }
@media (max-width: 900px) {
  .geteilt { flex-direction: column; }
  .codefeld { flex: 0 0 38%; min-width: 0; }
  
}