/* ==========================================================================
   NINEXA
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2?v=1") format("woff2-variations"),
       url("/assets/fonts/archivo-var.woff2?v=1") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-var.woff2?v=1") format("woff2-variations"),
       url("/assets/fonts/jost-var.woff2?v=1") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header .app-nav {
  --nxh-band: #0A1533;
  --nxh-leiste: #070F2C;
  --nxh-linie: #1E2A50;
  --nxh-text: #B9C3D8;
  --nxh-hell: #F7F7F8;
  --nxh-eis: #5CD6FF;
  --svg-icon-color-1: #5CD6FF;
  --svg-icon-color-2: #009AFF;
  --svg-icon-color-3: #F7F7F8;
  --svg-icon-color-4: #0A1533;
}
header .app-nav.app-nav-default {
  background: transparent;
}
header .app-nav .app-nav-header {
  background: var(--nxh-leiste);
  border-bottom: 1px solid var(--nxh-linie);
}
header .app-nav .app-nav-menu.app-nav-menu-default,
header .app-nav .app-nav-menu {
  background: var(--nxh-band);
  border-bottom: 1px solid var(--nxh-linie);
}
header .app-nav .logo,
header .app-nav .logo-text {
  color: var(--nxh-hell);
  text-decoration: none;
}
header .app-nav .logo:hover,
header .app-nav .logo-text:hover {
  color: var(--nxh-eis);
}
header .app-nav .logo img {
  filter: none;
  max-height: 40px;
  width: auto;
}
header .app-nav .top-nav > li > a,
header .app-nav .top-nav > li > a i,
header .app-nav .top-nav > li > a .lm,
header .app-nav .top-nav > li > a svg {
  color: var(--nxh-text);
  fill: currentColor;
}
header .app-nav .top-nav > li > a:hover,
header .app-nav .top-nav > li > a:hover i,
header .app-nav .top-nav > li > a:hover .lm,
header .app-nav .top-nav > li > a:focus {
  color: var(--nxh-eis);
}
header .app-nav .menu-primary > li > a,
header .app-nav .menu-primary > li > a .item-text,
header .app-nav .menu-primary > li > a .ls-caret,
header .app-nav .menu-primary > li > a b {
  color: var(--nxh-hell);
}
header .app-nav .menu-primary > li > a:hover,
header .app-nav .menu-primary > li > a:hover .item-text,
header .app-nav .menu-primary > li > a:hover .ls-caret,
header .app-nav .menu-primary > li > a:focus .item-text,
header .app-nav .menu-primary > li.active > a .item-text,
header .app-nav .menu-primary > li.open > a .item-text {
  color: var(--nxh-eis);
}
header .app-nav .menu-primary .dropdown-menu {
  background: var(--nxh-leiste);
  border: 1px solid var(--nxh-linie);
  box-shadow: 0 24px 60px rgba(2, 5, 16, .55);
}
header .app-nav .menu-primary .dropdown-menu > li > a,
header .app-nav .menu-primary .dropdown-menu .menu-item-title {
  color: var(--nxh-text);
}
header .app-nav .menu-primary .dropdown-menu > li > a:hover,
header .app-nav .menu-primary .dropdown-menu > li > a:hover .menu-item-title,
header .app-nav .menu-primary .dropdown-menu > li > a:focus .menu-item-title {
  color: var(--nxh-eis);
  background: rgba(247, 247, 248, .07);
}
header .app-nav .menu-primary .btn.btn-primary {
  background: var(--nxh-eis);
  border-color: var(--nxh-eis);
  color: var(--nxh-leiste);
}
header .app-nav .menu-primary .btn.btn-primary:hover,
header .app-nav .menu-primary .btn.btn-primary:focus {
  background: var(--nxh-hell);
  border-color: var(--nxh-hell);
  color: var(--nxh-leiste);
}
header .app-nav .menu-primary .btn.btn-primary span {
  color: inherit;
}
header .app-nav .app-nav-toggle .icon-bar {
  background: var(--nxh-hell);
}
header .app-nav .app-nav-toggle:hover .icon-bar {
  background: var(--nxh-eis);
}
header .app-nav :focus-visible {
  outline: 2px solid var(--nxh-eis);
  outline-offset: 3px;
}
header .app-nav .tooltip-inner {
  background: var(--nxh-leiste);
  color: var(--nxh-hell);
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
.nx-root {
  --nx-grund-oben: #04091E;
  --nx-grund-mitte: #0A1533;
  --nx-grund-unten: #050B22;
  --nx-tinte: #F7F7F8;
  --nx-tinte-linie: #1E2A50;
  --nx-tinte-text: #B9C3D8;
  --nx-akzent: #5CD6FF;
  --nx-akzent-text: #5CD6FF;
  --nx-akzent-flaeche: #0B2E52;
  --nx-eis: #5CD6FF;
  --nx-signal: #009AFF;
  --nx-verlauf: linear-gradient(45deg, #003CB2 0%, #009AFF 52%, #5CD6FF 100%);
  --nx-dunkel: #070F2C;
  --nx-stahl: #8792AC;
  --nx-stahl-hell: #B9C3D8;
  --nx-nebel: #1E2A50;
  --nx-nebel-tief: #0D1631;
  --nx-papier: #F7F7F8;
  --nx-karte: #101A3A;
  --nx-erfolg: #35D6A0;
  --nx-display: "Archivo", "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Helvetica, Arial, sans-serif;
  --nx-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Helvetica Neue", Arial, sans-serif;
  --nx-mono: "Jost", "Archivo", "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --nx-max: 1180px;
  --nx-gap: 26px;
  --nx-pad: 22px;
  --nx-radius: 0px;
  --nx-radius-sm: 0px;
  --nx-shadow: none;
  --nx-shadow-lg: 6px 6px 0 var(--nx-tinte);
  --nx-feld: radial-gradient(1500px 1000px at 96% -34%,
      rgba(0, 154, 255, .30) 0%,
      rgba(0, 138, 235, .19) 22%,
      rgba(0, 108, 205, .10) 44%,
      rgba(0, 72, 180, .04) 64%,
      rgba(0, 60, 178, 0) 82%),
    radial-gradient(1200px 820px at -16% 122%,
      rgba(92, 214, 255, .11) 0%,
      rgba(0, 154, 255, .06) 34%,
      rgba(0, 60, 178, .02) 58%,
      rgba(0, 60, 178, 0) 78%),
    linear-gradient(180deg,
      rgba(247, 247, 248, .04) 0%,
      rgba(247, 247, 248, .012) 18%,
      rgba(247, 247, 248, 0) 38%);
  --nx-feld-ruhig: radial-gradient(1300px 860px at 88% -28%,
      rgba(0, 154, 255, .14) 0%,
      rgba(0, 120, 215, .07) 34%,
      rgba(0, 60, 178, .02) 60%,
      rgba(0, 60, 178, 0) 80%),
    linear-gradient(180deg,
      rgba(247, 247, 248, .028) 0%,
      rgba(247, 247, 248, 0) 32%);
  --nx-feld-klein: radial-gradient(420px 300px at 96% -26%,
      rgba(92, 214, 255, .20) 0%,
      rgba(92, 214, 255, .09) 38%,
      rgba(0, 154, 255, .03) 62%,
      rgba(0, 154, 255, 0) 80%);
  --nx-feld-hell: none;
  --nx-ease: cubic-bezier(.4, 0, .2, 1);
}
.nx-root {
  background-color: var(--nx-grund-mitte);
  background-image: linear-gradient(172deg,
  var(--nx-grund-oben) 0%,
  var(--nx-grund-mitte) 44%,
  var(--nx-grund-unten) 100%);
  background-attachment: fixed;
  font-family: var(--nx-body);
  color: var(--nx-tinte-text);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   GRUNDLAGEN
   ========================================================================== */
.nx-root *,
.nx-root *::before,
.nx-root *::after {
  box-sizing: border-box;
}
.nx-root [hidden] {
  display: none !important;
}
.nx-root img {
  max-width: 100%;
  height: auto;
  display: block;
}
.nx-root a {
  color: var(--nx-akzent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.nx-root a:hover {
  color: var(--nx-tinte);
}
.nx-root :focus-visible {
  outline: 2px solid var(--nx-akzent);
  outline-offset: 3px;
  border-radius: 4px;
}
.nx-root p {
  margin: 0 0 1em;
}
.nx-root p:last-child {
  margin-bottom: 0;
}
.nx-root ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-root blockquote {
  margin: 0;
  padding: 0;
  quotes: none;
  border: 0;
}
.nx-root blockquote::before,
.nx-root blockquote::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ==========================================================================
   CONTAINER UND ABSCHNITTE
   ========================================================================== */
.nx-root .hs-wrap {
  width: 100%;
  max-width: var(--nx-max);
  margin-inline: auto;
  padding-inline: var(--nx-pad);
}
.nx-root .hs-sec {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background-color: transparent;
}
.nx-root .hs-sec--surface {
  background-color: transparent;
  background-image: linear-gradient(158deg,
  rgba(247, 247, 248, .05) 0%,
  rgba(247, 247, 248, .01) 46%,
  rgba(92, 214, 255, .05) 100%);
  border-block: 1px solid var(--nx-tinte-linie);
}
.nx-root .hs-sec > .hs-wrap {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */
.nx-root .hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nx-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  margin-bottom: 16px;
}
.nx-root .hs-eyebrow::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--nx-akzent);
}
.nx-root .hs-h1 {
  font-family: var(--nx-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--nx-tinte);
  margin: 0 0 20px;
}
.nx-root .hs-h2 {
  font-family: var(--nx-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--nx-tinte);
  margin: 0 0 16px;
}
.nx-root .hs-h3 {
  font-family: var(--nx-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--nx-tinte);
  margin: 0 0 8px;
}
.nx-root .hs-lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--nx-tinte-text);
  margin: 0;
}
.nx-root .hs-head {
  margin-bottom: 44px;
  max-width: 760px;
}
.nx-root .hs-head.hs-narrow {
  max-width: 620px;
}
.nx-root .hs-foot {
  margin-top: 30px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--nx-stahl);
  max-width: 900px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.nx-root .hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--nx-radius-sm);
  font-family: var(--nx-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--nx-ease),
  border-color .18s var(--nx-ease),
  color .18s var(--nx-ease),
  transform .18s var(--nx-ease),
  box-shadow .18s var(--nx-ease);
}
.nx-root .hs-btn:hover {
  transform: translateY(-1px);
}
.nx-root .hs-btn:active {
  transform: translateY(0);
}
.nx-root .hs-btn--primary {
  background: var(--nx-tinte);
  border-color: var(--nx-tinte);
  color: var(--nx-papier);
  box-shadow: 4px 4px 0 var(--nx-akzent-flaeche);
}
.nx-root .hs-btn--primary:hover {
  background: var(--nx-akzent);
  border-color: var(--nx-akzent);
  color: var(--nx-papier);
  box-shadow: 4px 4px 0 var(--nx-tinte);
}
.nx-root .hs-btn--ghost {
  background: transparent;
  border-color: var(--nx-nebel);
  color: var(--nx-tinte);
}
.nx-root .hs-btn--ghost:hover {
  border-color: var(--nx-akzent);
  color: var(--nx-akzent-text);
  background: var(--nx-akzent-flaeche);
}
.nx-root .hs-btn--block {
  display: flex;
  width: 100%;
}
.nx-root .hs-linkbtn {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-family: var(--nx-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--nx-stahl);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nx-root .hs-linkbtn:hover {
  color: var(--nx-akzent-text);
}
.nx-root .hs-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 26px 18px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.nx-root .hs-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background-color: var(--nx-tinte);
  background-image: var(--nx-feld);
  color: #B9C3D8;
}
.nx-root .hs-hero .hs-h1 {
  color: var(--nx-papier);
}
.nx-root .hs-hero .hs-lead {
  color: #B9C3D8;
}
.nx-root .hs-hero .hs-eyebrow {
  color: var(--nx-eis);
}
.nx-root .hs-hero .hs-eyebrow::before {
  border-bottom-color: var(--nx-eis);
}
.nx-root .hs-hero .hs-stars {
  color: var(--nx-eis);
}
.nx-root .hs-hero .hs-rating {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-hero .hs-rating b {
  color: var(--nx-papier);
}
.nx-root .hs-hero .hs-rating a,
.nx-root .hs-hero .hs-hero-hint a {
  color: var(--nx-eis);
}
.nx-root .hs-hero .hs-hero-hint {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-hero :focus-visible {
  outline-color: var(--nx-eis);
}
.nx-root .hs-hero .hs-btn--primary {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-tinte);
  box-shadow: 5px 5px 0 rgba(92, 214, 255, .28);
}
.nx-root .hs-hero .hs-btn--primary:hover {
  background: var(--nx-papier);
  border-color: var(--nx-papier);
  color: var(--nx-tinte);
  box-shadow: 5px 5px 0 rgba(247, 247, 248, .30);
}
.nx-root .hs-hero .hs-btn--ghost {
  border-color: var(--nx-tinte-linie);
  color: var(--nx-papier);
}
.nx-root .hs-hero .hs-btn--ghost:hover {
  border-color: var(--nx-eis);
  color: var(--nx-eis);
  background: rgba(92, 214, 255, .10);
}
.nx-root .hs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.nx-root .hs-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: .92rem;
  color: var(--nx-stahl);
}
.nx-root .hs-rating b {
  color: var(--nx-tinte);
}
.nx-root .hs-stars {
  color: var(--nx-akzent);
  letter-spacing: 2px;
  font-size: 1rem;
  line-height: 1;
}
.nx-root .hs-hero-hint {
  font-size: .9rem;
  color: var(--nx-stahl);
  margin: 0 0 26px;
}
.nx-root .hs-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: start;
  gap: 12px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root .hs-trust li {
  position: relative;
  padding-left: 19px;
  font-size: .89rem;
  font-weight: 500;
  color: var(--nx-papier);
}
.nx-root .hs-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-eis);
}

.nx-home .nx-hero-price{
  margin:16px 0 0; font-size:.95rem; font-weight:600;
}
.nx-home .nx-hero-price a{ white-space:nowrap; }

/* ==========================================================================
   SCHICHTENSTAPEL IM HERO
   ========================================================================== */
.nx-home .nx-stack{
  display:block; width:100%; max-width:400px; margin:0 auto;
  align-self:center;
}

.nx-home .nx-stack-top{
  width:68%; margin:0 auto 12px; padding:20px 22px;
  border-radius:0; text-align:center; position:relative;
  border:1px solid rgba(92,214,255,.55); background:rgba(0,154,255,.16);
}
.nx-home .nx-stack-top b{ display:block; margin-bottom:3px; font-size:1.08rem; }
.nx-home .nx-stack-top span{
  display:block; font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#5CD6FF;
}

.nx-home .nx-stack-link{
  margin:0 0 12px; text-align:center;
  font-size:.84rem; color:rgba(92,214,255,.55);
}

.nx-home .nx-stack-layer{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 auto 8px; padding:12px 18px; border-radius:0;
  border:1px solid rgba(92,214,255,.22); background:rgba(0,154,255,.07);
  border-left:3px solid rgba(92,214,255,.45);
}
.nx-home .nx-stack-layer span{ font-size:.94rem; }
.nx-home .nx-stack-layer em{ font-style:normal; font-size:.82rem; opacity:.6; }

.nx-home .nx-stack-layer--1{ width:75%; }
.nx-home .nx-stack-layer--2{ width:80%; }
.nx-home .nx-stack-layer--3{ width:85%; }
.nx-home .nx-stack-layer--4{ width:90%; }
.nx-home .nx-stack-layer--5{ width:95%; margin-bottom:8px; }

.nx-home .nx-stack-base{
  position:relative; width:100%;
  padding:12px; border-radius:0; text-align:center;
  font-family:var(--nx-mono);
  font-size:.68rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:#5CD6FF;
  border:1px solid rgba(92,214,255,.3); background:rgba(0,60,178,.35);
}

@media (prefers-reduced-motion:no-preference){
  .nx-home .nx-stack-top,
  .nx-home .nx-stack-link,
  .nx-home .nx-stack-layer,
  .nx-home .nx-stack-base{
    opacity:0; animation:nx-stack-in .5s ease-out forwards;
  }
  .nx-home .nx-stack-top{ animation-delay:.05s; }
  .nx-home .nx-stack-link{ animation-delay:.20s; }
  .nx-home .nx-stack-layer--1{ animation-delay:.32s; }
  .nx-home .nx-stack-layer--2{ animation-delay:.42s; }
  .nx-home .nx-stack-layer--3{ animation-delay:.52s; }
  .nx-home .nx-stack-layer--4{ animation-delay:.62s; }
  .nx-home .nx-stack-layer--5{ animation-delay:.72s; }
  .nx-home .nx-stack-base{ animation-delay:.84s; }

  .nx-home .nx-stack-top::after,
  .nx-home .nx-stack-layer::after,
  .nx-home .nx-stack-base::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    border:1px solid rgba(92,214,255,.6); opacity:0;
    animation:nx-stack-pulse 8s ease-out infinite;
    pointer-events:none;
  }
  .nx-home .nx-stack-top::after{ animation-delay:2.2s; }
  .nx-home .nx-stack-layer--1::after{ animation-delay:2.55s; }
  .nx-home .nx-stack-layer--2::after{ animation-delay:2.90s; }
  .nx-home .nx-stack-layer--3::after{ animation-delay:3.25s; }
  .nx-home .nx-stack-layer--4::after{ animation-delay:3.60s; }
  .nx-home .nx-stack-layer--5::after{ animation-delay:3.95s; }
  .nx-home .nx-stack-base::after{ animation-delay:4.30s; }
}

@keyframes nx-stack-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes nx-stack-pulse{
  0%   { opacity:0; }
  3%   { opacity:1; }
  12%  { opacity:0; }
  100% { opacity:0; }
}

@media (max-width:860px){
  .nx-home .nx-stack{ max-width:340px; margin-top:28px; }
}

/* ==========================================================================
   REFERENZEN
   ========================================================================== */
.nx-root .hs-refs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--nx-gap);
}
.nx-root .hs-ref {
  display: flex;
  flex-direction: column;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s var(--nx-ease),
  box-shadow .22s var(--nx-ease),
  border-color .22s var(--nx-ease);
}
.nx-root .hs-ref:hover {
  transform: translate(-3px, -3px);
  border-color: var(--nx-akzent);
  box-shadow: 6px 6px 0 var(--nx-akzent);
  color: inherit;
}
.nx-root .hs-ref-shot {
  aspect-ratio: 16 / 10;
  background: var(--nx-akzent-flaeche);
  overflow: hidden;
}
.nx-root .hs-ref-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--nx-ease);
}
.nx-root .hs-ref:hover .hs-ref-shot img {
  transform: scale(1.04);
}
.nx-root .hs-ref-body {
  padding: 22px 22px 26px;
}
.nx-root .hs-ref-tag {
  display: inline-block;
  margin-bottom: 11px;
  font-family: var(--nx-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-akzent-text);
}
.nx-root .hs-ref-body h3 {
  font-family: var(--nx-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--nx-tinte);
  margin: 0 0 8px;
}
.nx-root .hs-ref-body p {
  font-size: .93rem;
  line-height: 1.58;
  color: var(--nx-tinte-text);
  margin: 0;
}
/* ==========================================================================
   VORGEHEN
   ========================================================================== */
