/* NEXTARI · DER KOPF · EIN BESITZER.

  Diese Datei ist die einzige Stelle, an der die Kopfleiste (header.topbar)
  ihr Aussehen bekommt. Vorher schrieben rund siebzig Stellen an ihr: die
  gemeinsamen Stilblaetter, dreissig Seiten-Kopien mit je hundert Regeln,
  sieben Module zur Laufzeit und ein gebackener Stil im Markup. Jede
  Aenderung musste an allen gewinnen · deshalb stand dort fast alles mit
  Vorrang, und keiner konnte sagen, welcher Wert gilt.

  Hier steht nichts mit Vorrang. Die Datei laedt als letzte Stilvorlage
  jeder Seite und gewinnt durch ihre Stelle und durch "header.topbar" vor
  jedem Waehler. Wer etwas am Kopf aendern will, aendert es HIER.

  DIE GESTALT · eine schwebende Flaeche aus Glas.
    - Der Kopf selbst ist durchsichtig und traegt keinen Weichzeichner.
      Er ist nur der Rahmen: Luft oben, die Flaeche darunter.
    - Die Flaeche malt ::after. Ihre Aussenkanten stehen auf der Kante des
      Inhalts (--nx-kopfrand), wie jede andere Flaeche des Hauses · am
      Telefon reicht sie als Leiste von Rand zu Rand (siehe Abschnitt 0).
    - Logo und rechte Gruppe ruecken um --nx-innen ein, wie Text in jeder
      Flaeche.
    - Der Inhalt laeuft beim Rollen verschwommen hinter der Flaeche durch
      und frei um sie herum.
    - Ruhig: kein Farbstreifen, keine getoente Navigation, BETA als kleine
      gefuellte Marke im einen Lila, genau EIN gefuellter Knopf ("Sign in").

  WARUM DER WEICHZEICHNER NICHT AM KOPF SITZT
  Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer alles, was
  darin position:fixed traegt · die Meldungsflaeche am Telefon rechnete
  dann gegen den Kopf statt gegen das Fenster. Auf ::after wirkt der
  Weichzeichner genauso, und der Kopf bleibt ein gewoehnlicher Kasten.

  WAS AM KOPF HAENGT
  --nx-kopf (nxm-kopfmass.js) ist die Unterkante des Kopfkastens und damit
  genau die Unterkante der Flaeche: die Luft steht OBEN im Kasten, nicht
  unten. Klebeleisten darunter rechnen mit --nx-kopf. Die Aufklapper im
  Kopf (Meldungen, Konto, Anlegen) haengen um --nx-kopf-haken unter ihrem
  Knopf · das ist der Abstand vom Knopf bis zur Flaechenkante plus acht
  Punkte Luft. */


/* ---------- 0 · Masse ------------------------------------------------ */
/* Die Farben des einen gefuellten Knopfs stehen an der Wurzel · die
  Schublade (nxm-chrome.js) traegt fuer Gaeste denselben "Sign in"-Knopf
  und liest sie von hier, statt eine zweite Zahl zu schreiben. */
