/* Nexpell Standard – Dark Orange */
:root {
  --nx-template-id: "nexpell_standard";
  --nx-standard-bg: var(--nx-color-surface, #111827);
  --nx-standard-surface: var(--nx-color-card-bg, #1f2937);
  --nx-standard-surface-alt: color-mix(in srgb, var(--nx-standard-surface) 82%, #000 18%);
  --nx-standard-text: var(--nx-color-on-surface, #f8fafc);
  --nx-standard-muted: var(--nx-color-muted, #cbd5e1);
  --nx-standard-border: var(--nx-color-card-border, color-mix(in srgb, var(--nx-color-primary, #f97316) 48%, transparent));
  --nx-standard-accent: var(--nx-color-primary, #f97316);
  --nx-standard-accent-hover: var(--nx-color-link-hover, #fb923c);
  --nx-standard-radius: var(--nx-component-radius, 14px);
  --nx-starter-chrome-bg: var(--nx-color-secondary, #111827);
  --nx-starter-footer-bg: var(--nx-starter-chrome-bg);
  --nx-starter-footer-border: color-mix(in srgb, var(--nx-standard-text) 14%, transparent);
  --nx-starter-footer-text: var(--nx-standard-text);
  --nx-starter-footer-muted: var(--nx-standard-muted);
  --nx-page-head-background: var(--nx-standard-surface);
  --nx-page-head-pattern: linear-gradient(166deg, transparent 0 70%, color-mix(in srgb, var(--nx-standard-accent) 28%, transparent) 70.1% 70.25%, transparent 70.35%), linear-gradient(12deg, transparent 0 72%, color-mix(in srgb, var(--nx-standard-accent) 18%, transparent) 72.1% 72.25%, transparent 72.35%), linear-gradient(115deg, var(--nx-standard-surface) 42%, color-mix(in srgb, var(--nx-standard-surface) 88%, #fff 12%) 100%);
  --nx-page-head-pattern-position: center;
  --nx-page-head-pattern-size: cover;
  --nx-page-head-text: var(--nx-standard-text);
  --nx-page-head-title-text: var(--nx-standard-text);
  --nx-page-head-muted: var(--nx-standard-muted);
  --nx-page-head-border: var(--nx-standard-border);
  --nx-page-head-eyebrow-background: var(--nx-standard-accent-hover);
  --nx-page-head-eyebrow-text: #fff;
  --nx-page-head-title-size: clamp(2.2rem, 4vw, 3.35rem);
  --nx-page-head-title-size-mobile: 2rem;
  --nx-page-head-title-weight: 800;
  --nx-page-head-subtitle-size: 1rem;
  --nx-page-head-min-height: 17rem;
  --nx-page-head-min-height-mobile: 12rem;
  --nx-page-head-padding: clamp(2rem, 4vw, 3.25rem);
  --nx-page-head-radius: var(--nx-standard-radius);
}

html body #mainNavbar,
html body #mainNavbar.nx-tk-nav-surface-light,
html body #mainNavbar.nx-tk-nav-surface-dark {
  --nx-nav-bg: var(--nx-starter-chrome-bg);
  --nx-nav-fg: var(--nx-starter-footer-text);
  --nx-nav-surface-light-bg: var(--nx-starter-chrome-bg);
  --nx-nav-surface-light-fg: var(--nx-starter-footer-text);
  --nx-nav-surface-dark-bg: var(--nx-starter-chrome-bg);
  --nx-nav-surface-dark-fg: var(--nx-starter-footer-text);
  --nx-dd-bg: var(--nx-starter-chrome-bg);
  --nx-dd-fg: var(--nx-starter-footer-text);
  color: var(--nx-starter-footer-text);
  background-color: var(--nx-starter-chrome-bg);
}

html body #mainNavbar .navbar-brand,
html body #mainNavbar .navbar-nav .nav-link,
html body #mainNavbar #themeToggle {
  color: var(--nx-starter-footer-text);
}

html body #mainNavbar .navbar-nav .nav-link:hover,
html body #mainNavbar .navbar-nav .nav-link:focus-visible,
html body #mainNavbar .navbar-nav .nav-link.active,
html body #mainNavbar .nav-item.dropdown.show > .nav-link {
  color: var(--nx-color-link-hover);
}

html body #mainNavbar .dropdown-menu {
  color: var(--nx-starter-footer-text);
  background-color: var(--nx-starter-chrome-bg);
  border-color: var(--nx-starter-footer-border);
}

.nx-standard-hero {
  min-height: min(72vh, 760px);
  overflow: hidden;
  color: var(--nx-standard-text);
  background:
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--nx-standard-accent) 34%, transparent), transparent 38%),
    linear-gradient(135deg, var(--nx-standard-bg) 0%, var(--nx-standard-surface) 56%, color-mix(in srgb, var(--nx-standard-accent) 72%, var(--nx-standard-surface)) 100%);
}

.nx-standard-hero > .d-sm-flex {
  width: min(100%, 1320px) !important;
  min-height: inherit;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  gap: clamp(2rem, 5vw, 5rem);
}

.nx-standard-hero .nx-hero-split-text {
  flex: 1 1 46%;
  max-width: 650px;
  color: var(--nx-standard-text);
}

.nx-standard-hero .nx-hero-split-text h1 {
  color: var(--nx-standard-text);
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.nx-standard-hero .nx-hero-split-text p {
  color: var(--nx-standard-muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.nx-standard-hero .nx-hero-split-image {
  flex: 1 1 54%;
  max-width: 720px;
  padding: clamp(.65rem, 1vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--nx-standard-text) 18%, transparent);
  border-radius: var(--nx-standard-radius);
  background: color-mix(in srgb, var(--nx-standard-text) 10%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
}

.nx-standard-hero .nx-hero-split-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--nx-standard-radius) - 4px);
}

.nx-standard-benefits {
  padding-block: clamp(3.5rem, 7vw, 6rem) !important;
  color: var(--nx-standard-text);
  background: var(--nx-standard-surface-alt);
}

.nx-standard-benefits > .container {
  max-width: 1200px;
}

.nx-standard-benefits h2,
.nx-standard-steps h2,
.nx-standard-steps h3,
.nx-standard-cta h1 {
  color: var(--nx-standard-text);
}

.nx-standard-benefits > .container > p,
.nx-standard-steps > .container p {
  color: var(--nx-standard-muted) !important;
}

.nx-standard-benefits .card {
  border: 1px solid var(--nx-standard-border) !important;
  border-radius: var(--nx-standard-radius);
  color: var(--nx-standard-text);
  background: var(--nx-standard-surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .16);
}

.nx-standard-benefits .card-body {
  padding: clamp(1.35rem, 3vw, 2rem);
}

.nx-standard-benefits .card h3 {
  color: var(--nx-standard-text);
}

.nx-standard-benefits .card p {
  color: var(--nx-standard-muted) !important;
  line-height: 1.65;
}

.nx-standard-steps {
  margin: 0 !important;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  color: var(--nx-standard-text);
  background: var(--nx-standard-bg);
}

.nx-standard-steps .nx-timeline-list > .d-flex {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--nx-standard-border);
  border-radius: var(--nx-standard-radius);
  background: var(--nx-standard-surface);
}

.nx-standard-steps .nx-tk-timeline-rail {
  background: color-mix(in srgb, var(--nx-standard-accent) 42%, transparent);
}

.nx-standard-steps .rounded-circle {
  background-color: var(--nx-standard-accent);
}

.nx-standard-cta {
  margin: 0;
  color: var(--nx-standard-text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--nx-standard-surface) 86%, #000 14%), var(--nx-standard-bg));
}

.nx-standard-cta .nx-hero-inner-ink {
  max-width: 780px;
  margin-inline: auto;
}

.nx-standard-cta .nx-hero-inner-ink p {
  color: var(--nx-standard-muted);
}

.nx-standard-hero .btn-primary,
.nx-standard-cta .btn-primary {
  color: var(--nx-color-button-text, #fff);
  background-color: var(--nx-color-button-bg, var(--nx-standard-accent));
  border-color: var(--nx-color-button-border, var(--nx-standard-accent));
}

.nx-standard-hero .btn-primary:hover,
.nx-standard-hero .btn-primary:focus-visible,
.nx-standard-cta .btn-primary:hover,
.nx-standard-cta .btn-primary:focus-visible {
  color: var(--nx-color-button-hover-text, #fff);
  background-color: var(--nx-color-button-hover-bg, var(--nx-standard-accent-hover));
  border-color: var(--nx-color-button-hover-border, var(--nx-standard-accent-hover));
}

html body footer.nx-footer.nx-tk-bg-footer {
  --nx-color-footer-bg: var(--nx-starter-footer-bg);
  --nx-color-footer-border: var(--nx-starter-footer-border);
  --nx-color-footer-text: var(--nx-starter-footer-text);
  --nx-color-footer-muted: var(--nx-starter-footer-muted);
  color: var(--nx-starter-footer-text);
  background-color: var(--nx-starter-footer-bg);
  border-top-color: var(--nx-starter-footer-border);
  box-shadow: none;
}

html body footer.nx-footer.nx-tk-bg-footer h6,
html body footer.nx-footer.nx-tk-bg-footer .fw-semibold {
  color: var(--nx-starter-footer-text);
}

html body footer.nx-footer.nx-tk-bg-footer p,
html body footer.nx-footer.nx-tk-bg-footer small,
html body footer.nx-footer.nx-tk-bg-footer .small,
html body footer.nx-footer.nx-tk-bg-footer .nx-tk-text-muted,
html body footer.nx-footer.nx-tk-bg-footer [data-nx-inline="year"],
html body footer.nx-footer.nx-tk-bg-footer [data-nx-inline="copyright_text"],
html body footer.nx-footer.nx-tk-bg-footer .nx-footer-credit {
  color: var(--nx-starter-footer-muted);
}

html body footer.nx-footer.nx-tk-bg-footer a {
  color: var(--nx-color-link, var(--bs-link-color, inherit)) !important;
}

html body footer.nx-footer.nx-tk-bg-footer a:hover,
html body footer.nx-footer.nx-tk-bg-footer a:focus-visible {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, inherit)) !important;
}

html body footer.nx-footer.nx-tk-bg-footer .nx-tk-border-footer-top {
  border-color: var(--nx-starter-footer-border);
}

html body.builder-active [data-nx-zone="footer"],
html body.builder-active .nx-live-item[data-nx-key^="core_footer_"],
html body.builder-active .nx-live-item[data-nx-key^="core_footer_"] > .nx-live-content {
  color: var(--nx-starter-footer-text);
  background-color: var(--nx-starter-footer-bg);
}

html body.builder-active .nx-live-item.nx-live-active,
html body.builder-active .nx-live-item.nx-live-active > .nx-live-content {
  background-color: transparent !important;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nx-standard-accent) 58%, transparent);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .nx-standard-hero {
    min-height: auto;
  }

  .nx-standard-hero > .d-sm-flex {
    display: block !important;
    padding-block: 2.5rem;
  }

  .nx-standard-hero .nx-hero-split-text,
  .nx-standard-hero .nx-hero-split-image {
    width: 100%;
    max-width: none;
  }

  .nx-standard-hero .nx-hero-split-image {
    margin-top: 2rem;
  }

  .nx-standard-hero .nx-hero-split-text h1 {
    font-size: clamp(2.25rem, 13vw, 3.5rem);
  }

  .nx-standard-benefits,
  .nx-standard-steps {
    padding-block: 3rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-standard-hero *,
  .nx-standard-benefits *,
  .nx-standard-steps *,
  .nx-standard-cta * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Die Starter-Bereiche bilden eine durchgehende Seite ohne Zwischenstreifen. */
[data-nx-zone="content"]:has(.nx-standard-hero) {
  display: block !important;
  gap: 0 !important;
  row-gap: 0 !important;
}

body.builder-active [data-nx-zone="content"] > .nx-live-item:has(> .nx-live-content > :is(.nx-standard-hero, .nx-standard-benefits, .nx-standard-steps, .nx-standard-cta)),
body.builder-active [data-nx-zone="content"] > .nx-live-item:has(> .nx-live-content > :is(.nx-standard-hero, .nx-standard-benefits, .nx-standard-steps, .nx-standard-cta)) > .nx-live-content {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nx-standard-hero,
.nx-standard-benefits,
.nx-standard-steps,
.nx-standard-cta {
  margin-block: 0 !important;
}


/* Standard-Template: Core-HTML bringt sonst durch Bootstrap mb-3 sichtbare Zwischenstreifen mit. */
.nx-html-block,
body.builder-active [data-nx-zone="content"] > .nx-live-item,
body.builder-active [data-nx-zone="content"] > .nx-live-item > .nx-live-content {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* NEXPELL STANDARD SURFACE AND VIEWPORT CONTRACT */
/* The installed starter markup still carries legacy inline colors. The active
   template owns these surfaces and always resolves them through its tokens. */
html[data-nx-template-active="nexpell_standard"],
html[data-nx-template-active="nexpell_standard"] body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html[data-nx-template-active="nexpell_standard"],
  html[data-nx-template-active="nexpell_standard"] body {
    overflow-x: clip;
  }
}

html[data-nx-template-active="nexpell_standard"] :is(
  .sticky-footer-wrapper,
  main,
  [data-nx-zone],
  .nx-live-item,
  .nx-live-content,
  footer.nx-footer
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-nx-template-active="nexpell_standard"] footer.nx-footer {
  width: 100%;
  margin-inline: 0;
}

html[data-nx-template-active="nexpell_standard"] .nx-starter-welcome > section {
  color: var(--nx-standard-text) !important;
  background:
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--nx-standard-accent) 34%, transparent), transparent 38%),
    linear-gradient(135deg, var(--nx-standard-bg) 0%, var(--nx-standard-surface) 56%, color-mix(in srgb, var(--nx-standard-accent) 72%, var(--nx-standard-surface)) 100%) !important;
}

html[data-nx-template-active="nexpell_standard"] .nx-starter-info > section {
  color: var(--nx-standard-text) !important;
  background: var(--nx-standard-surface-alt) !important;
}

html[data-nx-template-active="nexpell_standard"] .nx-starter-steps > section {
  color: var(--nx-standard-text) !important;
  background: var(--nx-standard-bg) !important;
}

html[data-nx-template-active="nexpell_standard"] .nx-starter-cta > section {
  color: var(--nx-standard-text) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nx-standard-surface) 86%, #000 14%), var(--nx-standard-bg)) !important;
}

html[data-nx-template-active="nexpell_standard"] :is(.nx-starter-info, .nx-starter-steps, .nx-starter-cta) :is(h1, h2, h3, p) {
  color: inherit !important;
}

html[data-nx-template-active="nexpell_standard"] :is(.nx-starter-info, .nx-starter-steps, .nx-starter-cta) p {
  color: var(--nx-standard-muted) !important;
}
/* NEXPELL TEMPLATE FOOTER COLOR CONTRACT */
/* Layout remains template-specific; every footer color follows active template tokens. */
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer),
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) {
  color: var(--nx-color-footer-text, var(--nx-color-on-surface, var(--bs-body-color, #212529))) !important;
}

html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) :is(h1, h2, h3, h4, h5, h6, strong, .fw-semibold, .fw-bold, .nx-footer-title, .nx-footer-brand),
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) :is(h1, h2, h3, h4, h5, h6, strong, .fw-semibold, .fw-bold, .nx-footer-title, .nx-footer-brand) {
  color: var(--nx-color-footer-text, var(--nx-color-on-surface, var(--bs-body-color, #212529))) !important;
}

html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) :is(p, small, .small, .text-muted, .nx-tk-text-muted, .nx-footer-credit, .nx-footer-description, .nx-footer-copy, .nx-footer-copyright, .nx-gameit-footer-bottom, [data-nx-inline="year"], [data-nx-inline="copyright_text"]),
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) :is(p, small, .small, .text-muted, .nx-tk-text-muted, .nx-footer-credit, .nx-footer-description, .nx-footer-copy, .nx-footer-copyright, .nx-gameit-footer-bottom, [data-nx-inline="year"], [data-nx-inline="copyright_text"]) {
  color: var(--nx-color-footer-text, var(--nx-color-on-surface, var(--bs-body-color, #212529))) !important;
}

html body footer.nx-footer.nx-tk-bg-footer :is(a.nav-link.nx-tk-text-muted, a.nx-tk-text-muted),
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a,
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:link,
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:visited,
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:active,
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a {
  color: var(--nx-color-link, var(--nx-color-primary, var(--bs-link-color, #0d6efd))) !important;
}

html body footer.nx-footer.nx-tk-bg-footer :is(a.nav-link.nx-tk-text-muted, a.nx-tk-text-muted):hover,
html body footer.nx-footer.nx-tk-bg-footer :is(a.nav-link.nx-tk-text-muted, a.nx-tk-text-muted):focus-visible,
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:hover,
html body :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:focus-visible,
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:hover,
html body.builder-active [data-nx-zone="footer"] .nx-live-item[data-nx-key] .nx-live-content :is(footer.nx-footer, .nx-footer, .nx-gameit-footer) a:focus-visible {
  color: var(--nx-color-link-hover, var(--nx-color-link, var(--nx-color-primary, var(--bs-link-hover-color, #0a58ca)))) !important;
}