/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.06 */
/* DIE SCHRIFTDATEIEN · ein Besitzer fuer alle Seiten (das Overlay ohne diese
  Datei fuehrt seine eigenen). Nunito Sans traegt Text und Bedienung,
  Encode Sans Condensed nur Titel (--nx-f-text, --nx-f-titel unten). Der
  Name "Encode Sans" zeigte frueher auf die Condensed-Dateien und liess so
  die ganze Bedienung schmal laufen · es gibt ihn nicht mehr. */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/press-start-2p-v15-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Encode Sans Condensed";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/encode-sans-condensed-v13-latin-300.woff2") format("woff2")}
@font-face{font-family:"Encode Sans Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/encode-sans-condensed-v13-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Encode Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/encode-sans-condensed-v13-latin-600.woff2") format("woff2")}
@font-face{font-family:"Encode Sans Condensed";font-style:normal;font-weight:700 900;font-display:swap;src:url("fonts/encode-sans-condensed-v13-latin-700.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/nunito-sans-v19-latin-300.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/nunito-sans-v19-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-sans-v19-latin-600.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700 900;font-display:swap;src:url("fonts/nunito-sans-v19-latin-700.woff2") format("woff2")}
/* DER RAHMEN · EINE KANTE FUER ALLES.
  Kopfleiste, Seitentitel, jede Reihe und die Aussenkante jeder Flaeche stehen
  auf derselben senkrechten Linie: 34 Punkte vom Fensterrand, und ab 1600
  Punkten Fensterbreite waechst der Rand mit, damit der Inhalt nicht breiter
  als 1532 wird.

  Vier Namen, jeder mit einer Aufgabe:
    --nx-breite   die Spalte zwischen den beiden Kanten. Ein Kasten der
                  obersten Ebene nimmt max-width:var(--nx-breite) und
                  margin:auto · mehr braucht er nicht.
    --nx-rand     Polster einer SCHLICHTEN Reihe in dieser Spalte. Am
                  Schreibtisch 0: der Text steht auf der Kante. Am Telefon 24.
    --nx-innen    Innenrand einer FLAECHE (Kasten mit eigenem Grund).
    --nx-kopfrand der Abstand vom Fensterrand zur Kante · fuer Baender, die
                  ueber die volle Breite laufen (Kopfleiste, Fuss).

  VORHER standen hier zwei Rechenwege fuer dieselbe Kante: bis 1668 Punkte
  zog --nx-breite den Rand ab, darueber legten die Seiten ihn als Polster
  hinein · dazu 32 kopierte Bloecke mit 24 Punkten unter 1340. Gemessen auf
  zwoelf Seiten: Kopfleiste auf 34, Inhalt auf 34, 44, 52, 58, 68, 74, 78
  oder 92, und bei 1920 Kaesten 34 Punkte ausserhalb der Kopfleiste.
  ACHTUNG: --nx-kopf ist die KOPFHOEHE (nxm-kopfmass.js) · der Rand heisst --nx-kopfrand. */
:root{--nx-breite:min(1532px,calc(100% - 68px));--nx-rand:0px;--nx-innen:24px;--nx-kopfrand:max(34px,calc((100% - 1532px) / 2))}
/* AM TELEFON DIESELBE REGEL, NUR ENGER: eine Kante 14 Punkte vom Rand fuer
  Kopfleiste, Titel, Reihen und die Aussenkante jeder Flaeche; Text in einer
  Flaeche 16 weiter innen. Vorher stand der Inhalt je nach Seite und Block
  auf 14, 16, 30, 38, 54 oder 70 Punkten. */
@media(max-width:767px){:root{--nx-breite:calc(100% - 28px);--nx-rand:0px;--nx-innen:16px;--nx-kopfrand:14px}}
/* DIE INNENLINIE · ein fuenfter Name. Der Kopf einer Reihe OHNE Flaeche
  steht nicht auf der Kante, sondern um --nx-innen weiter innen: auf der
  Linie, auf der jeder Kopf in einer Flaeche steht und das Logo im Kopf.
  Die Karten der Reihe bleiben auf der Kante. Am Telefon gilt der
  Innenrand des Telefons. In einer Flaeche ist der Wert null, dort traegt
  ihr Polster den Einzug (Regel bei den REIHEN-KOEPFEN). */
:root{--nx-reihenkopf-einzug:var(--nx-innen)}
/* KNOPFGRUPPEN HABEN EIN MASS. Zwischen Knoepfen einer Gruppe steht
  --nx-luecke-knopf, in Reihe wie in Spalte, gesetzt als gap an der Gruppe,
  nie als Rand an einem Kind. Zwischen zwei Gruppen einer Leiste steht
  --nx-luecke-wort. In einer Reihe haben alle Knoepfe eine Hoehe,
  --nx-h-bedien (am Telefon das Fingermass). Gemessen stand die Aktionsleiste
  der Spielseite mit 4 Punkten Abstand Kante an Kante, und die zweite Reihe
  begann 6 Punkte neben der ersten. Pruefer: mess/knopfreihen.py. */
:root{--nx-luecke-knopf:8px;--nx-luecke-wort:16px;--nx-luecke-kompakt:12px;--nx-h-bedien:34px}
/* LUFT ZWISCHEN, ENGE INNERHALB · im Strom (Nr. C68, 05.10.). Zwei Beitraege
  des Feeds stehen --nx-luecke-post auseinander, am Rechner (Masonry in
  js/nextari-home.23-dashhome.js, NXPOSTLUFT) wie am Telefon (.m-feed,
  css/nextari-feed.css). Vorher 16 bis 20 bzw. 26 Punkte · die Aktionsleiste
  stand naeher am naechsten Beitrag als am eigenen. */
:root{--nx-luecke-post:32px}
/* DAS KARTENMASS DER WISCHREIHEN · ein Besitzer (Nr. C54). Es stand zweimal mit
  derselben Rechnung: --hr-hoch im Bausatz von Pulse (Runde 5) und --hs-hoch auf
  den drei Hauptseiten (Runde 6). Hochformat: zwei Karten und ein Drittel im
  Bild; Querformat: anderthalb; Kasten: fast eine ganze, die naechste schaut
  hervor. Gerechnet wird gegen die Wischreihe selbst (100cqw ist ihre Breite).
  --nx-karte-kante ist der Rand, um den die Reihe ueber den Inhalt hinausreicht ·
  er gehoert der Flaeche; wo eine Flaeche ihn anders setzt (Pulse: 14 px auch im
  Rahmen am Rechner), wird das Mass dort neu gerechnet, deshalb steht .hr-seite
  hier neben :root. */
:root{--nx-karte-kante:var(--nx-kopfrand)}
:root,.hr-seite{
  --nx-karte-hoch:calc((100cqw + var(--nx-karte-kante) - 2 * var(--nx-luecke-knopf)) / 2.3);
  --nx-karte-quer:calc((100cqw + var(--nx-karte-kante) - var(--nx-luecke-knopf)) / 1.6);
  --nx-karte-kasten:calc((100cqw + var(--nx-karte-kante) - var(--nx-luecke-knopf)) / 1.15);
  /* Die Rangzahl ist Gestaltung, keine Schrift (ueber der Leiter) */
  --nx-karte-rang:calc(var(--nx-karte-hoch) * .98)}
@media(max-width:767px){:root{--nx-h-bedien:44px}}
/* Platz fuer die Rollleiste IMMER reservieren · sonst ist eine Seite ohne Rollung
  (Home scrollt in seiner eigenen Flaeche) neun Punkte breiter als alle anderen,
  und Logo wie rechte Knoepfe stehen dort weiter aussen als auf jeder Nachbarseite. */
/* clip statt hidden: hidden macht aus <html> einen Scrollkasten · Safari laesst
  dann beim Rollen Baender stehen, die es nicht neu zeichnet (gemeldet).
  clip haelt genauso dicht, ohne Scrollkasten und ohne Zeichenfehler. */
html{overflow-y:scroll!important;overflow-x:clip!important;scrollbar-gutter:stable}
/* Die Rollleiste bekommt eine feste Breite · eine Overlay-Leiste nimmt keinen Platz,
  eine klassische neun Punkte. Ohne diese Festlegung war Home neun Punkte breiter als
  jede Nachbarseite, und Logo wie rechte Knoepfe sassen dort sichtbar weiter aussen. */
html::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--nx-hebung-2);border-radius:var(--nx-r-pille)}
@media (hover:hover){html::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}}
/* Die Leiste ueber der Kopfzeile steht auf derselben Kante wie Logo und Inhalt ·
  sie lief ueber die volle Breite und begann 200 Punkte vor dem Logo. */