.nx-root .hs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--nx-gap);
}
.nx-root .hs-step {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
}
.nx-root .hs-step-n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--nx-tinte);
  color: var(--nx-papier);
  font-family: var(--nx-mono);
  font-size: .95rem;
  font-weight: 500;
}
.nx-root .hs-step:first-child .hs-step-n {
  background: var(--nx-eis);
  color: var(--nx-tinte);
}
.nx-root .hs-step p {
  font-size: .93rem;
  line-height: 1.58;
  color: var(--nx-tinte-text);
  margin: 0;
}
.nx-root .hs-details {
  margin-top: 34px;
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
  background: var(--nx-karte);
  overflow: hidden;
}
.nx-root .hs-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--nx-tinte);
  display: flex;
  align-items: center;
  gap: 11px;
}
.nx-root .hs-details > summary::-webkit-details-marker {
  display: none;
}
.nx-root .hs-details > summary::before {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nx-akzent-flaeche);
  color: var(--nx-akzent-text);
  font-family: var(--nx-mono);
  font-size: .95rem;
  line-height: 1;
}
.nx-root .hs-details[open] > summary::before {
  content: "–";
}
.nx-root .hs-details > summary:hover {
  color: var(--nx-akzent-text);
}
.nx-root .hs-details-body {
  padding: 22px 22px 26px;
  border-top: 1px solid var(--nx-nebel);
}
.nx-root .hs-details-body > p {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--nx-stahl);
}
.nx-root .hs-timeline {
  display: grid;
  gap: 2px;
  counter-reset: nx-tl;
}
.nx-root .hs-timeline li {
  position: relative;
  counter-increment: nx-tl;
  padding: 12px 0 12px 46px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--nx-tinte-text);
  border-bottom: 1px dashed var(--nx-nebel);
}
.nx-root .hs-timeline li:last-child {
  border-bottom: 0;
}
.nx-root .hs-timeline li::before {
  content: counter(nx-tl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--nx-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--nx-akzent-text);
}
.nx-root .hs-timeline li b {
  display: block;
  color: var(--nx-tinte);
  font-size: .95rem;
  margin-bottom: 2px;
}
.nx-root #vorgehen {
  background-color: var(--nx-tinte);
  background-image: var(--nx-feld);
  border-block: 0;
}
.nx-root #vorgehen::before {
  color: var(--nx-eis);
  opacity: .14;
}
.nx-root #vorgehen .hs-h2 {
  color: var(--nx-papier);
}
.nx-root #vorgehen .hs-lead {
  color: #B9C3D8;
}
.nx-root #vorgehen .hs-eyebrow {
  color: var(--nx-eis);
}
.nx-root #vorgehen .hs-eyebrow::before {
  border-bottom-color: var(--nx-eis);
}
.nx-root #vorgehen .hs-lead a,
.nx-root #vorgehen .hs-step p a {
  color: var(--nx-eis);
}
.nx-root #vorgehen :focus-visible {
  outline-color: var(--nx-eis);
}
.nx-root #vorgehen .hs-step {
  background: transparent;
  border-color: var(--nx-tinte-linie);
}
.nx-root #vorgehen .hs-step .hs-h3 {
  color: var(--nx-papier);
}
.nx-root #vorgehen .hs-step p {
  color: #B9C3D8;
}
.nx-root #vorgehen .hs-step-n {
  background: transparent;
  border: 1px solid var(--nx-tinte-linie);
  color: var(--nx-papier);
}
.nx-root #vorgehen .hs-step:first-child .hs-step-n {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-tinte);
}
.nx-root #vorgehen .hs-details {
  background: transparent;
  border-color: var(--nx-tinte-linie);
}
.nx-root #vorgehen .hs-details > summary {
  color: var(--nx-papier);
}
.nx-root #vorgehen .hs-details > summary:hover {
  color: var(--nx-eis);
}
.nx-root #vorgehen .hs-details > summary::before {
  background: var(--nx-eis);
  color: var(--nx-tinte);
}
.nx-root #vorgehen .hs-details-body {
  border-top-color: var(--nx-tinte-linie);
}
.nx-root #vorgehen .hs-details-body > p,
.nx-root #vorgehen .hs-timeline li {
  color: #B9C3D8;
}
.nx-root #vorgehen .hs-timeline li {
  border-bottom-color: var(--nx-tinte-linie);
}
.nx-root #vorgehen .hs-timeline li b {
  color: var(--nx-papier);
}
.nx-root #vorgehen .hs-timeline li::before {
  color: var(--nx-eis);
}

/* ==========================================================================
   PREISE
   ========================================================================== */
.nx-root .hs-switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.nx-root .hs-switch-hint {
  font-family: var(--nx-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  transition: opacity .3s var(--nx-ease);
}
.nx-root .hs-switch-row:has(.hs-switch.is-touched) .hs-switch-hint {
  opacity: 0;
}
.nx-root .hs-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--nx-nebel-tief);
  border: 1px solid var(--nx-nebel);
}
.nx-root .hs-sec--surface .hs-switch {
  background: var(--nx-karte);
}
.nx-root .hs-switch button {
  border: 0;
  background: transparent;
  padding: 10px 22px;
  font-family: var(--nx-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--nx-stahl);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--nx-ease), color .2s var(--nx-ease);
}
.nx-root .hs-switch button:hover {
  color: var(--nx-tinte);
}
.nx-root .hs-switch button.is-active {
  background: var(--nx-tinte);
  color: var(--nx-papier);
}
.nx-root .hs-switch--3 button {
  padding-inline: 14px;
  font-size: .88rem;
  white-space: nowrap;
}
.nx-root .hs-pane-note {
  max-width: 780px;
  margin: 0 0 32px;
  font-size: .98rem;
  line-height: 1.62;
  color: var(--nx-tinte-text);
}

.nx-home .nx-flow{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
  margin:26px 0 8px;
}
.nx-home .nx-flow-step{
  flex:1 1 200px; min-width:180px; position:relative;
  padding:16px 18px; border-radius:14px;
  border:1px solid rgba(92,214,255,.24); background:rgba(0,154,255,.06);
}
.nx-home .nx-flow-step--res{
  border-style:dashed; border-color:rgba(92,214,255,.42);
  background:rgba(0,154,255,.12);
}
.nx-home .nx-flow-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-bottom:8px; border-radius:50%;
  font-size:.78rem; font-weight:700; line-height:1;
  background:#009AFF; color:#fff;
}
.nx-home .nx-flow-step b{ display:block; margin-bottom:3px; }
.nx-home .nx-flow-txt{ display:block; font-size:.86rem; opacity:.78; }
.nx-home .nx-flow-op{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 28px; font-size:1.6rem; font-weight:700; line-height:1; color:#5CD6FF;
}
.nx-home .nx-flow-note{ margin:0 0 6px; font-size:.86rem; opacity:.75; }

.nx-home .nx-save{
  display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  background:rgba(0,154,255,.16); color:#5CD6FF;
}
.nx-home .nx-plans .nx-num{ white-space:nowrap; }
.nx-home .nx-plans .nx-pick{ background:rgba(0,154,255,.07); }
.nx-home .nx-plans th.nx-pick{ background:rgba(0,154,255,.12); }
.nx-home .nx-pick-tag{
  display:block; margin-top:3px; font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#5CD6FF;
}
.nx-home .nx-yearbox{
  margin-top:24px; padding:18px 22px; border-radius:14px;
  border:1px solid rgba(92,214,255,.28); background:rgba(0,154,255,.07);
}
.nx-home .nx-yearbox b{ display:block; margin-bottom:5px; }
.nx-home .nx-yearbox p{ margin:0; }

.nx-home .nx-join{
  display:flex; align-items:center; gap:14px;
  margin:30px 0 26px; padding:16px 20px; border-radius:14px;
  border:1px dashed rgba(92,214,255,.38); background:rgba(0,154,255,.06);
}
.nx-home .nx-join-op{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  font-size:1.35rem; font-weight:700; line-height:1;
  background:#009AFF; color:#fff;
}
.nx-home .nx-join p{ margin:0; }

.nx-home .nx-sum{ margin-top:26px; }
.nx-home .nx-sum-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.nx-home .nx-sum-op{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  font-size:1.35rem; font-weight:700; line-height:1;
  background:rgba(92,214,255,.2); color:#5CD6FF;
}
.nx-home .nx-sum-head b{ display:block; }
.nx-home .nx-sum-head p{ margin:2px 0 0; font-size:.88rem; opacity:.75; }
.nx-home .nx-sum-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.nx-home .nx-sum-card{
  padding:18px 20px; border-radius:14px;
  border:1px solid rgba(92,214,255,.24); background:rgba(0,154,255,.05);
}
.nx-home .nx-sum-card--pick{
  border-color:rgba(92,214,255,.5); background:rgba(0,154,255,.1);
}
.nx-home .nx-sum-tag{
  display:block; margin-bottom:12px; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#5CD6FF;
}
.nx-home .nx-sum-calc{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 8px;
}
.nx-home .nx-sum-calc i{
  font-style:normal; font-weight:700; color:#5CD6FF; min-width:12px;
}
.nx-home .nx-sum-calc b{ font-size:1.18rem; white-space:nowrap; }
.nx-home .nx-sum-calc small{ font-size:.82rem; opacity:.75; }
.nx-home .nx-sum-calc--tot{
  margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(92,214,255,.24);
}
.nx-home .nx-sum-calc--tot b{ font-size:1.4rem; color:#5CD6FF; }
.nx-home .nx-sum-note{ margin:10px 0 0; font-size:.84rem; opacity:.75; }

/* ==========================================================================
   PAKETKARTEN
   ========================================================================== */
.nx-root .hs-base-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-gap);
  align-items: start;
  margin-top: 24px;
}
.nx-root .hs-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--nx-gap);
  align-items: start;
}
.nx-root .hs-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
}
.nx-root .hs-tier--feature {
  border: 2px solid var(--nx-tinte);
  box-shadow: 7px 7px 0 var(--nx-eis);
}
.nx-root .hs-tier-badge {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  background: var(--nx-eis);
  box-shadow: 0 0 0 1px var(--nx-tinte);
  color: var(--nx-tinte);
  font-family: var(--nx-mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nx-root .hs-tier > h3 {
  font-family: var(--nx-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--nx-tinte);
  margin: 0 0 6px;
}
.nx-root .hs-tier-sub {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--nx-stahl);
  margin: 0 0 20px;
  min-height: 2.6em;
}
.nx-root .hs-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--nx-tinte);
}
.nx-root .hs-price small {
  font-family: var(--nx-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root .hs-price b {
  font-family: var(--nx-display);
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  font-feature-settings: "tnum" 1;
}
.nx-root .hs-price span {
  font-size: .88rem;
  font-weight: 500;
  color: var(--nx-stahl);
}
.nx-root .hs-price-note {
  margin: 8px 0 22px;
  font-family: var(--nx-mono);
  font-size: .68rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--nx-stahl);
}
.nx-root .hs-feat {
  display: grid;
  gap: 11px;
  margin-bottom: 26px;
}
.nx-root .hs-feat li {
  position: relative;
  padding-left: 26px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--nx-tinte-text);
}
.nx-root .hs-feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23009AFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E")
  center / 15px no-repeat;
}
.nx-root .hs-feat li i {
  display: block;
  font-style: normal;
  font-size: .79rem;
  line-height: 1.45;
  color: var(--nx-stahl);
  margin-top: 2px;
}
.nx-root .hs-feat--minus li {
  color: var(--nx-stahl);
}
.nx-root .hs-feat--minus li::before {
  content: "–";
  background: none;
  color: var(--nx-stahl);
  font-family: var(--nx-mono);
  font-size: .95rem;
  line-height: 16px;
  text-align: center;
  top: .22em;
}
.nx-root .hs-tier .hs-btn {
  margin-top: auto;
}

.nx-home .nx-plus-note{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin:14px 0 16px; padding:12px 14px; border-radius:12px;
  font-size:.9rem; font-weight:600; line-height:1.4;
  border:1px dashed rgba(92,214,255,.38); background:rgba(0,154,255,.07);
}
.nx-home .nx-plus-note i{
  flex:1 0 100%; font-style:normal; font-weight:400;
  font-size:.82rem; opacity:.72;
}
.nx-home .nx-plus-op{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  font-size:.9rem; line-height:1; background:#009AFF; color:#fff;
}

.nx-home .hs-tiers{ align-items:stretch; }
.nx-home .hs-tier{ display:flex; flex-direction:column; }
.nx-home .hs-tier .nx-plus-note{ margin-top:auto; }
.nx-home .hs-tier .hs-btn--block{ margin-top:0; }
.nx-home .hs-tier .nx-pay + .hs-btn--block{ margin-top:0; }

/* ------------------------------------------------- Zahlungswege Base ---- */
.nx-root .hs-tier .nx-pay {
  margin-top: auto;
  margin-bottom: 16px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(92, 214, 255, .28);
  border-radius: 0;
  background: rgba(92, 214, 255, .06);
}

.nx-root .hs-tier .nx-pay-head {
  margin: 0 0 8px;
  font-family: "Jost", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-eis, #5CD6FF);
}

.nx-root .hs-tier .nx-pay-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
  padding: 9px 0;
}
.nx-root .hs-tier .nx-pay-row:first-of-type { padding-top: 2px; }
.nx-root .hs-tier .nx-pay-row:last-of-type  { padding-bottom: 0; }

.nx-root .hs-tier .nx-pay-row + .nx-pay-row {
  border-top: 1px solid rgba(92, 214, 255, .18);
}

.nx-root .hs-tier .nx-pay-key {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--nx-eis, #5CD6FF);
  color: var(--nx-nacht, #070F2C);
  font-family: "Jost", sans-serif;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
}

.nx-root .hs-tier .nx-pay-val {
  font-size: .98rem;
  line-height: 1.35;
}

.nx-root .hs-tier .nx-pay-val b {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
}

.nx-root .hs-tier .nx-pay-val i {
  margin: 0 4px;
  font-style: normal;
  opacity: .55;
}

.nx-root .hs-tier .nx-pay-sub {
  font-size: .82rem;
  line-height: 1.45;
  opacity: .7;
}

/* ==========================================================================
   CLASSIC
   ========================================================================== */
.nx-root .hs-classic-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 30px 28px;
  margin-bottom: 44px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-left: 3px solid var(--nx-akzent);
  border-radius: var(--nx-radius);
}
.nx-root .hs-classic-lead > p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
  margin: 0;
}
.nx-root .hs-subhead {
  font-family: var(--nx-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--nx-tinte);
  margin: 0 0 6px;
}
.nx-root .hs-subnote {
  font-size: .92rem;
  color: var(--nx-stahl);
  margin: 0 0 28px;
}

/* ==========================================================================
   FRAGEBOGEN
   ========================================================================== */
.nx-root .hs-quiz {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 38px);
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  box-shadow: 6px 6px 0 var(--nx-nebel);
}
.nx-root .hs-quiz-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--nx-nebel);
  overflow: hidden;
}
.nx-root .hs-quiz-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--nx-akzent);
  transition: width .35s var(--nx-ease);
}
.nx-root .hs-quiz-step {
  margin: 14px 0 0;
  font-family: var(--nx-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root .hs-quiz-frage {
  font-family: var(--nx-display);
  font-size: clamp(1.42rem, 2.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.03em;
  color: var(--nx-tinte);
  margin: 12px 0 6px;
}
.nx-root .hs-quiz-hilfe {
  font-size: .89rem;
  color: var(--nx-stahl);
  margin: 0 0 20px;
}
.nx-root .hs-quiz-frage + .hs-quiz-opts {
  margin-top: 22px;
}
.nx-root .hs-quiz-opts {
  display: grid;
  gap: 10px;
}
.nx-root .hs-quiz-opts--2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nx-root .hs-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 15px 17px;
  text-align: left;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius-sm);
  font-family: var(--nx-body);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--nx-tinte);
  cursor: pointer;
  transition: border-color .16s var(--nx-ease),
  background-color .16s var(--nx-ease),
  box-shadow .16s var(--nx-ease);
}
.nx-root .hs-opt:hover {
  border-color: var(--nx-akzent);
  background: var(--nx-akzent-flaeche);
}
.nx-root .hs-opt.is-on {
  border-color: var(--nx-akzent);
  background: var(--nx-akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--nx-akzent);
}
.nx-root .hs-opt-mark {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: .16em;
  border: 1.5px solid #B9C3D8;
  border-radius: 50%;
  background: var(--nx-karte);
  transition: border-color .16s var(--nx-ease), background-color .16s var(--nx-ease);
}
.nx-root .hs-opt-mark.is-multi {
  border-radius: 5px;
}
.nx-root .hs-opt.is-on .hs-opt-mark {
  border-color: var(--nx-tinte);
  background: var(--nx-tinte)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235CD6FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2 6.6-6.6'/%3E%3C/svg%3E")
  center / 12px no-repeat;
}
.nx-root .hs-opt-txt {
  flex: 1;
}
.nx-root .hs-quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--nx-nebel);
}
.nx-root .hs-quiz-nav .hs-btn {
  margin-left: auto;
}
.nx-root .hs-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   ERGEBNIS
   ========================================================================== */
.nx-root .hs-result {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 40px);
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  box-shadow: 6px 6px 0 var(--nx-nebel);
}
.nx-root .hs-result-head {
  margin-bottom: 26px;
}
.nx-root .hs-result-title {
  font-family: var(--nx-display);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--nx-tinte);
  margin: 0;
}
.nx-root .hs-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.nx-root .hs-result-fig {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--nx-nebel-tief);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius-sm);
}
.nx-root .hs-result-fig#hs-result-monthly {
  background-color: var(--nx-tinte);
  background-image: var(--nx-feld-klein);
  border-color: var(--nx-tinte);
}
.nx-root .hs-result-lbl {
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root #hs-result-monthly .hs-result-lbl {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-result-fig b {
  font-family: var(--nx-display);
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--nx-tinte);
  margin: 8px 0 6px;
  font-feature-settings: "tnum" 1;
}
.nx-root #hs-result-monthly b {
  color: var(--nx-eis);
}
.nx-root .hs-result-note {
  font-size: .82rem;
  color: var(--nx-stahl);
}
.nx-root #hs-result-monthly .hs-result-note {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-result-extra {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-nebel);
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root #hs-result-monthly .hs-result-extra {
  border-top-color: var(--nx-tinte-linie);
  color: var(--nx-stahl-hell);
}
.nx-root .hs-result-inc {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.nx-root .hs-result-inc li {
  position: relative;
  padding-left: 20px;
  font-size: .88rem;
  color: var(--nx-tinte);
}
.nx-root #hs-result-monthly .hs-result-inc li {
  color: var(--nx-papier);
}
.nx-root .hs-result-inc li::before {
  position: absolute;
  left: 0;
  top: -.02em;
  font-family: var(--nx-mono);
  font-weight: 700;
}
.nx-root .hs-result-inc--plus li::before {
  content: "+";
  color: var(--nx-stahl);
}
.nx-root .hs-result-inc--incl li::before {
  content: "✓";
  color: var(--nx-eis);
}
.nx-root .hs-result-sum {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--nx-nebel);
}
.nx-root .hs-result-sum ul {
  display: grid;
  gap: 0;
  margin-top: 12px;
}
.nx-root .hs-result-sum li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--nx-nebel);
  font-size: .89rem;
}
.nx-root .hs-result-sum li:last-child {
  border-bottom: 0;
}
.nx-root .hs-result-sum li span {
  color: var(--nx-stahl);
}
.nx-root .hs-result-sum li b {
  color: var(--nx-tinte);
  text-align: right;
}
.nx-root .hs-result-fine {
  margin: 22px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--nx-stahl);
}
.nx-root .hs-base-hint {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--nx-nebel-tief);
  border: 1px solid var(--nx-nebel);
  border-left: 3px solid var(--nx-akzent);
  border-radius: var(--nx-radius-sm);
  font-size: .93rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
}
.nx-root .hs-base-hint b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--nx-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
}
.nx-root .hs-base-hint a {
  display: block;
  width: fit-content;
  margin-top: 8px;
  font-weight: 600;
  text-underline-offset: 3px;
}
.nx-root .hs-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.nx-root .hs-copied {
  margin: 12px 0 0;
  font-family: var(--nx-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--nx-erfolg);
}

.nx-home .nx-res-total{
  display:block; margin-top:12px; padding-top:10px;
  border-top:1px solid rgba(92,214,255,.24);
  font-size:.9rem;
}
.nx-home .nx-res-total b{ color:#5CD6FF; }

/* ==========================================================================
   VERGLEICH
   ========================================================================== */
.nx-root .hs-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
  background: var(--nx-karte);
  -webkit-overflow-scrolling: touch;
}
.nx-root .hs-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: .88rem;
}
.nx-root .hs-table th,
.nx-root .hs-table td {
  padding: 15px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--nx-nebel);
  line-height: 1.45;
}
.nx-root .hs-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--nx-tinte);
  color: var(--nx-stahl-hell);
  font-family: var(--nx-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}
.nx-root .hs-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--nx-tinte);
  background: var(--nx-papier);
  width: 190px;
}
.nx-root .hs-table td {
  color: var(--nx-stahl);
}
.nx-root .hs-table em {
  display: block;
  font-style: normal;
  font-size: .77rem;
  line-height: 1.4;
  color: var(--nx-stahl);
  margin-top: 3px;
  opacity: .85;
}
.nx-root .hs-table tbody tr:last-child th,
.nx-root .hs-table tbody tr:last-child td {
  border-bottom: 0;
}
.nx-root .hs-table thead th.hs-col-nx {
  background: var(--nx-eis);
  color: var(--nx-tinte);
  font-family: var(--nx-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
}
.nx-root .hs-table td.hs-col-nx {
  background: var(--nx-akzent-flaeche);
  color: var(--nx-tinte);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--nx-akzent);
}
.nx-root .hs-table td.hs-col-nx em {
  color: var(--nx-akzent-text);
  opacity: .9;
}

/* ==========================================================================
   ARGUMENTE
   ========================================================================== */
.nx-root .hs-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--nx-gap);
  margin-top: 44px;
}
.nx-root .hs-why > div {
  padding: 24px 22px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
  border-top: 5px solid var(--nx-akzent);
}
.nx-root .hs-why b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
  margin-bottom: 8px;
}
.nx-root .hs-why p {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--nx-tinte-text);
  margin: 0;
}

/* ==========================================================================
   BEWERTUNGEN
   ========================================================================== */
