/*! NEXTARI · Author: Marvin Slotta · Build 2026.09.07 */
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}
::-webkit-scrollbar-thumb{background:#26263a;border-radius:var(--nx-r-bedien)}
.tr{margin-left:auto;display:flex;align-items:center;gap:16px}
.stepn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);display:flex;align-items:center;gap:8px}
.exit{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--nx-text);cursor:pointer}
.col{max-width:820px;margin:0 auto;padding:40px 24px 128px;position:relative;z-index:1}
.htitle{font-family:var(--nx-f-titel);font-weight:700;font-size:var(--nx-typo-seite);color:#fff;display:flex;align-items:center;gap:16px}
.hsub{color:var(--dim);font-size:var(--nx-typo-text);margin-top:8px;max-width:620px;line-height:1.5}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.jump a{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);border:1px solid var(--line);background:var(--nx-hebung);padding:8px 16px;border-radius:var(--nx-r-pille);display:flex;align-items:center;gap:8px;cursor:pointer}
@media (hover:hover){.jump a:hover{color:#fff;border-color:var(--line2)}}
.jump a.on{color:#fff;border-color:var(--line2);background:var(--nx-hebung)}
.block{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--nx-hebung);padding:16px 24px 8px}
.bhead{display:flex;align-items:center;gap:8px;margin-bottom:0px}
.bnum{width:24px;height:24px;border-radius:var(--nx-r-bedien);display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;background:var(--accent);flex:none}
.btitle{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff}
.btag{margin-left:auto;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 var(--line2);padding:4px 8px;border-radius:var(--nx-r-bedien)}
.bnote{font-size:var(--nx-typo-text);color:var(--faint);margin:2px 0 6px 34px}
.srow{display:flex;align-items:center;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:none}
.srow .lab{flex:1;min-width:0}
.srow .lab .t{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:var(--txt)}
.srow .lab .d{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:4px;line-height:1.45}
.srow .lab .d a{color:var(--nx-text)}
.tg{width:46px;height:26px;border-radius:999px;background:#26263a;position:relative;cursor:pointer;transition:.2s;flex:none}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:none}
.tg.on{background:var(--accent)}
.seg{display:inline-flex;background:var(--nx-hebung);border:1px solid var(--line);border-radius:var(--nx-r-karte);padding:4px;flex:none}
.seg span{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);padding:8px 16px;border-radius:var(--nx-r-bedien);color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:8px;transition:.15s}
.seg span.on{color:#fff;background:var(--accent);box-shadow:none}
/* Eine Stufe, die gerade nicht gilt (18+ fuer ein junges Familienkonto oder
  nach "unter 16"), bleibt sichtbar und sagt im Satz darunter, warum · sie
  ist nur leiser. Ein Klick darauf nennt den Grund. */
.seg[aria-disabled="true"]{opacity:.45}
/* Gesperrt behaelt die Hoehe der freien Stufe · ohne Knopfrolle fiel am
  Telefon das Fingermass weg, und die Zeile sprang beim Sperren zusammen. */
.seg[aria-disabled="true"] span{cursor:not-allowed;min-height:var(--nx-h-bedien)}
.ssel{height:40px;padding:0 16px;border-radius:var(--nx-r-bedien);border:1px solid var(--line);background:var(--nx-hebung);color:var(--txt);font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);display:inline-flex;align-items:center;gap:16px;min-width:172px;justify-content:space-between;flex:none}
@media (hover:hover){.ssel:hover{color:#fff}}
.ssel.sm{min-width:140px;height:36px}
.ssel .fl{font-size:var(--nx-typo-kartenkopf)}
.sw{width:28px;height:28px;border-radius:var(--nx-r-bedien);cursor:pointer;position:relative}
.sw.on{box-shadow:none}
.swwrap{display:flex;gap:8px;flex:none}
.acct{display:flex;align-items:center;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line)}
.acct:last-child{border-bottom:none}
.acctlogo{width:40px;height:40px;border-radius:var(--nx-r-karte);display:grid;place-items:center;flex:none}
.acctinfo{flex:1;min-width:0}
.acctn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:var(--txt);display:flex;align-items:center;gap:8px}
.accthandle{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:2px}
.connpill{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--green);background:rgba(59,227,122,.1);border:1px solid rgba(59,227,122,.3);padding:2px 8px;border-radius:var(--nx-r-bedien)}
.btnghost{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);background:var(--nx-hebung);border:1px solid var(--line);padding:8px 16px;border-radius:var(--nx-r-bedien);cursor:pointer;flex:none}
@media (hover:hover){.btnghost:hover{color:#fff;border-color:var(--line2)}}
.btnconn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff;background:var(--accent);border:none;padding:8px 16px;border-radius:var(--nx-r-bedien);cursor:pointer;flex:none;display:flex;align-items:center;gap:8px;box-shadow:none}
.acctnote{font-size:var(--nx-typo-meta);color:var(--faint);display:flex;align-items:center;gap:8px;padding:16px 2px 8px;line-height:1.5}
.acctnote svg{flex:none}
.notif-head{display:flex;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line)}
.notif-head .sp{flex:1}
.notif-head .col2{width:64px;text-align:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:var(--faint)}
.nrow{display:flex;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line)}
.nrow:last-child{border-bottom:none}
.nrow .lab{flex:1}
.nrow .lab .t{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--txt)}
.nrow .lab .d{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:2px}
.nrow .cell{width:64px;display:flex;justify-content:center}
.nrow .cell .tg{width:42px;height:24px}
.nrow .cell .tg::after{width:18px;height:18px}
.nrow .cell .tg.on::after{left:20px}
.adtag{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-klein);color:#1a1505;background:var(--gold);padding:2px 8px;border-radius:var(--nx-r-bedien);margin-left:8px;vertical-align:middle}
.dangerblock{border-color:rgba(255,77,109,.25)}
.dangerrow .t{color:var(--live)!important}
.btndanger{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.3);padding:8px 16px;border-radius:var(--nx-r-bedien);cursor:pointer;flex:none}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--nx-grund);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.barin{max-width:820px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px}
.savedtag{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--green);display:flex;align-items:center;gap:8px}
.skip{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--faint);cursor:pointer;margin-left:auto}
@media (hover:hover){.skip:hover{color:var(--dim)}}
.verified{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(--green);background:rgba(59,227,122,.1);border:1px solid rgba(59,227,122,.3);padding:8px 16px;border-radius:var(--nx-r-bedien)}
.bsub{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--dim);margin:16px 0 8px}
.blockrow{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.blockrow:last-child{border-bottom:none}
.brav{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.blockrow .bn{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:#fff}
.blockrow .bd{font-size:var(--nx-typo-meta);color:var(--faint);margin-top:2px}
.unblock{margin-left:auto;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--nx-text);background:var(--nx-hebung);border:1px solid var(--line2);padding:8px 16px;border-radius:var(--nx-r-bedien);cursor:pointer}
.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{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}
.ccverify{margin-top:16px;border:1px solid var(--line2);border-radius:var(--nx-r-tafel);background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.03));padding:16px 16px}
.ccvhead{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.ccvlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ccvitem{display:flex;align-items:center;gap:8px;font-size:var(--nx-typo-text);color:var(--dim);line-height:1.4}
.ccvitem svg{color:var(--green);flex:none}
.ccvbtn{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:16px 16px;border-radius:var(--nx-r-bedien);background:var(--accent)}
.ccvstatus{margin-top:16px;display:none;align-items:center;gap:8px;font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-text);color:var(--gold)}
.ccvstatus.show{display:flex}
.ssel{position:relative;cursor:pointer;user-select:none;transition:border-color .15s}
@media (hover:hover){.ssel:hover{border-color:var(--line2)}}
.ssel.open{border-color:var(--nx-linie)}
.ssel.open span[id] svg{transform:rotate(180deg);transition:transform .15s}
.ssel-menu{position:absolute;z-index:300;top:calc(100% + 7px);right:0;min-width:210px;max-height:300px;overflow-y:auto;background:var(--nx-flaeche-2);border:1px solid var(--line2);border-radius:var(--nx-r-tafel);padding:6px;box-shadow:var(--nx-schatten);animation:sselin .14s ease}
@keyframes sselin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.ssel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--nx-r-bedien);font-size:14px;color:var(--txt);cursor:pointer;white-space:nowrap;line-height:1.2}
@media (hover:hover){.ssel-opt:hover{background:var(--nx-hebung);color:#fff}}
.ssel-opt.sel{color:#fff}
.ssel-opt .ck{display:flex;color:var(--nx-text);opacity:0;flex:none}
.ssel-opt.sel .ck{opacity:1}
.ssel-opt .fl{margin-right:2px}
.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{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:18px;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 rgba(255,255,255,.06);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:18px;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:14px;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:30px;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 9px 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}
.mtile.nx-embed .ov,.mtile.nx-embed .play,.mtile.nx-embed .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){
  .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){
  .col-main,.col-center,main{width:auto!important;max-width:100%!important;margin:0!important}
  
  .grid2,.grid3,.twocol,.threecol,.split,.cols{grid-template-columns:1fr;display:grid!important}
}
@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!important;gap:8px!important}
  .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{height:auto;min-height:38px;box-sizing:border-box;
            padding-top:calc(env(safe-area-inset-top))!important;
            padding-bottom:0!important;}
@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;
  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);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}
