/* ══════════════════════════════════════════════════════════════
   IT-BETRIEB — „Gute IT ist langweilig."

   WELT      ein ganz normaler Bürotag
   HELD      der Arbeitstag
   KAMERA    zwei Register desselben Tages: was das Team erlebt,
             und was gleichzeitig im Hintergrund passiert
   MOMENT    im Vordergrund passiert NICHTS — und das ist das
             Ergebnis, nicht der Mangel

   Ohne Monitoring bleibt der Vordergrund erst genauso ruhig — der
   Schaden zeigt sich einen Tag später. Das ist ehrlicher (und
   unangenehmer) als ein sofortiger Stillstand.
══════════════════════════════════════════════════════════════ */

.ops {
  --ops-bg: #0e1116;
  --ops-panel: #161b22;
  --ops-ink: #e7ecf2;
  --ops-mut: #7e8b99;
  --ops-line: rgba(255,255,255,.09);
  --ops-calm: #5ba7c9;
  --ops-ok: #4fb286;
  --ops-bad: #d1614b;
  --ops-ease: cubic-bezier(.22,.9,.24,1);

  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--ops-bg); color: var(--ops-ink); overflow-x: clip;
}
.ops-in { width: min(1220px, 92vw); margin-inline: auto; }

.ops-slug { padding: clamp(4.5rem,9vh,7rem) 0 clamp(1.2rem,3vh,1.8rem); }
.ops-slug__k { font-family: var(--font-heading); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ops-calm); }
.ops-slug__h { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.034em; font-size: clamp(1.5rem,3.4vw,2.5rem); margin: .6rem 0 .5rem; max-width: 20ch; }
.ops-slug__c { margin: 0; color: var(--ops-mut); font-size: .93rem; line-height: 1.62; max-width: 58ch; }

/* ── Steuerung ───────────────────────────────────────────────── */
.ops-ctrl { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.ops-play {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-heading); font-weight: 800; font-size: .84rem;
  border: none; border-radius: 999px; padding: .62rem 1.25rem;
  background: var(--ops-calm); color: #06212c;
  transition: transform .2s var(--ops-ease), opacity .2s var(--ops-ease);
}
.ops-play:hover { transform: translateY(-2px); }
.ops-play[disabled] { opacity: .4; cursor: default; transform: none; }
.ops-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ops-mon {
  display: inline-flex; align-items: center; gap: .5rem;
  appearance: none; cursor: pointer; font: inherit; font-size: .82rem;
  border: 1px solid var(--ops-line); border-radius: 999px; padding: .5rem 1rem;
  background: rgba(255,255,255,.04); color: var(--ops-ink);
  transition: border-color .25s var(--ops-ease), background .25s var(--ops-ease);
}
.ops-mon__d { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ops-ok); }
.ops.is-off .ops-mon { border-color: rgba(209,97,75,.5); background: rgba(209,97,75,.1); }
.ops.is-off .ops-mon__d { background: var(--ops-bad); }
.ops-mon:focus-visible { outline: 2px solid var(--ops-calm); outline-offset: 2px; }

/* ── Der Tag ─────────────────────────────────────────────────── */
.ops-day {
  border: 1px solid var(--ops-line); border-radius: 14px; background: var(--ops-panel);
  padding: clamp(1.1rem,2.8vw,1.7rem);
}
.ops-clock {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.6rem,4vw,2.6rem); margin: 0 0 .1rem; font-variant-numeric: tabular-nums;
}
.ops-clock__d { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ops-mut); display: block; }

