/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.07 */
.nxsr-ov.on{display:block}
.nxsr-r.on{background:var(--accent)}
@media (hover:hover){.nxsr-r:hover{background:var(--nx-hebung)}}
.nxsr-r b{font-family:var(--nx-f-text);font-size:var(--nx-typo-text);display:block}
.nxsr-r span{color:var(--dim);font-size:var(--nx-typo-meta)}
.nx-ops{margin:18px 0 6px}
.nx-ops-band{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(52,229,216,.05));border:1px solid rgba(255,255,255,.10);border-radius:var(--nx-r-tafel);padding:12px 16px;margin-bottom:14px}
.nx-ops-band .dot{width:8px;height:8px;border-radius:50%;background:#3be37a;box-shadow:none}
.nx-ops-band b{font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nx-ops-band span{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim)}
/* Die Demo-Marke darueber ist selbst eine Versalzeile · ohne Abstand klebten
  zwei graue Versalzeilen aufeinander und lasen sich als ein doppelstoeckiger
  Aufkleber statt als Marke plus Ueberschrift. */
.nx-ops-h{font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);margin:14px 0 10px}
.nx-ops-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1100px){.nx-ops-g{grid-template-columns:1fr 1fr}}
.nx-ops-c{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line,rgba(255,255,255,.07));border-radius:var(--nx-r-tafel);padding:12px 16px;transition:.15s}
@media (hover:hover){.nx-ops-c:hover{border-color:var(--nx-linie)}}
.nx-ops-c .n{font:800 22px var(--nx-f-titel);color:#fff}
.nx-ops-c .n em{font-style:normal;font-size:var(--nx-typo-meta);color:#ffb43d;margin-left:6px}
.nx-ops-c b{display:block;font:800 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);margin:2px 0 3px}
.nx-ops-c span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-roll{display:flex;gap:10px;flex-wrap:wrap}
a.nx-roll-s{text-decoration:none}
/* Drei der vier Karten tragen unten eine Zustandspille, die vierte nicht ·
  weil die Reihe alle vier auf dieselbe Hoehe zieht, blieben unter der
  ersten 26 Punkte tote Flaeche genau dort, wo die Nachbarn ihre Pille
  haben. Der Inhalt steht jetzt in der Mitte statt oben: dann ist die Luft
  gleichmaessig verteilt statt einseitig unten. */
.nx-roll-s{flex:1;min-width:170px;display:flex;flex-direction:column;justify-content:flex-start;background:var(--nx-hebung);border:1px solid var(--line,rgba(255,255,255,.07));border-radius:var(--nx-r-karte);padding:12px 12px}
.nx-roll-s.done{border-color:rgba(59,227,122,.35)}
.nx-roll-s.now{border-color:var(--nx-linie);background:var(--nx-hebung)}
.nx-roll-s i{font:800 9px var(--nx-f-text);font-style:normal;color:var(--dim)}
.nx-roll-s.done i{color:#3be37a}
.nx-roll-s.now i{color:var(--nx-text)}
.nx-roll-s b{display:block;font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;margin-top:3px}
.nx-adp{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:0 0 16px}
/* overflow:hidden schnitt den eigenen Pfeil ab · er sitzt bei right:-11px,
  also 11 Punkte ausserhalb der Kachel, und war deshalb an keiner Breite zu
  sehen (gemessen bei 390, 1000 und 1600). Die Beschriftungen sind
  kurz, ein Deckel wird hier nicht gebraucht. */
.nx-adp a{flex:1;min-width:150px;overflow:visible;display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line,rgba(255,255,255,.07));border-radius:var(--nx-r-karte);padding:10px 12px;position:relative}
@media (hover:hover){.nx-adp a:hover{border-color:var(--nx-linie)}}
.nx-adp a:not(:last-child)::after{content:"\2192";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--nx-leise);font-size:var(--nx-typo-text);z-index:2}
.nx-adp .n{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff}
.nx-adp b{display:block;font:800 var(--nx-typo-meta) var(--nx-f-text);color:var(--txt);margin-top:1px}
.nx-adp span{display:block;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-adp-g{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);margin:-8px 0 14px}
.nx-adp-g em{font-style:normal;color:#3be37a}
.nx-ck-body{padding:14px 16px}
/* Vier feste Spalten (150+70+120 plus Abstaende) sind zusammen breiter als ein
  Telefon · gemessen bei 390 Punkten stand die Ziel-Angabe jeder Zeile 57
  Punkte ueber der Kante des Kastens. Am Schreibtisch bleibt die Zeile, wie sie
  ist; schmal stapelt sie. */
.nx-ck-row{display:grid;grid-template-columns:150px 1fr 70px 120px;gap:12px;align-items:center;padding:8px 0}
@media(max-width:767px){
  /* DER BALKEN IST DIE AUSSAGE DER ZEILE. Mit "1fr auto" nahm der Name die
  ganze erste Spalte, und der Balken · das Einzige, was zeigt wie weit
  etwas ist · fiel auf null Punkte Breite zusammen. Sechs Zeilen ohne
  Balken. Am Telefon steht er deshalb unter seinem Namen, ueber die volle
  Breite, mit der Zahl daneben. */
  .nx-ck-row{grid-template-columns:1fr auto;gap:4px 10px}
  .nx-ck-row>*{min-width:0}
  .nx-ck-bar{grid-column:1/-1;min-width:0;width:100%}
  .nx-ck-p{grid-column:1/-1}

  /* EIN PFEIL ZEIGT AUF DEN NAECHSTEN SCHRITT. Die Kette der Ad-pipeline
  bricht am Telefon auf zwei Spalten um; die waagerechten Pfeile blieben
  stehen und hingen bei x375 von 381 an der Bildkante, ohne Ziel. Wo die
  Kette umbricht, gibt es keine Pfeile. */
  .nx-adp a:not(:last-child)::after{display:none}

  /* Und die Beschreibung der Kachel bricht um, statt mitten im Wort mit
  drei Puenktchen aufzuhoeren ("native \00b7 presents \00b7 placeme..."). */
  .nx-adp span{white-space:normal;overflow:visible;text-overflow:clip}

  /* DREI SPALTEN SIND EINE ENTSCHEIDUNG FUER BREITE BILDER. Zeichen, Text
  und Zustand nebeneinander liessen dem Text 153 bis 169 von 381 Punkten ·
  vierzig Prozent, sieben Zeilen. Am Telefon steht der Zustand unter dem
  Text, nicht daneben. */
  .nx-ops-c{padding:12px 14px}

  /* Dieselbe Rechnung fuer die beiden grossen Karten "Data & insights" und
  "Billing & revenue": Zeichen, Text und Zustand nebeneinander liessen dem
  Text 153 bis 169 von 381 Punkten und sieben Zeilen. Am Telefon stehen
  Zeichen und Titel in einer Zeile, der Zustand darunter. */
  html body a.nx-oc-karte,html body a.bcard{flex-wrap:wrap;row-gap:8px;
    padding-left:14px!important;padding-right:14px!important}
  html body a.nx-oc-karte > *,html body a.bcard > *{min-width:0}
  /* Die Karten tragen ihre Masse inline in der Seite · eine Regel ohne
  Vorrang kommt dagegen nicht an. */
  html body a.nx-oc-karte > :last-child,html body a.bcard > :last-child{
    flex:1 1 100%!important;margin-left:56px;text-align:left}
}
.nx-ck-lbl{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}
.nx-ck-bar{height:8px;border-radius:99px;background:var(--nx-hebung);overflow:hidden}
.nx-ck-bar i{display:block;height:100%;border-radius:var(--nx-r-pille);background:var(--accent)}
.nx-ck-v{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);text-align:right}
.nx-ck-p{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-ck-note{margin-top:8px;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);border-top:1px solid var(--line,rgba(255,255,255,.06));padding-top:10px}
.railfoot .agencybox{border:1px solid var(--line,rgba(255,255,255,.06));border-radius:var(--nx-r-karte);padding:8px 12px;
  transition:border-color .15s,background .15s;display:flex;align-items:center;gap:10px}
