/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.07 */
/* DIE FREMDEN WERTE BLEIBEN UNSICHTBAR, BIS DIE RICHTIGEN DA SIND
  (js/nextari-game-detail.01-gd-warten.js setzt die Sperre, nxm-werk.js hebt
  sie auf). Ohne den Ankunfts-Schleier sah man sonst Cyberpunks Bild, Genres
  und Sterne, bevor das angefragte Spiel kam. Die Bilder tragen ihr Motiv im
  style-Attribut, das schlaegt background-image:none · deshalb visibility,
  das auch den Platz haelt. */
html.nx-gd-wert .hmeta .mblk b,html.nx-gd-wert .metabox,html.nx-gd-wert .score,html.nx-gd-wert .gchips,html.nx-gd-wert .hdev,html.nx-gd-wert #stores{visibility:hidden}
html.nx-gd-warten .htitle,html.nx-gd-warten .cur,html.nx-gd-warten .packshot .nm,html.nx-gd-wert .hdesc{visibility:hidden}
html.nx-gd-warten .heroBg,html.nx-gd-warten .packshot{visibility:hidden}
b,strong{font-weight:700}
body{font-family:'Nunito Sans',sans-serif;color:var(--txt);background:var(--bg);min-height:100vh;position:relative;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.4;z-index:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:3px 3px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#26263a;border-radius:var(--nx-r-bedien)}
.crumb{max-width:var(--nx-breite);margin:0 auto;padding:16px var(--nx-rand) 0;position:relative;z-index:2;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);align-items:center;gap:8px}
.crumb .cur{color:#fff}
/* Der Hero zeichnet seinen Rahmen selbst · er steht deshalb auf der Inhaltskante
  der Reihen (Block minus beidseitiger Rand), nicht auf der Blockkante. */
/* Gemessen Radius 16 · das ist weder die 14 der Tafeln noch die 18 der
  Blockflaechen, und 50 Flaechen dieser Seite liegen auf 14. Der Hero ist
  die grosse Blockflaeche der Seite, also 18. Die Zahl steht hier
  ausgeschrieben statt als var(--radius), weil dieselbe Marke sonst
  Tafeln und Blockflaechen zugleich setzen muesste. */
.hero{position:relative;margin:16px auto 0;overflow:hidden;z-index:1}
.heroBg{position:absolute;inset:0;background:linear-gradient(120deg,#1a1602,#d4b106 125%)}
.heroBg .ov{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:30px 30px}
/* Der Verlauf hinter der Schrift. Links steht der Titel, rechts die Laeden
  · seit die Laeden keinen eigenen Kasten mehr haben (OHNE KAESTEN, unten),
  traegt der Verlauf auch rechts die Schrift. Die Mitte bleibt hell, dort
  zeigt das Artwork sich. Am Telefon laeuft er von unten (Block unten). */
.heroBg .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,13,.9),rgba(8,8,13,.5) 50%,rgba(8,8,13,.85) 75%),linear-gradient(0deg,rgba(8,8,13,.6),transparent 50%)}
.herorow{z-index:1;display:flex;gap:24px;flex-wrap:wrap}
.packshot{width:200px;aspect-ratio:3/4;border-radius:var(--nx-r-tafel);position:relative;overflow:hidden;flex:none;}
.packshot .ovg{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(0,0,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.5) 1px,transparent 1px);background-size:18px 18px}
/* GESEHEN: der Spielname stand im Hero dreimal · als Logo im Cover-Bild, als
  schwarzer Balken unten auf demselben Cover und als Ueberschrift daneben.
  FALSCH WAR: das Cover traegt seinen Namen selbst, und der Balken verdeckte
  dafuer das untere Viertel des Bildes. Der Schriftzug bleibt im Markup · er
  ist die Quelle, aus der das Cover-Bild geholt wird (nxm-app-aktionen.js liest
  .packshot .nm) · aber er wird nicht mehr gemalt. visibility statt display,
  damit der Text lesbar bleibt, wo Skripte ihn brauchen. */
.packshot .nm{position:absolute;left:12px;right:12px;bottom:12px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);visibility:hidden}
.hinfo{flex:1;}
/* Gemessen stand der sichtbare Titel auf 34/700, das versteckte h1
  derselben Seite auf 32/800. 34 kam auf der ganzen Seite sonst kein
  einziges Mal vor · der Titel machte damit eine eigene Sprosse auf, die
  die Leiter nicht kennt, und sagte zugleich zwei verschiedene Groessen
  fuer denselben Namen. Der Hero ist von der Typo-Leiter ausgenommen,
  also ist diese Regel hier der einzige Besitzer. */