.nx-root .hs-quotes {
  columns: 3 300px;
  column-gap: var(--nx-gap);
}
.nx-root .hs-quote {
  break-inside: avoid;
  margin: 0 0 var(--nx-gap);
  padding: 26px 24px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-nebel);
  border-radius: var(--nx-radius);
}
.nx-root .hs-quote .hs-stars {
  display: block;
  margin-bottom: 12px;
}
.nx-root .hs-quote b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--nx-tinte);
  line-height: 1.3;
  margin-bottom: 10px;
}
.nx-root .hs-quote p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
  margin: 0 0 14px;
}
.nx-root .hs-quote cite {
  font-family: var(--nx-mono);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.nx-root .hs-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.nx-root .hs-faq-col {
  border-top: 1px solid var(--nx-nebel);
}
.nx-root .hs-faq details {
  border-bottom: 1px solid var(--nx-nebel);
}
.nx-root .hs-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--nx-tinte);
  transition: color .16s var(--nx-ease);
}
.nx-root .hs-faq summary::-webkit-details-marker {
  display: none;
}
.nx-root .hs-faq summary:hover {
  color: var(--nx-akzent-text);
}
.nx-root .hs-faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: .3em;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--nx-akzent);
  border-bottom: 2px solid var(--nx-akzent);
  transform: rotate(45deg);
  transition: transform .22s var(--nx-ease);
}
.nx-root .hs-faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: .55em;
}
.nx-root .hs-faq details > p {
  font-size: .94rem;
  line-height: 1.65;
  color: var(--nx-tinte-text);
  margin: 0 0 14px;
  padding-right: 34px;
}
.nx-root .hs-faq details > p:last-child {
  margin-bottom: 24px;
}
.nx-root #faq .hs-head {
  max-width: 640px;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.nx-root .hs-cta {
  background-color: var(--nx-tinte);
  background-image: var(--nx-feld);
  border-block: 0;
  text-align: center;
}
.nx-root .hs-cta .hs-wrap {
  max-width: 780px;
}
.nx-root .hs-cta .hs-h2 {
  color: var(--nx-papier);
}
.nx-root .hs-cta .hs-eyebrow {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-cta .hs-lead {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-cta .hs-btnrow {
  justify-content: center;
  margin-block: 30px 0;
}
.nx-root .hs-cta .hs-btn--primary {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-tinte);
  box-shadow: 5px 5px 0 rgba(92, 214, 255, .30);
}
.nx-root .hs-cta .hs-btn--primary:hover {
  background: var(--nx-papier);
  border-color: var(--nx-papier);
  color: var(--nx-tinte);
  box-shadow: 5px 5px 0 rgba(247, 247, 248, .30);
}
.nx-root .hs-cta .hs-btn--ghost {
  border-color: var(--nx-tinte-linie);
  color: var(--nx-papier);
}
.nx-root .hs-cta .hs-btn--ghost:hover {
  border-color: var(--nx-eis);
  color: var(--nx-eis);
  background: rgba(92, 214, 255, .14);
}
.nx-root .hs-cta-trust {
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: center;
  text-align: left;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root .hs-cta-trust li {
  color: var(--nx-papier);
}
.nx-root .hs-cta-meta {
  margin: 22px 0 0;
  font-size: .85rem;
  color: var(--nx-stahl-hell);
}
.nx-root .hs-cta-meta a {
  color: var(--nx-eis);
}
.nx-root .hs-cta-meta a:hover {
  color: var(--nx-papier);
}
.nx-root .hs-cta .hs-eyebrow::before {
  background: var(--nx-eis);
}
.nx-root .hs-cta-trust li::before {
  background: var(--nx-eis);
}
.nx-root .hs-cta :focus-visible {
  outline-color: var(--nx-eis);
}

/* ==========================================================================
   TABELLEN OHNE SEITWAERTSSCROLLEN
   ========================================================================== */
.nx-home .hs-tablewrap{ overflow-x:auto; }

@media (min-width:861px){
  .nx-home .hs-table{ table-layout:fixed; width:100%; }
  .nx-home .hs-table th,
  .nx-home .hs-table td{
    padding:12px 10px; font-size:.9rem; word-break:normal; overflow-wrap:anywhere;
  }
  .nx-home .hs-table th[scope="row"]{ width:19%; }
  .nx-home .nx-plans .nx-num{ white-space:normal; }
  .nx-home .hs-table em{ display:block; margin-top:4px; }
}

@media (max-width:860px){
  .nx-home .hs-tablewrap{ overflow:visible; }
  .nx-home .hs-table,
  .nx-home .hs-table tbody,
  .nx-home .hs-table tr,
  .nx-home .hs-table th,
  .nx-home .hs-table td{
    display:block; width:auto; border:0; padding:0;
  }
  .nx-home .hs-table thead{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .nx-home .hs-table tr{
    margin-bottom:14px; padding:16px 18px; border-radius:0;
    border:1px solid rgba(92,214,255,.24); background:rgba(0,154,255,.05);
  }
  .nx-home .hs-table th[scope="row"]{
    margin-bottom:10px; font-size:1rem; font-weight:700;
  }
  .nx-home .hs-table td{
    display:flex; align-items:baseline; gap:12px;
    padding:9px 0; border-top:1px solid rgba(92,214,255,.14);
  }
  .nx-home .hs-table td::before{
    content:attr(data-label); flex:0 0 34%;
    font-size:.72rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#5CD6FF;
  }
  .nx-home .hs-table td.nx-pick,
  .nx-home .hs-table td.hs-col-nx{
    padding:9px 10px; border-top:0; border-radius:0;
    background:rgba(0,154,255,.14);
  }
  .nx-home .hs-table em{ display:block; margin-top:3px; }
  .nx-home .nx-save{ margin-left:0; margin-top:4px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .nx-root .hs-hero-grid { grid-template-columns: 1fr; }
  .nx-root .hs-orbit { max-width: 340px; order: -1; margin-bottom: 8px; }
  .nx-root .hs-classic-lead { grid-template-columns: 1fr; }
  .nx-root .hs-classic-lead .hs-btn { justify-self: start; }
  .nx-root .hs-quotes { columns: 2 280px; }
  .nx-root .hs-faq { grid-template-columns: 1fr; }
  .nx-root .hs-faq-col + .hs-faq-col { border-top: 0; }
  .nx-root .hs-base-cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nx-root .hs-cta-trust { grid-template-columns: minmax(0, 260px); }
  .nx-root .hs-tier .nx-pay { padding: 15px 14px 13px; }
  .nx-root .hs-tier .nx-pay-val { font-size: .92rem; }
}
@media (max-width: 640px) {
  .nx-root { --nx-pad: 18px; --nx-gap: 18px; }
  .nx-root .hs-btnrow .hs-btn { flex: 1 1 100%; }
  .nx-root .hs-quotes { columns: 1; }
  .nx-root .hs-switch { width: 100%; }
  .nx-root .hs-switch button { flex: 1; padding-inline: 12px; }
  .nx-root .hs-tier-sub { min-height: 0; }
  .nx-root .hs-quiz-nav { flex-direction: column-reverse; align-items: stretch; }
  .nx-root .hs-quiz-nav .hs-btn { margin-left: 0; }
  .nx-root .hs-result-actions .hs-btn { flex: 1 1 100%; }
  .nx-root .hs-cta-trust { gap: 10px 16px; }
  .nx-root .hs-orbit { max-width: 280px; }
  .nx-root .hs-chip { font-size: .64rem; padding: 5px 10px; }
  .nx-root .hs-table { min-width: 720px; }
  .nx-root .hs-tier--feature { box-shadow: 4px 4px 0 var(--nx-eis); }
  .nx-root .hs-quiz,
  .nx-root .hs-result { box-shadow: none; }
}
@media (max-width: 560px) {
  .nx-root .hs-trust { grid-template-columns: minmax(0, 260px); }
  .nx-root .hs-switch--3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    width: 100%;
    border-radius: var(--nx-radius-sm);
  }
  .nx-root .hs-switch--3 button {
    width: 100%;
    font-size: .95rem;
    border-radius: calc(var(--nx-radius-sm) - 3px);
  }
}

/* ==========================================================================
   BEWEGUNG
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nx-root *,
  .nx-root *::before,
  .nx-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nx-root .hs-btn:hover,
  .nx-root .hs-ref:hover { transform: none; }
}

/* ==========================================================================
   DRUCK
   ========================================================================== */
@media print {
  .nx-root .hs-orbit,
  .nx-root .hs-btnrow,
  .nx-root .hs-quiz,
  .nx-root .hs-result-actions { display: none !important; }
  .nx-root .hs-cta { background: #fff !important; }
  .nx-root .hs-cta .hs-h2,
  .nx-root .hs-cta-trust li { color: var(--nx-tinte) !important; }
  .nx-root .hs-sec { padding-block: 20px; }
  .nx-root .hs-table { min-width: 0; font-size: .74rem; }
  .nx-root .hs-result-fig#hs-result-monthly {
    background: #fff !important;
    border-color: var(--nx-nebel) !important;
  }
  .nx-root #hs-result-monthly b,
  .nx-root #hs-result-monthly .hs-result-inc li { color: var(--nx-tinte) !important; }
}

/* ==========================================================================
   ANPASSUNGEN DUNKLER GRUND
   ========================================================================== */
.nx-root .hs-hero {
  background-color: transparent;
  background-image: var(--nx-feld);
}
.nx-root #vorgehen {
  background-color: transparent;
  background-image: var(--nx-feld);
  border-block: 1px solid var(--nx-tinte-linie);
}
.nx-root .hs-cta {
  background-color: transparent;
  background-image: var(--nx-feld);
}
.nx-root .hs-btn--primary {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-dunkel);
  box-shadow: 4px 4px 0 rgba(92, 214, 255, .22);
}
.nx-root .hs-btn--primary:hover {
  background: var(--nx-papier);
  border-color: var(--nx-papier);
  color: var(--nx-dunkel);
  box-shadow: 4px 4px 0 rgba(247, 247, 248, .22);
}
.nx-root .hs-btn--ghost {
  border-color: var(--nx-tinte-linie);
}
.nx-root .hs-orbit-core b,
.nx-root .hs-orbit-core span,
.nx-root .hs-tier-badge,
.nx-root .hs-table thead th.hs-col-nx,
.nx-root .hs-cta .hs-btn--primary,
.nx-root .hs-switch button.is-active,
.nx-root #vorgehen .hs-step:first-child .hs-step-n,
.nx-root .hs-details > summary::before {
  color: var(--nx-dunkel);
}
.nx-root .hs-switch button.is-active {
  background: var(--nx-eis);
}
.nx-root .hs-switch {
  background: rgba(247, 247, 248, .05);
  border-color: var(--nx-tinte-linie);
}
.nx-root .hs-details > summary::before {
  background: var(--nx-eis);
}
.nx-root .hs-step-n {
  background: transparent;
  border: 1px solid var(--nx-tinte-linie);
  color: var(--nx-papier);
}
.nx-root .hs-result-fig#hs-result-monthly {
  background-color: #009AFF;
  background-image: var(--nx-feld-klein);
  border-color: #1E2A50;
}
.nx-root .hs-table thead th {
  background: #009AFF;
  color: var(--nx-stahl-hell);
}
.nx-root .hs-table tbody th[scope="row"] {
  background: rgba(247, 247, 248, .045);
}
.nx-root .hs-table th,
.nx-root .hs-table td {
  border-bottom-color: var(--nx-tinte-linie);
}
.nx-root .hs-tablewrap {
  border-color: var(--nx-tinte-linie);
}
.nx-root .hs-feat li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235CD6FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E")
  center / 15px no-repeat;
}
.nx-root .hs-opt.is-on .hs-opt-mark {
  border-color: var(--nx-eis);
  background: var(--nx-eis)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23070F2C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2 6.6-6.6'/%3E%3C/svg%3E")
  center / 12px no-repeat;
}
.nx-root .hs-opt-mark {
  border-color: var(--nx-tinte-linie);
  background: transparent;
}
.nx-root .hs-ref,
.nx-root .hs-step,
.nx-root .hs-tier,
.nx-root .hs-quote,
.nx-root .hs-why > div,
.nx-root .hs-quiz,
.nx-root .hs-result,
.nx-root .hs-classic-lead,
.nx-root .hs-details {
  border-color: var(--nx-tinte-linie);
}
.nx-root .hs-tier--feature {
  border: 2px solid var(--nx-eis);
  box-shadow: 7px 7px 0 rgba(92, 214, 255, .22);
}
.nx-root .hs-quiz,
.nx-root .hs-result {
  box-shadow: 6px 6px 0 rgba(247, 247, 248, .07);
}
.nx-root .hs-ref:hover {
  box-shadow: 6px 6px 0 var(--nx-eis);
}
.nx-root .hs-ref-shot {
  background: var(--nx-nebel-tief);
}
.nx-root .hs-trust,
.nx-root .hs-quiz-nav,
.nx-root .hs-result-sum,
.nx-root .hs-result-extra,
.nx-root .hs-faq-col,
.nx-root .hs-faq details,
.nx-root .hs-details-body,
.nx-root .hs-timeline li {
  border-color: var(--nx-tinte-linie);
}
.nx-root .hs-result-sum li {
  border-bottom-color: var(--nx-tinte-linie);
}
.nx-root .hs-quiz-bar {
  background: rgba(247, 247, 248, .12);
}
@media print {
  .nx-root {
    background: #fff !important;
    color: #070F2C !important;
  }
  .nx-root .hs-h1,
  .nx-root .hs-h2,
  .nx-root .hs-h3,
  .nx-root .hs-lead,
  .nx-root .hs-tier > h3,
  .nx-root .hs-faq summary { color: #0A1533 !important; }
  .nx-root .hs-sec::before { display: none; }
  .nx-root .hs-hero,
  .nx-root #vorgehen,
  .nx-root .hs-cta { background: #fff !important; }
  .nx-root .hs-ref,
  .nx-root .hs-step,
  .nx-root .hs-tier,
  .nx-root .hs-quote,
  .nx-root .hs-why > div { background: #fff !important; border-color: #1E2A50 !important; }
}
.nx-root .hs-btn--primary:hover,
.nx-root .hs-hero .hs-btn--primary:hover,
.nx-root .hs-cta .hs-btn--primary:hover {
  background: var(--nx-papier);
  border-color: var(--nx-papier);
  color: var(--nx-dunkel);
  box-shadow: 4px 4px 0 rgba(247, 247, 248, .22);
}
.nx-root .hs-hero .hs-btn--primary,
.nx-root .hs-cta .hs-btn--primary {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-dunkel);
  box-shadow: 4px 4px 0 rgba(92, 214, 255, .22);
}
.nx-root a {
  color: var(--nx-eis);
  text-decoration: underline;
  text-decoration-color: rgba(92, 214, 255, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nx-root a:hover {
  color: var(--nx-papier);
  text-decoration-color: var(--nx-papier);
}
.nx-root .hs-linkbtn {
  color: var(--nx-eis);
}
.nx-root .hs-linkbtn:hover {
  color: var(--nx-papier);
}
.nx-root .hs-quote,
.nx-root .hs-quote::before,
.nx-root .hs-quote::after,
.nx-root .hs-quote p::before,
.nx-root .hs-quote p::after,
.nx-root .hs-quote cite::before {
  background-image: none !important;
  content: none !important;
  quotes: none !important;
}
.nx-root .hs-quote {
  background: var(--nx-karte) !important;
}
.nx-root .hs-quote::marker {
  content: none;
}
.nx-root .hs-sec {
  border-width: 1px 0 0;
  border-style: solid;
  border-color: transparent;
  border-image: linear-gradient(90deg,
  transparent 0%,
  rgba(92, 214, 255, .55) 26%,
  rgba(0, 154, 255, .55) 62%,
  transparent 100%) 1;
}
.nx-root .hs-sec--surface {
  border-block: 0;
}
.nx-root .hs-sec::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: linear-gradient(180deg,
  rgba(247, 247, 248, .075) 0%,
  rgba(247, 247, 248, .02) 42%,
  transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.nx-root #start {
  border-top: 0;
}
.nx-root #start::after {
  content: none;
}
.nx-root .hs-quiz,
.nx-root .hs-result {
  background: linear-gradient(158deg, #12305C 0%, #0B1A3D 54%, #0A1533 100%);
  border: 1px solid rgba(92, 214, 255, .34);
  box-shadow: 0 28px 64px rgba(2, 5, 16, .55),
  8px 8px 0 rgba(92, 214, 255, .14);
}
.nx-root .hs-quiz::before,
.nx-root .hs-result::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
  var(--nx-eis) 0%, rgba(92, 214, 255, .15) 62%, rgba(92, 214, 255, 0) 100%);
}
.nx-root .hs-quiz,
.nx-root .hs-result {
  position: relative;
}
.nx-root .hs-opt {
  background: rgba(4, 9, 30, .55);
  border-color: rgba(247, 247, 248, .20);
  color: var(--nx-papier);
}
.nx-root .hs-opt:hover {
  background: rgba(4, 9, 30, .80);
  border-color: var(--nx-eis);
}
.nx-root .hs-opt.is-on {
  background: rgba(92, 214, 255, .12);
  border-color: var(--nx-eis);
  box-shadow: inset 0 0 0 1px var(--nx-eis);
}
.nx-root .hs-quiz-bar {
  background: rgba(4, 9, 30, .6);
}
.nx-root .hs-quiz-nav {
  border-top-color: rgba(247, 247, 248, .18);
}
.nx-root .hs-result-fig {
  background: rgba(4, 9, 30, .5);
  border-color: rgba(247, 247, 248, .18);
}
.nx-root .hs-result-sum,
.nx-root .hs-result-sum li {
  border-color: rgba(247, 247, 248, .18);
}
.nx-root .hs-tablewrap {
  background: #0D1631;
  border: 1px solid rgba(247, 247, 248, .20);
  box-shadow: 0 28px 64px rgba(2, 5, 16, .55);
}
.nx-root .hs-table thead th {
  background: #050B22;
  color: var(--nx-stahl-hell);
}
.nx-root .hs-table thead th.hs-col-nx {
  background: var(--nx-eis);
  color: var(--nx-dunkel);
}
.nx-root .hs-table tbody tr:nth-child(even) th[scope="row"],
.nx-root .hs-table tbody tr:nth-child(even) td {
  background: rgba(247, 247, 248, .045);
}
.nx-root .hs-table tbody th[scope="row"] {
  background: rgba(247, 247, 248, .085);
  color: var(--nx-papier);
}
.nx-root .hs-table tbody tr:nth-child(even) th[scope="row"] {
  background: rgba(247, 247, 248, .12);
}
.nx-root .hs-table td {
  color: var(--nx-stahl-hell);
}
.nx-root .hs-table em {
  color: var(--nx-stahl);
  opacity: 1;
}
.nx-root .hs-table th,
.nx-root .hs-table td {
  border-bottom-color: rgba(247, 247, 248, .12);
}
.nx-root .hs-table td.hs-col-nx,
.nx-root .hs-table tbody tr:nth-child(even) td.hs-col-nx {
  background: rgba(92, 214, 255, .11);
  color: var(--nx-papier);
  box-shadow: inset 3px 0 0 var(--nx-eis);
}
.nx-root .hs-table td.hs-col-nx em {
  color: var(--nx-eis);
  opacity: .85;
}

/* ==========================================================================
   FEINSCHLIFF
   ========================================================================== */
.nx-root a:not(.hs-btn):not(.hs-ref),
.nx-root a:not(.hs-btn):not(.hs-ref):visited {
  color: var(--nx-eis);
  text-decoration-color: rgba(92, 214, 255, .45);
}
.nx-root a:not(.hs-btn):not(.hs-ref):hover {
  color: var(--nx-papier);
  text-decoration-color: var(--nx-papier);
}
.nx-root #vorgehen .hs-details > summary::before,
.nx-root .hs-details > summary::before {
  background: var(--nx-eis);
  color: var(--nx-dunkel);
}
.nx-root .hs-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--nx-gap);
  columns: auto;
}
.nx-root .hs-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.nx-root .hs-quote p {
  flex: 1;
}
.nx-root .hs-quote cite {
  margin-top: auto;
  padding-top: 4px;
}
@media (max-width: 900px) {
  .nx-root .hs-quotes {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    columns: auto;
  }
}
@media (max-width: 640px) {
  .nx-root .hs-quotes { grid-template-columns: 1fr; columns: auto; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.main-footer.main-footer-extended {
  --nxf-oben: #050B22;
  --nxf-unten: #03071A;
  --nxf-linie: #1E2A50;
  --nxf-text: #B9C3D8;
  --nxf-hell: #F7F7F8;
  --nxf-eis: #5CD6FF;
  position: relative;
  background: linear-gradient(180deg, var(--nxf-oben) 0%, var(--nxf-unten) 100%);
  color: var(--nxf-text);
}
.main-footer.main-footer-extended.main-footer-extended-gray {
  background: linear-gradient(180deg, var(--nxf-oben) 0%, var(--nxf-unten) 100%);
}
.main-footer.main-footer-extended::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
  transparent 0%,
  rgba(92, 214, 255, .55) 26%,
  rgba(0, 154, 255, .55) 62%,
  transparent 100%);
}
.main-footer.main-footer-extended::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(247, 247, 248, .05) 0%, rgba(247, 247, 248, 0) 100%);
  pointer-events: none;
}
.main-footer.main-footer-extended .footer-top,
.main-footer.main-footer-extended .footer-bottom {
  position: relative;
  z-index: 1;
  background: transparent;
}
.main-footer.main-footer-extended .footer-company-logo img {
  filter: none;
  max-height: 42px;
  width: auto;
}
.main-footer.main-footer-extended .footer-company-desc {
  color: var(--nxf-text);
  max-width: 42ch;
}
.main-footer.main-footer-extended .footer-company-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.main-footer.main-footer-extended .footer-company-socials > li {
  margin: 0;
  padding: 0;
}
.main-footer.main-footer-extended .footer-company-socials > li > a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nxf-linie);
  color: var(--nxf-hell);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.main-footer.main-footer-extended .footer-company-socials > li > a::before {
  line-height: 1;
}
.main-footer.main-footer-extended .footer-company-socials > li > a:hover {
  border-color: var(--nxf-eis);
  color: var(--nxf-eis);
  background: rgba(92, 214, 255, .10);
}
.main-footer.main-footer-extended .footer-payment {
  display: none;
}
.main-footer.main-footer-extended .footer-company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.main-footer.main-footer-extended .footer-company > * {
  order: 1;
}
.main-footer.main-footer-extended .footer-company::before {
  content: "Zahlungsarten";
  order: 98;
  display: block;
  width: 100%;
  max-width: 40ch;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--nxf-linie);
  font-family: var(--nx-mono, ui-monospace, Menlo, monospace);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nxf-eis);
}
.main-footer.main-footer-extended .footer-company::after {
  content: "Visa · Mastercard · TWINT · Apple Pay · Google Pay · Banküberweisung · Rechnung";
  order: 99;
  display: block;
  max-width: 40ch;
  margin-top: 9px;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--nxf-text);
}
.main-footer.main-footer-extended .footer-title {
  font-family: var(--nx-mono, ui-monospace, Menlo, monospace);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nxf-hell);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--nxf-linie);
}
.main-footer.main-footer-extended .footer-title .footer-icon svg path {
  fill: var(--nxf-eis);
}
.main-footer.main-footer-extended .footer-nav .nav-link,
.main-footer.main-footer-extended .footer-nav .nav-link span {
  color: var(--nxf-text);
  text-decoration: none;
  transition: color .16s ease;
}
.main-footer.main-footer-extended .footer-nav .nav-link:hover,
.main-footer.main-footer-extended .footer-nav .nav-link:hover span {
  color: var(--nxf-eis);
}
.main-footer.main-footer-extended .footer-bottom {
  border-top: 1px solid var(--nxf-linie);
}
.main-footer.main-footer-extended .footer-copyright {
  color: rgba(185, 195, 216, .75);
  font-size: .85rem;
}
.main-footer.main-footer-extended .footer-bottom .footer-nav > li > a,
.main-footer.main-footer-extended .footer-bottom .footer-nav > li > a span {
  color: rgba(185, 195, 216, .75);
  font-size: .85rem;
  text-decoration: none;
}
.main-footer.main-footer-extended .footer-bottom .footer-nav > li > a:hover,
.main-footer.main-footer-extended .footer-bottom .footer-nav > li > a:hover span {
  color: var(--nxf-eis);
}
.main-footer.main-footer-extended .footer-bottom .lm-go-top {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--nxf-linie);
  color: var(--nxf-hell);
}
.main-footer.main-footer-extended .footer-bottom a:hover .lm-go-top {
  border-color: var(--nxf-eis);
  color: var(--nxf-eis);
}
.main-footer.main-footer-extended :focus-visible {
  outline: 2px solid var(--nxf-eis);
  outline-offset: 3px;
}

