/* NEXTARI · DIE FEED-KARTE, ALS BAUTEIL.

  Der Feed ist dieselbe Sache am Schreibtisch und am Telefon · den Bauer
  dafuer gibt es einmal (nxm-feedbauer.js). Seine Karten brauchen ihre
  Flaechen, und die standen nur in css/nextari-home.css.

  Diese Datei traegt die Regeln der KARTE, nicht die der Seite. Erzeugt
  wird sie von werkzeug/feed-css-ziehen.py · nicht von Hand aendern.

  QUELLE UND ERGEBNIS, NICHT ZWEI BESITZER. Home traegt dieselben Regeln
  weiterhin selbst · das ist Absicht. Geaendert wird css/nextari-home.css,
  danach laeuft dieses Werkzeug. Herausnehmen laesst sich die Kopie nicht:
  gemessen aendern sich dabei 1156 Stilwerte auf Home, weil die Kopien
  dort gegen andere Regeln DERSELBEN Datei gewinnen, nicht nur gegen
  diese hier.

  Damit die beiden nicht auseinanderlaufen, zieht Schritt 4b im Tor neu
  und vergleicht. Wer home.css aendert und das Ziehen vergisst, kommt
  nicht am Tor vorbei.
*/
.chip-f{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-pille);
  cursor:pointer;transition:.15s;color:var(--dim);border:1px solid var(--line);background:var(--nx-hebung)}
@media (hover:hover){
.chip-f:hover{color:var(--txt);border-color:var(--line2)}
}
.chip-f.on{color:var(--txt);border-color:rgba(52,229,216,.5);background:rgba(52,229,216,.12)}
.chip-f.mut{opacity:.45;text-decoration:line-through}
.post{background:var(--nx-hebung);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin-bottom:16px;position:relative;overflow:hidden;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (hover:hover){
.post:hover{border-color:var(--line2)}
}
.phead{display:flex;align-items:center;gap:16px;margin-bottom:16px;position:relative;z-index:1}
.uname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub{font-size:var(--nx-typo-text);color:var(--dim)}
.sub b{color:var(--nx-text)}
.kicker{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--faint)}
.kbtn{cursor:pointer;transition:.15s;color:var(--faint);font-size:var(--nx-typo-kartenkopf);line-height:1}
@media (hover:hover){
.kbtn:hover{color:var(--nx-text)}
}
.chip{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);padding:4px 8px;border-radius:var(--nx-r-bedien);}
.c-live{background:rgba(216,27,69,.15);color:var(--live);border:1px solid rgba(216,27,69,.35);display:flex;align-items:center;gap:8px}
.live-pulse{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.4s infinite}
.stars{display:flex;gap:4px;margin-bottom:16px}
.cover{flex:1;aspect-ratio:3/4;border-radius:var(--nx-r-karte);position:relative;overflow:hidden;border:1px solid var(--line);
  cursor:pointer;transition:.2s;min-width:0}
@media (hover:hover){
.cover:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:none}
}
.cover-name{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-meta);
  line-height:1.15;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.banner{width:100%;aspect-ratio:16/7;border-radius:var(--nx-r-tafel);position:relative;overflow:hidden;border:1px solid var(--line);margin-bottom:16px}
