/*
---------------------------------------------------
Nishinija Productions – Ergänzungs-CSS für uSkinned
Datei:   wwwroot/css/nishinija/nx-site.css
Regeln:  alles unter body.nx-site · kein !important ·
         kein overflow:hidden auf #site / html / body
Farben, Schriften und Abstände kommen aus dem
uSkinned-Design-Panel. Diese Datei ergänzt Formen,
Effekte und Animationen.
---------------------------------------------------
Inhalt
 1. Tokens
 2. Grundlagen (Auswahl, Fokus, Scrollbar)
 3. Header & Hauptnavigation
 4. Fortschrittslinie
 5. Buttons
 6. Komponenten-Dekor (opt-in über „Custom classes“)
 7. Reveal-Animationen (opt-in über „Custom classes“)
 8. Abschnitts-Indikator
 9. Footer
10. Reduzierte Bewegung
11. Nishinija-Komponenten (Phase 2)
    11.1 Gemeinsames (Kopf, Buttons, Links, Badges)
    11.2 Hero
    11.3 Leistungen
    11.4 Schritte
    11.5 FAQ
    11.6 Aufruf-Band
    11.7 Hinweis-Band
    11.8 Reduzierte Bewegung (Komponenten)
12. Talente (Phase 3)
    12.1 Hilfsklassen · 12.2 Übersicht & Filter · 12.3 Karten
    12.4 Profil · 12.5 Reduzierte Bewegung (Talente)
13. Dark/Light-Umschalter
14. Outline-Schriftzüge
15. News
16. Live-Status
---------------------------------------------------
*/

/* 1. Tokens -------------------------------------
   Flächen-, Text- und Akzentfarben folgen den uSkinned-Farbvariablen des aktiven
   Designs (Dark) bzw. des Light-Designs (über /nx/theme.css). Die Werte hinter dem
   Komma sind Rückfallwerte für den Fall, dass eine Variable fehlt.
   Zuordnung im Design-Panel:
     Hintergrund      → Body background        Fläche  → Farbset 1 (Contrast)
     Fläche dunkel    → Farbset 3 (Dark)       Linien  → Content borders
     Überschriften    → Content heading        Text    → Content text
     Akzent (Neon)    → Button background      Links   → Content link / hover */
body.nx-site {
    --nx-bg-rgb: var(--body-bg-color1, 10, 9, 24);
    --nx-bg: rgb(var(--nx-bg-rgb));
    --nx-surface: rgb(var(--c1-bg-color1, 18, 16, 41));
    --nx-surface-2: rgb(var(--header-borders, 27, 24, 64));
    --nx-surface-3: rgb(var(--c3-bg-color1, 14, 12, 34));
    --nx-surface-hover: color-mix(in srgb, var(--nx-surface) 92%, var(--nx-neon));
    --nx-border: rgb(var(--base-borders, 42, 39, 82));
    --nx-brand-1: rgb(var(--base-link-hover, 204, 206, 254));
    --nx-brand-2: #9A98FD;
    --nx-brand-3: #8382F7;
    --nx-neon-rgb: var(--base-btn-bg-color1, 81, 46, 255);
    --nx-neon: rgb(var(--nx-neon-rgb));
    --nx-neon-hover: rgb(var(--base-btn-bg-hover-color1, 100, 70, 255));
    --nx-neon-text: rgb(var(--base-link, 156, 139, 255));
    --nx-text: rgb(var(--base-heading, 238, 238, 255));
    --nx-text-strong: rgb(var(--main-navigation-link-hover, 255, 255, 255));
    --nx-text-muted: rgb(var(--base-text, 180, 179, 224));
    --nx-text-subtle: rgb(var(--secondary-navigation-link, 136, 134, 190));
    --nx-ink: #0A0918;
    --nx-ink-2: #1B1840;
    --nx-stroke: rgba(255, 255, 255, .92);
    --nx-live: #FF4D7E;
    --nx-online: #34E3A6;
    --nx-warning: #FFC04D;

    --nx-slant: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
    --nx-slant-soft: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    --nx-ease: cubic-bezier(.2, .8, .2, 1);
    --nx-reveal-duration: .8s;
}

/* 2. Grundlagen --------------------------------- */
body.nx-site ::selection {
    background: rgba(var(--nx-neon-rgb), .55);
    color: #FFFFFF;
}

body.nx-site a:focus-visible,
body.nx-site button:focus-visible,
body.nx-site input:focus-visible,
body.nx-site select:focus-visible,
body.nx-site textarea:focus-visible,
body.nx-site [tabindex]:focus-visible {
    outline: 2px solid var(--nx-neon-text);
    outline-offset: 3px;
}

/* Scrollbar ausblenden (kein overflow:hidden – Scrollen bleibt erhalten);
   die Fortschrittslinie im Header übernimmt die Orientierung */
:root:has(> body.nx-site.nx-hide-scrollbar) {
    scrollbar-width: none;
}
:root:has(> body.nx-site.nx-hide-scrollbar)::-webkit-scrollbar {
    display: none;
}

/* 3. Header & Hauptnavigation -------------------- */
body.nx-site header#site-header {
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease, box-shadow .4s ease;
}

html.nav-down:not(.reached-top) body.nx-site header#site-header,
html.nav-up:not(.reached-top) body.nx-site header#site-header {
    border-bottom-color: var(--nx-surface-2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.nx-site nav.main > ul > li > span > a {
    position: relative;
    transition: color .2s ease;
}

body.nx-site nav.main > ul > li > span > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--nx-neon);
    box-shadow: 0 0 10px var(--nx-neon);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--nx-ease);
    pointer-events: none;
}

body.nx-site nav.main > ul > li > span > a:hover::after,
body.nx-site nav.main > ul > li > span > a:focus-visible::after,
body.nx-site nav.main > ul > li.active > span > a::after {
    transform: scaleX(1);
}

/* „Bald“-Kennzeichnung für den Shop, solange er in Arbeit ist */
body.nx-site.nx-shop-soon nav.main a[href*="/shop"]::before {
    content: "Bald";
    position: absolute;
    top: -12px;
    right: -30px;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
    pointer-events: none;
    color: var(--nx-ink);
    background: var(--nx-warning);
}

/* 4. Fortschrittslinie --------------------------- */
body.nx-site .nx-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    background: var(--nx-neon);
    box-shadow: 0 0 12px rgba(var(--nx-neon-rgb), .9);
    transform-origin: left;
    transform: scaleX(var(--nx-progress, 0));
    z-index: 2;
}

@supports (animation-timeline: scroll()) {
    body.nx-site .nx-progress {
        transform: scaleX(0);
        animation: nx-progress linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes nx-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 5. Buttons ------------------------------------- */
body.nx-site .cta-links .btn,
body.nx-site .component .btn:not(.btn-link):not(.expand-subpages) {
    clip-path: var(--nx-slant-soft);
    padding-left: 1.6em;
    padding-right: 1.6em;
    letter-spacing: .12em;
    transition: transform .25s var(--nx-ease), filter .25s ease;
}

body.nx-site .cta-links .btn:hover,
body.nx-site .component .btn:not(.btn-link):not(.expand-subpages):hover {
    filter: drop-shadow(0 6px 18px rgba(var(--nx-neon-rgb), .45));
}

/* 6. Komponenten-Dekor (opt-in) ------------------ */

/* Diagonale Hintergrundlinien: Custom class „nx-lines“ */
body.nx-site .component.nx-lines {
    position: relative;
    isolation: isolate;
}
body.nx-site .component.nx-lines::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(114deg, transparent calc(14% - 1px), rgba(var(--nx-neon-rgb), .22) 14%, transparent calc(14% + 1px)),
        linear-gradient(114deg, transparent calc(18% - 1px), rgba(var(--nx-neon-rgb), .08) 18%, transparent calc(18% + 1px)),
        linear-gradient(114deg, transparent calc(86% - 1px), rgba(var(--nx-neon-rgb), .18) 86%, transparent calc(86% + 1px));
}

/* Schräge Kacheln: Custom class „nx-slant-items“ auf Pods/Listen */
body.nx-site .component.nx-slant-items .item .inner {
    clip-path: var(--nx-slant-soft);
}

/* Neon-Glow beim Hover: Custom class „nx-glow-items“ */
body.nx-site .component.nx-glow-items .item .inner {
    transition: transform .35s var(--nx-ease), box-shadow .35s ease;
}
body.nx-site .component.nx-glow-items .item:hover .inner {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px -20px rgba(var(--nx-neon-rgb), .6);
}

/* 7. Reveal-Animationen (opt-in) ----------------- */
/*  Custom classes auf der Komponente:
    nx-reveal         – sanft von unten
    nx-reveal-slant   – schräger Wisch (für rechteckige Inhalte)
    nx-reveal-pop     – leichtes Aufzoomen
    nx-reveal-stagger – Einträge (.item) nacheinander
    Ausgelöst von nx-motion.js, sobald der Bereich etwa
    die Bildschirmmitte erreicht. Ohne JavaScript bleibt
    alles sichtbar (html.nx-js fehlt dann).               */

html.nx-js body.nx-site .nx-reveal:not(.nx-in),
html.nx-js body.nx-site .nx-reveal-slant:not(.nx-in),
html.nx-js body.nx-site .nx-reveal-pop:not(.nx-in),
html.nx-js body.nx-site .nx-reveal-stagger:not(.nx-in) .item {
    opacity: 0;
}

body.nx-site .nx-reveal.nx-in {
    animation: nx-rise var(--nx-reveal-duration) var(--nx-ease) both;
}
body.nx-site .nx-reveal-slant.nx-in {
    animation: nx-wipe calc(var(--nx-reveal-duration) + .2s) var(--nx-ease) both;
}
body.nx-site .nx-reveal-pop.nx-in {
    animation: nx-pop var(--nx-reveal-duration) var(--nx-ease) both;
}
body.nx-site .nx-reveal-stagger.nx-in .item {
    animation: nx-rise var(--nx-reveal-duration) var(--nx-ease) both;
    animation-delay: calc(var(--nx-i, 0) * 90ms);
}

@keyframes nx-rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}
@keyframes nx-wipe {
    from { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes nx-pop {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

/* 8. Abschnitts-Indikator ------------------------ */
body.nx-site .nx-indicator {
    position: fixed;
    right: 22px;
    top: 50%;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
}
body.nx-site .nx-indicator a {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--nx-brand-3);
    transform: rotate(45deg);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.nx-site .nx-indicator a:hover,
body.nx-site .nx-indicator a[aria-current="true"] {
    background: var(--nx-neon);
    border-color: var(--nx-neon);
    box-shadow: 0 0 12px var(--nx-neon);
    transform: rotate(45deg) scale(1.2);
}
body.nx-site .nx-indicator a span {
    position: absolute;
    right: 22px;
    top: 50%;
    padding: 4px 10px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    color: var(--nx-text);
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    transform: rotate(-45deg) translate(0, -50%);
    transform-origin: right top;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
body.nx-site .nx-indicator a:hover span,
body.nx-site .nx-indicator a:focus-visible span {
    opacity: 1;
}
@media (max-width: 991.98px) {
    body.nx-site .nx-indicator { display: none; }
}

/* 9. Footer -------------------------------------- */
body.nx-site footer#site-footer {
    border-top: 1px solid var(--nx-surface-2);
}
body.nx-site footer#site-footer a {
    transition: color .2s ease;
}

/* 10. Reduzierte Bewegung ------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-reveal.nx-in,
    body.nx-site .nx-reveal-slant.nx-in,
    body.nx-site .nx-reveal-pop.nx-in,
    body.nx-site .nx-reveal-stagger.nx-in .item,
    body.nx-site .nx-progress {
        animation: none;
    }
    html.nx-js body.nx-site .nx-reveal:not(.nx-in),
    html.nx-js body.nx-site .nx-reveal-slant:not(.nx-in),
    html.nx-js body.nx-site .nx-reveal-pop:not(.nx-in),
    html.nx-js body.nx-site .nx-reveal-stagger:not(.nx-in) .item {
        opacity: 1;
    }
    body.nx-site nav.main > ul > li > span > a::after,
    body.nx-site .cta-links .btn,
    body.nx-site .component .btn,
    body.nx-site .component.nx-glow-items .item .inner {
        transition: none;
    }
}

/* =================================================
   11. Nishinija-Komponenten (Phase 2)
   Markup: Views/Partials/uSkinned/Blocks/Nx*.cshtml
   ================================================= */

/* 11.1 Gemeinsames ------------------------------- */
body.nx-site #site-content {
    counter-reset: nx-section;
}

body.nx-site .nx-cmp {
    position: relative;
    color: var(--nx-text);
}

body.nx-site .nx-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}