/* ==========================================================================
   SCHRITTZIFFER AUF AKZENTFLAECHE
   ========================================================================== */
.nx-root .hs-step:first-child .hs-step-n,
.nx-root #vorgehen .hs-step:first-child .hs-step-n {
  background: var(--nx-eis);
  border-color: var(--nx-eis);
  color: var(--nx-dunkel);
}

/* ==========================================================================
   GLEICH HOHE KARTEN
   ========================================================================== */
.nx-root .hs-tiers,
.nx-root .hs-base-cols {
  align-items: stretch;
}
.nx-root .hs-tiers > .hs-tier,
.nx-root .hs-base-cols > .hs-tier {
  height: 100%;
}

/* ==========================================================================
   VERLAUF DES SIGNETS
   ========================================================================== */
.nx-root .hs-quiz-bar i {
  background: var(--nx-verlauf);
}
.nx-root .hs-sec {
  border-image: linear-gradient(90deg,
  transparent 0%,
  rgba(0, 60, 178, .55) 18%,
  rgba(0, 154, 255, .70) 46%,
  rgba(92, 214, 255, .55) 68%,
  transparent 100%) 1;
}
.nx-root .hs-orbit-ring--2 {
  border-color: rgba(0, 154, 255, .34);
}
.nx-root .hs-details > summary::before,
.nx-root #vorgehen .hs-details > summary::before {
  background: var(--nx-eis);
  color: var(--nx-dunkel);
}

/* ==========================================================================
   NACHBESSERUNGEN DER FARBUMSTELLUNG
   ========================================================================== */
.nx-root .hs-result-fig#hs-result-monthly {
  background-color: #003CB2;
  background-image: var(--nx-feld-klein);
  border-color: #1E4FA8;
}
.nx-root #hs-result-monthly b {
  color: var(--nx-eis);
}
.nx-root #hs-result-monthly .hs-result-lbl,
.nx-root #hs-result-monthly .hs-result-note,
.nx-root #hs-result-monthly .hs-result-extra {
  color: #BFD4F2;
}
.nx-root #hs-result-monthly .hs-result-inc li {
  color: var(--nx-papier);
}
.nx-root #hs-result-monthly .hs-result-extra {
  border-top-color: rgba(247, 247, 248, .28);
}
.nx-root .hs-copied {
  color: var(--nx-erfolg);
}
.nx-root .hs-table em {
  color: #B9C3D8; opacity: 1;
}

/* ==========================================================================
   LICHTFUEHRUNG
   ========================================================================== */
.nx-root #vorgehen,
.nx-root .hs-cta {
  background-image: var(--nx-feld-ruhig);
}
.nx-root .hs-sec::after {
  height: 300px;
  background: linear-gradient(180deg,
  rgba(247, 247, 248, .045) 0%,
  rgba(247, 247, 248, .018) 30%,
  rgba(247, 247, 248, .005) 58%,
  rgba(247, 247, 248, 0) 100%);
}
.nx-root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nx-root {
  position: relative;
}
.nx-root > * {
  position: relative; z-index: 1;
}

/* ==========================================================================
   AUSSCHLUSSLISTE
   ========================================================================== */
.nx-root .hs-feat.hs-feat--minus li::before {
  content: "–";
  background: none;
  color: var(--nx-stahl);
  font-family: var(--nx-mono);
  font-size: .95rem;
  line-height: 16px;
  text-align: center;
  top: .22em;
}

/* ==========================================================================
   KICKER IN DER LOGOSCHRIFT
   ========================================================================== */
.nx-root .hs-eyebrow,
.nx-root .hs-chip,
.nx-root .hs-quiz-step,
.nx-root .hs-result-lbl,
.nx-root .hs-result-extra,
.nx-root .hs-switch-hint,
.nx-root .hs-table thead th,
.nx-root .hs-tier-badge,
.nx-root .hs-quote cite,
.nx-root .hs-ref-tag,
.nx-root .hs-copied,
.nx-root .hs-price-note,
.nx-root .hs-timeline li::before {
  font-weight: 400;
  letter-spacing: .2em;
}
.nx-root .hs-eyebrow {
  font-size: .72rem;
}
.nx-root .hs-chip {
  font-size: .68rem; letter-spacing: .14em;
}
.nx-root .hs-tier-badge {
  font-size: .62rem; letter-spacing: .16em;
}
.nx-root .hs-table thead th {
  font-size: .68rem; letter-spacing: .14em;
}
.nx-root .hs-quote cite,
.nx-root .hs-ref-tag {
  font-size: .66rem; letter-spacing: .18em;
}
.nx-root .hs-price-note {
  font-size: .7rem; letter-spacing: .04em;
}
.nx-root .hs-timeline li::before {
  letter-spacing: .06em; font-size: .78rem;
}
.nx-root .hs-quiz-step,
.nx-root .hs-result-lbl,
.nx-root .hs-result-extra,
.nx-root .hs-switch-hint {
  font-size: .68rem; letter-spacing: .18em;
}

/* ==========================================================================
   SERVICEZEILE: WARENKORB UND WAEHRUNG
   ========================================================================== */
header .app-nav .top-nav > li > a,
header .app-nav .top-nav > li > a .item-text,
header .app-nav .top-nav > li > a .lm,
header .app-nav .top-nav > li > a i,
header .app-nav .top-nav > li > a b,
header .app-nav .top-nav > li > a .ls-caret,
header .app-nav .top-nav > li.dropdown > a,
header .app-nav .top-nav > li.dropdown > a .item-text {
  color: var(--nxh-text);
  fill: currentColor;
}
header .app-nav .top-nav > li > a:hover,
header .app-nav .top-nav > li > a:hover .item-text,
header .app-nav .top-nav > li > a:hover .lm,
header .app-nav .top-nav > li > a:hover i,
header .app-nav .top-nav > li > a:hover .ls-caret,
header .app-nav .top-nav > li.open > a,
header .app-nav .top-nav > li.open > a .item-text,
header .app-nav .top-nav > li.open > a .ls-caret {
  color: var(--nxh-eis);
}
header .app-nav .top-nav .nav-badge {
  background: var(--nxh-eis);
  color: var(--nxh-leiste);
  border-color: var(--nxh-eis);
}
header .app-nav .top-nav .dropdown-menu {
  background: var(--nxh-leiste);
  border: 1px solid var(--nxh-linie);
  box-shadow: 0 24px 60px rgba(2, 5, 16, .55);
}
header .app-nav .top-nav .dropdown-menu a,
header .app-nav .top-nav .dropdown-menu .item-text,
header .app-nav .top-nav .dropdown-menu-items a {
  color: var(--nxh-text);
}
header .app-nav .top-nav .dropdown-menu a:hover,
header .app-nav .top-nav .dropdown-menu a:focus,
header .app-nav .top-nav .dropdown-menu-items a:hover {
  color: var(--nxh-eis);
  background: rgba(247, 247, 248, .07);
}

/* ==========================================================================
   RECHTSTEXTE
   ========================================================================== */
.nx-root.nx-legal .nx-legal-body {
  max-width: 74ch;
}
.nx-root.nx-legal .nx-legal-body .hs-h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 48px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root.nx-legal .nx-legal-body > .hs-h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.nx-root.nx-legal .nx-legal-body .hs-h3 {
  margin: 26px 0 8px;
  color: var(--nx-eis);
}
.nx-root.nx-legal .nx-legal-body p {
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.72;
}
.nx-root.nx-legal .nx-legal-list,
.nx-root.nx-legal .nx-legal-links {
  margin: 4px 0 18px;
  gap: 9px;
}
.nx-root.nx-legal .nx-legal-list li,
.nx-root.nx-legal .nx-legal-links li {
  font-size: .96rem;
  line-height: 1.6;
}
.nx-root.nx-legal .nx-legal-list li b {
  display: block;
  color: var(--nx-tinte);
}
.nx-root.nx-legal .nx-legal-hint {
  padding: 14px 16px;
  border-left: 3px solid var(--nx-eis);
  background: rgba(247, 247, 248, .05);
  font-size: .92rem;
}
.nx-root.nx-legal .nx-legal-stand {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}

/* ==========================================================================
   FRAGEBOGEN: HINWEIS BEI DER SOLO-OPTION
   ========================================================================== */
.nx-root .hs-quiz-solo {
  margin: 18px 0 0;
  padding: 15px 17px;
  background: rgba(92, 214, 255, .08);
  border: 1px solid rgba(92, 214, 255, .34);
  border-left: 3px solid var(--nx-eis);
  border-radius: var(--nx-radius-sm);
  font-size: .93rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
}
.nx-root .hs-quiz-solo b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--nx-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-papier);
}

/* ==========================================================================
   AUFKLAPPMENUE UNTER DER SCHALTFLAECHE
   ========================================================================== */
header .app-nav #main-menu .dropdown-menu,
header .app-nav #main-menu .nav-item-btn .dropdown-menu,
header .app-nav #main-menu .dropdown-extended .dropdown-menu {
  background: var(--nxh-leiste);
  border: 1px solid var(--nxh-linie);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(2, 5, 16, .55);
  padding: 0;
}
header .app-nav #main-menu .dropdown-menu .dropdown-menu-items {
  background: transparent;
}
header .app-nav #main-menu .dropdown-menu > li > a,
header .app-nav #main-menu .dropdown-menu-items > li > a,
header .app-nav #main-menu .dropdown-menu-items > a,
header .app-nav #main-menu .dropdown-menu .menu-item-title,
header .app-nav #main-menu .dropdown-menu .menu-item-content,
header .app-nav #main-menu .dropdown-menu .item-text {
  background: transparent;
  color: var(--nxh-text);
  text-decoration: none;
}
header .app-nav #main-menu .dropdown-menu > li > a:hover,
header .app-nav #main-menu .dropdown-menu > li > a:focus,
header .app-nav #main-menu .dropdown-menu > li.active > a,
header .app-nav #main-menu .dropdown-menu-items > li > a:hover,
header .app-nav #main-menu .dropdown-menu-items > a:hover,
header .app-nav #main-menu .dropdown-menu-items > a:focus {
  background: rgba(92, 214, 255, .10);
  color: var(--nxh-eis);
}
header .app-nav #main-menu .dropdown-menu > li > a:hover .menu-item-title,
header .app-nav #main-menu .dropdown-menu > li > a:hover .item-text,
header .app-nav #main-menu .dropdown-menu-items > a:hover .item-text,
header .app-nav #main-menu .dropdown-menu-items > a:focus .item-text {
  background: transparent;
  color: var(--nxh-eis);
}
header .app-nav #main-menu .nav-item-btn .dropdown-menu-items > a + a,
header .app-nav #main-menu .nav-item-btn .dropdown-menu-items > li + li,
header .app-nav #main-menu .nav-item-btn .dropdown-menu > li + li {
  border-top: 1px solid var(--nxh-linie);
}
header .app-nav #main-menu .nav-item-btn.open > .btn.btn-primary,
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary {
  background: var(--nxh-eis);
  border-color: var(--nxh-eis);
  color: var(--nxh-leiste);
}
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary:hover,
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary:focus {
  background: var(--nxh-hell);
  border-color: var(--nxh-hell);
  color: var(--nxh-leiste);
}
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary span,
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary .ls-caret,
header .app-nav #main-menu .nav-item-btn > .btn.btn-primary b {
  color: inherit;
}
header .app-nav #main-menu .has-scroll::-webkit-scrollbar {
  width: 8px;
}
header .app-nav #main-menu .has-scroll::-webkit-scrollbar-track {
  background: transparent;
}
header .app-nav #main-menu .has-scroll::-webkit-scrollbar-thumb {
  background: var(--nxh-linie);
}
header .app-nav #main-menu .has-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--nxh-linie) transparent;
}

/* ==========================================================================
   DARK MODE: FLAECHEN, KANTEN, SCHALTFLAECHEN
   ========================================================================== */
:root {
  --ui-block-bg: #101A3A;
  --ui-block-border: 1px solid #1E2A50;
  --ui-block-border-color: #1E2A50;
  --ui-block-divider-color: rgba(247, 247, 248, .12);
  --ui-block-secondary-divider-border-color: rgba(247, 247, 248, .10);
  --dropdown-bg: #101A3A;
  --dropdown-collapse-bg: #0C1633;
  --select-option-bg: #0C1633;
  --error-page-bg: #070F2C;
  --app-nav-top-bg: #070F2C;
  --app-nav-left-bg: #070F2C;
  --mob-app-nav-bg: #070F2C;
  --mob-dropdown-nav-bg: #070F2C;
  --mob-app-nav-header-bg: #070F2C;
  --border-radius-xs: 0px;
  --border-radius-sm: 0px;
  --border-radius-base: 0px;
  --border-radius-lg: 0px;
  --border-radius-xlg: 0px;
  --badge-border-radius: 0px;
  --ui-block-shadow: 0 18px 44px rgba(2, 5, 16, .45);
  --ui-block-shadow-lg: 0 28px 64px rgba(2, 5, 16, .58);
  --gray-lighter-4: #1E2A50;
  --gray-lighter: #8C97B8;
  --kbd-bg: #1E2A50;
  --input-border-color: #2E3C6B;
  --input-focus-border-color: #5CD6FF;
  --btn-primary-bg: #5CD6FF;
  --btn-primary-border: #5CD6FF;
  --btn-primary-hover-bg: #F7F7F8;
  --btn-primary-hover-border: #F7F7F8;
  --btn-primary-faded-bg: #123268;
  --btn-primary-faded-border: #123268;
  --btn-primary-faded-hover-bg: #17407F;
  --btn-primary-faded-hover-border: #17407F;
  --icheck-active-bg: #5CD6FF;
  --icheck-active-border-color: #5CD6FF;
  --text-primary-color: #5CD6FF;
  --btn-default-bg: transparent;
  --btn-default-color: #B9C3D8;
  --btn-default-border: #2E3C6B;
  --btn-default-hover-bg: rgba(92, 214, 255, .10);
  --btn-default-hover-color: #5CD6FF;
  --btn-default-hover-border: #5CD6FF;
  --btn-default-active-bg: rgba(92, 214, 255, .16);
  --btn-default-active-border: #5CD6FF;
  --btn-primary-active-bg: #33C7FF;
  --btn-primary-active-border: #33C7FF;
  --btn-primary-outline-bg-hover: rgba(92, 214, 255, .12);
  --gray-faded: rgba(247, 247, 248, .06);
  --ui-block-link-hover-bg: rgba(247, 247, 248, .06);
  --ui-block-link-active-bg: rgba(92, 214, 255, .10);
  --panel-hover-bg: #141F45;
  --tile-hover-bg: #141F45;
  --list-group-hover-bg: rgba(247, 247, 248, .06);
}

/* ==========================================================================
   ANMELDUNG UND REGISTRIERUNG: AKZENT
   ========================================================================== */
body.page-login .login-body,
body.page-clientregister .login-body {
  position: relative;
  box-shadow: 0 28px 64px rgba(2, 5, 16, .55),
  8px 8px 0 rgba(92, 214, 255, .10) !important;
}
body.page-login .login-body::before,
body.page-clientregister .login-body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
  #5CD6FF 0%, rgba(92, 214, 255, .15) 62%, rgba(92, 214, 255, 0) 100%);
}

/* ==========================================================================
   SCHALTFLAECHEN UND SCHALTER
   ========================================================================== */