.nx-prevbar.nx-prevbar{padding-left:var(--nx-kopfrand);padding-right:var(--nx-kopfrand);box-sizing:border-box}



:root{
  /* Farben */
  --nx-akzent:#5b27e8; --nx-akzent-hell:var(--nx-text); --nx-akzent-weich:var(--nx-hebung);
  --nx-gut:#3be37a; --nx-warn:#ffb43d; --nx-kritisch:#ff6b8a;
  /* Kanonische Graustufen · Seiten-CSS verwendet nur diese Rollen. */
  --nx-grund:#101013; --nx-flaeche:#1f1f24; --nx-flaeche-2:#2d2d34;
  --nx-hebung:rgba(216,216,246,.075); --nx-hebung-2:rgba(216,216,246,.14); --nx-glas:rgba(16,16,19,.74);
  --nx-linie-subtle:rgba(255,255,255,.06); --nx-linie:rgba(255,255,255,.10);
  --nx-weiss:#fff; /* Marke und Gewaehltes: Wortmarke, Zeichen, Titel im Kopf */
  --nx-text:#edecf6; --nx-text2:#c9c9da; --nx-dim:#aaa9c0; --nx-faint:var(--nx-dim); --nx-leise:#8a899f; --nx-schwach:#a9a9b6;
  --nx-icon:var(--nx-dim);
  /* Die Leiter am Rechner steht auf ganzen Pixeln (Nr. C61, entschieden
     04.10.): 15,5 -> 16, 12,5 -> 13, 11,5 -> 12, 10,5 -> 11. Halbe Pixel
     malt der Browser je nach Bildschirm verschieden scharf. */
  --nx-typo-klein:11px; --nx-typo-meta:12px; --nx-typo-text:13px;
  --nx-typo-kartenkopf:16px; --nx-typo-abschnitt:20px; --nx-typo-seite:32px;
  /* Zwei feste Masse neben der Leiter, keine Sprossen: das Eingabefeld nie
     unter 16 (darunter zoomt iOS hinein und nicht wieder heraus) und der
     Schriftzug BETA im Kopf am Telefon. */
  --nx-schrift-feld:16px; --nx-schrift-beta:7.5px;
  --nx-live:#d81b45; --nx-gold:#ffc53d; --nx-cyan:#34e5d8;
  --bg:var(--nx-grund); --surface:var(--nx-flaeche); --surface2:var(--nx-flaeche-2);
  --line:var(--nx-linie-subtle); --line2:var(--nx-linie);
  --txt:var(--nx-text); --dim:var(--nx-dim); --faint:var(--nx-faint);
  --accent:var(--nx-akzent); --accent2:var(--nx-text); --glow:transparent;
  /* Form · die Rundung einer Karte (--nx-r-karte) steht in der Radius-Leiter
     von css/nextari-flaechen.css, die jede Seite nach dieser Datei laedt. */
  --nx-r-klein:10px; --nx-r:12px; --nx-r-rund:999px;
  /* Schrift: Nunito Sans fuer Text und Bedienung (Namen, Knoepfe, Pillen,
     Zahlen), Encode Sans Condensed nur fuer Titel (Seitentitel und
     Reihenkopf, ab 19 Punkt). */
  --nx-f-text:"Nunito Sans",system-ui,sans-serif; --nx-f-titel:"Encode Sans Condensed","Nunito Sans",sans-serif;
  /* Rhythmus */
  --nx-luft:26px;
  /* Der Reihentakt, sichtbar von Kante zu Kante. Am Rechner misst
     nxm-rhythmus.js jede Reihe und setzt sie auf --nx-reihen-takt; am
     Telefon liest der Bausatz der Reiter Games, People, Events
     (css/nextari-handyreihen.css) --nx-reihen-takt-telefon. */
  --nx-reihen-takt:65px;
  --nx-reihen-takt-telefon:40px;
  /* Bewegung: Seitenwechsel und Gedrueckt-Zustand */
  --nx-dauer-wechsel:150ms;
  --nx-druck-skala:.97; --nx-druck-dauer:90ms;
  /* Glas: Kopf und Registerleiste tragen dieselbe Flaeche */
  --nx-glas-leiste:color-mix(in srgb,var(--nx-flaeche) 72%,transparent);
  --nx-glas-weich:blur(22px) saturate(1.25);
  /* Registerleiste am Telefon (nxm-mobil.css) */
  --nx-register-h:64px;
  /* Schwebender Knopf am Telefon (Anpassen, nxm-customize.js) */
  --nx-fab:52px;
  /* Das Produktzeichen, das Peace-Piktogramm des CD, nie ein "N". Hier in
     seiner Pixelfassung: dieselbe Hand auf einem Raster von 24, jeder
     Balken drei Punkte breit, die Neigung als Treppe. So steht jede Kante
     bei 24 Punkten auf einem Geraetepixel. Die Zeichnung haelt
     werkzeug/zeichen-bauen.py (Platform Sonstiges), das daraus auch App-
     Symbol, Favicon, Teil- und Startbild macht; --pruefen vergleicht diesen
     Wert. Form unten (.nx-zeichen). */
  --nx-zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M12 0h3v4h-3zM2 3h3v3h-3zM11 4h3v7h-3zM3 6h3v4h-3zM4 10h3v3h-3zM10 11h3v5h-3zM5 13h3v3h-3zM15 14h3v3h-3zM9 17h3v1h-3zM14 17h3v4h-3zM5 18h7v1h-7zM19 18h3v3h-3zM3 19h9v1h-9zM3 20h7v1h-7zM4 21h3v3h-3zM18 21h3v2h-3z'/%3E%3C/svg%3E");
  --nx-zeichen-mass:16px;
}
/* DAS ZEICHEN · ein Kasten in der Schriftfarbe, die Hand als Maske. Ganze
  Punkte, damit das Raster auf dem Geraeteraster bleibt. */
.nx-zeichen{display:block;flex:none;width:var(--nx-zeichen-mass);height:var(--nx-zeichen-mass);
  background:currentColor;-webkit-mask:var(--nx-zeichen) center/100% 100% no-repeat;
  mask:var(--nx-zeichen) center/100% 100% no-repeat}
/* DER MARKENSATZ · Zeichen und volle Wortmarke nebeneinander, in denselben
  Massen wie im Kopf von Now (24 zu 15 Punkten). Er steht in den Marken-
  Momenten, die keinen Kopf haben, etwa auf einer leeren Seite. Die
  Wortmarke fuellt nxm-wortmarke.js in [data-nx-wortmarke]. */
.nx-markensatz{display:inline-flex;align-items:center;gap:6px;color:var(--nx-weiss);text-decoration:none;line-height:0}
.nx-markensatz [data-nx-wortmarke] svg{display:block;width:auto;height:15px}
/* DIE TELEFONLEITER · dieselben sechs Sprossen in Telefonmass: Marke 12,
  Notiz 13, Text und Bedienung 15, Kartenkopf 17, Reihenkopf 22, Seite 30.
  Bis 767 Punkte, dieselbe Schwelle wie die Registerleiste (nxm-mobil.css).
  Was in den Seiten-CSS als Token steht, wechselt hier mit; feste Zahlen
  zieht nxm-typo.js nach ihrem Rang auf diese Spalte. Pruefer: mess/leiter.py. */
@media(max-width:767px){:root{--nx-typo-klein:12px;--nx-typo-meta:13px;--nx-typo-text:15px;
  --nx-typo-kartenkopf:17px;--nx-typo-abschnitt:22px;--nx-typo-seite:30px}}

/* ---------- SEITENWECHSEL WIE IN EINER APP -------------------------------
  Der Kopf jeder Seite haelt ihr erstes Bild zurueck, bis sie gelesen und
  gestylt ist (<link rel="expect" ... blocking="render">), und meldet die
  View Transition an (@view-transition im Seitenkopf: aus dieser Datei am
  Ende des body las Chrome sie zu spaet und liess den Uebergang aus). Beides
  setzt werkzeug/geraeteraender.py. Bis dahin bleibt die alte Seite stehen,
  dann blendet sie in --nx-dauer-wechsel ueber. Der Kopf traegt einen
  eigenen Namen (css/nextari-kopf.css) und bleibt dabei stehen.
  Der Ankunfts-Schleier ist nur noch die Notbremse fuer Browser, die das
  erste Bild nicht zurueckhalten: die Familien-Stilblaetter im Kopf zeigen
  ihn, diese Datei nimmt ihn weg, sobald sie da ist. */
