/* ===================================================================
   Automationen.

   Ein Zustandsbild, keine Bedienoberflaeche: Der einzige Schalter ist
   der fuer die KI, weil sie als einzige Rechenzeit kostet, die der
   Website gehoert. Alles andere laeuft und wird hier nur gezeigt.
   =================================================================== */

.block { margin-bottom: 34px; }
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.block__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__zahl {
  min-width: 22px; padding: 1px 8px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06); border-radius: 999px;
}
.block__frage { margin: 0 0 14px; font-size: .85rem; color: var(--text-still); max-width: 76ch; }

/* ---------- KI ------------------------------------------------------------ */

.ki-kasten {
  margin-bottom: 34px; padding: 20px 22px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: rgba(255, 255, 255, .028);
}
.ki-kasten[data-zustand="laeuft"] {
  border-color: rgba(138, 118, 255, .34);
  background: rgba(138, 118, 255, .05);
}
.ki-kasten[data-zustand="weg"] {
  border-color: rgba(255, 154, 162, .3);
  background: rgba(255, 154, 162, .045);
}
.ki-kasten__kopf {
  display: flex; gap: 20px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
}
.ki-kasten__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
.ki-kasten__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }

.ki-kasten__daten {
  display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
  border-top: 1px solid var(--rand);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ki-kasten__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
.ki-kasten__schild {
  flex: none; min-width: 74px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still); padding-top: 2px;
}

/* ---------- Sicherung & Zustand -------------------------------------------

   Derselbe Kasten wie bei der KI, aber mit eigener Farbgebung fuer den
   Zustand: Gruen gibt es hier bewusst nicht -- "es lief" ist der
   Normalfall und soll nicht feiern. Auffaellig wird es nur, wenn eine
   Nacht ausgefallen ist oder etwas schiefging.
   -------------------------------------------------------------------------- */

.zustand {
  margin-bottom: 34px; padding: 20px 22px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: rgba(255, 255, 255, .028);
}
.zustand[data-zustand="alt"] {
  border-color: rgba(232, 192, 125, .34); background: rgba(232, 192, 125, .05);
}
.zustand[data-zustand="fehler"] {
  border-color: rgba(255, 154, 162, .34); background: rgba(255, 154, 162, .05);
}
.zustand__kopf {
  display: flex; gap: 20px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
}
.zustand__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
.zustand[data-zustand="fehler"] .zustand__titel { color: var(--warn); }
.zustand__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 68ch; }

.zustand__daten {
  display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
  border-top: 1px solid var(--rand);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.zustand__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
.zustand__daten .ki-kasten__schild { min-width: 128px; }

.zustand__listenkopf { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand); }

/* ---------- Hinweise ------------------------------------------------------- */

.hinweise { display: grid; gap: 7px; }
.hinweis {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 15px 11px 18px;
  text-decoration: none; color: var(--text); font-size: .89rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .028);
  transition: border-color .18s ease, background .18s ease;
}
.hinweis::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--rand);
}
.hinweis[data-stufe="warnung"] {
  border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
}
.hinweis[data-stufe="warnung"]::before { background: var(--warn); }
.hinweis[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
.hinweis[data-stufe="ruhig"] { opacity: .8; }
.hinweis:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
.hinweis__zahl {
  flex: none; min-width: 30px; text-align: center;
  font-size: 1.05rem; font-weight: 700;
}
.hinweis[data-stufe="warnung"] .hinweis__zahl { color: var(--warn); }
.hinweis__text { flex: 1; color: var(--text-leise); }
.hinweis__pfeil { color: var(--text-still); }
.hinweis:hover .hinweis__pfeil { color: var(--akzent); }

/* ---------- Regeln --------------------------------------------------------- */

.regeln {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.regel {
  padding: 15px 17px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .025);
}
.regel__name { margin: 0 0 5px; font-size: .93rem; font-weight: 650; }
.regel__text { margin: 0; font-size: .83rem; color: var(--text-still); line-height: 1.55; }

/* ---------- Verlauf -------------------------------------------------------- */

.verlauf { display: grid; gap: 2px; }
.verlauf__zeile {
  display: grid; gap: 12px; align-items: baseline;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr);
  padding: 8px 12px; border-radius: var(--radius-klein);
  font-size: .82rem;
}
.verlauf__zeile:nth-child(odd) { background: rgba(255, 255, 255, .022); }
.verlauf__zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
.verlauf__was { color: var(--text); }
.verlauf__wer { color: var(--text-still); overflow: hidden; text-overflow: ellipsis; }

.leer-hinweis {
  padding: 26px; text-align: center; color: var(--text-still); font-size: .9rem;
  border: 1px dashed var(--rand); border-radius: var(--radius);
}

@media (max-width: 700px) {
  .verlauf__zeile { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hinweis { transition: none; } }