/* Core-Layer f Builder-Template-Assets (global, template-unabhaengig) */
html,
html body,
body,
.sticky-footer-wrapper {
  background-color: var(--nx-page-bg, initial) !important;
  color: var(--nx-page-text, inherit) !important;
}

body.builder-active,
body.builder-active body,
body.builder-active .sticky-footer-wrapper {
  background-color: var(--nx-builder-shell-bg, initial) !important;
}

body.builder-active main.flex-fill {
  background-color: var(--nx-builder-main-bg, transparent) !important;
}

html body a {
  color: var(--bs-link-color, inherit);
  text-decoration: var(--bs-link-decoration, none) !important;
}

html body a:hover,
html body a:focus {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary))));
  text-decoration: var(--bs-link-hover-decoration, var(--bs-link-decoration, none)) !important;
}

main,
.nx-live-zone,
.nx-live-content {
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

/*
 * Kompatibilitaetsbruecke fuer bestehende Plugin-CSS.
 * Neue Plugins sollen direkt --nx-color-* und --nx-component-* verwenden.
 */
:root {
  --nx-theme-surface-2: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff))));
  --nx-theme-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --nx-theme-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --nx-theme-card-border: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --nx-theme-accent: var(--nx-color-primary, var(--bs-primary));
  --nx-theme-card-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
  --nx-theme-radius-sm: var(--nx-component-radius, var(--bs-border-radius-sm, .25rem));
  --nx-theme-radius-md: var(--nx-component-radius, var(--bs-border-radius, .375rem));
  --nx-theme-radius-lg: var(--nx-component-radius, var(--bs-border-radius-lg, .5rem));
}

/*
 * Text elements inherit from their nearest section/card.
 * The palette defines the page default on main, but must not force one
 * foreground color onto mixed light/dark template sections.
 */

