/* neu.css – Bausteine der neuen Bereiche (Vorschau /v2/, Stand 2026-11). Präfix nx-, nur vorhandene Tokens aus site.css.
   Rubrikfarben: News = Timeline-Farbe, Statistik/Reihenfolge/Rewatch = Episodenguide, Lexikon = Studien, Darsteller/Gäste = Charaktere,
   Bücher = Comics, Firefly = eigener Bernsteinton (nur im Bereich /firefly/). */
.sp.nx-news{--c:var(--c-tl)}
.sp.nx-ep{--c:var(--c-ep)}
.sp.nx-lex{--c:var(--crim)}
.sp.nx-ch{--c:var(--c-ch)}
.sp.nx-cc{--c:var(--c-cc)}
.sp.nx-mu{--c:var(--c-mu)}
.sp.nx-ff{--c:#d98b2b}
.sp.nx-jub{--c:var(--crim)}

.nx-blk{padding:clamp(36px,5vw,64px) 0 0}
.nx-blk:last-child{padding-bottom:clamp(48px,6vw,80px)}
.nx-h{margin:0 0 6px;font-family:var(--f-disp);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.02em}
.nx-unter{margin:0 0 22px;max-width:70ch;color:var(--muted)}
.nx-text{max-width:70ch}
.nx-text p{line-height:1.65}
.nx-klein{font-size:.85rem;color:var(--muted)}

/* Kartenraster */
.nx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.nx-grid.eng{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.nx-karte{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
a.nx-karte:hover{border-color:var(--c);transform:translateY(-2px)}
.nx-karte b{font-size:1.04rem;line-height:1.25}
.nx-karte p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.nx-karte small{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.nx-karte img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;margin:-4px 0 6px}
.nx-karte .nx-meta{margin-top:auto;padding-top:6px;font-size:.8rem;color:var(--muted)}

/* Pillen (Filter, Sprungleisten, Schlagworte) */
.nx-pillen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.nx-pillen a,.nx-pillen span{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700;font-size:.86rem;color:var(--ink)}
.nx-pillen a:hover{border-color:var(--c)}
.nx-pillen [aria-current]{background:var(--c);border-color:var(--c);color:#fff}
.nx-tag{display:inline-block;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font-family:var(--f-ui);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}

/* Balken (Statistik) */
.nx-balken{display:grid;gap:7px;margin:0 0 10px;padding:0;list-style:none}
.nx-balken li{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;align-items:center;gap:12px;font-size:.92rem}
.nx-balken .nx-b{height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.nx-balken .nx-b i{display:block;height:100%;border-radius:7px;background:var(--c)}
.nx-balken em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}
.nx-balken a{font-weight:700;text-decoration:none;color:inherit}
.nx-balken a:hover{color:var(--c)}

/* Tabellen */
.nx-tab{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 1.2em}
.nx-tab th{text-align:left;font-family:var(--f-ui);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px 8px 0;border-bottom:2px solid var(--line)}
.nx-tab td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.nx-tab td.z{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.nx-tab a{font-weight:600}
.nx-tab tr.x td{background:color-mix(in srgb,var(--c) 9%,transparent)}
.nx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Reihenfolge Buffy + Angel */
.nx-folge{display:grid;grid-template-columns:76px 1fr;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.nx-folge .nx-dat{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;padding-top:3px}
.nx-folge a{font-weight:700;text-decoration:none}
.nx-folge a:hover{text-decoration:underline}
.nx-folge .nx-s{display:inline-block;min-width:68px;margin-right:8px;font-family:var(--f-ui);font-size:.72rem;letter-spacing:.06em;font-weight:700;padding:2px 8px;border-radius:6px;color:#fff}
.nx-s.b{background:var(--c-ep)}
.nx-s.a{background:#3d6fd0}
.nx-folge .nx-x{grid-column:2;font-size:.86rem;color:var(--muted)}
.nx-folge.kreuz{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%)}

/* News */
.nx-meldungen{display:grid;gap:14px}
.nx-meldung{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.nx-meldung h3{margin:6px 0 6px;font-size:1.12rem;line-height:1.3}
.nx-meldung p{margin:0 0 8px;line-height:1.55}
.nx-meldung .nx-q{font-size:.84rem;color:var(--muted)}
.nx-meldung .nx-q a{font-weight:700}
.nx-meldung time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;margin-left:8px}

/* Lexikon */
.nx-lex-liste{columns:2 300px;column-gap:36px;margin:0;padding:0;list-style:none}
.nx-lex-liste li{break-inside:avoid;padding:0 0 14px}
.nx-lex-liste b{display:block}
.nx-lex-liste span{color:var(--muted);font-size:.9rem;line-height:1.5}
.nx-eintrag{padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:70px}
.nx-eintrag h3{margin:0 0 4px;font-size:1.2rem}
.nx-eintrag .nx-en{font-style:italic;color:var(--muted);font-size:.9rem;margin:0 0 8px}
.nx-eintrag p{margin:0 0 8px;line-height:1.6;max-width:72ch}
.nx-folgen{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.nx-folgen a{font-family:var(--f-ui);font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:6px;border:1px solid var(--line);text-decoration:none}
.nx-folgen a:hover{border-color:var(--c)}
.nx-abc{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:2px;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:10px}
.nx-abc a{padding:4px 8px;font-weight:800;text-decoration:none;font-size:.9rem}
.nx-abc a:hover{color:var(--c)}

/* Zitat */
.nx-zitat{margin:0 0 14px;padding:14px 18px;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 6%,transparent);border-radius:0 12px 12px 0}
.nx-zitat p{margin:0 0 4px;font-size:1.02rem;line-height:1.5}
.nx-zitat cite{font-style:normal;font-size:.84rem;color:var(--muted)}
.nx-zitat cite a{font-weight:700}

/* Startseiten-Block „Neu im Whedonverse“ */
.nx-start-news{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}

@media (max-width:640px){
  .nx-balken li{grid-template-columns:96px 1fr auto;gap:8px;font-size:.86rem}
  .nx-folge{grid-template-columns:1fr}
  .nx-folge .nx-x{grid-column:1}
  .nx-tab{font-size:.86rem}
}

/* Startseite (Vorschau): Firefly als dritte Kachel neben Dollhouse/Blood Ties, News- und Neu-Blöcke */
.weltduo .wd-ff{grid-column:1/-1;min-height:240px;background:radial-gradient(120% 140% at 85% 20%,#7a4512 0%,#2a1606 45%,#0b0806 100%)}
.weltduo .wd-ff small{color:#f3c27a}
.nx-start-neu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px}
.nx-start-neu a{display:block;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.nx-start-neu a:hover{transform:translateY(-3px);border-color:var(--c,currentColor)}
.nx-start-neu b{display:block;font-size:1.05rem;margin:4px 0 4px}
.nx-start-neu span{display:block;font-size:.9rem;color:var(--muted);line-height:1.45}
.nx-start-neu small{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.nx-jub-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:22px 26px;border-radius:18px;color:#fff;text-decoration:none;background:linear-gradient(110deg,#5a0d1c,#a3122c 55%,#e0623a)}
.nx-jub-band b{font-family:var(--f-disp);font-size:clamp(1.3rem,2.6vw,1.9rem)}
.nx-jub-band span{opacity:.9}
.weltduo .wd-ff b{font-family:var(--f-disp);font-weight:800;letter-spacing:-.01em;font-size:clamp(2.4rem,5vw,3.6rem)}

/* Menü „Mehr“ (Vorschau): zweite Reihe für die neuen Bereiche, damit die Pillen-Leiste am Desktop nicht überläuft */
.mega{flex-wrap:wrap!important;row-gap:4px!important;border-radius:26px!important}
.mega .nx-umbruch{flex-basis:100%;height:1px;margin:2px 10px;background:rgba(255,255,255,.08)}
@media (max-width:1100px){.mega .nx-umbruch{display:none}}

/* Firefly und Figuren: Zweispalter, Porträts, Crew-Leiste */
.nx-zwei{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;padding-top:clamp(36px,5vw,60px)}
.nx-figur{grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:start}
.nx-portrait{display:block;width:100%;border-radius:18px;box-shadow:var(--shade);object-fit:cover}
.nx-hinweis{padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,transparent);border-left:4px solid var(--c)}
.nx-crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.nx-crew a{display:block;text-decoration:none;color:inherit}
.nx-crew img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;border-radius:14px;transition:transform .25s}
.nx-crew a:hover img{transform:translateY(-3px)}
.nx-crew b{display:block;margin-top:8px;font-size:.98rem}
.nx-crew span{display:block;font-size:.82rem;color:var(--muted);line-height:1.35}
.nx-sendung{columns:2 260px;font-size:.92rem}
.nx-sendung span{font-variant-numeric:tabular-nums;color:var(--muted)}
@media (max-width:760px){.nx-zwei,.nx-figur{grid-template-columns:1fr;gap:20px}.nx-figur .nx-portrait{max-width:260px}}

/* Bilder in den neuen Bereichen */
.nx-kopf{display:inline-block;width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 20%;vertical-align:middle;margin-right:8px;box-shadow:0 0 0 2px var(--paper)}
.nx-kopf + .nx-kopf{margin-left:-16px}
.nx-mitkopf{position:relative;padding-left:76px}
.nx-mitkopf .nx-kopf{position:absolute;left:16px;top:18px;width:46px;height:46px;margin:0}
.nx-staffel{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:8px}
.nx-staffel img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:var(--shade)}
.nx-staffel p{margin:6px 0 0;max-width:62ch;line-height:1.6}
.nx-gruppe{margin:26px 0 12px;font-family:var(--f-ui);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.nx-karte.nx-ep img{margin:-4px 0 4px}
.nx-folge{grid-template-columns:72px 64px 1fr}
.nx-folge .nx-mini{width:72px;height:40px;object-fit:cover;border-radius:6px;grid-row:span 2}
.nx-folge .nx-x{grid-column:3}
.nx-eintrag.mit-bild{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:28px}
.nx-eintrag.mit-bild > *{grid-column:1}
.nx-eintrag.mit-bild .nx-ebild{grid-column:2;grid-row:1 / span 8;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.nx-meldung.mit-bild{display:grid;grid-template-columns:minmax(0,1fr) 180px;column-gap:22px}
.nx-meldung.mit-bild > *{grid-column:1}
.nx-meldung.mit-bild .nx-ebild{grid-column:2;grid-row:1 / span 6;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.nx-start-neu img{display:block;width:calc(100% + 36px);margin:-18px -18px 12px;aspect-ratio:16/8;object-fit:cover;border-radius:16px 16px 0 0}
@media (max-width:640px){
  .nx-staffel{grid-template-columns:1fr;gap:14px}
  .nx-folge{grid-template-columns:64px 1fr}
  .nx-folge .nx-dat{grid-column:2}
  .nx-folge > span:not(.nx-dat){grid-column:2}
  .nx-eintrag.mit-bild,.nx-meldung.mit-bild{grid-template-columns:1fr}
  .nx-eintrag.mit-bild .nx-ebild,.nx-meldung.mit-bild .nx-ebild{grid-column:1;grid-row:auto;max-width:100%;margin-bottom:10px;order:-1}
}
@media (max-width:640px){.nx-folge .nx-mini{width:64px;height:36px}}
@media (max-width:1100px){.mega .it-paar{grid-column:1/-1;display:flex}.mega .it-paar a{flex:1 1 0;min-width:0;text-align:center;padding-inline:6px}}
.nx-anriss{font-size:1.12rem;font-weight:600;line-height:1.55}

/* Bücher: Cover-Raster */
.nx-buecher{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 14px}
.nx-buch{display:block;text-decoration:none;color:inherit}
.nx-buch img,.nx-buch-leer{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:var(--shade);transition:transform .25s}
.nx-buch:hover img{transform:translateY(-4px) rotate(-1deg)}
.nx-buch > b{display:block;margin-top:8px;font-size:.9rem;line-height:1.25}
.nx-buch > span{display:block;font-size:.78rem;color:var(--muted)}
.nx-buch-leer{display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,#120d16),#120d16);color:#fff;font-size:.85rem}
.nx-buch-leer.gross{font-size:1.3rem;border-radius:14px}
.nx-buch .nx-buch-leer + b{display:none}
.nx-cover{max-width:320px}

/* Startseite: Themenbereiche mit Hintergrundbild */
.nx-bereich{position:relative;isolation:isolate;overflow:hidden;margin:clamp(48px,6vw,80px) 0;padding:clamp(48px,6vw,84px) 0;color:#fff;background:#0d0a10}
.nx-bereich-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.1)}
.nx-bereich::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,6,14,.95) 0%,rgba(10,6,14,.78) 45%,rgba(10,6,14,.35) 100%),linear-gradient(0deg,rgba(10,6,14,.9),transparent 45%)}
.nx-bereich .k{display:inline-block;font-family:var(--f-ui);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 55%,#fff)}
.nx-bereich h2{margin:8px 0 10px;font-family:var(--f-disp);font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em;line-height:1.05}
.nx-bereich p{max-width:58ch;margin:0 0 26px;color:rgba(255,255,255,.82);line-height:1.6}
.nx-bereich-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.nx-bereich-k a{display:block;overflow:hidden;border-radius:16px;background:rgba(20,14,26,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff;transition:transform .25s,border-color .25s}
.nx-bereich-k a:hover{transform:translateY(-4px);border-color:var(--c)}
.nx-bereich-k img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.nx-bereich-k b{display:block;padding:12px 14px 2px;font-size:1.05rem}
.nx-bereich-k span{display:block;padding:0 14px 14px;font-size:.86rem;color:rgba(255,255,255,.72)}
.nx-cover-reihe{display:flex;gap:12px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.nx-cover-reihe a{flex:0 0 auto}
.nx-cover-reihe img{display:block;height:200px;width:auto;border-radius:8px;box-shadow:0 14px 30px -12px rgba(0,0,0,.8);transition:transform .25s}
.nx-cover-reihe a:hover img{transform:translateY(-6px) rotate(-1.5deg)}
.nx-bereich-go{display:inline-block;margin-top:18px;padding:12px 20px;border-radius:999px;background:var(--c);color:#fff;font-weight:800;text-decoration:none}
@media (max-width:640px){.nx-cover-reihe img{height:150px}.nx-bereich-k{grid-template-columns:1fr 1fr}}
.nx-jub-wrap{margin-top:32px;margin-bottom:clamp(56px,7vw,96px)}.nx-jub-wrap .nx-jub-band{margin-top:0}
.nx-meldung.mit-bild .nx-tag{justify-self:start}.nx-meldung.mit-bild time{margin-left:0;display:block;margin-top:4px}