:is(#nx, html) .btn-primary,
:is(#nx, html) a.btn-primary,
:is(#nx, html) button.btn-primary,
:is(#nx, html) input[type="submit"].btn-primary {
  background-color: #5CD6FF !important;
  border-color: #5CD6FF !important;
  color: #070F2C !important;
  font-weight: 600;
}
:is(#nx, html) .btn-primary:hover,
:is(#nx, html) .btn-primary:focus,
:is(#nx, html) .btn-primary:active {
  background-color: #F7F7F8 !important;
  border-color: #F7F7F8 !important;
  color: #070F2C !important;
}
:is(#nx, html) .btn-primary i,
:is(#nx, html) .btn-primary .ls,
:is(#nx, html) .btn-primary .lm,
:is(#nx, html) .btn-primary svg,
:is(#nx, html) .btn-primary span {
  color: inherit !important;
  fill: currentColor !important;
}

:is(#nx, html) .btn-primary-outline,
:is(#nx, html) .btn-outline-primary {
  color: #5CD6FF !important;
  border-color: #5CD6FF !important;
  background-color: transparent !important;
}
:is(#nx, html) .btn-primary-outline:hover,
:is(#nx, html) .btn-outline-primary:hover {
  color: #070F2C !important;
  background-color: #5CD6FF !important;
  border-color: #5CD6FF !important;
}
:is(#nx, html) .btn-primary-faded {
  color: #BFE9FF !important;
}

:is(#nx, html) body.page-login .btn-primary,
:is(#nx, html) body.page-clientregister .btn-primary {
  box-shadow: 4px 4px 0 rgba(92, 214, 255, .22) !important;
}
:is(#nx, html) body.page-login .btn-primary:hover,
:is(#nx, html) body.page-clientregister .btn-primary:hover {
  box-shadow: 4px 4px 0 rgba(247, 247, 248, .22) !important;
}

:is(#nx, html) .panel.panel-switch {
  background-color: rgba(247, 247, 248, .05) !important;
  border: 1px solid #2E3C6B !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100%;
  transition: border-color .18s ease, background-color .18s ease;
}
:is(#nx, html) .panel.panel-switch:hover,
:is(#nx, html) .panel.panel-switch:focus-within {
  border-color: #5CD6FF !important;
  background-color: rgba(92, 214, 255, .07) !important;
}
:is(#nx, html) .panel-switch .panel-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px !important;
  background-color: transparent !important;
}
:is(#nx, html) .panel-switch .switch-label {
  color: #B9C3D8 !important;
  font-weight: 500;
  margin: 0;
}

:is(#nx, html) .switch .switch__container {
  background-color: rgba(247, 247, 248, .16) !important;
  background-image: none !important;
  border: 1px solid #2E3C6B !important;
  box-shadow: none !important;
}
:is(#nx, html) .switch .switch__checkbox:checked + .switch__container {
  background-color: #5CD6FF !important;
  border-color: #5CD6FF !important;
}
:is(#nx, html) .switch .switch__handle {
  background-color: #F7F7F8 !important;
  box-shadow: 0 1px 4px rgba(2, 5, 16, .55) !important;
}
:is(#nx, html) .switch .switch__checkbox:checked + .switch__container .switch__handle {
  background-color: #070F2C !important;
}
:is(#nx, html) .switch .switch__container::before,
:is(#nx, html) .switch .switch__container::after {
  color: #B9C3D8 !important;
}
:is(#nx, html) .switch .switch__checkbox:checked + .switch__container::before,
:is(#nx, html) .switch .switch__checkbox:checked + .switch__container::after {
  color: #070F2C !important;
}
:is(#nx, html) .panel.panel-switch:focus-visible,
:is(#nx, html) .switch .switch__checkbox:focus-visible + .switch__container {
  outline: 2px solid #5CD6FF;
  outline-offset: 3px;
}

/* ==========================================================================
   VOLLE BREITE OHNE SEITENLEISTE
   ========================================================================== */
.main-body-sidebar:not(:has(.panel,
.list-group,
.menu,
nav)),
aside:not(:has(.panel,
.list-group,
.menu,
nav)) {
  display: none !important;
}
.main-body-content:has(+ .main-body-sidebar:not(:has(.panel,
.list-group,
.menu,
nav))),
.main-body:has(.main-body-sidebar:not(:has(.panel,
.list-group,
.menu,
nav))) .main-body-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ==========================================================================
   FOOTER: RUHIGE LINKS
   ========================================================================== */
.main-footer.main-footer-extended .footer-nav .nav-link,
.main-footer.main-footer-extended .footer-nav > li > a {
  display: inline-block;
  transform: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  left: auto !important;
  transition: color .16s ease, opacity .16s ease;
}
.main-footer.main-footer-extended .footer-nav .nav-link:hover,
.main-footer.main-footer-extended .footer-nav .nav-link:focus,
.main-footer.main-footer-extended .footer-nav .nav-link:active,
.main-footer.main-footer-extended .footer-nav > li > a:active {
  transform: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  left: auto !important;
}
.main-footer.main-footer-extended .footer-nav .nav-link:active,
.main-footer.main-footer-extended .footer-nav > li > a:active {
  opacity: .7;
}

/* ==========================================================================
   KICKER UEBER DEN SEITENTITELN
   ========================================================================== */
.main-header .main-header-title {
  --nx-kicker: "Kundenbereich";
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
}
.main-header .main-header-title::before {
  content: var(--nx-kicker);
  order: -1;
  padding-left: 20px;
  font-family: "Jost", "Archivo", "Inter", sans-serif;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5CD6FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M6 0 L12 10 L0 10 Z' fill='%235CD6FF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 12px 10px;
}
body.page-announcements .main-header-title {
  --nx-kicker: "Aus dem Betrieb";
}
body.page-knowledgebase .main-header-title {
  --nx-kicker: "Hilfe";
}
body.page-downloads .main-header-title {
  --nx-kicker: "Hilfe";
}
body.page-supporttickets .main-header-title {
  --nx-kicker: "Support";
}
body.page-submitticket .main-header-title {
  --nx-kicker: "Support";
}
body.page-viewticket .main-header-title {
  --nx-kicker: "Support";
}
body.page-serverstatus .main-header-title {
  --nx-kicker: "Betrieb";
}
body.page-clientarea .main-header-title {
  --nx-kicker: "Übersicht";
}
body.page-invoices .main-header-title {
  --nx-kicker: "Buchhaltung";
}
body.page-clientareaproducts .main-header-title {
  --nx-kicker: "Deine Dienste";
}
body.page-clientareadomains .main-header-title {
  --nx-kicker: "Deine Dienste";
}
body.page-clientareadetails .main-header-title {
  --nx-kicker: "Dein Konto";
}
/* ==========================================================================
   FARBIGE BLOECKE IM KUNDENBEREICH
   ========================================================================== */

:root {
  --primary-block-bg: linear-gradient(160deg, #143A6E 0%, #0C1E44 100%);
  --primary-block-bg-h: linear-gradient(90deg, #0C1E44 0%, #143A6E 100%);
  --primary-block-border: 1px solid #2E3C6B;
  --primary-block-text-color: #B9C3D8;
  --primary-block-text-faded-color: #A6B0CC;
  --primary-block-divider-color: rgba(247, 247, 248, .12);
  --primary-block-divider-active-color: #5CD6FF;

  --secondary-block-bg: linear-gradient(160deg, #101A3A 0%, #0A1533 100%);
  --secondary-block-bg-h: linear-gradient(90deg, #0A1533 0%, #101A3A 100%);

  --primary-block-btn-bg: rgba(92, 214, 255, .12);
  --primary-block-btn-border-color: rgba(92, 214, 255, .34);
  --primary-block-btn-hover-bg: rgba(92, 214, 255, .22);
  --primary-block-btn-hover-border-color: #5CD6FF;
  --primary-block-btn-active-bg: rgba(92, 214, 255, .26);
  --primary-block-btn-active-border-color: #5CD6FF;
  --primary-block-input-bg: #0A1533;
  --primary-block-input-border: #2E3C6B;
}

.primary-block .panel-title,
.primary-block h2,
.primary-block h3,
.primary-block .client-name {
  color: #5CD6FF !important;
}
/* ==========================================================================
   RUECKWEG ZUM DASHBOARD
   ========================================================================== */
:is(#nx, html) .nx-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: "Jost", "Archivo", "Inter", sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  color: #8C97B8;
  text-decoration: none;
  transition: color .16s ease;
}
:is(#nx, html) .nx-zurueck:hover,
:is(#nx, html) .nx-zurueck:focus {
  color: #5CD6FF;
}
:is(#nx, html) .nx-zurueck span {
  font-size: 1.05em;
  line-height: 1;
}
/* ==========================================================================
   VOLLE BREITE OHNE SEITENLEISTE (KUNDENBEREICH)
   ========================================================================== */

:is(#nx, html) .sidebar.sidebar-secondary:not(:has(.panel, .list-group, nav, form, ul, a)),
:is(#nx, html) .sidebar.sidebar-primary:not(:has(.panel, .list-group, nav, form, ul, a)) {
  display: none !important;
}

:is(#nx, html) .main-body:has(.sidebar-secondary:not(:has(.panel, .list-group, nav, form, ul, a))) [class*="col-md-"],
:is(#nx, html) .main-body:has(.sidebar-primary:not(:has(.panel, .list-group, nav, form, ul, a))) [class*="col-md-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ==========================================================================
   EINWILLIGUNGSKASTEN
   ========================================================================== */

:is(#nx, html) .klaro .cookie-notice {
  background: #5CD6FF !important;
  border: 1px solid #5CD6FF !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 54px rgba(2, 5, 16, .6) !important;
  color: #070F2C !important;
  font-family: "Inter", system-ui, sans-serif;
}
:is(#nx, html) .klaro .cookie-modal .cm-modal {
  background: #101A3A !important;
  border: 1px solid #1E2A50 !important;
  border-radius: 0 !important;
  box-shadow: 0 28px 64px rgba(2, 5, 16, .65) !important;
  color: #B9C3D8 !important;
  font-family: "Inter", system-ui, sans-serif;
}
:is(#nx, html) .klaro .cn-body p,
:is(#nx, html) .klaro .cn-body span,
:is(#nx, html) .klaro .cn-body strong {
  color: #070F2C !important;
  font-size: .92rem;
  line-height: 1.6;
}
:is(#nx, html) .klaro .cm-modal p {
  color: #B9C3D8 !important;
  font-size: .92rem;
  line-height: 1.6;
}
:is(#nx, html) .klaro h1,
:is(#nx, html) .klaro h2,
:is(#nx, html) .klaro .cm-header h1 {
  color: #F7F7F8 !important;
}

:is(#nx, html) .klaro .cm-btn {
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent !important;
  transition: background-color .16s ease, border-color .16s ease;
}
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-success,
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  background: #070F2C !important;
  border-color: #070F2C !important;
  color: #5CD6FF !important;
}
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
  background: #1B2A55 !important;
  border-color: #1B2A55 !important;
  color: #F7F7F8 !important;
}
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-danger,
:is(#nx, html) .klaro .cookie-notice .cm-btn.cn-decline {
  background: transparent !important;
  border-color: rgba(7, 15, 44, .45) !important;
  color: #070F2C !important;
}
:is(#nx, html) .klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
:is(#nx, html) .klaro .cookie-notice .cm-btn.cn-decline:hover {
  border-color: #070F2C !important;
  background: rgba(7, 15, 44, .10) !important;
  color: #070F2C !important;
}

:is(#nx, html) .klaro .cm-modal .cm-btn.cm-btn-success {
  background: #5CD6FF !important;
  border-color: #5CD6FF !important;
  color: #070F2C !important;
}
:is(#nx, html) .klaro .cm-modal .cm-btn.cm-btn-danger,
:is(#nx, html) .klaro .cm-modal .cm-btn.cm-btn-decline {
  background: transparent !important;
  border-color: #2E3C6B !important;
  color: #B9C3D8 !important;
}
:is(#nx, html) .klaro .cm-btn.cm-btn-info,
:is(#nx, html) .klaro .cm-btn.cm-btn-sm {
  background: transparent !important;
  border-color: #2E3C6B !important;
  color: #B9C3D8 !important;
}

:is(#nx, html) .klaro .cookie-notice .cm-link,
:is(#nx, html) .klaro .cookie-notice a {
  color: #070F2C !important;
  text-decoration-color: rgba(7, 15, 44, .5);
}
:is(#nx, html) .klaro .cm-modal .cm-link,
:is(#nx, html) .klaro .cm-modal a {
  color: #5CD6FF !important;
  text-decoration-color: rgba(92, 214, 255, .45);
}

:is(#nx, html) .klaro .cookie-modal .cm-bg {
  background: rgba(2, 5, 16, .72) !important;
}
:is(#nx, html) .klaro .cm-modal .cm-header,
:is(#nx, html) .klaro .cm-modal .cm-footer {
  border-color: #1E2A50 !important;
}
:is(#nx, html) .klaro .cm-list-title {
  color: #F7F7F8 !important;
}
:is(#nx, html) .klaro .cm-list-description,
:is(#nx, html) .klaro .cm-caret {
  color: #8C97B8 !important;
}
:is(#nx, html) .klaro .cm-list-input:checked + .cm-list-label .slider {
  background: #5CD6FF !important;
}
:is(#nx, html) .klaro .cm-list-label .slider {
  background: rgba(247, 247, 248, .22) !important;
}
:is(#nx, html) .klaro .cm-list-label .slider::before {
  background: #F7F7F8 !important;
}
:is(#nx, html) .klaro .cm-list-input.required + .cm-list-label .slider {
  background: #2E3C6B !important;
}
:is(#nx, html) .klaro .cm-powered-by {
  display: none !important;
}

:is(#nx, html) .klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed !important;
  right: 22px !important;
  left: auto !important;
  bottom: 22px !important;
  width: 100% !important;
  max-width: 380px !important;
  box-shadow: 0 22px 54px rgba(2, 5, 16, .6) !important;
}
:is(#nx, html) .klaro .cookie-notice .cn-body {
  padding: 18px 20px 20px !important;
}
:is(#nx, html) .klaro .cn-body p,
:is(#nx, html) .klaro .cn-body span {
  font-size: .86rem !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
}
:is(#nx, html) .klaro .cn-ok {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 0 !important;
}
:is(#nx, html) .klaro .cn-buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}
:is(#nx, html) .klaro .cn-buttons .cm-btn {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  font-size: .82rem !important;
}
:is(#nx, html) .klaro .cn-learn-more {
  order: 2;
  flex: 0 0 100%;
  font-size: .78rem !important;
  margin: 4px 0 0 !important;
}

@media (max-width: 480px) {
  :is(#nx, html) .klaro .cookie-notice:not(.cookie-modal-notice):not(.x) {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   BETRIEB
   ========================================================================== */
.nx-betrieb .nx-map{
  display:grid; gap:var(--nx-gap); align-items:stretch; margin:32px 0 8px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
/* Beide Kaesten beginnen oben auf derselben Linie und sind gleich hoch */
.nx-betrieb .nx-map > *{ display:flex; flex-direction:column; }
.nx-betrieb .nx-map-vis{ justify-content:center; }
.nx-betrieb .nx-map-vis{
  padding:14px; border-radius:0;
  border:1px solid rgba(92,214,255,.24); background:rgba(0,154,255,.05);
}
.nx-betrieb .nx-map-vis svg{ display:block; width:100%; height:auto; }

.nx-betrieb .nx-map-ch{
  fill:rgba(0,154,255,.12);
  stroke:rgba(92,214,255,.55); stroke-width:.8; stroke-linejoin:round;
}

.nx-betrieb .nx-map-line{ fill:none; }
.nx-betrieb .nx-map-line--main{
  stroke:#5CD6FF; stroke-width:3; stroke-dasharray:7 5; stroke-linecap:round;
  animation:nx-map-flow 3s linear infinite;
}
.nx-betrieb .nx-map-line--thin{
  stroke:#009AFF; stroke-width:1; stroke-dasharray:4 6; opacity:.75;
}
.nx-betrieb .nx-map-line--out{
  stroke:currentColor; stroke-width:.7; stroke-dasharray:2 7; opacity:.45;
}
.nx-betrieb .nx-map-move{ fill:#5CD6FF; }

.nx-betrieb .nx-map-core{ fill:#009AFF; }
.nx-betrieb .nx-map-pin--main .nx-map-core{ fill:#5CD6FF; }
.nx-betrieb .nx-map-ring{
  fill:none; stroke:#009AFF; stroke-width:1;
  transform-origin:center; transform-box:fill-box;
}
.nx-betrieb .nx-map-pin--main .nx-map-ring{
  stroke:#5CD6FF; animation:nx-map-pulse 3s ease-out infinite;
}
.nx-betrieb .nx-map-ring--2{ animation-delay:1.5s; }

.nx-betrieb .nx-map-box{
  fill:rgba(136,135,128,.10); stroke:currentColor; stroke-width:.8;
  stroke-dasharray:5 4; opacity:.75;
}

.nx-betrieb .nx-map-lbl{ fill:currentColor; font-size:15px; font-weight:700; }
.nx-betrieb .nx-map-sub{
  fill:#5CD6FF; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.nx-betrieb .nx-map-sub--out{ fill:currentColor; opacity:.55; font-size:11px; letter-spacing:.08em; }

.nx-betrieb .nx-map-txt h3{ margin-top:0; }
.nx-betrieb .nx-map-txt p:last-child{ margin-bottom:0; }

/* Der Textteil neben der Karte ist jetzt eine Karte wie die beiden darunter */
.nx-root .nx-map-txt.hs-tier {
  padding: 26px 24px;
  border-top: 3px solid var(--nx-eis);
}
.nx-root .nx-map-txt.hs-tier > h3 {
  margin: 0 0 12px;
  font-family: var(--nx-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
}
.nx-root .nx-map-txt.hs-tier p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
}

@keyframes nx-map-pulse{
  0%   { transform:scale(.7); opacity:.9; }
  70%  { transform:scale(2.4); opacity:0; }
  100% { transform:scale(2.4); opacity:0; }
}
@keyframes nx-map-flow{ to { stroke-dashoffset:-24; } }

@media (prefers-reduced-motion:reduce){
  .nx-betrieb .nx-map-ring,
  .nx-betrieb .nx-map-line--main{ animation:none; }
  .nx-betrieb .nx-map-move,
  .nx-betrieb .nx-map-ring--2{ display:none; }
}

@media (max-width:860px){
  .nx-betrieb .nx-map{ grid-template-columns:1fr; gap:20px; }
}

.nx-betrieb .nx-note{
  margin:26px 0; padding:20px 24px; border-radius:0;
  border-left-width:3px; border-left-color:#5CD6FF;
  border:1px solid rgba(92,214,255,.3); background:rgba(0,154,255,.07);
}
.nx-betrieb .nx-note-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.nx-betrieb .nx-note-flag{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; padding:4px 11px; border-radius:0;
  font-size:.74rem; font-weight:700; letter-spacing:.08em;
  background:#009AFF; color:#fff;
}
.nx-betrieb .nx-note p{ margin:0 0 10px; }
.nx-betrieb .nx-note p:last-child{ margin-bottom:0; }

/* ==========================================================================
   SUPPORT
   ========================================================================== */
.nx-support .hs-base-cols .hs-tier{ display:flex; flex-direction:column; }
.nx-support .hs-tier .nx-status-hint{
  margin:18px 0 0; padding:14px 16px; border-radius:0;
  font-size:.86rem; line-height:1.55;
  border:1px dashed rgba(92,214,255,.34); background:rgba(0,154,255,.06);
}
.nx-support .hs-tier .hs-btn--block{ margin-top:auto; }
.nx-support .hs-tier .nx-status-hint + .hs-btn--block{ margin-top:22px; }
.nx-support .nx-status-hint a{ white-space:nowrap; }

/* ==========================================================================
   UEBER UNS
   ========================================================================== */
.nx-ueber #referenzen .hs-tiers{ align-items:stretch; }
.nx-ueber #referenzen .hs-tier{ display:flex; flex-direction:column; }
.nx-ueber #referenzen .hs-tier h3{ min-height:2.4em; }
.nx-ueber #referenzen .hs-tier-sub{ min-height:3.2em; }
.nx-ueber #referenzen .hs-tier .hs-btn--block{ margin-top:auto; }

.nx-ueber .nx-prinzipien{
  display:grid; gap:16px; margin-top:22px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.nx-ueber .nx-prinzip{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:24px 24px 20px; border-radius:0;
  border:1px solid var(--nx-tinte-linie); border-top:3px solid var(--nx-eis);
  background:var(--nx-karte);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.nx-ueber .nx-prinzip:hover{
  border-color:rgba(92,214,255,.45); background:rgba(0,154,255,.09);
  transform:translateY(-3px);
}
.nx-ueber .nx-prinzip b{
  position:relative; display:block; margin-bottom:8px;
  font-size:1.05rem; line-height:1.35;
}
.nx-ueber .nx-prinzip p{ margin:0 0 16px; }
.nx-ueber .nx-prinzip-tag{
  margin-top:auto; align-self:flex-start;
  padding:5px 12px; border-radius:0;
  font-family:var(--nx-mono);
  font-size:.66rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(92,214,255,.45); color:#5CD6FF;
}

@media (prefers-reduced-motion:reduce){
  .nx-ueber .nx-prinzip{ transition:none; }
  .nx-ueber .nx-prinzip:hover{ transform:none; }
}

@media (max-width:860px){
  .nx-ueber #referenzen .hs-tier h3,
  .nx-ueber #referenzen .hs-tier-sub{ min-height:0; }
}
/* ==========================================================================
   NINEXA KONFIGURATOR
   Ersetzt den bisherigen Konfigurator-Block am Ende von nx-ninexa.css,
   also alles ab dem Kommentar "NINEXA KONFIGURATOR -- an nx-ninexa.css
   anhaengen" bis zum Dateiende.

   Nutzt ausschliesslich die bestehenden Tokens: eckige Kanten
   (--nx-radius-sm = 0), Archivo fuer Titel, Jost fuer Kicker,
   Inter fuer Fliesstext, Palette aus --nx-tinte-linie und Verwandten.
   ========================================================================== */

/* --------------------------------------------------------------- Layout */
.nx-root .nx-grid {
  display: grid;
  gap: 22px;
  margin-top: 34px;
  align-items: start;
}
@media (min-width: 940px) {
  .nx-root .nx-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 38px;
  }
  .nx-root .nx-grid > .nx-side { grid-column: 2; grid-row: 1; }
  .nx-root .nx-grid > .nx-cfg  { grid-column: 1; grid-row: 1; }
}

.nx-root .nx-anchor {
  position: relative;
  top: -20px;
  height: 0;
}

/* ==========================================================================
   LINKE SPALTE: SCHRITTE
   ========================================================================== */
.nx-root .nx-cfg { display: grid; gap: 22px; }

.nx-root .nx-bar {
  height: 4px;
  background: rgba(4, 9, 30, .6);
  overflow: hidden;
}
.nx-root .nx-bar i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--nx-verlauf);
  transition: width .35s var(--nx-ease);
}
.nx-root .nx-count {
  margin: 14px 0 24px;
  font-family: var(--nx-mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}

.nx-root .nx-step[hidden] { display: none; }

.nx-root .nx-step-kopf {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.nx-root .nx-step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
  color: var(--nx-papier);
}
.nx-root .nx-step-kopf b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--nx-tinte);
}
.nx-root .nx-step-kopf > div > span {
  display: block;
  margin-top: 6px;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--nx-stahl);
  max-width: 60ch;
}

/* ------------------------------------------------------------- Schieber */
.nx-root .nx-slider-wrap {
  --nx-fuell: 10px;
  position: relative;
  padding: 0;
}

/* Hinweis, der zeigt, dass sich hier etwas bewegen laesst.
   Verschwindet, sobald der Regler einmal bedient wurde. */
.nx-root .nx-slider-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  transition: opacity .3s var(--nx-ease);
}
.nx-root .nx-slider-hint i {
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--nx-eis);
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-slider-hint i { animation: nxSchieb 2.4s var(--nx-ease) infinite; }
}
@keyframes nxSchieb {
  0%, 55%, 100% { transform: translateX(0); }
  70%           { transform: translateX(5px); }
  85%           { transform: translateX(-3px); }
}
.nx-root .nx-slider-wrap.is-beruehrt .nx-slider-hint {
  opacity: 0;
  pointer-events: none;
}

/* Die Schiene ist bis zur Griffmitte eingefaerbt */
.nx-root .nx-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    var(--nx-eis) 0, var(--nx-eis) var(--nx-fuell),
    rgba(4, 9, 30, .6) var(--nx-fuell), rgba(4, 9, 30, .6) 100%);
  border: 0;
  outline: none;
  margin: 0;
  cursor: pointer;
}

/* Griff mit zwei Rillen, damit er als Anfasser lesbar ist */
.nx-root .nx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--nx-eis)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23070F2C' opacity='.5'%3E%3Crect x='7.6' y='5.5' width='1.4' height='9'/%3E%3Crect x='11' y='5.5' width='1.4' height='9'/%3E%3C/g%3E%3C/svg%3E")
    center / 20px no-repeat;
  border: 0;
  box-shadow: 3px 3px 0 rgba(92, 214, 255, .22);
  cursor: grab;
  transition: box-shadow .16s var(--nx-ease);
}
.nx-root .nx-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  box-shadow: 0 0 0 7px rgba(92, 214, 255, .18);
}
.nx-root .nx-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--nx-eis)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23070F2C' opacity='.5'%3E%3Crect x='7.6' y='5.5' width='1.4' height='9'/%3E%3Crect x='11' y='5.5' width='1.4' height='9'/%3E%3C/g%3E%3C/svg%3E")
    center / 20px no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(92, 214, 255, .22);
  cursor: grab;
}
.nx-root .nx-slider::-moz-range-track {
  height: 6px;
  background: transparent;
  border: 0;
}
.nx-root .nx-slider:focus-visible { outline: 2px solid var(--nx-eis); outline-offset: 6px; }

/* Die Beschriftungen sitzen auf den Rastpunkten des Reglers, nicht in vier
   gleichen Spalten. Der Griff ist 20px breit, seine Mitte wandert also
   zwischen 10px und (100% - 10px) - genau darauf werden die Marken gesetzt. */
.nx-root .nx-slider-marks {
  position: relative;
  display: block;
  min-height: 1.5rem;
  margin-top: 12px;
}
.nx-root .nx-mark {
  position: absolute;
  top: 0;
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: var(--nx-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nx-stahl);
  cursor: pointer;
}
.nx-root .nx-mark:nth-child(1) { left: 0; }
.nx-root .nx-mark:nth-child(2) {
  left: calc(10px + (100% - 20px) / 3);
  transform: translateX(-50%);
}
.nx-root .nx-mark:nth-child(3) {
  left: calc(10px + (100% - 20px) * 2 / 3);
  transform: translateX(-50%);
}
.nx-root .nx-mark:nth-child(4) { right: 0; }
.nx-root .nx-mark.is-on { color: var(--nx-eis); }

.nx-root .nx-umfang-text {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: rgba(4, 9, 30, .5);
  border: 1px solid var(--nx-tinte-linie);
  border-left: 3px solid var(--nx-eis);
}
.nx-root .nx-umfang-text b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
}
.nx-root .nx-umfang-text span {
  display: block;
  margin-top: 4px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--nx-stahl);
}
.nx-root .nx-umfang-text .nx-umfang-preis {
  margin-top: 10px;
  font-weight: 600;
  color: var(--nx-eis);
  font-feature-settings: "tnum" 1;
}

/* Nur der Hinweis unter dem Schieberegler. Ohne die Eingrenzung auf .nx-cfg
   ueberschreibt diese Regel den EU-Kasten auf der Betriebsseite, der
   ebenfalls .nx-note heisst. */
.nx-root .nx-cfg .nx-note {
  margin: 16px 0 0;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--nx-stahl);
  max-width: 66ch;
}

/* --------------------------------------------- Liste hinter der Torfrage */
.nx-root .nx-sonder-liste {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root .nx-sonder-lead {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--nx-stahl);
  max-width: 60ch;
}

/* ------------------------------------- Optionskarten wie im Fragebogen */
.nx-root .nx-opts { display: grid; gap: 10px; }
@media (min-width: 1180px) {
  .nx-root .nx-opts--2 { grid-template-columns: 1fr 1fr; }
}

.nx-root .nx-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 15px 17px;
  text-align: left;
  background: rgba(4, 9, 30, .55);
  border: 1px solid rgba(247, 247, 248, .20);
  border-radius: var(--nx-radius-sm);
  font-family: var(--nx-body);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--nx-papier);
  cursor: pointer;
  transition: border-color .16s var(--nx-ease),
              background-color .16s var(--nx-ease),
              box-shadow .16s var(--nx-ease);
}
.nx-root .nx-opt:hover {
  background: rgba(4, 9, 30, .80);
  border-color: var(--nx-eis);
}
.nx-root .nx-opt.is-on {
  background: rgba(92, 214, 255, .12);
  border-color: var(--nx-eis);
  box-shadow: inset 0 0 0 1px var(--nx-eis);
}

.nx-root .nx-opt-mark {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: .16em;
  border: 1.5px solid var(--nx-tinte-linie);
  border-radius: 50%;
  background: transparent;
  transition: border-color .16s var(--nx-ease), background-color .16s var(--nx-ease);
}
.nx-root .nx-opt-mark.is-multi { border-radius: 5px; }
.nx-root .nx-opt.is-on .nx-opt-mark {
  border-color: var(--nx-eis);
  background: var(--nx-eis)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23070F2C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2 6.6-6.6'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.nx-root .nx-opt-txt { flex: 1 1 auto; min-width: 0; }
.nx-root .nx-opt-txt b {
  display: block;
  font-weight: 600;
  color: var(--nx-tinte);
}
.nx-root .nx-opt-txt i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--nx-stahl);
}
.nx-root .nx-opt-p {
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
  font-family: var(--nx-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--nx-stahl);
  font-feature-settings: "tnum" 1;
}
.nx-root .nx-opt.is-on .nx-opt-p { color: var(--nx-eis); }

/* ---------------------------------------------------------- Navigation */
.nx-root .nx-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root .nx-nav .hs-btn { margin-left: 0; }

/* Hinweis, der zum Weiterklicken einlaedt */
.nx-root .nx-nav-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
  padding-right: 4px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nx-stahl);
  text-align: right;
}
.nx-root .nx-nav-hint i {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1;
}
.nx-root .nx-nav-hint.is-stark {
  color: var(--nx-eis);
  font-size: .95rem;
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-nav-hint.is-stark i { animation: nxWink 1.9s var(--nx-ease) infinite; }
}
@keyframes nxWink {
  0%, 62%, 100% { transform: translateX(0); }
  74%           { transform: translateX(5px); }
  86%           { transform: translateX(0); }
}

@media (max-width: 640px) {
  .nx-root .nx-nav { flex-direction: column-reverse; align-items: stretch; }
  .nx-root .nx-nav .hs-btn { margin-left: 0; }
  .nx-root .nx-nav-hint {
    order: -1;
    margin: 0 0 4px;
    justify-content: center;
    padding-right: 0;
  }
}

/* ==========================================================================
   RECHTE SPALTE: ERGEBNIS
   ========================================================================== */
.nx-root .nx-side {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 22px;
  background: linear-gradient(158deg, #12305C 0%, #0B1A3D 54%, #0A1533 100%);
  border: 1px solid rgba(92, 214, 255, .34);
  box-shadow: 0 28px 64px rgba(2, 5, 16, .55), 8px 8px 0 rgba(92, 214, 255, .14);
}
.nx-root .nx-side::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nx-eis) 0%, rgba(92, 214, 255, .15) 62%, rgba(92, 214, 255, 0) 100%);
}
@media (min-width: 940px) {
  .nx-root .nx-side {
    top: 22px;
    padding: 26px 24px;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-tinte-linie) transparent;
  }
  .nx-root .nx-side::-webkit-scrollbar { width: 8px; }
  .nx-root .nx-side::-webkit-scrollbar-track { background: transparent; }
  .nx-root .nx-side::-webkit-scrollbar-thumb { background: var(--nx-tinte-linie); }
}

.nx-root .nx-side-kopf { display: block; }
.nx-root .nx-side-lbl {
  display: block;
  font-family: var(--nx-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root .nx-side-kopf > b {
  display: block;
  margin-top: 7px;
  font-family: var(--nx-display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.025em;
  color: var(--nx-papier);
}

/* Kein Rahmen um das Ganze: so beginnt "Paket" auf derselben Kante wie der
   Satz darueber. Hervorgehoben wird nur der Name. */
.nx-root .nx-side-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  font-family: var(--nx-mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root .nx-side-tag b {
  padding: 4px 11px;
  background: rgba(92, 214, 255, .14);
  border: 1px solid rgba(92, 214, 255, .42);
  font-family: var(--nx-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--nx-eis);
}

/* Zwei getrennte Kennzahlen: links die Erstellung, rechts der Betrieb.
   Jede mit eigener Einheit, damit nichts vermischt wird. */
.nx-root .nx-side-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 247, 248, .18);
}
.nx-root .nx-side-fig + .nx-side-fig {
  padding-left: 18px;
  border-left: 1px solid rgba(247, 247, 248, .18);
}
.nx-root .nx-side-fig b {
  display: block;
  margin-top: 7px;
  font-family: var(--nx-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--nx-eis);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.nx-root .nx-side-fig i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--nx-stahl-hell);
}

.nx-root .nx-side-warum {
  margin: 14px 0 0;
  padding: 10px 13px;
  background: rgba(92, 214, 255, .08);
  border-left: 3px solid var(--nx-eis);
  font-size: .83rem;
  line-height: 1.55;
  color: var(--nx-stahl-hell);
}
.nx-root .nx-side-delta {
  margin: 14px 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--nx-eis);
}

/* ------------------------------------------------------------- Schalter */
.nx-root .nx-pay-block { margin-top: 18px; }
.nx-root .nx-pay-lbl {
  display: block;
  margin-bottom: 8px;
  font-family: var(--nx-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
.nx-root .nx-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(4, 9, 30, .6);
  border: 1px solid var(--nx-tinte-linie);
}
.nx-root .nx-seg-btn {
  padding: 9px 6px;
  background: transparent;
  border: 0;
  font-family: var(--nx-body);
  color: var(--nx-stahl);
  text-align: center;
  cursor: pointer;
  transition: background-color .18s var(--nx-ease), color .18s var(--nx-ease);
}
.nx-root .nx-seg-btn b {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
}
.nx-root .nx-seg-btn span {
  display: block;
  margin-top: 3px;
  font-family: var(--nx-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.nx-root .nx-seg-btn:hover:not([disabled]):not(.is-on) { color: var(--nx-papier); }
.nx-root .nx-seg-btn.is-on {
  background: var(--nx-eis);
  color: var(--nx-dunkel);
}
.nx-root .nx-seg-btn[disabled] { opacity: .35; cursor: not-allowed; }
.nx-root .nx-seg-btn:focus-visible { outline: 2px solid var(--nx-eis); outline-offset: 1px; }

.nx-root .nx-pay-note {
  margin: 9px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--nx-stahl);
}

/* ------------------------------------------------- Aufklappen auf Mobile */
.nx-root .nx-side-more {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--nx-eis);
  cursor: pointer;
}
.nx-root .nx-side-more:hover { border-color: var(--nx-eis); }
@media (min-width: 940px) { .nx-root .nx-side-more { display: none; } }

@media (max-width: 939px) {
  .nx-root .nx-side-detail { display: none; }
  .nx-root .nx-side.is-open .nx-side-detail { display: block; }
}

/* --------------------------------------------------------- Aufstellung */
.nx-root .nx-side-calc {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 247, 248, .18);
  display: grid;
  gap: 0;
}
.nx-root .nx-side-calc li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(247, 247, 248, .18);
  font-size: .87rem;
}
.nx-root .nx-side-calc li:last-child { border-bottom: 0; }
.nx-root .nx-side-calc li span { color: var(--nx-stahl); }
.nx-root .nx-side-calc li b {
  color: var(--nx-papier);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.nx-root .nx-side-alt {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: rgba(92, 214, 255, .08);
  border: 1px solid rgba(92, 214, 255, .34);
  border-left: 3px solid var(--nx-eis);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--nx-stahl-hell);
}
.nx-root .nx-side-alt b { color: var(--nx-papier); }

.nx-root .nx-side-wahl,
.nx-root .nx-side-inc {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 247, 248, .18);
}
.nx-root .nx-side-wahl ul {
  margin: 11px 0 0;
  display: grid;
  gap: 9px;
  font-size: .85rem;
}
.nx-root .nx-side-wahl li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: baseline;
}
.nx-root .nx-side-wahl li span { color: var(--nx-stahl); }
.nx-root .nx-side-wahl li b { color: var(--nx-papier); font-weight: 600; }

.nx-root .nx-side-inc ul {
  margin: 11px 0 0;
  display: grid;
  gap: 7px;
  font-size: .86rem;
}
.nx-root .nx-side-inc li {
  position: relative;
  padding-left: 20px;
  color: var(--nx-papier);
}
.nx-root .nx-side-inc li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -.02em;
  font-family: var(--nx-mono);
  font-weight: 700;
  color: var(--nx-eis);
}
.nx-root .nx-side-immer {
  margin: 13px 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--nx-stahl);
}
.nx-root .nx-side-fine {
  margin: 16px 0 0;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--nx-stahl);
}
.nx-root .nx-side-actions { margin-top: 20px; }
.nx-root .nx-side-actions .hs-linkbtn { margin-top: 10px; font-size: .84rem; }

/* ==========================================================================
   WARUM EIN MONATSBETRAG
   Steht in der linken Spalte unter der Navigation und wandert mit den
   Schritten nach unten, damit neben der Ergebnisspalte keine Leere entsteht.
   ========================================================================== */
.nx-root .nx-warum {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--nx-tinte-linie);
}
.nx-root .nx-warum-titel {
  margin: 0 0 14px;
  font-family: var(--nx-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--nx-tinte);
}
.nx-root .nx-warum-text p {
  margin: 0 0 14px;
  max-width: 68ch;
  font-size: .93rem;
  line-height: 1.66;
  color: var(--nx-tinte-text);
}
.nx-root .nx-warum-text p:last-child { margin-bottom: 0; }

.nx-root .nx-warum-liste {
  margin-top: 22px;
  padding: 20px 22px;
  background: rgba(4, 9, 30, .5);
  border: 1px solid var(--nx-tinte-linie);
  border-left: 3px solid var(--nx-eis);
  display: grid;
  gap: 12px;
}
.nx-root .nx-warum-liste li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: .89rem;
  line-height: 1.5;
}
.nx-root .nx-warum-liste li b {
  font-family: var(--nx-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-eis);
}
.nx-root .nx-warum-liste li span { color: var(--nx-stahl); }

.nx-root .nx-warum-kopf {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nx-root .nx-warum-kopf b {
  font-family: var(--nx-mono);
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--nx-stahl);
}

@media (max-width: 560px) {
  .nx-root .nx-warum-liste li { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   ABLAUF ALS SERPENTINE
   Drei Schritte nach rechts, Wechsel in die zweite Reihe, drei zurueck.
   Alle sechs sind gleichzeitig sichtbar, ohne Scrollen.
   ========================================================================== */
.nx-root .nx-weg { margin-top: 34px; }

.nx-root .nx-weg-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 52px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nxweg;
}

.nx-root .nx-weg-liste > li {
  position: relative;
  counter-increment: nxweg;
}

/* Die zweite Reihe laeuft rueckwaerts: 4 rechts, 6 links */
.nx-root .nx-weg-liste > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.nx-root .nx-weg-liste > li:nth-child(5) { grid-column: 2; grid-row: 2; }
.nx-root .nx-weg-liste > li:nth-child(6) { grid-column: 1; grid-row: 2; }

/* Waagrechte Leitung, auf Hoehe der Symbolmitte */
.nx-root .nx-weg-liste > li:nth-child(1)::after,
.nx-root .nx-weg-liste > li:nth-child(2)::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 56px;
  top: 23px;
  height: 1px;
  background: var(--nx-tinte-linie);
}
.nx-root .nx-weg-liste > li:nth-child(4)::after,
.nx-root .nx-weg-liste > li:nth-child(5)::after {
  content: "";
  position: absolute;
  right: 100%;
  width: 56px;
  top: 23px;
  height: 1px;
  background: var(--nx-tinte-linie);
}

/* Pfeilspitzen: nach rechts in Reihe eins, nach links in Reihe zwei */
.nx-root .nx-weg-liste > li:nth-child(1)::before,
.nx-root .nx-weg-liste > li:nth-child(2)::before {
  content: "";
  position: absolute;
  left: calc(100% + 40px);
  top: 19px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--nx-eis);
  border-bottom: 1px solid var(--nx-eis);
  transform: rotate(-45deg);
}
.nx-root .nx-weg-liste > li:nth-child(4)::before,
.nx-root .nx-weg-liste > li:nth-child(5)::before {
  content: "";
  position: absolute;
  right: calc(100% + 40px);
  top: 19px;
  width: 8px;
  height: 8px;
  border-left: 1px solid var(--nx-eis);
  border-bottom: 1px solid var(--nx-eis);
  transform: rotate(45deg);
}

/* Der Wechsel in die zweite Reihe. Die Leitung laeuft erst unterhalb der
   Karte los, damit sie nicht durch Titel und Text des Schritts schneidet. */
.nx-root .nx-weg-umbruch {
  position: absolute;
  left: 23px;
  top: 100%;
  height: 38px;
  width: 1px;
  background: var(--nx-tinte-linie);
}
.nx-root .nx-weg-umbruch::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--nx-eis);
  border-bottom: 1px solid var(--nx-eis);
  transform: rotate(45deg);
}

.nx-root .nx-weg-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(92, 214, 255, .34);
  background: var(--nx-grund-mitte);
  color: var(--nx-eis);
}
.nx-root .nx-weg-icon svg { width: 24px; height: 24px; display: block; }

.nx-root .nx-weg-loop .nx-weg-icon {
  border-color: rgba(92, 214, 255, .6);
  background: rgba(92, 214, 255, .14);
}

.nx-root .nx-weg-liste b {
  display: block;
  margin-top: 16px;
  font-family: var(--nx-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
}
.nx-root .nx-weg-liste b::before {
  content: counter(nxweg) ".";
  margin-right: 7px;
  font-family: var(--nx-mono);
  font-weight: 400;
  color: var(--nx-eis);
}
.nx-root .nx-weg-liste p {
  margin: 7px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
}

.nx-root .nx-weg-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 11px;
  border: 1px solid rgba(92, 214, 255, .45);
  font-family: var(--nx-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-eis);
}

/* -------------------------------------------------- Eine Spalte auf schmal */
@media (max-width: 800px) {
  .nx-root .nx-weg-liste {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }
  .nx-root .nx-weg-liste > li:nth-child(4),
  .nx-root .nx-weg-liste > li:nth-child(5),
  .nx-root .nx-weg-liste > li:nth-child(6) {
    grid-column: 1;
    grid-row: auto;
  }
  .nx-root .nx-weg-liste > li { padding-left: 64px; }
  .nx-root .nx-weg-icon { position: absolute; left: 0; top: 0; }
  .nx-root .nx-weg-liste b { margin-top: 2px; }

  /* Senkrechte Leitung statt waagrechter */
  .nx-root .nx-weg-liste > li::after {
    content: "";
    position: absolute;
    left: 23px;
    right: auto;
    top: 52px;
    bottom: -34px;
    width: 1px;
    height: auto;
    background: var(--nx-tinte-linie);
  }
  .nx-root .nx-weg-liste > li:last-child::after { display: none; }
  .nx-root .nx-weg-liste > li::before { display: none; }
  .nx-root .nx-weg-umbruch { display: none; }
}

/* ------------------------------------------------------------ Bewegung
   Erst wenn das Script laeuft, wird eingeblendet. Ohne JavaScript bleibt
   der Ablauf sichtbar. */
.nx-root .nx-weg.is-ready .nx-weg-liste > li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--nx-ease), transform .45s var(--nx-ease);
}
.nx-root .nx-weg.is-ready .nx-weg-liste > li.is-in {
  opacity: 1;
  transform: none;
}

.nx-root .nx-weg.is-ready .nx-weg-icon svg > * {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.nx-root .nx-weg.is-ready .nx-weg-liste > li.is-in .nx-weg-icon svg > * {
  animation: nxDraw .85s var(--nx-ease) forwards;
}
.nx-root .nx-weg.is-ready .nx-weg-liste > li.is-in .nx-weg-icon svg > *:nth-child(2) { animation-delay: .12s; }
.nx-root .nx-weg.is-ready .nx-weg-liste > li.is-in .nx-weg-icon svg > *:nth-child(3) { animation-delay: .24s; }
.nx-root .nx-weg.is-ready .nx-weg-liste > li.is-in .nx-weg-icon svg > *:nth-child(4) { animation-delay: .36s; }

@keyframes nxDraw { to { stroke-dashoffset: 0; } }

.nx-root .nx-weg.is-ready .nx-weg-loop.is-in .nx-weg-icon {
  animation: nxTurn 1.6s var(--nx-ease) .5s 1;
}
@keyframes nxTurn {
  0%   { transform: rotate(0); }
  60%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-weg .nx-weg-liste > li { opacity: 1; transform: none; }
  .nx-root .nx-weg .nx-weg-icon svg > * { stroke-dashoffset: 0; }
}

/* ==========================================================================
   KLEINE BILDSCHIRME
   ========================================================================== */
@media (max-width: 640px) {
  .nx-root .nx-side { padding: 18px; box-shadow: none; }
  .nx-root .nx-side-zwei { gap: 14px; }
  .nx-root .nx-side-fig + .nx-side-fig { padding-left: 14px; }
  .nx-root .nx-side-fig b { font-size: 1.35rem; }
  .nx-root .nx-side-wahl li { grid-template-columns: 1fr; gap: 2px; }
  .nx-root .nx-step-kopf b { font-size: 1.12rem; }
}

/* ==========================================================================
   BETRIEB: OPTISCHE AUFWERTUNG
   ========================================================================== */

/* ------------------------------------------------- Hero mit Schichtbild */
.nx-root .nx-hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 940px) {
  .nx-root .nx-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
  .nx-root .nx-hero-grid .hs-head { margin-bottom: 0; }
}

.nx-betrieb .nx-schichten {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--nx-tinte-linie);
  background: rgba(4, 9, 30, .45);
}
.nx-betrieb .nx-schichten-kopf {
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  margin-bottom: 4px;
}
.nx-betrieb .nx-schicht {
  position: relative;
  padding: 13px 16px 13px 19px;
  border: 1px solid rgba(92, 214, 255, .22);
  background: rgba(0, 154, 255, .07);
}
.nx-betrieb .nx-schicht::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nx-eis);
  opacity: .45;
}
.nx-betrieb .nx-schicht b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-papier);
}
.nx-betrieb .nx-schicht span {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--nx-stahl-hell);
}
.nx-betrieb .nx-schichten-fuss {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-eis);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .nx-betrieb .nx-schicht {
    opacity: 0;
    animation: nxSchichtIn .5s ease-out forwards;
  }
  .nx-betrieb .nx-schicht:nth-of-type(1) { animation-delay: .10s; }
  .nx-betrieb .nx-schicht:nth-of-type(2) { animation-delay: .22s; }
  .nx-betrieb .nx-schicht:nth-of-type(3) { animation-delay: .34s; }
  .nx-betrieb .nx-schicht:nth-of-type(4) { animation-delay: .46s; }
  .nx-betrieb .nx-schichten-fuss {
    opacity: 0;
    animation: nxSchichtIn .5s ease-out .60s forwards;
  }
}
@keyframes nxSchichtIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------- Sprungleiste im Hero
   Gleiche Schaltflaechen wie bisher, nur ueber die volle Breite und in
   fuenf gleichen Spalten, damit keine umbricht. */