main :is(.text-muted, .nx-tk-text-muted),
.nx-live-zone :is(.text-muted, .nx-tk-text-muted),
.nx-live-content :is(.text-muted, .nx-tk-text-muted) {
  color: var(--nx-color-muted, var(--bs-secondary-color, #6c757d)) !important;
}

/* =========================================================
   Zentrale Template-Komponenten-Schicht
   Plugins verwenden Bootstrap-/Standardklassen; das aktive
   Template liefert ausschließlich --nx-component-*-Tokens.
   ========================================================= */
body.nx-frontend-subpage:not(.builder-active) main.flex-fill {
  --bs-card-bg: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-body-bg, #fff)));
  --bs-card-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-card-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --bs-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --bs-table-bg: var(--nx-component-table-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-table-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-table-border-color: var(--nx-component-border, var(--bs-border-color));
  --bs-list-group-bg: var(--nx-component-list-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-list-group-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-list-group-border-color: var(--nx-component-border, var(--bs-border-color));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card {
  background: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem)) !important;
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none)) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  overflow: hidden;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card:hover {
  box-shadow: var(--nx-component-shadow-hover, var(--nx-component-shadow, var(--nx-shadow-card, none))) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card > .card-header {
  background: var(--nx-component-card-header-bg, color-mix(in srgb, var(--nx-color-card-bg, var(--bs-card-bg, #fff)) 92%, var(--nx-color-on-surface, #212529) 8%)) !important;
  border-bottom-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card > :is(.card-body, .card-footer) {
  background: var(--nx-component-card-body-bg, var(--nx-component-card-bg, var(--nx-color-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.form-control, .form-select) {
  background-color: var(--nx-component-control-bg, color-mix(in srgb, var(--nx-color-card-body-bg, var(--nx-color-card-bg, var(--bs-body-bg))) 97%, var(--nx-color-on-surface, #212529) 3%)) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.form-control, .form-select):focus {
  background-color: var(--nx-component-control-bg, color-mix(in srgb, var(--nx-color-card-body-bg, var(--nx-color-card-bg, var(--bs-body-bg))) 97%, var(--nx-color-on-surface, #212529) 3%)) !important;
  border-color: var(--nx-color-primary, var(--bs-primary)) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 18%, transparent) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .input-group-text {
  background: var(--nx-component-control-addon-bg, color-mix(in srgb, var(--nx-color-card-bg, var(--bs-card-bg, #fff)) 88%, var(--nx-color-on-surface, #212529) 12%)) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-muted, var(--bs-secondary-color, #6c757d)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.list-group, .table-responsive, .accordion) {
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem));
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .list-group {
  overflow: hidden;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .list-group-item {
  background: var(--nx-component-list-bg, var(--nx-component-card-body-bg, var(--bs-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .table {
  --bs-table-bg: var(--nx-component-table-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-table-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-table-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  color: var(--bs-table-color);
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.modal-content, .offcanvas, .dropdown-menu) {
  background: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-body-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem));
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

/*
 * Kontrastfeste Status-Komponenten fuer Plugins.
 * Helle Paletten duerfen bei Bootstrap-Badges keine helle Schrift auf
 * hellem Hintergrund erzeugen.
 */
body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-primary, .badge.text-bg-primary) {
  background-color: var(--nx-color-primary, var(--bs-primary)) !important;
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-secondary, .badge.text-bg-secondary) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 76%,
    var(--nx-color-on-surface, var(--bs-body-color)) 24%
  ) !important;
  border: 1px solid color-mix(
    in srgb,
    var(--nx-color-card-border, var(--bs-border-color)) 72%,
    var(--nx-color-on-surface, var(--bs-body-color)) 28%
  );
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-success, .badge.text-bg-success) {
  background-color: var(--bs-success, #198754) !important;
  color: #fff !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-danger, .badge.text-bg-danger) {
  background-color: var(--bs-danger, #dc3545) !important;
  color: #fff !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-warning, .badge.text-bg-warning) {
  background-color: var(--bs-warning, #ffc107) !important;
  color: #1f2937 !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-info, .badge.text-bg-info) {
  background-color: var(--bs-info, #0dcaf0) !important;
  color: #10212a !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-light, .badge.text-bg-light) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 92%,
    var(--nx-color-on-surface, var(--bs-body-color)) 8%
  ) !important;
  border: 1px solid var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.text-bg-secondary:not(.badge), .bg-secondary-subtle) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 88%,
    var(--nx-color-on-surface, var(--bs-body-color)) 12%
  ) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.text-bg-primary:not(.badge), .bg-primary-subtle) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-primary, var(--bs-primary)) 16%,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 84%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--nx-color-primary, var(--bs-primary)) 38%,
    var(--nx-color-card-border, var(--bs-border-color)) 62%
  ) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .progress {
  --bs-progress-bg: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 82%,
    var(--nx-color-on-surface, var(--bs-body-color)) 18%
  );
  background-color: var(--bs-progress-bg) !important;
  border-radius: var(--nx-component-radius, var(--bs-border-radius, .375rem));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .progress-bar {
  background-color: var(--nx-color-primary, var(--bs-primary)) !important;
}

main :is(.btn, a.btn),
.nx-live-zone :is(.btn, a.btn),
.nx-live-content :is(.btn, a.btn),
.nxm-page .nxm-btn {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

main :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nxm-page .nxm-btn--primary {
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--bs-primary))) !important;
}

main :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
main :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nxm-page .nxm-btn--primary:hover,
.nxm-page .nxm-btn--primary:focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-hover-bg, var(--nx-color-link-hover, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-hover-border, var(--nx-color-button-hover-bg, var(--bs-primary))) !important;
}

main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nxm-page .nxm-btn--ghost {
  color: var(--nx-color-button-outline-text, var(--nx-color-link, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-outline-border, var(--nx-color-button-outline-text, var(--bs-primary))) !important;
  background-color: transparent !important;
}

main .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active),
.nx-live-zone .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active),
.nx-live-content .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active) {
  background-color: transparent !important;
}

main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nxm-page .nxm-btn--ghost:hover,
.nxm-page .nxm-btn--ghost:focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--bs-primary)) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--bs-primary))) !important;
}

#mainNavbar .navbar-nav .nav-link,
#mainNavbar .navbar-brand {
  color: var(--bs-link-color, var(--nx-color-link, var(--bs-body-color))) !important;
}

#mainNavbar .navbar-nav .nav-link:hover,
#mainNavbar .navbar-nav .nav-link:focus,
#mainNavbar .nav-item.dropdown.show > .nav-link,
#mainNavbar .nav-item.dropdown:hover > .nav-link {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

#mainNavbar .navbar-nav .nav-link.active {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

#mainNavbar #themeToggle {
  color: var(--bs-link-color, var(--nx-toggle-fg)) !important;
}

#mainNavbar #themeToggle:hover {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-gallery {
  --nx-gallery-image-height: clamp(160px, 22vw, 280px);
}

.nx-gallery--cols-2 {
  --nx-gallery-image-height: clamp(190px, 28vw, 340px);
}

.nx-gallery--cols-4 {
  --nx-gallery-image-height: clamp(140px, 18vw, 240px);
}

.nx-gallery-figure {
  overflow: hidden;
}

.nx-gallery-img {
  width: 100% !important;
  height: var(--nx-gallery-image-height) !important;
  object-fit: cover;
  object-position: center;
}

.nx-clan-match-showcase {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--nx-color-primary, #ffc107) 14%, transparent) 0%, transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--nx-color-surface, #0b111c) 78%, #000 22%), color-mix(in srgb, var(--nx-color-secondary, #111827) 52%, #000 48%));
  color: var(--nx-color-on-surface, #f8fafc);
  border-top: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.12)) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.12)) 75%, transparent);
}

.nx-clan-match-showcase :is(h1, h2, h3, h4, h5, h6, p, span) {
  color: inherit;
}

.nx-clan-match-showcase__league,
.nx-clan-match-showcase__vs,
.nx-clan-match-showcase__score {
  color: var(--nx-color-primary, var(--bs-primary)) !important;
}

.nx-clan-match-showcase__team,
.nx-clan-match-showcase__cell {
  min-height: 4.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-color-card-bg, #1f2937) 88%, #fff 5%), color-mix(in srgb, var(--nx-color-card-bg, #111827) 82%, #000 18%));
  border: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.15)) 80%, transparent);
  border-radius: .45rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

