/* NEXTARI · KATEGORIE · Reihen aus Bildkacheln, wie auf Games.

  Der Auftakt gehoert nxm-auftakt.js, die Karten-Rundung und die
  Kaestchen der Leerreihe gehoeren css/nextari-karten.css und
  nxm-leerreihe.js. Hier steht nur, was diese Seite selbst traegt:
  die Spalte, der Takt der Reihen, die Kachelbreite und die Zeile der
  Marke. Farben nur als Namen · die Marke bringt ihre eigenen mit
  (--fn-grund, --fn-schrift, gesetzt von nxm-freenet.js aus marke.json). */

/* DER RAHMEN DER SEITE · Kopfleiste, Vorschauleiste, Fuss, Menue, Suche.
  Wortgleich aus css/nextari-games.css gezogen (nur diese Bloecke), weil
  die Familien-Datei sie nicht traegt · jede Seite bringt ihren Rahmen
  selbst mit. Wer den Rahmen auf Games aendert, zieht ihn hier nach. */
body{font-family:'Nunito Sans',sans-serif;color:var(--txt);background:var(--bg);min-height:100vh;position:relative;}
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)}
.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}
}
html,body{max-width:100%}
@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;max-width:100%;margin:0}
}
@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));}
body{padding-bottom:env(safe-area-inset-bottom)}
}
.carousel,.t10row,.row-scroll,.hscroll,.mstrip,.cardrow,.chips,table{-webkit-overflow-scrolling:touch}
@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)}
}
.btn, .chip-f, .sf, .cta, .soontag{white-space:nowrap}
.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-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}
.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}
.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}
body{overflow-x:clip}
.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-charea-inner .nx-gw .shead h3,
.nx-charea-inner .nx-gmods .shead h3,
.nx-charea-inner .nx-gw .shead b,
.nx-charea-inner .nx-gmods .shead b,
.nx-charea-inner .nx-gmcol-h{font-size:var(--nx-typo-kartenkopf);font-weight:800;letter-spacing:.02em;text-transform:none;color:#fff}
.fh-soon.fh-soon.fh-soon{letter-spacing:.6px}
.nx-soon-badge{text-transform:uppercase}
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}
@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)}}
.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}
#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}
.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-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: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 var(--nx-typo-klein) var(--nx-f-text);letter-spacing:var(--nx-sperrung);text-transform:uppercase;
  color:var(--dim);background:var(--nx-hebung);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:0 9px;min-height:22px;box-sizing:border-box;display:inline-flex;align-items:center;line-height:1}
.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}
.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-gmcol-h .nx-soon-badge{margin-left:8px;vertical-align:middle}
.nx-prevbar .pb-badge{padding:4px 12px}
@media (hover:hover){.nx-fb-sup:hover{background:var(--nx-hebung)}}
:root{--nx-leiste:48px}
body{padding-top:var(--nx-leiste)}