:root{
  --nx-kopf-weiss:#fff;                     /* Gewaehltes, Zeiger, der gefuellte Knopf */
  --nx-kopf-voll:var(--nx-kopf-weiss);      /* der eine gefuellte Knopf */
  --nx-kopf-voll-text:var(--nx-grund,#101013);
}
header.topbar{
  --nx-kopf-luft:16px;                      /* Luft ueber der Flaeche */
  --nx-kopf-hoehe:56px;                     /* Hoehe der Flaeche */
  --nx-kopf-r:var(--nx-r-block,18px);       /* Rundung der Flaeche */
  /* Wo die Flaeche steht: Abstand ihrer Seitenkanten vom Fensterrand, ihre
    Oberkante im Kasten und der Einzug von Logo und rechter Gruppe in ihr. */
  --nx-kopf-kante:var(--nx-kopfrand,34px);
  --nx-kopf-oben:var(--nx-kopf-luft);
  --nx-kopf-einzug:var(--nx-innen,24px);
  --nx-kopf-marke:18px;                     /* Hoehe der Wortmarke */
  /* Jedes Bedienelement hat die Hoehe jeder Knopfreihe im Haus
    (--nx-h-bedien, nextari.css): am Schreibtisch 34, am Telefon das
    Fingermass. Der Haken rechnet sich daraus · Abstand vom Knopf bis zur
    Flaechenkante plus acht Punkte Luft. */
  --nx-kopf-knopf:var(--nx-h-bedien);
  --nx-kopf-haken:calc((var(--nx-kopf-hoehe) - var(--nx-kopf-knopf)) / 2 + 8px);
  --nx-kopf-burger:16px;                    /* Breite des Burger-Zeichens */
  --nx-kopf-pfeil:12px;                     /* Breite des Zurueck-Zeichens */
  --nx-kopf-spalt:32px;                     /* Luecke zwischen Marke, Navigation und rechter Gruppe */
  --nx-kopf-kante-2:rgba(255,255,255,.24);  /* Zeiger */
  --nx-kopf-glas:var(--nx-glas-leiste);      /* dieselbe Flaeche wie die Registerleiste (nextari.css) */
  /* Das Bildzeichen der Kennung · die eine Flaeche fuer den Kreis eines
    Menschen ohne Foto (--nx-av-flaeche, bei den Regeln des Bildzeichens). */
  --nx-kopf-bild:var(--nx-av-flaeche);
  --nx-kopf-bildzeichen:32px;               /* Durchmesser des Bildzeichens */
  /* Das Zeichen fuer Me ohne Bildzeichen (Gast am Telefon) · dasselbe
    Strichbild wie in Pulse. */
  --nx-kopf-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* DAS TELEFON: EINE LEISTE UEBER DIE GANZE BREITE.
  Als schwebende Flaeche stand der Kopf am Telefon auf genau derselben
  Kante wie jede Karte darunter · zwei gleich breite Kaesten mit gleicher
  Rundung, und der Inhalt lief in zwoelf Punkten Luft ueber ihm durch.
  Kopf und Inhalt stritten um eine Kante. Hier ist der Kopf deshalb eine
  Leiste von Rand zu Rand: kein seitlicher Einzug, keine Rundung, keine
  Luft darueber, das Glas bleibt. Die Luft oben ist der sichere Bereich
  des Geraets (Uhr, Kamera), die Flaeche reicht unter ihn. Logo und
  Burger stehen auf der Kante des Inhalts (--nx-kopfrand). Die Knoepfe
  tragen das Fingermass aus --nx-h-bedien · sie sind blank, sichtbar
  bleibt nur das Zeichen. */
@media(max-width:767px){
  header.topbar{
    --nx-kopf-luft:env(safe-area-inset-top,0px);
    --nx-kopf-hoehe:48px;
    --nx-kopf-r:0px;
    --nx-kopf-marke:15px;
    --nx-kopf-kante:0px;
    --nx-kopf-oben:0px;
    --nx-kopf-einzug:var(--nx-kopfrand,14px);
  }
}


/* ---------- 1 · Der Kasten ------------------------------------------ */
/* Klebt unter der Vorschauleiste (--nx-leiste, ohne Leiste 0). Der Kasten
  ist so hoch wie Luft und Flaeche zusammen · Logo und rechte Gruppe
  stehen mittig in der Flaeche, nicht im Kasten. */
header.topbar{
  position:sticky;
  top:var(--nx-leiste,48px);
  z-index:40;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:var(--nx-kopf-spalt);
  box-sizing:border-box;
  align-self:stretch;                       /* auch in einem zentrierenden body (Onboarding) volle Breite */
  width:auto;
  height:calc(var(--nx-kopf-luft) + var(--nx-kopf-hoehe));
  min-height:0;
  max-width:none;
  margin:0;
  padding:var(--nx-kopf-luft) calc(var(--nx-kopf-kante) + var(--nx-kopf-einzug)) 0;
  /* Der Streifen UEBER der Flaeche deckt in der Farbe der Seite · sonst
  standen beim Rollen abgeschnittene Ueberschriften in den 16 Punkten
  ueber dem Glas. Neben der Flaeche bleibt der Kasten offen. Am Telefon
  ist --nx-kopf-oben null: dort reicht das Glas bis an den Rand. */
  background:linear-gradient(var(--nx-grund),var(--nx-grund)) top left / 100% var(--nx-kopf-oben) no-repeat;
  border:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  isolation:isolate;
}
/* Kein Farbstreifen mehr oben · der Kopf ist ruhig. */
header.topbar::before{content:none;display:none}
/* Die Flaeche. */
header.topbar::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:var(--nx-kopf-oben);
  bottom:0;
  left:var(--nx-kopf-kante);
  right:var(--nx-kopf-kante);
  border-radius:var(--nx-kopf-r);
  background:var(--nx-kopf-glas);
  -webkit-backdrop-filter:var(--nx-glas-weich);
  backdrop-filter:var(--nx-glas-weich);
  pointer-events:none;
}
/* Wo der Browser kein Glas kann, ist die Flaeche deckend · halbdurchsichtig
  ohne Weichzeichner waere sie nur unleserlich. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.topbar::after{background:var(--nx-flaeche,#1f1f24)}
}
/* Beim Seitenwechsel bleibt der Kopf stehen: alte und neue Seite tragen ihn
  unter demselben Namen, die View Transition (nextari.css) blendet nur den
  Inhalt ueber. Der Name darf je Seite nur einmal vorkommen.
  DER NAME GILT NUR WAEHREND DES WECHSELS. Ein Element mit eigenem
  Uebergangsnamen ist fuer den Weichzeichner eine Grenze (Backdrop Root):
  das Glas in ::after sah dahinter nur noch den Kopf selbst, nicht die
  Seite. Gemessen lief der Inhalt beim Rollen lesbar durch die Navigation
  ("eine Stimme je Konto" auf People), die Flaeche war nur noch 72 Prozent
  Grau ohne Unschaerfe. Ausserhalb eines Wechsels traegt der Kopf deshalb
  keinen Namen; :active-view-transition gilt in der alten Seite, bevor sie
  ihr Bild nimmt, und in der neuen, solange sie einblendet. */
html:active-view-transition header.topbar{view-transition-name:nx-kopf}


/* ---------- 2 · Die Marke ------------------------------------------- */
/* Die Wortmarke wird nie gequetscht (flex:none) · am Telefon stand sie
  sonst auf 94 statt 128 Punkten. */
header.topbar a.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  position:static;
  margin:0;
  padding:0;
  min-width:0;
  text-decoration:none;
  opacity:1;
}
@media (hover:hover){header.topbar a.brand:hover{opacity:1}}
header.topbar #logo{display:flex;align-items:center;flex:none;line-height:0;margin:0}
header.topbar #logo svg,
header.topbar svg.logo{
  display:block;
  flex:none;
  height:var(--nx-kopf-marke);
  width:auto;
  margin:0;
}
/* Der Satz unter dem Logo gehoert auf die Startseite, nicht ins Moebel. */
header.topbar .nx-brandline{display:none}
/* Zeichen, Titel und "‹" baut nxm-mobil.js auf jeder Seite ein. Zeichen
  und Titel stehen nur am Telefon (Abschnitt 6) · am Schreibtisch traegt
  die Wortmarke. */