.nx-acct-pop{position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:6000;
  background:var(--nx-flaeche-2);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:8px;
  box-shadow:var(--nx-schatten);display:none}
.nx-acct-pop.open{display:block}
.nx-acct-pop .ap-head{font:800 9px var(--nx-f-text);
  color:var(--dim);padding:4px 8px 8px}
.nx-acct-pop .ap-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--nx-r-bedien);cursor:pointer}
.nx-acct-pop .ap-av{width:28px;height:28px;border-radius:var(--nx-r-bedien);display:grid;place-items:center;flex:none;
  font:700 var(--nx-typo-klein) var(--nx-f-text);color:#fff;background:var(--accent)}
.nx-connect-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s}
.nx-connect-card{position:relative;width:440px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto;
  background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:22px;
  box-shadow:var(--nx-schatten)}
.nx-connect-card .cc-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.nx-connect-card .cc-x{margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--nx-r-bedien);border:1px solid var(--line,rgba(255,255,255,.08));
  background:transparent;color:var(--dim);cursor:pointer;font-size:14px}
.nx-connect-card .cc-types{display:flex;flex-direction:column;gap:8px}
.nx-connect-card .cc-type{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--nx-r-karte);
  border:1px solid var(--line,rgba(255,255,255,.08));background:var(--surface);cursor:pointer;text-align:left;transition:.15s}
.nx-connect-card .cc-ic{width:34px;height:34px;border-radius:var(--nx-r-bedien);display:grid;place-items:center;flex:none;
  background:var(--nx-hebung);color:var(--nx-text);font-size:var(--nx-typo-kartenkopf)}
.nx-connect-card .cc-tx{display:flex;flex-direction:column;gap:2px}
.nx-connect-card .cc-name{width:100%;box-sizing:border-box;padding:12px 12px;border-radius:var(--nx-r-karte);
  border:1px solid var(--line,rgba(255,255,255,.1));background:var(--nx-grund);color:var(--txt);
  font:700 var(--nx-typo-text) var(--nx-f-text);outline:none}
.nx-connect-card .cc-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.main{margin:0 auto;max-width:1240px;padding:26px 32px 72px;width:100%;box-sizing:border-box}
.console-top .ct-brand{display:flex;align-items:center;gap:10px;flex:none}
.console-top .ct-right{margin-left:auto;flex:none;display:flex;align-items:center;gap:12px}
@media(max-width:860px){.main{padding:18px 16px 64px}}
.nx-sim{margin-top:7px;display:inline-block;border:1px solid rgba(52,229,216,.4);background:rgba(52,229,216,.08);color:var(--nx-text);font:800 9px var(--nx-f-text);padding:4px 8px;border-radius:var(--nx-r-bedien);cursor:pointer}
.nx-sim.on{background:var(--accent);color:#fff}