.nx-clan-match-showcase__team {
  min-height: 6.25rem;
}

.nx-clan-match-showcase__logo {
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}

.nx-clan-match-showcase__mini {
  width: 2.3rem;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nx-clan-match-showcase__mini img {
  max-width: 2.2rem;
  max-height: 1.6rem;
  object-fit: contain;
}

.nx-clan-match-showcase__score {
  min-width: 3rem;
  text-align: center;
}

body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary) {
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  background-image: none !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-hover-bg, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary)))) !important;
  background-image: none !important;
  border-color: var(--nx-color-button-hover-border, var(--nx-color-button-hover-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary),
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary),
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary) {
  color: var(--nx-color-button-outline-text, var(--nx-color-link, var(--nx-color-primary, var(--bs-primary)))) !important;
  background-color: color-mix(in srgb, var(--nx-color-card-bg, transparent) 35%, transparent) !important;
  border-color: var(--nx-color-button-outline-border, var(--nx-color-button-outline-text, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus,
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus,
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-accordion-theme {
  --bs-accordion-bg: var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg)));
  --bs-accordion-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-border-color: var(--nx-color-card-border, var(--bs-border-color));
  --bs-accordion-btn-bg: var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg)));
  --bs-accordion-btn-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-active-bg: color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 18%, var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg))));
  --bs-accordion-active-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 35%, transparent);
}

.nx-accordion-theme .accordion-item,
.nx-accordion-theme .accordion-button,
.nx-accordion-theme .accordion-body {
  background-color: var(--bs-accordion-bg) !important;
  color: var(--bs-accordion-color) !important;
  border-color: var(--bs-accordion-border-color) !important;
}