body.nx-site .nx-secnum::before {
    counter-increment: nx-section;
    content: counter(nx-section, decimal-leading-zero);
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--nx-neon);
}

body.nx-site .nx-kicker__bar {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 2px;
    background: var(--nx-neon);
    transform-origin: left;
}

body.nx-site .nx-kicker.nx-in .nx-kicker__bar {
    animation: nx-grow .9s var(--nx-ease) .15s both;
}

@keyframes nx-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

body.nx-site .nx-h2 {
    margin: 14px 0 0;
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -1px;
    color: var(--nx-text);
    text-wrap: balance;
}

body.nx-site .nx-head {
    margin-bottom: clamp(32px, 4vw, 56px);
}

body.nx-site .nx-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

body.nx-site .nx-head__main {
    max-width: 760px;
}

body.nx-site .nx-lead {
    max-width: 440px;
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--nx-text-muted);
}

body.nx-site .nx-accent {
    color: var(--nx-neon-text);
}

body.nx-site .nx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body.nx-site .nx-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 16px 30px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.1;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    transition: background-color .25s ease, color .25s ease, padding .3s var(--nx-ease), filter .25s ease;
}

body.nx-site .nx-btn:hover,
body.nx-site .nx-btn:focus-visible {
    text-decoration: none;
    filter: drop-shadow(0 6px 18px rgba(var(--nx-neon-rgb), .45));
}

body.nx-site .nx-btn:focus-visible {
    outline-offset: 5px;
}

body.nx-site .nx-btn--primary {
    color: #FFFFFF;
    background: var(--nx-neon);
}
body.nx-site .nx-btn--primary:hover,
body.nx-site .nx-btn--primary:focus-visible {
    color: #FFFFFF;
    background: var(--nx-neon-hover);
    padding-right: 38px;
}

body.nx-site .nx-btn--ghost {
    color: var(--nx-text);
    background: var(--nx-surface-2);
}
body.nx-site .nx-btn--ghost:hover,
body.nx-site .nx-btn--ghost:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-border);
}

body.nx-site .nx-btn--light {
    color: var(--nx-ink);
    background: #FFFFFF;
}
body.nx-site .nx-btn--light:hover,
body.nx-site .nx-btn--light:focus-visible {
    color: var(--nx-ink);
    background: var(--nx-brand-1);
}

body.nx-site .nx-btn--dark {
    color: #FFFFFF;
    background: var(--nx-ink);
}
body.nx-site .nx-btn--dark:hover,
body.nx-site .nx-btn--dark:focus-visible {
    color: #FFFFFF;
    background: var(--nx-ink-2);
}

body.nx-site .nx-btn__arrow {
    transition: transform .3s var(--nx-ease);
}
body.nx-site .nx-btn:hover .nx-btn__arrow {
    transform: translateX(4px);
}

body.nx-site .nx-textlink {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nx-text);
}
body.nx-site .nx-textlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--nx-neon);
    transform: scaleX(.35);
    transform-origin: left;
    transition: transform .35s var(--nx-ease);
}
body.nx-site .nx-textlink:hover,
body.nx-site .nx-textlink:focus-visible {
    color: var(--nx-text-strong);
    text-decoration: none;
}
body.nx-site .nx-textlink:hover::after,
body.nx-site .nx-textlink:focus-visible::after {
    transform: scaleX(1);
}

body.nx-site .nx-more {
    margin: 28px 0 0;
}

body.nx-site .nx-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}
body.nx-site .nx-badge i {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: currentColor;
}
body.nx-site .nx-badge--warning {
    color: var(--nx-warning);
    border: 1px solid rgba(255, 192, 77, .5);
}

/* Umriss-Schriftzüge im Hintergrund (rein dekorativ) */
body.nx-site .nx-hero__word,
body.nx-site .nx-cta-band__word,
body.nx-site .nx-notice__word {
    position: absolute;
    z-index: 0;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    pointer-events: none;
    user-select: none;
}

/* 11.2 Hero -------------------------------------- */
body.nx-site .nx-hero {
    display: flex;
    align-items: center;
    min-height: min(900px, calc(100svh - 80px));
    overflow-x: clip;
    isolation: isolate;
}

body.nx-site .nx-hero > .container {
    position: relative;
    z-index: 2;
}

body.nx-site .nx-hero__lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
body.nx-site .nx-hero__lines span {
    position: absolute;
    top: -40%;
    width: 1px;
    height: 180%;
    background: var(--nx-neon);
    opacity: .3;
    transform: rotate(24deg);
    animation: nx-hero-line 10s ease-in-out infinite alternate;
}
body.nx-site .nx-hero__lines span:nth-child(1) { left: 52%; }
body.nx-site .nx-hero__lines span:nth-child(2) { left: 55%; opacity: .14; animation-duration: 13s; }
body.nx-site .nx-hero__lines span:nth-child(3) { left: 80%; opacity: .2; animation-duration: 12s; }
body.nx-site .nx-hero__lines span:nth-child(4) { left: 96%; width: 2px; opacity: .45; animation-duration: 15s; }
body.nx-site .nx-hero__lines span:nth-child(5) { left: 12%; opacity: .12; animation-duration: 16s; }

@keyframes nx-hero-line {
    from { transform: rotate(24deg) translateY(-40px); }
    to { transform: rotate(24deg) translateY(40px); }
}

body.nx-site .nx-hero__word {
    left: -20px;
    bottom: 30px;
    font-size: clamp(90px, 14vw, 210px);
    letter-spacing: -.03em;
    -webkit-text-stroke: 2px var(--nx-surface-2);
}
body.nx-site .nx-hero__word span {
    display: block;
    animation: nx-hero-slide 1.2s var(--nx-ease) both;
}

@keyframes nx-hero-slide {
    from { opacity: 0; transform: translateX(-80px); }
    to { opacity: 1; transform: none; }
}

body.nx-site .nx-hero__grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding: 40px 0;
}