#nx-loader{display:none}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:var(--nx-dauer-wechsel)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}
/* AM TELEFON GLEITET DER INHALT (Nr. C84). Kopf (nx-kopf) und
  Registerleiste (nx-register) haben eigene Namen und bleiben stehen;
  nur die Seite dazwischen (root) bewegt sich: vorwaerts kommt die neue von
  rechts, die alte weicht ein Stueck nach links und blendet aus. Zurueck
  (Typ "zurueck", gesetzt von nxm-handy.js) laeuft es spiegelverkehrt.
  Ein kurzer Weg (8 Prozent) statt der ganzen Breite: es soll sich wie
  ein Wechsel anfuehlen, nicht wie eine Fahrt. Bei reduzierter Bewegung
  bleibt es beim Ueberblenden ohne Weg (Regel darueber). */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  :root{--nx-dauer-gleiten:220ms}
  ::view-transition-old(root){animation:var(--nx-dauer-gleiten) cubic-bezier(.4,0,1,1) both nxRausLinks}
  ::view-transition-new(root){animation:var(--nx-dauer-gleiten) cubic-bezier(0,0,.2,1) both nxReinRechts}
  html:active-view-transition-type(zurueck)::view-transition-old(root){animation-name:nxRausRechts}
  html:active-view-transition-type(zurueck)::view-transition-new(root){animation-name:nxReinLinks}
}
@keyframes nxRausLinks{to{opacity:0;translate:-8% 0}}
@keyframes nxReinRechts{from{opacity:0;translate:8% 0}}
@keyframes nxRausRechts{to{opacity:0;translate:8% 0}}
@keyframes nxReinLinks{from{opacity:0;translate:-8% 0}}

/* ---------- BERUEHRUNG · EIN BESITZER --------------------------------------
  Kein blaues Aufleuchten beim Tippen: stand als Kopie in 19 Seiten-CSS,
  auf Pulse fehlte es. Der Gedrueckt-Zustand stand als Kopie in 30 Seiten-CSS
  und kannte nur Knoepfe · am Telefon geben jetzt auch Karte, Zeile und
  Reiter nach. "scale" statt "transform": ein Element, das seine Lage per
  transform bekommt, springt beim Druecken nicht. Hover-Regeln stehen unter
  @media (hover:hover) (werkzeug/hover-nur-maus.py), am Telefon bleibt also
  nichts haengen. */
*{-webkit-tap-highlight-color:transparent}
:is(button,.btn,.cta,.pbtn,.chip,.evc-go,.evc-fmt,.nx-cev-join,.invacc,.invdec,.nxc-chip,.nxc-done,.pb-reset,.nx-share-btn):active{
  scale:var(--nx-druck-skala);transition:scale var(--nx-druck-dauer) ease}
@media (hover:none){
  :is(a[href],[data-href],[onclick*="location.href"],[role="button"],[role="tab"]):active{
    scale:var(--nx-druck-skala);transition:scale var(--nx-druck-dauer) ease}
  /* AUCH DAS UEBRIGE BEDIENBARE GIBT NACH (Nr. C84): Auf- und Zuklapper,
    Beschriftungen, Auswahlfelder und die Griffe der App (data-m-*), dazu
    ein Hauch Deckkraft, wie ein Knopf in iOS unter dem Finger. Die
    Reaktionen am Post (.react) haben ihren eigenen Griff und bleiben aussen. */
  :is(summary,label[for],select,[data-m-geh],[data-m-tab],[data-m-spiel],[data-m-thread],[data-nx-open],[data-nxgo]):active{
    scale:var(--nx-druck-skala);transition:scale var(--nx-druck-dauer) ease,opacity var(--nx-druck-dauer) ease}
  :is(a[href],button,[role="button"],[role="tab"],summary,label[for],[data-m-geh],[data-m-tab]):not(.react *):active{
    opacity:.82;transition:scale var(--nx-druck-dauer) ease,opacity var(--nx-druck-dauer) ease}
  :is(button,[role="button"],[role="tab"],.chip,.btn){-webkit-user-select:none;user-select:none}
}

/* ---------- KNOEPFE ----------------------------------------------------
  Drei Rollen, sonst nichts: fuehrend (eine Aktion je Flaeche), normal,
  still. Alle gleiche Hoehe, gleicher Radius, gleiche Schrift.
  Die Hoehe ist --nx-h-bedien (oben): am Schreibtisch 34, am Telefon das
  Fingermass. Hier stand 34 als Zahl, und weil diese Datei hinter
  nxm-mobil.css laedt, gewann sie am Telefon gegen das Fingermass · dort
  musste jede Regel doppelt geschrieben werden, um wieder 44 zu bekommen. */
.btn,
.ebtn,
.cbtn,
.rsvp,
.nx-set-btn,
.nxsh-go,
button.nx-fm-btn,
.nx-cl-act,
.nx-tn-act{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--nx-linie); background:var(--nx-hebung); color:var(--nx-text);
}
.joinbtn,
.buybtn,
.nx-watch{
 line-height:1;
  padding:9px 14px; min-height:var(--nx-h-bedien);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--nx-linie);
}
@media (hover:hover){.btn:hover,.joinbtn:hover,.buybtn:hover,.nx-watch:hover,.ebtn:hover,.cbtn:hover{
  border-color:rgba(255,255,255,.28);
}}
/* Fuehrend: die eine Aktion, die die Flaeche will */
.btn.pri, .btn.primary, .joinbtn, .buybtn, .nx-watch{
  background:var(--nx-akzent); border-color:transparent; color:#fff;
}
.pc-play{
  background:var(--nx-akzent); border-color:transparent; color:#fff; font-weight:800;
}
@media (hover:hover){.btn.pri:hover,.joinbtn:hover,.buybtn:hover,.nx-watch:hover{ background:var(--accent);box-shadow:inset 0 0 0 99em var(--nx-hebung); }}
/* Still: Text-Aktion ohne Kasten */
.btn.ghost,.btn.text,.nx-set-btn.ghost{ background:none; border-color:transparent; color:var(--nx-text); }
/* DER WORTKNOPF STEHT AUF DER KANTE. Ohne Kasten ist das Wort seine
  sichtbare Kante · ein seitliches Polster schob es 10 bis 14 Punkte von
  der Linie weg, auf der alles andere steht, und neben einem Kasten wirkte
  die Luecke dann doppelt so gross wie die zwischen zwei Kaesten. Auch eine
  Mindestbreite gehoert nicht an das Wort: sie zentriert ein kurzes Wort
  ("Keep") in seiner Tippflaeche und schiebt es damit wieder von der Kante.
  Die Tippflaeche waechst unsichtbar nach aussen (dasselbe Muster wie der
  Unterstrich-Reiter des Teams): je Seite eine halbe Knopfluecke, damit
  sich zwei Nachbarn im Hausabstand nie ueberdecken, und so viel mehr,
  dass sie nie schmaler als --nx-h-bedien wird. */
/* Dieselbe Gestalt haben die Geisterknoepfe, die ihre Seite oder ihr Modul
  selbst benennt (Abbrechen in Konto, Kasse und Clip-Kampagne, "Promo
  tools", die Vereinsknoepfe). Ihr Umriss faellt der Hausregel gegen
  Rahmen zum Opfer; am Telefon standen sie deshalb als Wort mit vollem
  Polster da, am Schreibtisch malte der Knopfmaler einen grauen Kasten ·
  ein Knopf in zwei Gestalten. Die Liste steht gleich in nxm-bedienung.js
  (WORT). */
.btn.ghost,.btn.text,.nx-set-btn.ghost,.nx-set-btn.danger,
.cc-btn.ghost,.cg-btn.ghost,.nx-co-btn.ghost,.nx-cck-b.ghost,.nx-vr-knopf.ghost{ padding-left:0; padding-right:0; min-width:0; position:relative; }
.btn.ghost::after,.btn.text::after,.nx-set-btn.ghost::after,.nx-set-btn.danger::after,
.cc-btn.ghost::after,.cg-btn.ghost::after,.nx-co-btn.ghost::after,.nx-cck-b.ghost::after,.nx-vr-knopf.ghost::after{
  content:""; position:absolute; top:0; bottom:0;
  left:min(calc(var(--nx-luecke-knopf) / -2), calc(50% - var(--nx-h-bedien) / 2));
  right:min(calc(var(--nx-luecke-knopf) / -2), calc(50% - var(--nx-h-bedien) / 2));
}
/* Beim Zeigen wechselt am Wort nur die Farbe. Der allgemeine Schleier
  (nxm-chrome.js, inset-Schatten auf jedem Knopf) und ein Seitengrund fuer
  .btn:hover legten sonst einen Kasten, der links und rechts genau an den
  Buchstaben klebt · das Wort hat kein Polster mehr, das ihn tragen koennte. */
