/* HKM MES — Hallenbildschirm. Von der anderen Hallenseite lesbar. */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--atmo) fixed, var(--nacht); color: var(--text);
  font-family: var(--schrift); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden;
}
.versteckt { display: none !important; }

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.6rem; border-bottom: 1px solid var(--rand);
  background: var(--kopf-flaeche); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--schatten-1);
}
.logo { background: linear-gradient(135deg, var(--hk-blau), var(--hk-dunkelblau)); color: #fff;
  font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 8px; font-size: 1.4rem;
  box-shadow: var(--schatten-blau); }
.titel { font-weight: 700; letter-spacing: 0.25em; color: var(--text); font-size: 1.3rem; margin-left: 0.6rem; }
.uhrzeile { text-align: right; font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.uhrzeile #datum { color: var(--text-gedimmt); font-size: 1rem; font-weight: 500; margin-right: 0.8rem; }

main {
  flex: 1; overflow: auto; padding: 1.2rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: start;
}
.laden { color: var(--text-gedimmt); font-size: 1.4rem; text-align: center; grid-column: 1 / -1; padding: 4rem 0; }

.kachel {
  background: var(--flaeche); border: 2px solid var(--rand); border-radius: var(--radius-gross);
  padding: 1.1rem 1.3rem; min-height: 200px;
  display: flex; flex-direction: column; gap: 0.4rem;
  box-shadow: var(--schatten-2);
  transition: border-color 300ms ease, box-shadow 300ms ease;
  animation: hkm-auftauchen var(--sanft) both;
}
.kachel .kopf { display: flex; justify-content: space-between; align-items: baseline; }
.kachel .name { font-size: 2rem; font-weight: 700; }
.kachel .statuswort { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.12em; }

.kachel.laeuft { border-color: var(--gruen); box-shadow: 0 0 26px rgba(60, 179, 113, 0.25); animation: atmen 3s ease-in-out infinite; }
.kachel.laeuft .statuswort { color: var(--gruen); }
.kachel.ruestet { border-color: var(--hk-blau); box-shadow: 0 0 22px rgba(18, 117, 187, 0.3); }
.kachel.ruestet .statuswort { color: var(--hk-blau); }
.kachel.stoerung { border-color: var(--rot); animation: alarm 1s steps(2) infinite; }
.kachel.stoerung .statuswort { color: var(--rot); }
.kachel.steht { opacity: 0.75; }
.kachel.steht .statuswort { color: var(--hk-grau); }

@keyframes atmen { 50% { box-shadow: 0 0 40px rgba(60, 179, 113, 0.45); } }
@keyframes alarm { 50% { box-shadow: 0 0 34px rgba(217, 83, 79, 0.65); border-color: #ff6b66; } }

.kachel .fa { color: var(--text-gedimmt); font-size: 1.02rem; min-height: 1.4em; }
.kachel .fa b { color: var(--akzent-nr); }
.kachel .stoerungstext { color: var(--rot); font-weight: 600; font-size: 1.05rem; min-height: 1.3em; }

.zahlen { display: flex; gap: 1.6rem; margin-top: auto; }
.zahl .wert { font-size: 2.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahl .einheit { font-size: 1.1rem; color: var(--text-gedimmt); font-weight: 500; }
.zahl .label { color: var(--text-gedimmt); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.balken { height: 10px; border-radius: 5px; background: var(--nacht); overflow: hidden; margin-top: 0.5rem; }
.balken > div { height: 100%; border-radius: 5px; background: var(--hk-blau); transition: width 800ms ease; }
.balken-label { display: flex; justify-content: space-between; color: var(--text-gedimmt); font-size: 0.8rem; margin-top: 0.25rem; }

footer {
  display: flex; align-items: center; gap: 1rem;
  background: var(--rot-flaeche); border-top: 3px solid var(--rot);
  padding: 0.7rem 1.4rem; font-size: 1.05rem; overflow: hidden;
}
.ticker-label { color: var(--rot); font-weight: 700; letter-spacing: 0.15em; flex-shrink: 0; }
#ticker-inhalt { display: flex; gap: 2.5rem; white-space: nowrap; overflow: hidden; }
#ticker-inhalt span b { color: var(--rot); }

@media (max-width: 600px) {
  .kachel .name { font-size: 1.5rem; }
  .zahl .wert { font-size: 1.8rem; }
  .uhrzeile { font-size: 1.1rem; }
}