.console-cta{
  background:var(--accent);
  font-weight:800;letter-spacing:.2px;
  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)}}
.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}
.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:9px;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:14px;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}
html body .app{overflow:visible;align-items:stretch}
html body .app .main{overflow:visible;height:auto;max-height:none;min-width:0}
html body .app .side{position:relative;top:auto;align-self:stretch;overflow:visible}
html body>footer.footer,html body .app~footer.footer{width:100%;max-width:none;margin:0;position:relative;z-index:1}
.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 1.2fr;gap:24px}
.fcol a{display:block;font-size:var(--nx-typo-text);color:var(--dim);padding:4px 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)}
.fclaim .fcl1{font-weight:400;font-size:var(--nx-typo-text);line-height:1.4}
.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}
@keyframes nxFbDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.app~footer.footer .finner{max-width:none;margin:0;padding-left:40px;padding-right:40px;grid-template-columns:1.4fr 1fr 1fr 1.2fr;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-ic{cursor:default}
.nxn-ic svg{cursor:default}
.col{padding-top:96px}
@media(max-width:560px){.col{padding-top:120px}}
.nx-set-soon{font-family:var(--nx-f-text);font-weight:800;font-size:var(--nx-typo-klein);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;white-space:nowrap}
.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)}
.cllabel,.btndanger,.chip.c-live,.nx-live-txt{color:#ff7a92!important}
.nx-ss-badge,.nx-ss-live{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.14)}
.eyebrow.eyebrow.eyebrow{}
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{margin-bottom:0}
section.nx-row.nx-row:has(.gcard),.section.nx-row.nx-row:has(.gcard){padding-top:3px;padding-bottom:3px}
.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!important;background-clip:initial!important;color:#fff!important;-webkit-text-fill-color:#fff}
.shead h2, .rh h2, h2[id^="h-"], .nx-zone, .nx-cont-head h2{font-size:22px!important;font-weight:800!important;line-height:1.2!important}
.shead h3{font-size:22px!important;line-height:1.2!important}
.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}
.csechead{font-size:18px}
.nx-set-card h2{font-size:var(--nx-typo-abschnitt)}
.nx-set-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 22px}
.nx-set-nav a{font:700 var(--nx-typo-meta) var(--nx-f-text);color:var(--dim);text-decoration:none;border:1px solid rgba(255,255,255,.14);border-radius:var(--nx-r-pille);padding:6px 13px}
@media (hover:hover){.nx-set-nav a:hover{color:#fff;border-color:var(--nx-linie)}}
.nx-set-card{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@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!important}}
.nx-eu-foot .nx-eu{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nx-csp-why{display:block;font:400 var(--nx-typo-meta)/1.5 'Nunito Sans',sans-serif;color:var(--dim);margin-top:3px}
.nx-csp-why a{color:var(--nx-text);text-decoration:none}
@media (hover:hover){.nx-csp-why a:hover{text-decoration:underline}}
.nx-csp-when{display:block;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);margin-top:2px}
.nx-csp-ask{flex-basis:100%;width:100%;margin:11px 0 2px;padding:13px 15px;border-radius:var(--nx-r-karte);background:var(--nx-hebung);border:1px solid var(--nx-linie)}
.nx-csp-ask p{margin:0 0 10px;font:400 var(--nx-typo-text)/1.6 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-csp-ask b{font-family:var(--nx-f-text);font-weight:700;color:#fff}
.nx-csp-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-csp-check input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer}
.nx-csp-row{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.nx-csp-go{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;background:var(--accent,#5b27e8);border:0;border-radius:var(--nx-r-bedien);padding:9px 15px;cursor:pointer}
.nx-csp-go[disabled]{opacity:.42;cursor:not-allowed}
.nx-csp-no{font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--dim);background:none;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:var(--nx-r-bedien);padding:9px 15px;cursor:pointer}
@media (hover:hover){.nx-csp-no:hover{color:#fff;border-color:rgba(255,255,255,.3)}}
.nx-csp-list{display:flex;flex-direction:column;margin-top:4px}
.nx-csp-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.06))}
.nx-csp-item:last-child{border-bottom:0}
.nx-csp-item b{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;min-width:86px}
.nx-csp-item span{font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;color:var(--dim);flex:1;min-width:0}
.nx-csp-item i{font-style:normal;font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);white-space:nowrap}
.nx-csp-empty{font:400 var(--nx-typo-text)/1.6 'Nunito Sans',sans-serif;color:var(--dim);padding:6px 0}
.tg.on::after{left:auto;right:2px}
.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-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)}
/* Ein Zustand ist kein Weg · er steht grau neben den violetten Worten, die
  etwas tun. In Violett las sich "Nothing to judge yet · Keep" als ein Satz. */