/* DIE SPALTE · eine Kante fuer alles, ganz aussen. */
main.wrap{max-width:var(--nx-breite);margin:0 auto;padding:0 var(--nx-rand);position:relative;z-index:1}
.nxkg{padding:0 0 40px}
.nxkg-laedt,.nxkg-fehlt{font:400 var(--nx-typo-text) var(--nx-f-text,'Nunito Sans'),sans-serif;color:var(--dim);padding:24px 0}
.nxkg-fehlt{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.nxkg-fehlt b{font:800 var(--nx-typo-kartenkopf) var(--nx-f-text);color:#fff}
.nxkg-fehlt a{font:700 var(--nx-typo-text) var(--nx-f-text);color:#fff;text-decoration:none;
  background:var(--nx-hebung);border-radius:var(--nx-r-bedien);padding:11px 20px}

/* DER TAKT · Kante zu Kante 80: 20 innen, 40 Luft, 20 innen. Die Seite
  laedt nxm-pz.js nicht (Reihen einer Kategorie werden nicht umgestellt),
  also traegt sie den Takt selbst. */
.nxkg .nxkg-reihe.section{max-width:none;margin:0 0 40px;padding:20px 0;background:none;border:0}
.nxkg .nxkg-reihe .shead{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 18px}
.nxkg .nxkg-reihe .shead h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0;
  font:800 var(--nx-typo-abschnitt)/1.2 var(--nx-f-titel);color:#fff}
.nxkg .nxkg-reihe .shead .note{margin:0;font:400 var(--nx-typo-meta) var(--nx-f-text,'Nunito Sans'),sans-serif;color:var(--dim)}
.nxkg .crow{position:relative}

/* DIE KACHELN · fuenf je Zeile wie auf Games (nxm-kachel.js), in
  denselben Stufen. Das Artwork traegt die ganze Kachel, der Name liegt
  im Verlauf. */
.nxkg-spur{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;padding:0;margin:0;-webkit-overflow-scrolling:touch}
.nxkg-spur::-webkit-scrollbar{display:none;height:0}
.nxkg-spur > .gcard,.nxkg-spur > .nxkg-ev,.nxkg-spur > .nxk-leer{flex:0 0 calc((100% - 64px) / 5);scroll-snap-align:start;min-width:0}
.nxkg-spur > .gcard{position:relative;display:block;border-radius:var(--nx-r-karte);overflow:hidden;
  background:var(--nx-hebung);border:0;color:inherit;text-decoration:none}
.nxkg-spur > .gcard .gcover{aspect-ratio:16/9;position:relative;background-color:var(--nx-hebung);
  background-size:cover;background-position:center}
.nxkg-spur > .gcard .grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,8,13,.9) 0%,rgba(8,8,13,.45) 34%,rgba(8,8,13,0) 62%)}
.nxkg-spur > .gcard .gname{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
  font:700 var(--nx-typo-kartenkopf)/1.15 var(--nx-f-text);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* DIE ABENDE · Bild oben, Text darunter (Art 3 in css/nextari-karten.css). */
.nxkg-spur > .nxkg-ev{text-decoration:none;color:inherit}
.nxkg-ev .nxk-bild{background-color:var(--nx-hebung)}
.nxkg-ev .nxk-in{padding:12px 16px 16px}
.nxkg-ev-wann{font:700 var(--nx-typo-klein) var(--nx-f-text);
  color:var(--dim)}

/* DIE KARTE DER MARKE · steht in der Reihe der Abende, so breit wie zwei
  Kacheln samt Luecke (Flaeche kategorie.karte). Form, Farben und Inhalt
  gehoeren nxm-freenet.js, hier steht nur ihr Platz in der Reihe, in
  denselben Stufen wie die Kacheln. */
.nxkg-spur > .nxfn-schiene{flex:0 0 calc((100% - 64px) / 5 * 2 + 16px);min-width:0}

/* WER PRAESENTIERT · eine Zeile in den Farben der Marke, nur mit
  freigegebener Buchung (gebaut von nxm-sponsorflaeche.js, dem Besitzer
  aller "presented by"-Zeilen). Ohne Markendatei bleibt sie auf dem Grund
  der Seite und traegt den Namen aus der Buchung. */
.nxkg-praes{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 20px;
  padding:16px var(--nx-innen);border-radius:var(--nx-r-tafel);
  background:var(--fn-grund,var(--nx-hebung));color:var(--fn-schrift,#fff)}
.nxkg-praes-was{font:400 var(--nx-typo-text) var(--nx-f-text,'Nunito Sans'),sans-serif;color:inherit}
.nxkg-praes-was b{font:800 var(--nx-typo-text) var(--nx-f-text);color:inherit}
.nxkg-praes-logo{display:inline-flex;align-items:center;line-height:0;
  font:800 var(--nx-typo-kartenkopf)/1 var(--nx-f-text)}
.nxkg-praes-logo .nxfn-kasten img{display:block;height:auto}
.nxkg-praes-satz{font:400 var(--nx-typo-text) var(--nx-f-text,'Nunito Sans'),sans-serif;color:inherit;opacity:.82}
.nxkg-praes-ad{margin-left:auto;font:700 var(--nx-typo-klein) var(--nx-f-text);
  letter-spacing:var(--nx-sperrung);text-transform:uppercase;color:inherit;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--nx-r-pille);padding:3px 9px}

/* FOLGEN · der erste Knopf im Auftakt gehoert nxm-kategorie.js. Gedrueckt
  heisst: du folgst · der Knopf bleibt, wo er ist, und wird ruhiger, statt
  ein zweites Wort daneben zu stellen. */
.nx-auf[data-nx-auftakt="kategorie"] .nx-auf-k[aria-pressed="true"]{background:var(--nx-flaeche-2);color:var(--txt)}

@media (max-width:1399px){
  .nxkg-spur > .gcard,.nxkg-spur > .nxkg-ev,.nxkg-spur > .nxk-leer{flex-basis:calc((100% - 48px) / 4)}
  .nxkg-spur > .nxfn-schiene{flex-basis:calc((100% - 48px) / 4 * 2 + 16px)}
}
@media (max-width:1099px){
  .nxkg-spur > .gcard,.nxkg-spur > .nxkg-ev,.nxkg-spur > .nxk-leer{flex-basis:calc((100% - 32px) / 3)}
  .nxkg-spur > .nxfn-schiene{flex-basis:calc((100% - 32px) / 3 * 2 + 16px)}
}
@media (max-width:819px){
  .nxkg-spur > .gcard,.nxkg-spur > .nxkg-ev,.nxkg-spur > .nxk-leer{flex-basis:calc((100% - 16px) / 2)}
  .nxkg-spur > .nxfn-schiene{flex-basis:100%}
}
/* AM TELEFON · eine Kachel und ein Anschnitt der naechsten, damit man
  sieht, dass die Reihe weitergeht. Innenrand 16 (--nx-innen). */
@media (max-width:767px){
  main.wrap{padding:0}
  .nxkg .nxkg-reihe.section{margin:0 0 24px;padding:16px 0}
  .nxkg .nxkg-reihe .shead h3{font-size:var(--nx-typo-abschnitt)}
  .nxkg-spur{gap:12px}
  .nxkg-spur > .gcard,.nxkg-spur > .nxkg-ev,.nxkg-spur > .nxk-leer{flex-basis:84%}
  .nxkg-praes{gap:8px 12px}
  .nxkg-praes-ad{margin-left:0}
}