/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.07 */
body{margin:0;}
@media(max-width:900px){
 .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}
 .thhead{row-gap:8px}
 .thpres{line-height:1.5}
 .thpres .pdot{display:inline-block;vertical-align:middle;margin-right:8px}
 
 .chips,.actions,.btnrow,.metarow,.pillrow{flex-wrap:wrap}
}
@supports (height:100svh){
 body{min-height:100svh}
}
.nx-demobar{min-height:38px;box-sizing:border-box;align-items:center}
@media(max-width:900px){
 
 
}
@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:14px;letter-spacing:.02em;
  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{background-position:9px 9px}
.grid-ov,.banner-grid,.agrid,.bb-grid,.lgrid,.ovg,.t10grid2{background-position:7px 7px}
.fclaim .fcl1{font-weight:400;font-size:var(--nx-typo-text);line-height:1.4;letter-spacing:.1px}
.console-cta{background:var(--nx-hebung);}
@media (hover:hover){.console-cta:hover{background:var(--nx-hebung);}}
.nx-ctrls.inhead{
 margin:0 0 0 auto;display:inline-flex;gap:10px;align-items:center;
 opacity:0;pointer-events:none;transition:opacity .15s ease}
@media(hover:none){.nx-ctrls.inhead{opacity:1;pointer-events:auto}}
.ff-t.on{background:var(--nx-hebung);border-color:var(--nx-linie);color:#fff}
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}
.logo{height:19px;width:auto}
.beta{margin-left:5px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.h-display{font-family:var(--nx-f-titel);font-weight:800;line-height:1.04;letter-spacing:-.01em}
@media (hover:hover){.btn.pri:hover{transform:translateY(-1px)}}
.btn.ghost{border:1px solid var(--line)}
@media (hover:hover){.btn.ghost:hover{border-color:var(--line2)}}
.ltop{position:sticky;top:0;z-index:30;background:rgba(15,15,24,.82);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
@media (hover:hover){.lnav a:hover{color:var(--txt)}}
.hero{padding:96px 0 80px;text-align:center}
.hero .ey{display:inline-flex;align-items:center;gap:8px;font-size:var(--nx-typo-text);font-weight:700;color:var(--nx-text);background:var(--nx-hebung);border:1px solid var(--line2);border-radius:var(--nx-r-pille);padding:8px 16px;margin-bottom:26px}
.hero h1{font-size:56px;max-width:880px;margin:0 auto 22px}
.hero h1 .g{background:linear-gradient(var(--nx-text),var(--nx-text));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--dim);max-width:600px;margin:0 auto 34px;line-height:1.55}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .tiny{margin-top:18px;font-size:var(--nx-typo-text);color:var(--faint)}
.shot{max-width:980px;margin:60px auto 0;border-radius:var(--nx-r-tafel);border:1px solid var(--line2);overflow:hidden;box-shadow:none;background:var(--nx-hebung)}
.shot .bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.shot .bar i{width:11px;height:11px;border-radius:50%;background:var(--nx-hebung);display:block}
.shot .scr{height:340px;display:flex;align-items:center;justify-content:center;background:radial-gradient(600px 400px at 70% 0,transparent,transparent),var(--bg);color:var(--faint);font-size:14px;position:relative}
.shot .scr .ph{text-align:center;padding:0 var(--nx-innen)}
.shot .scr .ph b{display:block;font-family:var(--nx-f-titel);font-weight:800;font-size:22px;color:var(--txt);margin-bottom:6px}
.sec{padding:78px 0}
.sec h2{font-family:var(--nx-f-titel);font-weight:800;font-size:34px;text-align:center;margin-bottom:12px}
.sec .lead{text-align:center;color:var(--dim);font-size:var(--nx-typo-kartenkopf);max-width:560px;margin:0 auto 48px}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vc{background:var(--surface);border:1px solid var(--line);border-radius:var(--nx-r-tafel);padding:26px 22px}
.vc .ic{width:46px;height:46px;border-radius:var(--nx-r-karte);display:flex;align-items:center;justify-content:center;background:var(--nx-hebung);color:var(--nx-text);margin-bottom:16px}
.vc h3{font-family:var(--nx-f-titel);font-weight:700;font-size:18px;margin-bottom:8px}
.vc p{color:var(--dim);font-size:14px;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding-top:8px}
.step .n{font-family:var(--nx-f-titel);font-weight:800;font-size:38px;color:var(--nx-text);opacity:.5;line-height:1}
.step h3{font-family:var(--nx-f-titel);font-weight:700;font-size:18px;margin:10px 0 8px}
.step p{color:var(--dim);font-size:14px;line-height:1.55}
/* Der Schlussbalken stand auf der vollen Seitenbreite (gemessen 1383),
  waehrend der ganze Inhalt darueber bei 1080 endet · er sprang damit
  auf beiden Seiten aus der Flucht. Jetzt dieselbe Kante wie alles
  andere. */
.band{max-width:1080px;margin:0 auto;background:linear-gradient(120deg,rgba(255,255,255,.03),rgba(52,229,216,.08));border:1px solid var(--line2);border-radius:var(--nx-r-block);padding:60px 30px;text-align:center}
.band h2{font-family:var(--nx-f-titel);font-weight:800;font-size:38px;margin-bottom:14px}
.band p{color:var(--dim);font-size:18px;margin-bottom:28px}
@media(max-width:860px){.hero h1{font-size:46px}.vgrid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}}
.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 a{display:block;font-size:var(--nx-typo-text);color:var(--dim);padding:4px 0;transition:.15s}
.fbarin{max-width:var(--nx-breite);margin:0 auto;padding:16px var(--nx-rand);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
 font-size:var(--nx-typo-meta);color:var(--faint)}
