.elementor-31021 .elementor-element.elementor-element-72eea04{--display:flex;--margin-top:-05px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-31021 .elementor-element.elementor-element-11e62573{--display:flex;}.elementor-31021 .elementor-element.elementor-element-11e62573:not(.elementor-motion-effects-element-type-background), .elementor-31021 .elementor-element.elementor-element-11e62573 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #F6F8FB 0%, #F6F8FB 100%);}.elementor-31021 .elementor-element.elementor-element-c8ce250 > .elementor-widget-container{margin:-27px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c836aab *//* ========================================================================== */
/*  KOSTEN-FARBTHEMA – Slate Blue + Preis-Grün
    Einfach komplett ins Feld „Individuelles CSS“ kopieren.
    (Überschreibt die im Artikel gesetzten --c-* Tokens per !important)
   ========================================================================== */

/* 00) TOKENS: Die Variablen, die dein Artikel wirklich nutzt (JB-2026) */
#ni-hero-a, #ni-body-a{
  /* Kosten-Akzent (Slate Blue) */
  --c-brand:       #2F4F6F !important;
  --c-num:         #2F4F6F !important;
  --c-accent-soft: rgba(47,79,111,.30) !important;

  /* Semantik */
  --c-positive: #3E6B4E !important;  /* Preis/positiv */
  --c-warn:     #C97A2B !important;  /* Hinweis */

  /* Panels/Borders (cleaner, finance-look) */
  --c-panel:   #ffffff !important;
  --c-panel-2: #F5F8FC !important;
  --c-panel-3: #EEF4FA !important;
  --c-border:  #D8E5F2 !important;

  /* Kleinkram */
  --num-bg-outer:#EEF4FA !important;
  --c-muted:    #52697F !important;
  --faq-hover:  #EEF4FA !important;
}

/* TOC hat eigene Tokens im Artikel – deshalb separat überschreiben */
#ni-body-a #ni-toc-a{
  --c-panel:       #ffffff !important;
  --c-border:      #D8E5F2 !important;
  --c-num:         #2F4F6F !important;
  --c-accent-soft: rgba(47,79,111,.30) !important;
  --c-muted:       #52697F !important;
}

/* 01) CTA (oben): sichtbar andere Farbwelt */
#ni-hero-a .ni-cta .primary{
  background:var(--c-brand) !important;
}
#ni-hero-a .ni-cta .ghost{
  color:var(--c-brand) !important;
  border-color:var(--c-brand) !important;
}

/* 02) H2-Nummern: Slate/Anthrazit-Verlauf (sichtbarer Unterschied) */
body #ni-body-a .ni-h2 .row > .num{
  background:linear-gradient(180deg,#3B5F7E 0%, #2F4F6F 55%, #243240 100%) !important;
  color:#fff !important;
}

/* Unterlinie unter der H2-Zeile */
#ni-body-a .ni-h2 .row::after{
  background:linear-gradient(90deg, transparent, rgba(47,79,111,.32), transparent) !important;
}

/* 03) STEPS: Kosten-Look */
#ni-body-a .ni-steps{
  background:linear-gradient(180deg, rgba(47,79,111,.94) 0%, rgba(36,50,64,.90) 100%) !important;
  border-color:var(--c-border) !important;
}

/* Verbindungslinie in Steps (kommt im Template nur ab Desktop) */
@media (min-width:861px){
  #ni-body-a .ni-steps::before{
    background:#54708A !important;
  }
}

/* Step-Kreis-Badges */
#ni-body-a .ni-step .num{
  background:linear-gradient(180deg, #92B0C8 0%, #3B5F7E 55%, #2F4F6F 100%) !important;
  color:#fff !important;
}

/* Step-Underline */
#ni-body-a .ni-step h3{
  text-decoration-color:rgba(47,79,111,.30) !important;
}

/* 04) SUMMARY: clean + Kosten-Akzent */
#ni-body-a .ni-summary{
  background:#ffffff !important;
  border:1px solid var(--c-border) !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px rgba(17,24,39,.06), 0 0 0 1px rgba(47,79,111,.14) !important;
}

/* Summary-Kacheln */
#ni-body-a .ni-summary li{
  background:linear-gradient(180deg, rgba(47,79,111,.06) 0%, rgba(47,79,111,.03) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(216,229,242,.90) !important;
  border-left:6px solid rgba(62,107,78,.40) !important; /* Preis-Grün als Marker */
}

/* Summary-Headline: Akzent-Unterlinie */
#ni-body-a .ni-summary > h2{
  position:relative;
}
#ni-body-a .ni-summary > h2::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px; bottom:.2em;
  background:linear-gradient(90deg, transparent, rgba(47,79,111,.30), transparent) !important;
  border-radius:2px;
}

/* 05) TOC: Panel + Links + Chips */
#ni-body-a #ni-toc-a .toc-panel{
  background:#fff !important;
  border:1px solid var(--c-border) !important;
  box-shadow:0 8px 20px rgba(17,24,39,.06), 0 0 0 1px rgba(47,79,111,.14) !important;
  border-radius:12px !important;
}

#ni-body-a #ni-toc-a .toc-hint{
  color:var(--c-muted) !important;
}

#ni-body-a #ni-toc-a .toc-link{
  background:linear-gradient(180deg, rgba(47,79,111,.06) 0%, rgba(47,79,111,.03) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(216,229,242,.90) !important;
  border-radius:12px !important;
}

#ni-body-a #ni-toc-a .toc-num{
  background:linear-gradient(180deg, #3B5F7E 0%, #2F4F6F 100%) !important;
  color:#fff !important;
}

/* TOC-Headline: Akzent-Unterlinie */
#ni-body-a #ni-toc-a .toc-head{
  position:relative;
}
#ni-body-a #ni-toc-a .toc-head::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px; bottom:.2em;
  background:linear-gradient(90deg, transparent, rgba(47,79,111,.30), transparent) !important;
  border-radius:2px;
}

/* 06) FAQ: ruhig, clean */
#ni-body-a .ni-faq{
  background:#fff !important;
  border:1px solid var(--c-border) !important;
  box-shadow:0 8px 22px rgba(17,24,39,.06) !important;
}

/* 07) Legal Note: klarer Rahmen + dezenter Inset */
#ni-body-a #fazit .legal-note{
  background:#fff !important;
  border:2px solid #243240 !important;
  box-shadow:0 8px 22px rgba(17,24,39,.08), inset 0 0 0 1px rgba(47,79,111,.10) !important;
}/* End custom CSS */