.nx-root .nx-sprungrow {
  display: grid;
  gap: 18px;
  margin-block: 34px 8px;
  grid-template-columns: repeat(4, 1fr);
}
.nx-betrieb .nx-sprungrow { grid-template-columns: repeat(5, 1fr); }
.nx-root .nx-sprungrow--6 { grid-template-columns: repeat(6, 1fr); }
.nx-root .nx-sprungrow .hs-btn { width: 100%; }

/* Die Zusicherungsliste bringt eine Trennlinie ueber die volle Breite mit.
   Direkt unter der Schaltflaechenreihe wirkt sie wie deren Unterstreichung,
   darum hier ohne Linie und mit mehr Luft. */
.nx-betrieb .hs-hero .hs-trust,
.nx-support .hs-hero .hs-trust,
.nx-ueber .hs-hero .hs-trust {
  border-top: 0;
  padding-top: 0;
  margin-top: 42px;
}
@media (max-width: 900px) {
  .nx-root .nx-sprungrow--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .nx-root .nx-sprungrow { grid-template-columns: repeat(2, 1fr); }
  .nx-betrieb .nx-sprungrow { grid-template-columns: repeat(3, 1fr); }
  .nx-root .nx-sprungrow--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .nx-root .nx-sprungrow { grid-template-columns: 1fr; }
  .nx-betrieb .nx-sprungrow { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------ Kennzahlenband */
.nx-betrieb .nx-fakten-band {
  border-top: 1px solid var(--nx-tinte-linie);
  border-bottom: 1px solid var(--nx-tinte-linie);
  background: rgba(4, 9, 30, .35);
}
.nx-betrieb .nx-fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-betrieb .nx-fakten li {
  padding: 26px 20px;
  text-align: center;
  border-left: 1px solid var(--nx-tinte-linie);
}
.nx-betrieb .nx-fakten li:first-child { border-left: 0; }
.nx-betrieb .nx-fakten b {
  display: block;
  font-family: var(--nx-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--nx-eis);
  font-feature-settings: "tnum" 1;
}
.nx-betrieb .nx-fakten span {
  display: block;
  margin-top: 8px;
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-stahl);
}
@media (max-width: 760px) {
  .nx-betrieb .nx-fakten { grid-template-columns: 1fr 1fr; }
  .nx-betrieb .nx-fakten li:nth-child(3) { border-left: 0; }
  .nx-betrieb .nx-fakten li:nth-child(-n+2) { border-bottom: 1px solid var(--nx-tinte-linie); }
  .nx-betrieb .nx-fakten b { font-size: 1.45rem; }
}

/* ------------------------------------------- Karten mit Akzent oben */
.nx-betrieb .hs-base-cols .hs-tier { border-top: 3px solid var(--nx-eis); }
.nx-betrieb .hs-base-cols .hs-tier:nth-child(2) {
  border-top-color: var(--nx-tinte-linie);
}
.nx-betrieb .hs-tier > h3 {
  font-family: var(--nx-display);
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

/* --------------------------------------------- Wartung: Takt sichtbar */
.nx-betrieb .hs-steps .hs-step { position: relative; overflow: hidden; }
.nx-betrieb .nx-takt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: var(--nx-eis);
}
.nx-betrieb .nx-takt[data-takt="laufend"]::before      { width: 100%; }
.nx-betrieb .nx-takt[data-takt="taeglich"]::before     { width: 70%; }
.nx-betrieb .nx-takt[data-takt="woechentlich"]::before { width: 40%; }
.nx-betrieb .nx-takt[data-takt="sofort"]::before {
  width: 100%;
  background: repeating-linear-gradient(90deg,
    var(--nx-eis) 0 8px, transparent 8px 14px);
}
.nx-betrieb .hs-steps .hs-step-n {
  border-color: rgba(92, 214, 255, .4);
  color: var(--nx-eis);
}

/* ------------------------------------------- Ablaufliste mit Leitung */
.nx-betrieb .hs-timeline li,
.nx-ueber .hs-timeline li {
  border-bottom: 0;
  padding: 14px 0 14px 46px;
}
.nx-betrieb .hs-timeline li::after,
.nx-ueber .hs-timeline li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 34px;
  bottom: -6px;
  width: 1px;
  background: var(--nx-tinte-linie);
}
.nx-betrieb .hs-timeline li:last-child::after,
.nx-ueber .hs-timeline li:last-child::after { display: none; }
.nx-betrieb .hs-timeline li::before,
.nx-ueber .hs-timeline li::before {
  left: 4px;
  top: 18px;
  width: 11px;
  height: 11px;
  content: "";
  border: 1px solid var(--nx-eis);
  background: var(--nx-grund-mitte);
  border-radius: 50%;
}