header.topbar .nx-kopf-zeichen,
header.topbar .nx-kopf-titel{display:none}
/* Die Schrift des Seitentitels steht hier, nicht erst im Telefonblock
  (Nr. C64): am Rechner ist er verborgen, trug aber die 16 des Browsers,
  und nxm-typo.js zog ihn nach dem Laden auf 15,5. Ein Mass, ein Ort. */
header.topbar .nx-kopf-titel{font:800 var(--nx-typo-kartenkopf)/1.2 var(--nx-f-text)}
/* DER WEG ZURUECK STEHT IM KOPF, BEI JEDER BREITE (Entscheidung Zurueck,
  seit 57b auch am Rechner). "‹" steht auf Detailseiten links vor der
  Marke: das Zeichen auf der Kante, die Tippflaeche reicht nach aussen.
  Nach innen gibt sie so viel ab, dass zwischen Pfeil und Marke eine
  Wortluecke steht, gleich wie breit der Spalt des Kopfes gerade ist.
  Die Marke rueckt dafuer auf Detailseiten zur Seite. */
header.topbar .nx-kopf-zurueck{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:var(--nx-kopf-knopf);
  height:var(--nx-kopf-knopf);
  margin:0 calc(var(--nx-luecke-wort) - var(--nx-kopf-spalt) - (var(--nx-kopf-knopf) - var(--nx-kopf-pfeil)) / 2)
    0 calc((var(--nx-kopf-pfeil) - var(--nx-kopf-knopf)) / 2);
  color:var(--nx-kopf-weiss);
  text-decoration:none;
}
header.topbar .nx-kopf-zurueck svg{display:block;width:var(--nx-kopf-pfeil);height:auto}
/* Die Krumen im Inhalt sagten dasselbe ein zweites Mal: die Pfadzeile der
  Spielseite (.crumb), der Knopf ueber Profil-, Gruppen- und Teamkoepfen
  (.nx-krume, nxm-krume.js) und der Rueckweg der Eventseite (.ed-back).
  Sie treten zurueck, bleiben aber im Dokument. */
