/* Code-Darstellung — Baustein Core\Design::codeBlock. Farben ausschliesslich aus Kern-Token,
   damit helles und dunkles Thema ohne Sonderregeln funktionieren. */
/* Schrift-Massgabe steht EINMAL am Rahmen: Eingabefeld und Färbung erben davon. Wären es zwei
   getrennte Angaben, liefen Text und Farbe beim Tippen auseinander (Browser runden Zeilenhöhen
   je Element unterschiedlich) — genau das war der Fall. */
.cc-codewrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius);
               overflow: hidden; font-family: var(--mono); font-size: var(--fs-sm);
               line-height: 1.5; letter-spacing: normal; tab-size: 2; }
.cc-code { margin: 0; padding: var(--sp-4); overflow-x: auto; background: var(--grey-50);
           font: inherit; letter-spacing: inherit; tab-size: inherit; }
.cc-code code { font: inherit; letter-spacing: inherit; tab-size: inherit; white-space: pre; }

.cs-kw      { color: var(--accent-2); font-weight: var(--fw-bold); }
.cs-string  { color: var(--ok); }
.cs-comment { color: var(--muted); font-style: italic; }
.cs-num     { color: var(--info); }
.cs-var     { color: var(--danger); }
.cs-tag     { color: var(--accent-2); }

/* Bearbeitbar: das Eingabefeld liegt DECKUNGSGLEICH über der Hervorhebung. Beide teilen exakt
   Schrift, Zeilenhoehe und Innenabstand — sonst laufen Text und Farbe auseinander. */
.cc-code-editable .cc-code { pointer-events: none; }
.cc-code-editable .cc-code-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: var(--sp-4); border: 0; resize: none;
    background: transparent; color: transparent; caret-color: var(--ink);
    white-space: pre; overflow: auto;
    /* Die globale Textfeld-Regel (forms.css) setzt Schriftgroesse und Innenabstand mit !important.
       Ein Code-Feld MUSS aber zeichengenau auf der Faerbung darunter liegen — sonst wandert der
       Text beim Tippen gegenueber den Farben. Deshalb hier die einzige begruendete Ausnahme. */
    font: inherit !important;
    letter-spacing: inherit !important;
    tab-size: inherit;
    padding: var(--sp-4) !important;
    border: 0 !important;
    background: transparent !important;
    height: 100% !important;
}
.cc-code-editable { min-height: var(--sz-180); }
.cc-code-editable .cc-code-input::selection { background: var(--accent-2-bg); color: var(--ink); }

.cc-code-tools { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
                 padding: var(--sp-2); border-bottom: 1px solid var(--border); background: var(--surface); }
.cc-code-tools .cc-code-lang { margin-left: auto; color: var(--muted); font-size: var(--fs-xs);
                               text-transform: uppercase; letter-spacing: var(--tracking); }
.cc-code-editable .cc-code { padding-top: var(--sp-4); }