/* Kapitel 280 — NUR Modul-Spezialoptik (Kaffeeautomaten, Schaetzbalken, Kennzahl-Kacheln,
   Q-Tabelle, Buero-Canvas, Legende). Alles, was assets/css/style.css schon bietet (Boxen,
   Buttons, Tabellen, Quiz, .output, .chart-container, .input-group, .value-display), wird
   hier NICHT wiederholt. Praefix aller Klassen: rl-  ·  Mobile first. */

/* ------------------------------------------------ 1) Kaffeeautomaten */
.rl-automat { flex: 1 1 200px; min-width: 0; text-align: left; }

.rl-schaetzung { margin: .8rem 0; }
.rl-bar-zeile { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.rl-bar-name {
  flex: 0 0 6.4em; font-size: .82rem; font-weight: 600; color: var(--hk-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-bar {
  flex: 1 1 auto; min-width: 0; height: 14px; border-radius: 7px;
  background: var(--hk-grau-hell); border: 1px solid var(--hk-rahmen); overflow: hidden;
}
.rl-bar-fuell { height: 100%; background: var(--hk-blau); transition: width .25s ease; }
.rl-bar-best { background: var(--hk-gruen); }
.rl-bar-wert {
  flex: 0 0 6.6em; text-align: right; font-family: 'Courier New', monospace; font-size: .8rem;
}

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

/* ------------------------------------------------ 2) Q-Tabelle als Waermebild */
.rl-qwrap { overflow-x: auto; margin: .9rem 0; }
.rl-qtab { border-collapse: collapse; font-family: 'Courier New', monospace; min-width: 320px; }
.rl-qtab th {
  background: var(--hk-grau-hell); border: 1px solid var(--hk-rahmen);
  padding: .3rem .5rem; font-size: .78rem; color: var(--hk-text-soft); white-space: nowrap;
}
.rl-zelle {
  border: 1px solid var(--hk-rahmen); padding: .38rem .6rem; text-align: right;
  font-size: .86rem; cursor: pointer; min-width: 4.2em;
}
.rl-zelle:hover { outline: 2px solid var(--hk-blau); outline-offset: -2px; }
.rl-zelle.rl-aktiv {
  outline: 3px solid var(--hk-blau); outline-offset: -3px; font-weight: 700;
}

/* ------------------------------------------------ 3+4) Buero-Canvas */
/* Das Raster soll quadratisch und nicht beliebig breit werden — style.css setzt
   .chart-container canvas auf width:100%, die hoehere Spezifitaet gewinnt hier. */
.chart-container canvas.rl-buero { max-width: 400px; margin: 0 auto; display: block; }

.rl-legende {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .5rem 0 .2rem;
  font-size: .8rem; color: var(--hk-text-soft);
}
.rl-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.rl-sym {
  width: 15px; height: 15px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid var(--hk-rahmen);
}
.rl-sym-tisch { background: #7b8694; border-color: #5f6a77; }
.rl-sym-pf { background: #8a5a2b; border-color: #5b3a1b; }
.rl-sym-st { background: #d4edda; border: 2px solid var(--hk-gruen-dunkel); }
.rl-sym-start { background: #fff; border: 2px dashed var(--hk-blau); }

.rl-fuss { font-size: .82rem; color: var(--hk-text-soft); margin: .4rem 0 0; }

/* Waehrend eines langen Laufs gesperrte Knoepfe sichtbar machen */
#rlLos[disabled], #rlHackLauf[disabled] { opacity: .55; cursor: progress; }

/* ------------------------------------------------ Mobil (360 px) */
@media (max-width: 600px) {
  .rl-automat { flex: 1 1 100%; text-align: center; }
  .rl-bar-name { flex: 0 0 4.6em; font-size: .76rem; }
  .rl-bar-wert { flex: 0 0 5.4em; font-size: .74rem; }
  .rl-kacheln { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .rl-k-wert { font-size: 1rem; }
  .rl-zelle { padding: .34rem .4rem; min-width: 3.6em; font-size: .8rem; }
  .rl-qtab th { padding: .28rem .35rem; font-size: .72rem; }
  .rl-legende { font-size: .74rem; gap: .25rem .6rem; }
}