.crumb,.nx-krume,.ed-back{display:none}
/* BETA · eine kleine Marke, gefuellt mit dem einen Lila (--accent) und
   weisser Schrift, mittig neben dem Logo. Lila steht im Haus nur als
   Flaeche · die graue Umrissfassung war die Ausnahme davon. */
header.topbar .beta{
  display:inline-flex;
  align-items:center;
  flex:none;
  position:static;
  top:auto;
  transform:none;
  align-self:center;
  margin:0;
  padding:3px 7px;
  border:0;
  border-radius:var(--nx-r-marke,6px);
  background:var(--accent);
  box-shadow:none;
  color:#fff;
  font:700 9px/1 var(--nx-f-text);
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:1;
  filter:none;
}


/* ---------- 3 · Die Navigation -------------------------------------- */
/* Kein Kasten um die Reiter. Leise Schrift, der Reiter der Seite weiss.
  Welcher das ist, sagt die Seite selbst mit class="active". */
header.topbar .topnav{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
header.topbar .topnav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  box-sizing:border-box;
  height:var(--nx-kopf-knopf);
  margin:0;
  padding:0 12px;
  border:0;
  border-radius:var(--nx-r-bedien,10px);
  background:transparent;
  box-shadow:none;
  color:var(--dim);
  font:800 var(--nx-typo-kartenkopf)/1 var(--nx-f-text);
  letter-spacing:.2px;
  text-decoration:none;
  white-space:nowrap;
}
@media (hover:hover){header.topbar .topnav a:hover{color:var(--txt);background:transparent;box-shadow:none}}
header.topbar .topnav a.active{color:var(--nx-kopf-weiss)}
/* Kein Unterstrich, kein Trenner hinter "Now". */
header.topbar .topnav a::before,
header.topbar .topnav a::after{content:none;display:none}
header.topbar .topnav .navic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:18px;
  height:18px;
  color:inherit;
}
header.topbar .topnav .navic svg{width:18px;height:18px;display:block}
header.topbar .topnav .navtx{font:inherit;letter-spacing:inherit;line-height:1;color:inherit}


/* ---------- 4 · Die rechte Gruppe ----------------------------------- */
/* Reihenfolge von links: Werkzeuge (Suche, Glocke, Nachrichten, Anlegen),
  der Zustand, Second Screen, die Kennung ganz rechts, der Burger danach.
  Die Gruppe darf schmaler werden als ihr Inhalt, aber nachgeben kann in
  ihr nur der Name der Kennung (er kuerzt sich mit "…"). Alles andere
  bleibt fest · so ragt nie etwas aus der Flaeche, auch wenn ein langer
  Name knapp ueber einer Stufe in Abschnitt 6 steht. */
/* Zwischen zwei Bedienelementen steht die Knopfluecke des Hauses, bei
  jeder Breite dieselbe und nur als gap der Gruppe · kein Kind traegt
  einen eigenen Rand. Hier standen 12, ab 1260 8, und zwei Einzelraender
  machten daraus 4 und 10. */
header.topbar .topright{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  gap:var(--nx-luecke-knopf);
  min-width:0;
  margin:0 0 0 auto;
  padding:0;
}
header.topbar .topright > .nxsr-ic{order:1}
header.topbar .topright > .icon-btn{order:2}
header.topbar .topright > .nx-anwrap{order:3}
header.topbar .topright > .nx-status{order:4}
header.topbar .topright > .nx-ss-link,
header.topbar .topright > .nx-ss-tgl{order:5}
header.topbar .topright > .nx-idwrap,
header.topbar .topright > .me{order:9}
header.topbar .topright > .nx-burger{order:99}
/* Das Zahnrad ist weg · die Kennung fuehrt in die Einstellungen. */
header.topbar .setbtn{display:none}