/* ==========================================================================
   SUPPORT: ZUSAGEN
   ========================================================================== */
.nx-support .nx-zusagen {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nxz;
}
@media (min-width: 900px) {
  .nx-support .nx-zusagen { grid-template-columns: repeat(3, 1fr); }
}

.nx-support .nx-zusagen > li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--nx-karte);
  border: 1px solid var(--nx-tinte-linie);
  border-top: 3px solid var(--nx-eis);
}
.nx-support .nx-zusage-nr {
  display: block;
  font-family: var(--nx-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--nx-stahl);
}
.nx-support .nx-zusagen b {
  display: block;
  margin: 12px 0 10px;
  font-family: var(--nx-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--nx-tinte);
}
.nx-support .nx-zusagen p {
  flex: 1;
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--nx-tinte-text);
}
/* flex:1 oben und margin-top:auto hier setzen die Kennzahl in allen drei
   Karten auf dieselbe Hoehe, unabhaengig von der Textlaenge. */
.nx-support .nx-zusage-wert {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--nx-eis);
}

/* Karten der drei Wege und der Umfangsliste mit Akzent */
.nx-support .hs-tiers .hs-tier { border-top: 3px solid var(--nx-eis); }
.nx-support .hs-base-cols .hs-tier { border-top: 3px solid var(--nx-eis); }
.nx-support .hs-base-cols .hs-tier:nth-child(2) { border-top-color: var(--nx-tinte-linie); }
.nx-support .hs-tier > h3 {
  font-family: var(--nx-display);
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

/* Die Wachtafel steht neben dem Abschnittskopf. Ohne diese Regel klebt sie
   an den Karten darunter, weil der Kopftext kürzer ist als die Tafel. */
.nx-root #zusagen .nx-hero-grid {
  align-items: start;
  margin-bottom: 40px;
  gap: clamp(28px, 4vw, 48px);
}
.nx-root #zusagen .nx-hero-grid .hs-head { margin-bottom: 0; }

/* ==========================================================================
   SUPPORT: WACHTAFEL IM HERO
   ========================================================================== */
.nx-support .nx-wacht {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--nx-tinte-linie);
  background: rgba(4, 9, 30, .45);
}
.nx-support .nx-wacht-kopf {
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  margin-bottom: 4px;
}
.nx-support .nx-wacht-zeile {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding: 13px 16px;
  border: 1px solid rgba(92, 214, 255, .22);
  background: rgba(0, 154, 255, .07);
}
.nx-support .nx-wacht-zeile i {
  grid-row: 1 / 3;
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nx-eis);
}
.nx-support .nx-wacht-zeile b {
  font-family: var(--nx-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-papier);
}
.nx-support .nx-wacht-zeile span {
  grid-column: 2;
  font-size: .83rem;
  line-height: 1.45;
  color: var(--nx-stahl-hell);
}
.nx-support .nx-wacht-fuss {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-eis);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .nx-support .nx-wacht-zeile i { animation: nxPuls 2.6s ease-in-out infinite; }
  .nx-support .nx-wacht-zeile:nth-of-type(2) i { animation-delay: .35s; }
  .nx-support .nx-wacht-zeile:nth-of-type(3) i { animation-delay: .70s; }
  .nx-support .nx-wacht-zeile:nth-of-type(4) i { animation-delay: 1.05s; }
}
@keyframes nxPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92, 214, 255, .55); }
  55%      { box-shadow: 0 0 0 7px rgba(92, 214, 255, 0); }
}

/* ==========================================================================
   UEBER UNS: MEILENSTEINE IM HERO UND KARTENAKZENTE
   ========================================================================== */
.nx-ueber .nx-meilen {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--nx-tinte-linie);
  background: rgba(4, 9, 30, .45);
}
.nx-ueber .nx-meilen-kopf {
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-stahl);
  margin-bottom: 4px;
}
.nx-ueber .nx-meilen-zeile {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(92, 214, 255, .22);
  background: rgba(0, 154, 255, .07);
}
.nx-ueber .nx-meilen-zeile b {
  font-family: var(--nx-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--nx-eis);
  font-feature-settings: "tnum" 1;
}
.nx-ueber .nx-meilen-zeile span {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--nx-stahl-hell);
}
.nx-ueber .nx-meilen-fuss {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-tinte-linie);
  font-family: var(--nx-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-eis);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .nx-ueber .nx-meilen-zeile {
    opacity: 0;
    animation: nxSchichtIn .5s ease-out forwards;
  }
  .nx-ueber .nx-meilen-zeile:nth-of-type(1) { animation-delay: .10s; }
  .nx-ueber .nx-meilen-zeile:nth-of-type(2) { animation-delay: .24s; }
  .nx-ueber .nx-meilen-zeile:nth-of-type(3) { animation-delay: .38s; }
  .nx-ueber .nx-meilen-fuss {
    opacity: 0;
    animation: nxSchichtIn .5s ease-out .52s forwards;
  }
}

/* Karten mit Akzent, zweite Spalte bewusst neutral */
.nx-ueber .hs-base-cols .hs-tier { border-top: 3px solid var(--nx-eis); }
.nx-ueber .hs-base-cols .hs-tier:nth-child(2) { border-top-color: var(--nx-tinte-linie); }
.nx-ueber .hs-tiers .hs-tier { border-top: 3px solid var(--nx-eis); }
.nx-ueber .hs-tier > h3 {
  font-family: var(--nx-display);
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

/* ==========================================================================
   STARTSEITE: KARTENAKZENTE
   ========================================================================== */
.nx-home .hs-ref { border-top: 3px solid var(--nx-eis); }

/* Die letzte Karte ist kein Projekt, sondern eine Einladung */
.nx-home .hs-refs > .hs-ref:last-child {
  border: 1px dashed var(--nx-tinte-linie);
  border-top: 3px dashed rgba(92, 214, 255, .55);
  background: rgba(4, 9, 30, .35);
}
.nx-home .hs-refs > .hs-ref:last-child:hover {
  border-color: var(--nx-eis);
  border-top-color: var(--nx-eis);
}

.nx-home .hs-quote { border-top: 3px solid var(--nx-tinte-linie); }
.nx-home .hs-quote .hs-stars { color: var(--nx-eis); }
/* ==========================================================================
   KONFIGURATOR: ERGEBNISSPALTE, HOEHE
   ========================================================================== */
.nx-root { --nx-kopf: 0px; }   /* Hoehe des fixen Headers, falls vorhanden */

@media (min-width: 940px) {
  .nx-root .nx-side {
    top: calc(var(--nx-kopf) + 22px);
    max-height: calc(100vh - var(--nx-kopf) - 44px);
  }
}
.nx-root .nx-umfang-hinweis {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(92, 214, 255, .10);
  border: 1px solid rgba(92, 214, 255, .34);
  border-left: 3px solid var(--nx-eis);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--nx-stahl-hell);
  max-width: 64ch;
}
.nx-root .nx-umfang-hinweis b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--nx-display);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nx-papier);
}
/* ==========================================================================
   NINEXA MODULE
   Ergaenzung zu nx-ninexa.css. Muss nach nx-ninexa.css geladen werden --
   die Regeln hier setzen auf den Tokens auf, die dort auf .nx-root
   definiert sind.
   ========================================================================== */

/* ==========================================================================
   KONFIGURATOR UND LEISTUNGSMATRIX
   Startseite: Schrittleiste, Optionskarten, Ergebnisblock, Matrix.
   ========================================================================== */

