/* MINT-Material · Informatik Klasse 9 „Programmieren mit JavaScript“:
   HTML-/CSS-/JS-Listings (pre.code), Konsole, Browser-Vorschau. Nach fach.css einbinden.
   Farben nur aus var(--fach-*) und der Nuklidkarten-Palette. */
pre.code{margin:14px 0 18px;padding:12px 16px 12px 0;background:#fffdf8;border:1px solid var(--rule,#d9cdb8);border-left:4px solid var(--fach-strong);border-radius:12px;font:14.5px/1.7 ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;color:#2b241d;overflow-x:auto;tab-size:2;counter-reset:jln;white-space:pre;max-width:100%}
pre.code .jl{display:block;counter-increment:jln;padding-left:16px}
pre.code .jl::before{content:counter(jln);display:inline-block;width:1.7em;margin-right:14px;text-align:right;color:#b3a591;user-select:none;-webkit-user-select:none}
pre.code.nolines .jl::before{content:none}
pre.code .jl.hl{background:rgba(244,208,63,.28)}
pre.code .jk{color:#2c5fb5;font-weight:700}
pre.code .jt{color:#7c5fb5;font-weight:600}
pre.code .jn{color:#c47a3a}
pre.code .js{color:#4a7530}
pre.code .jc{color:#8a7f72;font-style:italic}
pre.code .jp{color:#8a7f72}
pre.code[data-lang="html"]{border-left-color:#e79a3a}
pre.code[data-lang="css"]{border-left-color:#7c5fb5}
.code-cap{font:600 13px 'Fredoka',Inter,sans-serif;color:var(--ink-soft,#5b4f43);margin:-10px 0 18px;letter-spacing:.02em}
/* Konsole */
.konsole{margin:12px 0 18px;border-radius:12px;background:#2f2f2f;color:#f4ede0;font:14px/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace;padding:10px 14px;overflow-x:auto}
.konsole .kz{display:block;white-space:pre}
.konsole .kz::before{content:"› ";color:#8a7f72}
.konsole .kz.err{color:#ff9b91}
.konsole .kz.err::before{content:"✕ ";color:#e2574c}
.konsole-kopf{font:600 12px 'Fredoka',Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#b3a591;margin-bottom:4px}
/* Browser-Vorschau */
.webvorschau{margin:12px 0 18px;border:1px solid var(--rule,#d9cdb8);border-radius:12px;overflow:hidden;background:#fff;max-width:560px}
.webvorschau-kopf{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#f4ede0;border-bottom:1px solid var(--rule,#d9cdb8);font:12.5px Inter,sans-serif;color:#6b5f53}
.webvorschau-kopf i{width:10px;height:10px;border-radius:50%;background:#e2574c;display:inline-block}
.webvorschau-kopf i+i{background:#f4d03f}.webvorschau-kopf i+i+i{background:#67b05f;margin-right:8px}
.webvorschau-body{padding:12px 16px;font:15px/1.5 Inter,sans-serif;color:#2b241d}
.webvorschau-body h1,.webvorschau-body h2{font:700 20px Inter,sans-serif;margin:0 0 6px}
.webvorschau-body p{margin:0 0 6px}
.code-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:760px){.code-paar{grid-template-columns:minmax(0,1fr)}}
.code-paar>*{min-width:0}
.webvorschau-body ul{margin:0 0 6px;padding-left:22px}
.webvorschau-body a{color:#2c5fb5;text-decoration:underline}