.nx-sub-tip{font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);flex:none}
.nx-sub-off{font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim);flex:none}
.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)}}
@media(max-width:900px){
 .nx-demobar{min-height:0;}
 
 .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)}
.chips,.actions,.btnrow,.metarow,.pillrow{flex-wrap:wrap}
.chip-f,.tha,button,.rbtn{touch-action:manipulation}
.btn, .chip-f, .sf, .cta, .soontag{white-space:nowrap}
.nx-demobar{display:none}
.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: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 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}
/* Die Seitenspalte folgt der Seitenbreite aller App-Seiten (--nx-breite), nicht
  einer eigenen Zahl. Mit 880 stand der Seitentitel bei 1440px Fenster auf 304
  statt auf 104 · 200 weiter rechts als auf jeder anderen Seite, ueber die
  ganze Seite hinweg. Lesbarkeit gewinnt nicht die Spalte, sondern die Zeile:
  Fliesstext bekommt darum eine eigene Zeilenbreite (siehe .nx-set-sub /
  .nx-set-desc). */
.nx-set-wrap{max-width:var(--nx-breite);margin:0 auto;padding:36px var(--nx-rand) 48px}
.nx-set-wrap h1{font:700 var(--nx-typo-seite) var(--nx-f-titel);color:var(--txt);margin:0 0 4px}
.nx-set-sub{font:400 var(--nx-typo-text) 'Nunito Sans',sans-serif;color:var(--dim);margin:0 0 26px;max-width:640px}
/* KEIN KASTEN UM EINEN ABSCHNITT.  Gemessen auf der ausgelieferten Seite:
  17 graue Kaesten, jeder 1532 Punkte breit, und darin 56 Zeilen mit mehr als
  60 Punkten Totraum rechts vom letzten Bedienelement · der groesste 993.
  Eine Zeile aus vier Woertern und einem Knopf stand in einer Flaeche, die
  fast so breit war wie der Bildschirm.

  Der Abschnitt traegt jetzt nur noch seinen Kopf; die FLAECHE ist die
  Zeile, und sie ist so breit wie die Spalte (820).  Keine Linien, keine
  Kanten · die Zeilen trennt Luft. */
