/* Kapitel 385 — Die Harness: NUR Modul-Spezialoptik
   (alles Weitere kommt aus assets/css/style.css). Praefix "hn-" fuer alle Klassen. */

/* ---------- Checkbox-Zeile: darf im .input-group nicht die Label-Mindestbreite erben ---------- */
.hn-check{display:inline-flex;align-items:center;gap:.5rem;min-width:0!important;
  font-weight:600;cursor:pointer;min-height:44px}
.hn-check input{width:20px;height:20px;accent-color:var(--hk-blau);flex:0 0 auto}

/* ---------- Buehne des Ablauf-Moduls: vier Akteurs-Kaesten ---------- */
.hn-buehne{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.9rem 0}
.hn-akteur{border:1px solid var(--hk-rahmen);border-radius:8px;background:var(--hk-grau-hell);
  padding:.5rem .45rem;min-height:6.5rem;transition:background .15s,border-color .15s}
.hn-akteur.aktiv{border-color:var(--hk-blau);background:var(--hk-blau-hell);
  box-shadow:0 0 0 2px rgba(0,71,171,.15)}
.hn-akteur-name{display:block;font-size:.8rem;font-weight:700;text-align:center;
  margin-bottom:.35rem;overflow-wrap:anywhere}
.hn-slot{min-height:1rem}

/* Erlaubnis-Ampel in der Harness */
.hn-ampel{font-style:normal;font-size:1.05rem;line-height:1;margin-left:.2rem;color:var(--hk-rahmen)}
.hn-ampel[data-stand=gruen]{color:var(--hk-gruen)}
.hn-ampel[data-stand=rot]{color:var(--hk-rot)}

/* ---------- Nachrichtenkarte, die zwischen den Akteuren wandert ---------- */
.hn-karte{border:1px solid var(--hk-blau);border-left:4px solid var(--hk-blau);border-radius:6px;
  background:#fff;padding:.4rem .5rem;overflow-wrap:anywhere}
.hn-karte-fehler{border-color:var(--hk-rot);border-left-color:var(--hk-rot);background:var(--hk-rot-hell)}
.hn-karte-rolle{display:block;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--hk-text-soft);margin-bottom:.2rem}
.hn-karte-text{font-size:.8rem;line-height:1.4}
.hn-karte-code{font-family:'Courier New',monospace;font-size:.74rem}

/* ---------- Werkbank ---------- */
.hn-aufgabe{border:1px solid var(--hk-blau);border-radius:8px;background:var(--hk-blau-hell);
  padding:.6rem .8rem;margin:.9rem 0}
.hn-aufgabe-nr{display:block;font-size:.75rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--hk-text-soft);margin-bottom:.2rem}

.hn-wb{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:820px){.hn-wb{grid-template-columns:1fr 1fr}}
.hn-wb-links,.hn-wb-rechts{min-width:0}

/* Werkzeugliste, wie die Harness sie dem Modell zeigt */
.hn-werkzeugliste{background:#1e1e2e;color:#e6e6e6;border-radius:8px;padding:.7rem .8rem;
  font-family:'Courier New',monospace;font-size:.8rem;line-height:1.5;overflow-wrap:anywhere}
.hn-wz-kopf{color:#7a7f8a;font-style:italic;margin-bottom:.4rem}
.hn-wz{margin:.45rem 0;padding-left:.5rem;border-left:2px solid #3a3f52}
.hn-wz-name{color:#82aaff;font-weight:700}
.hn-wz-text{color:#e6e6e6}
.hn-wz-param{margin-top:.15rem}
.hn-wz-pname{color:#c792ea}
.hn-wz-ptyp{color:#c3e88d}
.hn-wz-phinweis{color:#7a7f8a;font-size:.74rem}

/* Bildvorschau der Werkbank */
.hn-bild{text-align:center;margin:.8rem 0}
.hn-canvas{display:block;margin:0 auto;max-width:220px;border:1px solid var(--hk-rahmen);
  border-radius:6px;background:#fff;touch-action:manipulation}
.hn-bild-info{display:block;margin-top:.35rem;font-family:'Courier New',monospace;
  font-size:.75rem;color:var(--hk-text-soft);overflow-wrap:anywhere}

/* Kontext-Spalte */
.hn-kontext-kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-weight:700;font-size:.9rem;margin-bottom:.4rem}
.hn-kontext-liste{border:1px solid var(--hk-rahmen);border-radius:8px;background:var(--hk-grau-hell);
  padding:.5rem;max-height:420px;overflow-y:auto}
.hn-msg{border-left:4px solid var(--hk-rahmen);border-radius:6px;background:#fff;
  padding:.35rem .5rem;margin:.3rem 0;overflow-wrap:anywhere}
.hn-msg-rolle{display:block;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--hk-text-soft)}
.hn-msg-text{font-size:.78rem;line-height:1.45;white-space:pre-wrap;
  font-family:'Courier New',monospace}
.hn-msg-system{border-left-color:var(--hk-text-soft)}
.hn-msg-user{border-left-color:var(--hk-blau);background:var(--hk-blau-hell)}
.hn-msg-aufruf{border-left-color:var(--hk-blau-dunkel)}
.hn-msg-ergebnis{border-left-color:var(--hk-gruen);background:var(--hk-gruen-hell)}
.hn-msg-fehler{border-left-color:var(--hk-rot);background:var(--hk-rot-hell)}
.hn-msg-antwort{border-left-color:var(--hk-gruen-dunkel);font-weight:600}
.hn-hinweis{font-size:.78rem;color:var(--hk-text-soft);margin-top:.4rem}

/* ---------- Mobil (360 px): Buehne zweispaltig, Kontext niedriger ---------- */
@media (max-width:600px){
  .hn-buehne{grid-template-columns:repeat(2,1fr)}
  .hn-akteur{min-height:5.5rem}
  .hn-kontext-liste{max-height:280px}
  .hn-canvas{max-width:170px}
}

/* Quiz-Erklaerung erscheint erst nach dem Klick */
.quiz-erklaerung[hidden]{display:none}