/* MINT-Material · Calliope-Seiten (Informatik K9): MakeCode-Blöcke als HTML, Block-Chips im Text,
   Calliope-Bühne. Farben der Blockkategorien aus der Nuklidkarten-Palette, kapitelweit gleich:
   Grundlagen blau · Eingabe violett · Musik rot · LED hellblau · Funk gelb · Schleifen grün ·
   Logik hellgrün · Variablen orange · Mathematik dunkel. Einbinden nach fach.css. */
:root{--cb-grund:#2c5fb5;--cb-ein:#7c5fb5;--cb-musik:#e2574c;--cb-led:#5b8bd8;--cb-funk:#f4d03f;--cb-schl:#4a7530;--cb-logik:#67b05f;--cb-var:#e79a3a;--cb-mathe:#2f2f2f}

/* ---- Block-Chip im Fließtext: <span class="cb cb-grund">zeige LEDs</span> ---- */
.cb{display:inline-block;font:600 .88em/1.35 'Fredoka',Inter,sans-serif;color:#fff;background:var(--cb-c,var(--cb-grund));border-radius:6px;padding:1px 8px 2px;white-space:nowrap;vertical-align:baseline;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);max-width:100%;box-sizing:border-box}
.formeln .cb,.card-answer .cb,.uebersicht-card .cb{white-space:normal}
.cb-grund{--cb-c:var(--cb-grund)}.cb-ein{--cb-c:var(--cb-ein)}.cb-musik{--cb-c:var(--cb-musik)}.cb-led{--cb-c:var(--cb-led)}
.cb-funk{--cb-c:var(--cb-funk);--cb-t:#3d3208}.cb-schl{--cb-c:var(--cb-schl)}.cb-logik{--cb-c:var(--cb-logik);--cb-t:#16300c}.cb-var{--cb-c:var(--cb-var);--cb-t:#3f2406}.cb-mathe{--cb-c:var(--cb-mathe)}
.cb.cb-funk,.cb.cb-logik,.cb.cb-var{color:var(--cb-t)}
.cb .v,.cbk .v{display:inline-block;background:#fff;color:#2b241d;border-radius:999px;padding:0 7px;margin:0 2px;font-weight:600;font-size:.92em;line-height:1.35}
.cb .v.t,.cbk .v.t{border-radius:4px}

/* ---- Programm aus Blöcken ---- */
.cb-prog{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:12px 0 6px;font:600 14.5px/1.3 'Fredoka',Inter,sans-serif}
.cbk{position:relative;display:block;width:max-content;max-width:100%;color:#fff;background:var(--cb-c,var(--cb-grund));border-radius:7px;padding:6px 12px 7px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);white-space:normal}
.cbk.cb-funk,.cbk.cb-logik,.cbk.cb-var{color:var(--cb-t)}
.cbk+.cbk{margin-top:3px}
.cbk.hat{border-radius:14px 14px 7px 7px;padding-top:9px}
.cbk .inner{margin:6px 0 4px 14px;padding:6px 0 6px 8px;background:rgba(255,255,255,.95);border-radius:6px;min-width:120px;min-height:24px}
.cbk .inner:empty::after{content:'…';color:#b3a591;padding-left:4px}
.cbk .inner .cbk{margin-right:8px}
.cbk .foot{height:6px}
.cbk .else{display:block;margin-top:2px}
.cbk.is-now{outline:3px solid #f4d03f;outline-offset:1px}
.cbk.is-dim{opacity:.45}
.cb-prog.col{flex-direction:column;gap:6px}
@media(max-width:560px){.cb-prog{font-size:13.5px}.cbk{padding:5px 10px 6px}}
@media print{.cb,.cbk{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ---- Calliope-Bühne im Applet ---- */
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.cm-grid.cm-wide{grid-template-columns:1fr}
.cm-panel{background:#fff;border:1px solid var(--rule,#d9cdb8);border-radius:12px;padding:12px 14px;min-width:0}
.cm-panel h5{margin:0 0 8px;font:600 12.5px 'Fredoka',Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#6b5f53}
.cm-led{fill:#3a1c14;stroke:#2a140e;stroke-width:1}
.cm-led.on{fill:#e2574c;stroke:#b33b30;filter:drop-shadow(0 0 5px rgba(226,87,76,.9))}
.cm-btn{cursor:pointer}
.cm-btn:focus{outline:none}
.cm-btn:focus-visible .cm-btn-ring{stroke:var(--fach-strong);stroke-width:3;opacity:1}
.cm-btn-ring{fill:none;opacity:0}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.applet-lab .cm-chips button{padding:6px 12px;min-height:40px;border-radius:10px;text-align:left}
.applet-lab .cm-chips button[aria-pressed="true"]{background:var(--fach-ink);border-color:var(--fach-ink);color:#fff}
@media(max-width:760px){.cm-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cm-led.on{filter:none}}

/* Blöcke als Knöpfe im Applet (Werkzeugkasten, Programm) */
.applet-lab button.cbk{display:block;border:0;border-radius:7px;background:var(--cb-c,var(--cb-grund));color:#fff;min-height:0;padding:6px 12px 7px;font:600 14px/1.3 'Fredoka',Inter,sans-serif;text-align:left;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);cursor:pointer}
.applet-lab button.cbk.cb-funk,.applet-lab button.cbk.cb-logik,.applet-lab button.cbk.cb-var{color:var(--cb-t)}
.applet-lab button.cbk:hover{filter:brightness(1.08);background:var(--cb-c,var(--cb-grund))}
.applet-lab button.cbk:disabled{opacity:.4;cursor:default}
.cm-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cm-tools .cbk+.cbk{margin-top:0}
.cm-prog .cbk.hat>.inner{display:flex;flex-direction:column;gap:3px;padding-right:8px}
.cm-prog .cbk.hat>.inner .cbk+.cbk{margin-top:0}
.cm-prog .cbk.hat{width:100%;max-width:340px}
.cm-prog .cbk.hat.is-target{outline:3px dashed var(--fach-strong);outline-offset:2px}

/* Code im Text (wie auf den Turtle-Seiten) */
.erklaer-text code,.stichliste code,.dbox code,.hinweis-card code,.applet-lead code,.applet-note code,.applet-readout code,
.aufgabe code,.aufgabe-text code,.teilaufgaben code,.ta-body code,.ux code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;font-size:.92em;background:#f4ede0;border:1px solid #e6dcc9;border-radius:6px;padding:1px 6px;color:#2b241d}
.aufgabe .cb,.ux .cb,.ta-body .cb,.teilaufgaben .cb{white-space:normal}
.stichliste .cb,.dbox .cb,.hinweis-card .cb,.applet-lead .cb,.applet-note .cb{white-space:normal;overflow-wrap:anywhere}