/* Kapitel 392 — NUR Modul-Spezialoptik (Matrizen-Baukasten, Kennzahl-Kacheln, Canvas).
   Alles, was assets/css/style.css schon bietet (Boxen, Buttons, Tabellen, Quiz, .output,
   .chart-container, .input-group, .value-display, .matrix-viz/.matrix-row/.matrix-element),
   wird hier NICHT wiederholt. Praefix aller Klassen: ab-  ·  Mobile first. */

/* ---------------------------------------------------------- Canvas */
.ab-canvas { background: #fff; }

/* ---------------------------------------------------------- 1) Matrizen nebeneinander */
.ab-matrizen {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-start; margin: .8rem 0;
}
.ab-mblock { flex: 1 1 165px; min-width: 0; }
.ab-mtitel {
  font-size: .78rem; font-weight: 600; color: var(--hk-text-soft);
  margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Elemente sollen bei drei Matrizen nebeneinander schmaler werden als im Standard */
.ab-mblock .matrix-viz { margin: 0; }
.ab-mblock .matrix-element {
  min-width: 2.9em; padding: .28rem .2rem; font-size: .82rem;
  font-family: 'Courier New', monospace;
}

/* Die Auswahl der Richtung darf die volle Zeilenbreite nutzen (lange Optionstexte) */
#abRichtungWahl, #abModus { max-width: 320px; }

/* ---------------------------------------------------------- 2+3) Kennzahl-Kacheln */
.ab-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .5rem; margin: .8rem 0;
}
.ab-kachel {
  background: var(--hk-grau-hell); border: 1px solid var(--hk-rahmen);
  border-radius: 8px; padding: .5rem .6rem; text-align: center;
}
.ab-kachel.ab-ja { border-color: var(--hk-gruen); background: var(--hk-gruen-hell); }
.ab-kachel.ab-nein { border-color: var(--hk-rot); background: var(--hk-rot-hell); }
.ab-k-titel { font-size: .74rem; color: var(--hk-text-soft); }
.ab-k-wert { font-size: 1.15rem; font-weight: 700; color: var(--hk-blau); line-height: 1.3; }
.ab-kachel.ab-ja .ab-k-wert { color: var(--hk-gruen-dunkel); }
.ab-kachel.ab-nein .ab-k-wert { color: var(--hk-rot-dunkel); }
.ab-k-zusatz { font-size: .7rem; color: var(--hk-text-soft); }

/* Waehrend der Suche ist der Knopf gesperrt — sichtbar machen */
#abLauf[disabled] { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------- Mobil (360 px) */
@media (max-width: 600px) {
  .ab-matrizen { gap: .6rem; }
  .ab-mblock { flex: 1 1 100%; }
  .ab-mblock .matrix-element { min-width: 3.4em; font-size: .86rem; }
  .ab-kacheln { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ab-k-wert { font-size: 1rem; }
  #abRichtungWahl, #abModus { max-width: 100%; }
}