.nx-accordion-theme .accordion-button:not(.collapsed) {
  background-color: var(--bs-accordion-active-bg) !important;
  color: var(--bs-accordion-active-color) !important;
}

@media (max-width: 575.98px) {
  .nx-clan-match-showcase__vs {
    font-size: 1.5rem !important;
  }

  .nx-clan-match-showcase__team {
    min-height: 5rem;
  }
}

/* Core Hero Split: Bild nur in der Medien-Spalte, Flächenfarbe palettenkompatibel. */
.nx-hero-h-40{ min-height:40vh; display:flex; align-items:center; }
.nx-hero-h-50{ min-height:50vh; display:flex; align-items:center; }
.nx-hero-h-60{ min-height:60vh; display:flex; align-items:center; }
.nx-hero-h-80{ min-height:80vh; display:flex; align-items:center; }
.nx-hero-h-100{ min-height:100vh; display:flex; align-items:center; }

.nx-hero-split{
  background-color: var(--nx-color-surface, var(--bs-body-bg, #fff));
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  overflow: hidden;
  margin-top: 0 !important;
}
.nx-hero-split.nx-hero-h-40,
.nx-hero-split.nx-hero-h-50,
.nx-hero-split.nx-hero-h-60,
.nx-hero-split.nx-hero-h-80,
.nx-hero-split.nx-hero-h-100{
  align-items: stretch;
}
.nx-hero-split > .nx-hero-split-inner{
  min-height: inherit;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.nx-hero-split .nx-hero-split-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4.5rem);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}
.nx-hero-split--text-dark .nx-hero-split-text{
  color: var(--nx-hero-split-text-color, var(--nx-color-on-surface, var(--bs-body-color, #212529))) !important;
}
.nx-hero-split--text-light .nx-hero-split-text{
  color: var(--nx-hero-split-text-color, var(--nx-on-inverse-text, #fff)) !important;
}
.nx-hero-split .nx-hero-split-text h1{
  color: var(--nx-hero-split-title-color, currentColor) !important;
}
.nx-hero-split .nx-hero-split-text p{
  color: var(--nx-hero-split-body-color, currentColor) !important;
}
.nx-hero-split .nx-hero-split-text [data-nx-inline="subtitle"]{
  color: var(--nx-hero-split-subtitle-color, var(--nx-color-primary, var(--bs-primary))) !important;
}
.nx-hero-split .nx-hero-split-image{
  display: flex;
  align-self: stretch;
  min-height: clamp(320px, 48vh, 720px);
  overflow: hidden;
  padding: 0 !important;
  background: color-mix(in srgb, var(--nx-color-surface, var(--bs-body-bg, #fff)) 86%, var(--nx-color-on-surface, #212529) 14%);
}
.nx-hero-split .nx-hero-split-img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}
.nx-hero-split .nx-hero-split-placeholder{
  width: 100%;
  min-height: inherit;
}

@media (max-width: 575.98px){
  .nx-hero-split .nx-hero-split-text{
    padding: 2.25rem 1.25rem;
  }
  .nx-hero-split .nx-hero-split-image{
    min-height: 260px;
  }
}


/* core_header: Overlay-Header über Bild */
.nx-header-image {
  background: var(--nx-header-fallback-gradient, radial-gradient(circle at top, #1e293b, #020617));
  isolation: isolate;
}

.nx-header-image .nx-header-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nx-header-image .nx-header-vignette-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), 0) 0%,
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), 0) var(--nx-header-vignette-stop, 60%),
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), var(--nx-header-vignette-alpha, .5)) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), calc(var(--nx-header-vignette-alpha, .5) * .34)) 0%,
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), calc(var(--nx-header-vignette-alpha, .5) * .16)) 46%,
      rgba(var(--nx-header-vignette-rgb, 0, 0, 0), calc(var(--nx-header-vignette-alpha, .5) * .44)) 100%
    );
}