@media (hover:hover){.btn.ghost:hover,.btn.text:hover,.nx-set-btn.ghost:hover,.nx-set-btn.danger:hover,.cc-btn.ghost:hover,.cg-btn.ghost:hover,.nx-co-btn.ghost:hover,.nx-cck-b.ghost:hover,.nx-vr-knopf.ghost:hover{ background:none; box-shadow:none; }}
@media (hover:hover){.btn.ghost:hover,.btn.text:hover,.nx-set-btn.ghost:hover{ color:var(--nx-text); }}
/* Zerstoerend bleibt erkennbar */
.btn.danger{ background:none; border-color:rgba(255,107,138,.45); color:var(--nx-kritisch); }

/* Karussell-Pfeile sind bewusst rund und klein · sie sind Navigation,
  keine Aktion. Nur die Form wird vereinheitlicht. */
.nx-cnav,.nxsh-nb{
 border:1px solid var(--nx-linie);
  background:rgba(12,12,18,.72); color:var(--nx-text); cursor:pointer;
}

/* ---------- PILLEN UND MARKEN ------------------------------------------
  Eine Form, drei Toene: neutral, Zustand, Achtung. Grossbuchstaben nur
  fuer Marken (SOON, DEMO, LIVE), nicht fuer Zaehler. */
.chip, .tag, .pill, .badge, .nx-pill, .nxsh-type, .spill{
 
  ;
  white-space:nowrap}
.nx-demo-schild{display:inline-flex; align-items:center; gap:6px;
 
  border-radius:var(--nx-r-rund); padding:4px 10px; line-height:1.2;
  ; color:var(--nx-schwach); background:transparent;
  white-space:nowrap}.nx-demo-schild{letter-spacing:var(--nx-sperrung)}