.nx-set-card{background:none;border:0;border-radius:0;padding:0;margin:0 0 36px}
.nx-set-card h2{font:800 var(--nx-typo-abschnitt) var(--nx-f-titel);color:var(--txt);margin:0 0 3px;letter-spacing:-.2px}
.nx-set-desc{font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;margin:0 0 14px;max-width:64ch}
/* Die Teile einer Zeile (Zeichen, Text, Zustand, Herkunft, Worte) trennt die
  Wortluecke des Hauses · mit 12 standen zwei Worte ohne Kasten so eng, dass
  "Not my thing Keep" wie ein Wort las. */
.nx-set-row{--nx-set-ic:34px;display:flex;align-items:center;gap:var(--nx-luecke-wort);margin:0 0 6px;padding:11px 14px;
  border:0;border-radius:var(--nx-r-karte);background:var(--nx-hebung)}
.nx-set-row:last-child{margin-bottom:0}
/* Was hinter dem Text steht, sitzt am rechten Rand der ZEILE · nicht in der
  Mitte des Bildschirms.  Der erste Nachbar bekommt den Abstand, alles
  Weitere haengt sich an ihn. */
.nx-set-row > .nx-set-t ~ *{flex:none}
.nx-set-row > .nx-set-t + *{margin-left:auto}
.nx-set-ic{flex:none;width:var(--nx-set-ic);height:var(--nx-set-ic);border-radius:var(--nx-r-bedien);background:var(--nx-hebung);display:flex;align-items:center;justify-content:center}
.nx-set-t{flex:1 1 auto;min-width:0;max-width:60ch}
.nx-set-t b{display:block;font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--txt)}
.nx-set-t span{font:400 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:var(--dim)}
.nx-set-on{font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;color:#3ddc84}
.nx-set-btn{flex:none;font:700 var(--nx-typo-meta) 'Nunito Sans',sans-serif;white-space:nowrap}
@media (hover:hover){.nx-set-btn:hover{background:var(--nx-hebung)}}
/* Das stille Wort (.nx-set-btn.ghost) besitzt nextari.css · hier stand eine
  zweite Form (Umriss in --dim), die dort ohnehin ueberschrieben wurde.
  Loeschen ist ein rotes Wort wie die Worte daneben: als einziger Kasten
  der Karte war die zerstoerende Handlung die lauteste. Tippflaeche und
  Polster stehen beim Wortknopf in nextari.css. */
.nx-set-btn.danger{border-color:transparent;background:none;color:#ff8a8a}
.nx-set-btn[disabled]{opacity:.6;cursor:default}
.nx-tgl{flex:none;width:42px;height:24px;border-radius:99px;background:var(--nx-hebung-2);position:relative;cursor:pointer;border:none;transition:background .15s}
.nx-tgl i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.nx-tgl.on{background:var(--accent,#5b27e8)}
.nx-tgl.on i{left:21px}
.nx-set-note{margin-top:10px;padding:12px 14px;border-radius:var(--nx-r-karte);background:var(--nx-hebung);border:0;font:400 var(--nx-typo-text)/1.5 'Nunito Sans',sans-serif;}
.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-crs{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:var(--nx-r-tafel);padding:18px 20px;margin:18px 0}
.nx-crs-h{font-family:var(--nx-f-text);font-weight:700;font-size:var(--nx-typo-kartenkopf);color:#fff;margin-bottom:5px}
.nx-crs-s{margin:0 0 12px;font:400 var(--nx-typo-text)/1.55 'Nunito Sans',sans-serif;color:var(--dim);max-width:640px}
.nx-crs-btn{border:1px solid rgba(255,255,255,.16);background:var(--nx-hebung);color:var(--txt);border-radius:var(--nx-r-bedien);padding:8px 16px;font:700 var(--nx-typo-text) var(--nx-f-text);cursor:pointer;transition:.15s}
@media (hover:hover){.nx-crs-btn:hover{border-color:var(--nx-linie)}}
.nx-crs-btn.on{border-color:rgba(61,220,132,.5);color:#3ddc84;cursor:default}
@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 (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}}}
/* 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. */

/* TELEFON · Diese Seite steht im Freigabe-Register (nxm-mobil.js). Sie wird
  am Telefon gestapelt, nicht gesperrt. */
@media(max-width:600px){
  /* EINE KANTE, WIE UEBERALL. Logo und Fusszeile standen auf 14, der
  Seiteninhalt auf 58 · 30 Prozent der Bildbreite als Rand, und dazwischen
  eine sichtbare Stufe. Die 24 Punkte Polsterung des Kastens sind eine
  Zahl fuer den Schreibtisch; am Telefon gilt dieselbe 14 wie fuer jeden
  anderen Block (nxm-mobil.css, Regel 5). */
  .nx-set-wrap{max-width:100%;margin:0;padding-left:14px;padding-right:14px}
  /* Die Zeilen standen dreispaltig: Sinnbild, Text, Schalter. Der Text blieb
  dabei auf gut hundert Punkte und zerfiel in Einwortzeilen. Am Telefon
  stehen Text und Schalter untereinander, der Schalter auf der Textkante. */
  .nx-set-row{flex-wrap:wrap;row-gap:var(--nx-luecke-knopf)}
  .nx-set-t{flex:1 1 200px;min-width:0}
  /* Was umbricht, beginnt auf der Textkante · als Abstand des ERSTEN Teils
  nach dem Text, nicht an jedem Knopf. Hier stand margin-left:46 an jedem
  Knopf: in Zeilen ohne Zeichen begann der Knopf 46 Punkte rechts vom
  Text, und zwischen zwei Worten derselben Zeile standen 58 statt 16. Nach
  dem Umbruch steht die Zeile links, nicht rechts (margin-left:auto oben). */
  .nx-set-row > .nx-set-t + *{margin-left:0}
  .nx-set-row:has(> .nx-set-ic) > .nx-set-t + :is(.nx-set-btn,.nx-set-on,.nx-set-soon){
    margin-left:calc(var(--nx-set-ic) + var(--nx-luecke-wort))}
  /* Steht mehr als ein Teil hinter dem Text (ein Abo traegt Zustand,
  Herkunft und bis zu drei Worte, "Your data" zwei Worte), bekommt der Text
  die ganze erste Zeile, und die Teile stehen zusammen darunter. Sonst
  drueckten sie ihn auf 32 Punkte Breite zusammen ("Nothing to judge yet"
  lag auf dem Anbieternamen), oder das erste Wort stand rechts neben dem
  Text und das zweite links darunter. Ein einzelner Schalter oder ein
  einzelnes Wort bleibt neben dem Text. */
  .nx-set-row:has(> .nx-set-t + * + *) > .nx-set-t{flex-basis:100%}
  .nx-set-row:has(> .nx-set-ic):has(> .nx-set-t + * + *) > .nx-set-t{
    flex-basis:calc(100% - var(--nx-set-ic) - var(--nx-luecke-wort))}
  /* Fingermass des Registers: NXMOBIL.regeln.fingermass = 44. Was schon in
  nxm-mobil.css ein Mindestmass hat, bleibt dort · hier stehen nur die
  Bedienelemente dieser Seite. Der Weg zur Erklaerung steht im Satz und
  braucht trotzdem eine Flaeche, die man mit dem Daumen trifft. */
  .nx-set-btn{min-height:var(--nx-h-bedien)}
  .nx-csp-why a{display:inline-flex;align-items:center;min-height:44px}
}

/* AM TELEFON: GRUPPIERTE ZEILEN STATT VIERZEHN PILLEN.
  Zugeklappt fuehrt nxm-mobil-falten.js jeden Abschnitt als Zeile (Regel
  "zeilen", nur am Telefon): Name, Wert, Pfeil. Hier steht die Flaeche der
  Gruppe · eine Flaeche je Gruppe, Zeilen darin durch eine feine Linie
  getrennt, der Gruppenname darueber. Die Pillen sind dann ein zweites
  Verzeichnis derselben Abschnitte und treten zurueck; im Dokument bleiben
  sie (am Schreibtisch die Schiene). Eine aufgeklappte Karte steht in
  ihrer gewohnten Form zwischen den Zeilen.
  Die Trennlinie ist ein Schatten, weil css/nextari-flaechen.css jeden
  Rand dieser Karte mit Vorrang abnimmt. */
html.nx-falt-zeilen .nx-set-wrap > .nx-set-nav{display:none}
html.nx-falt-zeilen .nx-set-card[data-nx-falt]{position:relative}
html.nx-falt-zeilen .nx-set-card.nx-falt-zu{margin:0;padding:0 var(--nx-luecke-kompakt) 0 var(--nx-luecke-wort);
  background:var(--nx-flaeche);border-radius:0;box-shadow:inset 0 1px 0 var(--nx-linie-subtle)}
html.nx-falt-zeilen .nx-set-card.nx-falt-zu.nx-falt-erst{box-shadow:none;
  border-top-left-radius:var(--nx-r-tafel);border-top-right-radius:var(--nx-r-tafel)}
html.nx-falt-zeilen .nx-set-card.nx-falt-zu.nx-falt-letzt{margin-bottom:var(--nx-luecke-wort);
  border-bottom-left-radius:var(--nx-r-tafel);border-bottom-right-radius:var(--nx-r-tafel)}
html.nx-falt-zeilen .nx-set-card[data-nx-falt-gruppe]{margin-top:calc(var(--nx-luecke-wort) + var(--nx-luecke-wort))}
html.nx-falt-zeilen .nx-set-card[data-nx-falt-gruppe]::before{content:attr(data-nx-falt-gruppe);
  position:absolute;left:var(--nx-luecke-wort);bottom:100%;margin-bottom:var(--nx-luecke-knopf);
  font:700 var(--nx-typo-meta) var(--nx-f-text);color:var(--dim);white-space:nowrap}

/* DIE SCHIENE · ab 1080 steht das Register links und bleibt stehen.

  Vorher war es eine Reihe aus vierzehn Pillen, die ueber zwei Zeilen lief und
  nach dem ersten Bildlauf nicht mehr zu sehen war.  Jetzt steht links die
  Liste der Abschnitte, rechts eine Spalte von 820 Punkten · der Seitentitel
  bleibt auf der Kante der Seite, wie auf jeder anderen Seite auch.  Der
  Zustand ist eine Flaeche unter dem Wort, kein Strich daneben. */
@media(min-width:1080px){
  .nx-set-wrap{display:grid;grid-template-columns:214px minmax(0,820px);
    column-gap:46px;align-items:start}
  .nx-set-wrap > *{grid-column:2;min-width:0}
  .nx-set-wrap > h1,.nx-set-wrap > .nx-set-sub{grid-column:1/-1}
  .nx-set-wrap > .nx-set-nav{grid-column:1;grid-row:3/span 999;
    position:sticky;top:calc(var(--nx-kopf, 72px) + 28px);display:block;margin:0;padding:0;
    max-height:calc(100vh - var(--nx-kopf, 72px) - 64px);overflow:auto;scrollbar-width:none}
  .nx-set-wrap > .nx-set-nav::-webkit-scrollbar{width:0;height:0}
  .nx-set-nav a{display:block;margin:0 0 2px;padding:7px 11px;border:0;
    border-radius:var(--nx-r-bedien);background:transparent;
    font:700 var(--nx-typo-text) var(--nx-f-text);color:var(--dim)}
  @media (hover:hover){.nx-set-nav a:hover{background:var(--nx-hebung);color:#fff;border:0}}
  .nx-set-nav a.on{background:var(--nx-hebung-2);color:#fff}
}
/* MAILS JE ART (nxm-mail-wahl.js) · unter den Schaltern fuer die Glocke
   (nxm-melde-familien.js) und in derselben Zeilenform: Titel links, ein
   Knopf On/Off rechts, eine feine Linie dazwischen. Ein Satz je Regel
   darunter. Der Weg aus einer Mail steht als eigene Karte vor den
   Notifications; dort ist der erste Knopf der gefuellte. */
#nxMailWahl{margin-top:var(--nx-luecke-wort)}
#nxMailWahl .nxmw-kopf{font:800 var(--nx-typo-text) var(--nx-f-text);color:var(--txt);margin:0 0 var(--nx-luecke-knopf)}
#nxMailWahl .nxmw-zeile{display:flex;align-items:center;gap:var(--nx-luecke-kompakt);padding:var(--nx-luecke-knopf) 0;border-bottom:1px solid var(--line)}
#nxMailWahl .nxmw-zeile:last-of-type{border-bottom:0}
#nxMailWahl .nxmw-t{flex:1;min-width:0;font:700 var(--nx-typo-text)/1.4 var(--nx-f-text);color:var(--txt)}
#nxMailAb .nxmw-knoepfe .nx-set-btn:first-child{background:var(--txt);color:var(--nx-grund);border-color:var(--txt)}
.nxmw-satz{font:400 var(--nx-typo-meta)/1.5 'Nunito Sans',sans-serif;color:var(--dim);margin:var(--nx-luecke-knopf) 0 0}
.nxmw-knoepfe{display:flex;flex-wrap:wrap;gap:var(--nx-luecke-knopf);margin-top:var(--nx-luecke-kompakt)}