.nx-root{
  --nxa-eis:      var(--nx-eis, #5CD6FF);
  --nxa-signal:   var(--nx-signal, #009AFF);
  --nxa-grund:    var(--nx-grund-oben, #04091E);
  --nxa-flaeche:  rgba(4, 9, 30, .55);
  --nxa-flaeche-h:rgba(4, 9, 30, .80);
  --nxa-wahl:     rgba(92, 214, 255, .12);
  --nxa-linie:    var(--nx-tinte-linie, #1E2A50);
  --nxa-linie-fein:rgba(247, 247, 248, .12);
  --nxa-txt:      var(--nx-papier, #F7F7F8);
  --nxa-txt-2:    var(--nx-stahl-hell, #B9C3D8);
  --nxa-txt-3:    var(--nx-stahl, #8792AC);
  --nxa-display:  var(--nx-display, "Archivo", sans-serif);
  --nxa-mono:     var(--nx-mono, "Jost", sans-serif);
}
.nxa{color:var(--nxa-txt-2); font-size:16px; line-height:1.62}
.nxa *{box-sizing:border-box}

/* Der ganze Konfigurator steht in einem Kasten: Schrittleiste, Auswahl,
   Navigation und Ergebnis gehoeren zusammen und sollen auch so gelesen
   werden. Verlauf und Lichtkante wie beim Fragebogen im Kundenbereich.
   Die Regel haengt an der Kennung, nicht an der Klasse -- .nxa traegt auch
   das Faktenband und der Matrixblock. */
#nxa-root{
  position:relative; overflow:hidden;
  padding:clamp(26px, 3.4vw, 44px);
  background:linear-gradient(158deg, #12305C 0%, #0B1A3D 54%, #0A1533 100%);
  border:1px solid rgba(92, 214, 255, .34);
  box-shadow:0 28px 64px rgba(2, 5, 16, .55), 8px 8px 0 rgba(92, 214, 255, .14);
}
#nxa-root::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,
    var(--nxa-eis) 0%, rgba(92, 214, 255, .15) 62%, rgba(92, 214, 255, 0) 100%);
}

.nxa-rail{display:grid; gap:2px; margin-bottom:36px}
.nxa-rail button{
  all:unset; cursor:pointer; display:block; padding:12px 14px 14px;
  border-top:2px solid var(--nxa-linie); background:var(--nxa-flaeche);
  transition:background .15s;
}
.nxa-rail button:hover{background:var(--nxa-wahl)}
.nxa-rail button:focus-visible{outline:2px solid var(--nxa-eis); outline-offset:-2px}
.nxa-rail button[data-state="done"]{border-top-color:var(--nxa-signal)}
.nxa-rail button[data-state="now"]{border-top-color:var(--nxa-eis); background:var(--nxa-wahl)}
.nxa-n{
  font-family:var(--nxa-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nxa-txt-3); display:block;
}
.nxa-rail button[data-state="now"] .nxa-n{color:var(--nxa-eis)}
.nxa-rail button[data-state="done"] .nxa-n{color:var(--nxa-signal)}
.nxa-a{display:block; font-size:14px; color:var(--nxa-txt); margin-top:3px; line-height:1.35}
.nxa-rail button[data-state="todo"] .nxa-a{color:var(--nxa-txt-3)}

.nxa-rail-hint{
  display:flex; align-items:center; gap:14px; margin:0 0 14px;
  font-family:var(--nxa-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--nxa-txt-3);
}
.nxa-rail-hint i{font-style:normal; font-size:1rem; line-height:1; color:var(--nxa-eis)}
@media (prefers-reduced-motion:no-preference){
  .nxa-rail-hint i{animation:nxa-tipp 2.6s cubic-bezier(.4,0,.2,1) infinite}
}
@keyframes nxa-tipp{
  0%,58%,100%{transform:translateX(0)}
  72%{transform:translateX(5px)}
  86%{transform:translateX(-2px)}
}
.nxa-hak{font-style:normal; color:var(--nxa-eis)}
.nxa-rail button[data-state="todo"]:hover .nxa-a{color:var(--nxa-eis)}
.nxa-rail button::after{
  content:''; position:absolute; left:14px; bottom:9px;
  width:0; height:1px; background:var(--nxa-eis);
  transition:width .18s cubic-bezier(.4,0,.2,1);
}
.nxa-rail button{position:relative}
.nxa-rail button:hover::after{width:calc(100% - 28px)}
.nxa-frage{margin-bottom:32px}
.nxa-frage h3{font-family:var(--nxa-display); font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-.005em; color:var(--nxa-txt)}
.nxa-hint{color:var(--nxa-txt-2); font-size:14px; margin:0 0 20px; max-width:62ch}

/* grid-auto-rows: 1fr macht alle Zeilen gleich hoch, nicht nur die Karten
   innerhalb einer Zeile. Damit wirkt die Auswahl als ein Block. */
.nxa-opts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2px; align-items:stretch; grid-auto-rows:1fr;
}
/* Flex-Spalte, damit Titel oben und Preis unten sitzen -- ein 
   zentriert seinen Inhalt sonst senkrecht.
   Keine Prozenthoehe setzen: die Zeilenhoehe im Grid ist auto, eine
   Prozentangabe laesst die Karte ueber ihre Zeile hinauslaufen. Gleich
   hoch werden die Karten von selbst. */
.nxa-opt{
  all:unset; cursor:pointer; padding:16px 18px; min-width:0;
  display:flex; flex-direction:column; align-items:stretch;
  background:var(--nxa-flaeche); border:1px solid rgba(247,247,248,.20);
  transition:background .15s, border-color .15s;
}
.nxa-opt:hover{background:var(--nxa-flaeche-h); border-color:var(--nxa-eis)}
.nxa-opt:focus-visible{outline:2px solid var(--nxa-eis); outline-offset:-2px}
.nxa-opt[aria-pressed="true"]{background:var(--nxa-wahl); border-color:var(--nxa-eis); box-shadow:inset 0 0 0 1px var(--nxa-eis)}
.nxa-opt{position:relative}
.nxa-opt.has-nr{padding-right:46px}
.nxa-nr{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; border:1px solid var(--nxa-linie);
  font-family:var(--nxa-mono); font-style:normal; font-size:11px;
  line-height:1; color:var(--nxa-txt-3);
  transition:border-color .15s, color .15s;
}
.nxa-opt:hover .nxa-nr{border-color:var(--nxa-eis)}
.nxa-opt[aria-pressed="true"] .nxa-nr{
  border-color:var(--nxa-eis); background:var(--nxa-eis); color:#00142E;
}
.nxa-opt b{display:block; font-size:15px; font-weight:500; line-height:1.35; color:var(--nxa-txt)}
.nxa-opt span{
  display:block; flex:1 1 auto; font-size:13px; color:var(--nxa-txt-2);
  margin-top:4px; line-height:1.45;
}
.nxa-opt em{
  font-style:normal; display:block; margin-top:12px; padding-top:10px;
  border-top:1px solid var(--nxa-linie-fein);
  font-family:var(--nxa-mono); font-size:13px; color:var(--nxa-eis);
}
.nxa-opt[aria-pressed="true"] b::after{content:' \2713'; color:var(--nxa-eis)}
.nxa-opt.is-gesperrt{opacity:.35; cursor:not-allowed}
.nxa-opt.is-gesperrt:hover{background:var(--nxa-flaeche)}
.nxa-sperre{
  margin:0 0 20px; padding:14px 16px; font-size:14px; line-height:1.5;
  color:var(--nxa-txt-2); background:var(--nxa-flaeche);
  border-left:2px solid var(--nxa-eis);
}
.nxa-sperre b{color:var(--nxa-txt); font-weight:500}

/* Innerhalb des Kastens braucht der Ergebnisblock eine eigene Flaeche,
   damit er sich vom Verlauf abhebt. */
.nxa-erg{
  margin-top:34px; background:rgba(4, 9, 30, .5);
  border:1px solid rgba(92, 214, 255, .20); border-top:2px solid var(--nxa-eis);
}
.nx-warum{margin-top:56px}
.nxa-zahlen{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.nxa-fig{padding:20px 22px; background:var(--nxa-flaeche)}
.nxa-fig + .nxa-fig{box-shadow:-2px 0 0 var(--nxa-grund)}
.nxa-lbl{
  font-family:var(--nxa-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nxa-txt-3); display:block;
}
.nxa-betrag{font-family:var(--nxa-display); font-size:30px; font-weight:600; letter-spacing:-.02em; margin:4px 0 2px; line-height:1.1; color:var(--nxa-txt)}
.nxa-sub{font-size:13px; color:var(--nxa-txt-2)}
.nxa-fig ul{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--nxa-linie)}
.nxa-fig li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13px; color:var(--nxa-txt-2); padding:6px 0;
  border-bottom:1px solid var(--nxa-linie-fein);
}
.nxa-fig li span:last-child{font-family:var(--nxa-mono); color:var(--nxa-txt); white-space:nowrap}

.nxa-wahl{display:grid; grid-template-columns:1fr 1fr; gap:2px; border-top:1px solid var(--nxa-linie)}
.nxa-wahl-block{padding:16px 22px}
.nxa-wahl-block[hidden]{display:none}
.nxa-seg{display:flex; gap:2px; margin-top:8px}
.nxa-segbtn{
  all:unset; cursor:pointer; flex:1; text-align:center; padding:10px 8px;
  background:var(--nxa-grund); transition:background .15s;
}
.nxa-segbtn:hover{background:var(--nxa-wahl)}
.nxa-segbtn:focus-visible{outline:2px solid var(--nxa-eis); outline-offset:-2px}
.nxa-segbtn.is-on{background:var(--nxa-eis)}
.nxa-segbtn b{display:block; font-size:14px; font-weight:500; color:var(--nxa-txt)}
.nxa-segbtn i{
  display:block; font-style:normal; font-family:var(--nxa-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--nxa-txt-3);
}
.nxa-segbtn.is-on b, .nxa-segbtn.is-on i{color:#00142E}
.nxa-segbtn[disabled]{opacity:.3; cursor:not-allowed}

.nxa-fein{padding:12px 22px; font-size:12px; color:var(--nxa-txt-3); border-top:1px solid var(--nxa-linie); margin:0}
.nxa-nav{display:flex; gap:2px; margin-top:34px}
.nxa-nav button{
  all:unset; cursor:pointer; flex:1; text-align:center; padding:15px 20px;
  font-size:15px; font-weight:500; background:var(--nxa-wahl); color:var(--nxa-txt);
  transition:background .15s;
}
.nxa-nav button:hover{background:#16266b}
.nxa-nav button:focus-visible{outline:2px solid var(--nxa-eis); outline-offset:-2px}
.nxa-nav .nxa-primary{background:var(--nxa-signal); color:#00142E}
.nxa-nav .nxa-primary:hover{background:var(--nxa-eis)}
/* Puls nach innen: nach aussen liefe er ueber den Nachbarknopf. Der Knopf
   wandert dabei von Signal nach Eis und zurueck. Auf dem Knopf haelt er an,
   dort braucht es keinen Hinweis mehr. */
@media (prefers-reduced-motion:no-preference){
  .nxa-nav .nxa-primary{animation:nxa-puls 2.6s cubic-bezier(.4,0,.2,1) infinite}
  .nxa-nav .nxa-primary:hover,
  .nxa-nav .nxa-primary:focus-visible{animation:none}
}
@keyframes nxa-puls{
  0%, 100%{
    background:var(--nxa-signal);
    box-shadow:inset 0 0 0 0 rgba(92,214,255,0);
  }
  45%{
    background:var(--nxa-eis);
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.34);
  }
}
.nxa-nav button[disabled]{opacity:.35; cursor:not-allowed}

/* Der Abstand zur Schrittleiste steht bewusst nur hier. Traegt der
   Hinweis darunter ebenfalls einen oberen Rand, kollabieren die beiden
   und es greift nur der groessere Wert -- die Summe entsteht nie. */
.nxa-fakten{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin:0 0 40px; padding:0; list-style:none;
}
.nxa-fakten li{
  padding:18px 20px; background:var(--nxa-flaeche);
  border-top:2px solid var(--nxa-eis);
}
.nxa-fakten b{
  display:block; margin-bottom:6px;
  font-family:var(--nxa-display); font-size:1rem; font-weight:600;
  letter-spacing:-.02em; color:var(--nxa-txt);
}
.nxa-fakten span{
  display:block; font-size:.88rem; line-height:1.55; color:var(--nxa-txt-2);
}
@media (max-width:760px){
  .nxa-fakten{grid-template-columns:1fr}
}

.nxa-total{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:16px 22px; background:var(--nxa-wahl);
  border-top:1px solid var(--nxa-eis);
}
.nxa-total[hidden]{display:none}
.nxa-total-lbl{
  font-family:var(--nxa-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nxa-eis);
}
.nxa-total-wert{
  font-family:var(--nxa-display); font-size:26px; font-weight:600;
  letter-spacing:-.02em; color:var(--nxa-txt); line-height:1.1;
}
.nxa-total-sub{
  flex:1 0 100%; font-size:12px; color:var(--nxa-txt-3); margin:0;
}

.nxa-matrix-lead{font-size:15px; color:var(--nxa-txt-2); margin:0 0 22px; max-width:70ch}
.nxa-matrix-lead b{color:var(--nxa-eis); font-weight:500}
.nxa-matrix-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px}
.nxa-matrix{
  min-width:720px; display:grid;
  grid-template-columns:minmax(210px,1.5fr) repeat(5,1fr);
  column-gap:2px; row-gap:0;
}
/* Nur Spaltenfugen, keine Zeilenfugen: sonst bricht der Rahmen der
   aktiven Spalte an jeder Zeilenkante. */
.nxa-c{
  padding:13px 12px; background:var(--nxa-flaeche);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:14px; color:var(--nxa-txt-3); line-height:1.35;
}
.nxa-v + .nxa-v, .nxa-v{border-top:1px solid var(--nxa-linie-fein)}
.nxa-v{flex-direction:column; gap:0}
.nxa-mm{
  background:transparent; border-top:1px solid var(--nxa-linie-fein);
  justify-content:flex-start; text-align:left; padding-left:0; padding-right:20px;
  flex-direction:column; align-items:flex-start;
  font-size:14px; color:var(--nxa-txt-2);
}
.nxa-mm em{font-style:normal; font-size:12px; color:var(--nxa-txt-3); margin-top:2px}
.nxa-gruppe{
  grid-column:1/-1; padding:26px 0 10px;
  font-family:var(--nxa-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--nxa-eis);
}
.nxa-v.is-gross{font-family:var(--nxa-mono); font-size:17px}
.nxa-v em{
  display:block; font-style:normal; font-family:var(--nx-body, inherit);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--nxa-txt-3); margin-top:3px;
}
.nxa-v.is-aktiv em{color:var(--nxa-eis)}
.nxa-ja{font-style:normal; color:var(--nxa-eis); font-size:18px; line-height:1}
.nxa-nein{font-style:normal; color:var(--nxa-txt-3); opacity:.4; font-size:16px; line-height:1}

.nxa-c.is-aktiv{
  color:var(--nxa-txt); background:var(--nxa-wahl);
  box-shadow:inset 2px 0 0 var(--nxa-eis), inset -2px 0 0 var(--nxa-eis);
}
.nxa-v.is-aktiv{border-top-color:rgba(92,214,255,.16); font-weight:500}
.nxa-c.is-aktiv.is-oben{
  box-shadow:inset 2px 0 0 var(--nxa-eis), inset -2px 0 0 var(--nxa-eis), inset 0 2px 0 var(--nxa-eis);
}
.nxa-c.is-aktiv.is-unten{
  box-shadow:inset 2px 0 0 var(--nxa-eis), inset -2px 0 0 var(--nxa-eis), inset 0 -2px 0 var(--nxa-eis);
}
.nxa-matrix.is-neu .nxa-v.is-aktiv{animation:nxa-pop .55s cubic-bezier(.2,.9,.3,1)}
@keyframes nxa-pop{
  0%{background:var(--nxa-flaeche); color:var(--nxa-txt-3)}
  30%{background:var(--nxa-eis); color:#00142E}
  100%{background:var(--nxa-wahl); color:var(--nxa-txt)}
}

.nxa-kopf{
  flex-direction:column; gap:1px; padding-top:18px; padding-bottom:18px;
  border-top:none;
}
.nxa-mm.nxa-kopf{background:transparent; justify-content:flex-end; padding-bottom:20px}
.nxa-mm-kopf{
  font-family:var(--nxa-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nxa-txt-3);
}
.nxa-badge{
  font-family:var(--nxa-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#00142E; background:var(--nxa-eis);
  padding:3px 10px; margin-bottom:8px;
}
.nxa-badge[hidden]{display:none}
.nxa-name{
  font-family:var(--nxa-mono); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--nxa-txt-2);
}
.nxa-kopf.is-aktiv .nxa-name{color:var(--nxa-eis)}
.nxa-preis{font-family:var(--nxa-display); font-size:23px; font-weight:600; color:var(--nxa-txt-3); letter-spacing:-.02em; line-height:1.2}
.nxa-kopf.is-aktiv .nxa-preis{color:var(--nxa-txt); font-size:30px}
.nxa-einheit{font-size:11px; color:var(--nxa-txt-3)}

@media (max-width:640px){
  .nxa-zahlen{grid-template-columns:1fr}
  .nxa-wahl{grid-template-columns:1fr}
  .nxa-rail{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .nxa *{transition:none !important; animation:none !important}
}

/* ==========================================================================
   REFERENZEN
   Drei Karten nebeneinander, jede mit Screenshot in einem Browserrahmen.
   Darunter die Denkweise als Band ohne Kaesten -- vier Rahmen unter drei
   Karten waren zu viel Geschirr auf einem Tisch.
   Farben und Schriften kommen aus den Tokens auf .nx-root.
   ========================================================================== */
.nx-root .nxr-karten{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:var(--nx-gap); align-items:stretch; margin-top:8px;
}

.nx-root .nxr-karte{
  display:flex; flex-direction:column;
  background:var(--nx-karte); border:1px solid var(--nx-tinte-linie);
  border-top:3px solid var(--nx-eis);
  transition:border-color .22s var(--nx-ease), box-shadow .22s var(--nx-ease),
             transform .22s var(--nx-ease);
}
.nx-root .nxr-karte:hover{
  transform:translate(-3px, -3px);
  box-shadow:6px 6px 0 var(--nx-eis);
}

/* ---------------------------------------------------------- Screenshot */
/* Der Bildlink traegt tabindex -1 und aria-hidden: die Karte hat unten
   bereits einen Knopf zum selben Ziel, zweimal dasselbe waere fuer die
   Tastatur nur ein Umweg. */
.nx-root .nxr-bild{
  display:block; background:var(--nx-nebel-tief);
  border-bottom:1px solid var(--nx-tinte-linie);
  overflow:hidden; text-decoration:none;
}
.nx-root .nxr-rahmen{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px; background:rgba(4, 9, 30, .75);
  border-bottom:1px solid var(--nx-tinte-linie);
}
.nx-root .nxr-rahmen i{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:rgba(185, 195, 216, .28);
  transition:background .22s var(--nx-ease);
}
.nx-root .nxr-karte:hover .nxr-rahmen i:first-child{background:var(--nx-eis)}
.nx-root .nxr-rahmen em{
  margin-left:8px; font-style:normal; font-family:var(--nx-mono);
  font-size:.68rem; letter-spacing:.06em; color:var(--nx-stahl);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nx-root .nxr-bild img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 10; object-fit:cover; object-position:top center;
  transition:transform .55s var(--nx-ease);
}
.nx-root .nxr-karte:hover .nxr-bild img{transform:scale(1.04)}

/* -------------------------------------------------------------- Inhalt */
.nx-root .nxr-inhalt{
  display:flex; flex-direction:column; flex:1 1 auto; padding:22px 22px 24px;
}
.nx-root .nxr-tag{
  display:block; margin-bottom:9px;
  font-family:var(--nx-mono); font-size:.66rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nx-eis);
}
.nx-root .nxr-titel{
  font-family:var(--nx-display); font-size:1.32rem; font-weight:600;
  line-height:1.22; letter-spacing:-.03em; color:var(--nx-tinte); margin:0 0 7px;
}
.nx-root .nxr-claim{
  font-size:.95rem; line-height:1.5; color:var(--nx-stahl-hell); margin:0 0 20px;
}

/* Der Weg vom Problem zur Wirkung, als Leitung mit drei Punkten. */
.nx-root .nxr-weg{
  list-style:none; margin:0 0 22px; padding:0; display:grid; gap:0;
}
.nx-root .nxr-weg li{position:relative; padding:0 0 16px 28px}
.nx-root .nxr-weg li::before{
  content:""; position:absolute; left:5px; top:14px; bottom:0;
  width:1px; background:var(--nx-tinte-linie);
}
.nx-root .nxr-weg li:last-child{padding-bottom:0}
.nx-root .nxr-weg li:last-child::before{display:none}
.nx-root .nxr-weg li::after{
  content:""; position:absolute; left:0; top:4px;
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--nx-eis); background:var(--nx-karte);
}
.nx-root .nxr-weg li:last-child::after{background:var(--nx-eis)}
.nx-root .nxr-weg b{
  display:block; font-family:var(--nx-mono); font-size:.66rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nx-eis);
  margin-bottom:4px;
}
.nx-root .nxr-weg span{
  display:block; font-size:.89rem; line-height:1.55; color:var(--nx-tinte-text);
}
/* Der Knopf sitzt in allen drei Karten auf derselben Hoehe. */
.nx-root .nxr-cta{margin-top:auto}

/* ------------------------------------------------------------ Denkweise */
/* Ein eigener Kasten mit Verlauf und Lichtkante oben, wie der Fragebogen und
   der Ergebnisblock auf der Startseite. Er hebt sich damit von den flachen
   Karten darueber ab, statt sie zu wiederholen. */
.nx-root .nxr-denk{
  position:relative; overflow:hidden;
  margin-top:clamp(52px, 6vw, 80px);
  padding:clamp(32px, 4vw, 52px) clamp(24px, 3.5vw, 48px);
  background:linear-gradient(158deg, #12305C 0%, #0B1A3D 54%, #0A1533 100%);
  border:1px solid rgba(92, 214, 255, .34);
  box-shadow:0 28px 64px rgba(2, 5, 16, .55), 8px 8px 0 rgba(92, 214, 255, .14);
}
.nx-root .nxr-denk::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,
    var(--nx-eis) 0%, rgba(92, 214, 255, .15) 62%, rgba(92, 214, 255, 0) 100%);
}

.nx-root .nxr-denk-kopf{max-width:60ch; margin-bottom:clamp(28px, 3.5vw, 44px)}
.nx-root .nxr-denk-titel{
  font-family:var(--nx-display); font-size:clamp(1.5rem, 3vw, 2.05rem);
  font-weight:800; line-height:1.1; letter-spacing:-.035em;
  color:var(--nx-papier); margin:0 0 10px;
}
.nx-root .nxr-denk-lead{
  font-size:1rem; line-height:1.6; color:var(--nx-stahl-hell); margin:0;
}

.nx-root .nxr-denk-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:2px;
}
.nx-root .nxr-denk-liste li{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:stretch;
  padding:26px 24px;
  background:rgba(4, 9, 30, .38);
  transition:background .22s var(--nx-ease);
}
/* Der Textteil ist eine Spalte: Titel oben, Absatz dehnt sich, Etikett unten.
   Nur so stehen die Etiketten aller Eintraege einer Reihe auf einer Linie. */
.nx-root .nxr-denk-liste li > div{
  display:flex; flex-direction:column; align-items:flex-start;
}
.nx-root .nxr-denk-liste li:hover{background:rgba(4, 9, 30, .62)}

/* Die Ziffer als Umriss: gross genug, um zu tragen, leise genug, um dem
   Satz daneben nicht die Schau zu stehlen. */
.nx-root .nxr-denk-nr{
  align-self:start;
  font-family:var(--nx-display); font-size:2.9rem; font-weight:800;
  line-height:.85; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:1px rgba(92, 214, 255, .5);
  transition:color .22s var(--nx-ease), -webkit-text-stroke-color .22s var(--nx-ease);
}
.nx-root .nxr-denk-liste li:hover .nxr-denk-nr{
  color:rgba(92, 214, 255, .16);
  -webkit-text-stroke-color:var(--nx-eis);
}

/* Zwei Zeilen Mindesthoehe: die meisten Titel brauchen sie ohnehin, und die
   Absaetze beginnen dadurch in jeder Reihe auf derselben Linie. */
.nx-root .nxr-denk-liste b{
  display:block; margin-bottom:8px; min-height:2.6em;
  font-family:var(--nx-display); font-size:1.12rem; font-weight:600;
  line-height:1.3; letter-spacing:-.025em; color:var(--nx-papier);
}
.nx-root .nxr-denk-liste p{
  flex:1 1 auto;
  margin:0 0 16px; font-size:.92rem; line-height:1.62; color:var(--nx-stahl-hell);
}
.nx-root .nxr-denk-tag{
  display:inline-block; margin-top:auto; padding:5px 12px;
  border:1px solid rgba(92, 214, 255, .45);
  font-family:var(--nx-mono); font-size:.62rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--nx-eis);
}

@media (max-width:520px){
  .nx-root .nxr-denk-liste li{grid-template-columns:1fr; gap:10px; padding:22px 18px}
  .nx-root .nxr-denk-nr{font-size:2.2rem}
  /* Einspaltig steht nichts nebeneinander -- die Mindesthoehe erzeugt hier
     nur eine Luecke. */
  .nx-root .nxr-denk-liste b{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .nx-root .nxr-karte,
  .nx-root .nxr-bild img,
  .nx-root .nxr-rahmen i,
  .nx-root .nxr-denk-liste li,
  .nx-root .nxr-denk-nr{transition:none}
  .nx-root .nxr-karte:hover{transform:none}
  .nx-root .nxr-karte:hover .nxr-bild img{transform:none}
}