body.nx-site .nx-hero__copy {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

body.nx-site .nx-hero__title {
    margin: 0;
    font-size: clamp(44px, 6.2vw, 76px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -2px;
    color: var(--nx-text);
}

body.nx-site .nx-hero__text {
    max-width: 580px;
    margin: 0;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.65;
    color: var(--nx-text-muted);
}

body.nx-site .nx-hero__platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-hero__brands {
    display: flex;
    gap: 16px;
    color: var(--nx-text-muted);
}
body.nx-site .nx-hero__brands .nx-brand {
    transition: color .2s ease, transform .25s var(--nx-ease);
}
body.nx-site .nx-hero__brands .nx-brand:hover {
    color: var(--nx-text-strong);
    transform: translateY(-2px);
}

/* Einlauf beim Laden */
body.nx-site .nx-hero__in {
    animation: nx-rise .9s var(--nx-ease) both;
    animation-delay: calc(.2s + var(--nx-d, 0) * .15s);
}

/* Kacheln: Positionen relativ zur Kachelfläche (Seitenverhältnis 560 : 600) */
body.nx-site .nx-hero__tiles {
    position: relative;
    flex: 0 1 560px;
    min-width: 0;
    aspect-ratio: 560 / 600;
}
body.nx-site .nx-hero__float {
    position: absolute;
    inset: 0;
    animation: nx-hero-float 6s ease-in-out infinite;
}

@keyframes nx-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

body.nx-site .nx-hero__tile {
    position: absolute;
    width: 33.9%;
    aspect-ratio: 190 / 260;
    overflow: hidden;
    background: var(--nx-surface-hover);
    clip-path: var(--nx-slant);
    animation: nx-hero-tile .9s var(--nx-ease) both;
}
body.nx-site .nx-hero__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.nx-site .nx-hero__tile--1 { left: 35.7%; top: 0; width: 41.1%; aspect-ratio: 230 / 320; box-shadow: inset 0 0 0 3px var(--nx-neon); animation-delay: .45s; }
body.nx-site .nx-hero__tile--2 { left: 7.1%; top: 11.7%; animation-delay: .3s; }
body.nx-site .nx-hero__tile--3 { left: 67.9%; top: 18.3%; animation-delay: .6s; }
body.nx-site .nx-hero__tile--4 { left: 19.6%; top: 53.3%; animation-delay: .75s; }
body.nx-site .nx-hero__tile--5 { left: 53.6%; top: 60%; background: var(--nx-neon); animation-delay: .9s; }

body.nx-site .nx-hero__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 900;
    color: var(--nx-border);
}
body.nx-site .nx-hero__num {
    position: absolute;
    left: 13%;
    bottom: 2px;
    font-size: clamp(36px, 4.2vw, 58px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--nx-neon);
}
body.nx-site .nx-hero__tile--1 .nx-hero__num {
    font-size: clamp(44px, 5.2vw, 72px);
    -webkit-text-stroke: 2px var(--nx-stroke);
}

@keyframes nx-hero-tile {
    from { opacity: 0; transform: translateY(60px); clip-path: polygon(18% 0, 18% 0, 0 100%, 0 100%); }
    to { opacity: 1; transform: none; clip-path: var(--nx-slant); }
}

/* Scroll-Effekte nur, wo der Browser Scroll-Timelines kann */
@supports (animation-timeline: scroll()) {
    body.nx-site .nx-hero__word {
        animation: nx-hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100vh;
    }
    /* Ausblenden beim Scrollen nur, wenn der Hero ganz oben steht */
    body.nx-site section.component:first-of-type .nx-hero__grid {
        animation: nx-hero-out linear both;
        animation-timeline: scroll(root block);
        animation-range: 200px 900px;
    }
}

@keyframes nx-hero-parallax {
    to { transform: translateX(-25%); }
}
@keyframes nx-hero-out {
    to { opacity: .2; transform: scale(.95); }
}

@media (max-width: 991.98px) {
    body.nx-site .nx-hero {
        min-height: 0;
    }
    body.nx-site .nx-hero__tiles {
        flex-basis: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    body.nx-site .nx-hero__title {
        letter-spacing: -1px;
    }
    body.nx-site .nx-hero__tiles {
        max-width: 360px;
    }
}

/* 11.3 Leistungen -------------------------------- */
body.nx-site .nx-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.nx-site .nx-card {
    position: relative;
    padding: 34px 34px 30px;
    background: var(--nx-surface);
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    transition: transform .35s var(--nx-ease), background-color .35s ease;
}
body.nx-site .nx-card:hover,
body.nx-site .nx-card:focus-within {
    transform: translateY(-8px);
    background: var(--nx-surface-2);
}

body.nx-site .nx-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: var(--nx-text);
    background: var(--nx-surface-2);
    clip-path: var(--nx-slant);
    transition: background-color .3s ease, box-shadow .3s ease;
}
body.nx-site .nx-card:hover .nx-card__ico,
body.nx-site .nx-card:focus-within .nx-card__ico {
    background: var(--nx-neon);
}

body.nx-site .nx-card__title {
    margin: 20px 0 10px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--nx-text);
}

body.nx-site .nx-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--nx-text-muted);
}

/* Ganze Karte klickbar, ohne verschachtelte Links */
body.nx-site .nx-card__stretch {
    color: inherit;
    text-decoration: none;
}
body.nx-site .nx-card__stretch::after {
    content: "";
    position: absolute;
    inset: 0;
}
body.nx-site .nx-card__stretch:hover,
body.nx-site .nx-card__stretch:focus-visible {
    color: var(--nx-text-strong);
    text-decoration: none;
}
body.nx-site .nx-card__stretch:focus-visible {
    outline: none;
}
body.nx-site .nx-card--link:has(.nx-card__stretch:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--nx-neon-text);
}

@media (max-width: 991.98px) {
    body.nx-site .nx-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    body.nx-site .nx-services__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 11.4 Schritte ---------------------------------- */
body.nx-site .nx-steps__list {
    display: grid;
    grid-template-columns: repeat(var(--nx-cols, 3), minmax(0, 1fr));
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.nx-site .nx-step {
    position: relative;
    padding-top: 10px;
}

body.nx-site .nx-step__num {
    display: block;
    font-size: clamp(64px, 7vw, 96px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--nx-neon);
    transition: color .4s ease, text-shadow .4s ease;
}
body.nx-site .nx-step:hover .nx-step__num {
    color: rgba(var(--nx-neon-rgb), .18);
    text-shadow: 0 0 30px rgba(var(--nx-neon-rgb), .5);
}

body.nx-site .nx-step__title {
    margin: 10px 0;
    font-size: 24px;
    font-weight: 900;
    color: var(--nx-text);
}

body.nx-site .nx-step__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--nx-text-muted);
}

@media (max-width: 767.98px) {
    body.nx-site .nx-steps__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* 11.5 FAQ --------------------------------------- */
body.nx-site .nx-faq__inner {
    max-width: 920px;
    margin: 0 auto;
}

body.nx-site .nx-faq__item {
    border-bottom: 1px solid var(--nx-surface-2);
    interpolate-size: allow-keywords;
}

body.nx-site .nx-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    padding: 24px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--nx-text);
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}
body.nx-site .nx-faq__q::-webkit-details-marker {
    display: none;
}
body.nx-site .nx-faq__q:hover {
    color: var(--nx-neon-text);
}

body.nx-site .nx-faq__pm {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid var(--nx-neon);
    transform: rotate(45deg);
    transition: transform .35s var(--nx-ease), background-color .35s ease;
}
body.nx-site .nx-faq__item[open] .nx-faq__pm {
    background: var(--nx-neon);
    transform: rotate(225deg);
}

body.nx-site .nx-faq__a {
    padding: 0 0 26px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--nx-text-muted);
}
body.nx-site .nx-faq__a > :first-child { margin-top: 0; }
body.nx-site .nx-faq__a > :last-child { margin-bottom: 0; }

/* Weiches Auf- und Zuklappen in Browsern mit ::details-content */
body.nx-site .nx-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .45s var(--nx-ease), opacity .35s ease, content-visibility .45s allow-discrete;
}
body.nx-site .nx-faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
}

/* 11.6 Aufruf-Band ------------------------------- */
/* Das Band füllt seinen uSkinned-Abschnitt randlos aus */
body.nx-site section.component:has(> .component-inner > .nx-cta-band),
body.nx-site section.component:has(> .component-inner > .nx-cta-band) > .component-inner {
    padding-top: 0;
    padding-bottom: 0;
}

body.nx-site .nx-cta-band {
    overflow: hidden;
    background: var(--nx-neon);
    isolation: isolate;
}

body.nx-site .nx-cta-band__word {
    left: -20px;
    top: -30px;
    font-size: clamp(110px, 15vw, 220px);
    -webkit-text-stroke: 2px rgba(255, 255, 255, .18);
}

body.nx-site .nx-cta-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: clamp(60px, 8vw, 100px) 0;
}

body.nx-site .nx-cta-band__copy {
    max-width: 660px;
}

body.nx-site .nx-cta-band__title {
    margin: 0;
    color: #FFFFFF;
}

body.nx-site .nx-cta-band__text {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--nx-text);
}

body.nx-site .nx-cta-band .nx-btn:hover,
body.nx-site .nx-cta-band .nx-btn:focus-visible {
    filter: drop-shadow(0 6px 18px rgba(10, 9, 24, .45));
}
body.nx-site .nx-cta-band a:focus-visible {
    outline-color: #FFFFFF;
}

/* 11.7 Hinweis-Band ------------------------------ */
body.nx-site .nx-notice__panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: clamp(40px, 6vw, 70px) clamp(28px, 7vw, 90px);
    overflow: hidden;
    background: var(--nx-surface);
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

body.nx-site .nx-notice__word {
    right: -10px;
    top: -30px;
    font-size: clamp(100px, 13vw, 200px);
    -webkit-text-stroke: 1.5px var(--nx-surface-2);
}

body.nx-site .nx-notice__copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}
body.nx-site .nx-notice__copy .nx-head {
    margin-bottom: 16px;
}
body.nx-site .nx-notice__copy .nx-lead {
    max-width: none;
}

