html,body{margin:0;background:#050914;font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:hidden}
  a{color:#6DE3FF;text-decoration:none}
  a:hover{color:#a6efff}
  a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #6DE3FF;outline-offset:3px;border-radius:4px}
  @media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}


/* hover states */
.netlab-h1:hover{color:#6DE3FF !important}
.netlab-h2:hover{background:rgba(109,227,255,.09) !important}
.netlab-h3:hover{transform:translateY(-2px) !important;box-shadow:0 10px 26px rgba(49,87,245,.4) !important}

/* ------------------------------------------------------------------ roadmap
   Vier Phasen auf einer Schiene statt vier gleich aussehender Kacheln. Der
   Zustand steht dreifach da: als Wort ("Done" / "In progress" / "Planned"),
   als Form der Marke und erst dann als Farbe. Farbe ist damit nie das einzige
   Merkmal, und nichts daran blinkt oder pulsiert.

   Die Schiene liegt links an der Marke und laeuft zur naechsten Phase:
   durchgezogen hinter dem, was fertig ist, gestrichelt vor dem, was kommt. */
.mb-rm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mb-rm-step{position:relative;padding-right:28px}
.mb-rm-step:last-child{padding-right:0}

.mb-rm-no{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;color:#A2AFBE;margin-bottom:14px}

.mb-rm-rail{position:relative;height:18px;margin-bottom:18px}
.mb-rm-rail::before{content:'';position:absolute;left:9px;right:-28px;top:9px;height:2px}
.mb-rm-step:last-child .mb-rm-rail::before{display:none}
.mb-rm-node{position:absolute;left:0;top:0;width:18px;height:18px;display:grid;place-items:center}
.mb-rm-node::before{content:'';display:block;box-sizing:border-box;border-radius:50%}

.is-done .mb-rm-rail::before{background:#6DE3FF;opacity:.8}
.is-done .mb-rm-node::before{width:12px;height:12px;background:#6DE3FF}

.is-current .mb-rm-node::before{width:18px;height:18px;background:#050914;border:3px solid #6DE3FF;box-shadow:0 0 0 4px rgba(109,227,255,.12)}

.is-current .mb-rm-rail::before,
.is-upcoming .mb-rm-rail::before{background-image:repeating-linear-gradient(90deg,rgba(163,178,192,.42) 0 6px,transparent 6px 13px)}
.is-upcoming .mb-rm-node::before{width:12px;height:12px;background:transparent;border:2px solid rgba(163,178,192,.55)}

.mb-rm-status{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A2AFBE;margin-bottom:10px}
.is-current .mb-rm-status{color:#6DE3FF}

.mb-rm-label{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:#F2F6FA;margin-bottom:9px}
.is-upcoming .mb-rm-label{color:#B6C2CF}
.mb-rm-detail{margin:0;font-size:13.5px;line-height:1.6;color:#A2AFBE;max-width:30ch}

/* Unter 900px kippt die Schiene in die Senkrechte. Vier nebeneinander
   gestapelte Spalten waeren hier nur noch Spalten, keine Abfolge mehr. */
@media (max-width:900px){
  .mb-rm{grid-template-columns:minmax(0,1fr)}
  .mb-rm-step{padding:0 0 30px 36px}
  .mb-rm-step:last-child{padding-bottom:0}
  .mb-rm-rail{position:absolute;left:0;top:2px;bottom:-2px;width:18px;height:auto;margin:0}
  .mb-rm-rail::before{left:8px;right:auto;top:18px;bottom:0;width:2px;height:auto}
  .is-current .mb-rm-rail::before,
  .is-upcoming .mb-rm-rail::before{background-image:repeating-linear-gradient(180deg,rgba(163,178,192,.42) 0 6px,transparent 6px 13px)}
  .mb-rm-no{margin-bottom:8px}
  .mb-rm-detail{max-width:none}
}