/* 4a · Werkzeuge: quadratisch, blank, ohne Kasten. */
header.topbar .icon-btn,
header.topbar .nxsr-ic,
header.topbar .nx-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  position:relative;
  box-sizing:border-box;
  width:var(--nx-kopf-knopf);
  height:var(--nx-kopf-knopf);
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--nx-r-bedien,10px);
  background:transparent;
  box-shadow:none;
  color:var(--dim);
  cursor:pointer;
  text-decoration:none;
  overflow:visible;
}
@media (hover:hover){header.topbar .icon-btn:hover,header.topbar .nxsr-ic:hover,header.topbar .nx-burger:hover{color:var(--txt);background:var(--nx-hebung);box-shadow:none}}
header.topbar .icon-btn svg{width:18px;height:18px;display:block}
header.topbar .nxsr-ic svg{width:17px;height:17px;display:block}
/* Der Burger ist ein Pixelfeld (nxm-chrome.js) · Zeichen 16 x 12. */
header.topbar .nx-burger svg{width:var(--nx-kopf-burger);height:12px;display:block}
header.topbar .nx-burger .nxb2{transition:width .18s ease}
@media (hover:hover){header.topbar .nx-burger:hover .nxb2{width:16px}}
/* Der Zaehler sitzt auf der Ecke der Glocke, nicht auf der Ecke ihrer
  Tippflaeche · bei jeder Breite gleich (am Schreibtisch wie am Telefon).
  Die Flaeche ist ein Knopfmass gross, das Zeichen 18. Bei -4 stand die
  Zahl am Schreibtisch 12 Punkte neben dem Zeichen, am Telefon 13 und
  ragte dort ueber den Kopfrand. Jetzt ragt sie bei jeder Breite 6 Punkte
  ueber die Ecke des Zeichens. */