body.nx-site .nx-notice__side {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

@media (max-width: 575.98px) {
    body.nx-site .nx-notice__panel { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
}

/* 11.8 Reduzierte Bewegung (Komponenten) -------- */
@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-hero__lines span,
    body.nx-site .nx-hero__word,
    body.nx-site .nx-hero__word span,
    body.nx-site section.component:first-of-type .nx-hero__grid,
    body.nx-site .nx-hero__in,
    body.nx-site .nx-hero__float,
    body.nx-site .nx-hero__tile,
    body.nx-site .nx-kicker.nx-in .nx-kicker__bar {
        animation: none;
    }
    body.nx-site .nx-btn,
    body.nx-site .nx-btn__arrow,
    body.nx-site .nx-textlink::after,
    body.nx-site .nx-card,
    body.nx-site .nx-card__ico,
    body.nx-site .nx-step__num,
    body.nx-site .nx-faq__pm,
    body.nx-site .nx-faq__item::details-content {
        transition: none;
    }
    body.nx-site .nx-card:hover,
    body.nx-site .nx-card:focus-within {
        transform: none;
    }
}

/* =================================================
   12. Talente (Phase 3)
   Markup: Views/NxTalents.cshtml, Views/NxTalent.cshtml,
           Views/Partials/Nishinija/Talents/TalentCard.cshtml
   ================================================= */

/* 12.1 Hilfsklassen ------------------------------ */
body.nx-site .nx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.nx-site .nx-brand--letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-size, 20px);
    height: var(--nx-size, 20px);
    font-size: calc(var(--nx-size, 20px) * .6);
    font-weight: 900;
    line-height: 1;
    color: var(--nx-bg);
    background: currentColor;
    border-radius: 3px;
}
body.nx-site .nx-brand--letter {
    background: var(--nx-text-muted);
}

body.nx-site .nx-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--nx-live);
}
body.nx-site .nx-live-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: nx-pulse 1.4s ease-in-out infinite;
}

@keyframes nx-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

/* 12.2 Übersicht & Filter ------------------------ */
body.nx-site .nx-talents {
    position: relative;
    overflow-x: clip;
    padding-top: clamp(40px, 6vw, 90px);
}
body.nx-site .nx-talents__lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
body.nx-site .nx-talents__lines span {
    position: absolute;
    top: -30%;
    width: 1px;
    height: 160%;
    background: var(--nx-neon);
    opacity: .18;
    transform: rotate(24deg);
}
body.nx-site .nx-talents__lines span:nth-child(1) { left: 70%; }
body.nx-site .nx-talents__lines span:nth-child(2) { left: 74%; opacity: .1; }
body.nx-site .nx-talents__lines span:nth-child(3) { left: 94%; width: 2px; opacity: .3; }

body.nx-site .nx-talents__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 760px;
    margin-bottom: 36px;
}
body.nx-site .nx-talents__title {
    margin: 0;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--nx-text);
}

body.nx-site .nx-filter {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 32px;
    padding: 16px 0;
    border-top: 1px solid var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-surface-2);
}
body.nx-site .nx-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}
body.nx-site .nx-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}
body.nx-site .nx-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body.nx-site .nx-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nx-text-muted);
    background: var(--nx-surface);
    clip-path: var(--nx-slant-soft);
    transition: background-color .2s ease, color .2s ease;
}
body.nx-site .nx-chip:hover span {
    color: var(--nx-text);
    background: var(--nx-surface-2);
}
body.nx-site .nx-chip input:checked + span {
    color: #FFFFFF;
    background: var(--nx-neon);
}
body.nx-site .nx-chip input:focus-visible + span {
    outline: 2px solid var(--nx-neon-text);
    outline-offset: 2px;
}
body.nx-site .nx-chip--live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-live);
}
body.nx-site .nx-chip--live input:checked + span {
    background: var(--nx-live);
}
body.nx-site .nx-chip--live input:checked + span i {
    background: #FFFFFF;
    animation: nx-pulse 1.4s ease-in-out infinite;
}

body.nx-site .nx-filter__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.nx-site .nx-field select,
body.nx-site .nx-field input {
    min-height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    font: inherit;
    font-size: 15px;
    color: var(--nx-text);
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: 0;
}
body.nx-site .nx-field select:focus-visible,
body.nx-site .nx-field input:focus-visible {
    border-color: var(--nx-neon);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--nx-neon-rgb), .35);
}
body.nx-site .nx-field--search input {
    width: min(260px, 70vw);
}

body.nx-site .nx-talents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
}
body.nx-site .nx-talents__grid--row {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

body.nx-site .nx-empty {
    padding: 60px 0;
    text-align: center;
}
body.nx-site .nx-empty[hidden] {
    display: none;
}
body.nx-site .nx-empty__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 900;
    color: var(--nx-text);
}
body.nx-site .nx-empty__text {
    margin: 0 0 18px;
    color: var(--nx-text-muted);
}
body.nx-site .nx-empty button.nx-textlink {
    background: none;
    border: 0;
    cursor: pointer;
}
body.nx-site .nx-talents__note {
    max-width: 640px;
    margin: 40px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nx-text-subtle);
}

/* 12.3 Karten ------------------------------------ */
body.nx-site .nx-tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    transition: transform .35s var(--nx-ease), background-color .3s ease;
}
body.nx-site .nx-tcard[hidden] {
    display: none;
}
body.nx-site .nx-tcard:hover,
body.nx-site .nx-tcard:focus-visible {
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface-2);
    transform: translateY(-8px);
}
body.nx-site .nx-tcard:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--nx-neon-text);
}

body.nx-site .nx-tcard__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--nx-surface-hover);
}
body.nx-site .nx-tcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: transform .6s var(--nx-ease), filter .45s ease;
}
body.nx-site .nx-tcard:hover .nx-tcard__media img {
    transform: scale(1.05);
}
/* Profilbilder in Karten (Übersicht, „Weitere Talente“, „Gerade live“): offline schwarz-weiß, live sowie beim
   Überfahren oder Fokussieren farbig. Auf der Profilseite selbst ist das Bild immer farbig. */
body.nx-site .nx-tcard:hover .nx-tcard__media img,
body.nx-site .nx-tcard:focus-visible .nx-tcard__media img,
body.nx-site .nx-tcard[data-live="true"] .nx-tcard__media img {
    filter: none;
}
body.nx-site .nx-tcard__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 900;
    color: var(--nx-border);
}
body.nx-site .nx-tcard__live {
    position: absolute;
    top: 14px;
    left: 18px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #FFFFFF;
    background: var(--nx-live);
}
body.nx-site .nx-tcard__live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: nx-pulse 1.4s ease-in-out infinite;
}
body.nx-site .nx-tcard[data-live="true"] .nx-tcard__live {
    display: inline-flex;
}
body.nx-site .nx-tcard[data-live="true"] {
    box-shadow: inset 0 0 0 2px var(--nx-live);
}

body.nx-site .nx-tcard__num {
    position: absolute;
    right: 14%;
    top: calc(100% - 128px);
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--nx-neon);
    pointer-events: none;
}
body.nx-site .nx-tcard__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 24px 22px;
}
body.nx-site .nx-tcard__name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}
body.nx-site .nx-tcard__role {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-tcard__platforms {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-tcard__cta {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
    transition: color .2s ease;
}
body.nx-site .nx-tcard:hover .nx-tcard__cta {
    color: var(--nx-text);
}

body.nx-site .nx-tcard--in {
    animation: nx-tcard-in .45s var(--nx-ease) both;
}

@keyframes nx-tcard-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* 12.4 Profil ------------------------------------ */
body.nx-site .nx-secbar {
    position: fixed;
    z-index: 900;
    top: var(--nx-secbar-top, 0px);
    left: 0;
    right: 0;
    background: rgba(var(--nx-bg-rgb), .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nx-surface-2);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .35s var(--nx-ease), visibility 0s linear .35s;
}
body.nx-site .nx-secbar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .35s var(--nx-ease), visibility 0s;
}
body.nx-site .nx-secbar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 56px;
}
body.nx-site .nx-secbar__name {
    font-weight: 900;
    white-space: nowrap;
}
body.nx-site .nx-secbar__name small {
    margin-left: 8px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--nx-neon-text);
}
body.nx-site .nx-secbar__links {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}
body.nx-site .nx-secbar__links a,
body.nx-site .nx-secbar__back {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--nx-text-muted);
}
body.nx-site .nx-secbar__links a[aria-current="true"],
body.nx-site .nx-secbar__links a:hover {
    color: var(--nx-text-strong);
    box-shadow: inset 0 -2px 0 var(--nx-neon);
}
body.nx-site .nx-secbar__back {
    margin-left: auto;
}

body.nx-site .nx-phero {
    position: relative;
    overflow-x: clip;
    padding-top: clamp(40px, 6vw, 90px);
    isolation: isolate;
}
body.nx-site .nx-phero__word {
    position: absolute;
    z-index: 0;
    left: -20px;
    bottom: 120px;
    font-size: clamp(90px, 15vw, 230px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px var(--nx-surface-2);
    pointer-events: none;
}
body.nx-site .nx-phero__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}
body.nx-site .nx-phero__copy {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body.nx-site .nx-phero__no {
    color: var(--nx-text);
}
body.nx-site .nx-phero__live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 15px;
    color: var(--nx-text-muted);
}
body.nx-site .nx-phero__live[hidden] {
    display: none;
}
body.nx-site .nx-phero__visual {
    position: relative;
    flex: 0 1 440px;
    min-width: 0;
}
body.nx-site .nx-phero__frame {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--nx-surface-hover);
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
    box-shadow: inset 0 0 0 3px var(--nx-neon);
}
body.nx-site .nx-phero__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.nx-site .nx-phero__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    font-weight: 900;
    color: var(--nx-border);
}
body.nx-site .nx-phero__bignum {
    position: absolute;
    right: -10px;
    bottom: -30px;
    font-size: clamp(90px, 12vw, 160px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--nx-stroke);
    pointer-events: none;
}

body.nx-site .nx-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.nx-site .nx-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--nx-text-muted);
    background: var(--nx-surface);
    clip-path: var(--nx-slant-soft);
    transition: color .2s ease, background-color .2s ease, transform .25s var(--nx-ease);
}
body.nx-site .nx-social:hover,
body.nx-site .nx-social:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-neon);
    transform: translateY(-3px);
}