.chip.on,.chip.aktiv,.pill.on{ color:#fff; border-color:var(--nx-linie); background:var(--accent); }
.pill.live,.tag.lv,.nxp-live,.chip.live{ color:#fff; border-color:transparent; background:#e91916;  }.pill.live,.nxp-live,.chip.live{letter-spacing:var(--nx-sperrung)}
.pill.gut,.chip.gut{ color:var(--nx-gut); border-color:rgba(59,227,122,.4); background:rgba(59,227,122,.08); }

/* ---------- REIHEN-KOEPFE UND NOTIZEN ----------------------------------
  Eine Ueberschriftsart je Ebene · der Gruender-Befund "viel zu viele
  Ueberschriftsarten" kam daher, dass jede Seite ihre eigene setzte. */
.shead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
/* EIN KOPF, EINE LINIE. Der Kopf einer schlichten Reihe (Titel, Notiz,
  Filter, "Alle ansehen") rueckt um die Innenlinie ein; die Karten
  darunter bleiben auf der Kante. Gemessen standen diese Koepfe auf 34,
  jeder Kopf in einer Flaeche und das Logo auf 58 (am Telefon 14 gegen
  30). Der Griff einer zugeklappten Reihe am Telefon (nxm-mobil-falten.js)
  ist derselbe Kopf, ebenso die Filterleiste direkt unter einem Kopf
  (.pubhead, Genre-Reiter der EU-Regale), der zweite Kopf einer Reihe
  (.nx-pmedia-h, "Von Medienpartnern") und ihre Notiz (.merchnote).
  Diese Datei laedt nach den Seiten-CSS: ein Polster, das eine Seite auf
  dieselbe Klasse schreibt, gilt links nicht mehr.
  Dieselbe Linie gilt fuer den Text des Auftakts auf Games, People und
  Events (.nx-auf-li, das Bild darueber bleibt randlos) und fuer die
  Begruessung auf Home: gemessen standen beide auf der Kante (34, am
  Telefon 14), jeder Reihenkopf darunter auf 58 (30). */
/* In einer Flaeche steht der Kopf schon auf der Innenlinie · ihr Polster
  ist der Einzug, ein zweiter waere doppelt. */
.nx-charea,.nx-pbox-top,.nxpotm,.wg,.panel,.nx-panel,.card,.block{ --nx-reihenkopf-einzug:0px; }
.shead h3{ font-size:22px; line-height:1.2; color:#fff; }
.shead .note{ font-size:var(--nx-typo-meta); font-weight:400; color:var(--nx-schwach); }
.seeall{ margin-left:auto; font-size:var(--nx-typo-meta); font-weight:700;
  color:var(--nx-text); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }

/* ---------- KARTEN -----------------------------------------------------
  Eine Kartenform: Radius 14, feine Linie, Flaechenfarbe. */
.card,.gcard,.evcard,.nxsh-card,.nx-subcard,.newscard,.nx-cevcard{
  border-radius:var(--nx-r-karte); border:1px solid var(--nx-linie-subtle);
  background:linear-gradient(180deg,var(--nx-flaeche),rgba(16,16,25,.85));
  overflow:hidden;
}

/* ---------- ERKLAERZEILEN ----------------------------------------------
  "mal erklaerende Texte, mal nicht" · wo eine steht, sieht sie gleich aus. */


/* ---------- DURCHSETZUNG ----------------------------------------------
  Die Seiten tragen eigene Regeln mit hoeherer Spezifitaet (592 Bloecke).
  Damit die Form trotzdem EINE ist, werden GENAU DREI Eigenschaften
  durchgesetzt: Radius, Schriftfamilie, Schriftschnitt. Groesse, Polster
  und Layout bleiben bei den Seiten · dort haengt ihr Aufbau dran, und
  ein !important darauf hat heute schon einmal Reihen zerschossen. */

.btn,
.nx-set-btn,
.nx-cl-act,
.nx-tn-act,
button.nx-fm-btn,
.nxsh-go,
.nx-gm-act,
.nx-pt-btn,
.nx-wl,
.nx-poll-opt,
.nxdk-x,
.nxk-act button,
.nx-e3r .ac button,
.nxz-act button,
.pub button{
  border-radius:var(--nx-r-klein)!important;
  font-family:var(--nx-f-text)!important;
  font-weight:700;
  font-size:var(--nx-typo-text)!important;
}
.joinbtn,
.buybtn,
.nx-watch{
  font-family:var(--nx-f-text);
  font-size:var(--nx-typo-text);
}
.ebtn,
.cbtn,
.rsvp{
  font-family:var(--nx-f-text);
  font-weight:700;
  font-size:var(--nx-typo-text)!important;
}
.btn.pri,.btn.primary,.joinbtn,.buybtn,.nx-watch{ font-weight:800!important; }

.chip,.tag,.pill,.badge,.nx-pill,.nxsh-type,.spill{
  border-radius:var(--nx-r-rund)!important;
  font-family:var(--nx-f-text)!important;
}

.shead h3{ font-family:var(--nx-f-titel); font-weight:800; }
.seeall{ font-family:var(--nx-f-text); }
.shead .note{ font-family:var(--nx-f-text)!important; }



.nx-prevbar,#nx-prevbar{ align-items:center; }
.nx-prevbar a,.nx-prevbar button,.nx-prevbar span,
#nx-prevbar a,#nx-prevbar button,#nx-prevbar span{
  font-family:var(--nx-f-text);
  font-size:var(--nx-typo-meta);
  line-height:26px;
  letter-spacing:.03em;
}
.nx-prevbar a,.nx-prevbar button,#nx-prevbar a,#nx-prevbar button{
  height:26px; padding:0 7px; display:inline-flex;
  align-items:center; border-radius:var(--nx-r-klein);
}
/* Die Gruppen-Etiketten (SWITCH VIEW, BUSINESS, ADMIN) bleiben kleiner,
  sie sind Beschriftung und kein Ziel. */
.nx-prevbar .nxpv-lbl,#nx-prevbar .nxpv-lbl{ font-size:9px; opacity:.7; padding:0 4px; }



button, input[type="button"], input[type="submit"]{
  font-size:var(--nx-typo-text);
  font-weight:700;
  border-radius:var(--nx-r-klein);
}
/* Bewusste Ausnahmen: runde Bedienelemente bleiben rund. */
/* Avatare und Bild-Knoepfe bleiben kreisrund. */
button[class*="av"],button[class*="ava"]{ border-radius:50%; }
/* Der Reiter einer Leiste (data-nx-leiste, Gruppe und Team) ist kein
  Kasten · sein Zustand ist der Strich unter dem Wort. Mit der Rundung
  eines Knopfes bog sich der Strich an beiden Enden nach oben. */
:where([data-nx-leiste]) button{ border-radius:0; }


/* ---------- EIN RADIUS FUER ALLE ECKIGEN KNOEPFE -----------------------
  Nach der Grundform blieben r8 und r12 uebrig (Seiten-Regeln mit hoeherer
  Spezifitaet). Radius ist layout-neutral · hier ist ein !important
  ungefaehrlich und beendet die Streuung. Rund bleibt rund: was in der
  Ausnahmeliste steht, wird nicht angefasst. */
/* .nx-status gehoert dazu: der Statusknopf der Kopfleiste ist eine PILLE
  (999px), nicht ein eckiger Knopf. Die Vereinheitlichung hat ihn auf 10px
  gezogen, waehrend seine Beschriftung eine eigene runde Pille bekam · zwei
  Formen ineinander, gemessen  Rund bleibt rund. */
button:not(.nx-cnav):not(.nxsh-nb):not(.czfab):not(.btn.icon):not(.nxsh-cbtn):not(.nxdk-x):not([class*="-fab"]):not([class*="round"]):not([class*="av"]):not(.nx-covbtn):not(.nx-status):not(:where([data-nx-leiste] *)),
a.btn:not(.icon),.joinbtn,.buybtn,.nx-watch,.ebtn,.cbtn,.rsvp{
  border-radius:var(--nx-r-klein)!important;
}



.nxsh-nb,.nxsh-nb.prev,.nxsh-nb.next{ border-radius:var(--nx-r-rund); }
.nxach-card{ font-family:var(--nx-f-text); }
.nx-pf-fold{ font-family:var(--nx-f-text); font-weight:700; }



.nx-stz-k{ display:flex; flex-direction:column; min-height:112px; }



.nx-cmp{ width:100%; border-collapse:collapse; }
.nx-cmp th{ font-family:var(--nx-f-text); font-size:9px; font-weight:800; 
   color:var(--nx-schwach); text-align:left; padding:12px 18px; }
.nx-cmp td{ padding:15px 18px; vertical-align:top; font-family:var(--nx-f-text); font-size:var(--nx-typo-text);
  line-height:1.5; color:var(--nx-text2); border-top:1px solid var(--nx-linie-subtle); }
.nx-cmp td:first-child{ white-space:nowrap; }
.nx-cmp td b{ font-family:var(--nx-f-text); font-weight:700; color:#fff; }
.nx-cmp td:last-child{ color:var(--nx-text); }
@media (hover:hover){.nx-cmp tbody tr:hover td{ background:var(--nx-hebung); }}

/* ---------- PARTNER-KARTEN ---------------------------------------------
  Vier Karten mit Haken-Listen · sie standen in unterschiedlicher Hoehe und
  liefen unten aus dem Blick. Gleiche Rolle, gleiche Hoehe, ein Haken-Ton. */
.nxp3-acard{ display:flex; flex-direction:column; height:100%; }
.nxp3-r{ padding:13px 0; border-top:1px solid var(--nx-linie-subtle); }
.nxp3-r:first-of-type{ border-top:0; }
.nxp3-r b{ font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:700; color:#fff; display:block; }
.nxp3-r span{ font-family:var(--nx-f-text); font-size:var(--nx-typo-text); line-height:1.5; color:var(--nx-schwach); display:block; margin-top:4px; }



.shead > div:has(> span + b){ display:flex; flex-direction:column-reverse; gap:4px; }
.shead b[data-nx-weg]{ font-family:var(--nx-f-titel); font-size:22px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:9px; }
.shead > div > span:first-child{ font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); color:var(--nx-schwach); }



.nx-stz,.stats,.statgrid,.os-grid,.nxp3-aud,[class*="statrow"]{ align-items:stretch; }
.stat,.os-l{ display:flex; flex-direction:column; height:100%; }
.stat .s,.stat > svg:last-child,.os-l span:last-child{ margin-top:auto; }





/* DIE DEMO-MARKE IST KEINE KARTE · sie steht als letztes Kind im Raster und
  wurde von dieser Abfrage fuer eine fuenfte Kennzahl gehalten. Auf der
  Konsolen-Uebersicht lief das Raster dadurch auf fuenf Spalten, obwohl nur
  vier Karten da sind: rechts blieb ein Loch von 226 auf 112 Punkten. */
@media (min-width:1041px){
  .stats:has(> :last-child:nth-child(5):not(.nx-demo-tag):not(.nx-demopill)){ grid-template-columns:repeat(5,minmax(0,1fr)); }
}



.os-grid,.stats,.nx-benefit-grid,.nx-rv,.nxp3-aud,
.managegrid,.stcreators,.nx-stz{ grid-auto-rows:1fr; }
/* Gleich hohe Zeilen sind fuer Karten gedacht. Traegt das Raster die
  Demo-Marke, bekommt auch deren eigene Zeile Kartenhoehe · gemessen ein
  152 Punkte hoher leerer Streifen mit einer einzigen Pille darin. Karten in
  derselben Zeile sind ohnehin gleich hoch. */
.os-grid:has(> .nx-demopill),.stats:has(> .nx-demopill),
.os-grid:has(> .nx-demo-tag),.stats:has(> .nx-demo-tag),
.nx-benefit-grid:has(> .nx-demo-tag),.nx-rv:has(> .nx-demo-tag),
.nxp3-aud:has(> .nx-demo-tag),.managegrid:has(> .nx-demo-tag),
.stcreators:has(> .nx-demo-tag),.nx-stz:has(> .nx-demo-tag){ grid-auto-rows:auto; }


.os-grid > *:last-child:nth-child(3n+1),
.nx-benefit-grid > *:last-child:nth-child(3n+1){grid-column:1 / -1}

/* Zwei angeheftete Karten nebeneinander (Creator-Profil) standen 474 und
  457px hoch · dieselbe Rolle, eine Zeile, also eine Hoehe. */
.nx-ss-pinrow{ align-items:stretch; }
.nx-ss-pinrow > .nx-ss-card{ height:100%; }
/* NICHT dabei: .nx-supp-grid auf der Support-Seite. Dort stehen sieben
  Karten in drei Spalten, die siebte steht allein in der letzten Reihe und
  ist mit 211px absichtlich groesser · sie ist der Abschluss-Aufruf, kein
  verrutschter Zwilling. Alle sieben auf 211px zu ziehen haette sechs
  Karten 94px Leerraum gegeben. */


/* ---------- EDITORZEILEN: EIN RAHMEN, NICHT DREI ------------------------
  Die Redaktionslisten (Store-Channel im Publisher Studio, Collections im
  Creator Studio) rahmten die Zeile UND beide Eingabefelder darin · drei
  Kaesten uebereinander, deshalb wirkte die Flaeche wie ein Formular mit
  lauter leeren Feldern statt wie eine Liste mit Inhalten.

  Im Ruhezustand ist der Text einfach Text. Dass man ihn aendern kann,
  zeigt sich beim Zeigen und beim Anfassen · da erscheint Grund und Rahmen.
  Die Funktion bleibt unveraendert, es sind dieselben Felder.

  Die Seitenregel heisst .nx-ped .nx-ced-fld input und wiegt schwerer als
  eine Regel aus dieser Datei · deshalb Longhands mit Vorrang, damit die
  Entscheidung nicht an der Reihenfolge der Dateien haengt. */
.nx-ced-fld input{ background-color:transparent !important; border-color:transparent !important;
  transition:background-color .12s ease, border-color .12s ease; }
@media (hover:hover){.nx-ced-it:hover .nx-ced-fld input{ background-color:var(--nx-hebung); border-color:var(--line,#23232f); }}
.nx-ced-it .nx-ced-fld input:focus{ background-color:var(--nx-hebung); border-color:var(--accent); outline:none; }



.two-col:has(> .card),.two-col:has(> .nx-card){ align-items:stretch; }
.two-col > .card{ display:flex; flex-direction:column; }



.nx-prevbar > *,#nx-prevbar > *{
  padding-top:0; padding-bottom:0;
  height:26px; box-sizing:border-box; }



.card:has(> .grid),.card:has(> .headr),.card:has(> * > .headr){ overflow-x:auto; }




/* Karten-Karussell fuer Erfolge */
/* Fuenf Karten fuellen die 1232er Spalte genau: 5 x 233 + 4 x 16 = 1229. */
.nx-erg-carou{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; padding-bottom:2px; }
.nx-erg-carou::-webkit-scrollbar{ display:none; }
.nx-erg-k{ flex:0 0 233px; max-width:233px; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease; }
@media (hover:hover){.nx-erg-k:hover{ border-color:rgba(255,255,255,.22); transform:translateY(-2px); }}
.nx-erg-cover{ height:108px; background-size:cover; background-position:center;
  background-color:var(--nx-flaeche); position:relative; display:grid; place-items:center; }
/* Die Seltenheit ist die Pointe · sie sitzt auf dem Bild, wo sie zuerst
  gesehen wird, mit dunklem Grund, damit sie auf hellem Artwork steht. */
.nx-erg-rar{ position:absolute; left:8px; bottom:8px;
  font-family:var(--nx-f-text); font-size:var(--nx-typo-klein); font-weight:800; 
  background:rgba(8,8,13,.82); border-radius:var(--nx-r-rund);
  padding:3px 8px; white-space:nowrap; }
.nx-erg-mono{ font-family:var(--nx-f-titel); font-size:22px; font-weight:800; color:var(--nx-leise); }
.nx-erg-body{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:3px; }
.nx-erg-t{ font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:700; color:var(--nx-text);
  line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.nx-erg-w{ font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); color:var(--nx-schwach); }
.nx-erg-w b{ color:var(--nx-text2); font-weight:700; }
.nx-erg-b{ font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); line-height:1.4;
  color:var(--nx-schwach); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; }

/* Ergebnis-Liste (Paarungen) */
.nx-erg-liste{ display:flex; flex-direction:column; }
.nx-erg-z{ display:flex; align-items:center; gap:12px; padding:10px 0;
  border-top:1px solid var(--nx-linie-subtle); cursor:pointer;
  transition:background-color .14s ease; }
.nx-erg-z:first-child{ border-top:0; }
@media (hover:hover){.nx-erg-z:hover{ background:var(--nx-hebung); }}
.nx-erg-cov{ flex:none; width:52px; height:30px; border-radius:var(--nx-r-marke);
  background-size:cover; background-position:center; background-color:var(--nx-flaeche); }
.nx-erg-leer{ display:grid; place-items:center; font-family:var(--nx-f-text);
  font-size:var(--nx-typo-meta); font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--nx-flaeche),#17111f); }
.nx-erg-pokal{ background:linear-gradient(135deg,#3d2f14,#1f1a11); color:var(--nx-warn); }
.nx-erg-tx{ flex:1; min-width:0; font-family:var(--nx-f-text); font-size:var(--nx-typo-text);
  line-height:1.4; color:var(--nx-text2); }
.nx-erg-tx b{ font-family:var(--nx-f-text); font-weight:700; color:var(--nx-text); }
.nx-erg-s{ display:block; font-size:var(--nx-typo-meta); color:var(--nx-schwach); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-erg-p{ flex:none; font-family:var(--nx-f-text); font-size:var(--nx-typo-klein); font-weight:700;
   border:1px solid var(--nx-linie); border-radius:var(--nx-r-rund);
  padding:4px 10px; white-space:nowrap; }
.nx-erg-score{ color:var(--nx-text); font-variant-numeric:tabular-nums; }


.nx-erg-quellen{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0 0 12px; }
.nx-erg-q{display:inline-flex; align-items:center; gap:6px;
  font-family:var(--nx-f-text); font-size:var(--nx-typo-klein); font-weight:700;
  ; border-radius:var(--nx-r-rund);
  padding:4px 10px 4px 5px; color:var(--nx-text2); white-space:nowrap;background:var(--nx-hebung)}
.nx-erg-q i{ width:16px; height:16px; border-radius:var(--nx-r-marke); display:grid; place-items:center;
  font-style:normal; font-size:var(--nx-typo-klein); font-weight:800; color:#fff; flex:none; }
/* Geplant, nicht gelogen: grau, gedimmt, mit Wort. */
/* Geplant, nicht gelogen: gedimmte Flaeche statt gestrichelter Kante. */
.nx-erg-q.soon{ color:var(--nx-schwach); background:var(--nx-hebung); }
.nx-erg-q.soon i{ filter:grayscale(1); opacity:.55; }
.nx-erg-q.soon span.w{ font-size:var(--nx-typo-klein); letter-spacing:.1em; opacity:.8; }

/* Der ehrliche Leerzustand: kein Kasten voller Nichts, sondern eine Zeile,
  die sagt was fehlt und den Weg dorthin anbietet. */
.nx-erg-leerzeile{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 16px; ; border-radius:var(--nx-r-karte);
  background:var(--nx-hebung)}
.nx-erg-leerzeile span{ flex:1; min-width:260px; font-family:var(--nx-f-text);
  font-size:var(--nx-typo-text); line-height:1.5; color:var(--nx-schwach); }



.nx-soc-liste{ display:flex; flex-direction:column; }
.nx-soc-z{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid var(--nx-linie-subtle); text-decoration:none; color:inherit;
  transition:background-color .14s ease; }
.nx-soc-z:first-child{ border-top:0; }
@media (hover:hover){.nx-soc-z:hover{ background:var(--nx-hebung); }}
@media (hover:hover){.nx-soc-z:hover .nx-soc-go{ color:var(--nx-text); }}
.nx-soc-q{ flex:none; width:30px; height:30px; border-radius:var(--nx-r-bedien); display:grid;
  place-items:center; background:#ff4500; color:#fff;
  font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:800; }
.nx-soc-tx{ flex:1; min-width:0; }
.nx-soc-tx b{ display:block; font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:700;
  color:var(--nx-text); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nx-soc-s{ display:block; font-family:var(--nx-f-text); font-size:var(--nx-typo-meta);
  color:var(--nx-schwach); margin-top:3px; }
.nx-soc-go{ flex:none; font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); font-weight:700;
  color:var(--nx-schwach); transition:color .14s ease; }



.nx-kul-carou{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; padding-bottom:2px; align-items:stretch; }
.nx-kul-carou::-webkit-scrollbar{ display:none; }
.nx-kul-k{ flex:0 0 268px; max-width:268px; padding:13px 14px 12px;
  display:flex; flex-direction:column; gap:9px; }
.nx-kul-kopf{ display:flex; align-items:center; gap:8px; }
.nx-kul-mark{ flex:none; width:24px; height:24px; border-radius:var(--nx-r-marke); display:grid;
  place-items:center; background:#ff4500; color:#fff;
  font-family:var(--nx-f-text); font-size:var(--nx-typo-klein); font-weight:800; }
.nx-kul-name{ font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:700;
  color:var(--nx-text); }
.nx-kul-sub{ margin-left:auto; font-family:var(--nx-f-text); font-size:var(--nx-typo-meta);
  color:var(--nx-schwach); }
.nx-kul-erste{ text-decoration:none; color:inherit; display:block; }
.nx-kul-erste b{ display:block; font-family:var(--nx-f-text); font-size:var(--nx-typo-text);
  font-weight:700; line-height:1.35; color:var(--nx-text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (hover:hover){.nx-kul-erste:hover b{ color:var(--nx-text); }}
.nx-kul-meta{ display:block; font-family:var(--nx-f-text); font-size:var(--nx-typo-meta);
  color:var(--nx-schwach); margin-top:4px; }
.nx-kul-rest{ display:flex; flex-direction:column; gap:6px; margin-top:auto;
  padding-top:9px; border-top:1px solid var(--nx-linie-subtle); }
.nx-kul-rest a{ font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); line-height:1.4;
  color:var(--nx-schwach); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (hover:hover){.nx-kul-rest a:hover{ color:var(--nx-text2); }}



.nx-yt-carou{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; padding-bottom:2px; align-items:stretch; }
.nx-yt-carou::-webkit-scrollbar{ display:none; }
.nx-yt-k{ flex:0 0 252px; max-width:252px; text-decoration:none; color:inherit;
 }
/* Wenige Karten wachsen, bis die Reihe voll ist (vier auf 1232: je 297);
  mehr Karten bleiben bei 252 und rollen weiter. */
.nx-yt-carou .nxsh-card{ flex:1 1 252px; min-width:252px; max-width:320px; }
@media (hover:hover){.nx-yt-k:hover{ border-color:rgba(255,255,255,.22); transform:translateY(-2px); }}
@media (hover:hover){.nx-yt-k:hover .nx-yt-play{ background:#e5322d; }}
.nx-yt-bild{ display:block; height:142px; background-size:cover; background-position:center;
  background-color:var(--nx-flaeche); position:relative; }
/* Der Abspielknopf sagt, dass hier ein Video liegt · in YouTubes Rot, weil
  die Herkunft zur Wahrheit gehoert (Router-Prinzip: die Quelle wird
  genannt, nicht verschleiert). */
.nx-yt-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:31px; border-radius:var(--nx-r-bedien); background:rgba(200,30,30,.92);
  color:#fff; font-size:13px; display:grid; place-items:center;
  transition:background-color .15s ease; }
.nx-yt-body{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:4px; }
.nx-yt-t{ font-family:var(--nx-f-text); font-size:var(--nx-typo-text); font-weight:700; line-height:1.32;
  color:var(--nx-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.nx-yt-m{ font-family:var(--nx-f-text); font-size:var(--nx-typo-meta); color:var(--nx-schwach); }



.gcover:has(.cmark) .nx-wl{ top:38px; }
.gcover:has(.cmark.free):has(.cprice) .cmark.free{ display:none; }

/* NUR FUER VORLESEWERKZEUGE UND SUCHMASCHINEN.
  Neun Hauptseiten hatten keine Seitenueberschrift · dort, wo das Auge das
  Logo sieht, stand fuer ein Vorlesewerkzeug nichts. Die Ueberschrift steht
  jetzt da, ohne einen Pixel zu verschieben: sie wird aus dem Bild genommen,
  bleibt aber im Dokument und im Vorlesefluss. Kein display:none · das
  entfernt sie auch dort. */
.nx-nurlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;font-size:var(--nx-typo-seite)}

/* DIE VORSCHAULEISTE MUSS AUF DEM TELEFON ERREICHBAR BLEIBEN.
  Gemessen bei 390 Punkten auf allen 87 Seiten: die Leiste ist fest
  positioniert, genau bildschirmbreit und schneidet mit overflow:hidden ab ·
  vier ihrer acht Wege lagen dahinter und liessen sich weder sehen noch
  wischen (scrollLeft blieb 0). Creator Studio, Advertiser Studio, Event
  Studio und Console waren am Telefon nicht erreichbar.
  Sie darf jetzt waagerecht wischen. Am Schreibtisch aendert sich nichts:
  dort passt sie ohnehin, und ohne Ueberlauf erscheint auch keine Leiste. */
@media(max-width:900px){
  .nx-prevbar{overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    justify-content:flex-start}
  .nx-prevbar::-webkit-scrollbar{display:none}
  .nx-prevbar > *{flex:none}
  /* Die Wegegruppe darf nicht gequetscht werden: sie stand auf flex:1 1 auto
  und wurde damit auf 93 Punkte gedrueckt, waehrend sie 631 Punkte Inhalt
  traegt. Ein 93 Punkte breites Wischfenster ist keine Navigation. Sie
  behaelt ihre Breite, und die LEISTE wischt · einmal, fuer alles. */
  .nx-prevbar .pb-switch{flex:0 0 auto;overflow:visible;width:auto}
}

/* Kennzahlenreihen der Vorschau tragen dieselbe Marke wie die Demo-Karten. */
.stats.nx-nur-demo{position:relative;margin-top:22px}
.stats.nx-nur-demo::before{content:"Demo data";position:absolute;left:2px;top:-17px;font:800 9px var(--nx-f-text);letter-spacing:var(--nx-sperrung);text-transform:uppercase;color:var(--dim)}

/* Werkzeugseiten (Studio, Konsole, Agentur, Publisher, Event Studio) auf
  schmalen Schirmen: die Seitenleiste wird zur Reihe aus Chips ueber dem
  Inhalt, der Inhalt bekommt die volle Breite. Ohne diese Regel standen
  Leiste (252px) und Inhalt nebeneinander in 390px. */
@media(max-width:980px){
  .app{flex-direction:column;height:auto;min-height:0;overflow:visible}
  
  .app > .side .railfoot,.app > .side .side-sec,.app > .side .nx-navsec{width:100%;margin:4px 0 2px}
  .app > .side .side-nav{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .app > .side .side-nav a{display:inline-flex!important;align-items:center;padding:6px 11px;margin:0;border:1px solid rgba(255,255,255,.14);
    border-radius:var(--nx-r-pille);font-size:12px;white-space:nowrap;background:var(--nx-hebung)}
  
  .app > .main{width:100%;max-width:none;margin:0;overflow:visible;padding:16px 14px 48px}
}

/* Werkzeugseiten, schmal · Nachtrag: die Leiste als Chips in einer Reihe, Kopfknoepfe und Reiter brechen um. */
@media(max-width:980px){
  .app > .side .side-nav{flex-direction:row;padding:0}
  .app > .side .side-nav a{width:auto;flex:0 0 auto}
}
@media(max-width:600px){
  .app .head{flex-wrap:wrap}
  .app .head-act{flex:1 1 100%;flex-wrap:wrap;margin-top:8px;align-self:auto}
  .app .tabs{flex-wrap:wrap;gap:6px}
  .app .nx-e3r{flex-wrap:wrap}
  .app .nx-e3r .ac{flex-wrap:wrap}
}

/* Werkzeugseiten, schmal · Nachtrag 2: Gruppenlabels der Konsolenleiste als eigene Zeile, der Konsolen-Hinweis klebt nicht ueber der Kopfleiste. */
@media(max-width:980px){
  .app > .side .side-glabel{width:100%;margin:6px 0 2px}
  #nxKTuer{position:static}
}

/* Reiter-Seiten: eine Seite je Aufgabe, die frueheren Seiten als Reiter. */
.nx-reiter button{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--dim);background:var(--nx-hebung);border:1px solid rgba(255,255,255,.12);border-radius:var(--nx-r-pille);padding:7px 14px;cursor:pointer}
.nx-reiter button.on{color:#fff;border-color:var(--nx-linie);background:var(--accent)}
.nx-reiter-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 16px}
.nx-reiter-kopf .sub{margin:0}
.nx-reiter-kopf .head-act{flex:none;display:flex;gap:8px;align-items:center}
@media(max-width:600px){.nx-reiter-kopf{flex-wrap:wrap}.nx-reiter-kopf .head-act{flex:1 1 100%}}

/* Der Konsolen-Hinweis steht im Fluss der Seite, nicht ueber der Kopfleiste. */

/* Demo-Kennzeichen in Rastern: eine eigene Zeile, keine Zelle */
/* flex-basis:100% meint die volle Zeilenbreite. In einer Karte, die ihre
  Kinder untereinander stellt, ist die Hauptachse aber die Hoehe · die Marke
  wurde 140 statt 19 Punkte hoch und schob die Ueberschrift 159 Punkte unter
  die Kartenkante. Die Deckelung auf die Inhaltshoehe gilt in beide
  Richtungen. */
.nx-demo-tag{grid-column:1/-1;flex-basis:100%;width:100%;box-sizing:border-box;
  max-height:max-content}
/* EINMAL SAGEN · trug ein Kasten die Marke oben als Zeile UND unten noch
  einmal als Pille, stand dasselbe Wort zweimal in einem Kasten. */
/* Zwei Marken fuer dieselbe Aussage in einem Kasten: die graue Zeile
  "DEMO DATA" oben und die helle Pille "DEMO" unten · gemessen 35 bis 152
  Punkte auseinander, in einem Blick, viermal auf einer Seite. Wer die Zeile
  traegt, braucht die Pille nicht. */
:has(> .nx-demo-tag) > .nx-demopill,
:has(> .nx-demo-tag) > * > .nx-demopill{display:none}
/* Dieselbe Marke als kleine Pille: sie steht als letztes Kind im Raster und
  darf dort keine Kartenspalte besetzen. */
.nx-demopill{grid-column:1/-1;justify-self:start;align-self:start;max-height:max-content}
.nx-step-n:empty{display:none}
#nxQuests .cardbody{padding:4px 16px 14px}


.nx-attn-s > .nx-demo-tag{margin-bottom:6px}

.nx-reiter-kopf .nx-studiokicker{display:none}

/* Werkzeugseiten, schmal · Nachtrag 3: aktiver Chip lesbar, Gruppenzeilen weg, Kopf-Chip einzeilig, Vorschauleiste scrollt statt zu ueberlaufen. */
@media(max-width:980px){
  .app > .side .side-nav a.on,.app > .side .side-nav a.on *{color:#fff}
  .app > .side .side-nav a.on{background:var(--accent)!important;border-color:var(--nx-linie)}
  .app > .side .side-glabel{display:none}
  .nx-conbar .nx-cb-rl{display:none}
  .nx-conbar .nx-cb-nm{white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:640px){
  .nx-prevbar{overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nx-prevbar::-webkit-scrollbar{display:none}
  .nx-prevbar > *{flex-shrink:0}
  .nx-conbar .nx-cb-back span{display:none}
  #nxKantWart{flex-wrap:wrap;gap:6px 10px!important}
  #nxKTuer{flex-wrap:wrap}
  
}


@media(max-width:980px){.app > .side .side-sec{display:none}}

/* RUHE AUF BILDFLAECHEN · gilt auf jeder Seite.
  Die Flaechen tragen ihren Schleier nur unten, damit Text lesbar wird ·
  das obere Bilddrittel stand in voller Saettigung. Gedaempft wartet es,
  bis jemand hinsieht. Namen aus der Messung

  SCHLEIER STATT FILTER. Bis heute stand hier
  filter:brightness(.74) · und ein CSS-Filter faerbt das GANZE Element ein,
  die Schrift darauf eingeschlossen. Gemessen: 191 Flaechen auf Games, 61 auf
  People tragen Text, und der war ueberall 26 % dunkler als gedacht · vom
  Auftakt-Titel bis zur Kennzeichnung "DoktorFroid presents · AD" auf der
  Eventseite, die dadurch kaum noch zu lesen war. Eine Kennzeichnung, die
  man nicht lesen kann, ist keine.
  Ein innen liegender Schatten legt sich ueber den Hintergrund und UNTER den
  Inhalt: das Bild wird genauso ruhig, die Schrift bleibt, wie sie gemeint
  ist. Er folgt ausserdem dem Eckradius, was der Filter auch tat.

  EIN BESITZER FUER DEN WERT. Der Schleier ist ein Token (--nx-schleier,
  --nx-schleier-kopf). css/nextari-gemeinsam-haupt.css legt ihn zusaetzlich
  auf die Cover in .gcard, .lk-cov und .nx-gf-k · mit eigenem Gewicht und
  an ihrem Platz in der Ladefolge, denn dort verlieren sie gegen die
  Seitenregeln (der Hebe-Uebergang der Spielkarten auf Games). Die Kopie
  der uebrigen Namen ist dort weg.

  KEIN SCHLEIER, AUCH AM SCHREIBTISCH (Entscheidung Artwork, Rechner wie
  Telefon). Ein Telefon kennt kein Zeigen: der Schleier, der am
  Schreibtisch beim Darueberfahren faellt, blieb dort immer liegen. Seit
  der Rechner dem Telefon folgt, sind beide Schleier-Tokens bei jeder
  Breite leer, das Bild steht in voller Farbe. Die Regeln unten bleiben
  stehen: bekommt das Token wieder einen Wert, gilt er an einer Stelle
  fuer alle Bildflaechen, samt Aufhebung beim Zeigen. Die unteren
  Verlaeufe hinter der Schrift gehoeren nicht hierher und bleiben. */
:root{--nx-schleier:0 0 #0000;--nx-schleier-kopf:0 0 #0000}
.gcover,
.nxsh-cover,
.lthumb,
.nx-pb-grund,
.nx-yt-bild,
.lib-cov,
.cov.nx-has-art,
.mtile,
.fgcover,
.pava,
.nx-ev3-art,
.evb,
.nx-lvl-c,
.nx-kul-k,
.gcov,
.chcard,
.nx-evr-b,
.ftile.nx-has-art,
.nx-cevcard > div:first-child,
.nx-gf-k,
.nx-auf,
.banner,
.grp-cover,
.nx-ss-thumb{
  box-shadow:var(--nx-schleier);
}
/* Die Rangposter tragen ausserdem ihren eigenen Wurf · beide zusammen. */
.t10poster{box-shadow:var(--nx-schleier),
  0 14px 40px -10px rgba(0,0,0,.7)}
/* MARKENMATERIAL WIRD NICHT ANGEFASST · das Mediakit einer Marke gehoert
  ihr. Ein Motiv abzudunkeln waere dieselbe Art Eingriff wie ein Logo
  einzufaerben, und die Markenregel verbietet beides. */
.nxfn-motiv,.nxfn-kasten,.nxfn-kasten img,[data-nx-marke] img{filter:none}
/* Beim Zeigen wieder voll · das Bild verliert nichts. */
@media (hover:hover){.gcard:hover .gcover,.lk:hover .gcover,a:hover > .gcover,.nxsh-card:hover .nxsh-cover,.lcard:hover .lthumb,.libcard:hover .lib-cov,.libcard:hover .cov,.mtile:hover,.fgcover:hover,.nx-kul-k:hover,.nx-lvl-c:hover,.ftile.nx-has-art:hover,.nx-cevcard:hover > div:first-child,.nx-evr-k:hover .nx-evr-b,.chcard:hover,.nx-gf-k:hover,.grp-cover:hover,.nx-ss-thumb:hover{box-shadow:none}}
@media (hover:hover){.t10poster:hover{box-shadow:none}}
/* Der grosse Kopf einer Detailseite bleibt ruhig · dort steht Text darauf. */
.heroBg,.packshot{box-shadow:var(--nx-schleier-kopf)}
@media (prefers-reduced-motion:reduce){
  .gcover,.lib-cov,.mtile,.fgcover,.nx-evr-b{transition:none}
}

/* DIE KOPFLEISTE gehoert css/nextari-kopf.css · Glas, Hoehe, Kanten und
  Knoepfe stehen dort und nirgends sonst. */
/* Die Vorschauleiste ueber dem Kopf ist ebenfalls Glas. */
.nx-prevbar{
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
}

/* ==========================================================================
  DIE SEITENBREITE GILT EINMAL · GANZ AUSSEN

  --nx-breite ist calc(100% - 68px) und steht auf jedem Kasten der obersten
  Ebene. Sitzt ein Kasten IN einem Kasten, rechnet der Browser dieselben
  68px ein zweites Mal ab · und die innere Reihe endet weit vor der Kante,
  ohne dass links etwas auffaellt. Gemessen  auf Games: die beiden
  kuratierten Reihen ("DoktorFroid's favorites", "LVL Berlin's game picks")
  standen 117px vor der rechten Seitenkante, waehrend alle anderen Reihen
  sauber abschlossen. Die negativen Raender, die das Polster des Kastens
  ausgleichen sollen, liefen dabei ins Leere.

  Deshalb: innen keine Seitenbreite. Die Kante gehoert dem aeusseren Kasten.
  ========================================================================== */
.nx-charea .nx-charea-inner,
.nx-charea .section,
.nx-charea-inner .section,
.card .section,
.section .section{max-width:none}



/* Der Hinweis "1 event here" stand in derselben Zeile wie die Pillen fuer
  Spielzeit und Laden, trug aber keine: kein Grund, kein Polster, kein
  Radius · und weil er umbrechen durfte, stand er zweizeilig neben
  einzeiligen Nachbarn. Gemessen: 51x26 gegen 47x17 und 43x19. Eine Reihe,
  drei Angaben, eine Form. */
.lk-meta .nx-bel{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:var(--nx-r-bedien);
  background:rgba(8,8,14,.6);
  font-size:var(--nx-typo-klein); line-height:1.25;
  white-space:nowrap; flex:0 0 auto;
}


/* EINE GESTRECKTE KARTE FUELLT IHRE HOEHE.
  Zwei Karten nebeneinander bekommen dieselbe Hoehe · das ist die Regel
  aus dem Einklang. Die kuerzere hatte danach unten 121 Punkte leere
  Kartenflaeche, weil ihr Inhalt oben klebte. Wer gestreckt wird, verteilt
  seinen Inhalt ueber die Hoehe, die er bekommen hat. */
.two-col > .card > :last-child:not(p):not(span){ margin-top:auto; }
.two-col > .card > *:first-child{ flex:none; }

/* DAS HERZ VOR SUPPORT NEXTARI
  Die Pille im Fuss steht auf jeder Seite, als fertiges HTML und als
  Ersatz aus nxm-fb-hero.js. Das Herz kommt deshalb aus dieser einen
  Regel und nicht aus den Kopien: gleiche Form wie das Herz auf der
  Support-Karte der Home, gefuellt, in der Schriftfarbe der Pille. */
.nx-fb-sup::before{
  content:""; display:inline-block; width:1.1em; height:1em; margin-right:.6em; vertical-align:-.12em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
}