@media(max-width:760px){.finner{grid-template-columns:1fr 1fr}.fbarin .right{text-align:left}}
.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:9px;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}
.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}
.av{position:relative;line-height:1}
.av>.online{position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:#3be37a;box-shadow:0 0 0 2px var(--panel,#121215)}
.av{font-family:var(--nx-f-text)}
.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);letter-spacing:.3px;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);letter-spacing:.3px;cursor:pointer;transition:background .15s}
.brand .beta,.beta{vertical-align:middle;position:relative;top:0;transform:none}
.lead-clarify{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--nx-text);margin-top:10px}
.nx-b2b{padding:56px 0 8px}
/* EINE KANTE FUER DIE GANZE SEITE. Der Geschaeftsteil stand auf 1160,
  alles darueber auf 1080 (.wrap) · gemessen  begannen die
  Karten des Geschaeftsteils 40 px weiter links als die vier
  Versprechen darueber. Vier verschiedene Inhaltsbreiten auf einer
  Seite sind genau das, was man als "die Proportionen stimmen nicht"
  sieht, ohne es benennen zu koennen. */
.nx-b2b-in{max-width:1080px;margin:0 auto;padding:0 24px}
.nx-b2b-h{max-width:720px;margin-bottom:26px}
.nx-b2b-h h2{margin:0 0 8px;font:800 30px/1.15 var(--nx-f-titel);letter-spacing:-.02em;color:#fff}
.nx-b2b-h p{margin:0;font:400 14px/1.6 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-b2b-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nx-b2b-c{background:var(--surface);border:1px solid var(--line,rgba(255,255,255,.06));border-radius:var(--nx-r-tafel);padding:18px}
.nx-b2b-i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--nx-r-bedien);background:var(--nx-hebung);border:1px solid rgba(255,255,255,0.13);color:var(--nx-text);margin-bottom:11px}
.nx-b2b-c b{display:block;font:800 14px var(--nx-f-text);color:#fff;margin-bottom:6px}
.nx-b2b-c p{margin:0;font:400 var(--nx-typo-text)/1.55 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-b2b-f{margin:20px 0 0;font:400 var(--nx-typo-text)/1.6 'Nunito Sans',sans-serif;color:var(--dim);max-width:860px}
@media(max-width:1000px){.nx-b2b-g{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.nx-b2b-g{grid-template-columns:1fr}.nx-b2b-h h2{font-size:26px}}
.pb-navlab{flex:none;font:800 9px var(--nx-f-text);color:var(--nx-leise);padding-right:10px;margin-right:2px;border-right:1px solid rgba(255,255,255,.14)}
.nx-credo{margin:0 0 30px;max-width:64ch}
.nx-credo b{display:block;font:800 30px/1.28 var(--nx-f-titel);color:#fff;letter-spacing:-.015em;text-wrap:balance}
.nx-credo>span{display:block;margin-top:12px;font:400 var(--nx-typo-kartenkopf)/1.6 'Nunito Sans',sans-serif;color:var(--dim);max-width:60ch;text-wrap:pretty}
@media(max-width:820px){.nx-credo b{font-size:22px}}
.brand{display:grid;grid-template-columns:auto auto;text-decoration:none}
.beta.beta.beta{font-family:var(--nx-f-text);font-weight:700;font-size:9px;letter-spacing:.3px;line-height:1;background:#5b27e8;color:#fff;border:none;border-radius:var(--nx-r-marke);padding:2px 7px;align-self:flex-start;transform:translateY(-4px)}
.counter.counter.counter{font-size:9px}
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){a.brand:hover,.brand:hover{opacity:.82}}
@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{margin-top:0;margin-bottom: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;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.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 > .nx-charea-out + .section{margin-top:-16px}
@keyframes nxpop{0%{transform:scale(1)}42%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes nxfadeup{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes nxtoastin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.nx-anim-pop,.nx-anim-in,.nx-anim-toast{animation:none}}
.nx-eu-foot .nx-eu{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nxsd-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--nx-r-bedien);text-decoration:none;transition:background .15s}
.nxsd-n{flex:1;min-width:0;font:700 14px "Nunito Sans",sans-serif;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxsd-n b{color:#fff;font-weight:800}
.nxsr-ic{width:34px;height:34px;border:none;background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center;border-radius:var(--nx-r-bedien);transition:.15s}
@media (hover:hover){.nxsr-ic:hover{color:var(--txt);background:var(--nx-hebung)}}
.nxsr-ov.on{display:block}
.nxsr-r.on{background:var(--accent)}
@media (hover:hover){.nxsr-r:hover{background:var(--nx-hebung)}}
.nxsr-r b{font-family:var(--nx-f-text);font-size:var(--nx-typo-text);display:block}
.nxsr-r span{color:var(--dim);font-size:var(--nx-typo-meta)}
#inbox{overflow:visible}
.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);letter-spacing:.2px}
@media (hover:hover){.nx-noti-item:hover{background:var(--nx-hebung)}}
@media(max-width:900px){
 .nx-demobar{min-height:0;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:8px}
 .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)}
}
.nx-noti{opacity:0;pointer-events:none;transform:translateY(-8px)}
.brand{align-items:center;gap:8px;flex:none}
.brand .logo{height:19px;width:auto}
.beta{font-family:var(--nx-f-text);font-size:9px;font-weight:700;letter-spacing:.3px;color:#fff;padding:2px 8px;line-height:1;align-self:flex-start;}
a.me{text-decoration:none}
a.icon-btn{text-decoration:none}
.icon-btn{width:40px;height:40px;border-radius:var(--nx-r-karte);border:1px solid var(--line);background:var(--nx-hebung);
 display:grid;place-items:center;color:var(--dim);cursor:pointer;transition:.15s;position:relative;flex:none}
@media (hover:hover){.icon-btn:hover{color:var(--txt);border-color:var(--line2)}}
.counter{position:absolute;top:5px;right:1px;min-width:14px;height:14px;padding:0 0px;border-radius:10px;
 background:var(--accent);color:#fff;font-family:var(--nx-f-text);font-weight:700;display:grid;
 place-items:center;box-shadow:none;border:1.5px solid var(--bg)}
.me{display:flex;align-items:center;gap:8px;padding:0px 8px 0px 0px;border-radius:var(--nx-r-pille);border:1px solid var(--line);
 background:var(--nx-hebung);cursor:pointer;transition:.15s}
@media (hover:hover){.me:hover{border-color:var(--line2)}}
.chips,.actions,.btnrow,.metarow,.pillrow{flex-wrap:wrap}
.icon-btn,.me,.chip-f,.tha,button,.rbtn{touch-action:manipulation}
.btn, .chip-f, .sf, .cta, .soontag{white-space:nowrap}
.nx-prevbar .pb-badge{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.nx-prevbar .pb-glabel{font-size:9px;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)}
.fcol .nx-soon-badge{font:800 9px 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 .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}
.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);letter-spacing:.3px;text-decoration:none;white-space:nowrap;transition:background .15s}
@keyframes nxIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* Schmale Schirme: die Marketingleiste zeigt Logo und Einstieg; die Anker stehen im Fuss. */
@media(max-width:720px){.ltop .lnav{display:none!important}.ltop .wrap{gap:10px!important}}
@media(max-width:430px){.ltop .wrap > div:last-child a:not(.btn){display:none}}