body.nx-site .nx-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin: clamp(40px, 6vw, 80px) 0 0;
    border-top: 1px solid var(--nx-surface-2);
}
body.nx-site .nx-stat {
    padding: 24px 0;
}
body.nx-site .nx-stat dt {
    order: 2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-stat dd {
    margin: 0 0 4px;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--nx-text);
}
body.nx-site .nx-stat {
    display: flex;
    flex-direction: column-reverse;
}

body.nx-site .nx-psec {
    position: relative;
}
body.nx-site .nx-prose {
    max-width: 760px;
    margin-bottom: 40px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--nx-text-muted);
}
body.nx-site .nx-prose h2,
body.nx-site .nx-prose h3 {
    color: var(--nx-text);
}

body.nx-site .nx-clips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-flow: row dense;
    gap: 20px;
}
body.nx-site .nx-clip {
    margin: 0;
}
body.nx-site .nx-clip__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(10, 9, 24, .78);
    box-shadow: inset 2px 0 0 var(--nx-neon);
    pointer-events: none;
}
body.nx-site .nx-clip__badge svg {
    flex: none;
}
body.nx-site .nx-clip__badge--live {
    background: var(--nx-live);
    box-shadow: none;
}

/* Highlights: Bühne + Liste. Die Liste ist so hoch wie die Bühne (per Skript) und scrollt bei vielen Einträgen,
   dadurch bleibt das Raster bei jeder Anzahl geschlossen. */
body.nx-site .nx-hl {
    display: grid;
    gap: 20px;
}
@media (min-width: 960px) {
    body.nx-site .nx-hl--list {
        grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr);
        align-items: start;
    }
}
body.nx-site .nx-hl__stage {
    margin: 0;
}
body.nx-site .nx-hl__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 6px 0 0;
    list-style: none;
    max-height: var(--nx-hl-height, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-surface-2) transparent;
}
/* Weitere Einträge unterhalb: unterer Rand blendet aus */
body.nx-site .nx-hl__list.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
@media (max-width: 959.98px) {
    body.nx-site .nx-hl__list {
        max-height: none;
        overflow: visible;
        padding: 0;
    }
    body.nx-site .nx-hl__list.has-more {
        -webkit-mask-image: none;
        mask-image: none;
    }
}
body.nx-site .nx-hl__item {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px 12px 8px 8px;
    font: inherit;
    text-align: left;
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface);
    border: 0;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: background-color .2s ease, box-shadow .2s ease;
}
body.nx-site .nx-hl__item:hover,
body.nx-site .nx-hl__item:focus-visible {
    color: var(--nx-text);
    background: var(--nx-surface-2);
}
body.nx-site .nx-hl__item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--nx-neon-text);
}
body.nx-site .nx-hl__item.is-active {
    background: var(--nx-surface-2);
    box-shadow: inset 3px 0 0 var(--nx-neon);
}
body.nx-site .nx-hl__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nx-surface-hover);
}
body.nx-site .nx-hl__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.nx-site .nx-hl__mini-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: rgba(10, 9, 24, .35);
    opacity: 0;
    transition: opacity .2s ease;
}
body.nx-site .nx-hl__mini-play svg {
    width: 22px;
    height: 22px;
}
body.nx-site .nx-hl__item:hover .nx-hl__mini-play,
body.nx-site .nx-hl__item:focus-visible .nx-hl__mini-play,
body.nx-site .nx-hl__item.is-active .nx-hl__mini-play {
    opacity: 1;
}
body.nx-site .nx-hl__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
body.nx-site .nx-hl__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-hl__badge--live {
    color: var(--nx-live);
}
body.nx-site .nx-hl__text strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.nx-site .nx-hl__meta {
    font-size: 12px;
    color: var(--nx-text-subtle);
}
@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-hl__item,
    body.nx-site .nx-hl__mini-play {
        transition: none;
    }
}
body.nx-site .nx-clip__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nx-surface-hover);
}
body.nx-site .nx-clip__frame img,
body.nx-site .nx-clip__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
body.nx-site .nx-clip__play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(10, 9, 24, .2), rgba(10, 9, 24, .75));
    border: 0;
    cursor: pointer;
}
body.nx-site .nx-clip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--nx-neon);
    clip-path: var(--nx-slant-soft);
    transition: transform .3s var(--nx-ease);
}
body.nx-site .nx-clip__play:hover .nx-clip__icon,
body.nx-site .nx-clip__play:focus-visible .nx-clip__icon {
    transform: scale(1.1);
}
body.nx-site .nx-clip__consent {
    max-width: 90%;
    font-size: 12px;
    line-height: 1.4;
    color: var(--nx-text-muted);
}
body.nx-site .nx-clip__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    color: var(--nx-text);
}
body.nx-site .nx-clip__caption span {
    font-size: 14px;
    color: var(--nx-text-subtle);
}

body.nx-site .nx-facts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 40px 80px;
    align-items: start;
}
body.nx-site .nx-facts {
    margin: 0;
}
body.nx-site .nx-fact {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--nx-surface-2);
}
body.nx-site .nx-fact dt {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-fact dd {
    margin: 0;
    font-weight: 700;
    color: var(--nx-text);
}

body.nx-site .nx-lore {
    overflow-x: clip;
}
body.nx-site .nx-lore__word {
    position: absolute;
    right: -20px;
    top: 0;
    font-size: clamp(120px, 18vw, 260px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--nx-surface-2);
    pointer-events: none;
}
body.nx-site .nx-chapters {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.nx-site .nx-chapter {
    padding: 30px;
    background: var(--nx-surface);
    border-left: 3px solid var(--nx-neon);
}
body.nx-site .nx-chapter__no {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-chapter .nx-card__title {
    margin-top: 12px;
}

/* Meilenstein-Leiste: scrollt waagerecht (Mausrad über der Leiste, Pfeile, Wischen, Pfeiltasten).
   Ausblendkanten zeigen an, dass es in diese Richtung weitergeht. */
body.nx-site .nx-tlwrap {
    position: relative;
    margin: 40px 0 0;
}
body.nx-site .nx-timeline {
    position: relative;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 30px 0 14px;
    overflow-x: auto;
    list-style: none;
    border-top: 2px solid var(--nx-surface-2);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-surface-2) transparent;
}
body.nx-site .nx-timeline:focus-visible {
    outline: 2px solid var(--nx-neon-text);
    outline-offset: 4px;
}
body.nx-site .nx-tlwrap.has-more-start .nx-timeline {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px);
    mask-image: linear-gradient(to right, transparent 0, #000 64px);
}
body.nx-site .nx-tlwrap.has-more-end .nx-timeline {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 64px);
    mask-image: linear-gradient(to left, transparent 0, #000 64px);
}
body.nx-site .nx-tlwrap.has-more-start.has-more-end .nx-timeline {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
body.nx-site .nx-tlwrap__btn {
    position: absolute;
    top: 34px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #FFFFFF;
    background: var(--nx-neon);
    border: 0;
    cursor: pointer;
    clip-path: var(--nx-slant-soft);
    transition: transform .2s var(--nx-ease), opacity .2s ease;
}
body.nx-site .nx-tlwrap__btn[hidden] {
    display: none;
}
body.nx-site .nx-tlwrap__btn svg {
    width: 20px;
    height: 20px;
}
body.nx-site .nx-tlwrap__btn:hover,
body.nx-site .nx-tlwrap__btn:focus-visible {
    transform: scale(1.08);
}
body.nx-site .nx-tlwrap__btn:focus-visible {
    outline: 2px solid var(--nx-neon-text);
    outline-offset: 3px;
}
body.nx-site .nx-tlwrap__btn--prev {
    left: -6px;
}
body.nx-site .nx-tlwrap__btn--next {
    right: -6px;
}
body.nx-site .nx-timeline__item {
    position: relative;
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 20px;
}
body.nx-site .nx-timeline__item::before {
    content: "";
    position: absolute;
    top: -37px;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--nx-neon);
    transform: rotate(45deg);
}
body.nx-site .nx-timeline__item time {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-timeline__item span {
    font-weight: 700;
    color: var(--nx-text);
}

body.nx-site .nx-goal {
    margin-bottom: 30px;
}
body.nx-site .nx-goal__bar {
    position: relative;
    height: 14px;
    overflow: hidden;
    background: var(--nx-surface-2);
    clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%);
}
body.nx-site .nx-goal__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--nx-goal, 0%);
    background: linear-gradient(90deg, var(--nx-neon), var(--nx-neon-text));
    box-shadow: 0 0 20px rgba(var(--nx-neon-rgb), .6);
    transform-origin: left;
}
body.nx-site .nx-goal.nx-in .nx-goal__bar span {
    animation: nx-grow 1.4s var(--nx-ease) .2s both;
}
body.nx-site .nx-goal__meta {
    margin: 12px 0 0;
    font-weight: 700;
    color: var(--nx-text-muted);
}
body.nx-site .nx-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.nx-site .nx-reward {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    background: var(--nx-surface);
}
body.nx-site .nx-reward__goal {
    font-size: 26px;
    font-weight: 900;
    color: var(--nx-text);
}
body.nx-site .nx-reward__text {
    color: var(--nx-text-muted);
}
body.nx-site .nx-reward__state {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-reward.is-reached {
    box-shadow: inset 0 0 0 2px var(--nx-online);
}
body.nx-site .nx-reward.is-reached .nx-reward__state {
    color: var(--nx-online);
}

body.nx-site .nx-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.nx-site .nx-day {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    padding: 18px 16px;
    background: var(--nx-surface);
    border-top: 3px solid var(--nx-neon);
}
body.nx-site .nx-day.is-off {
    border-top-color: var(--nx-surface-2);
    opacity: .6;
}
body.nx-site .nx-day__name {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-day__time {
    font-size: 17px;
    font-weight: 900;
    color: var(--nx-text);
}
body.nx-site .nx-day__format,
body.nx-site .nx-day__off {
    font-size: 14px;
    color: var(--nx-text-muted);
}

body.nx-site .nx-pband.component {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 991.98px) {
    body.nx-site .nx-facts__grid { grid-template-columns: minmax(0, 1fr); }
    body.nx-site .nx-week { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    body.nx-site .nx-secbar__name { display: none; }
}

@media (max-width: 575.98px) {
    body.nx-site .nx-phero__bignum { right: 0; bottom: -20px; }
    body.nx-site .nx-filter { flex-direction: column; align-items: stretch; }
    body.nx-site .nx-field--search input { width: 100%; }
}

/* 12.5 Reduzierte Bewegung (Talente) ------------ */
@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-live-pill i,
    body.nx-site .nx-chip--live input:checked + span i,
    body.nx-site .nx-tcard__live i,
    body.nx-site .nx-tcard--in,
    body.nx-site .nx-goal.nx-in .nx-goal__bar span {
        animation: none;
    }
    body.nx-site .nx-tcard,
    body.nx-site .nx-tcard__media img,
    body.nx-site .nx-secbar,
    body.nx-site .nx-social,
    body.nx-site .nx-clip__icon {
        transition: none;
    }
    body.nx-site .nx-tcard:hover,
    body.nx-site .nx-tcard:focus-visible,
    body.nx-site .nx-tcard:hover .nx-tcard__media img {
        transform: none;
    }
}

/* 13. Dark/Light-Umschalter ------------------------
   Button wird von nx-theme.js eingefügt: in der Sekundärnavigation
   (Desktop) und kompakt neben dem Menü-Button (Mobil). */
body.nx-site .nx-theme-item {
    display: flex;
    align-items: center;
}

body.nx-site .nx-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--nx-text-muted);
    background: transparent;
    border: 1px solid var(--nx-border);
    cursor: pointer;
    clip-path: var(--nx-slant-soft);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.nx-site .nx-theme-toggle:hover,
body.nx-site .nx-theme-toggle:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-surface-2);
    border-color: var(--nx-neon);
}

