/* Ergänzende Demos der Mosaik-Werkstatt; Farben und Thema kommen aus kurs.css. */
.codebox .code-luecke{color:#ffd166;font-weight:700;background:rgba(255,209,102,.14);padding:0 3px;border-radius:3px}
.mosaik-fortschritt{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0;
  padding:12px 16px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--flaeche);
  font-size:.9rem;color:var(--text-leise)}
.mosaik-fortschritt progress{flex:1 1 120px;min-width:0;height:10px;accent-color:var(--moos)}
.mosaik-fortschritt b{color:var(--text)}
.mosaik-theme{background:var(--papier);border:1px solid var(--linie);color:var(--text);width:32px;height:32px;
  border-radius:7px;cursor:pointer;font-size:16px;flex:0 0 auto}
.mosaik-werkzeug{border:2px dashed var(--kuehl);border-radius:var(--radius);background:var(--flaeche);
  padding:18px;margin:22px 0}
.mosaik-werkzeug-kopf{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kuehl);font-weight:700}
.seite .mosaik-werkzeug h3{margin:4px 0 10px}
.mosaik-regler-reihe{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin:14px 0}
.mosaik-regler{flex:1 1 180px;min-width:0}
.mosaik-regler label{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;font-weight:600;margin-bottom:4px}
.mosaik-regler output{font-family:var(--f-code);color:var(--akzent)}
.mosaik-regler input[type=range]{width:100%;accent-color:var(--akzent)}
.mosaik-kartons{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;align-items:flex-start}
.mosaik-karton{display:grid;gap:4px;padding:7px;border-radius:9px;border:2px solid var(--linie);background:var(--papier)}
.mosaik-karton.voll{border-color:var(--moos)}
.mosaik-karton.rest{border-color:var(--akzent)}
.mosaik-ei{width:17px;height:21px;border-radius:50%;background:var(--flaeche-2);border:1px solid var(--linie)}
.mosaik-ei.da{background:var(--moos);border-color:var(--moos)}
.mosaik-karton.rest .mosaik-ei.da{background:var(--akzent);border-color:var(--akzent)}
.mosaik-ablesung{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.mosaik-ablese{flex:1 1 200px;padding:12px 15px;border-radius:9px;background:var(--papier);border:1px solid var(--linie)}
.mosaik-wert{font-family:var(--f-code);font-size:1.15rem;font-weight:700}
.mosaik-was{font-size:.8rem;color:var(--text-leise);display:block}
.mosaik-ablese.gr .mosaik-wert{color:var(--moos)}
.mosaik-ablese.or .mosaik-wert{color:var(--akzent)}
.mosaik-faecher{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.mosaik-fach{flex:1 1 72px;min-width:62px;border:2px solid var(--linie);border-radius:9px;
  padding:9px 6px;text-align:center;background:var(--papier)}
.mosaik-fach .mosaik-nr{font-family:var(--f-code);font-size:.7rem;color:var(--text-leise);display:block}
.mosaik-pkt{display:block;width:26px;height:26px;border-radius:50%;margin:5px auto 3px}
.mosaik-nm{font-size:.72rem;color:var(--text-leise)}
.mosaik-fach.aktiv{border-color:var(--akzent);box-shadow:var(--schatten)}
.mosaik-fach.aktiv .mosaik-nr{color:var(--akzent);font-weight:700}
.mosaik-rechnung{font-family:var(--f-code);font-size:.9rem;margin-top:12px;text-align:center;overflow-wrap:anywhere}
.mosaik-rechnung b{color:var(--akzent)}
.mosaik-katalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.mosaik-muster{text-align:center;margin:0}
.mosaik-muster canvas{width:100%;height:auto;border-radius:9px;border:1px solid var(--linie);display:block}
.mosaik-muster figcaption{font-size:.8rem;color:var(--text-leise);margin-top:6px}
.mosaik-muster b{color:var(--kuehl)}
@media (min-width:1000px){.mosaik-katalog{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{
  .mosaik-werkzeug,.mosaik-fortschritt{display:none!important}
  .codebox .code-luecke{color:#111;background:none}
}