.ops-lanes { display: grid; gap: .8rem; margin-top: 1.1rem; }
.ops-lane { border: 1px solid var(--ops-line); border-radius: 10px; padding: .75rem .9rem; background: rgba(255,255,255,.02); }
.ops-lane__k { display: flex; align-items: center; gap: .45rem; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ops-mut); margin: 0 0 .55rem; }
.ops-lane--fore .ops-lane__k { color: var(--ops-calm); }
.ops-lane--back .ops-lane__k { color: var(--ops-mut); }
.ops-lane__t { font-family: var(--font-heading); font-weight: 700; font-size: .95rem; margin: 0 0 .2rem; }
.ops-lane__s { font-size: .82rem; color: var(--ops-mut); line-height: 1.55; margin: 0; }
.ops-lane--fore.is-hit { border-color: rgba(209,97,75,.5); background: rgba(209,97,75,.08); }
.ops-lane--fore.is-hit .ops-lane__t { color: #ffb4a1; }
.ops-lane--back.is-act { border-color: rgba(79,178,134,.42); background: rgba(79,178,134,.06); }
.ops-lane--back.is-blind { border-color: rgba(209,97,75,.4); background: rgba(209,97,75,.06); }

/* Zeitachse */
.ops-rail { display: flex; gap: .3rem; margin-top: 1rem; }
.ops-tick {
  flex: 1; height: .34rem; border-radius: 2px; background: rgba(255,255,255,.09);
  transition: background .35s var(--ops-ease);
}
.ops-tick.is-past { background: var(--ops-calm); }
.ops-tick.is-inc { background: var(--ops-bad); }
.ops-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; font-size: .68rem; color: var(--ops-mut); }
.ops-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.ops-legend i { width: .6rem; height: .3rem; border-radius: 2px; display: inline-block; }

.ops-say { margin: 1rem 0 0; font-size: .88rem; color: var(--ops-mut); line-height: 1.62; max-width: 64ch; }
.ops-say b { color: var(--ops-ink); }

/* Die Pointe */
.ops-punch {
  margin-top: clamp(1.4rem,4vh,2.4rem); border-top: 1px solid var(--ops-line); padding-top: clamp(1.4rem,4vh,2.2rem);
}
.ops-punch__t {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; font-size: clamp(1.5rem,4.2vw,2.9rem); margin: 0; max-width: 18ch;
}
.ops-punch__t em { font-style: normal; color: var(--ops-calm); }
.ops-punch__s { margin: .8rem 0 0; font-size: .9rem; color: var(--ops-mut); line-height: 1.62; max-width: 56ch; }

/* ── Leseebene ───────────────────────────────────────────────── */
.ops-read { padding: clamp(3.5rem,9vh,6rem) 0 clamp(4rem,10vh,7rem); border-top: 1px solid var(--ops-line); margin-top: clamp(2.5rem,6vh,4rem); }
.ops-read__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(1.6rem,5vw,4rem); align-items: start; }
@media (max-width: 880px) { .ops-read__grid { grid-template-columns: 1fr; } }
.ops-read__lead { font-size: clamp(1.02rem,1.5vw,1.16rem); line-height: 1.66; margin: 0 0 1rem; }
.ops-read__p { font-size: .93rem; line-height: 1.72; color: var(--ops-mut); margin: 0 0 .9rem; max-width: 62ch; }
.ops-read__p b { color: var(--ops-ink); }
.ops-read__p a, .ops-qa__a a, .ops-rel a { color: var(--ops-calm); text-underline-offset: 3px; }
.ops-qa { border-left: 1px solid var(--ops-line); padding-left: clamp(.9rem,2vw,1.6rem); }
@media (max-width: 880px) { .ops-qa { border-left: none; border-top: 1px solid var(--ops-line); padding: 1.4rem 0 0; } }
.ops-qa__h { font-family: var(--font-heading); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ops-mut); margin: 0 0 1rem; }
.ops-qa__i { margin: 0 0 1.1rem; }
.ops-qa__q { font-family: var(--font-heading); font-weight: 700; font-size: .86rem; margin: 0 0 .28rem; }
.ops-qa__a { font-size: .82rem; line-height: 1.62; color: var(--ops-mut); margin: 0; }
.ops-close { margin-top: clamp(2rem,5vh,3rem); padding-top: 1.4rem; border-top: 1px solid var(--ops-line); }
.ops-close__t { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.028em; font-size: clamp(1.15rem,2.3vw,1.6rem); margin: 0 0 .9rem; max-width: 32ch; }
.ops-go { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-heading); font-weight: 700; font-size: .88rem;
  color: #06212c; background: var(--ops-calm); text-decoration: none; padding: .68rem 1.25rem; border-radius: 999px; transition: transform .22s var(--ops-ease); }
.ops-go:hover { transform: translateY(-2px); }
.ops-go--q { background: transparent; color: var(--ops-ink); border: 1px solid var(--ops-line); }
.ops-rel { margin: 1.1rem 0 0; font-size: .82rem; color: var(--ops-mut); }

@media (prefers-reduced-motion: reduce) {
  .ops-tick, .ops-lane { transition: none; }
}