body.nx-site .nx-theme-toggle svg {
    position: absolute;
    transition: transform .45s var(--nx-ease), opacity .3s ease;
}

body.nx-site .nx-theme-toggle__moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.nx-site .nx-theme-toggle__sun {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

html[data-nx-theme="light"] body.nx-site .nx-theme-toggle__moon {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

html[data-nx-theme="light"] body.nx-site .nx-theme-toggle__sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

body.nx-site .nx-theme-toggle--compact {
    display: none;
    align-self: center;
    margin-left: auto;
    margin-right: 8px;
}

@media (max-width: 991.98px) {
    body.nx-site .nx-theme-item {
        display: none;
    }

    body.nx-site .nx-theme-toggle--compact {
        display: inline-flex;
    }
}

/* Weicher Farbwechsel nur beim aktiven Umschalten, nicht beim Laden */
html.nx-theme-switching body.nx-site,
html.nx-theme-switching body.nx-site #site-header,
html.nx-theme-switching body.nx-site #site-footer,
html.nx-theme-switching body.nx-site .component {
    transition: background-color .35s ease, color .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-theme-toggle svg,
    html.nx-theme-switching body.nx-site,
    html.nx-theme-switching body.nx-site #site-header,
    html.nx-theme-switching body.nx-site #site-footer,
    html.nx-theme-switching body.nx-site .component {
        transition: none;
    }
}

/* 14. Outline-Schriftzüge ---------------------------
   Nunito besteht aus überlappenden Konturen; eine reine Kontur
   (transparente Füllung) zeigt diese Überlappungen als feine Linien
   im Buchstaben. Lösung: Kontur zuerst zeichnen, dann mit der
   Hintergrundfarbe füllen – die innere Hälfte der Kontur samt
   Überlappungen verschwindet, außen bleibt die gewohnte Linienstärke.
   Die Füllfarbe folgt dem Farbset der jeweiligen Komponente. */
body.nx-site {
    --nx-outline-fill: var(--nx-bg);
}

body.nx-site .base-bg { --nx-outline-fill: rgb(var(--base-bg-color1)); }
body.nx-site .c1-bg { --nx-outline-fill: rgb(var(--c1-bg-color1)); }
body.nx-site .c2-bg { --nx-outline-fill: rgb(var(--c2-bg-color1)); }
body.nx-site .c3-bg { --nx-outline-fill: rgb(var(--c3-bg-color1)); }
body.nx-site .nx-cta-band { --nx-outline-fill: var(--nx-neon); }
body.nx-site .nx-notice__panel { --nx-outline-fill: var(--nx-surface); }

body.nx-site .nx-hero__word,
body.nx-site .nx-phero__word,
body.nx-site .nx-lore__word,
body.nx-site .nx-cta-band__word {
    color: var(--nx-outline-fill);
    paint-order: stroke fill;
    -webkit-text-stroke-width: 4px;
}

body.nx-site .nx-notice__word {
    color: var(--nx-outline-fill);
    paint-order: stroke fill;
    -webkit-text-stroke-width: 3px;
}

/* Nummern: gleiche Technik. Die Füllung entspricht der Fläche, auf der die Zahl steht. */
body.nx-site .nx-hero__tile,
body.nx-site .nx-phero__frame { --nx-outline-fill: var(--nx-surface-hover); }
body.nx-site .nx-tcard { --nx-outline-fill: var(--nx-surface); }

body.nx-site .nx-hero__num,
body.nx-site .nx-step__num,
body.nx-site .nx-tcard__num {
    color: var(--nx-outline-fill);
    paint-order: stroke fill;
    -webkit-text-stroke-width: 3px;
}

body.nx-site .nx-hero__tile--1 .nx-hero__num,
body.nx-site .nx-phero__bignum {
    color: var(--nx-outline-fill);
    paint-order: stroke fill;
    -webkit-text-stroke-width: 4px;
}

/* Hover-Tönung deckend mischen, damit die Überlappungen auch dabei verborgen bleiben */
body.nx-site .nx-step:hover .nx-step__num {
    color: color-mix(in srgb, var(--nx-outline-fill) 82%, var(--nx-neon));
}

/* Über Fotos bleibt die Zahl eine reine Kontur, sonst läge eine Farbfläche auf dem Bild */
body.nx-site .nx-hero__tile:has(img) .nx-hero__num,
body.nx-site .nx-phero__frame:has(img) .nx-phero__bignum {
    color: transparent;
    paint-order: normal;
    -webkit-text-stroke-width: 1.5px;
}

body.nx-site .nx-hero__tile--1:has(img) .nx-hero__num,
body.nx-site .nx-phero__frame:has(img) .nx-phero__bignum {
    -webkit-text-stroke-width: 2px;
}

/* 15. News -------------------------------------------
   Übersicht (Kopf und Linien wie Talente), Top-Story, Karten,
   Artikelseite, Teilen-Leiste. Kategoriefarbe über --nx-cat. */
body.nx-site .nx-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

body.nx-site [data-nx-news-results] {
    transition: opacity .25s ease;
}
body.nx-site [data-nx-news-results].is-loading {
    opacity: .45;
}

html.nx-js body.nx-site .nx-filter__submit {
    display: none;
}

body.nx-site .nx-chip--cat input:checked + span {
    color: #FFFFFF;
    background: var(--nx-cat);
}
body.nx-site .nx-chip--cat span::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--nx-cat);
    transform: rotate(45deg);
}
body.nx-site .nx-chip--cat input:checked + span::before {
    background: #FFFFFF;
}

/* Kategorie-Kennzeichen und Metazeile */
body.nx-site .nx-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nx-cat, var(--nx-neon-text));
}
body.nx-site .nx-cat::before {
    content: "";
    width: 7px;
    height: 7px;
    background: currentColor;
    transform: rotate(45deg);
}
body.nx-site .nx-ncard__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
    color: var(--nx-text-subtle);
}