.banner-grid{position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);background-size:24px 24px}
.banner-title{position:absolute;left:16px;bottom:14px;right:16px;font-family:var(--nx-f-titel);font-weight:700;font-size:18px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.play-orb{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,8,14,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff}
/* GEMESSEN: der Zaehler auf dem Vorschaubild stand auf 12,5px, Radius 8
  und 34 Punkten Hoehe · Punkt fuer Punkt das Mass eines Knopfes, obwohl
  an ihm nichts zu druecken ist. Ein Etikett liegt auf der Kachel und
  sagt eine Zahl: 10,5px, Radius 999, gut zwanzig Punkte hoch. */
.viewers{position:absolute;top:12px;right:12px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#fff;
  background:rgba(8,8,14,.6);padding:4px 9px;border-radius:var(--nx-r-pille);display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.actions{display:flex;gap:8px;position:relative;z-index:1;flex-wrap:wrap;margin-bottom:16px}
.btn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:16px 16px;border-radius:var(--nx-r-karte);
  cursor:pointer;transition:.15s;border:1px solid var(--line);background:transparent;color:var(--txt);display:flex;align-items:center;gap:8px}
@media (hover:hover){
.btn:hover{border-color:var(--nx-linie);color:#fff;background:var(--nx-hebung)}
}
.btn-primary{border:none;color:#fff;margin-left:auto;background:var(--accent);box-shadow:none}
@media (hover:hover){
.btn-primary:hover{transform:translateY(-2px);box-shadow:none;background:var(--accent)}
}
.react{display:flex;align-items:center;gap:0px;flex-wrap:nowrap;position:relative;z-index:1;padding-top:16px;border-top:1px solid var(--line)}
.rbtn{display:flex;align-items:center;gap:8px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);white-space:nowrap;
  padding:8px 8px;border-radius:var(--nx-r-bedien);cursor:pointer;transition:.15s;border:1px solid transparent}
@media (hover:hover){
.rbtn:hover{background:var(--nx-hebung)}
.rbtn.like:hover{color:var(--green)}
.rbtn.epic:hover{color:var(--gold)}
.rbtn.ok:hover{color:var(--nx-text)}
.rbtn.respect:hover{color:var(--cyan)}
.rbtn.watch:hover{color:var(--nx-text)}
.rbtn.dis:hover{color:var(--live)}
}
/* Save und Share rechts in der Reaktionszeile: mittig ausgerichtet, sonst
  dehnt ein 40 Punkte hoher Knopf die Nachbarn mit, waehrend Like, Epic und
  Dislike links bei 33 bleiben. */
.react .right{margin-left:auto;display:flex;align-items:center;gap:var(--nx-luecke-knopf);flex:none}
.mini{width:30px;height:38px;border-radius:var(--nx-r-bedien);margin-left:-9px;border:2px solid var(--surface);position:relative;overflow:hidden}
.mini:first-child{margin-left:0}
.av{border-radius:50%;display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:700;color:#fff;position:relative;flex:none}
.online{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2.5px solid var(--surface);box-shadow:none}
.btn,.cta,.ab1,.ab2,.abtn,.go,.seeall,.joinbtn,.crefollow,.pmbtn,.submit,.nbtn,.lfgjoin,.sendbtn,.unblock,.btnghost,.btndanger,.pbtn,.abtn.acc,.abtn.dec,.segbtn,.lfgjoin,.surveystars{white-space:nowrap}
.aact,.aacts,.actions{flex-wrap:wrap}
.adpost{padding:16px 16px}
.adrow{display:flex;align-items:center;gap:16px}
@media(max-width:560px){
.adrow{flex-wrap:wrap}
}
.cta,.btn,.btn-primary,.btnghost,.btnconn,.btndanger,.joinbtn,.chjoin,.ab1,.ab2,.go,.play,.lfgjoin,.abtn,.sendbtn,.pbtn,.unblock,.adcta,.segbtn,.tab,.fchip,.catchip,.chip,.badge,.achip,.whym,.crefollow,.pmbtn,.seeall,.cqrbtn,.mmf .f,.tips .tip,.f{line-height:1}
.chip.c-live{display:inline-flex;align-items:center}
.chip.c-live .live-pulse{margin-right:5px}
.rbtn.on{color:var(--nx-text)!important;border-color:var(--nx-linie);background:var(--nx-hebung)}
.nx-rows .sub{font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text);color:var(--dim)}
.nx-has-art .ov,.nx-has-art .grid-ov,.nx-has-art .ovg,.nx-has-art .bb-grid,.nx-has-art .t10grid2,.nx-has-art .lgrid{opacity:0}
.nx-has-art .bb-peek{opacity:.25}
@media(max-width:760px){
.chips,.actions,.btnrow,.metarow,.pillrow{flex-wrap:wrap}
}
.grid-ov,.banner-grid,.agrid,.bb-grid,.lgrid,.ovg,.t10grid2{inset:1px;background-position:7px 7px}
.btn,.pill,.chip,.chip-f,.tag,.badge,.sf,.cta,.soontag{white-space:nowrap}
.rbtn.on .npic,.ureact.on .npic{animation:nxPop .5s cubic-bezier(.3,1.8,.4,1)}
.rbtn.on,.ureact.on{animation:nxPing .55s ease-out}
/* EIN PLATZ FUER EINE SACHE · der Zeitstempel wurde an zwei Stellen
   eingesetzt: in die Kopfzeile, wo es eine gibt, sonst als freies
   Element an die Karte. Gemessen stand er dadurch auf einer Karte oben
   rechts und auf der naechsten mitten im Text. Er steht jetzt ueberall
   oben rechts; die Karte selbst traegt den Bezugspunkt. */
/* DER ZEITSTEMPEL GEHT NACH RECHTS, NICHT NACH OBEN.
   Erst stand er mal in der Kopfzeile und mal frei mitten im Text.
   Absolut oben rechts zu setzen war der naechstliegende Griff und der
   falsche: dort stehen auf manchen Karten schon die Live-Pille und das
   Schliessen-Kreuz, und beide lagen danach uebereinander. In der Zeile
   bleiben und ans Ende ruecken loest beides, ohne jemandem den Platz
   wegzunehmen. */
.nx-ts{font:700 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);
  align-self:center;margin-left:auto;margin-right:6px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nx-ts-abs{position:absolute;top:16px;right:16px;margin:0;z-index:2}
.nx-updmore .chip{flex:none}
.cllabel,.btndanger,.chip.c-live,.nx-live-txt{color:#ff7a92!important}
.nx-pt-tag{position:absolute;top:11px;left:12px;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--txt);background:rgba(8,8,13,.62);border:1px solid rgba(255,255,255,.14);border-radius:var(--nx-r-bedien);padding:4px 8px}
.nx-ses-again{background:none;border:1px solid rgba(255,255,255,.16)!important;color:var(--dim)!important}
@media (hover:hover){
.nx-ses-again:hover{border-color:var(--nx-linie);color:#fff!important}
}
.feed-h .sub{font-size:var(--nx-typo-text);color:var(--faint)}
.nx-cont-add .sub{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);text-align:center}
.nx-mock-row .av{width:9px;height:9px;border-radius:50%;flex:none}
.chip-f.nxf-act,#savedFilters .nxf-act{background:var(--nx-hebung)!important;border-color:var(--nx-linie)!important;color:#fff!important}
.nx-reason{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:8px 12px;border-radius:var(--nx-r-bedien);background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.09);font:400 var(--nx-typo-meta)/1.4 'Nunito Sans',sans-serif;color:#b9b6d6}
.nx-reason svg{flex:none;color:var(--nx-text)}
.nx-ses{border:1px solid rgba(61,220,132,.28)}
.nx-ses-badge{width:44px;height:44px;border-radius:var(--nx-r-karte);display:grid;place-items:center;font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nx-ses-win{background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.4);color:#7fe8a9;font-weight:800}
.nx-ses-clips{display:grid;grid-template-columns:96px 96px 1fr;gap:10px;align-items:center;margin:4px 0 12px}
.nx-ses-clip{position:relative;height:58px;border-radius:var(--nx-r-bedien);filter:grayscale(.5) brightness(.75)}
.nx-ses-clip span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.85;font-size:var(--nx-typo-kartenkopf)}
.nx-ses-clip i{position:absolute;bottom:4px;right:6px;font:700 var(--nx-typo-klein) var(--nx-f-text);font-style:normal;color:#fff;background:rgba(0,0,0,.7);border-radius:var(--nx-r-marke);padding:1px 4px}
.nx-ses-note{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--nx-leise)}
.nx-ses-note em{font-style:normal;color:var(--nx-text);font-weight:700;font-size:var(--nx-typo-klein);margin-left:4px}
.nx-ses-foot{display:flex;align-items:center;font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-ses-foot b{color:var(--txt)}
.nx-ses-gg{margin-left:auto}
.post .nx-posthide{cursor:pointer;font-size:var(--nx-typo-text);line-height:1;opacity:.55;transition:.15s}
@media (hover:hover){
.post .nx-posthide:hover{opacity:1;color:#ff6b6b}
}
.post.nx-hidden{display:none}
.nx-reason{flex-wrap:wrap;row-gap:8px}
.nx-tune{margin-left:auto;display:inline-flex;gap:4px;flex:none;padding-left:10px}
.nx-tune-btn{font:700 var(--nx-typo-klein) var(--nx-f-text);color:var(--nx-leise);border:1px solid rgba(255,255,255,.12);background:transparent;border-radius:var(--nx-r-bedien);padding:4px 12px;cursor:pointer;transition:.15s;white-space:nowrap}
@media (hover:hover){
.nx-tune-btn:hover{color:#fff;border-color:var(--nx-linie)}
}
.nx-tune-more.on{color:#3be37a;border-color:rgba(61,220,132,.5);background:rgba(61,220,132,.08)}
.nx-tune-stub{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px dashed rgba(255,255,255,.14);border-radius:var(--nx-r-tafel);padding:12px 16px;margin:0 0 16px;font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--nx-leise)}
.nx-tune-stub b{color:var(--dim);font-weight:700}
.nx-tune-undo{margin-left:auto;flex:none;font:700 var(--nx-typo-meta) var(--nx-f-text);color:var(--nx-text);border:1px solid rgba(255,255,255,0.14);background:var(--nx-hebung);border-radius:var(--nx-r-bedien);padding:4px 12px;cursor:pointer}
@media (hover:hover){
.nx-tune-undo:hover{background:var(--nx-hebung)}
}
/* DER GRUND DARF NICHT ABGESCHNITTEN WERDEN · er ist die Aussage der
   Zeile. Gemessen blieben von "You follow DoktorFroid · live now" 146
   von 323 Punkten uebrig, weil zwei Knoepfe daneben standen und der
   Text nicht umbrechen durfte. Jetzt bricht er um, und die Knoepfe
   ruecken darunter, wenn es eng wird. */
.fc-why{margin-top:8px;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:rgba(170,169,192,.78);display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.fc-why .t{white-space:normal;overflow:visible;min-width:0;flex:1 1 60%}
.fc-why .nx-tune{margin-left:auto;flex:none}
.nxp-kick{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:8px;margin:26px 0 14px;font:800 var(--nx-typo-meta) var(--nx-f-text);color:var(--txt)}
.nxp-queue{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:14px}
.nxp-main{grid-row:1/3;border-radius:var(--nx-r-tafel);overflow:hidden;position:relative;background:var(--accent);min-height:300px;border:1px solid rgba(255,255,255,0.14);cursor:pointer}
.nxp-main .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,13,.92),rgba(8,8,13,.1) 60%)}
.nxp-live{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;font:800 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:0.9px;color:#fff;background:var(--live);border-radius:var(--nx-r-bedien);padding:3px 8px}
.nxp-view{position:absolute;top:12px;right:12px;font:700 var(--nx-typo-klein) var(--nx-f-text);color:#fff;background:rgba(8,8,14,.65);border:1px solid rgba(255,255,255,.2);border-radius:var(--nx-r-bedien);padding:3px 8px}
.nxp-main .c{position:absolute;left:18px;right:18px;bottom:16px}
.nxp-main .who{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.nxp-main .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#c31220,#5c0910);display:grid;place-items:center;font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nxp-main .nm{font:800 var(--nx-typo-abschnitt) var(--nx-f-titel);color:#fff}
.nxp-main .sub{color:rgba(255,255,255,.85);font-size:var(--nx-typo-text);margin-bottom:10px}
.nxp-main .why{color:rgba(255,255,255,.6);font-size:var(--nx-typo-meta);margin-bottom:12px}
.nxp-cta{display:inline-flex;align-items:center;gap:8px;font:800 var(--nx-typo-text) var(--nx-f-text);color:#0a0a10;background:#fff;border:none;border-radius:var(--nx-r-bedien);padding:8px 16px;cursor:pointer}
.nxp-card{border-radius:var(--nx-r-karte);border:1px solid var(--line);background:var(--surface);overflow:hidden;position:relative;cursor:pointer;transition:transform .15s,border-color .15s}
@media (hover:hover){
.nxp-card:hover{transform:translateY(-3px);border-color:var(--line2)}
}
.nxp-card .cov{height:74px;background:linear-gradient(135deg,var(--c1,#16222e),var(--c2,#4a8a9a));position:relative}
.nxp-card .tag{position:absolute;top:8px;left:8px;font:800 var(--nx-typo-klein) var(--nx-f-text);color:#fff;background:rgba(8,8,14,.7);border:1px solid rgba(255,255,255,.2);border-radius:var(--nx-r-bedien);padding:2px 6px}
.nxp-card .tag.lv{background:var(--live);border-color:transparent}
.nxp-card .c{padding:10px 12px 12px}
.nxp-card .nm{font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff;line-height:1.2}
.nxp-card .sub{color:var(--faint);font-size:var(--nx-typo-klein);margin-top:3px}
.nxp-num{position:absolute;right:10px;bottom:10px;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--cyan)}
.nxp-lower{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin-top:14px}
.nxp-panel{border:1px solid var(--line);border-radius:var(--nx-r-tafel);background:var(--surface);padding:16px 18px}
.nxp-panel .nxp-kick{margin-top:0}
.nxp-frow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.nxp-frow:last-child{border-bottom:none}
.nxp-frow .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 var(--nx-typo-meta) var(--nx-f-text);color:#fff;position:relative;flex:none}
.nxp-frow .av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--surface);font-size:0}
.nxp-frow .nm{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nxp-frow .sub{color:var(--faint);font-size:var(--nx-typo-meta)}
.nxp-frow .act{margin-left:auto;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--cyan);border:1px solid rgba(52,229,216,.4);background:none;border-radius:var(--nx-r-bedien);padding:4px 12px;cursor:pointer}
.nxp-evrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.nxp-evrow:last-child{border-bottom:none}
.nxp-evrow .ic{width:36px;height:36px;border-radius:var(--nx-r-bedien);background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);display:grid;place-items:center;color:var(--nx-text);flex:none}
.nxp-evrow .nm{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nxp-evrow .sub{color:var(--faint);font-size:var(--nx-typo-meta)}
.nxp-evrow .cd{margin-left:auto;font:800 var(--nx-typo-text) var(--nx-f-text);color:var(--gold);font-variant-numeric:tabular-nums}
@media(max-width:1100px){
.nxp-queue{grid-template-columns:1fr 1fr}
.nxp-main{grid-row:auto;grid-column:1/-1}
.nxp-lower{grid-template-columns:1fr}
}
.nxp-head{display:flex;align-items:center;gap:11px;padding:13px 16px 0}
.nxp-av{width:38px;height:38px;border-radius:var(--nx-r-karte);flex:none;background-size:cover;background-position:center;
  display:grid;place-items:center;font:800 13px var(--nx-f-text);color:#fff}
.nxp-who b{display:block;font:800 13.5px var(--nx-f-text);color:#fff;line-height:1.25}
.nxp-who span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim)}
.nxp-why{margin-left:auto;font:700 10px var(--nx-f-text);padding:4px 9px;border-radius:var(--nx-r-marke);white-space:nowrap}
.nxp-why.game{background:var(--nx-hebung);color:var(--nx-text)}
.nxp-why.creator{background:rgba(216,27,69,.16);color:#ffaebd}
.nxp-why.group{background:rgba(52,229,216,.14);color:#8ff0e8}
.nxp-why.friend{background:rgba(59,227,122,.14);color:#9de9b8}
.nxp-art{height:172px;margin:12px 16px 0;border-radius:var(--nx-r-karte);background-size:cover;background-position:center;background-color:var(--nx-hebung)}
.nxp-t{font:700 15px/1.35 var(--nx-f-text);color:#fff;padding:12px 16px 0}
.nxp-acts{display:flex;gap:8px;padding:12px 16px 14px;align-items:center}
.nxp-b{font:800 12px var(--nx-f-text);color:#fff;background:var(--nx-hebung);border:1px solid var(--line,var(--nx-linie-subtle));
  border-radius:var(--nx-r-bedien);padding:8px 14px;cursor:pointer;transition:.15s}
.nxp-b.pri{background:var(--accent,#5b27e8);border-color:transparent}
@media (hover:hover){
.nxp-b:hover{filter:brightness(1.15)}
}
.nxp-when{margin-left:auto;font:400 11px 'Nunito Sans',sans-serif;color:var(--dim)}
.nxq-press .banner,.nxq-press .nxp-art{height:168px!important;position:relative}
.nxq-press .btxt b,.nxq-press .banner-title{font:800 16px/1.28 var(--nx-f-text)!important;
  color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.9)}
/* Hier lag eine rote Haarlinie ueber der Karte · als einzige Flaeche der
  Seite, quer ueber die gerundeten Ecken hinweg und in einem Rot, das
  weder zur Farbe dieser Karte noch zum einen Rot des Hauses gehoerte.
  Eine Markierung, die nur an einer Stelle vorkommt und der Kartenform
  nicht folgt, liest sich als Darstellungsfehler. Getrennt wird mit
  Flaeche; woher die Karte kommt, sagt ihr Herkunftszeichen. */

/* Hier stand border-radius:0 · ohne Begruendung, und daneben ist jede Karte
  gerundet. Eine Ecke, die nur an zwei von 43 Flaechen scharf ist, liest sich
  als Fehler, nicht als Absicht. */
.nxq-twitch .viewers{background:rgba(0,0,0,.72);}
/* KEIN ZWEITES LIVE. Auf dem Artwork steht bereits LIVE · das ist die
  Stelle, an der man es sucht. Ein zweiter roter Punkt an der Pille
  daneben sagt dasselbe noch einmal. */

.nxq-youtube .banner,.nxq-youtube .nxp-art{border-radius:var(--nx-r-karte,14px)}
body.nx-glance #nxPlaying > .nxp-kick{text-align:center}
/* Anzeigenkarte: die Textspalte waechst, der Knopf bleibt · sonst bricht eine laengere Headline Wort fuer Wort. */
.adrow .adtxt{flex:1 1 auto;min-width:0}
/* Schmale Feedspalte (zwei Spalten im Dashboard): Logo und Text in einer Zeile, der Knopf darunter · sonst bricht die Headline Wort fuer Wort. */
.adpost{container-type:inline-size}
@container (max-width:420px){
.adrow{flex-wrap:wrap}
}
/* Anzeigenkarte mit echter Marke: das Hauskaestchen ist ein 52-px-Quadrat mit
  einem Kuerzel darin · eine Marke, die eine Mindestbreite vorschreibt, passt
  dort nicht hinein. Traegt die Karte eine Markendatei (nxm-ad-live.js setzt
  .nxfn-karte), steht das Zeichen in voller Breite in einer eigenen Zeile und
  der Text darunter · die Einrueckung auf das alte Quadrat faellt weg. */
.adpost.nxfn-karte .adrow{flex-wrap:wrap;align-items:flex-start;gap:12px}
.adpost.nxfn-karte .adlogo{flex:1 1 100%;width:auto;height:auto;border-radius:0;display:block}
.adpost.nxfn-karte .adtxt{flex:1 1 100%}
.adpost.nxfn-karte .adcta{margin-left:0}
@container (max-width:420px){
.adpost.nxfn-karte .adcta{margin-left:0}
}

/* DAS HAUSZEICHEN STEHT NEBEN SEINEM WORT.
  Die Reaktionszeichen sind Pixelgrafiken im CD · bis auf wenige Balken
  reduziert. Sie brauchen PLATZ: 22 Punkte, darunter laufen die Balken
  ineinander.

  Die Dateien liegen in der DOPPELTEN Anzeigehoehe (44 Punkte) statt in
  232. Vorher wurde ein Bild von 140 Punkten Breite auf elf gezogen ·
  unter einem Viertel seiner Groesse, und genau das meldete der
  Tafelpruefer. Bei 2:1 rechnet der Browser sauber herunter; harte Kanten
  zu erzwingen wuerde jetzt jede zweite Zeile wegwerfen. */
.npic{height:17px;width:auto;display:block;flex:none}
.rbtn{display:inline-flex;align-items:center;gap:6px}
/* ABSTAND ZWISCHEN DEN REAKTIONEN.
  Die Zeile stand auf gap:0 · Like, Epic und Dislike klebten aneinander
  und lasen sich wie ein Block statt wie drei Knoepfe. Und die Zeichen
  standen auf 22 Punkten neben einer Schrift von 12,5: das Bild war
  groesser als das Wort daneben. */
html body .post .react{gap:8px}
.rbtn .npic{opacity:.72}
.rbtn:hover .npic,.rbtn.on .npic{opacity:1}

/* DER ZUSTAND SITZT AUF DEM BILD, oben links · dort sucht ihn jeder, und
  die Kopfzeile bekommt ihren Platz zurueck. */
.post .banner{position:relative}
.post .banner > .nxp-zustand{position:absolute;top:10px;left:10px;z-index:3}
/* DAS SPIEL BRINGT SEIN BILD VON STEAM MIT (nxm-feedbauer.js, steamBild).
  Es liegt ueber der ruhigen Flaeche und unter dem Zustand. Laedt es nicht,
  nimmt es sich selbst heraus, und die Flaeche bleibt stehen. */
.post .banner > .nx-bn-steam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}

/* EIN AUFBAU FUER JEDE FEEDKARTE (nxm-feedbauer.js kopf/titel/text).

    Kopf     Absenderbild · Absenderzeile · Zeit und "…" in der Ecke
    Bild     nur, wenn es eins gibt
    Titel · Text · Knoepfe · Reaktionen · Fussnote

  DER KOPF IST EINE ZEILE. Absenderbild, Absenderzeile und Ecke stehen
  nebeneinander und auf derselben Mitte · vorher stand die Ecke absolut in
  der Kartenecke und die Zeit je nach Karte 13 bis 25 Punkte unter der
  Zeile, zu der sie gehoert. Der Absender ist keine Ueberschrift: klein, in
  Versalien, der Name hell und das Wo daneben grau. Die Ueberschrift ist
  die Sache selbst (.nx-titel).

  article.post statt .post: nxm-mobil.css setzt am Telefon und im schmalen
  Fenster align-items:flex-start fuer denselben Kopf und steht auf Home
  hinter dieser Datei · eine Stelle mehr im Waehler, damit die Kopfzeile
  auf jeder Breite dieselbe ist. */
html body .post{position:relative}
html body article.post > .phead{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin:0 0 12px}
html body .post > .phead > .nx-quelle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  font:700 var(--nx-typo-klein)/1.4 var(--nx-f-text);
  color:var(--dim);white-space:nowrap}
/* Der Name ist ein Weg (role=button) und bekommt am Telefon die
  Fingerhoehe (nxm-mobil.css, 44 Punkte). Die Zeilenhoehe folgt derselben
  Leiter, damit die Schrift in dieser Hoehe mittig steht und nicht oben,
  auf halber Hoehe ueber Zeit und "…".
  EINE ZEILE, AUCH AM TELEFON. nxm-mobil.css laesst .uname umbrechen, damit
  ein langer Name nicht abgeschnitten wird · in der Absenderzeile stuende
  er dann zweimal 44 Punkte hoch neben einer Ecke, die zur ersten Zeile
  gehoert. Hier weicht zuerst das Wo (es schrumpft ungleich schneller),
  der Name erst, wenn es ganz weg ist.
  Ist der Name ein Weg, stempelt nxm-bedienung.js ihn als Knopf
  (inline-flex, seitliches Polster, beides mit Vorrang) · in der Zeile
  bleibt er Schrift, darum hier Anzeige und Polster mit Vorrang.
  Schmaler als die Fingerhoehe wird er nie: ein kurzer Name in normaler
  Schreibweise ("kevbot") war 38 Punkte breit und unter dem Fingermass.
  Die Mindestbreite rueckt das Wort nicht von der Kante, es steht links. */
html body .post .nx-quelle > .uname{display:block!important;flex:0 1 auto;min-width:var(--nx-h-bedien);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:0!important;font:inherit;font-size:var(--nx-typo-klein)!important;line-height:var(--nx-h-bedien);letter-spacing:inherit;color:var(--txt)}
/* Der Haken "verifiziert" steht hinter dem Namen, nicht in ihm · im
  Namensfeld hob er die Zeile an, und die Zeit stand 9 Punkte tiefer. */
html body .post .nx-quelle-haken{flex:none;display:inline-flex;align-items:center}
/* Das Wo schrumpft, aber nie bis auf seinen Punkt · ein "·" allein am
  Ende der Zeile waere ein verirrtes Trennzeichen. Reicht der Platz auch
  dafuer nicht, weicht der Name mit Auslassung. */
html body .post .nx-quelle-zu{flex:0 100000 auto;min-width:5em;overflow:hidden;text-overflow:ellipsis}
html body .post .nx-quelle-zu::before{content:"\00b7";margin-right:6px}
/* Eine Pille steht in ihrer Schreibweise (nxm-bedienung.js stempelt sie
  so) · schon im ersten Bild, sonst wechselt sie beim Stempeln die Form. */
html body .post .nx-quelle > .chip,html body .post .banner > .nxp-zustand{text-transform:none}
html body .post .nx-quelle > .chip{flex:none;padding:2px 8px;background:var(--nx-hebung-2);color:var(--txt)}
html body .post .nx-quelle > .nxp-folgen{margin-left:4px;flex:0 0 auto;text-transform:none;letter-spacing:0}
html body .post > .phead > .kicker{position:static;flex:0 0 auto;margin:0 0 0 auto;padding:0;
  display:flex;align-items:center;gap:2px;width:auto}
html body .post .kicker > .nx-ts{margin:0}
/* DAS "…" IST EIN KNOPF OHNE FLAECHE · im Mass der Bedienleiter
  (--nx-h-bedien), damit es am Telefon 44 Punkte hat wie jeder andere. */
html body .post .nx-ecke-mehr{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--nx-h-bedien);height:var(--nx-h-bedien);margin:0 -8px 0 0;padding:0;border:0;background:none;
  font:700 var(--nx-typo-kartenkopf)/1 var(--nx-f-text);color:var(--nx-leise);cursor:pointer;border-radius:var(--nx-r-bedien)}
@media (hover:hover){html body .post .nx-ecke-mehr:hover{color:var(--txt);background:var(--nx-hebung)}}
/* Nur wo der Waehler dahinter geladen ist (js/nextari-home.10-report.js
  setzt html.nx-melden) · sonst stuende ein Knopf da, der nichts oeffnet. */
html:not(.nx-melden) body .post .nx-ecke-mehr[data-nxrep]{display:none}
html body .post .av.nx-av-zeichen{width:44px;height:44px;border-radius:var(--nx-r-karte);display:grid;place-items:center;
  color:var(--text,#fff);font:800 var(--nx-typo-text) var(--nx-f-text);flex:none}
html body .post .banner[data-nx-open]{cursor:pointer}
/* Die Ueberschrift der Karte · auf jeder Breite dieselbe Sprosse. */
html body .post .nx-titel{margin:0 0 6px;font:800 var(--nx-typo-kartenkopf)/1.32 var(--nx-f-text);color:var(--text,#fff);overflow-wrap:anywhere}
html body .post > .btxt,html body .post .nx-ann-zeile > .btxt{margin:0 0 12px;font:400 var(--nx-typo-text)/1.5 var(--nx-f-text);color:var(--dim)}

/* KEINE LINIE UEBER DER REAKTIONSZEILE.
  Linien gibt es hier nirgends · getrennt wird mit Flaeche und Abstand.
  Auf Home nahm css/nextari-flaechen.css die Linie ueber #feed .react
  wieder weg; am Telefon heisst der Strom #nowListe, dort blieb sie
  stehen. Dieselbe Karte sah auf zwei Flaechen verschieden aus. Jetzt
  entsteht sie gar nicht erst. */
html body .post .react{border-top:none;padding-top:12px}

/* FLAECHE STATT KANTE, AUCH AM TELEFON.
  Die Karte trug einen Verlauf nach unten ins Dunkle und darum einen
  Rahmen · gemessen loeste sie sich unten im Grund auf und wurde mit
  einer hellen Linie zusammengehalten. Auf Home setzte nxm-feedton.js
  sie flach, aber das Modul haengt an #feed und lief am Telefon nie.
  Eine flache Flaeche traegt die Trennung allein. */
html body .post{background:var(--surface,#1d1d23);background-image:none;border:0}

/* DIE FREUNDES-KARTE.
  Diese Regeln standen frueher in css/nextari-home.css und wurden von
  dort gezogen. Sie gehoeren aber der Karte, nicht der Seite, und die
  Karte steht auch am Telefon · deshalb stehen sie jetzt hier, und in
  home.css nicht mehr. */
.nx-fa-do{color:var(--dim,#aaa9c0);font-weight:400;margin:0 5px 0 0}
.nx-fa-foot{display:flex;align-items:center;gap:var(--nx-luecke-knopf)}
/* Das Spielbild steht rechts im Titel, nicht in der Knopfzeile · Titel,
  Text und erster Knopf teilen eine linke Kante. Es liegt ueber dem
  Fluss (absolute), damit es weder die Lage noch die Hoehe der Knopfzeile
  aendert, auch wenn die Karte keinen Text unter dem Titel hat. */
html body .post .nx-fa-g:has(.nx-fa-bild){position:relative;padding-right:42px}
html body .post .nx-fa-g:has(.nx-fa-bild) + .btxt{padding-right:42px}
/* nxm-kartenhand.js legt den Titel spaeter in einen Weg (a) · das Bild
  haengt dann darin und richtet sich trotzdem nach dem Titel. */
html body .post .nx-fa-g:has(.nx-fa-bild) a{position:static}
html body .post .nx-fa-bild{position:absolute;top:0;right:0;pointer-events:none}
html body .post .nx-fa-bild .mini{width:30px;height:40px;border-radius:6px;margin:0;border:0;flex:none}

/* DER KNOPF STEHT AUF DER KANTE SEINER GESCHWISTER.
  margin-left:auto schob den einzigen Knopf einer Karte an die rechte
  Kante · auf Home lagen links davon 208 Punkte Nichts, am Telefon 132
  bis 194. Und die Fusszeile polsterte ein zweites Mal, obwohl die Karte
  schon polstert: Profilbild und Knopf hatten drei verschiedene Anfaenge.
  Diese Datei ist der EINE Besitzer der Knopfzeile einer Feedkarte · am
  Telefon stand in nxm-mobil.css ein zweites justify-content:flex-end
  mit !important und schob "Watch now" wieder nach rechts.
  Gemessen von mess/feedkarten.py F10. */
html body .post .actions{justify-content:flex-start;gap:var(--nx-luecke-knopf)}
html body .post .actions > .btn{margin-left:0}
html body .post .nx-fa-foot{padding:0}
html body .post .nx-fa-foot > .btn{margin-left:0}
/* Der letzte Block einer Karte traegt keinen Aussenabstand mehr · sonst
  steht unter dem Knopf doppelt so viel Leere wie ueber dem Bild. */
html body .post > .actions:last-child{margin-bottom:0}

/* EIN KNOPFMASS, EIN TAKT · kein Knopf mal schlanker, mal groesser.
  Jeder Knopf einer Feedkarte (Handlung und Reaktion, Like/Epic/Dislike,
  Save, Share) ist --nx-h-bedien hoch (34 Schreibtisch, 44 Telefon), hat
  dieselbe Rundung, Schrift, Polsterung und Zeichengroesse. Markenknoepfe
  (Twitch, Steam, Netflix) unterscheiden sich nur in der Farbe.
  Abstaende: Inhalt -> Knopfzeile und Knopfzeile -> Reaktionen sind auf
  jeder Karte --nx-luecke-wort. Dieser Block ist der EINE Besitzer · in
  nxm-mobil.css, css/nextari-flaechen.css (#feed .react) und home.css
  (#feed .rbtn .npic) standen frueher zweite Fassungen.
  Gemessen von mess/feedkarten.py F10, F11, F12. */
html body .post{--nx-fk-pad:14px;--nx-fk-fs:var(--nx-typo-text);--nx-fk-ic:14px}
/* EINE TELEFONSCHWELLE FUER DIE KARTE · alles, was unter 768 Punkten
  anders steht, in diesem einen Block (Knopfmass hier, Clips und Notiz der
  Sitzungskarte weiter unten beschrieben). */
@media(max-width:767px){
  html body .post{--nx-fk-pad:10px;--nx-fk-fs:var(--nx-typo-meta)}
  /* Die Aktionszeile (C70, Block unten): sechs Zeichen und ein Knopf in
  einer Zeile bei 390 · jedes Zeichen 30 breit, getroffen auf 42, der
  Hauptknopf getroffen auf 44. */
  html body article.post{--nx-az-b:30px;--nx-az-rand:6px;--nx-az-luecke:4px;--nx-az-l-luecke:0px;--nx-az-pad:14px;--nx-az-hit:4px}
  /* Die Knoepfe der Reaktionszeile schrumpfen nicht unter ihr Zeichen ·
  die Zeile selbst steht unten (DIE REAKTIONEN STEHEN BLANK). */
  html body .post .react .rbtn{flex-shrink:0}
  html body .post .nx-ses-clips{grid-template-columns:1fr 1fr}
  html body .post .nx-ses-note{grid-column:1/-1;margin-top:2px}
  /* JEDER BEITRAG AUF SEINER FLAECHE, AUCH IM STROM DER APP (Entscheidung
  06.10. "Feed-Posts als Flaechen", ersetzt "Telefon ohne Kaesten"). Im
  Strom am Telefon (.m-feed in nextari-pulse.html) steht der Beitrag auf
  --nx-flaeche mit der Rundung einer Karte, auf der Kante der Seite;
  zwischen zwei Beitraegen sieht man den schwarzen Grund (--nx-luecke-post).
  Innen eng: das Polster ist die Innenluft der Seite (--nx-innen), damit
  steht der Text auf der Innenlinie (Kante 14 + 16 = 30). Das Bild laeuft
  bis an die Raender der Flaeche. Polster, Abstand und Bildrand setzt
  nxm-mobil.css und liest sie aus den Tokens hier (--nx-fk-polster,
  --nx-fk-abstand, --nx-fk-bildrand). */
  html body .m-feed > article.post{--nx-fk-polster:var(--nx-innen);--nx-fk-abstand:var(--nx-luecke-post,32px);
    --nx-fk-bildrand:calc(-1 * var(--nx-innen));background:var(--nx-flaeche);border-radius:var(--nx-r-karte);overflow:hidden}
  html body .m-feed > article.post .banner{width:auto;border-radius:0}
}
/* DIE REAKTIONEN STEHEN BLANK, BEI JEDER BREITE (Entscheidung
  Reaktionszeichen, seit 57b auch am Rechner): das Hauszeichen in 24
  Punkten, ohne Kasten und ohne Wort, die Zahl daneben, sobald es eine
  gibt. Den Grund des leisen Knopfs malt css/nextari-flaechen.css aus
  --nx-knopf-flaeche. Das Wort bleibt im Text des Knopfs (nxm-react.js
  erkennt die Reaktion daran) und in seinem Namen fuer Vorlesewerkzeuge.
  Jedes Zeichen steht mittig auf einem Knopfmass · fuenf Ziele passen auch
  am Telefon in eine Zeile, die Zeile bricht nicht mehr um. */
html body .post .react{--nx-knopf-flaeche:transparent;--nx-fk-ic:24px;flex-wrap:nowrap}
html body .post .react .rbtn:not(.nx-savebtn):not(.nx-sharebtn){min-width:var(--nx-h-bedien);justify-content:center;
  padding:0 calc((var(--nx-h-bedien) - var(--nx-fk-ic)) / 2)}
html body .post .react .nx-rw{display:none}
/* DAS ERSTE ZEICHEN STEHT AUF DER KANTE. Mittig auf seinem Knopfmass stand
  es neun (Rechner) bis fuenfzehn Punkte (Telefon) hinter dem Knopf und dem
  Text darueber · zwei Kanten in einer Karte (knopfreihen.py, Regel 4). Der
  erste Knopf legt sein Zeichen an den Anfang, seine Tippflaeche reicht nach
  innen. */
html body .post .react > .rbtn:first-child:not(.nx-savebtn):not(.nx-sharebtn){justify-content:flex-start;padding-left:0}
/* DIE ZAHL STEHT NEBEN DEM ZEICHEN · nur, wenn der Server sie gezaehlt hat
  (nxm-feedbauer.js setzt data-nx-zahl). Sie ist kein Text des Knopfs,
  damit sein Wort das Wort bleibt. */
html body .post .react .rbtn[data-nx-zahl]::after{content:attr(data-nx-zahl);
  font:700 var(--nx-typo-meta)/1 var(--nx-f-text);color:var(--dim)}
html body .post :is(.actions,.nx-fa-foot,.nxa-neben,.nx-ses-foot) > :is(.btn,button,a.btn),
html body .post .adcta,
html body .post .react .rbtn{box-sizing:border-box;height:var(--nx-h-bedien);min-height:var(--nx-h-bedien);
  padding:0 var(--nx-fk-pad);font-size:var(--nx-fk-fs);line-height:1;border-radius:var(--nx-r-bedien,10px);
  display:inline-flex;align-items:center;gap:8px;margin-top:0;margin-bottom:0}
html body .post :is(.actions,.nx-fa-foot,.nxa-neben,.nx-ses-foot) > :is(.btn,button,a.btn) :is(svg,img),
html body .post .adcta :is(svg,img),
html body .post .react .rbtn :is(svg,img,.npic){height:var(--nx-fk-ic);max-height:var(--nx-fk-ic);width:auto;max-width:none;flex:none}
html body .post .react .rbtn:is(.nx-savebtn,.nx-sharebtn){width:var(--nx-h-bedien);padding:0;justify-content:center}
html body .post .react .right{gap:var(--nx-luecke-knopf)}
html body .post .react{gap:var(--nx-luecke-knopf);align-items:center;margin-top:0;border-top:0;padding-top:var(--nx-luecke-wort)}
html body .post > .actions{margin:var(--nx-luecke-wort) 0 0;align-items:center}
html body .post > :has(+ .actions){margin-bottom:0}

/* DER NAME STEHT ALLEIN, DAS GESCHEHENE DARUNTER.
  Vorher trug die Namenszeile Name, Verb UND Titel · bei 390 Punkten lief
  "Berlin Phoenix scheduled Clan night · Thursday 20:00" ueber fuenf
  Zeilen, weil die Ecke daneben Platz belegt. */
html body .post .nx-fa-was{margin-top:1px}
html body .post .nx-fa-g{min-width:0}

/* EINE SPROSSE JE ROLLE.
  Der Bildtitel stand am Telefon auf 18 Punkten und auf Home auf 15,5 ·
  18 ist keine Sprosse der Leiter. Dieselbe Rolle, dieselbe Groesse. Die
  Marke auf dem Bild stand auf 9. */
html body .post .banner-title{font-size:var(--nx-typo-kartenkopf)}
/* Die Marke steht auf der Kante des Bildtitels darunter (16), nicht 2 Punkte
  davor · zwei Einzuege auf einer Flaeche lesen sich als Versehen. */
html body .post .nx-pt-tag{font:700 var(--nx-typo-klein) var(--nx-f-text);
  top:12px;left:16px}
/* Die Zeitangabe ist eine Rolle, also eine Schrift · am Telefon stand sie
  in Encode Sans 10,5, auf Home in Nunito Sans 11,5. */
html body .post .nx-ts{font:700 var(--nx-typo-klein) var(--nx-f-text)}
/* Ein Unterblock, ein Grau · "started" stand auf #aaa9c0, die Zeile
  direkt darunter auf #8a8aa3. */
html body .post .sub{color:#aaa9c0}

/* DIE FEINABSTIMMUNG IST BEDIENUNG, KEIN INHALT.
  "More like this" und "Less" standen auf JEDER Karte. Am Telefon waren
  sie schon ausgeblendet, auf Home nicht: dieselbe Karte sah auf zwei
  Flaechen verschieden aus. Jetzt liegen sie ueberall still und kommen,
  wo es einen Zeiger gibt, beim Darueberfahren · mit der Tastatur ueber
  focus-within. */
html body .post .nx-tune{display:none}
@media (hover:hover) and (pointer:fine){
  html body .post:hover .nx-tune,
  html body .post:focus-within .nx-tune{display:inline-flex}
}

/* KEIN PLATTFORMZEICHEN OBEN AUF DER KARTE.
  Die Karte trug oben links eine Marke mit dem Zeichen der Plattform ·
  Discord, Twitch, Steam. Sie sagt nichts, was die Karte nicht ohnehin
  sagt: der Knopf nennt die Plattform in ihrer Farbe, und die Zeile
  unten nennt den Grund ("From your event calendar"). Nur die Anzeige
  behaelt ihre Marke, weil das Wort Sponsored dastehen MUSS. */
html body .post > .nx-hkopf:not(.nx-hkopf-ad){display:none}

/* DIE SITZUNGSKARTE BRICHT UM, STATT SICH ZU UEBERLAGERN.
  Gemessen bei 390 Punkten: die Fusszeile stand auf display:flex ohne
  flex-wrap · Satz und zwei Knoepfe passten nicht nebeneinander und
  schoben sich uebereinander. Und weil Flexbox reine Leerzeichen
  zwischen Flex-Kindern wegwirft, las der Satz "withLunaFoxandkevbot".
  Der Satz steht jetzt in einer eigenen Klammer (nxm-feedbauer.js), und
  die Zeile darf umbrechen.

  Der zweite Knopf schob sich mit margin-left:auto nach rechts · in
  einer umgebrochenen Zeile zieht das eine Luecke auf, die nichts
  trennt. In der ersten Zeile stehen Satz und Knoepfe, danach fliessen
  sie nach links. */
html body .post .nx-ses-foot{flex-wrap:wrap;gap:8px}
html body .post .nx-ses-foot > .nx-ses-mit{flex:1 1 100%}
html body .post .nx-ses-gg{margin-left:0}
/* DIE ECKE DER SITZUNGSKARTE · keine eigene Regel mehr. Das Ergebnis
  ("Victory 13-9") ist der Titel der Karte, die Ecke traegt Zeit und "…"
  wie ueberall und steht wie ueberall in der Kopfzeile. */

/* DIE NOTIZ STEHT UNTER DEN CLIPS, NICHT DANEBEN.
  Bei 390 Punkten blieb neben zwei Clips von je 96 Punkten ein Rest von
  rund 80 · dort quetschte sich "Session clips · captured moments land
  here SOON" ueber drei Zeilen. Zwei Spalten fuer die Clips, die Notiz
  darunter ueber die ganze Breite. Auch das Wort SOON steht dort ohne
  Datum · solange es keines gibt, sagt die Zeile nur, was sie sicher
  weiss. Die zwei Regeln dazu stehen im Telefonblock beim Knopfmass oben ·
  eine Schwelle je Datei. */

/* EINE KANTE, AUCH FUER DIE MARKIERUNG.
  Gemessen begann in einer Karte alles bei 16 Punkten · nur die
  Demo-Pille bei 24, weil sie einen Aussenabstand fuer den Fall traegt,
  dass sie HINTER einem Wert steht. Steht sie allein in ihrer Zeile,
  schiebt derselbe Abstand sie aus der Flucht. Acht Punkte reichen, dass
  eine Spalte unruhig wirkt. */
html body .post > .nx-demopill{margin-left:0}

/* DER NAME ALS WEG BRAUCHT EINEN FINGER.
  Steht der Name der Zielseite schon auf der Karte, traegt er den Weg ·
  eine zweite Zeile "Game page" braucht es dann nicht. Der Verweis mass
  62 auf 17 Punkte, treffbar mit der Maus, nicht mit dem Daumen.
  Polsterung und derselbe Betrag negativer Aussenabstand: die
  Trefferflaeche waechst auf 45 Punkte, die Zeile bleibt so hoch wie
  vorher. */
html body .post .nx-kartenweg-am-namen{display:inline-block;color:inherit;
  text-decoration:none;padding:14px 0;margin:-14px 0;vertical-align:baseline;
  position:relative;z-index:0}
/* DIE GEWACHSENE FLAECHE DARF DEM NACHBARN NICHTS WEGNEHMEN.
  Die 45 Punkte oben stimmen · sie ragen aber 7,2 Punkte ueber die Zeile
  hinaus, und dort steht der Name, der selbst ein Bedienelement ist
  (role=button). Gemessen auf der Karte kevbot/Counter-Strike 2: der
  Spiel-Link nahm dem Namensfeld auf 13,3 x 13 Punkten den Klick ab. Der
  Name liegt jetzt oben · wer ihn trifft, trifft ihn, und daneben bleibt
  die grosse Flaeche fuer den Daumen. */
html body .post .uname,html body .post .uname [role="button"]{position:relative;z-index:1}

/* EIN HASHTAG IM STROM (nxm-feedbauer.js, tag.moment) · der Tag als Kopf,
  darunter bis zu drei Beitraege, die ihn tragen, jeder mit Weg zur Quelle. */
.nx-tagm .nx-tagm-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--nx-hebung-2,#2d2d34);color:var(--txt);font:800 18px var(--nx-f-titel)}
.nx-tagm-liste{display:flex;flex-direction:column;gap:8px}
.nx-tagm-z{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--txt);
  border-radius:var(--nx-r-bedien);padding:6px;background:var(--nx-hebung,#1f1f24)}
.nx-tagm-z img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--nx-r-marke,6px);flex:none}
.nx-tagm-z span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--nx-typo-text);color:var(--dim)}
.nx-tagm-z b{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}

/* DIE TEILE, DIE AM TELEFON FEHLTEN.
  Diese Regeln standen nur in der Seiten-CSS von Home (.games-row, die
  Laenge auf dem Video, die Notiz des Presseartikels). Am Telefon stand die
  Mitspielerkarte deshalb 2088 Punkte hoch · vier Cover in voller Breite
  untereinander. Sie gehoeren der Karte, also stehen sie hier. */
html body .post .games-row{display:flex;gap:8px;margin:0 0 12px}
html body .post .games-row > .cover{flex:1;min-width:0;aspect-ratio:3/4}
html body .post .stars{display:flex;gap:4px;margin:0 0 12px}
html body .post .whym{color:var(--nx-text);cursor:help}
html body .post .banner > .nx-fm-dur{position:absolute;bottom:10px;right:12px;z-index:3;
  font:700 var(--nx-typo-klein) var(--nx-f-text);color:var(--text,#fff);background:var(--nx-glas);border-radius:var(--nx-r-marke);padding:2px 7px}
html body .post .nx-art-note{margin:0 0 12px;font:400 var(--nx-typo-meta)/1.45 var(--nx-f-text);color:var(--dim)}
html body .post .nx-updmore{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px}

/* MEHRERE MITSPIELER IN EINER KARTE (match.gruppe) · je Person eine Zeile:
  Bild, Name und Gemeinsames, darunter die Cover, rechts "Follow". Bei 332
  Punkten Spaltenbreite (Home bei 1024) standen Cover und Name
  nebeneinander, der Name schrumpfte auf "ni…" und die Cover zeigten
  "Cou" und "Ape". Die Cover sind hier klein und tragen keinen Namen. */
html body .post .nx-mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:center}
html body .post .nx-mrow > .av{grid-row:1 / span 2}
html body .post .nx-mrow > .nx-mrow-t{grid-column:2;grid-row:1}
html body .post .nx-mrow > .nx-mrow-g{grid-column:2;grid-row:2}
html body .post .nx-mrow > .btn{grid-column:3;grid-row:1 / span 2}
html body .post .nx-mrow-g .cover-name,html body .post .nx-mrow-g .grid-ov{display:none}
html body .post .nx-mrow-t > b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* DIE SAMMELKARTE EINER PLATTFORM (lfg, deal) · Zeilen als Text, eine
  Marke je Zeile hoechstens. Das Zeichen der Plattform steht im Knopf. */
html body .post .nx-sammel-liste{display:flex;flex-direction:column;margin:0 0 12px}
html body .post .nx-sammel-z{display:flex;align-items:center;gap:12px;padding:8px 0}
html body .post .nx-sammel-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:var(--nx-r-bedien);background:var(--nx-hebung-2);font:800 var(--nx-typo-meta) var(--nx-f-text);color:var(--txt)}
html body .post .nx-sammel-t{flex:1;min-width:0;display:flex;flex-direction:column}
html body .post .nx-sammel-t > b{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}
html body .post .nx-sammel-t > span{font:400 var(--nx-typo-meta)/1.45 var(--nx-f-text);color:var(--dim)}
html body .post .nx-sammel-marke{flex:none}

/* DIE ANKUENDIGUNG DES HAUSES · eine Zeile je Meldung unter einem Kopf. */
html body .post .nx-ann-zeile + .nx-ann-zeile{padding-top:12px}
html body .post .nx-ann-wann{margin:-6px 0 12px;font:400 var(--nx-typo-meta) var(--nx-f-text);color:var(--dim)}

/* EINE AKTIONSZEILE JE POST (Nr. C70, Entscheidung 06.10. "Knopf-Regel im
  Feed", Vorlage Dokumente/C70-FEED-KOMPAKT.png und C70-FEED-SOCIAL.png).
  Gebaut wird sie in nxm-feedbauer.js (aktionszeile, setzt auch das
  Absenderbild auf 32) · dieser Block ist der eine Besitzer ihres
  Aussehens und steht zuletzt, damit er die alten Regeln fuer .react und
  .actions oben schlaegt (Waehler eine Stufe genauer, ohne Vorrang).

    links   kleine graue Zeichen ohne Kasten (Reaktionen, Merken, Teilen,
            leise Knoepfe, Reply, "…"), 22 Punkte, gefuellt = Zustand;
            Tippflaeche --nx-h-bedien hoch, am Telefon 30 breit plus ein
            unsichtbarer Rand auf 42 (::after, wie der Umschalter Feed/Puls)
    rechts  genau EIN Hauptknopf, Pille, 36 Punkte hoch (am Telefon reicht
            die Tippflaeche unsichtbar auf 44)

  Die Telefonwerte stehen als Variablen in der EINEN Telefonschwelle oben
  (--nx-az-b, --nx-az-luecke, --nx-az-pad, --nx-az-rand).
  Innen eng (Kopf 8, Titel 2, Text 8), zwischen den Posts --nx-luecke-post
  (32, Raster auf Home, .m-feed am Telefon), keine Linie. */
html body article.post{--nx-az-ic:22px;--nx-az-knopf:36px}
html body article.post > .phead{margin-bottom:8px}
html body article.post > .phead > .av{border-radius:var(--nx-r-pille)}
html body article.post .nx-titel{margin-bottom:2px}
html body article.post > .btxt{margin-bottom:8px}
html body article.post > .banner{margin-bottom:8px}
/* DIE ZEIT STEHT IN DER ABSENDERZEILE · "kevbot · started · 8m". */
html body article.post .nx-quelle > .nx-ts{flex:none;order:0;margin:0;font:400 var(--nx-typo-klein)/1.4 var(--nx-f-text);color:var(--dim)}
html body article.post .nx-quelle > .nx-ts::before{content:"\00b7";margin-right:6px}
html body article.post .nx-quelle > .nxp-folgen{order:1}
/* DIE PLATTFORM ALS MARKE IM KOPF eines Social-Beitrags. */
html body article.post .nx-quelle > .chip.nx-kopf-marke:has(.nx-kopf-pf-wort){padding:2px 8px;border-radius:var(--nx-r-pille);
  background:var(--nx-hebung-2);color:var(--txt);font:700 var(--nx-typo-klein)/1.3 var(--nx-f-text)}

/* DIE ZEILE · ein Takt darueber: 8 Punkte nach dem letzten Inhalt,
  welcher es auch ist (Text, Bild, Liste, Fussnote). */
html body article.post > :has(+ .nx-az){margin-bottom:0}
html body article.post > .nx-az{display:flex;align-items:center;justify-content:space-between;gap:var(--nx-az-luecke,8px);
  margin:8px 0 0;padding:0;border:0;flex-wrap:wrap}
html body article.post > .nx-az > .react.nx-az-l{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--nx-az-l-luecke,var(--nx-luecke-knopf,8px));
  margin:0;padding:0;border:0;min-width:0;flex:0 1 auto;--nx-fk-ic:var(--nx-az-ic)}
html body article.post > .nx-az > .react.nx-az-l > :is(.rbtn,.nx-az-ic,.nx-ecke-mehr,.nxa-neben > .nxa-griff){box-sizing:border-box;position:relative;
  width:var(--nx-az-b,var(--nx-h-bedien));min-width:var(--nx-az-b,var(--nx-h-bedien));height:var(--nx-h-bedien);min-height:var(--nx-h-bedien);
  padding:0;margin:0;border:0;background:none;box-shadow:none;border-radius:var(--nx-r-bedien);
  display:inline-flex;align-items:center;justify-content:center;color:var(--nx-leise,var(--dim));flex:none;cursor:pointer}
html body article.post > .nx-az > .react.nx-az-l > :is(.rbtn,.nx-az-ic,.nx-ecke-mehr):not([data-nx-zahl])::after,
html body article.post > .nx-az > .react.nx-az-l > .nxa-neben > .nxa-griff::after{content:"";position:absolute;top:0;bottom:0;
  left:calc(-1 * var(--nx-az-rand,0px));right:calc(-1 * var(--nx-az-rand,0px))}
html body article.post > .nx-az > .react.nx-az-l > :first-child:is(.rbtn,.nx-az-ic){justify-content:flex-start;width:calc(var(--nx-az-ic) + 6px);min-width:calc(var(--nx-az-ic) + 6px)}
html body article.post > .nx-az > .react.nx-az-l :is(svg,img,.npic){width:var(--nx-az-ic);height:var(--nx-az-ic);max-height:none;flex:none}
html body article.post > .nx-az > .react.nx-az-l .npic{width:auto}
html body article.post > .nx-az > .react.nx-az-l > .nx-az-ic > .nx-qz{width:var(--nx-az-ic);height:var(--nx-az-ic);margin:0}
html body article.post > .nx-az > .react.nx-az-l :is(.nx-rw,.nxa-griff-w){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body article.post > .nx-az > .react.nx-az-l > .rbtn[data-nx-zahl]{width:auto;gap:4px;padding:0 4px}
/* Die Zahl der Antworten steht neben der Sprechblase wie die Zahl neben
  der Reaktion (Nr. C71) · nxm-antworten.js schreibt sie ab einer Antwort
  in .nxa-griff-n, das Wort bleibt verborgen. */
html body article.post > .nx-az > .react.nx-az-l > .nxa-neben > .nxa-griff:has(> .nxa-griff-n){width:auto;gap:4px;padding:0 4px}
html body article.post > .nx-az > .react.nx-az-l > .nxa-neben > .nxa-griff > .nxa-griff-n{display:inline;
  font:700 var(--nx-typo-meta)/1 var(--nx-f-text);color:var(--dim)}
html body article.post > .nx-az > .react.nx-az-l > .nxa-neben{display:inline-flex;flex:none}
@media (hover:hover){html body article.post > .nx-az > .react.nx-az-l > :is(.rbtn,.nx-az-ic,.nx-ecke-mehr):hover{color:var(--txt)}}
/* Gefuellt = Zustand: Merken setzt aria-pressed, die Reaktion ihre Farbe
  (nxm-react.js). */
html body article.post > .nx-az > .react.nx-az-l > [aria-pressed="true"]{color:var(--txt)}

/* DER EINE HAUPTKNOPF · Pille, 36 Punkte, rechts. Grau, lila fuer eine
  NEXTARI-Handlung; die Plattformfarbe setzt nxm-quellenzeichen.js am
  Knopf selbst. */
html body article.post > .nx-az > .actions.nx-az-r{display:flex;justify-content:flex-end;margin:0 0 0 auto;padding:0;gap:0;flex:0 1 auto;min-width:0}
html body article.post > .nx-az > .actions.nx-az-r > .nx-az-haupt{box-sizing:border-box;position:relative;height:var(--nx-az-knopf);min-height:var(--nx-az-knopf);
  padding:0 var(--nx-az-pad,16px);margin:0;border:0;border-radius:var(--nx-r-pille);display:inline-flex;align-items:center;gap:0;white-space:nowrap;
  font:700 var(--nx-typo-meta)/1 var(--nx-f-text);text-decoration:none;box-shadow:none;max-width:100%;
  background:var(--nx-hebung-2);background-image:none;color:var(--txt);cursor:pointer}
html body article.post > .nx-az > .actions.nx-az-r > .nx-az-haupt[data-nx-knopfart="nx"]{background:var(--nx-akzent);color:var(--txt)}
html body article.post > .nx-az > .actions.nx-az-r > .nx-az-haupt > :is(svg,img){width:15px;height:15px;max-height:none;margin-right:6px;flex:none}
html body article.post > .nx-az > .actions.nx-az-r > .nx-az-haupt::after{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--nx-az-hit,0px));bottom:calc(-1 * var(--nx-az-hit,0px))}

/* DAS MENUE HINTER DEM "…" (Entscheidung 06.10. "Reaktionen"): in der
  Zeile steht nur das Herz, "Epic" und "Not for me" stehen hier, darunter
  Melden/Stummschalten, wo der Waehler laeuft. Gebaut in nxm-feedbauer.js
  (aktionszeile), es klappt ueber der Zeile auf, auf der zweiten Flaeche.
  Hier stehen die Woerter sichtbar neben ihrem Zeichen. */
html body article.post > .nx-az{position:relative}
html body article.post > .nx-az > .react.nx-az-l > .nx-az-menu{position:absolute;left:0;bottom:100%;z-index:5;
  display:flex;flex-direction:column;gap:0;min-width:12em;padding:6px;margin:0;
  background:var(--nx-flaeche-2);border-radius:var(--nx-r-karte);box-shadow:none}
html body article.post > .nx-az > .react.nx-az-l > .nx-az-menu[hidden]{display:none}
html body article.post > .nx-az > .react.nx-az-l > .nx-az-menu > .nx-az-mi{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:10px;
  width:100%;height:var(--nx-h-bedien);min-height:var(--nx-h-bedien);padding:0 10px;margin:0;border:0;background:none;
  border-radius:var(--nx-r-bedien);color:var(--txt);font:700 var(--nx-typo-meta)/1 var(--nx-f-text);text-align:left;white-space:nowrap;cursor:pointer}
html body article.post > .nx-az > .react.nx-az-l > .nx-az-menu > .nx-az-mi .nx-rw{position:static;display:inline;width:auto;height:auto;overflow:visible;clip:auto}
@media (hover:hover){html body article.post > .nx-az > .react.nx-az-l > .nx-az-menu > .nx-az-mi:hover{background:var(--nx-hebung)}}
/* Melden steht nur da, wo der Waehler laeuft (js/nextari-home.10-report.js
  setzt html.nx-melden) · sonst waere es ein Knopf, der nichts oeffnet. */
html:not(.nx-melden) body article.post > .nx-az > .react.nx-az-l > .nx-az-menu > .nx-az-melden{display:none}
/* Seit C82 traegt das "…" nur noch Melden · wo der Waehler nicht laeuft,
  stuende es leer da, also steht es dort nicht. */
html:not(.nx-melden) body article.post > .nx-az > .react.nx-az-l > .nx-ecke-mehr{display:none}

/* DAS PIXELHERZ UND SEINE WAHL (C82, nxm-feedbauer.js aktionszeile). Das
  Herz steht auf der Textkante wie vorher das erste Zeichen; seine
  Tippflaeche ist mindestens --nx-h-bedien breit (am Telefon 44). Die Wahl
  klappt direkt am Herz ueber der Zeile auf (unten, wenn oben kein Platz
  ist), drei kleine Pixelzeichen, je eine volle Tippflaeche. */
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-knopf{box-sizing:border-box;position:relative;
  width:calc(var(--nx-az-ic) + 6px);min-width:calc(var(--nx-az-ic) + 6px);height:var(--nx-h-bedien);min-height:var(--nx-h-bedien);
  padding:0;margin:0;border:0;background:none;box-shadow:none;border-radius:var(--nx-r-bedien);
  display:inline-flex;align-items:center;justify-content:flex-start;color:var(--nx-leise,var(--dim));flex:none;cursor:pointer}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-knopf::after{content:"";position:absolute;top:0;bottom:0;left:0;width:max(100%,var(--nx-h-bedien))}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-knopf > .nx-rz-herz{width:var(--nx-az-ic);height:auto;image-rendering:pixelated}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-knopf[aria-pressed="true"]{color:var(--txt)}
@media (hover:hover){html body article.post > .nx-az > .react.nx-az-l > .nx-rz-knopf:hover{color:var(--txt)}}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl{position:absolute;left:0;bottom:100%;z-index:6;
  display:flex;flex-direction:row;gap:4px;padding:4px;margin:0 0 4px;
  background:var(--nx-flaeche-2);border-radius:var(--nx-r-karte);box-shadow:none}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl[hidden]{display:none}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl.nx-rz-unten{bottom:auto;top:100%;margin:4px 0 0}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl > .rbtn{box-sizing:border-box;position:relative;
  width:var(--nx-h-bedien);min-width:var(--nx-h-bedien);height:var(--nx-h-bedien);min-height:var(--nx-h-bedien);
  padding:0;margin:0;border:0;border-radius:var(--nx-r-bedien);display:inline-flex;align-items:center;justify-content:center;
  color:var(--nx-leise,var(--dim));cursor:pointer}
html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl > .rbtn[aria-pressed="true"]{background:var(--nx-hebung)}
@media (hover:hover){html body article.post > .nx-az > .react.nx-az-l > .nx-rz-wahl > .rbtn:hover{background:var(--nx-hebung)}}
html body article.post > .nx-az > .react.nx-az-l :is(.nx-rz-knopf,.nx-rz-wahl > .rbtn):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* SOCIAL: hoechstens zwei Zeilen Text, Bild in voller Breite, hochkant
  schmal, die Freundeszeile leise darunter. */
html body article.post.nx-social > .btxt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--txt)}
html body article.post.nx-social > .banner.nx-fm-hoch{width:min(56%,260px);aspect-ratio:9/16;height:auto}
html body article.post.nx-social > .nx-fm-freunde{margin:0 0 4px;font:400 var(--nx-typo-meta)/1.4 var(--nx-f-text);color:var(--dim)}