.htitle{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-seite);color:#fff;line-height:1.05}
.w2palert{display:flex;align-items:center;gap:16px;padding:16px 16px;border-radius:var(--nx-r-tafel);font-size:var(--nx-typo-kartenkopf);line-height:1.4;font-weight:700}
.w2palert.wait{background:rgba(255,197,61,.10);color:#ffd778}
.w2palert.deal{background:rgba(59,227,122,.10);color:#7af0a6}
.w2palert.info{background:var(--nx-hebung);color:var(--nx-text)}
.w2palert svg{flex:0 0 auto}
.w2pbest{display:flex;align-items:center;gap:16px;padding:16px 16px;border-radius:var(--nx-r-tafel);background:linear-gradient(135deg,rgba(59,227,122,.12),rgba(255,255,255,.03));border:1px solid rgba(59,227,122,.28)}
.w2pbest-l{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.w2pbest-lbl{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.w2pbest-via{font-size:var(--nx-typo-text);color:var(--dim);margin-top:1px}
.w2pbest-price{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:var(--green);white-space:nowrap}
.w2psubs-lbl{font-size:var(--nx-typo-text);color:var(--faint);font-weight:700;margin:0px 2px 2px}
.w2psubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.w2psub{display:flex;align-items:center;gap:16px;padding:16px 16px;border-radius:var(--nx-r-tafel);background:var(--surface2);border:1px solid var(--line)}
.w2psub-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.w2psub-main{flex:1;min-width:0}
.w2psub-svc{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.w2psub-tier{font-size:var(--nx-typo-meta);color:var(--dim);margin-top:1px}
/* Das Abo-Etikett stand auf 11,5 px und Radius 16 · ein Etikett traegt
  10,5 und Radius 999, und 16 gibt es in der Hausregel nicht. */
.w2psub-st{font-size:var(--nx-typo-klein);font-weight:700;padding:4px 9px;border-radius:var(--nx-r-pille);white-space:nowrap}
.w2psub.included .w2psub-st{background:rgba(59,227,122,.15);color:#7af0a6}
.w2psub.leaving .w2psub-st{background:rgba(255,77,109,.15);color:#ff8da3}
.w2psub.coming .w2psub-st{background:rgba(52,229,216,.13);color:#7af0e8}
.hdev{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:rgba(255,255,255,.72);margin-top:8px}
.gchips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
/* Die Genre-Marken stehen von Anfang an in ihrer Pillenform (Schriftleiter,
  Pillenmass aus nxm-bedienung.js). Vorher bekamen sie die Form erst, wenn
  die Laufzeit-Module sie gestempelt hatten · nxm-werk.js schreibt die
  echten Genres neu, und die frischen Marken standen dazwischen gross und
  zweizeilig: am Telefon sprang der Spielkopf um 60 Punkte. */
.gchip{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);line-height:1;color:#fff;background:var(--nx-hebung-2);padding:0 9px;min-height:22px;display:inline-flex;align-items:center;box-sizing:border-box;border-radius:var(--nx-r-pille);cursor:pointer}
@media (hover:hover){.gchip:hover{background:rgba(255,255,255,.22)}}
/* GESEHEN: die vier Faktenkacheln der zweiten Zeile im Hero (Mode, Age
  rating, Players at peak, Metascore) sassen auf drei verschiedenen Oberkanten
  und hatten drei verschiedene Hoehen. FALSCH WAR: align-items:center haengt
  jede Kachel an ihrer eigenen Mitte auf, und die Kachel mit der Quellenzeile
  ist hoeher als die ohne. Gestreckt teilen sich alle Kacheln einer Zeile
  Oberkante und Hoehe. */
.hmeta{display:flex;margin-top:16px;flex-wrap:wrap;align-items:stretch}
.mblk{font-size:var(--nx-typo-meta);color:rgba(255,255,255,.65)}
.mblk b{display:block;font-family:var(--nx-f-text);color:#fff;font-size:var(--nx-typo-kartenkopf);margin-top:2px}
.score{display:flex;align-items:center;gap:8px}
.metabox{width:46px;height:46px;border-radius:var(--nx-r-bedien);background:var(--green);color:#06210f;font-family:var(--nx-f-titel);font-weight:700;font-size:22px;display:grid;place-items:center}
.cstars{display:flex;align-items:center;gap:8px;font-size:var(--nx-typo-meta);color:rgba(255,255,255,.7);margin-top:4px}
.hact{display:flex;gap:var(--nx-luecke-knopf) var(--nx-luecke-wort);margin-top:16px;flex-wrap:wrap;align-items:center}
@media (hover:hover){.btn:hover{background:rgba(255,255,255,.16)}}
.btn.primary{border:none;box-shadow:none}
@media (hover:hover){.btn.primary:hover{transform:translateY(-2px)}}
.pricechip{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;background:rgba(8,8,13,.45);border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:var(--nx-r-karte)}
.pricechip b{color:var(--green)}
.hdesc{margin-top:16px;font-size:var(--nx-typo-text);line-height:1.55;color:rgba(255,255,255,.78);max-width:680px}
.section{max-width:var(--nx-breite);margin:0 auto 40px;padding:20px var(--nx-rand);position:relative;z-index:1}
.shead h3{display:flex;align-items:center;gap:8px}
.shead .note{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;margin-left:8px}
/* EINE FORM FUER 'SEE ALL' · sie stand in zwei Groessen nebeneinander.
  Gemessen auf Games: 81x34 und 68x22 in derselben Ansicht, beide als
  blosser Umriss. Die Groesse kam nicht von hier, sondern davon, ob
  nxm-bedienung.js den Knopf als Pille erkannte oder nicht · zwei
  Besitzer auf einer Form. Jetzt steht sie hier: eine Hoehe, eine
  Fuellung, und mit 34 Punkten auch am Daumen zu treffen. */
.seeall{min-height:34px;padding:0 14px;border-radius:999px;background:var(--nx-hebung);transition:.15s}
@media (hover:hover){.seeall:hover{background:var(--nx-hebung);}}
@media (hover:hover){.seeall:hover{color:#fff}}
.buynote{font-size:var(--nx-typo-meta);color:var(--faint);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.storerow{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--nx-r-karte);margin-bottom:8px;transition:.15s;background:var(--nx-hebung)}
.storerow:last-child{margin-bottom:0}
@media (hover:hover){.storerow:hover{border-color:var(--line2)}}
.storerow.best{border-color:rgba(59,227,122,.45);background:rgba(59,227,122,.05)}
.slogo{width:42px;height:42px;border-radius:var(--nx-r-karte);display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;flex:none}
.sname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.smeta{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.disc{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--txt);background:var(--nx-hebung);padding:2px 8px;border-radius:var(--nx-r-bedien)}
.besttag{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#06210f;background:var(--green);padding:2px 8px;border-radius:var(--nx-r-bedien);white-space:nowrap}
.sprice{margin-left:auto;text-align:right;min-width:78px}
.sprice .now{font-family:var(--nx-f-titel);font-weight:700;font-size:var(--nx-typo-abschnitt);color:#fff}
.sprice .was{font-size:var(--nx-typo-meta);color:var(--faint);text-decoration:line-through}
/* EIN GEFUELLTER KNOPF JE GRUPPE (Nr. C66, 05.10.). Die Ladenliste trug fuenf
  violette "Buy", die Editionen drei, Merch sechs "Shop" · gefuellt ist nur
  der Weg zum besten Preis, die anderen stehen auf der Flaeche. */
.buybtn{box-shadow:none;flex:none}
@media (hover:hover){.buybtn:hover{transform:translateY(-1px)}}
.edgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.edcard{border:1px solid var(--line);padding:16px;background:var(--nx-hebung);transition:.15s}
@media (hover:hover){.edcard:hover{border-color:var(--line2);transform:translateY(-3px)}}
.edname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.edsub{font-size:var(--nx-typo-text);color:var(--dim);margin-top:8px;line-height:1.5;min-height:36px}
.edfoot{display:flex;align-items:center;margin-top:16px;gap:16px}
.edprice{font-family:var(--nx-f-titel);font-weight:700;font-size:var(--nx-typo-abschnitt);color:#fff}
.media{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:16px;scroll-snap-type:x proximity}
.media::-webkit-scrollbar{height:7px}
.media::-webkit-scrollbar-thumb{background:#222234;border-radius:var(--nx-r-bedien)}
.media>*{flex:0 0 250px;scroll-snap-align:start}
/* Kalendertag und Abo-Kasten standen auf 12, waehrend alle grossen
  Kartenklassen der Seite auf 14 liegen · siehe die beiden Regeln
  weiter unten. Die Bildkachel bekommt ihre Form von
  css/nextari-karten.css und hatte sie hier ein zweites Mal stehen;
  die Zeile ist raus, damit es einen Besitzer gibt. */
.mtile{flex:0 0 300px;scroll-snap-align:start;aspect-ratio:16/9;border:1px solid var(--line);cursor:default;}
.mtile.trailer[data-nx-trailer]{cursor:pointer}
@media (hover:hover){.mtile:hover{transform:translateY(-2px);border-color:var(--line2)}}
.mtile .ov{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:20px 20px}
.mtile.trailer .play{position:absolute;inset:0;margin:auto;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,14,.70);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mtile .lab{position:absolute;left:10px;bottom:8px;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 8px;border-radius:var(--nx-r-bedien)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.grid.live{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{padding:16px;}
@media (hover:hover){.card:hover{border-color:var(--line2);}}
.ctop{display:flex;align-items:center;gap:16px}
.cname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.cmeta{font-size:var(--nx-typo-meta);color:var(--faint)}
.pinfo{margin-top:16px;font-size:var(--nx-typo-text);color:var(--dim);line-height:1.7}
.pinfo b{color:#fff}
.cbtns{display:flex;gap:8px;margin-top:16px}
.cbtn{flex:1;text-align:center;}
@media (hover:hover){.cbtn:hover{color:#fff;background:var(--nx-hebung)}}
.lcard{background:var(--nx-hebung);border:1px solid var(--line);border-radius:var(--nx-r-tafel);}
@media (hover:hover){.lcard:hover{border-color:var(--line2);}}
.lthumb{aspect-ratio:16/9;position:relative}
.lgrid{position:absolute;opacity:.13;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:22px 22px}
.lbadge{position:absolute;top:10px;left:10px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#fff;background:var(--live);padding:0px 8px;border-radius:var(--nx-r-bedien);display:flex;align-items:center;gap:8px}
.live-pulse{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.lview{position:absolute;top:10px;right:10px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-meta);color:#fff;background:rgba(8,8,14,.6);padding:0px 8px;border-radius:var(--nx-r-bedien);display:flex;align-items:center;gap:4px}
.lbody{padding:16px 16px;display:flex;align-items:center;gap:16px}
.lmeta .t{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.lmeta .g{font-size:var(--nx-typo-meta);color:var(--faint)}
.watch{margin-left:auto;width:38px;height:38px;border-radius:var(--nx-r-bedien);border:none;cursor:pointer;display:grid;place-items:center;color:#fff;background:var(--accent);flex:none}
.newscard{display:flex;gap:16px;align-items:center;padding:16px;transition:.15s}
@media (hover:hover){.newscard:hover{border-color:var(--line2)}}
.newsthumb{width:84px;height:56px;border-radius:var(--nx-r-bedien);position:relative;overflow:hidden;flex:none}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab{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);padding:8px 16px;border-radius:var(--nx-r-pille);border:1px solid var(--line);background:var(--nx-hebung);cursor:pointer}
@media (hover:hover){.tab:hover{color:var(--txt);border-color:var(--line2)}}
.tab.on{color:#fff;border-color:transparent;background:var(--accent)}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.scard{border:1px solid var(--line);border-radius:var(--nx-r-karte);overflow:hidden;background:var(--surface);transition:.15s;cursor:pointer}
@media (hover:hover){.scard:hover{transform:translateY(-2px);border-color:var(--line2)}}
.sthumb{aspect-ratio:16/9;position:relative}
.sbody{padding:16px 16px}
.sttl{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;line-height:1.3}
.smeta2{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:4px}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.gcard{position:relative;cursor:pointer}
@media (hover:hover){.gcard:hover{border-color:var(--line2)}}
.gcover{aspect-ratio:3/4;position:relative}
.gcover .ov{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);background-size:18px 18px}
.gcover .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.gname{position:absolute;left:12px;right:12px;bottom:12px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* Die Bewertungskarte ist ein eigenes Element, kein Anhaengsel der letzten
  Reihe · sie bekommt denselben Takt wie die Reihen darueber (52/46).
  Vorher lag sie mit 32px oben und 0 unten zwischen Inhalt und Fuss und
  klebte an beidem. */
.muted{color:var(--faint);font-size:var(--nx-typo-text)}
.sstar{cursor:pointer;color:var(--nx-leise)}
@media (hover:hover){.sstar:hover{color:var(--nx-text)}}
.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)}
.footer{z-index:1;margin-top:32px;}
.finner{max-width:var(--nx-breite);margin:0 auto;padding:88px var(--nx-rand) 72px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.5fr;gap:24px}
.fcol h4{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;margin-bottom:16px;}
.fcol a{display:block;font-size:var(--nx-typo-text);color:var(--dim);padding:4px 0}
.fbr .logo{margin-bottom:0}
.fbarin{max-width:var(--nx-breite);margin:0 auto;padding:16px var(--nx-rand);display:flex;gap:16px;flex-wrap:wrap;font-size:var(--nx-typo-meta);color:var(--faint)}
@media(max-width:820px){.finner{grid-template-columns:1fr 1fr}}
/* "Offers & add-ons" ist ein Etikett · es sagt, dass es Angebote gibt,
  und hat keinen Klick. Gemessen stand es mit Radius 12 und einem 1 px
  starken Goldring am Ende einer Zeile aus sechs 40 px hohen
  Bedienelementen und sah dadurch aus wie ein misslungener Knopf. Die
  Hoehe bleibt die eines Etiketts · ein Zustand darf nie aussehen wie
  etwas, das man druecken kann. Der Ring faellt weg: getrennt wird mit
  der Flaeche, nicht mit einer Linie. */
/* GESEHEN: "Offers & add-ons" war die einzige goldene Flaeche der Seite ·
  Gold kam sonst nirgends vor, und die Flaeche stand am Ende einer Zeile aus
  lauter gleich aussehenden Knoepfen. FALSCH WAR: eine Farbe, die genau
  einmal auftaucht, bedeutet nichts · sie ist Dekoration. Die Flaeche traegt
  jetzt denselben ruhigen Grund wie ihre Nachbarn, das Gold sitzt am Zeichen,
  wo es etwas heisst. Hoehe, Schrift und Rundung stehen hier NICHT: das
  Element traegt data-nx-pille, und das Mass gehoert dem Pillenvertrag des
  Hauses · zwei Besitzer auf einer Zahl waeren ein Flackern. */
.offerchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--txt);background:var(--nx-hebung);border:0;padding:4px 9px;border-radius:var(--nx-r-pille);cursor:pointer}
.offerchip svg{color:var(--gold)}
.offerbox{border:1px solid rgba(255,197,61,.3);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,197,61,.05),rgba(16,16,25,.6));padding:16px}
.offernote{font-size:var(--nx-typo-meta);color:var(--faint);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.presswrap{display:flex;flex-direction:column;gap:16px;margin-bottom:2px}
.pressagg{display:flex;align-items:center;gap:16px;border-radius:var(--nx-r-tafel);background:linear-gradient(120deg,rgba(255,255,255,.03),rgba(16,16,25,.3));padding:16px 16px}
.pressscore{width:60px;height:60px;border-radius:var(--nx-r-tafel);display:grid;place-items:center;font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-seite);color:#fff;flex:none}
.pressagg .pa-t{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.pressagg .pa-s{font-size:var(--nx-typo-text);color:var(--dim);margin-top:4px;line-height:1.4}
.pressgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.presscard{border-radius:var(--nx-r-karte);background:var(--nx-hebung);padding:16px 16px 16px;position:relative;overflow:hidden}
.presscard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc)}
.presscard .mag{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.presscard .scv{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:#fff;margin-top:4px}
.presscard .scv small{font-size:var(--nx-typo-text);color:var(--dim);font-weight:700}
.presscard .vs{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:8px}
.offgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.merchnote{font-size:var(--nx-typo-meta);color:var(--faint);display:flex;align-items:center;gap:8px;margin-bottom:16px;line-height:1.5}
.merchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.merchcard{overflow:hidden;background:var(--surface);cursor:pointer;transition:transform .2s,border-color .2s}
@media (hover:hover){.merchcard:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:none}}
/* GESEHEN: sechs Merch-Kacheln mit je einem eigenen Regenbogen-Verlauf und
  einem riesigen Emoji darauf · eine Diskette fuer eine Relic-Chip-Nachbildung,
  ein Strichmaennchen fuer eine Statue zu 149,99. FALSCH WAR: das war das
  Bunteste und Groesste der Seite, bunter als das Cover des Spiels, und ein
  Emoji ist kein Produktfoto, sondern ein Platzhalter. Solange keine echten
  Bilder da sind, steht hier dieselbe graue Flaeche wie bei einer leeren Reihe;
  Name und Preis darunter sagen, worum es geht. Echte Haendlerbilder
  (.nx-merch-bild) setzen ihren eigenen Grund und bleiben unberuehrt. */
.merchthumb{aspect-ratio:1/1;position:relative;display:grid;place-items:center;font-size:0;background:var(--nx-hebung)}
.merchthumb .ovg{position:absolute;inset:0;opacity:.12;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:20px 20px}
/* DIE KACHELMARKE SAGT DASSELBE WIE DAS GEMALTE BILD.
  Diese Regel nannte 9 px, Polsterung 4/8 und Radius 8, gemalt wurden
  10,5 px, 0/9 und 999 · das Etikettmass des Hauses kommt von
  nxm-bedienung.js und gewinnt mit Vorrang. Eine Regel, die etwas
  anderes behauptet als das Bild zeigt, wird beim naechsten Messen
  geglaubt und fuehrt in die Irre. */
.merchcat{position:absolute;top:9px;left:9px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#fff;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:var(--nx-r-pille);z-index:2}
/* Die Kachel des Creators sagt es in seiner Farbe · gold heisst bei uns
  "hier steckt eine Beteiligung drin", und beim eigenen Shop des Creators
  steckt sie gerade nicht drin. */
.merchad.nx-merch-creator{background:rgba(8,8,14,.62);color:var(--nx-weiss,#fff)}
/* EINE OFFENLEGUNG WIRBT NICHT FUER SICH SELBST.
  "Partner link" stand im Vollton-Gold auf der Kachel und war damit das
  zweite gefuellte Element jeder Merch-Karte · daneben der gefuellte
  Shop-Knopf, und die Karte hatte zwei Hauptsachen. Ein Etikett traegt
  einen durchscheinenden Grund; die Bedeutung bleibt in der FARBE der
  Schrift, und die ist unveraendert Gold. Denselben Grund traegt jetzt
  auch die Kachelmarke links · ein Etikett, ein Grund. */
.merchad{position:absolute;top:9px;right:9px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);letter-spacing:0.9px;color:var(--nx-weiss,#fff);background:rgba(8,8,14,.62);padding:4px 9px;border-radius:var(--nx-r-pille);z-index:2}
.merchbody{padding:16px 16px 16px}
.merchname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--txt);line-height:1.25;min-height:33px}
.merchret{font-size:var(--nx-typo-klein);color:var(--faint);margin-top:4px;display:flex;align-items:center;gap:4px}
.merchfoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.merchprice{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
/* Gemalt wird dieser Knopf mit 12,5 px, Polsterung 0/14 und Radius 10 ·
  dem Knopfmass des Hauses. Die Regel nannte 11,5, 8/16 und 8. */
.merchbtn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--nx-text,#fff);background:var(--nx-hebung);border:none;padding:0 14px;border-radius:var(--nx-r-bedien);cursor:pointer;display:flex;align-items:center;gap:8px}
.nxgrpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:16px}
.nxgrp{display:flex;align-items:center;gap:16px;border-radius:var(--nx-r-tafel);background:var(--surface);padding:16px 16px;transition:border-color .15s}
@media (hover:hover){.nxgrp:hover{border-color:var(--line2)}}
.nxgrp .gav{width:44px;height:44px;border-radius:var(--nx-r-karte);display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf);color:#fff;flex:none}
.nxgrp .gmeta{flex:1;min-width:0}
.nxgrp .gnm{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nxgrp .gmem{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:4px;display:flex;align-items:center;gap:4px}
.nxjoin{flex:none;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-bedien);border:1px solid var(--line2);color:var(--nx-text);background:var(--nx-hebung);cursor:pointer}
@media (hover:hover){.nxjoin:hover{color:#fff;border-color:var(--nx-linie)}}
.nxjoin.on{background:var(--accent);border:none;color:#fff}
.offcard{border-radius:var(--nx-r-tafel);overflow:hidden;background:var(--surface);transition:.15s}
@media (hover:hover){.offcard:hover{border-color:rgba(255,197,61,.45);transform:translateY(-3px)}}
.offcard.hot{border-color:rgba(255,197,61,.55);box-shadow:0 0 0 1px rgba(255,197,61,.2)}
.offthumb{aspect-ratio:16/8;position:relative}
.offthumb .ov{position:absolute;inset:0;opacity:.13;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:18px 18px}
.offtag{position:absolute;top:9px;left:9px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);padding:0px 8px;border-radius:var(--nx-r-bedien);background:var(--gold);color:#1a1505}
.offbody{padding:16px 16px}
.offname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.offdesc{font-size:var(--nx-typo-meta);color:var(--dim);margin-top:0px;line-height:1.45;min-height:32px}
.offfoot{display:flex;align-items:center;margin-top:16px;gap:8px}
.offprice{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.getbtn{margin-left:auto;padding:8px 16px;border:none;border-radius:var(--nx-r-bedien);cursor:pointer;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#1a1505;background:var(--gold);display:flex;align-items:center;gap:8px;transition:.15s}
@media (hover:hover){.getbtn:hover{transform:translateY(-1px)}}
.crumb{padding-top:40px}
.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}
.cta, .btn-primary, .btnghost, .btnconn, .btndanger, .chjoin, .ab1, .ab2, .go, .play, .lfgjoin, .abtn, .sendbtn, .pbtn, .unblock, .adcta, .segbtn, .tab, .fchip, .catchip, .achip, .crefollow, .pmbtn, .seeall, .cqrbtn, .mmf .f, .tips .tip, .f{line-height:1}
.discgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:16px}
.disccard{border:1px solid var(--line);border-radius:var(--nx-r-tafel);background:var(--nx-hebung);padding:16px 16px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:16px}
@media (hover:hover){.disccard:hover{border-color:var(--line2);transform:translateY(-2px)}}
.dsrc{display:flex;align-items:center;gap:8px}
.dsrclogo{width:32px;height:32px;border-radius:var(--nx-r-bedien);flex:none;display:grid;place-items:center}
.dsrcname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.dsrcsub{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:2px}
.dtime{margin-left:auto;font-size:var(--nx-typo-meta);color:var(--faint);flex:none}
.dtitle{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;line-height:1.32}
.dexcerpt{font-size:var(--nx-typo-text);color:var(--dim);line-height:1.5}
.dmeta{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.dstat{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);line-height:1}
.dstat svg{color:var(--faint)}
.dright{margin-left:auto;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--nx-text);display:flex;align-items:center;gap:4px}
.dpinned{margin-left:auto;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--gold);border:1px solid rgba(255,197,61,.3);background:rgba(255,197,61,.08);padding:0px 8px;border-radius:var(--nx-r-bedien)}
.nx-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:var(--nx-flaeche-2);border:1px solid rgba(255,255,255,0.14);color:#fff;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:16px 16px;border-radius:var(--nx-r-karte);box-shadow:var(--nx-schatten);opacity:0;transition:.25s;z-index:9600}
.nx-toast.show{opacity:1;transform:translate(-50%,0)}
.rbtn.on{color:var(--nx-text);border-color:var(--nx-linie);background:var(--nx-hebung)}
[data-nx].nx-on{color:#80efa9!important;border-color:rgba(59,227,122,.4)!important}
.nx-modal{position:fixed;inset:0;background:rgba(4,4,8,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;place-items:center;z-index:9500;padding:16px}
.nx-modal.open{display:grid}
.nx-mbox{width:430px;max-width:94vw;background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:24px;box-shadow:var(--nx-schatten);text-align:center}
.nx-mbox h3{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:var(--txt);margin:0 0 8px}
.nx-mbox p{font-family:'Nunito Sans',sans-serif;font-size:14px;color:var(--dim);line-height:1.55;margin:0 0 18px}
.nx-mact{display:flex;gap:8px;justify-content:center}
.nx-mbtn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-karte);border:1px solid rgba(255,255,255,.1);background:var(--nx-hebung);color:var(--txt);cursor:pointer}
.nx-mbtn.pri{background:var(--accent);border-color:transparent;color:#fff}
.nx-pulse{display:flex;gap:8px;justify-content:center;margin:6px 0 18px}
.nx-pulse i{width:9px;height:9px;border-radius:50%;background:#5b27e8;animation:nxp 1s infinite alternate}
.nx-pulse i:nth-child(2){animation-delay:.2s}
.nx-pulse i:nth-child(3){animation-delay:.4s}
@keyframes nxp{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.nx-thread{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:8px}
.nx-thread .row{display:flex;gap:8px}
.nx-thread input{flex:1;background:var(--nx-hebung);border:1px solid rgba(255,255,255,.09);border-radius:var(--nx-r-bedien);padding:8px 16px;color:var(--txt);font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text);outline:none}
.nx-thread input:focus{border-color:var(--accent)}
.nx-thread .send{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-bedien);border:none;background:var(--accent);color:#fff;cursor:pointer}
.nx-cmt{font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text);color:var(--txt);background:var(--nx-hebung);border:1px solid var(--nx-linie-subtle);border-radius:var(--nx-r-bedien);padding:8px 16px}
.nx-cmt b{font-family:var(--nx-f-text);color:var(--nx-text);font-weight:700}
.nx-postcard{background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:16px;margin:0 0 16px;animation:nxin .35s}
.nx-postcard .ph{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--nx-f-text)}
.nx-postcard .ph b{color:var(--txt);font-size:14px}
.nx-postcard .ph span{color:var(--dim);font-size:var(--nx-typo-text)}
.nx-postcard p{font-family:'Nunito Sans',sans-serif;color:var(--txt);font-size:14px;line-height:1.55;margin:0}
@keyframes nxin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.nx-rows{max-width:var(--nx-breite);margin:0 auto;padding:32px var(--nx-rand)}
.nx-rows .rh{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.nx-rows h2{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:var(--txt);margin:0}
.nx-rows .sub{font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text);color:var(--dim)}
.nx-rowgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.nx-rowgrid{grid-template-columns:1fr}}
.nx-rowcard{background:var(--nx-flaeche);border:1px solid rgba(255,255,255,.07);border-radius:var(--nx-r-tafel);padding:16px;display:flex;flex-direction:column;gap:8px;}
@media (hover:hover){.nx-rowcard:hover{border-color:var(--nx-linie)}}
.nx-rowcard .top{display:flex;align-items:center;gap:8px}
.nx-rowcard .rav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;flex:none}
.nx-rowcard .ti b{display:block;font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf);color:var(--txt)}
.nx-rowcard .ti span{font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text);color:var(--dim)}
.nx-rowcard .picks{display:flex;gap:8px;flex-wrap:wrap}
.nx-rowcard .pk{font-family:var(--nx-f-text);font-size:var(--nx-typo-meta);font-weight:700;color:var(--dim);border:1px solid rgba(255,255,255,.09);border-radius:var(--nx-r-bedien);padding:4px 8px}
.nx-rowcard .foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.nx-rowcard .subs{font-family:var(--nx-f-text);font-size:var(--nx-typo-text);color:var(--dim)}
.nx-sub{margin-left:auto;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-karte);border:none;cursor:pointer;background:var(--accent);color:#fff;transition:.15s}
.nx-sub.nx-on{background:rgba(59,227,122,.12);border:1px solid rgba(59,227,122,.4);color:#80efa9}
.nx-soon{position:fixed;inset:0;top:36px;background:rgba(6,6,11,.78);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:grid;place-items:center;z-index:9000;padding:16px}
.nx-soonbox{text-align:center;max-width:480px}
.nx-soonpill{display:inline-block;font-family:var(--nx-f-text);font-size:var(--nx-typo-klein);font-weight:800;letter-spacing:var(--nx-sperrung);color:var(--nx-text);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-bedien);padding:8px 16px;margin-bottom:16px;text-transform:uppercase}
.nx-soonbox h2{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-seite);color:#fff;margin:0 0 10px;letter-spacing:-.01em}
.nx-soonbox p{font-family:'Nunito Sans',sans-serif;font-size:14px;color:var(--dim);line-height:1.6;margin:0 0 22px}
.nx-soonact{display:flex;gap:8px;justify-content:center}
.nx-cartdot{position:absolute;top:-4px;right:-6px;min-width:15px;height:15px;border-radius:8px;background:#5b27e8;color:#fff;font:800 var(--nx-typo-klein) var(--nx-f-text);display:flex;align-items:center;justify-content:center;padding:0 4px}
.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}
.mtile.trailer .play{transition:transform .15s}
@media (hover:hover){.mtile.trailer:hover .play{transform:scale(1.12)}}
.mtile.nx-embed{background:#000;cursor:default}
@media (hover:hover){.mtile.nx-embed:hover{transform:none}}
.mtile.nx-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:2}
/* GESEHEN: auf der Trailer-Kachel lag die Beschriftung "Trailer" genau auf
  den Worten "OFFICIAL TRAILER" im Bild · beide waren dort unleserlich.
  FALSCH WAR: das Bild sagt schon, was es ist, und der Abspielknopf in der
  Mitte sagt es ein zweites Mal. Die Beschriftung geht, das Bild bleibt. */
.mtile.nx-embed .ov,.mtile.nx-embed .play,.mtile.nx-embed .lab,.mtile.trailer .lab{display:none}
html,body{max-width:100%}
/* · overflow-x:hidden am HTML macht das Dokument zum Scrollbehaelter,
  und darin klebt nichts mehr: Kopfzeile und Sprungleiste liefen auf dem Telefon
  einfach mit nach oben weg. Nach dem ersten Wischen gab es keine Navigation mehr.
  overflow-x:clip schneidet genauso, macht aber keinen Behaelter · position:sticky
  bleibt am Leben. Gemessen auf sieben Seiten. */
@media(max-width:900px){html{overflow-x:clip}body{overflow-x:clip}}
img,video,iframe{max-width:100%}
@media(max-width:760px){
  /* Der Rand am Telefon steht in nextari.css (--nx-rand 0, --nx-breite
  100% - 28) und gilt fuer jede Seite gleich · hier steht keiner mehr. */
  /* Kopf und Brotkrumen hatten --nx-rand als EINZIGEN Rand · mit 0 stand
  der Kopf mit runden Ecken am Bildschirmrand. Sie bekommen den Rand von
  <main> ausdruecklich, damit alles auf einer Kante steht (Logo: 14) ·
  der Kopf in seiner eigenen Telefonregel weiter unten. */
  .crumb{max-width:none;margin-left:0;margin-right:0;padding-left:14px;padding-right:14px}
  .nx-demobar{height:auto;min-height:30px;line-height:1.25;padding:8px 16px;font-size:var(--nx-typo-meta);text-align:center;flex-wrap:wrap;position:sticky;top:0}
  .nx-demobar .nx-db-sep{display:none}
  .nx-demobar .nx-db-partner{flex-basis:100%}
  
}
@media(max-width:900px){
  .shell{display:block;max-width:100%}
  
  .col-main,.col-center,main{width:auto;max-width:100%;margin:0}
  
  .grid2,.grid3,.twocol,.threecol,.split,.cols{grid-template-columns:1fr;display:grid}
}
@media(max-width:760px){
  
  
  .bento .sptile{min-height:150px}
  .bento .sptile.big{min-height:210px}
  
}
@media(max-width:480px){
  
  .bento .sptile{min-height:180px}
  
}
@media(max-width:760px){
  
  .lfgband{padding:16px 16px;gap:8px}
  .convtop,.peerbar,.chathead{flex-wrap:wrap}
  .thhead{flex-wrap:wrap;row-gap:8px}
  .thpres{display:block;line-height:1.5}
  .thpres .pdot{display:inline-block;vertical-align:middle;margin-right:8px}
  .thactions{margin-left:0}
  
  .chips,.actions,.btnrow,.metarow,.pillrow{flex-wrap:wrap}
}
@supports (height:100svh){
  body{min-height:100svh}
}
.nx-demobar{height:auto;min-height:38px;box-sizing:border-box;
            padding-top:calc(env(safe-area-inset-top));
            padding-bottom:0;}
@media(max-width:900px){
  .nx-demobar{min-height:0;padding-top:calc(6px + env(safe-area-inset-top));}
  .shell{padding-left:max(14px,env(safe-area-inset-left));
         padding-right:max(14px,env(safe-area-inset-right))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:900px){
  input,textarea,select{font-size:var(--nx-typo-kartenkopf)}
}
.nx-db-persp::before{content:"Preview as";font-family:var(--nx-f-text);font-weight:800;
  font-size:var(--nx-typo-meta);color:var(--nx-text);
  padding:0 12px 0 10px}
.nx-db-persp-tab{display:inline-flex;align-items:center;padding:8px 20px;border-radius:var(--nx-r-pille);
  font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);
  color:var(--dim);text-decoration:none;background:var(--nx-hebung);
  border:1px solid transparent;transition:.15s;line-height:1.2}
@media(max-width:600px){
  .nx-db-persp{bottom:18px;padding:8px;gap:4px}
  .nx-db-persp::before{font-size:var(--nx-typo-klein);padding:0 8px 0 6px}
  
  .nx-db-persp-tab{padding:6px 12px;font-size:var(--nx-typo-meta)}
}
.nx-biasfree{display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-f-text);
  font-weight:700;font-size:var(--nx-typo-klein);letter-spacing:.02em;color:var(--green,#3be37a);
  background:rgba(59,227,122,.09);
  padding:3px 8px;border-radius:var(--nx-r-bedien);white-space:nowrap;cursor:help;line-height:1}
@media(max-width:600px){.nx-biasfree{font-size:var(--nx-typo-klein);padding:3px 8px}}
.ov{inset:1px!important;background-position:9px 9px}
.grid-ov,.banner-grid,.agrid,.bb-grid,.lgrid,.ovg,.t10grid2{
  inset:1px!important;background-position:7px 7px}
.fclaim .fcl1{font-weight:400;font-size:var(--nx-typo-text);line-height:1.4}
.console-cta{
  background:var(--accent);
  border:1.5px solid var(--nx-linie);color:#fff;
  font-weight:800;
  box-shadow:none
             0 0 26px -8px rgba(91,39,232,.55)}
@media (hover:hover){.console-cta:hover{transform:translateY(-1px);
  background:var(--accent);
  box-shadow:none
             0 0 34px -6px rgba(91,39,232,.7)}}
.nxc-go{padding:10px 18px;border-radius:var(--nx-r-bedien);border:none;background:var(--accent,#5b27e8);color:#fff;font-size:var(--nx-typo-text);font-weight:700;cursor:pointer;font-family:inherit}
.ff-t.on{background:var(--nx-hebung);border-color:var(--nx-linie);color:#fff}
.btn, .chip-f, .sf, .cta, .soontag{white-space:nowrap}
#nx-loader .nxl-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;max-width:88vw;padding:10px 16px;border-radius:var(--nx-r-pille);background:var(--nx-hebung);position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,0.14);font:700 var(--nx-typo-text)/1.35 "Nunito Sans",sans-serif;color:var(--nx-text2);text-align:left;white-space:nowrap}
@media(max-width:560px){#nx-loader .nxl-note{white-space:normal;text-align:center;max-width:84vw}}
.fbk{max-width:none}
.nx-rwrap{position:relative}
.nx-rctrls{position:absolute;top:8px;right:8px;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:7}
.nx-rwrap:hover .nx-rctrls{opacity:1;pointer-events:auto}
.nx-rbtn{width:26px;height:26px;border-radius:var(--nx-r-bedien);border:1px solid rgba(255,255,255,0.14);background:var(--nx-grund);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--nx-typo-meta);line-height:1;transition:.15s ease}
@media (hover:hover){.nx-rbtn:hover{color:#fff;border-color:var(--nx-linie);background:var(--nx-hebung)}}
.nx-rwrap .rtitle,.nx-rwrap .rhead{transition:padding-right .15s ease}
@media (hover:hover){.nx-rwrap:hover .rtitle,.nx-rwrap:hover .rhead{padding-right:72px}}
#rails .railpromo{margin-bottom:16px}
.nx-rgrip{cursor:grab}
.nx-rgrip:active{cursor:grabbing}
.nx-rdragging{opacity:.4}
.nx-rover{box-shadow:inset 0 4px 0 -1px #5b27e8}
.nx-rover-b{box-shadow:inset 0 -4px 0 -1px #5b27e8}
.nx-add2{position:relative;margin:0 0 12px;border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:16px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--dim);cursor:pointer;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);transition:.15s ease;background:var(--nx-hebung)}
@media (hover:hover){.nx-add2:hover{border-color:var(--nx-linie);color:#fff;background:var(--nx-hebung-2)}}
.nx-pop2{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-karte);padding:8px;box-shadow:none;z-index:50;text-align:left;max-height:280px;overflow:auto}
.nx-pi2{padding:8px 16px;border-radius:var(--nx-r-bedien);color:var(--txt);font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:var(--nx-typo-text);cursor:pointer;white-space:nowrap}
@media (hover:hover){.nx-pi2:hover{background:var(--nx-hebung)}}
.nx-pi2h{color:var(--dim);font-size:var(--nx-typo-klein);padding:8px 16px 4px}
.nx-live{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:8px;background:var(--nx-hebung);border:1px solid var(--line);border-radius:var(--nx-r-tafel);padding:16px 16px;margin:0 0 16px;font-family:'Nunito Sans',sans-serif}
.nx-live-dot{width:9px;height:9px;border-radius:50%;background:#3be37a;animation:nxpulse 1.8s infinite;flex:0 0 auto}
@keyframes nxpulse{0%{box-shadow:none}70%{box-shadow:0 0 0 7px rgba(59,227,122,0)}100%{box-shadow:none}}
.nx-live.paused .nx-live-dot{background:#62627a;animation:none}
.nx-live-tx{font-size:var(--nx-typo-text);color:var(--txt);font-weight:700;font-family:var(--nx-f-text)}
.nx-live-sub{font-size:var(--nx-typo-meta);color:var(--dim)}
.nx-speed{display:flex;align-items:center;gap:0px;margin-left:auto}
.nx-sp{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-meta);color:var(--dim);cursor:pointer;padding:8px 16px;border-radius:var(--nx-r-bedien);border:1px solid rgba(255,255,255,.07);background:transparent;transition:.15s ease}
@media (hover:hover){.nx-sp:hover{color:#fff;border-color:var(--nx-linie)}}
.nx-sp.nx-on{color:#fff;background:var(--nx-hebung);border-color:var(--nx-linie)}
.nx-live.paused .nx-sp{opacity:.4;pointer-events:none}
.nx-pausebtn{margin-left:8px;display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;cursor:pointer;padding:8px 16px;border-radius:var(--nx-r-bedien);border:1px solid rgba(255,255,255,0.14);background:var(--nx-hebung);transition:.15s ease;flex:0 0 auto}
@media (hover:hover){.nx-pausebtn:hover{background:var(--nx-hebung);border-color:var(--nx-linie)}}
.nx-new{animation:nxnew .55s ease}
@keyframes nxnew{0%{opacity:0;transform:translateY(-10px);box-shadow:0 0 0 1px var(--nx-linie)}100%{opacity:1;transform:none;box-shadow:none}}
.nx-loader{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0 6px;color:var(--dim);font-family:'Nunito Sans',sans-serif;font-size:var(--nx-typo-text)}
.nx-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,0.12);border-top-color:var(--nx-linie);border-radius:50%;animation:nxspin .8s linear infinite;flex:0 0 auto}
@keyframes nxspin{to{transform:rotate(360deg)}}
.nx-loader.hidden{display:none}
.nx-demobar{position:sticky;top:0;z-index:600;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-family:var(--nx-f-text);font-size:var(--nx-typo-meta);padding:8px 16px;box-shadow:var(--nx-schatten)}
.nx-demobar svg{flex:0 0 auto}
.nx-db-tag{font-weight:800}
.nx-db-sep{opacity:.5;font-weight:700;margin:0 2px}
.nx-db-partner{font-weight:700}
.nx-demobar a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
@media (hover:hover){.nx-demobar a:hover{opacity:.85}}
.nx-demo-fab{position:fixed;right:22px;bottom:22px;z-index:700;display:inline-flex;align-items:center;gap:8px;padding:16px 16px;border-radius:var(--nx-r-pille);background:var(--accent);color:#fff;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);letter-spacing:.3px;text-decoration:none;box-shadow:var(--nx-schatten);border:1px solid rgba(255,255,255,.18);transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.nx-demo-fab:hover{transform:translateY(-2px);box-shadow:var(--nx-schatten)}}
.nx-demo-fab svg{flex:0 0 auto}
.nx-noti.open{opacity:1;transform:translateY(0);pointer-events:auto}
.nx-noti-head b{font-family:var(--nx-f-text);font-size:14px;color:var(--txt)}
@media (hover:hover){.nx-noti-item:hover{background:var(--nx-hebung)}}
.nx-fb-badge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;vertical-align:middle;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--nx-text);background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:4px 8px;white-space:nowrap}
@keyframes nxFbDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.footer{background:transparent;border-top:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden}
.app~footer.footer .finner{max-width:none;margin:0;padding-left:40px;padding-right:40px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@keyframes nxOnlineGlow{0%,100%{box-shadow:none}50%{box-shadow:none}}
.pb-reset{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--nx-r-pille);border:1px solid rgba(255,255,255,.25);background:var(--nx-hebung);color:#fff;font:700 var(--nx-typo-meta) var(--nx-f-text);cursor:pointer;transition:background .15s}
.nxn-clear{border-radius:var(--nx-r-pille);padding:4px 12px;border:1px solid rgba(255,255,255,0.14);background:var(--nx-hebung);color:var(--nx-text);font:700 var(--nx-typo-klein) var(--nx-f-text);cursor:pointer;transition:background .15s}
.nxn-ic{cursor:default}
.nxn-ic svg{cursor:default}
.nx-results{display:flex;flex-direction:column;gap:10px}
.nx-res-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--nx-r-karte);background:var(--surface);}
.nx-res-l{display:flex;align-items:center;gap:12px}
.nx-res-tag{flex:none;font:800 var(--nx-typo-klein) var(--nx-f-text);padding:4px 8px;border-radius:var(--nx-r-bedien);background:var(--nx-hebung);color:var(--nx-text)}
.nx-res-tag.live{background:#d81b45;color:#fff}
.nx-res-tx{display:flex;flex-direction:column;gap:2px}
.nx-res-tx b{font:700 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt)}
.nx-res-tx span{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-res-t{font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);text-align:right}
.nx-ev-card{display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.nx-ev-when{font:800 var(--nx-typo-meta) var(--nx-f-text);color:var(--nx-text)}
.nx-ev-n{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt);margin-top:3px}
.nx-ev-m{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim);margin-top:4px;line-height:1.4}
.nx-ev-btn{align-self:flex-start;background:var(--accent,#5b27e8);color:#fff;border:none;border-radius:var(--nx-r-bedien);padding:8px 16px;font:700 var(--nx-typo-text) var(--nx-f-text);cursor:pointer}
@media (hover:hover){.nx-ev-btn:hover{filter:brightness(1.1)}}
.nx-rightnow{max-width:var(--nx-breite);margin:16px auto 20px;padding:0 var(--nx-rand)}
.nx-rn-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nx-rn-pulse{width:9px;height:9px;border-radius:50%;background:#ff2d55;box-shadow:none;animation:nxpulse 1.8s infinite}
@keyframes nxpulse{0%{box-shadow:none}70%{box-shadow:0 0 0 9px rgba(255,45,85,0)}100%{box-shadow:none}}
.nx-rn-label{font:800 var(--nx-typo-abschnitt) var(--nx-f-text);color:var(--txt)}
.nx-rn-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
/* Die Karte der Reihe ist eine Tafel · gemessen stand sie als einzige
  neben dem Hero auf 16. */
.nx-rn-hero{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--nx-r-tafel);text-decoration:none;background:linear-gradient(135deg,transparent,rgba(52,229,216,.08));overflow:hidden;transition:.15s}
@media (hover:hover){.nx-rn-hero:hover{transform:translateY(-1px);background:linear-gradient(135deg,transparent,rgba(52,229,216,.14))}}
.nx-rn-tag{font:800 var(--nx-typo-klein) var(--nx-f-text);padding:4px 9px;border-radius:var(--nx-r-pille);align-self:flex-start}
/* EIN ZUSTAND HAT EINE FARBE, NICHT ZWEI.
  Dieses Rot war ein zweites neben dem Haus-Rot --live, mit dem jede
  andere LIVE-Marke der Plattform gesetzt wird · derselbe Zustand sah an
  zwei Stellen verschieden aus. */
.nx-rn-tag.live{background:var(--live,#d81b45);color:#fff}
.nx-rn-hero-main{font:800 var(--nx-typo-abschnitt)/1.2 var(--nx-f-titel);color:#fff;margin-top:2px}
.nx-rn-hero-sub{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:rgba(255,255,255,.72)}
/* "Jump in" war das einzige weiss gefuellte Bedienelement der Seite ·
  die dreizehn anderen gefuellten Knoepfe tragen das Haus-Violett. Weiss
  neben der roten Zustandsmarke machte aus einer Karte zwei
  Hauptsachen. */
.nx-rn-cta{margin-top:8px;align-self:flex-start;background:var(--accent,#5b27e8);color:#fff;border-radius:var(--nx-r-bedien);padding:8px 20px;font:800 var(--nx-typo-klein) var(--nx-f-text)}
.nx-rn-side{display:flex;flex-direction:column;gap:10px}
.nx-rn-side > .nx-rn-card{flex:1 1 auto}
.nx-rn-card{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--nx-r-tafel);text-decoration:none;background:var(--surface);border:1px solid var(--line,rgba(255,255,255,.08));transition:.15s}
@media (hover:hover){.nx-rn-card:hover{border-color:var(--nx-linie);transform:translateX(2px)}}
.nx-rn-dot{flex:none;width:9px;height:9px;border-radius:50%}
.nx-rn-dot.red{background:#ff2d55}
.nx-rn-dot.purple{background:#9146ff}
.nx-rn-dot.orange{background:#ff4500}
.nx-rn-card b{display:block;font:700 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt)}
.nx-rn-card span:not(.nx-rn-dot){font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim)}
@media(max-width:820px){.nx-rn-grid{grid-template-columns:1fr}}
.nx-buywrap{position:relative;display:inline-block}
#buy[aria-expanded="true"]{filter:brightness(1.1)}
.nx-storemenu{position:absolute;top:calc(100% + 8px);left:0;z-index:200;width:360px;max-width:90vw;background:var(--surface);border-radius:var(--nx-r-tafel);box-shadow:var(--nx-schatten);padding:6px;display:none;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.nx-storemenu.open{display:block;opacity:1;transform:translateY(0)}
.nx-sm-head{padding:12px 12px 10px}
.nx-sm-head b{display:block;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt)}
.nx-sm-head span{display:block;margin-top:3px;font:400 var(--nx-typo-text)/1.4 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-sm-row{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:var(--nx-r-bedien);text-decoration:none;transition:.15s}
@media (hover:hover){.nx-sm-row:hover{background:var(--nx-hebung)}}
.nx-sm-row.best{background:rgba(52,229,216,.08);}
.nx-sm-dot{flex:none;width:10px;height:10px;border-radius:4px}
.nx-sm-name{flex:1;font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);display:flex;align-items:center;gap:8px}
.nx-sm-badge{font:700 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);background:var(--nx-hebung);padding:2px 6px;border-radius:var(--nx-r-bedien)}
.nx-sm-price{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}
.nx-sm-price s{color:var(--dim);font-weight:400;margin-right:2px}
.nx-sm-tag{flex:none;font:800 var(--nx-typo-klein) var(--nx-f-text);padding:4px 8px;border-radius:var(--nx-r-bedien);background:#34e5d8;color:#0a0a12}
.nx-sm-tag.offer{background:#ff8a3d;color:#fff}
.nx-sm-foot{padding:10px 12px 8px;font:400 var(--nx-typo-meta)/1.4 'Nunito Sans',sans-serif;color:var(--dim);border-top:1px solid var(--line,rgba(255,255,255,.08));margin-top:4px}
.nx-pricechip-btn{cursor:pointer;transition:.15s}
@media (hover:hover){.nx-pricechip-btn:hover{filter:brightness(1.12)}}
.nx-pc-cmp{font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-klein);color:var(--nx-text);margin-left:5px;border-bottom:1px dotted currentColor}
.nx-ph-slot{background:var(--nx-hebung);border:1px dashed rgba(255,255,255,.13);border-radius:var(--nx-r-tafel);min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box}
.nx-ph-slot::before{content:"";width:26px;height:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.nx-ph-slot .nx-ph-txt{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:rgba(255,255,255,.26)}
.nx-ph-img{background:var(--nx-hebung);border:none;position:relative}
.nx-ph-img::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;opacity:.55;pointer-events:none}
.nx-cal{background:var(--surface);border:1px solid var(--line,var(--nx-linie-subtle));border-radius:var(--nx-r-tafel);padding:20px 22px}
/* Der Kalender ist auf dieser Seite eine Reihe wie die dreizehn anderen, kein
  Kasten in einem Kasten: sein Kopf stand durch die Kartenpolsterung 23 weiter
  rechts als jeder andere Reihenkopf und brach die senkrechte Kante mitten auf
  der Seite. Die Tageskacheln tragen ihre eigene Flaeche · die Huelle darum
  zeigte nichts, was sie nicht schon zeigen. */
.section > .nx-cal{background:none;border:0;border-radius:0;padding:0}
/* Reihenkoepfe tragen auf NEXTARI kein Sinnbild (css/nx-handschrift.css blendet
  das svg in .shead h2/h3 aus). Die Kalenderkachel war das letzte und schob
  "This week" um 46 nach rechts, waehrend fuenfzehn andere Reihentitel auf
  derselben Kante beginnen. */
.section > .nx-cal > .nx-cal-head > .nx-cal-ic{display:none}
.nx-cal-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.nx-cal-head .nx-cal-ic{width:34px;height:34px;border-radius:var(--nx-r-bedien);background:var(--nx-hebung);display:grid;place-items:center;color:var(--nx-text);flex:none}
.nx-cal-head h3{font-family:var(--nx-f-titel);font-weight:700;font-size:var(--nx-typo-abschnitt);margin:0;color:#fff}
.nx-cal-head .nx-cal-sub{font-size:var(--nx-typo-text);color:var(--dim);margin-top:2px}
/* "View more" ist ein Wortknopf: kein seitliches Polster, das Wort endet auf
  der Kante der Tageskarte darunter (vorher 10 Punkte davor). Die Tippflaeche
  waechst unsichtbar um --nx-luecke-knopf nach aussen. */
.nx-cal-head .nx-cal-all{position:relative;margin-left:auto;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--nx-text);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 0;border-radius:var(--nx-r-bedien);transition:.15s}
.nx-cal-head .nx-cal-all::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--nx-luecke-knopf) * -1);right:calc(var(--nx-luecke-knopf) * -1)}
@media (hover:hover){.nx-cal-head .nx-cal-all:hover{color:#fff}}
.nx-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.nx-cal-day{background:var(--surface2);padding:12px 10px 14px;min-height:132px;cursor:pointer;transition:.15s;display:flex;flex-direction:column}
@media (hover:hover){.nx-cal-day:hover{transform:translateY(-2px);background:var(--nx-hebung-2)}}
.nx-cal-day.today{background:var(--nx-hebung-2);box-shadow:inset 0 2px 0 var(--accent)}
.nx-cal-dname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--dim)}
.nx-cal-day.today .nx-cal-dname{color:var(--nx-text)}
.nx-cal-dnum{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:#fff;margin-top:2px;line-height:1}
.nx-cal-dots{display:flex;flex-direction:column;gap:4px;margin-top:11px}
.nx-cal-ev{display:flex;align-items:center;gap:6px;font-size:var(--nx-typo-klein);color:var(--txt);line-height:1.2;overflow:hidden;cursor:pointer;border-radius:var(--nx-r-bedien);padding:1px 3px;margin:0 -3px;transition:background .15s}
@media (hover:hover){.nx-cal-ev:hover{background:var(--nx-hebung)}}
.nx-cal-ev .d{width:6px;height:6px;border-radius:50%;flex:none}
.nx-cal-ev .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-cal-ev.stream .d{background:var(--accent)}
.nx-cal-ev.content .d{background:#34e5d8}
.nx-cal-ev.event .d{background:#ff8a3d}
.nx-cal-more{font-size:var(--nx-typo-klein);color:var(--dim);margin-top:auto;padding-top:6px}
.nx-cal-empty{font-size:var(--nx-typo-klein);color:rgba(255,255,255,.22);margin-top:11px}
.nx-cal-legend{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
.nx-cal-lg{display:flex;align-items:center;gap:8px;font-size:var(--nx-typo-meta);color:var(--dim)}
.nx-cal-lg .d{width:8px;height:8px;border-radius:50%}
.nx-cal-lg.stream .d{background:var(--accent)}
.nx-cal-lg.content .d{background:#34e5d8}
.nx-cal-lg.event .d{background:#ff8a3d}
.nx-calov{position:fixed;inset:0;background:rgba(6,6,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99999;display:none;align-items:flex-start;justify-content:center;padding:48px 24px;overflow-y:auto}
.nx-calov.on{display:flex}
.nx-calov-box{background:var(--surface);border:1px solid var(--line2,rgba(255,255,255,0.14));border-radius:var(--nx-r-tafel);max-width:960px;width:100%;padding:28px 30px;position:relative;box-shadow:var(--nx-schatten)}
.nx-calov-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.nx-calov-head h3{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);margin:0;color:#fff}
.nx-calov-nav{margin-left:auto;display:flex;align-items:center;gap:8px;margin-right:44px}
.nx-calov-nav button{width:36px;height:36px;border-radius:var(--nx-r-bedien);border:1px solid var(--line,var(--nx-linie-subtle));background:var(--surface2);color:var(--txt);cursor:pointer;font-size:var(--nx-typo-kartenkopf);display:grid;place-items:center;transition:.15s}
@media (hover:hover){.nx-calov-nav button:hover{border-color:var(--line2,var(--nx-linie));color:#fff}}
.nx-calov-nav .nx-calov-month{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);min-width:150px;text-align:center;color:#fff}
.nx-calov-close{position:absolute;top:22px;right:24px;width:34px;height:34px;border-radius:var(--nx-r-bedien);border:1px solid var(--line,var(--nx-linie-subtle));background:var(--surface2);color:var(--dim);cursor:pointer;font-size:var(--nx-typo-abschnitt);display:grid;place-items:center;transition:.15s;z-index:2}
@media (hover:hover){.nx-calov-close:hover{color:#fff;border-color:var(--line2,var(--nx-linie))}}
.nx-calov-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.nx-calov-dow{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-meta);color:var(--dim);text-align:center;padding:6px 0}
.nx-calov-cell{background:var(--surface2);border:1px solid var(--line,var(--nx-linie-subtle));border-radius:var(--nx-r-bedien);min-height:96px;padding:8px;display:flex;flex-direction:column;gap:4px}
.nx-calov-cell.out{opacity:.35}
.nx-calov-cell.today{border-color:var(--nx-linie);background:var(--nx-hebung)}
.nx-calov-cellnum{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.nx-calov-cell.out .nx-calov-cellnum{color:var(--dim)}
.nx-calov-pill{font-size:var(--nx-typo-klein);line-height:1.25;padding:3px 6px;border-radius:var(--nx-r-bedien);display:flex;align-items:center;gap:4px;overflow:hidden;cursor:pointer;transition:filter .15s}
@media (hover:hover){.nx-calov-pill:hover{filter:brightness(1.25)}}
.nx-calov-pill .d{width:5px;height:5px;border-radius:50%;flex:none}
.nx-calov-pill .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-calov-pill.stream{background:var(--nx-hebung)}
.nx-calov-pill.stream .d{background:var(--accent)}
.nx-calov-pill.content{background:rgba(52,229,216,.12)}
.nx-calov-pill.content .d{background:#34e5d8}
.nx-calov-pill.event{background:rgba(255,138,61,.12)}
.nx-calov-pill.event .d{background:#ff8a3d}
.nx-calov-legend{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line,var(--nx-linie-subtle))}
.grid.live .lcard{display:flex;flex-direction:column}
.grid.live .lbody{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:1}
.grid.live .lbody-row{display:flex;align-items:flex-start;gap:12px}
.nx-watch{width:100%;height:40px;box-shadow:none;margin-top:auto}
@media (hover:hover){.nx-watch:hover{transform:translateY(-1px)}}
.nx-watch .nx-watch-lbl{white-space:nowrap}
.ltw{display:inline-flex;align-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#fff;background:#9146ff;padding:2px 8px;border-radius:var(--nx-r-bedien);margin-right:8px;vertical-align:middle}
.disccard.nx-src-open{transition:border-color .15s,transform .15s}
@media (hover:hover){.disccard.nx-src-open:hover{border-color:var(--nx-linie);transform:translateY(-1px)}}
.disccard .dright{color:var(--nx-text);font-weight:700}
.scard.nx-src-open{transition:transform .15s,box-shadow .15s}
@media (hover:hover){.scard.nx-src-open:hover{transform:translateY(-2px);box-shadow:none}}
.scard .sopen{margin-top:6px;font:700 var(--nx-typo-meta) var(--nx-f-text);color:var(--nx-text)}
.nx-caps-gd{max-width:var(--nx-breite);margin:0 auto 16px;padding:0 var(--nx-rand)}
.nx-caps{padding:16px 18px 14px}
.nx-cap-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px}
.nx-cap-t{display:flex;align-items:center;gap:12px;min-width:0}
.nx-cap-t .pi-lead{margin:0;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff}
.nx-cap-t svg{flex:none}
.nx-cap-hint{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);white-space:nowrap;flex:none}
.nx-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 22px;align-items:start}
.nx-cap-row{display:flex;align-items:center;gap:8px;font:400 var(--nx-typo-text)/1.4 'Nunito Sans',sans-serif;color:var(--txt)}
.nx-cap-row svg{color:#3be37a;flex:none}
.nx-cap-vs{margin-top:13px;padding-top:12px;border-top:1px solid var(--line,var(--nx-linie-subtle))}
.nx-cap-vs-p{margin:0;font:400 var(--nx-typo-text)/1.45 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-cap-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--dim);font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;flex:none}
.nx-cap-chev{transition:transform .15s ease}
.nx-caps-collapsed .nx-cap-chev{transform:rotate(180deg)}
.nx-caps-collapsed .nx-cap-grid,.nx-caps-collapsed .nx-cap-vs{display:none}
.nx-caps-collapsed .nx-cap-top{margin-bottom:0}
@media(max-width:1100px){.nx-cap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nx-cap-grid{grid-template-columns:1fr}.nx-cap-top{flex-direction:column;align-items:flex-start;gap:6px}}
.nx-bridge{max-width:var(--nx-breite);margin:32px auto 0;padding:0 var(--nx-rand)}
.nx-bridge-in{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line,var(--nx-linie-subtle));border-radius:var(--nx-r-tafel);padding:16px 18px}
.nx-bridge-i{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--nx-r-bedien);flex:none;background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.13);color:var(--nx-text)}
.nx-bridge-t{min-width:0}
.nx-bridge-t b{display:block;font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff;margin-bottom:2px}
.nx-bridge-t span{display:block;font:400 var(--nx-typo-text)/1.45 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-bridge-b{margin-left:auto;flex:none;text-decoration:none;font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-bedien);padding:8px 16px;transition:.15s}
@media (hover:hover){.nx-bridge-b:hover{background:var(--nx-hebung)}}
@media(max-width:640px){.nx-bridge-in{flex-wrap:wrap}.nx-bridge-b{margin-left:0;width:100%;text-align:center}}
.nx-ownerbar{max-width:var(--nx-breite);margin:32px auto 0;padding:0 var(--nx-rand)}
.nx-ownerbar-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line,var(--nx-linie-subtle));border-radius:var(--nx-r-tafel);padding:14px 18px}
.nx-ownerbar-b{font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff}
.nx-ownerbar-t{font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim);flex:1;min-width:220px}
.nx-ownerbar-a{margin-left:auto;flex:none;text-decoration:none;font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-bedien);padding:8px 16px;transition:.15s}
@media (hover:hover){.nx-ownerbar-a:hover{background:var(--nx-hebung)}}
@media(max-width:640px){.nx-ownerbar-a{margin-left:0}}
.pb-navlab{flex:none;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--nx-leise);padding-right:10px;margin-right:2px;border-right:1px solid rgba(255,255,255,.14)}
.nx-caps{margin-bottom:16px}
.nx-caps-pw{margin-bottom:8px}
.bigsearch{margin-bottom:10px}
.gchips,.chips{margin-bottom:8px}
body>.section{max-width:var(--nx-breite);}
.nx-own{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;padding:12px 16px;border-radius:var(--nx-r-tafel);border:1px solid rgba(59,227,122,.34);background:linear-gradient(135deg,rgba(59,227,122,.10),rgba(52,229,216,.05))}
.nx-own.warn{border-color:rgba(255,197,61,.38);background:linear-gradient(135deg,rgba(255,197,61,.10),rgba(255,138,61,.04))}
.nx-own-i{width:30px;height:30px;flex:none;border-radius:var(--nx-r-bedien);display:grid;place-items:center;background:rgba(59,227,122,.14);color:#3be37a}
.nx-own.warn .nx-own-i{background:rgba(255,197,61,.14);color:#ffc53d}
.nx-own-t{min-width:0}
.nx-own-t b{display:block;font:800 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}
.nx-own-t span{display:block;margin-top:3px;font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-own-a{margin-left:auto;flex:none;align-self:center;font:800 var(--nx-typo-klein) var(--nx-f-text);color:#0c0c14;background:#3be37a;border:none;border-radius:var(--nx-r-pille);padding:8px 14px;cursor:pointer;white-space:nowrap}
.nx-own.warn .nx-own-a{background:transparent;color:#ffc53d;border:1px solid rgba(255,197,61,.45)}
.nx-rv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.nx-rv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .nx-rv{grid-template-columns:1fr}
  /* Hier wird der Spielstatus ein Raster ueber die ganze Breite
  (nxm-mobil.css) · in der Leiste bekommt er dafuer eine eigene Zeile.
  Der Weg in die Bibliothek darunter auch: er stand als halbbreiter Kasten
  zwischen zwei ganzbreiten Flaechen, drei Breiten untereinander. */
  .nx-hact-leiste > .nx-gs,
  .nx-hact-leiste > .nx-quer{flex-basis:100%}
}
.nx-rv-c{display:block;text-decoration:none;border-radius:var(--nx-r-tafel);overflow:hidden;background:var(--surface);transition:border-color .15s,transform .15s}
@media (hover:hover){.nx-rv-c:hover{border-color:var(--nx-linie);transform:translateY(-2px)}}
.nx-rv-th{position:relative;aspect-ratio:16/9;display:grid;place-items:center}
.nx-rv-th .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.nx-rv-play{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff}
.nx-rv-len{position:absolute;right:8px;bottom:8px;z-index:2;font:700 var(--nx-typo-klein) 'Nunito Sans',sans-serif;color:#fff;background:rgba(0,0,0,.66);border-radius:var(--nx-r-bedien);padding:2px 6px}
.nx-rv-verd{position:absolute;left:8px;top:8px;z-index:2;font:800 var(--nx-typo-klein) var(--nx-f-text);color:#0c0c14;border-radius:var(--nx-r-bedien);padding:4px 8px}
.nx-rv-b{padding:12px 12px 12px}
.nx-rv-ch{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.nx-rv-ch i{width:8px;height:8px;border-radius:50%;flex:none}
.nx-rv-ch b{font:700 var(--nx-typo-meta) var(--nx-f-text);}
.nx-rv-ch span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);margin-left:auto}
.nx-rv-t{font:400 var(--nx-typo-text)/1.45 'Nunito Sans',sans-serif;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nx-rv-note{margin-top:13px;font:400 var(--nx-typo-meta)/1.55 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-ppl{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;}
.nx-ppl-av{display:flex;flex:none;padding-left:8px}
.nx-ppl-av i{width:26px;height:26px;border-radius:50%;margin-left:-7px;border:2px solid #0c0c14;display:grid;place-items:center;font:800 9px var(--nx-f-text);color:#0c0c14;font-style:normal}
.nx-ppl-t{font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-ppl-t b{font-weight:700;color:#fff}
.nx-sc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.nx-sc{grid-template-columns:1fr}}
.nx-sc-c{background:var(--surface);border:1px solid var(--line,var(--nx-linie-subtle));border-radius:var(--nx-r-tafel);padding:16px 16px 14px;transition:border-color .15s}
@media (hover:hover){.nx-sc-c:hover{border-color:var(--nx-linie)}}
.nx-sc-t{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt);margin-bottom:5px}
.nx-sc-m{display:flex;align-items:center;gap:8px;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);flex-wrap:wrap}
.nx-sc-dots{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.nx-sc-dots i{width:9px;height:9px;border-radius:50%}
.nx-sc-bar{display:flex;height:5px;border-radius:999px;overflow:hidden;margin:11px 0 5px;background:var(--nx-hebung)}
.nx-sc-bar i{display:block;height:100%}
.nx-sc-leg{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--nx-text)}
.nx-sc-p{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-linie-subtle);text-decoration:none}
.nx-sc-p .src{display:flex;align-items:center;gap:6px;font:700 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);margin-bottom:3px}
.nx-sc-p .src i{width:7px;height:7px;border-radius:50%;flex:none}
.nx-sc-p .src span{margin-left:auto;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--nx-text)}
.nx-sc-p .q{font:400 var(--nx-typo-text)/1.45 'Nunito Sans',sans-serif;color:var(--txt)}
.cllabel,.btndanger,.chip.c-live,.nx-live-txt{color:#ff7a92}
.nx-ss-badge,.nx-ss-live{background:rgba(10,10,18,.72);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.14)}
.nx-ss-live i,.nx-ss-live .d{background:#ff7a92}
.nx-ptsub, .nx-gmcol-h, .nx-slots-k, .nxch-sublbl,
.nx-ssm-fmt, .nx-ss-phandle, .nx-rv-ch b{color:#fff}
.lbadge{}
.fh-soon.fh-soon.fh-soon{letter-spacing:.6px}
.eyebrow.eyebrow.eyebrow{font-size:var(--nx-typo-klein);}
p,p,.note,.note,.sub,.sub,.nx-why-p,.nx-why-p,.lead,.lead,.nxp3-v span,.nxp3-v span,.desc,.desc,.cardsub,.cardsub,.subline,.subline,.nx-surf-step span,.nx-surf-step span,.nx-surf-step,.nx-surf-step,.nxp3-v,.nxp3-v,.hiw-step span,.hiw-step span{text-wrap:pretty}
/* .finner hat FUENF Kinder, aber nur VIER Spalten: .nx-fg ueberspannt die
  erste Zeile, darunter stehen .fbrand und drei .fcol. Die Regel nannte
  fuenf Breiten · die fuenfte verfiel, und Spalte 1 wurde mit 526 px
  doppelt so breit wie ihre Nachbarn (171/227/263). Dazu schob
  margin-left die zweite Spalte noch einmal weg · zusammen die Luecke
  von 310 px im Bild. Vier Spalten: die Marke traegt den Claim und darf
  breiter sein, die drei Linkspalten sind gleich. */
/* minmax(0,...) ist noetig: ein blosses 1.5fr heisst minmax(auto,1.5fr),
  und der Claim "Second screen for gaming culture." hat eine breite
  min-content · er drueckte Spalte 1 auf 526 px zurueck, egal was die
  Regel sagte. Gemessen: 515/222/222/257 statt der gewollten Gleichheit. */
@media (min-width:1000px){.finner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
  .finner .fbrand{min-width:0}}
a,button,[role="button"],[data-action],[data-nx],[data-drawer],summary{transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}
@media (hover:hover){a:hover,button:hover,[role="button"]:hover,[data-action]:hover,[data-nx]:hover,[data-drawer]:hover,summary:hover{color:#fff}}
@media (hover:hover){button:hover,[role="button"]:hover,[data-drawer]:hover,.btn:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.05)}}
@media (hover:hover){[disabled]:hover,[aria-disabled="true"]:hover,.soon:hover,.disabled:hover{color:inherit;box-shadow:none;opacity:inherit}}
section.nx-row.nx-row.nx-row,.section.nx-row.nx-row{padding-top:19px;padding-bottom:19px;margin-top:0;margin-bottom:0}
section.nx-row.nx-row:has(.gcard),.section.nx-row.nx-row:has(.gcard){padding-top:3px;padding-bottom:3px}
body > .section:not(.nx-row):not(#nx-hiw):not(.nx-ggl-soon){padding-top:52px}
#nx-hiw{padding-top:0}
.section.nx-ggl-soon.nx-ggl-soon{padding-top:26px}
.studiobody > section,.studiobody > .dashgrid{margin-top:52px}
.studiobody > section:first-child,.studiobody > .dashgrid:first-child{margin-top:0}
.topbar + section.nx-row.nx-row.nx-row.nx-row,.topbar ~ main > section.nx-row:first-child,.topbar + .section.nx-row.nx-row.nx-row{margin-top:32px}
body:not([data-nx-landing]) .grad:not(.nx-fb-h .grad),.nx-ct-grad,.nx-nr-grad,.nx-supp-grad,#nxLeague .lg-title,.nx-gruss-name{background:none!important;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.nx-navsec.nx-navsec{padding-left:12px}
.sub.nx-lead{display:flex;gap:10px;align-items:center}
.nx-lead-ic{flex:none;color:var(--nx-text);margin-top:0}
.shead h2, .rh h2, h2[id^="h-"], .nx-zone, .nx-cont-head h2{font-size:22px;font-weight:800;line-height:1.2}
.nx-charea .shead h3,.nx-charea .shead h2,.nx-chrows .nx-shelf-wrap .shead h3{font-size:var(--nx-typo-kartenkopf);font-weight:800;line-height:1.35}
#nxChanArea .nx-charea-inner{padding-top:24px}
#nxChanArea .nx-charea-inner > .nx-charea-out + .section{margin-top:-16px}
.nx-set-card h2,.csechead{font-size:var(--nx-typo-abschnitt)}
.nx-fr-c .x{color:var(--dim)}
@keyframes nxpop{0%{transform:scale(1)}42%{transform:scale(1.08)}100%{transform:scale(1)}}
.nx-anim-pop{animation:nxpop .24s ease-out}
@keyframes nxfadeup{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.nx-anim-in{animation:nxfadeup .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes nxtoastin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.nx-anim-toast{animation:nxtoastin .3s cubic-bezier(.2,.8,.3,1) both}
@media(prefers-reduced-motion:reduce){.nx-anim-pop,.nx-anim-in,.nx-anim-toast{animation:none}}
.nx-noti-item.nx-noti-read{opacity:.5}
.nx-eu-foot{display:inline-flex;align-items:center;margin-right:8px;margin-left:-1px;vertical-align:-2px;position:relative;top:-1px}
.nx-eu-foot .nx-eu{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
#nxMsgMenu{position:fixed;z-index:9600;width:300px;background:var(--nx-flaeche-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--nx-r-tafel);padding:8px;box-shadow:var(--nx-schatten);font-family:"Nunito Sans",sans-serif;display:none}
#nxMsgMenu.open{display:block}
#nxMsgMenu .mh{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 8px;font:800 var(--nx-typo-text) var(--nx-f-text);color:#fff}
#nxMsgMenu .mi{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--nx-r-bedien);text-decoration:none}
@media (hover:hover){#nxMsgMenu .mi:hover{background:var(--nx-hebung)}}
#nxMsgMenu .mav{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font:800 var(--nx-typo-meta) var(--nx-f-text)}
#nxMsgMenu .mt{flex:1;min-width:0}
#nxMsgMenu .mn{display:block;font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff}
#nxMsgMenu .ms{display:block;font:400 var(--nx-typo-text)/1.45 "Nunito Sans",sans-serif;color:var(--dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nxMsgMenu .mz{font:400 var(--nx-typo-klein) "Nunito Sans",sans-serif;color:var(--nx-leise);flex:none;margin-top:2px}
#nxMsgMenu .mf{border-top:1px solid rgba(255,255,255,.07);margin-top:6px;padding:9px 10px 4px;text-align:center}
#nxMsgMenu .mf a{font:700 var(--nx-typo-text) "Nunito Sans",sans-serif;color:var(--nx-text);text-decoration:none}
.nx-creategrp{margin-left:auto;background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);color:var(--nx-text);border-radius:var(--nx-r-pille);padding:5px 13px;font:700 var(--nx-typo-meta) var(--nx-f-text);cursor:pointer;white-space:nowrap;transition:background .15s}
@media (hover:hover){.nx-creategrp:hover{background:var(--nx-hebung)}}
.nx-cheap{margin:10px 0 2px;font:400 var(--nx-typo-text) "Nunito Sans",sans-serif;color:var(--dim)}
.nx-cheap b{font-family:var(--nx-f-text);font-weight:700;color:#fff}
#nx-search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:280px;background:var(--nx-flaeche-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--nx-r-karte);box-shadow:var(--nx-schatten);padding:6px;z-index:6000;display:none;max-height:420px;overflow:auto}
#nx-search-drop.on{display:block}
.nxsd-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--nx-r-bedien);text-decoration:none;transition:background .15s}
@media (hover:hover){.nxsd-row:hover{background:var(--nx-hebung)}}
.nxsd-av{width:30px;height:30px;border-radius:var(--nx-r-bedien);display:flex;align-items:center;justify-content:center;font:800 var(--nx-typo-meta) var(--nx-f-text);flex:none}
.nxsd-n{flex:1;min-width:0;font:700 var(--nx-typo-kartenkopf) "Nunito Sans",sans-serif;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxsd-n b{color:#fff;font-weight:800}
.nxsd-t{font:700 var(--nx-typo-klein) var(--nx-f-text);flex:none}
.nxsd-empty{padding:16px 14px;font:400 var(--nx-typo-text) "Nunito Sans",sans-serif;color:var(--dim);text-align:center}
#nx-watch-modal{position:fixed;inset:0;z-index:9800}
#nx-watch-modal .nw-scrim{position:absolute;inset:0;background:rgba(4,4,8,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#nx-watch-modal .nw-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;max-width:94vw;background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);padding:16px;box-shadow:var(--nx-schatten)}
#nx-watch-modal .nw-x{position:absolute;top:10px;right:14px;z-index:3;background:rgba(10,10,18,.5);border:none;color:#fff;font-size:var(--nx-typo-abschnitt);cursor:pointer;line-height:1;width:30px;height:30px;border-radius:var(--nx-r-bedien)}
#nx-watch-modal .nw-player{position:relative;aspect-ratio:16/9;border-radius:var(--nx-r-karte);display:grid;place-items:center;overflow:hidden}
#nx-watch-modal .nw-play{width:62px;height:62px;border-radius:50%;background:rgba(10,10,18,.55);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:.15s}
@media (hover:hover){#nx-watch-modal .nw-play:hover{transform:scale(1.08);background:var(--nx-hebung)}}
#nx-watch-modal .nw-live{position:absolute;top:12px;left:12px;font:800 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:1px;color:#fff;background:#e53e4e;border-radius:var(--nx-r-bedien);padding:4px 8px}
#nx-watch-modal .nw-clip{position:absolute;top:12px;left:12px;font:800 var(--nx-typo-klein) var(--nx-f-text);color:#0a0a12;background:#34e5d8;border-radius:var(--nx-r-bedien);padding:4px 8px}
#nx-watch-modal .nw-track{position:absolute;left:12px;right:12px;bottom:12px;height:5px;border-radius:4px;background:rgba(255,255,255,.18)}
#nx-watch-modal .nw-track i{display:block;height:100%;width:34%;border-radius:var(--nx-r-marke);background:var(--accent)}
#nx-watch-modal .nw-meta{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 4px}
#nx-watch-modal .nw-who b{display:block;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff}
#nx-watch-modal .nw-who span{font:700 var(--nx-typo-text) "Nunito Sans",sans-serif;color:var(--dim)}
#nx-watch-modal .nw-src{font:700 var(--nx-typo-meta) var(--nx-f-text);color:var(--nx-text);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-bedien);padding:4px 10px}
#nx-watch-modal .nw-note{margin-top:10px;font:700 var(--nx-typo-meta) "Nunito Sans",sans-serif;color:var(--dim);padding:0 4px}
.nxsr-ov{position:fixed;inset:0;z-index:80;background:rgba(4,4,10,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none}
.nxsr-ov.on{display:block}
.nxsr-p{max-width:580px;margin:110px auto 0;background:var(--nx-flaeche);border:1px solid rgba(255,255,255,.1);border-radius:var(--nx-r-tafel);overflow:hidden;box-shadow:var(--nx-schatten)}
.nxsr-in{width:100%;box-sizing:border-box;background:transparent;border:none;outline:none;color:var(--txt);padding:17px 19px;font:700 var(--nx-typo-kartenkopf) var(--nx-f-text);border-bottom:1px solid rgba(255,255,255,.08)}
.nxsr-in::placeholder{color:var(--nx-leise)}
.nxsr-res{max-height:52vh;overflow:auto;padding:8px 0 10px}
.nxsr-g{padding:10px 19px 4px;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--nx-leise)}
.nxsr-r{display:flex;align-items:center;gap:11px;padding:7px 19px;color:var(--txt);text-decoration:none;font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;line-height:1.35}
.nxsr-r b,.nxsr-r span{line-height:1.35}
.nxsr-r.on{background:var(--accent)}
.nxsr-art{width:52px;height:29px;border-radius:var(--nx-r-marke);flex:none;object-fit:cover;background:var(--nx-hebung)}
.nxsr-art.rund{width:30px;height:30px;border-radius:var(--nx-r-bedien)}
@media (hover:hover){.nxsr-r:hover{background:var(--nx-hebung)}}
.nxsr-r b{font-family:var(--nx-f-text);font-size:var(--nx-typo-text);display:block}
.nxsr-r span{color:var(--dim);font-size:var(--nx-typo-meta)}
.nxsr-a{width:30px;height:30px;border-radius:var(--nx-r-bedien);flex:none;display:grid;place-items:center;background:var(--accent);color:#fff;font:800 var(--nx-typo-meta) var(--nx-f-text)}
.nxsr-none{padding:16px 19px;color:var(--nx-leise);font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif}
.nx-pubsec{margin:18px 0;border:1px solid var(--line,rgba(255,255,255,.08));border-radius:var(--nx-r-tafel);
  background:var(--surface);overflow:hidden}
.nx-pubsec-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line,var(--nx-linie-subtle))}
.nx-pubsec-hd .nx-pubsec-t{font-family:"Encode Sans Condensed",var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf);color:var(--txt)}
.nx-pubsec-hd .nx-pubsec-b{font-size:var(--nx-typo-klein);font-weight:800;color:var(--nx-text);background:var(--nx-hebung);border-radius:var(--nx-r-bedien);padding:2px 8px}
.nx-pubsec-body{display:grid;gap:10px;padding:14px 16px}
.nx-pubcard{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:var(--nx-r-karte);
  border:1px solid var(--line,rgba(255,255,255,.07));background:var(--nx-hebung)}
.nx-pubcard .nx-pc-ic{width:38px;height:38px;border-radius:var(--nx-r-bedien);flex:none;display:grid;place-items:center;
  background:var(--accent);color:#fff;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text)}
.nx-pubcard .nx-pc-tx{flex:1;min-width:0}
.nx-pubcard .nx-pc-nm{font:700 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-pubcard .nx-pc-mt{font-size:var(--nx-typo-meta);color:var(--dim);margin-top:2px}
.nx-pubcard .nx-pc-pr{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff;flex:none;margin-left:auto}
.nx-pubcard .nx-pc-live{font-size:var(--nx-typo-klein);font-weight:800;letter-spacing:var(--nx-sperrung);text-transform:uppercase;color:#3be37a;flex:none}
body{padding-top:var(--nx-leiste,48px)}
.nx-demobar{display:none}
.nx-prevbar .pb-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--nx-typo-klein);font-weight:700;border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.nx-prevbar .pb-glabel{font-size:var(--nx-typo-klein);font-weight:700;margin-right:5px;white-space:nowrap}
.nx-prevbar .pb-badge{color:var(--dim);border-color:rgba(255,255,255,.14);background:var(--nx-hebung);}
.nx-prevbar .pb-glabel{color:var(--dim)}
.whym{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--nx-r-pille);line-height:1;height:auto;white-space:nowrap;vertical-align:middle;background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);color:var(--nx-text);transition:background .15s,border-color .15s}
@media (hover:hover){.whym:hover{background:var(--nx-hebung);border-color:var(--nx-linie)}}
.whym svg{display:block;flex:none;width:12px;height:12px}
.fcol .nx-soon-badge{font:800 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:var(--nx-sperrung);text-transform:uppercase;
  color:var(--nx-text);background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-pille);padding:4px 12px;line-height:1.4}
.fsocial{display:flex;gap:8px;margin-top:12px;flex-wrap:nowrap;align-items:center}
.fsocial .s{width:34px;height:34px;border-radius:var(--nx-r-bedien);border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;color:var(--dim);background:var(--nx-hebung);
  cursor:default;transition:.15s}
.crumb a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* Das Zeichen vor "Games" hat hier keine Groesse (seine Masse stehen nur
  in der Kopfleiste) und war bei jeder Breite 0 Punkte breit · die Luecke
  dahinter blieb und rueckte das Wort 4 Punkte von der Kante der
  Heldenflaeche. Ohne Zeichen steht das Wort auf der Kante. */
.crumb .navic{display:none}
/* Der Krumenpfad traegt die Reiter-Schrift (.navtx) · ihre Sperrung stand
  bisher in einer Regel fuer die Kopfleiste, die hier mitgriff. */
.crumb .navtx{letter-spacing:.2px}
.pb-right a{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--nx-r-pille);border:1px solid rgba(255,255,255,.25);background:var(--nx-hebung);color:#fff;font:700 var(--nx-typo-meta) var(--nx-f-text);text-decoration:none;white-space:nowrap;transition:background .15s}
.nx-prevbar .pb-badge{padding:4px 12px}
@media (hover:hover){.nx-fb-sup:hover{background:var(--nx-hebung)}}
#nxInvite{display:flex;align-items:center;gap:8px;max-width:var(--nx-breite);margin:18px auto 10px;padding:0 var(--nx-rand);width:100%;box-sizing:border-box;font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim)}
#nxInvite svg{flex:none}
@keyframes nxPulse{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes nxIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card,.sptile,.nx-fm,.nx-why-c,.nx-supp-c,.evcard,.gcard,.pcard,.rowcard,.nx-rowcard,.subscard,.podcard,.mkt-card,.post,.grp,.ftile,.lcard,.dccard,.block,.fgcard{transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.card:hover,.sptile:hover,.nx-fm:hover,.nx-why-c:hover,.nx-supp-c:hover,.evcard:hover,.gcard:hover,.pcard:hover,.rowcard:hover,.nx-rowcard:hover,.subscard:hover,.podcard:hover,.mkt-card:hover,.post:hover,.grp:hover,.ftile:hover,.lcard:hover,.dccard:hover,.block:hover,.fgcard:hover{transform:translateY(-2px);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.nx-pulse{animation:none}.card,.sptile,.nx-fm,.nx-why-c,.nx-supp-c,.evcard,.gcard,.rowcard,.nx-rowcard,.mkt-card,.post,.grp,.ftile,.lcard,.dccard,.block,.fgcard{animation:none;transition:none}
@media (hover:hover){.card:hover,.sptile:hover{transform:none}}}
#nxGdEvents .nx-gde-sub{display:block;font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim);margin:-4px 0 12px}
.nx-gde-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line,#23233a);border-radius:var(--nx-r-karte);padding:12px 14px;margin-bottom:9px}
.nx-gde-row > div{flex:1;min-width:0}
.nx-gde-row b{display:block;font:800 var(--nx-typo-text) var(--nx-f-text)}
.nx-gde-row span{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-gde-open{flex:none;background:var(--accent,#5b27e8);color:#fff;border-radius:var(--nx-r-pille);padding:8px 16px;font:800 var(--nx-typo-meta) var(--nx-f-text);text-decoration:none;box-shadow:none}
.nx-gde-all{display:inline-block;font:700 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--nx-text);text-decoration:none;margin-top:2px}
#nxBuyM{position:fixed;inset:0;z-index:6000;background:rgba(5,5,10,.7);display:none;align-items:center;justify-content:center;padding:20px}
.nxbuy-card{width:390px;max-width:94vw;background:var(--surface);border:1px solid var(--line,#23233a);border-radius:var(--nx-r-tafel);padding:20px;position:relative;overflow:hidden}
.nxbuy-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.nxbuy-eyebrow{font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--nx-text)}
.nxbuy-card h3{font:800 var(--nx-typo-abschnitt) var(--nx-f-titel);margin:5px 0 6px}
.nxbuy-card .s{font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim);margin:0 0 14px}
.nxbuy-line{display:flex;align-items:center;justify-content:space-between;background:var(--nx-flaeche);border:1px solid var(--line,#23233a);border-radius:var(--nx-r-karte);padding:12px 14px;margin-bottom:14px}
.nxbuy-line span{font:700 var(--nx-typo-text) 'Nunito Sans',sans-serif}
.nxbuy-line b{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--nx-text)}
.nxbuy-card .go{width:100%;padding:12px;border:none;border-radius:var(--nx-r-karte);background:var(--accent,#5b27e8);color:#fff;font:800 var(--nx-typo-text) var(--nx-f-text);cursor:pointer;box-shadow:none}
.nxbuy-foot{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);margin:11px 0 0;text-align:center}
.nxbuy-card .x{position:absolute;right:14px;top:12px;background:none;border:none;color:var(--dim);font-size:var(--nx-typo-kartenkopf);cursor:pointer}
.nxbuy-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--nx-flaeche-2);border:1px solid rgba(52,229,216,.5);color:#bff5ef;border-radius:var(--nx-r-pille);padding:10px 20px;font:700 var(--nx-typo-text) 'Nunito Sans',sans-serif;z-index:6100}
.nx-ppov{position:fixed;inset:0;background:rgba(6,6,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99999;display:none;align-items:center;justify-content:center;padding:40px 24px}
.nx-ppov.on{display:flex}
.nx-ppov-box{background:var(--surface);border:1px solid var(--line2,rgba(255,255,255,0.14));border-radius:var(--nx-r-tafel);max-width:520px;width:100%;padding:24px 26px;position:relative;box-shadow:none}
.nx-ppov-close{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:var(--nx-r-bedien);border:1px solid var(--line,var(--nx-linie-subtle));background:var(--surface2);color:var(--dim);cursor:pointer;font-size:var(--nx-typo-abschnitt);display:grid;place-items:center;transition:.15s}
@media (hover:hover){.nx-ppov-close:hover{color:#fff;border-color:var(--line2,var(--nx-linie))}}
.nx-ppov-h{font-family:var(--nx-f-titel);font-weight:800;font-size:var(--nx-typo-abschnitt);color:#fff;margin:0 0 4px}
.nx-ppov-sub{font-size:var(--nx-typo-text);color:var(--dim);margin-bottom:18px}
.nx-ppov-leer{font-size:13px;color:var(--dim);padding:18px 0;text-align:center}
.nx-pp-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--nx-r-karte);border:1px solid var(--line,var(--nx-linie-subtle));background:var(--surface2);margin-bottom:8px;transition:.15s}
@media (hover:hover){.nx-pp-row:hover{border-color:var(--line2,var(--nx-linie))}}
.nx-pp-row.best{border-color:rgba(70,210,110,.5);background:linear-gradient(120deg,rgba(70,210,110,.08),var(--surface2,var(--nx-flaeche-2)) 60%)}
.nx-pp-store{width:34px;height:34px;border-radius:var(--nx-r-bedien);display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-text);color:#fff;flex:none}
.nx-pp-info{flex:1;min-width:0}
.nx-pp-name{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;display:flex;align-items:center;gap:8px}
.nx-pp-tag{font:800 var(--nx-typo-klein) var(--nx-f-text);color:#5fd98a;background:rgba(70,210,110,.14);border:1px solid rgba(70,210,110,.4);border-radius:var(--nx-r-bedien);padding:2px 6px}
.nx-pp-note{font-size:var(--nx-typo-meta);color:var(--dim);margin-top:2px}
.nx-pp-price{text-align:right;flex:none}
.nx-pp-now{font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf);color:#fff}
.nx-pp-was{font-size:var(--nx-typo-meta);color:var(--dim);text-decoration:line-through}
.nx-pp-off{font:800 var(--nx-typo-klein) var(--nx-f-text);color:#ff8a3d;margin-left:5px}
.nx-pp-foot{font-size:var(--nx-typo-meta);color:var(--dim);margin-top:14px;display:flex;align-items:center;gap:8px;line-height:1.4}
.nx-pp-foot svg{flex:none;color:var(--nx-text)}
.nx-pmedia{margin-top:14px}
.nx-pmedia-h{display:flex;align-items:baseline;gap:10px;font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:var(--txt);margin-bottom:10px}
.nx-pmedia-s{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);font-weight:400}
/* minmax(330px,…) haelt die Spur auch dann auf 330 Punkten, wenn der Kasten
  schmaler ist · gemessen ragten bei 360 Punkten Fensterbreite drei
  .nx-pmedia-c acht Punkte ueber den Rand. min(330px,100%) laesst die Spur auf
  die Kastenbreite fallen und aendert am Schreibtisch nichts. */
.nx-pmedia-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:12px}
/* GESEHEN: in den drei Karten unter "From partner media" nahm der Knopf die
  halbe Kartenbreite, der Titel brach nach drei Woertern ab ("How CD PROJEKT
  RED..."), und die Zeile mit Medium und Datum lief ueber drei Zeilen gegen den
  Knopf. FALSCH WAR: Text und Knopf teilten sich eine Zeile. Der Knopf steht
  jetzt unter dem Text · dieselbe Ordnung wie in den Event-Karten, die in
  derselben Breite Titel und Beschreibung vollstaendig zeigen. */
.nx-pmedia-c{display:grid;grid-template-columns:38px 1fr;align-items:start;gap:6px 12px;background:var(--surface);border:1px solid var(--line,#23233a);padding:12px 16px}
.nx-pmedia-c > .nx-pmedia-go{grid-column:2;justify-self:start;margin-top:4px}
.nx-pmedia-b{flex:none;width:38px;height:38px;border-radius:var(--nx-r-bedien);display:grid;place-items:center;font:800 var(--nx-typo-meta) var(--nx-f-text);color:#fff}
.nx-pmedia-tx{min-width:0;flex:1;display:grid;gap:2px}
.nx-pmedia-tx b{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nx-pmedia-tx span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--nx-leise)}
.nx-pmedia-go{flex:none;border:1px solid rgba(255,255,255,0.14);background:var(--nx-hebung);color:var(--nx-text);border-radius:var(--nx-r-bedien);padding:8px 12px;font:700 var(--nx-typo-meta) var(--nx-f-text);cursor:pointer;transition:.15s}
@media (hover:hover){.nx-pmedia-go:hover{background:var(--nx-hebung)}}
.nx-myrate{display:flex;align-items:center;gap:8px}
.nx-myrate-lbl{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.nx-myrate-stars{display:inline-flex;gap:3px}
.nx-myrate-stars svg{cursor:pointer;transition:transform .15s}
@media (hover:hover){.nx-myrate-stars svg:hover{transform:scale(1.15)}}
.nx-myrate-val{font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);min-width:0;overflow-wrap:anywhere}
/* Am Telefon stand "Not rated yet" 17 px ueber der rechten Kante (gemessen bei 390 px):
  die Zeile bricht jetzt um, statt hinauszulaufen. */
@media(max-width:520px){.nx-myrate{flex-wrap:wrap;row-gap:4px}}
.nx-myrate.rated .nx-myrate-val{color:var(--gold,#ffc53d)}
.shead h3 svg,.shead h2 svg{width:18px;height:18px;flex:none}
.nx-shchip{position:absolute;z-index:400;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0;color:#fff;background:rgba(10,10,18,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:var(--nx-schatten);transition:background .15s,border-color .15s}
@media (hover:hover){.nx-shchip:hover{background:rgba(10,10,18,.78);border-color:rgba(255,255,255,.34)}}
.nx-shchip svg{width:14px;height:14px;display:block}
#nxShPick{position:fixed;z-index:9700;min-width:210px;background:var(--nx-flaeche-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--nx-r-tafel);padding:8px;box-shadow:var(--nx-schatten)}
#nxShPick b{display:block;font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim);padding:4px 8px 8px}
#nxShPick button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;cursor:pointer;padding:8px 8px;border-radius:var(--nx-r-bedien);color:var(--txt);font:700 var(--nx-typo-text) 'Nunito Sans',sans-serif;text-align:left}
@media (hover:hover){#nxShPick button:hover{background:var(--nx-hebung)}}
#nxShPick .a{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 var(--nx-typo-klein) var(--nx-f-text);color:#fff;background:var(--accent);flex:none}
/* DER RAND IST AUCH AM TELEFON EINE VARIABLE, KEINE ZAHL.
  Gemessen bei 390 Punkten: der Hero-Kasten stand auf 38, der
  Faktenblock auf 34. Zwei Kaesten, vier Punkte auseinander · nah genug,
  um wie ein Versehen auszusehen, und weit genug, um es zu sein. Die 38
  waren hier von Hand eingetragen, also eine Zahl ohne Herkunft.
  Jetzt steht der Hero auf --nx-rand und damit auf derselben Kante wie
  der Faktenblock, der dieselbe Variable benutzt.

  DIE ZWEITE HAELFTE DES BLOCKS IST ERSATZLOS WEG, und das ist der
  eigentliche Fund: sie schrieb 14/28 fuer .section noch einmal auf,
  was nxm-mobil.css laengst mit 'html body > .section.section' festlegt
  · und das mit hoeherer Aussagekraft, also hat hier nie etwas gewirkt.
  Zwei Besitzer auf einer Kante, einer davon blind. Der Rest ist
  Haussache und bleibt es.

  NACHGETRAGEN: .section polsterte mit var(--nx-rand) und landete auf 48,
  .nx-fk-sec auf 68. Geloest nur fuer diese Seite · im Telefonblock oben
  steht --nx-rand hier auf 0, und Kopf und Brotkrumen tragen den Rand von
  <main> (14) ausdruecklich. Andere Seiten bleiben, wie sie sind. */
@media(max-width:760px){
  .hero{margin-left:14px;margin-right:14px;
    max-width:calc(100% - 28px)}
}
.herorow{align-items:flex-start}
.hinfo{min-width:0}
/* DIE KAUFSPALTE ZIEHT DEN KOPF NICHT MEHR IN DIE LAENGE.
  Gemessen : die linke Spalte endet nach 585 px, die Kaufspalte
  laeuft ueber 1678 px, und der Kopf war so hoch wie die laengere von beiden.
  Dazwischen standen 1160 px Key-Art, auf dem nichts steht. Steam zeigt an
  genau dieser Stelle Screenshots und Trailer.
  Weggenommen wird nichts: alle sieben Laeden bleiben, die Spalte rollt in
  sich selbst und klebt beim Scrollen mit. Ein Deckel, der Inhalt versteckt,
  waere die schlechtere Haelfte · dieser hier verschiebt ihn nur. */
.nx-laeden{flex:none;width:300px;align-self:flex-start;position:sticky;top:calc(var(--nx-kopf, 72px) + 16px);/* 940 statt 860 · seit die zwei eigenstaendigen Bloecke (Game Pass,
  Price history) unter dem Hero stehen, misst die Spalte 934 Punkte.
  Mit 860 blieben genau die letzte Ladenzeile und die Fussnote unter
  der Kante · ein Rest, den niemand sucht. */
  max-height:min(78vh,940px);overflow-y:auto;overscroll-behavior:contain;padding:14px 16px}
/* Dass es weitergeht, muss man sehen · sonst haelt man das Ende des Fensters
  fuer das Ende der Liste. */
.nx-laeden::-webkit-scrollbar{width:8px}
.nx-laeden::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:var(--nx-r-bedien)}
.herorow{position:relative}
.herorow::after{content:"";position:absolute;right:32px;bottom:32px;width:300px;height:44px;
  pointer-events:none;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,rgba(8,8,13,0),rgba(8,8,13,.85))}
@media (max-width:900px){.nx-laeden{position:static;max-height:none;overflow:visible}
  .herorow::after{display:none}}
.nx-laeden-kopf{display:flex;margin:0 0 6px}
/* DIE KAUFSPALTE STAND KOMPLETT NEBEN DER LEITER · gemessen Kopf 15/700,
  Ladenname 13/700, Preis 14/800, waehrend die Leiter 10,5 / 11,5 / 12,5 /
  15,5 / 20 / 32 kennt. Sie steht im Hero, und der Hero ist von der
  Typo-Leiter ausgenommen · diese drei Regeln sind damit der einzige
  Besitzer und muessen die Sprosse selbst treffen. */
.nx-laeden-kopf h3{font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf);color:#fff;display:flex;align-items:center;gap:8px;margin:0}
.nx-laeden-kopf h3::before{content:"";width:8px;height:8px;background:var(--cyan,#34e5d8);flex:none}
.nx-laeden-kopf .note{font-size:var(--nx-typo-meta);color:var(--dim)}
/* GESEHEN: zwischen den fuenf Laeden der Kaufspalte lagen duenne Trennlinien,
  die bei 1000 Punkten Breite ueber den ganzen Kasten liefen und ihn
  beherrschten. FALSCH WAR: getrennt wird auf dieser Seite ueberall sonst mit
  der Flaeche · Linien gibt es an keiner anderen Stelle, und der Kasten fiel
  damit aus der Seite heraus. Jetzt trennen Abstand und eine leicht
  abgesetzte Flaeche, die markierte Zeile bleibt die hellste. */
.nx-laeden .storerow{padding:9px 10px;gap:10px;border:0;border-radius:var(--nx-r-bedien);margin:0 0 4px;}
.nx-laeden .storerow:last-child{margin-bottom:0}
.nx-laeden .storerow.best .now{color:var(--nx-weiss,#fff)}
.nx-laeden .slogo{width:26px;height:26px;border-radius:var(--nx-r-marke);display:grid;place-items:center;flex:none}
.nx-laeden .slogo svg{width:14px;height:14px}
.nx-laeden .sname{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
/* DER PREIS IST DER PUNKT DIESER SPALTE · er darf nicht unter den
  Kaufknopf laufen, und die Zahl wird nie gekuerzt. Der Ladenname bricht
  dafuer in eine zweite Zeile, statt abgeschnitten zu werden: in der
  breiteren Schrift stand sonst "PlayStatio..." und "Xbox / Micr...",
  an beiden Breiten. Erst nach zwei Zeilen endet er mit Auslassung. */
.nx-laeden .sname{white-space:normal;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2}
.nx-laeden .smeta{font-size:11px;color:var(--dim)}
.nx-laeden .sprice{min-width:0}
/* DER PREIS IST DER PUNKT DIESER SPALTE · auch am Schreibtisch. Die Spalte
  ist dort 300 Punkte schmal, und bei "Xbox / Microsoft Store" schrumpfte
  der Preis auf 21 Punkte und lief unter den Kaufknopf ("€39.9"). Der
  Ladenname darf umbrechen, die Zahl nie. */
.nx-laeden .storerow > div:not(.slogo):not(.sprice){min-width:0;flex:1 1 auto}
.nx-laeden .sprice{flex:none;white-space:nowrap}
.nx-laeden .buybtn{flex:none}
/* nextari.css fuehrt .buybtn als Hauptknopf · in Liste und Editionen gilt die Flaeche */
#stores .storerow .buybtn,.edcard .edfoot .buybtn{background:var(--nx-hebung);color:var(--nx-text,#fff)}
#stores .storerow.best .buybtn{background:var(--accent);color:#fff}
.nx-laeden .sprice .now{font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-kartenkopf)}
.nx-laeden .buybtn{padding:6px 10px;font-size:var(--nx-typo-meta);border-radius:var(--nx-r-bedien)}
.nx-laeden .buybtn svg{display:none}
.hmeta{gap:8px}
.hmeta .mblk{padding:8px 12px;min-width:92px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:rgba(255,255,255,.6)}
/* Gemessen 15 px, waehrend die gleichrangigen Werte im Block "Game facts"
  darunter auf 15,5 stehen · derselbe Wert in zwei Groessen, zwei
  Bildschirmzeilen auseinander. */
.hmeta .mblk b{display:block;margin-top:5px;font-size:var(--nx-typo-kartenkopf);letter-spacing:0;text-transform:none;color:#fff}
/* GESEHEN: der Metascore war die einzige Faktenkachel mit sichtbarer
  Umrandung · neben vier randlosen Nachbarn las er sich wie ein Objekt aus
  einer anderen Familie. Getrennt wird auf dieser Seite mit der Flaeche. */
.hmeta .score{padding:8px 12px;}
.nx-hact-leiste{position:relative;z-index:1;border-top:0;}
.nx-hact-leiste .hact{margin-top:0}
/* UNTER DER AKTIONSREIHE stehen der Spielstatus (nxm-spielstatus.js) und
  der Weg "In your library" (nxm-querwege.js). Beide standen als
  Inline-Elemente Kante an Kante: am Schreibtisch 0 Punkte nebeneinander,
  am Telefon ohne Luft untereinander, weil ihre Abstaende als Aussenrand an
  je einer Seite hingen. Die Leiste setzt die Luecken jetzt selbst, wie
  jede Knopfgruppe: 8 zwischen den Zeilen, 16 zwischen den Teilen einer
  Zeile. Alles andere in der Leiste steht weiter auf eigener Zeile. */
.nx-hact-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nx-luecke-knopf) var(--nx-luecke-wort)}
.nx-hact-leiste > :not(.nx-gs):not(.nx-quer){flex:1 1 100%;min-width:0}
.nx-hact-leiste > .nx-gs,.nx-hact-leiste > .nx-quer{margin:0}
@media (max-width:1100px){.nx-laeden{width:100%}}
.nx-laeden{display:flex;flex-direction:column}
.nx-laeden-kopf{flex-direction:column;align-items:flex-start;gap:2px}
.nx-laeden-kopf h3 svg{display:none}
.nx-laeden #stores{flex:none}
.nx-laeden .smeta > span:not([class]){display:none}
.nx-laeden > :not(.nx-laeden-kopf):not(#stores){margin-top:10px;font-size:var(--nx-typo-meta);line-height:1.4;color:var(--dim)}
.nx-laeden [class^="w2p"],.nx-laeden [class*=" w2p"]{font-size:var(--nx-typo-meta)}
.nx-laeden [class^="w2p"] > div,.nx-laeden [class*=" w2p"] > div{padding:6px 8px;margin:4px 0;border-radius:var(--nx-r-bedien)}
.nx-laeden .w2psubs-lbl,.nx-laeden .w2pbest-lbl{font-size:var(--nx-typo-klein);}
.section.nx-row{position:relative}
.nx-ctrls.inhead{position:static;top:auto!important;right:auto!important;
  margin:0 0 0 auto;display:inline-flex;gap:10px;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .15s ease}
.nx-ctrls.inhead + .seeall{margin-left:auto}
/* GESEHEN: das Symbol aus sechs Punkten stand in rund zehn Reihenkoepfen
  dauerhaft und ohne Beschriftung da. FALSCH WAR: es ist ein Griff zum
  Umsortieren, also ein Werkzeug · unbenutzt sieht die Seite damit aus wie ein
  offener Bearbeiten-Modus. Er zeigt sich jetzt, wenn die Reihe oder ihr Kopf
  unter dem Zeiger liegt, und bleibt sonst weg. */
.shead:hover .nx-ctrls.inhead,.nx-row:hover .nx-ctrls.inhead{opacity:1;pointer-events:auto}
.nx-ctrls{position:absolute;display:flex;gap:10px;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:35}
.nx-row:hover .nx-ctrls{opacity:1;pointer-events:auto}
.nx-btn{width:30px;height:30px;border-radius:var(--nx-r-bedien);border:1px solid rgba(255,255,255,0.14);background:var(--nx-grund);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease;user-select:none}
@media (hover:hover){.nx-btn:hover{color:#fff;border-color:var(--nx-linie);background:var(--nx-hebung)}}
.nx-grip{cursor:grab}
.nx-rm{font-size:var(--nx-typo-text);line-height:1}
.nx-dragging{opacity:.4}
.nx-over{box-shadow:inset 0 4px 0 -1px #5b27e8}
.nx-over-b{box-shadow:inset 0 -4px 0 -1px #5b27e8}
.nx-add{position:relative;border:1.6px dashed rgba(255,255,255,0.14);border-radius:var(--nx-r-tafel);align-items:center;justify-content:center;gap:8px;color:var(--dim);cursor:pointer;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);transition:.15s ease;background:var(--nx-hebung);}
@media (hover:hover){.nx-add:hover{border-color:var(--nx-linie);color:#fff;background:var(--nx-hebung-2)}}
.nx-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:248px;max-height:320px;overflow:auto;background:var(--nx-flaeche);border:1px solid rgba(255,255,255,0.14);border-radius:var(--nx-r-karte);padding:8px;box-shadow:var(--nx-schatten);z-index:50;text-align:left}
.nx-pi{padding:8px 16px;border-radius:var(--nx-r-bedien);color:var(--txt);font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:var(--nx-typo-kartenkopf);cursor:pointer;white-space:nowrap}
@media (hover:hover){.nx-pi:hover{background:var(--nx-hebung)}}
.nx-pi-h{color:var(--dim);font-size:var(--nx-typo-klein);padding:8px 16px 0px}
.nx-add{padding:40px var(--nx-rand) 0;max-width:var(--nx-breite);}
.nx-ctrls.inhead{order:99;margin-left:14px}
/* GESEHEN: der Knopf "See all" stand in jeder Reihe an einer anderen Stelle
  (x=879 bis x=1086), waehrend der Sechs-Punkte-Griff daneben immer sauber an
  der Inhaltskante sass. FALSCH WAR: zwei Geschwister mit margin-left:auto ·
  der freie Platz wird dann zwischen beiden geteilt, und wie weit See all
  rueckt, haengt an der Laenge der Ueberschrift davor. Der Griff bekommt
  wieder den festen Abstand aus der Zeile darueber, der freie Platz gehoert
  allein dem See all · damit enden beide in jeder Reihe an derselben Kante. */
.nx-ctrls{top:12px!important;right:24px!important}
.nx-add{margin:12px 0 0;width:100%;box-sizing:border-box}
.nx-add{display:none}
.czfab{position:fixed;right:22px;bottom:22px;z-index:9000;display:none;align-items:center;gap:10px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);line-height:1;color:#fff;cursor:pointer;padding:16px 22px;background:rgba(24,24,38,.55);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.16);box-shadow:var(--nx-schatten)}
.czfab svg{width:17px;height:17px}
@media (hover:hover){.czfab:hover{border-color:var(--nx-linie)}}
.czfab svg{color:var(--nx-text)}
.czsep{margin:12px 0 4px;padding-top:12px;border-top:1px solid var(--line,rgba(255,255,255,.1));font:800 var(--nx-typo-klein) var(--nx-f-text);color:var(--dim)}
.czsub{font-family:'Nunito Sans';font-size:var(--nx-typo-text);color:var(--dim);margin-top:4px}
.czov{position:fixed;inset:0;z-index:9500;background:rgba(8,8,13,.38);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:none;align-items:flex-end;justify-content:center;padding:16px 16px 22px}
.czov.open{display:flex}
.czpanel{width:100%;max-width:460px;max-height:78vh;display:flex;flex-direction:column;background:rgba(22,22,34,.6);-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);border:1px solid rgba(255,255,255,.16);border-radius:var(--nx-r-tafel);box-shadow:var(--nx-schatten);overflow:hidden}
.czrow{display:flex;align-items:center;gap:16px;padding:8px 8px;border-radius:var(--nx-r-bedien)}
@media (hover:hover){.czrow:hover{background:var(--surface2)}}
.czrow.off .czrl{color:var(--faint)}
.czsw{width:42px;height:24px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;transition:.15s}
.czsw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--faint);transition:.15s}
.czsw.on{background:var(--accent);border-color:transparent}
.czsw.on::after{left:20px;background:#fff}
.czlist{overflow:auto}
.czdone{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);line-height:1;color:#fff;border:none;cursor:pointer;padding:8px 16px;border-radius:var(--nx-r-bedien);background:var(--accent);flex:none}
.czrl{flex:1;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);}
.czrl{color:var(--faint)}
.czph{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.czph b{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff}
.czlist{padding:10px 12px 16px}
.czpanel .nx-add{margin:12px 0 0;width:100%;box-sizing:border-box}
.czcard,.nx-gf-k,[class*="card"]:not(.nx-cardhide),.post{
  animation:none;opacity:1;transform:none}
#similar .gcover .grad{background:linear-gradient(180deg,rgba(8,8,13,0) 35%,rgba(8,8,13,.88))}
/* GESEHEN: "Kingdom Come: Deliverance II" braucht unter dem Cover zwei
  Zeilen und wurde von der Kartenkante um einen Punkt abgeschnitten, waehrend
  die fuenf einzeiligen Nachbarn sauber standen. FALSCH WAR: die Karte gab dem
  Namen nur so viel Platz, wie er gerade brauchte. Jeder Name bekommt jetzt
  den Platz fuer zwei Zeilen · damit sind alle Karten der Zeile gleich hoch
  und keiner wird beschnitten. */
#similar .gname{min-height:58px;box-sizing:border-box;text-shadow:0 1px 6px rgba(0,0,0,.7)}
body > .section{margin:0 auto 40px;padding-top:20px;padding-bottom:20px}
body > .section.nx-row.nx-row.nx-row{padding-top:20px!important;padding-bottom:20px!important;margin-top:0;margin-bottom:40px}
#friends.grid,#live.grid{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
#friends.grid > .card{flex:0 0 232px;scroll-snap-align:start}
#live.grid > .lcard{flex:0 0 296px;scroll-snap-align:start}
#friends.grid::-webkit-scrollbar,#live.grid::-webkit-scrollbar{height:7px}
#friends.grid::-webkit-scrollbar-thumb,#live.grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:var(--nx-r-pille)}
#news.grid,#events.grid,#gdgroups.nxgrpgrid,#merch.merchgrid,#offers2.offgrid{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
#news.grid > *{flex:0 0 400px;scroll-snap-align:start}
#events.grid > *,#gdgroups.nxgrpgrid > *,#offers2.offgrid > *{flex:0 0 296px;scroll-snap-align:start}
#gdgroups.nxgrpgrid > *{min-width:0}
#merch.merchgrid > *{flex:0 0 192px;scroll-snap-align:start}
#news.grid::-webkit-scrollbar,#events.grid::-webkit-scrollbar,#gdgroups.nxgrpgrid::-webkit-scrollbar,#merch.merchgrid::-webkit-scrollbar,#offers2.offgrid::-webkit-scrollbar{height:7px}
#news.grid::-webkit-scrollbar-thumb,#events.grid::-webkit-scrollbar-thumb,#gdgroups.nxgrpgrid::-webkit-scrollbar-thumb,#merch.merchgrid::-webkit-scrollbar-thumb,#offers2.offgrid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:var(--nx-r-pille)}
/* Reihen mit mehr Karten als Platz zeigen das wie jedes Karussell der Plattform:
  Schleier und Pfeil rechts, Pfeil links sobald gerollt (js/nextari-game-detail.14-reihenpfeile.js). */
.crow{position:relative}
.crow .fade{position:absolute;top:0;bottom:15px;right:0;width:60px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));z-index:2;transition:opacity .15s}
.crow .nx-cnav{position:absolute;top:0;bottom:15px;width:48px;border:none;cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;color:#fff;transition:opacity .15s;padding:0}
.crow .nx-cnav.prev{left:0;background:linear-gradient(90deg,rgba(8,8,13,.96),rgba(8,8,13,.4) 55%,transparent)}
.crow .nx-cnav.next{right:0;background:linear-gradient(270deg,rgba(8,8,13,.96),rgba(8,8,13,.4) 55%,transparent)}
.crow .nx-cnav.off,.crow .nx-cnav.next.off + .fade{opacity:0;pointer-events:none}
.crow .nx-cnav svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.crow .media ~ .fade,.crow .media ~ .nx-cnav{bottom:23px}
@keyframes nx-still{from{visibility:hidden}to{visibility:visible}}
body > .section,body > .nx-row,body > .nx-charea{animation:nx-still 0s 1.2s both}
html.nx-geordnet body > .section,html.nx-geordnet body > .nx-row,html.nx-geordnet body > .nx-charea{animation:none}
/* KANTEN · eine senkrechte Linie fuer Kopf, Vorschauleiste und Inhalt.

  Gemessen standen bei 1600px Fensterbreite drei Anfaenge nebeneinander: das
  Logo bei 28 (feste Polsterung der Kopfzeile), die Vorschauleiste bei 136
  (eigenes 1320er Band) und die erste Inhaltsreihe bei 156. Der Abstand waechst
  mit der Breite · bei 1280 sind es 10px, bei 1600 schon 128.

  Der Inhalt gibt den Takt vor (1600 breit, 34 Polsterung · Stand,
  davor 1280/24), Kopfzeile und
  Vorschauleiste folgen mit derselben Formel. */
/* ---------------------------------------------------------------------------
  DEMO-SCHILD, EINGEBACKEN.
  Das Schild kann im Markup stehen (Where to get it, Critic Reviews, Across
  Social, This week, Right now). Sein Aussehen kam bisher nur aus dem Style,
  den nxm-demo-schild.js nach 1,2 Sekunden einspritzt · bis dahin stand
  "◆DEMO" als nackter Text am Titel. Dieselben Werte, jetzt ab der ersten
  Bildschirmzeile. Der spaetere Style wiederholt sie nur. */
.nx-demo-schild{vertical-align:middle;
  margin-left:10px;font:700 var(--nx-typo-klein) var(--nx-f-text);
pointer-events:none;}
.nx-demo-schild i{font-style:normal;font-size:var(--nx-typo-klein);color:var(--nx-text)}
/* ---------------------------------------------------------------------------
  TELEFON · gemessen bei 390 und 430 Punkten Breite. */
@media(max-width:900px){
  /* Die Meldeflaeche steht seit nx-handschrift.css zwischen den Raendern
  (left:8px). css/nx-mobil.css zieht sie mit margin-left:-172px aber weiter
  an den Glockenknopf zurueck · gemessen ragte sie dadurch von l=-164 bis
  r=180, also 72 Punkte ueber die linke Kante. Der Rand gehoert zur
  Verankerung von rechts, die es hier nicht mehr gibt. */
  .nx-noti.nx-noti.nx-noti{margin-left:0;margin-right:0}

  /* Das Ladenfeld war 600 Punkte hoch bei 1483 Punkten Inhalt · die letzten
  beiden Haeuser lagen unter der Kante, erreichbar nur ueber ein Scrollfeld
  im Scrollfeld. Auf dem Telefon scrollt die Seite ohnehin. */
  .nx-laeden{max-height:none;overflow:visible}

  /* Die fuenf Sterne waren je 15x15 Punkte gross · jeder Nachbarknopf ist 44
  hoch. Die Sterne bleiben, die Trefferflaeche waechst um sie herum. */
  #nxMyRateStars{gap:0}
  #nxMyRateStars span[data-r]{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px}

  /* Wischbaender: die Karten waren fest 296/300/400 Punkte breit, das Band ist
  bei 390 nur 305 breit. Die erste News-Karte lag damit 95 Punkte ausserhalb
  (Schlagzeile mitten im Wort abgeschnitten), bei den uebrigen Baendern blieb
  kein Stueck der naechsten Karte sichtbar · nichts zeigte an, dass es
  weitergeht. #merch macht es mit 192 Punkten schon richtig. */
  #news.grid > *{flex:0 0 min(280px,78vw)}
  #media .mtile,
  #live.grid > .lcard,
  #events.grid > *,#gdgroups.nxgrpgrid > *,#offers2.offgrid > *{flex:0 0 min(240px,72vw)}
  #friends.grid > .card{flex:0 0 min(232px,68vw)}

  /* iOS Safari zoomt bei jedem Eingabefeld unter 16px in die Seite hinein und
  zoomt nicht von allein zurueck. maximum-scale waere die falsche Antwort ·
  das nimmt die Vergroesserung fuer Sehschwache.
  Gemessen kamen beide Felder trotz dieser Regel weiter mit 15.5px an: eine
  Regel "input,textarea,select{font-size:15.5px!important}" aus einem
  anderen Stil gewinnt gegen eine Ansage ohne Gewicht. Mit !important
  entscheidet die Kennung, und die ist hier hoeher. */
  #nxPzZiel,#nxUrteilText{font-size:var(--nx-typo-kartenkopf)}

}
/* Merch von Amazon (nxm-merch-amazon.js): Kachel ist ein Link, Bild vom Haendler auf hellem Grund, Partnerlink-Marke statt AD. */
a.merchcard.nx-merch{display:block;color:inherit;text-decoration:none}
.nx-merch .merchthumb.nx-merch-bild{background:#f7f7f9 center/contain no-repeat;font-size:0}
.nx-merch .merchthumb .merchad{text-transform:uppercase}
.nx-merch .merchbtn{display:inline-flex;align-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--nx-text)}
/* Keine passende Ware, keine Anzeige (nxm-merch-amazon.js): die Reihe geht, ihr Eintrag in der Sprungleiste auch. */
.nx-ohne-merch .nx-snav a[href="#h-merch"]{display:none}

/* AM TELEFON IST DER HERO EIN HOCHKANTES BAND, KEIN BILD.
  Gemessen  bei 390 Punkten: .heroBg war 303 breit und 3.670 hoch,
  weil der Hero dort alle Inhalte gestapelt traegt. Ein Querformat-Artwork
  mit 'cover' wird darin auf rund elftausend Punkte Breite gezogen · zu
  sehen ist ein winziger Ausschnitt, praktisch eine Farbflaeche. Das Bild
  bekommt hier seine eigene Hoehe, darunter steht der Grund der Seite. */
@media(max-width:760px){
  .heroBg{inset:0 0 auto 0;height:240px}
  /* EIN BILD, NICHT ZWEI. Band und Packshot kommen aus derselben Quelle und
  zeigen dasselbe Motiv · am Schreibtisch stehen sie nebeneinander, am
  Telefon liegt das Cover auf dem Band und verdeckt es fast ganz. Der
  Titel steht ohnehin gross darunter. */
  .hero .packshot{display:none}
  .heroBg .sh{background:linear-gradient(0deg,var(--bg,#08080a),rgba(8,8,10,.45) 55%,rgba(8,8,10,.05))}
  .hero{background:var(--bg)}
  /* DAS BAND LAEUFT IN DIE FLAECHE AUS, NICHT IN EINE FARBE · die Maske
  dafuer gilt bei jeder Breite und steht unten (OHNE KAESTEN). */
}

/* ===== TELEFON · gemessen bei 390 Punkten (mess/mobilbild.py
  und die Sonde im 390er Rahmen) ==========================================
  DREI RAENDER LIEGEN HIER UEBEREINANDER. Der Seitenrand traegt 34, der
  Hero legt 32 darauf, das Ladenfeld noch einmal 16 · gemessen blieben
  der Ladenzeile 218 von 390 Punkten, also 56 Prozent des Bildschirms.
  Der Seitenrand ist Haussache (--nx-rand) und bleibt unangetastet; die
  beiden inneren Zahlen sind Schreibtischmasse und haben am Telefon
  nichts zu suchen. Nur die WAAGERECHTE geht zurueck · die Luft nach
  oben und unten bleibt, wie sie ist. */
@media(max-width:760px){
  /* EINE ZAHL ZERFAELLT NICHT IN ZWEI STUECKE. Gemessen bei 390: die
  Steam-Zeile braucht 338 Punkte und bekommt in der Leiste 265 · "52,096
  playing" wurde auf 50 Punkte gequetscht und lief in einem 32 Punkte
  hohen Kasten ueber zwei Zeilen, "Steam · 24 h" auf der einen, "peak ·
  #37" auf der naechsten. Am Schreibtisch passt die Zeile, am Telefon
  nicht · also bekommt sie hier ihre eigene Form: eine eigene Zeile ueber
  die volle Breite, die umbrechen DARF, und eine Hoehe, die sich nach dem
  Inhalt richtet statt ihn zu quetschen.
  Die Zeile gehoert nxm-steamlive.js, erscheint aber nur auf dieser
  Seite und nur in dieser Leiste. Zwei Klassen tief schlagen die eine
  Klasse des Moduls · deshalb steht hier kein !important und das Modul
  bleibt der Besitzer seiner Gestalt. */
  .nx-hact-leiste .nx-slive{display:flex;flex-wrap:wrap;align-items:center;
    width:100%;max-width:100%;box-sizing:border-box;
    height:auto;min-height:44px;padding:8px 0;margin:0;row-gap:2px;background:none}
  .nx-hact-leiste .nx-slive > b,
  .nx-hact-leiste .nx-slive > span{flex:0 0 auto}

  /* Aufgeklappt steht rechts oben das Zeichen zum Zuklappen
  (nxm-mobil-falten.js). Eine Reihe ohne eigenen Kopf traegt dort auch
  ihren Sortiergriff · er rueckt um ein Fingermass und eine Knopfluecke
  nach links, statt auf dem Zeichen zu liegen. */
  .nx-falt-auf > .nx-ctrls{right:calc(var(--nx-h-bedien) + var(--nx-luecke-knopf))}
}

/* OHNE KAESTEN, AM TELEFON UND AM SCHREIBTISCH (Entscheidung Telefon ohne
  Kaesten, seit 57b auch am Rechner). Die Spielseite ist eine Seite, keine
  Kastenreihe: der Kopf laeuft ueber die volle Breite, das Artwork wird zum
  Seitengrund und laeuft unten in ihn aus, Fakten, Wertung, Laeden und
  Erklaerung stehen ohne eigene Flaeche auf der Kante der Seite
  (--nx-kopfrand, dieselbe Kante wie Kopfleiste und Reihen), getrennt
  durch Luft. Bedienung (Genre-Pillen, Status-Wahl, Knoepfe, Reiter) und
  die Karten der Reihen behalten ihre Form. Den Grund von .hero und .mblk
  malt css/nextari-flaechen.css aus --nx-tafelgrund; das Token gilt fuer
  den ganzen Kopf. Die Handlungsleiste traegt keinen eigenen Grund mehr ·
  am Telefon steht sie auf dem Seitengrund, am Schreibtisch auf dem
  auslaufenden Artwork. Am Telefon hat das Band oben seine eigene Hoehe
  (Block davor), am Schreibtisch reicht es ueber den ganzen Kopf. */
.herorow{padding:32px var(--nx-kopfrand)}
.nx-hact-leiste{padding:12px var(--nx-kopfrand);background:none}
.hero{--nx-tafelgrund:transparent;background:none;border:0;border-radius:0;
  margin-left:0;margin-right:0;max-width:none}
.heroBg{-webkit-mask-image:linear-gradient(180deg,black 45%,transparent);
  mask-image:linear-gradient(180deg,black 45%,transparent)}
.hmeta{column-gap:var(--nx-luft)}
.hmeta .mblk,.hmeta .score,.nx-ppl,.nx-caps,.nx-laeden{background:none;border:0;border-radius:0;
  padding-left:0;padding-right:0}
.nx-laeden .storerow,.nx-laeden .storerow.best{background:none;padding-left:0;padding-right:0}

/* ==================================================================
 DIE HANDLUNGSLEISTE FUEHRT 
 Gemessen auf der ausgelieferten Seite: dreizehn Bedienelemente in drei
 Reihen, und sechzehn davon trugen DENSELBEN Ton · rgba(255,255,255,.05)
 mit Radius 10. Kaufen, Teilen, Vergleichen, Merken und fuenf
 Spielstaende sahen gleich aus. Nichts fuehrt, alles ist gleich laut 
 genau das ist die Unruhe.

 Die Hausregel dazu steht in den Gestaltungsregeln: EIN gefuelltes
 Bedienelement je Abschnitt. Der Kaufweg bleibt gefuellt; alles andere
 wird Wort mit Zeichen und meldet sich erst unter dem Zeiger.

 Die Absicht steht am Element: data-nx-knopfgrund="blank" heisst "der
 Bauer malt selbst" (nxm-bedienung.js). Der Maler stempelt dann nur das
 Mass, keinen Grund · am Schreibtisch standen sonst sieben graue Kaesten
 mit 4 Punkten Abstand, am Telefon dieselbe Reihe als Text. Das Wort
 "Compare with another game" steht deshalb schon im HTML; nxm-vergleich.js
 benutzt einen vorhandenen Griff, statt einen zweiten anzuhaengen.

 Die Luecken kommen aus der Leiter (.hact oben): 8 zwischen den Zeilen,
 16 zwischen den Woertern. Ein Wort hat kein seitliches Polster · seine
 sichtbare Kante ist die Kante der Leiste, und "Buy now" darunter steht
 auf derselben. Die Tippflaeche waechst unsichtbar um die halbe
 Wortluecke nach aussen, zwei Nachbarn treffen sich genau in der Mitte.

 Der doppelte Merker ist Absicht: nextari-flaechen.css gibt jedem .btn
 mit !important einen Grund und wird NACH dieser Datei geladen · gleich
 stark wuerde er gewinnen.

 JEDES WORT STEHT AUF DER MITTELLINIE SEINER ZEILE UND IST SO HOCH WIE
 SIE. Ein <span> in einer Flex-Reihe wird zum Block; am Telefon standen
 "Compare 5 stores" und "Compare with another game" deshalb mit der
 Schrift oben in ihrer 44er Flaeche, 4 Punkte ueber "Buy now" daneben.
 Die Fingerregel gibt jedem Knopf eine Mindestbreite · ein kurzes Wort
 ("Share") stand darin mittig und rueckte 7 Punkte vom Nachbarn weg. Und
 am Schreibtisch hielt der Maler das polsterlose "Share" (29 x 34) fuer
 einen Zeichenknopf und liess es 6 Punkte niedriger als die Nachbarn.
 Das Wort nimmt deshalb die Hoehe seiner Zeile an (stretch), richtet
 sein Wort darin mittig aus und hat keine Mindestbreite; seine
 Tippflaeche kommt aus ::after. Beim Zeigen wechselt nur die Farbe · der
 Schleier aus nxm-chrome.js legte sonst einen Kasten genau um die
 Buchstaben.
 ================================================================== */
.nx-hact-leiste .hact > [data-nx-knopfgrund="blank"][data-nx-knopfgrund]:not(.primary){
  background:none!important;background-image:none!important;border:0;
  color:var(--dim);padding-inline:0!important;position:relative;
  display:inline-flex;align-items:center;justify-content:flex-start;align-self:stretch;min-width:0}
.nx-hact-leiste .hact > [data-nx-knopfgrund="blank"]::after{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--nx-luecke-wort) / -2);right:calc(var(--nx-luecke-wort) / -2)}
.nx-hact-leiste .hact > [data-nx-knopfgrund="blank"][data-nx-knopfgrund]:not(.primary):hover,
.nx-hact-leiste .hact > [data-nx-knopfgrund="blank"][data-nx-knopfgrund]:not(.primary):focus-visible{color:#fff;box-shadow:none}
/* Ein Zustand bleibt lesbar · er steht schon als Haken im Wort. */
.nx-hact-leiste .hact > .nx-on[data-nx-knopfgrund="blank"][data-nx-knopfgrund]{color:#fff!important}

/* ==================================================================
 DIE SPIELSEITE WIRD RUHIG 
 Gemessen: 267 Kanten auf einer Seite (ohne Kopfleiste, Fuss und Dock).
 Fast jede sitzt auf etwas, das SCHON eine Flaeche hat · eine Karte mit
 Grund UND Rahmen, eine Pille mit Grund UND Rahmen. Zwei Mittel fuer
 dieselbe Trennung, und das Haus kennt eines davon: Flaeche statt Kante.

 Zwei Kanten bleiben: der Punkt fuer "online" ist ein Ring, kein Kasten,
 und ein Ring um ein Profilbild trennt das Bild vom Grund.
 ================================================================== */
.nx-rv-c,.merchcard,.nx-res-row,.gchip,.disc,
.nx-sm-row,.nx-ed-c,.nx-wer-c,.nx-nws-c,.simcard,.nx-gd-c{
  border:0}

/* UNTER DER KLEINSTEN SPROSSE STEHT NICHTS MEHR.
  Die Hausleiter faengt bei 10,5 an (Pille). Im Kaufmenue standen
  "DRM-free", "Cheapest", "-50%", "PS5" und "Series X|S" auf NEUN
  Punkten · das ist keine Sprosse, das ist eine Ausrede fuer zu wenig
  Platz. Initialen in einem Profilbild bleiben davon unberuehrt: dort
  ist die Schriftgroesse ein Mass, keine Lesegroesse. */
.nx-sm-badge,.nx-sm-tag{font-size:var(--nx-typo-klein)}
/* Zweiter Durchgang · dieselben zwei Mittel fuer dieselbe Trennung. */
.offcard, .nxgrp, .nx-storemenu{border:0}
/* Ein Cover ist ein Bild, kein gerahmtes Bild · die Hausregel nennt die
  Spielkachel ausdruecklich ein Cover. */
.packshot{border:0}

/* DIE LEITER GILT AUCH HIER.
  Gemessen acht Groessen ausserhalb der Sprossen. Geglaettet wird, was
  eine Rolle hat; Schriftzeichen bleiben, wo sie sind (das Rautezeichen
  der Demo-Marke, die Kreuze zum Schliessen, die Initialen in einem
  Profilbild · dort ist die Groesse ein Mass, keine Lesegroesse). */
.nx-sm-head b{font-size:var(--nx-typo-kartenkopf)}
.nx-sm-head span{font-size:var(--nx-typo-meta)}
.nx-vk-t{font-size:var(--nx-typo-text)!important}
.nx-pz-v{font-size:var(--nx-typo-text)}
.metabox b,.metabox .nx-score-n{font-size:var(--nx-typo-abschnitt)}
/* Dritter Durchgang · was noch eine Kante UND eine Flaeche trug. */
.seeall,.presscard,.pressagg,.nxad-tag,.nx-veil-badge{border:0!important}
textarea{border:0!important;background:var(--nx-hebung)}
/* WER DAS SPIEL HAT, KAUFT ES NICHT NOCH EINMAL (Nr. C6). Neben "You already
  own this · nothing to buy here" standen "Buy now" und drei "Buy" der
  Editionen lila gefuellt. nxm-vorkauf.js setzt data-nx-spiel-besessen am
  Wurzelelement, dann sind die Kaufknoepfe grau. Gefuellt ist der Weg in
  die Library (nxm-querwege.js). */
html[data-nx-spiel-besessen] #buy.btn.primary,
html[data-nx-spiel-besessen] #editions .buybtn{background:var(--nx-hebung-2);color:var(--nx-text,#fff)}