/* Karte */
body.nx-site .nx-ncard {
    --nx-outline-fill: var(--nx-surface);
    position: relative;
    margin: 0;
}
body.nx-site .nx-ncard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface);
    border-bottom: 3px solid transparent;
    transition: transform .35s var(--nx-ease), background-color .3s ease, border-color .3s ease;
}
body.nx-site .nx-ncard__link:hover,
body.nx-site .nx-ncard__link:focus-visible {
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface-2);
    border-bottom-color: var(--nx-cat);
    transform: translateY(-6px);
}
body.nx-site .nx-ncard__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nx-surface-hover);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
body.nx-site .nx-ncard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--nx-ease);
}
body.nx-site .nx-ncard__link:hover .nx-ncard__media img {
    transform: scale(1.05);
}
body.nx-site .nx-ncard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px 22px;
}
body.nx-site .nx-ncard__title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--nx-text);
}
body.nx-site .nx-ncard__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    color: var(--nx-text-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
body.nx-site .nx-ncard__more {
    margin-top: auto;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
    transition: color .2s ease;
}
body.nx-site .nx-ncard__link:hover .nx-ncard__more {
    color: var(--nx-cat);
}

/* Platzhalter ohne Titelbild: Kategoriefarbe, Linien, Umriss-Wort.
   Das Umriss-Wort liegt auf einem Verlauf mit Linien, eine einfarbige Füllung (wie in Abschnitt 14)
   würde sich abzeichnen. Deshalb deckt eine Kopie des Worts (::after) die Innenseite der Kontur samt
   der Nunito-Überlappungen mit exakt demselben Hintergrund ab: Container-Einheiten richten den
   Hintergrund der Kopie deckungsgleich am Platzhalter aus. */
body.nx-site .nx-ncard__ph {
    --nx-ph-bg:
        repeating-linear-gradient(114deg, transparent 0 46px, color-mix(in srgb, var(--nx-cat) 22%, transparent) 46px 47px),
        linear-gradient(135deg, color-mix(in srgb, var(--nx-cat) 28%, var(--nx-surface-hover)), var(--nx-surface-hover) 70%);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    container-type: size;
    background: var(--nx-ph-bg);
}
body.nx-site .nx-ncard__ph span {
    --nx-ph-dx: -0.04em;
    --nx-ph-dy: 0.18em;
    position: relative;
    margin: 0 0 calc(var(--nx-ph-dy) * -1) var(--nx-ph-dx);
    font-size: clamp(54px, 7vw, 96px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 3px color-mix(in srgb, var(--nx-cat) 70%, var(--nx-surface-hover));
}
body.nx-site .nx-ncard__ph span::after {
    content: attr(data-word);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 0;
    color: transparent;
    background: var(--nx-ph-bg);
    background-size: 100cqw 100cqh;
    background-position: calc(var(--nx-ph-dx) * -1) calc(1em - var(--nx-ph-dy) - 100cqh);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Eintritt nachgeladener oder gefilterter Karten */
body.nx-site .nx-ncard--enter {
    animation: nx-news-enter .55s var(--nx-ease) both;
    animation-delay: calc(min(var(--nx-i, 0), 8) * 45ms);
}
@keyframes nx-news-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* Top-Story */
body.nx-site .nx-ntop {
    --nx-outline-fill: var(--nx-surface);
    margin: 0 0 36px;
}
body.nx-site .nx-ntop__link {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    color: var(--nx-text);
    text-decoration: none;
    background: var(--nx-surface);
    box-shadow: inset 0 0 0 1px var(--nx-surface-2);
    transition: box-shadow .3s ease;
}
body.nx-site .nx-ntop__link:hover,
body.nx-site .nx-ntop__link:focus-visible {
    color: var(--nx-text);
    text-decoration: none;
    box-shadow: inset 0 0 0 2px var(--nx-cat);
}
body.nx-site .nx-ntop__media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: var(--nx-surface-hover);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}
body.nx-site .nx-ntop__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--nx-ease);
}
body.nx-site .nx-ntop__link:hover .nx-ntop__media img {
    transform: scale(1.04);
}
body.nx-site .nx-ntop__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: clamp(24px, 4vw, 48px);
}
body.nx-site .nx-ntop__badge {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--nx-cat);
    clip-path: var(--nx-slant-soft);
}
body.nx-site .nx-ntop__title {
    margin: 0;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--nx-text);
}
body.nx-site .nx-ntop__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--nx-text-muted);
}

body.nx-site .nx-news__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 40px 0 0;
}
body.nx-site .nx-news__pager .is-loading {
    opacity: .6;
    pointer-events: none;
}
body.nx-site .nx-news__rss {
    margin: 32px 0 0;
    font-size: 13px;
    text-align: center;
}

/* Artikelseite */
body.nx-site .nx-article__head {
    position: relative;
    overflow-x: clip;
    padding-top: clamp(40px, 6vw, 90px);
}
body.nx-site .nx-article__head .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 920px;
}
body.nx-site .nx-article__back {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-article__back:hover {
    color: var(--nx-text-strong);
}
body.nx-site .nx-article__title {
    margin: 0;
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--nx-text);
}
body.nx-site .nx-article__teaser {
    margin: 0;
    max-width: 760px;
}
body.nx-site .nx-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.nx-site .nx-author__img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 900;
    color: #FFFFFF;
    background: var(--nx-cat);
    clip-path: var(--nx-slant-soft);
}
body.nx-site .nx-author__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.nx-site .nx-author__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
body.nx-site .nx-author__name {
    font-weight: 800;
    text-decoration: none;
    color: var(--nx-text);
}
body.nx-site a.nx-author__name:hover {
    color: var(--nx-neon-text);
}
body.nx-site .nx-author__role {
    font-size: 13px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-article__media {
    --nx-outline-fill: var(--nx-surface);
    position: relative;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    margin: clamp(28px, 4vw, 48px) auto;
    overflow: hidden;
    background: var(--nx-surface-hover);
    clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
}
body.nx-site .nx-article__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.nx-site .nx-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) auto;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    margin-bottom: clamp(40px, 6vw, 80px);
}
body.nx-site .nx-article__body {
    margin-bottom: 0;
}
body.nx-site .nx-article__body a {
    color: var(--nx-neon-text);
}
body.nx-site .nx-article__body img {
    max-width: 100%;
    height: auto;
}
body.nx-site .nx-share {
    position: sticky;
    top: calc(var(--large-header, 80px) + 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: start;
}
body.nx-site .nx-share__label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text-subtle);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 6px;
}
body.nx-site .nx-share .nx-social {
    border: 0;
    cursor: pointer;
}
body.nx-site .nx-share .nx-social:hover,
body.nx-site .nx-share .nx-social:focus-visible {
    color: #FFFFFF;
    background: var(--nx-cat);
}
body.nx-site .nx-share__copy.is-done {
    color: #FFFFFF;
    background: var(--nx-online);
}
body.nx-site .nx-share .nx-icon {
    width: 18px;
    height: 18px;
}
body.nx-site .nx-article__more {
    padding-bottom: clamp(40px, 6vw, 90px);
}

@media (max-width: 991.98px) {
    body.nx-site .nx-ntop__link {
        grid-template-columns: 1fr;
    }
    body.nx-site .nx-ntop__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
    body.nx-site .nx-article__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    body.nx-site .nx-share {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    body.nx-site .nx-share__label {
        writing-mode: horizontal-tb;
        transform: none;
        margin: 0 6px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-ncard__link,
    body.nx-site .nx-ncard__media img,
    body.nx-site .nx-ntop__media img {
        transition: none;
    }
    body.nx-site .nx-ncard__link:hover,
    body.nx-site .nx-ncard__link:focus-visible {
        transform: none;
    }
    body.nx-site .nx-ncard--enter {
        animation: none;
    }
}

/* 16. Live-Status ------------------------------------
   Zähler im Header, Komponente „Gerade live“, Live-Player im Profil.
   Die Live-Kennzeichen der Karten stehen in Abschnitt 12.3. */
body.nx-site .nx-livecount {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    margin: 0 10px 0 auto;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    background: var(--nx-live);
    clip-path: var(--nx-slant-soft);
    transition: filter .2s ease;
}
body.nx-site .nx-livecount[hidden] {
    display: none;
}
body.nx-site .nx-livecount:hover,
body.nx-site .nx-livecount:focus-visible {
    color: #FFFFFF;
    text-decoration: none;
    filter: brightness(1.1);
}
body.nx-site .nx-livecount i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: nx-live-pulse 1.6s ease-in-out infinite;
}
@keyframes nx-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
body.nx-site .nx-theme-toggle--compact + .nx-livecount,
body.nx-site .nx-livecount + .nx-theme-toggle--compact {
    margin-left: 0;
}

body.nx-site .nx-live-now[hidden] {
    display: none;
}
body.nx-site .nx-live-now .nx-tcard[data-live="false"] {
    display: none;
}

body.nx-site .nx-liveplayer {
    position: relative;
    margin-top: clamp(24px, 4vw, 40px);
}
body.nx-site .nx-liveplayer[hidden] {
    display: none;
}
body.nx-site .nx-liveplayer__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 1100px;
    overflow: hidden;
    background:
        repeating-linear-gradient(114deg, transparent 0 46px, rgba(255, 77, 126, .12) 46px 47px),
        var(--nx-surface-hover);
    box-shadow: inset 0 0 0 2px var(--nx-live);
}
body.nx-site .nx-liveplayer__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
body.nx-site .nx-liveplayer__load {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 20px;
    font: inherit;
    color: var(--nx-text);
    text-align: center;
    background: transparent;
    border: 0;
    cursor: pointer;
}
body.nx-site .nx-liveplayer__load[hidden] {
    display: none;
}
body.nx-site .nx-liveplayer__label {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 900;
}
body.nx-site .nx-liveplayer__load small {
    font-size: 13px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-liveplayer__load .nx-clip__icon {
    color: #FFFFFF;
    background: var(--nx-live);
}
body.nx-site .nx-liveplayer__load:hover .nx-clip__icon,
body.nx-site .nx-liveplayer__load:focus-visible .nx-clip__icon {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-livecount i {
        animation: none;
    }
}

/* 17. Links ohne Unterstreichung --------------------
   uSkinned unterstreicht Inhalts-Links beim Überfahren (Design-Einstellung). Für die Karten, Kacheln, Buttons und
   Listen der Nishinija-Komponenten ist das unruhig; dort zeigen Hintergrund, Farbe oder Bewegung den Zustand an.
   Fließtext-Links (z. B. in News-Artikeln) bleiben unterstrichen. */
body.nx-site #site-content a[class*="nx-"]:not(.btn):not(.nav-button-link):hover,
body.nx-site #site-content a[class*="nx-"]:not(.btn):not(.nav-button-link):focus,
body.nx-site #site-content a[class*="nx-"]:not(.btn):not(.nav-button-link):active,
body.nx-site #site-content a.item:not(.btn):not(.nav-button-link):hover,
body.nx-site #site-content a.item:not(.btn):not(.nav-button-link):focus {
    text-decoration: none;
}

/* 18. Rechtstexte -----------------------------------
   Impressum, Datenschutz, AGB, Cookies und Community-Regeln: ruhige Lesespalte, Inhaltsverzeichnis mit
   Markierung des aktuellen Abschnitts (Desktop: mitlaufend, Mobil: einklappbar). */
