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{outline:2px solid #6DE3FF;outline-offset:3px;border-radius:4px}
  @media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
  @keyframes mb-slide-in{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}


/* hover states */
.actors-h1:hover{color:#6DE3FF !important}
.actors-h2:hover{background:rgba(109,227,255,.09) !important}
.actors-h3:hover{transform:translateY(-2px) !important;box-shadow:0 10px 32px rgba(49,87,245,.5),inset 0 1px 0 rgba(255,255,255,.24) !important;filter:brightness(1.12) !important}
.actors-h4:hover{border-color:rgba(109,227,255,.45) !important;color:#F2F6FA !important}
.actors-h5:hover{color:#F2F6FA !important}
.actors-h6:hover{background:rgba(109,227,255,.1) !important}
.actors-h7:hover{border-color:rgba(109,227,255,.42) !important;background:rgba(10,21,38,.6) !important;box-shadow:0 14px 34px rgba(0,0,0,.38) !important}
.actors-h8:hover{color:#6DE3FF !important;border-color:rgba(109,227,255,.5) !important}
.actors-h9:hover{color:#a6efff !important}
/* ===================================================================
   Register
   Vorher waren das Karten: gerundete Kästen mit Rahmen, die erste
   doppelt so breit und mit grösserer Schrift, ohne dass die Daten das
   hergaben. Acht Einträge mit immer denselben Feldern sind kein
   Kartenraster, sondern ein Register -- also feste Spalten, Haarlinien
   dazwischen und eine Schiene links, die die Herkunft trägt.
   =================================================================== */

/* Die Herkunftsfarbe setzt die Zeile selbst als --reg, aus dem Wert der
   regions-Tabelle -- derselbe, der den Punkt im Filter-Chip faerbt.

   Die alten vier lagen zu dicht beieinander: Nordkorea und Russland
   trennten nur DeltaE 12.4 bei normalem Sehen, "unattributed" lag mit
   Chroma 0.03 unter der Saettigungsschwelle. In der Tabelle stehen jetzt
   die ersten drei Slots der dokumentierten Palette in ihren Dark-Stufen,
   die die Pruefung ueber alle Paare bestehen (#3987e5 / #d95926 /
   #199e70); unattributed bleibt bewusst grau, das ist die Restkategorie.
   Wer sie im Admin aendert, sollte sie erneut pruefen lassen.
   Danebengesetzt steht immer Flagge und Land -- die Farbe ist nie das
   einzige Merkmal. */
.mb-reg{--reg:#7C8A9B;border-top:1px solid rgba(109,227,255,.14)}

.mb-reg-head,
.mb-reg-row{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 96px 104px 168px;
  gap:24px;align-items:baseline;
}

/* Der Spaltenkopf ist die Sortierung. Die segmentierte Pillenleiste daneben
   ist entfallen -- ein Bedienelement, das die Spalten nachbaut, statt sie zu
   benutzen. Kein Pfeilchen an der aktiven Spalte: die Richtung je Spalte
   liegt fest und laesst sich nicht umkehren, ein Pfeil wuerde etwas
   versprechen, das es nicht gibt. Der Strich markiert, kein Kasten. */
.mb-reg-head{
  padding:0 20px 0 23px;
  border-bottom:1px solid rgba(109,227,255,.14);
}
.mb-reg-sort{
  /* inline-block, damit der Strich unter dem Wort endet und nicht ueber die
     ganze Spalte laeuft; justify-self setzt ihn an die Seite, an der auch
     die Zahlen der Spalte stehen. */
  display:inline-block;justify-self:start;padding:12px 0 10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  color:#A2AFBE;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s ease,border-color .18s ease;
}
.mb-reg-sort.num{justify-self:end}
.mb-reg-sort:hover{color:#F2F6FA;border-bottom-color:rgba(109,227,255,.35)}
.mb-reg-sort.is-on{color:#6DE3FF;border-bottom-color:#6DE3FF}

.mb-reg-row{
  position:relative;padding:19px 20px 19px 23px;
  border-bottom:1px solid rgba(109,227,255,.08);
  cursor:pointer;transition:background .18s ease;
}
/* Die Schiene ist die Herkunft. Kein Rahmen um die Zeile -- der Kasten
   war das, was nach Karte aussah. */
.mb-reg-row::before{
  content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:3px;
  background:var(--reg);opacity:.75;transition:opacity .18s ease;
}
.mb-reg-row:hover{background:rgba(109,227,255,.032)}
.mb-reg-row:hover::before{opacity:1}
.mb-reg-row:focus-visible{outline:2px solid #6DE3FF;outline-offset:-2px}

.mb-reg-id{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:#6DE3FF}
.mb-reg-main{min-width:0}
.mb-reg-name{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#F2F6FA;
  line-height:1.25}
.mb-reg-origin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#B6C2CF}
.mb-reg-teaser{display:block;margin-top:9px;font-size:13.5px;line-height:1.6;color:#9aa8b8;
  max-width:70ch}
/* Der Hinweis war eine Pille mit vier verschiedenen Rahmenkanten. Eine
   Beschriftung reicht; die Betonung macht der Strich davor. */
.mb-reg-badge{display:inline-flex;align-items:center;margin-top:9px;padding-left:9px;
  border-left:2px solid rgba(109,227,255,.55);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:#9fd8ea}

/* Zahlen fluchten untereinander, deshalb hier Tabellenziffern. */
.mb-reg-num{text-align:right;font-variant-numeric:tabular-nums}
.mb-reg-num b{display:block;font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;
  color:#E4EAF1;line-height:1.2}
.mb-reg-num em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:#A2AFBE}
.mb-reg-num.is-live b{color:#6DE3FF}
.mb-reg-range{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:#9aa8b8;white-space:nowrap;font-variant-numeric:tabular-nums}

.mb-reg-empty{padding:56px 20px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#A2AFBE}

@media (max-width:1100px){
  .mb-reg-head{display:flex;flex-wrap:wrap;gap:0 22px;padding-top:2px}
  .mb-reg-sort,.mb-reg-sort.num{justify-self:start}
  .mb-reg-row{grid-template-columns:96px minmax(0,1fr);gap:8px 20px;padding-bottom:16px}
  .mb-reg-num,.mb-reg-range{grid-column:2;text-align:left}
  .mb-reg-num{display:flex;align-items:baseline;gap:8px}
  .mb-reg-num b{font-size:13px}
  .mb-reg-num em{margin-top:0}
}

/* --------------------------------------------------------------- iim feed
   Der Streifen ueber dem Register. Er trug eine Zeile Mono-Prosa mit fetten
   Zahlen darin und darunter eine einzelne Schlagzeile: dicht zu lesen, und
   von einem Feed war nichts zu erkennen. Jetzt oben die Kennzahlen als
   ruhige Kopfzeile, darunter die letzten Ketten als Zeilen.

   Die feste Datumsspalte ist der Punkt: an ihr fluchten die Titel, und erst
   dadurch liest sich die Liste als Feed und nicht als drei Links. Farbe
   tragen nur die Beschriftung und die Actor-Kennung, der Rest ist Text. */
.mb-feed-head{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap}
.mb-feed-meta{
  display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:#A2AFBE;
}
.mb-feed-meta b{font-weight:500;color:#F2F6FA;font-variant-numeric:tabular-nums}
.mb-feed-open{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.1em;white-space:nowrap;color:#6DE3FF;transition:color .18s ease;
}
.mb-feed-open:hover{color:#a6efff}

.mb-feed-list{margin-top:11px;border-top:1px solid rgba(109,227,255,.09)}
.mb-feed-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  align-items:baseline;gap:20px;
  margin:0 -10px;padding:8px 10px;
  border-bottom:1px solid rgba(109,227,255,.06);
  color:#C3CDDA;transition:background .16s ease,color .16s ease;
}
.mb-feed-row:last-child{border-bottom:none}
.mb-feed-row:hover{background:rgba(109,227,255,.05);color:#F2F6FA}
.mb-feed-row .d{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#A2AFBE;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mb-feed-row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;line-height:1.5}
.mb-feed-row .a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:#6DE3FF;white-space:nowrap;
}
.mb-feed-empty{margin-top:11px;font-size:13px;color:#A2AFBE}

/* Schmal genug, und die drei Spalten sind keine Spalten mehr, sondern drei
   Zeilen: Datum, Titel, Kennung. Der Titel darf dann umbrechen. */
@media (max-width:760px){
  .mb-feed-row{grid-template-columns:minmax(0,1fr);gap:3px;padding:10px}
  .mb-feed-row .t{white-space:normal}
  /* Umgebrochen steht der Link sonst allein rechts und haengt in der Luft. */
  .mb-feed-open{margin-left:0}
}