.nx-header-image .nx-header-content-overlay {
  z-index: 2;
  color: var(--nx-on-inverse-text, #fff);
}

.nx-header-image .nx-header-ink,
.nx-header-image .nx-header-ink :is(h1,h2,h3,h4,h5,h6,p,span) {
  color: inherit;
}

/* Core Medien: skalierbare Einzelmedien (Frontend + Live-Builder) */
.nx-media-single .nx-media-scale-box{
  position: relative;
  display: block;
  max-width: 100%;
}
.nx-media-single .nx-media-scale-box > .nx-media-single-img,
.nx-media-single .nx-media-scale-box > a > .nx-media-single-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.nx-media-single .nx-media-scale-box > .ratio{
  width: 100%;
}
body.builder-active .nx-media-canvas-resize-handle{
  position: absolute;
  z-index: 12;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fe821d;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
body.builder-active .nx-media-canvas-resize-handle[data-nx-media-resize="nw"]{ left:-8px; top:-8px; cursor:nwse-resize; }
body.builder-active .nx-media-canvas-resize-handle[data-nx-media-resize="ne"]{ right:-8px; top:-8px; cursor:nesw-resize; }
body.builder-active .nx-media-canvas-resize-handle[data-nx-media-resize="sw"]{ left:-8px; bottom:-8px; cursor:nesw-resize; }
body.builder-active .nx-media-canvas-resize-handle[data-nx-media-resize="se"]{ right:-8px; bottom:-8px; cursor:nwse-resize; }
body.builder-active .nx-live-item:is(.nx-live-active, :hover) .nx-media-canvas-resize-handle,
body.builder-active .nx-media-canvas-scaling .nx-media-canvas-resize-handle{
  opacity: 1;
  pointer-events: auto;
}
body.builder-active .nx-media-canvas-resize-label{
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  z-index: 13;
  padding: 3px 8px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
}
body.builder-active .nx-media-canvas-scaling .nx-media-canvas-resize-label{
  opacity: 1;
}
body.nx-media-canvas-resizing,
body.nx-media-canvas-resizing *{
  user-select: none !important;
}
.nx-media-single .nx-media-scale-box > a{
  display: block;
  width: 100%;
}


/* =========================================================
   Core Widget: News – drei Karten
   Palette-faehige Standarddarstellung inkl. Demo-/Leerzustand.
   ========================================================= */
.nx-clan-news-triple {
  --nx-news-surface: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg, #ffffff)));
  --nx-news-surface-2: var(--nx-component-card-body-bg, color-mix(in srgb, var(--nx-news-surface) 90%, var(--nx-color-on-surface, #111827) 10%));
  --nx-news-border: var(--nx-component-border, var(--nx-color-card-border, rgba(15, 23, 42, .10)));
  --nx-news-shadow: var(--nx-component-shadow, 0 18px 42px rgba(15, 23, 42, .08));
  --nx-news-shadow-hover: var(--nx-component-shadow-hover, 0 22px 54px rgba(15, 23, 42, .14));
  --nx-news-title: var(--nx-color-on-surface, var(--bs-body-color, #111827));
  --nx-news-muted: var(--nx-color-muted, var(--bs-secondary-color, #6b7280));
  --nx-news-accent: var(--nx-color-primary, var(--bs-primary, #ff6a00));
  --nx-news-accent-soft: color-mix(in srgb, var(--nx-news-accent) 16%, var(--nx-news-surface) 84%);
  --nx-news-link: var(--nx-color-link, var(--nx-news-accent));
}
.nx-clan-news-triple__sub {
  color: var(--nx-news-muted);
}
.nx-clan-news-triple__card {
  background: var(--nx-news-surface);
  border: 1px solid var(--nx-news-border);
  border-radius: .45rem;
  box-shadow: var(--nx-news-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.nx-clan-news-triple__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nx-news-shadow-hover);
  border-color: color-mix(in srgb, var(--nx-news-accent) 34%, var(--nx-news-border));
}
.nx-clan-news-triple__card-link,
.nx-clan-news-triple__card-link:hover {
  color: inherit;
}
.nx-clan-news-triple__media {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--nx-news-surface) 82%, var(--nx-news-accent) 18%);
}
.nx-clan-news-triple__ratio-fill {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.builder-active .nx-clan-news-triple__media[data-nx-inline$="_image"] {
  cursor: pointer;
}
body.builder-active .nx-clan-news-triple__upload-btn {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  z-index: 6;
  border: 1px solid color-mix(in srgb, var(--nx-news-accent) 48%, transparent);
  border-radius: .45rem;
  background: color-mix(in srgb, var(--nx-news-surface) 88%, transparent);
  color: var(--nx-news-title);
  padding: .36rem .62rem;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .13);
  opacity: .88;
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
}
body.builder-active .nx-clan-news-triple__media:hover .nx-clan-news-triple__upload-btn,
body.builder-active .nx-clan-news-triple__upload-btn:focus {
  opacity: 1;
  transform: translateY(-1px);
  background: var(--nx-news-surface);
}
body.builder-active .nx-clan-news-triple__upload-btn:hover {
  background: var(--nx-news-accent);
  color: var(--nx-color-button-text, #fff);
}
.nx-clan-news-triple__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s ease;
}
.nx-clan-news-triple__card:hover .nx-clan-news-triple__cover {
  transform: scale(1.04);
}
.nx-clan-news-triple__cover--placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, #ffffff 70%, transparent) 0 4.8%, transparent 5.2%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--nx-news-accent) 12%, var(--nx-news-surface) 88%) 0%,
      color-mix(in srgb, var(--nx-news-surface) 94%, #ffffff 6%) 46%,
      color-mix(in srgb, var(--nx-news-accent) 10%, var(--nx-news-surface) 90%) 100%);
}
.nx-clan-news-triple__placeholder-deco {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 38% 62% 58% 42% / 44% 38% 62% 56%;
  background: color-mix(in srgb, var(--nx-news-accent) 24%, transparent);
  filter: blur(2px);
}
.nx-clan-news-triple__placeholder-copy {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  gap: .45rem;
}
.nx-clan-news-triple__placeholder-meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nx-news-surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--nx-news-border) 88%, transparent);
  color: var(--nx-news-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.nx-clan-news-triple__placeholder-title {
  display: block;
  max-width: 80%;
  color: var(--nx-news-title);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 800;
  line-height: 1.18;
}
.nx-clan-news-triple__placeholder-lines {
  display: grid;
  gap: .42rem;
  max-width: 72%;
}
.nx-clan-news-triple__placeholder-lines i {
  display: block;
  height: .34rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nx-news-title) 18%, transparent);
}
.nx-clan-news-triple__placeholder-lines i:nth-child(1) { width: 100%; }
.nx-clan-news-triple__placeholder-lines i:nth-child(2) { width: 82%; }
.nx-clan-news-triple__placeholder-lines i:nth-child(3) { width: 62%; }
.nx-clan-news-triple__badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .4rem .8rem;
  border-radius: .65rem;
  background: var(--nx-news-accent);
  color: var(--nx-color-button-text, #ffffff);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nx-news-accent) 32%, transparent);
}
.nx-clan-news-triple__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .15rem;
  background: var(--nx-news-surface);
}
.nx-clan-news-triple__meta {
  color: var(--nx-news-muted);
  font-weight: 600;
  letter-spacing: .01em;
}
.nx-clan-news-triple__headline {
  color: var(--nx-news-title);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.nx-clan-news-triple__excerpt {
  color: var(--nx-news-muted);
  line-height: 1.55;
}
.nx-clan-news-triple__read {
  margin-top: auto;
  color: var(--nx-news-link) !important;
  letter-spacing: .08em;
}
.nx-clan-news-triple__card:hover .nx-clan-news-triple__read {
  color: color-mix(in srgb, var(--nx-news-accent) 82%, var(--nx-news-title)) !important;
}
@media (max-width: 767.98px) {
  .nx-clan-news-triple__placeholder-title,
  .nx-clan-news-triple__placeholder-lines {
    max-width: 92%;
  }
}