header.topbar .counter{
  display:grid;                              /* ein Wert am Element (none) blendet ihn aus */
  position:absolute;
  top:calc((var(--nx-kopf-knopf) - 18px) / 2 - 6px);
  right:calc((var(--nx-kopf-knopf) - 18px) / 2 - 6px);
  box-sizing:border-box;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border:0;
  border-radius:var(--nx-r-pille,999px);
  background:var(--nx-akzent,#5b27e8);
  color:var(--nx-kopf-weiss);
  font:700 9px/14px var(--nx-f-text);
  text-align:center;
  place-items:center;
}

/* 4b · Zustand und Second Screen: blanke Worte wie die Zeichen daneben.
  Mit Umriss standen in einer Gruppe drei Arten nebeneinander (blanke
  Zeichen, zwei Umrisse, der gefuellte Knopf) · die Hausregel will genau
  einen gefuellten und sonst blanken Text. Das seitliche Polster ist
  eine Knopfluecke, so viel wie ein Zeichenknopf um sein Zeichen hat
  ((34 - 18) / 2) · damit stehen Zeichen und Worte im selben sichtbaren
  Takt, und beim Zeigen bekommen beide dieselbe Flaeche. */
header.topbar .nx-status,
header.topbar .nx-ss-link,
header.topbar .nx-ss-tgl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  box-sizing:border-box;
  height:var(--nx-kopf-knopf);
  min-height:0;
  margin:0;
  padding:0 var(--nx-luecke-knopf);
  border:0;
  border-radius:var(--nx-r-bedien,10px);
  background:transparent;
  background-image:none;
  box-shadow:none;
  font:700 var(--nx-typo-text)/1 var(--nx-f-text);
  letter-spacing:.2px;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  animation:none;
}
header.topbar .nx-status{color:var(--dim)}
header.topbar .nx-ss-link,
header.topbar .nx-ss-tgl{color:var(--txt)}
@media (hover:hover){header.topbar .nx-status:hover,header.topbar .nx-ss-link:hover,header.topbar .nx-ss-tgl:hover{
  color:var(--nx-kopf-weiss);
  background:var(--nx-hebung);
  box-shadow:none;
}}
header.topbar .nx-ss-tgl > i,
header.topbar .nx-ss-tgl .nx-ss-ic{display:none}
/* Der Statuspunkt ist eine Lampe: grau abwesend, gruen erreichbar. */
header.topbar .nx-status .d{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--nx-leise,#8a899f);
  box-shadow:none;
}
header.topbar .nx-status .t{display:none}
header.topbar .nx-status.nx-on{color:var(--nx-gut,#3be37a)}
header.topbar .nx-status.nx-on .d{background:var(--nx-gut,#3be37a)}

/* 4c · Die Kennung. Als Gast "Sign in": der eine gefuellte Knopf, weiss
  mit dunkler Schrift. Angemeldet: Bildzeichen und Handle blank wie alles
  daneben · das Bildzeichen ist schon die staerkste Form der Gruppe, ein
  Umriss darum waere eine zweite Kastenart. */
header.topbar .nx-idwrap{position:relative;display:inline-flex;flex:0 1 auto;min-width:0}
header.topbar a.me{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 1 auto;
  min-width:0;
  position:relative;
  box-sizing:border-box;
  height:var(--nx-kopf-knopf);
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--nx-r-bedien,10px);
  background:transparent;
  box-shadow:none;
  color:var(--txt);
  text-decoration:none;
  white-space:nowrap;
  overflow:visible;
  cursor:pointer;
  transform:none;
}
/* Blank heisst auch: Bildzeichen und Name SIND die Kante. Ein Polster
  liesse den Namen 8 Punkte vor der Kante enden, auf der links das Logo
  steht. Beim Zeigen bekommt das Bildzeichen einen Ring statt die Gruppe
  eine Flaeche, die eng am Namen klebte. */
@media (hover:hover){header.topbar a.me:hover{box-shadow:none;background:transparent;transform:none}}
@media (hover:hover){header.topbar a.me:not([data-nx-gast]):hover #meav{box-shadow:0 0 0 2px var(--nx-hebung-2)}}
header.topbar a.me::before,
header.topbar a.me::after{content:none;display:none}
/* Das Bildzeichen hat EINEN Besitzer fuer die Form (hier) und einen fuer
  den Inhalt (nxm-persona.js schreibt die Initialen in #meav .av). Die
  Seiten schreiben nichts mehr hinein · vorher malte jede Seite ihren
  eigenen Kreis mit eigenem Verlauf und eigener Groesse, und derselbe
  Knopf sah auf Games anders aus als auf Home. Ein hochgeladenes Bild
  (nxm-avatar-upload.js) liegt als Hintergrundbild am .av und deckt die
  Flaeche. */
/* DER KREIS EINES MENSCHEN OHNE FOTO · EINE FLAECHE FUER DAS GANZE HAUS.
  Flaches Hausviolett, weisse Initialen, kein Verlauf. Die Kennung oben
  rechts und der grosse Kreis im Profil lesen diese zwei Namen, und jeder
  weitere Kreis eines Menschen ohne Foto liest sie auch, statt eine eigene
  Farbe zu schreiben · vorher malte jede Stelle ihren eigenen Verlauf
  (violett nach dunkel, violett nach tuerkis), und derselbe Mensch sah an
  jeder Stelle anders aus. Die Namen stehen an der Wurzel, weil diese Datei
  auf jeder Seite laedt. Ein hochgeladenes Bild liegt darueber und deckt
  sie. Die Buchstaben kommen aus nxm-persona.js (NXPERSONA). */
:root{
  --nx-av-flaeche:var(--nx-akzent,#5b27e8);
  --nx-av-schrift:var(--nx-kopf-weiss);
}
header.topbar a.me #meav{
  display:block;
  flex:none;
  position:relative;
  width:var(--nx-kopf-bildzeichen);
  height:var(--nx-kopf-bildzeichen);
  margin:0;
  padding:0;
  border-radius:50%;
  overflow:hidden;
}
header.topbar a.me #meav > .av{
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  box-shadow:none;
  background:var(--nx-kopf-bild);
  background-size:cover;
  background-position:center;
  color:var(--nx-av-schrift);
  font:800 var(--nx-typo-meta)/1 var(--nx-f-text);
  letter-spacing:0;
  
}
header.topbar a.me #meav img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
header.topbar a.me .online{display:none}
header.topbar a.me .mename{
  display:block;
  position:static;
  margin:0;
  padding:0;
  min-width:0;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nx-kopf-weiss);
  font:700 var(--nx-typo-text)/1.35 var(--nx-f-text);
}
header.topbar a.me .meprem{display:inline-flex;align-items:center;flex:none;margin:0;color:var(--gold,#ffc53d)}
header.topbar a.me .nx-idcaret{display:none}
/* Gast · symmetrisch, kein Bildzeichen, kein Abzeichen. */
header.topbar a.me[data-nx-gast]{
  padding:0 16px;
  background:var(--nx-kopf-voll);
  box-shadow:none;
}
@media (hover:hover){header.topbar a.me[data-nx-gast]:hover{background:var(--nx-kopf-voll);box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--nx-kopf-voll-text) 8%,transparent)}}
header.topbar a.me[data-nx-gast] #meav,
header.topbar a.me[data-nx-gast] .meprem{display:none}
header.topbar a.me[data-nx-gast] .mename{
  color:var(--nx-kopf-voll-text);
  font-size:var(--nx-typo-kartenkopf);
  font-weight:800;
  max-width:none;
}


/* ---------- 5 · Was am Kopf haengt ---------------------------------- */
/* Die Aufklapper haengen unter der FLAECHE, nicht unter dem Knopf. Die
  Zahl gehoert dieser Datei (--nx-kopf-haken), die Aufklapper rechnen
  mit ihr. */
header.topbar #inbox{overflow:visible}


/* ---------- 6 · Breiten -------------------------------------------- */
/* Bis 1360 zeigt die angemeldete Kennung nur ihr Bildzeichen. Gemessen
  mit dem laengsten Namen, den die Kennung zeigt (140 Punkte): erst ab
  1361 passen Reiter, Gruppe und Name in die Flaeche. Die Stufe stand bei
  1260 · dazwischen ragte die Kennung auf jedem Laptop mit 1280 Punkten
  aus der Flaeche. Zwischen 1081 und 1260 wird es dann eng: weniger Luft.
  Unter 1200 fallen die Zeichen der Reiter weg, das Wort bleibt. */
@media(max-width:1360px){
  header.topbar a.me:not([data-nx-gast]) .mename{display:none}
}
@media(max-width:1260px){
  header.topbar{--nx-kopf-spalt:20px}
  header.topbar .topnav a{padding:0 10px}
}
@media(max-width:1200px){
  header.topbar .topnav .navic{display:none}
}
/* Ab 1080 traegt der Burger die Navigation. Er ist dann das letzte
  Element der Gruppe, und er ist blank · seine sichtbare Kante ist das
  Zeichen, nicht die Tippflaeche. Mittig in ihr stand das Zeichen 12 bis
  14 Punkte vor der Kante, auf der gegenueber das Logo steht. Die Gruppe
  reicht deshalb um den unsichtbaren Rest ueber die Kante hinaus: das
  Zeichen steht auf der Kante, die Tippflaeche waechst nach aussen in den
  Innenrand der Flaeche. */
@media(max-width:1080px){
  header.topbar .topnav{display:none}
  header.topbar .topright:has(> .nx-burger){margin-right:calc((var(--nx-kopf-burger) - var(--nx-kopf-knopf)) / 2)}
}
/* Ohne Kennung (die Anmeldeseite hat weder "Sign in" noch ein Konto) ist
  ein blankes Wort oder Zeichen das letzte Element. Seine sichtbare Kante
  ist die Schrift, und die stand um sein Polster (eine Knopfluecke) vor der
  Inhaltskante, auf der sonst "Sign in" endet. Wie beim Burger reicht die
  Gruppe dann um diesen unsichtbaren Rest ueber die Kante hinaus. */
@media(min-width:1081px){
  header.topbar .nx-burger{display:none}
  header.topbar .topright:not(:has(> .nx-idwrap, > .me)){margin-right:calc(var(--nx-luecke-knopf) * -1)}
}
/* Anlegen und Second Screen stehen unter 900 in der Schublade. */
@media(max-width:900px){
  header.topbar .topright > .nx-anwrap,
  header.topbar .topright > .nx-ss-link,
  header.topbar .topright > .nx-ss-tgl{display:none}
}
/* Am Telefon: Marke, Suche, Glocke und das Bild. Die Navigation steht
  unten in der Registerleiste (nxm-mobil.js), der Burger ist weg: hinter
  dem Bild liegt Me, die Schublade mit allem, was im Burger, im Kontomenue
  und im Fuss stand (nxm-chrome.js, burgerMenue). Ein Gast sieht statt des
  Bildes das Personenzeichen und findet in Me oben "Sign in". Zustand und
  Nachrichten stehen in Me. BETA wird kleiner, damit sie der Suche nicht zu
  nahe kommt. Jedes Ziel traegt das Fingermass (--nx-h-bedien), zwischen
  zwei Zielen steht die Knopfluecke. Das Bild ist das letzte Ziel: sein
  Kreis steht auf der Kante, die Tippflaeche reicht nach aussen. */
@media(max-width:767px){
  header.topbar{--nx-kopf-spalt:var(--nx-luecke-knopf)}
  header.topbar a.brand{gap:6px;min-height:var(--nx-kopf-knopf)}
  header.topbar .beta{font-size:var(--nx-schrift-beta);padding:2px 5px;letter-spacing:.04em}
  header.topbar .topright > .nx-status,
  header.topbar .topright > a.icon-btn,
  header.topbar .nx-burger{display:none}
  header.topbar .topright:has(> .nx-burger){margin-right:0}
  header.topbar .topright:has(> .me),
  header.topbar .topright:has(> .nx-idwrap){margin-right:calc((var(--nx-kopf-bildzeichen) - var(--nx-kopf-knopf)) / 2)}
  header.topbar a.me{width:var(--nx-kopf-knopf);justify-content:center;gap:0}
  header.topbar a.me .mename,
  header.topbar a.me .meprem{display:none}
  header.topbar a.me[data-nx-gast]{padding:0;background:transparent;color:var(--dim)}
  header.topbar a.me[data-nx-gast]::before{content:"";display:block;flex:none;width:20px;height:20px;
    background:currentColor;-webkit-mask:var(--nx-kopf-person) center/contain no-repeat;
    mask:var(--nx-kopf-person) center/contain no-repeat}
  /* Auf den Seiten von Me (Profil, Nachrichten, Einstellungen, Support)
  ist kein Register aktiv · dort traegt das Bild die Marke. */
  html[data-nx-register="me"] header.topbar a.me #meav{box-shadow:0 0 0 2px var(--nx-kopf-weiss)}
  html[data-nx-register="me"] header.topbar a.me[data-nx-gast]{color:var(--nx-kopf-weiss)}
  /* NUR WO MAN IST (Entscheidung 06.10. "Handy-Kopf und -Leiste", ersetzt
  02.10. "Symbol + Titel"): am Telefon steht im Kopf kein NEXTARI-Zeichen
  mehr, weder Hand noch Wortmarke noch BETA · nur der Titel der Seite in
  der Kartenkopf-Sprosse, auf der Kante; ein langer Name kuerzt sich mit
  "…", nichts sonst gibt nach. Nach Hause fuehrt die Registerleiste unten.
  nxm-mobil.js setzt data-nx-kopf="titel" auf jeder Seite. */
  html[data-nx-kopf="titel"] header.topbar a.brand,
  html[data-nx-kopf="titel"] header.topbar .beta{display:none}
  /* Die Ziele rechts geben nicht nach · sonst schrumpfte bei einem langen
  Namen (ein Abend, eine Kategorie) das Bild auf 8 Punkte oder fiel aus
  dem Kopf, und der Titel stand trotzdem gekuerzt da. */
  html[data-nx-kopf="titel"] header.topbar .topright{flex-shrink:0}
  html[data-nx-kopf="titel"] header.topbar .nx-kopf-titel{
    display:block;
    flex:0 1 auto;
    min-width:0;
    margin:0;
    pointer-events:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--nx-kopf-weiss);
    letter-spacing:0;
  }
}
/* Schmale Telefone. Marke mit BETA (162) und drei Ziele (148) brauchen
  mit Luft 318 Punkte, die Flaeche bietet bei 375 Punkten 315 plus den
  Innenrand, in den das Bild hineinragt (oben). Darunter wird die
  Wortmarke kleiner (im Verhaeltnis, nie gequetscht); die Luecke zwischen
  den Zielen bleibt die Knopfluecke · hier standen 4 Punkte, und zwei
  Tippflaechen stiessen damit fast aneinander. Erst unter 350 werden die
  Ziele 36 statt 44 hoch, sonst laege das Bild bei 320 ausserhalb. */
@media(max-width:374px){
  header.topbar{--nx-kopf-marke:13px}
}
@media(max-width:349px){
  header.topbar{--nx-kopf-marke:12px;--nx-kopf-knopf:36px;gap:6px}
  header.topbar a.brand{gap:5px}
}


/* ---------- 7 · Seiten mit eigener Gestalt -------------------------- */
/* Werkzeugseiten (Studios, Advertiser, Console): ihr Kopf ist die
  Betreiberleiste .nx-conbar. Die Kopfleiste steht im Markup, bleibt aber
  unsichtbar. */
.nx-conbar ~ header.topbar{display:none}

/* Die Landingpage fuehrt ihre eigene Kopfzeile (header.ltop). */
body[data-nx-seite="landing"] > header.topbar{display:none}

/* Gedruckt wird der Inhalt, nicht das Moebel (Kampagnenbericht u. a.). */
@media print{
  header.topbar{display:none}
}

/* Home im Zweitschirm (body.nx-glance): keine Flaeche, keine Reiter, nur
  die Marke, still · der Zweitschirm ist ein Bild zum Ansehen. */
/* Die Marke steht auf der Kante des Zweitschirm-Inhalts. Dessen Kasten
  (main.nx-dashhome im Zweitschirm, css/nextari-home.css) ist so breit wie
  die Seite, steht links ohne Rand und polstert 34 Punkte · der Kopf nimmt
  genau diesen Kasten. Mit "margin:auto" stand die Marke bei 1920 auf 190,
  der Inhalt auf 34. */
body.nx-glance header.topbar{
  position:static;
  height:auto;
  max-width:var(--nx-breite);
  margin:0;
  padding:18px 34px 0;
}
body.nx-glance header.topbar::after{content:none;display:none}
body.nx-glance header.topbar > .topnav,
body.nx-glance header.topbar > .topright{display:none}
body.nx-glance header.topbar > .brand{opacity:.7}