body.nx-site .nx-legal__head {
    position: relative;
    overflow-x: clip;
    padding-top: clamp(40px, 6vw, 90px);
    padding-bottom: clamp(24px, 3vw, 40px);
}
body.nx-site .nx-legal__head .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 1100px;
}
body.nx-site .nx-legal__kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-neon-text);
}
body.nx-site .nx-legal__title {
    margin: 0;
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--nx-text);
    overflow-wrap: anywhere;
    hyphens: auto;
}
body.nx-site .nx-legal__summary {
    max-width: 720px;
}
body.nx-site .nx-legal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    font-size: 14px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-legal__lang,
body.nx-site .nx-legal__print {
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: var(--nx-neon-text);
    background: none;
    border: 0;
    cursor: pointer;
}
body.nx-site .nx-legal__lang:hover,
body.nx-site .nx-legal__print:hover {
    color: var(--nx-text-strong);
}
body.nx-site .nx-legal__binding {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--nx-text);
    background: var(--nx-surface);
    border-left: 3px solid var(--nx-warning);
}
body.nx-site .nx-legal__binding a {
    display: inline-block;
    margin-left: 6px;
    font-weight: 800;
}
body.nx-site .nx-legal__layout {
    display: grid;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: clamp(48px, 7vw, 100px);
}
@media (min-width: 960px) {
    body.nx-site .nx-legal__layout--toc {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }
    body.nx-site .nx-legal__toc {
        position: sticky;
        top: calc(var(--nx-header-height, 90px) + 24px);
        max-height: calc(100vh - var(--nx-header-height, 90px) - 48px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    body.nx-site .nx-legal__toc summary {
        pointer-events: none;
    }
    body.nx-site .nx-legal__toc summary::after {
        display: none;
    }
}
body.nx-site .nx-legal__toc details {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
}
body.nx-site .nx-legal__toc summary {
    position: relative;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nx-text);
    list-style: none;
    cursor: pointer;
}
body.nx-site .nx-legal__toc summary::-webkit-details-marker {
    display: none;
}
body.nx-site .nx-legal__toc summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s var(--nx-ease);
}
body.nx-site .nx-legal__toc details[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}
body.nx-site .nx-legal__toc ol {
    margin: 0;
    padding: 0 10px 14px;
    list-style: none;
    counter-reset: nx-toc;
}
body.nx-site .nx-legal__toc li {
    counter-increment: nx-toc;
}
body.nx-site .nx-legal__toclink {
    position: relative;
    display: block;
    padding: 7px 8px 7px 38px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    color: var(--nx-text-muted);
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
body.nx-site .nx-legal__toclink::before {
    content: counter(nx-toc, decimal-leading-zero);
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-legal__toclink:hover,
body.nx-site .nx-legal__toclink:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-surface-hover);
}
body.nx-site .nx-legal__toclink[aria-current] {
    color: var(--nx-text-strong);
    background: var(--nx-surface-hover);
    box-shadow: inset 3px 0 0 var(--nx-neon);
}
body.nx-site .nx-legal__toclink[aria-current]::before {
    color: var(--nx-neon-text);
}
body.nx-site .nx-legal__body {
    max-width: 780px;
    margin-bottom: 0;
    font-size: 16px;
    overflow-wrap: break-word;
}
body.nx-site .nx-legal__body h2 {
    margin: 2.4em 0 .7em;
    padding-top: .9em;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 900;
    line-height: 1.25;
    border-top: 1px solid var(--nx-border);
    scroll-margin-top: calc(var(--nx-header-height, 90px) + 24px);
}
body.nx-site .nx-legal__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
body.nx-site .nx-legal__body h3 {
    margin: 1.8em 0 .5em;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}
body.nx-site .nx-legal__body ul,
body.nx-site .nx-legal__body ol {
    padding-left: 1.3em;
}
body.nx-site .nx-legal__body li {
    margin-bottom: .35em;
}
body.nx-site .nx-legal__body strong {
    color: var(--nx-text);
}
body.nx-site .nx-legal__body .nx-legal-box {
    margin: 1.4em 0;
    padding: 16px 20px;
    background: var(--nx-surface);
    border-left: 3px solid var(--nx-neon);
}
body.nx-site .nx-legal__body .nx-legal-box > :first-child {
    margin-top: 0;
}
body.nx-site .nx-legal__body .nx-legal-box > :last-child {
    margin-bottom: 0;
}
body.nx-site .nx-legal__body .nx-legal-table {
    display: block;
    width: 100%;
    margin: 1.4em 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}
body.nx-site .nx-legal__body .nx-legal-table th,
body.nx-site .nx-legal__body .nx-legal-table td {
    min-width: 120px;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--nx-border);
}
body.nx-site .nx-legal__body .nx-legal-table th {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nx-text);
    background: var(--nx-surface);
}
body.nx-site .nx-legal__body .nx-legal-table code {
    font-size: 13px;
    color: var(--nx-text);
    white-space: nowrap;
}

@media print {
    body.nx-site .nx-legal__toc,
    body.nx-site .nx-legal__print,
    body.nx-site .nx-legal__lang,
    body.nx-site .nx-legal .nx-talents__lines,
    body.nx-site .nx-consent {
        display: none;
    }
    body.nx-site .nx-legal__layout--toc {
        display: block;
    }
    body.nx-site .nx-legal__title,
    body.nx-site .nx-legal__body,
    body.nx-site .nx-legal__body h2,
    body.nx-site .nx-legal__body h3,
    body.nx-site .nx-legal__body strong {
        color: #000000;
    }
}

/* 19. Einwilligungs-Banner --------------------------
   Nicht blockierend (keine Cookie-Wand), „Alle akzeptieren“ und „Nur notwendige“ gleichwertig gestaltet. */
body.nx-site .nx-consent {
    position: fixed;
    left: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 1100;
    width: min(500px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 24px 24px 18px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nx-text-muted);
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 2px 0 var(--nx-neon);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .35s var(--nx-ease), transform .45s var(--nx-ease);
}
body.nx-site .nx-consent.is-open {
    opacity: 1;
    transform: none;
}
body.nx-site .nx-consent.is-closing {
    opacity: 0;
    transform: translateY(24px);
}
body.nx-site .nx-consent:focus {
    outline: none;
}
body.nx-site .nx-consent__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--nx-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
body.nx-site .nx-consent__close:hover,
body.nx-site .nx-consent__close:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-surface-hover);
}
body.nx-site .nx-consent__close[hidden] {
    display: none;
}
body.nx-site .nx-consent__title {
    margin: 0 36px 10px 0;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: var(--nx-text);
}
body.nx-site .nx-consent__text,
body.nx-site .nx-consent__media {
    margin: 0 0 10px;
}
body.nx-site .nx-consent__media {
    font-size: 13px;
    color: var(--nx-text-subtle);
}
body.nx-site .nx-consent__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 800;
}
body.nx-site .nx-consent__links a {
    color: var(--nx-neon-text);
}
body.nx-site .nx-consent__panel {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
body.nx-site .nx-consent__panel[hidden] {
    display: none;
}
body.nx-site .nx-consent__option {
    padding: 12px 14px;
    background: var(--nx-surface-2);
}
body.nx-site .nx-consent__option p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
}
body.nx-site .nx-consent__optionhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: var(--nx-text);
    cursor: default;
}
body.nx-site label.nx-consent__optionhead {
    cursor: pointer;
}
body.nx-site .nx-consent__always {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nx-online);
}
body.nx-site .nx-consent__switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
}
body.nx-site .nx-consent__switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
body.nx-site .nx-consent__track {
    position: absolute;
    inset: 0;
    background: var(--nx-border);
    border-radius: 13px;
    transition: background-color .25s ease, box-shadow .25s ease;
}
body.nx-site .nx-consent__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform .3s var(--nx-ease);
}
body.nx-site .nx-consent__switch input:checked + .nx-consent__track {
    background: var(--nx-neon);
    box-shadow: 0 0 14px rgba(var(--nx-neon-rgb), .55);
}
body.nx-site .nx-consent__switch input:checked + .nx-consent__track::after {
    transform: translateX(20px);
}
body.nx-site .nx-consent__switch input:focus-visible + .nx-consent__track {
    outline: 2px solid var(--nx-neon-text);
    outline-offset: 2px;
}
body.nx-site .nx-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.nx-site .nx-consent__btn {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--nx-neon);
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, filter .2s ease;
}
body.nx-site .nx-consent__btn:hover,
body.nx-site .nx-consent__btn:focus-visible {
    background: var(--nx-neon-hover);
    filter: drop-shadow(0 4px 14px rgba(var(--nx-neon-rgb), .45));
}
body.nx-site .nx-consent__btn:focus-visible {
    outline: 2px solid var(--nx-text-strong);
    outline-offset: 2px;
}
body.nx-site .nx-consent__btn--ghost {
    grid-column: 1 / -1;
    color: var(--nx-text);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--nx-border);
}
body.nx-site .nx-consent__btn--ghost:hover,
body.nx-site .nx-consent__btn--ghost:focus-visible {
    color: var(--nx-text-strong);
    background: var(--nx-surface-hover);
    filter: none;
}
body.nx-site .nx-consent__btn--wide {
    grid-column: 1 / -1;
}
body.nx-site .nx-consent__btn[hidden] {
    display: none;
}
body.nx-site .nx-consent__actions > .nx-consent__btn:only-child {
    grid-column: 1 / -1;
}
body.nx-site .nx-consent__status {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--nx-online);
}
body.nx-site .nx-consent__status:empty {
    display: none;
}
@media (max-width: 420px) {
    body.nx-site .nx-consent__actions {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.nx-site .nx-consent,
    body.nx-site .nx-consent__track,
    body.nx-site .nx-consent__track::after,
    body.nx-site .nx-legal__toc summary::after {
        transition: none;
    }
}