.elementor-33093 .elementor-element.elementor-element-72eea04{--display:flex;--margin-top:-05px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c836aab *//* =========================================================
   S & C – UNIVERSAL FAQ HUB | PREMIUM GRID CLEANUP V2.2 FINAL
   EINZIGER finaler Zusatzblock
   Ganz unten nach ALLEN bisherigen CSS-Blöcken einfügen

   Universell nutzbar für FAQ-Hub-Seiten mit:
   #ni-hero-a / #ni-body-a
   .hub-cta / .faq-panel / .faq-grid / .faq-card
   .push-panel / .push-card / .legal-note

   Ziel:
   - FAQ-Karten nebeneinander sauberer und ruhiger
   - Tag-Pills in FAQ-Karten ausblenden
   - Antwort-Button als dezenter Link-Chip statt großer CTA
   - Desktop: Antwort-Button unten rechts
   - Mobile: Antwort-Button wirklich mittig zur gesamten Karte
   - Kartenhöhe kompakter
   - Badges ruhiger/kleiner
   - Desktop-Hover: Premium-Lift, weiche Schattierung, dezente Lichtfläche
   - Mobile: Badge links, Text links, Button zentriert über volle Kartenbreite
   - Mobile: Abstand Hero → Schnellcheck und Schnellcheck → FAQ angleichen
   - Abstand Hinweisbox oben/unten symmetrisch
   - Primary-Button-Innenkante entfernt
   - Weiterführende Links zentriert + farblich variiert
   - WhatsApp-FAB mobil etwas dezenter
   ========================================================= */


/* =========================================================
   00) PREMIUM DESIGN TOKENS
   ========================================================= */

#ni-hero-a,
#ni-body-a{
  --sc-hub-bg:#f4f8fc;

  --sc-hub-ink:#102233;
  --sc-hub-ink-soft:#24384c;
  --sc-hub-muted:#64758d;

  --sc-hub-border:rgba(205,218,233,.84);
  --sc-hub-border-soft:rgba(219,229,240,.78);

  --sc-hub-blue:#6e95bd;
  --sc-hub-blue-mid:#496f8f;
  --sc-hub-blue-deep:#253d52;

  --sc-hub-teal:#62aeb1;
  --sc-hub-teal-mid:#3d7d82;
  --sc-hub-teal-deep:#244f54;

  --sc-hub-gold:#c6a65a;
  --sc-hub-gold-mid:#a8893e;
  --sc-hub-gold-deep:#6b511d;

  --sc-hub-card-shadow:0 7px 17px rgba(17,34,54,.034);
  --sc-hub-card-shadow-hover:0 18px 34px rgba(17,34,54,.060);

  --sc-hub-end-gap:18px;

  background:var(--sc-hub-bg) !important;
}


/* =========================================================
   01) HERO – RUHIGER, OHNE SCHATTENBALKEN UNTEN
   ========================================================= */

#ni-hero-a{
  background:var(--sc-hub-bg) !important;
}

#ni-hero-a::before{
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(47,108,223,.12), transparent 62%),
    radial-gradient(780px 250px at 12% 22%, rgba(0,163,163,.075), transparent 62%),
    radial-gradient(760px 260px at 90% 18%, rgba(243,234,215,.48), transparent 66%) !important;
  opacity:1 !important;
}

#ni-hero-a .hub-head{
  box-shadow:none !important;
  border-color:rgba(209,223,237,.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.965) 0%, rgba(249,252,255,.90) 100%) !important;
}

#ni-hero-a .hub-head::before{
  opacity:.70 !important;
  filter:saturate(1.02) contrast(1.025) !important;
}

#ni-hero-a .hub-head::after{
  height:2px !important;
  opacity:.95 !important;
  background:linear-gradient(90deg,
    rgba(47,108,223,0) 0%,
    rgba(47,108,223,.38) 24%,
    rgba(0,163,163,.28) 58%,
    rgba(198,166,90,.50) 88%,
    rgba(198,166,90,0) 100%
  ) !important;
}

#ni-hero-a #faq-title{
  color:var(--sc-hub-ink) !important;
}

#ni-hero-a .hub-sub{
  color:#62728a !important;
}

#ni-hero-a .hub-chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(243,248,254,.76) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(219,229,240,.84),
    0 4px 11px rgba(17,34,54,.035) !important;
  color:#304b66 !important;
}

#ni-hero-a .hub-dot{
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.30), #5f86aa) !important;
}

#ni-hero-a .hub-media-frame{
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    linear-gradient(135deg,
      rgba(47,108,223,.38) 0%,
      rgba(0,163,163,.20) 50%,
      rgba(198,166,90,.50) 100%
    ) !important;
  box-shadow:0 14px 34px rgba(17,34,54,.105) !important;
}

#ni-hero-a .hub-media-frame::after{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    0 0 0 1px rgba(205,218,233,.96),
    inset 0 10px 20px rgba(255,255,255,.06) !important;
}


/* =========================================================
   02) SCHNELLCHECK / CTA – SAUBERER PRIMARY-BUTTON
   ========================================================= */

#ni-body-a .hub-cta{
  margin:14px 0 17px !important;
  border-radius:24px !important;
  border:1px solid rgba(197,214,230,.94) !important;
  background:
    radial-gradient(500px 165px at 50% -26%, rgba(47,108,223,.118), transparent 72%),
    radial-gradient(360px 145px at 90% 118%, rgba(198,166,90,.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.998) 0%, rgba(238,245,253,.975) 100%) !important;
  box-shadow:0 11px 25px rgba(17,34,54,.060) !important;
}

#ni-body-a .hub-cta::before{
  left:18px !important;
  right:18px !important;
  top:10px !important;
  height:2px !important;
  opacity:.95 !important;
  background:linear-gradient(90deg,
    rgba(47,108,223,0) 0%,
    rgba(47,108,223,.46) 28%,
    rgba(0,163,163,.30) 62%,
    rgba(198,166,90,.54) 92%,
    rgba(198,166,90,0) 100%
  ) !important;
}

#ni-body-a .hub-cta .headline{
  color:var(--sc-hub-ink) !important;
  letter-spacing:-.019em !important;
}

#ni-body-a .hub-cta .sub{
  color:var(--sc-hub-muted) !important;
}

/* Keine künstliche helle Innenkante oben */
#ni-body-a a.btn.primary{
  background:linear-gradient(180deg, #263847 0%, #172838 100%) !important;
  border:2px solid rgba(36,50,64,.12) !important;
  box-shadow:0 12px 24px rgba(17,34,54,.145) !important;
}

#ni-body-a a.btn.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(246,250,254,.94) 100%) !important;
  border-color:rgba(36,50,64,.34) !important;
  box-shadow:0 8px 18px rgba(17,34,54,.055) !important;
}

@media (hover:hover) and (pointer:fine){
  #ni-body-a a.btn.primary:hover{
    box-shadow:0 15px 28px rgba(17,34,54,.17) !important;
  }

  #ni-body-a a.btn.ghost:hover{
    border-color:rgba(47,108,223,.40) !important;
    box-shadow:0 12px 22px rgba(17,34,54,.075) !important;
  }
}


/* =========================================================
   03) FAQ PANEL – RUHIGER RAHMEN
   ========================================================= */

#ni-body-a .faq-panel{
  border-radius:24px !important;
  border:1px solid rgba(213,225,238,.90) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(239,245,251,.98) 100%) !important;
  box-shadow:0 12px 28px rgba(17,34,54,.055) !important;
}

#ni-body-a .faq-top{
  padding:18px 17px 13px !important;
}

#ni-body-a .faq-top h2{
  color:var(--sc-hub-ink) !important;
  letter-spacing:-.016em !important;
}

#ni-body-a .faq-top p{
  color:var(--sc-hub-muted) !important;
}


/* =========================================================
   04) FAQ GRID – SAUBERES 2-SPALTEN-SYSTEM
   ========================================================= */

#ni-body-a .faq-grid{
  gap:16px !important;
  padding:16px !important;
  align-items:stretch !important;
}

@media (min-width:860px){
  #ni-body-a .faq-grid{
    grid-template-columns:1fr 1fr !important;
  }
}


/* =========================================================
   05) FAQ-KARTEN – KOMPAKTER, RUHIGER, WENIGER UI-LÄRM
   ========================================================= */

#ni-body-a .faq-grid > a.faq-card{
  --faq-a:rgba(66,112,148,.045);
  --faq-b:rgba(72,132,137,.030);
  --faq-c:rgba(243,234,215,.095);

  --num-top:#496f8f;
  --num-mid:#2f5069;
  --num-bottom:#253d52;
  --num-ring:rgba(188,207,226,.72);
  --num-glow:rgba(47,108,223,.016);

  --faq-hover-border:rgba(180,202,224,.90);
  --faq-hover-shadow:0 18px 34px rgba(64,112,164,.070);

  position:relative !important;
  isolation:isolate !important;
  display:flex !important;
  height:100% !important;
  overflow:hidden !important;

  background:
    radial-gradient(250px 150px at 10% -8%, var(--faq-a), transparent 64%),
    radial-gradient(230px 150px at 92% -8%, var(--faq-b), transparent 66%),
    radial-gradient(300px 180px at 50% 120%, var(--faq-c), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.998) 0%, rgba(249,252,255,.970) 100%) !important;

  border:1px solid rgba(205,218,233,.80) !important;
  border-radius:18px !important;
  box-shadow:var(--sc-hub-card-shadow) !important;
  min-height:148px !important;

  transform:translateY(0) !important;
  transition:
    transform .18s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease !important;
}

/* Gruppe 1 – Grundlagen & Hauptfragen */
#ni-body-a .faq-grid > a.faq-card:nth-child(-n+4){
  --faq-a:rgba(66,112,148,.052);
  --faq-b:rgba(47,108,223,.022);
  --faq-c:rgba(243,234,215,.070);

  --num-top:#4f789c;
  --num-mid:#315a78;
  --num-bottom:#243d53;
  --num-ring:rgba(188,207,226,.76);
  --num-glow:rgba(47,108,223,.018);

  --faq-hover-border:rgba(163,194,224,.95);
  --faq-hover-shadow:0 18px 34px rgba(64,112,164,.080);
}

/* Gruppe 2 – Leistungsdetails & Entscheidungspunkte */
#ni-body-a .faq-grid > a.faq-card:nth-child(n+5):nth-child(-n+8){
  --faq-a:rgba(72,132,137,.044);
  --faq-b:rgba(0,163,163,.026);
  --faq-c:rgba(243,234,215,.085);

  --num-top:#4d7d90;
  --num-mid:#315f68;
  --num-bottom:#254653;
  --num-ring:rgba(183,211,218,.78);
  --num-glow:rgba(0,163,163,.018);

  --faq-hover-border:rgba(157,207,210,.95);
  --faq-hover-shadow:0 18px 34px rgba(58,137,139,.078);
}

/* Gruppe 3 – Spezialfragen & Vertiefung */
#ni-body-a .faq-grid > a.faq-card:nth-child(n+9){
  --faq-a:rgba(66,112,148,.034);
  --faq-b:rgba(198,166,90,.032);
  --faq-c:rgba(243,234,215,.135);

  --num-top:#52758d;
  --num-mid:#38586a;
  --num-bottom:#283f4f;
  --num-ring:rgba(204,211,210,.78);
  --num-glow:rgba(198,166,90,.020);

  --faq-hover-border:rgba(220,207,170,.96);
  --faq-hover-shadow:0 18px 34px rgba(198,166,90,.082);
}

/* Alte Pseudo-Fläche abschalten */
#ni-body-a a.faq-card::before{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* Premium-Hover-Lichtfläche */
#ni-body-a a.faq-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    radial-gradient(360px 170px at 18% 0%, rgba(255,255,255,.64), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 58%) !important;
  transition:opacity .20s ease !important;
}

@media (hover:hover) and (pointer:fine){
  #ni-body-a a.faq-card:hover{
    transform:translateY(-2px) !important;
    border-color:var(--faq-hover-border) !important;
    box-shadow:var(--faq-hover-shadow) !important;
  }

  #ni-body-a a.faq-card:hover::after{
    opacity:1 !important;
  }
}


/* =========================================================
   06) FAQ-INNER – SAUBERES CARD-GRID
   ========================================================= */

#ni-body-a .faq-inner{
  position:relative !important;
  z-index:2 !important;

  display:grid !important;
  grid-template-columns:44px 1fr !important;
  gap:15px !important;
  align-items:start !important;
  width:100% !important;
  height:100% !important;
  padding:15px 16px 14px !important;
}

#ni-body-a .faq-inner > div:last-child{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}


/* =========================================================
   07) FAQ-NUMMERN – RUNDE PREMIUM-SIEGEL, ABER RUHIGER
   ========================================================= */

#ni-body-a .faq-num{
  all:unset !important;
  box-sizing:border-box !important;

  position:relative !important;
  isolation:isolate !important;

  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  aspect-ratio:1 / 1 !important;

  border-radius:999px !important;
  -webkit-border-radius:999px !important;

  display:grid !important;
  place-items:center !important;

  margin-top:1px !important;

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  font-size:13.6px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
  color:#ffffff !important;

  background:
    radial-gradient(115% 115% at 30% 18%, rgba(255,255,255,.23), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--num-top) 0%, var(--num-mid) 55%, var(--num-bottom) 100%) !important;

  border:2px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 0 0 1px var(--num-ring),
    0 0 0 4px var(--num-glow),
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -4px 8px rgba(0,0,0,.12),
    0 6px 12px rgba(17,34,54,.085) !important;

  text-shadow:0 1px 0 rgba(0,0,0,.18) !important;
  overflow:visible !important;
  transition:box-shadow .18s ease, transform .18s ease !important;
}

/* Lichtreflex */
#ni-body-a .faq-num::before{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:7px !important;
  width:11px !important;
  height:5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.15) !important;
  filter:blur(.1px) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Außenring */
#ni-body-a .faq-num::after{
  content:"" !important;
  position:absolute !important;
  inset:-3px !important;
  border-radius:999px !important;
  border:1px solid rgba(205,222,239,.66) !important;
  background:transparent !important;
  box-shadow:0 0 0 2px rgba(47,108,223,.010) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

@media (hover:hover) and (pointer:fine){
  #ni-body-a a.faq-card:hover .faq-num{
    box-shadow:
      0 0 0 1px rgba(188,207,226,.84),
      0 0 0 4px rgba(47,108,223,.026),
      inset 0 1px 0 rgba(255,255,255,.25),
      inset 0 -4px 8px rgba(0,0,0,.12),
      0 9px 17px rgba(17,34,54,.105) !important;
  }
}


/* =========================================================
   08) FAQ-TEXTE – KOMPAKTER UND SAUBERER NEBENEINANDER
   ========================================================= */

#ni-body-a .faq-q{
  margin:1px 0 6px !important;
  color:var(--sc-hub-ink) !important;
  font-size:17.3px !important;
  line-height:1.21 !important;
  font-weight:950 !important;
  letter-spacing:-.018em !important;

  min-height:0 !important;
  text-wrap:balance !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

#ni-body-a .faq-mini{
  margin:0 !important;
  color:var(--sc-hub-muted) !important;
  font-size:14.1px !important;
  line-height:1.50 !important;

  min-height:0 !important;
  max-width:62ch !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
}


/* =========================================================
   09) FAQ-TAGS AUSBLENDEN + FOOTER SYSTEMATISIEREN
   ========================================================= */

#ni-body-a a.faq-card .tag{
  display:none !important;
}

#ni-body-a .faq-foot{
  margin-top:auto !important;
  min-height:28px !important;
  padding-top:10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
  flex-wrap:nowrap !important;
}


/* =========================================================
   10) FAQ-AKTION – DEZENTER LINK-CHIP STATT GROSSER BUTTON
   ========================================================= */

#ni-body-a .btn-visual{
  margin-left:auto !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:6px 10px !important;
  border-radius:999px !important;

  font-size:12.2px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  letter-spacing:-.006em !important;

  color:var(--sc-hub-ink) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,251,254,.82) 100%) !important;
  border:1px solid rgba(36,50,64,.24) !important;
  box-shadow:none !important;

  white-space:nowrap !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease !important;
}

@media (hover:hover) and (pointer:fine){
  #ni-body-a a.faq-card:hover .btn-visual{
    transform:translateX(2px) !important;
    border-color:rgba(36,50,64,.40) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,251,254,.94) 100%) !important;
    color:#0b1f30 !important;
  }
}


/* =========================================================
   11) WEITERFÜHRENDE LINKS – PANEL
   ========================================================= */

#ni-body-a .push-panel{
  margin-top:18px !important;
  border-radius:24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.980) 0%, rgba(246,250,254,.945) 100%) !important;
  border:1px solid rgba(213,225,238,.90) !important;
  box-shadow:0 13px 30px rgba(17,34,54,.050) !important;
}

#ni-body-a .push-top{
  padding:18px 18px 14px !important;
}

#ni-body-a .push-top h2{
  margin-bottom:7px !important;
  letter-spacing:-.016em !important;
  color:var(--sc-hub-ink) !important;
}

#ni-body-a .push-top p{
  color:var(--sc-hub-muted) !important;
}

#ni-body-a .push-grid{
  padding:17px !important;
  gap:16px !important;
}


/* =========================================================
   12) WEITERFÜHRENDE LINKS – KARTEN
   ========================================================= */

#ni-body-a .push-grid > a.push-card{
  position:relative !important;
  overflow:hidden !important;
  min-height:202px !important;
  padding:18px 16px 16px !important;
  border-radius:18px !important;
  box-shadow:0 8px 19px rgba(17,34,54,.040) !important;
  transition:
    transform .18s ease,
    box-shadow .20s ease,
    border-color .20s ease !important;
}

#ni-body-a .push-grid > a.push-card::before{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

#ni-body-a .push-grid > a.push-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    radial-gradient(300px 150px at 50% -10%, rgba(255,255,255,.60), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 58%) !important;
  transition:opacity .20s ease !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(1){
  background:
    linear-gradient(180deg, rgba(236,245,255,.86) 0%, rgba(255,255,255,.985) 42%, rgba(248,251,255,.965) 100%) !important;
  border:1px solid rgba(184,207,231,.96) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(2){
  background:
    linear-gradient(180deg, rgba(234,250,250,.86) 0%, rgba(255,255,255,.985) 42%, rgba(248,252,252,.965) 100%) !important;
  border:1px solid rgba(181,214,216,.96) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(3){
  background:
    linear-gradient(180deg, rgba(252,246,231,.965) 0%, rgba(255,255,255,.985) 42%, rgba(251,249,243,.975) 100%) !important;
  border:1px solid rgba(216,197,150,.98) !important;
}


/* =========================================================
   13) WEITERFÜHRENDE LINKS – ZENTRIERTES LAYOUT
   ========================================================= */

#ni-body-a .push-inner{
  position:relative !important;
  z-index:2 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:center !important;
  height:100% !important;
}

#ni-body-a .push-meta{
  width:100% !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}

#ni-body-a .push-title{
  width:100% !important;
  margin:0 0 6px !important;
  min-height:0 !important;
  font-size:17px !important;
  line-height:1.22 !important;
  letter-spacing:-.018em !important;
  color:var(--sc-hub-ink) !important;
  text-align:center !important;
  text-wrap:balance !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

#ni-body-a .push-title wbr{
  display:none !important;
}

#ni-body-a .push-text{
  width:100% !important;
  max-width:27ch !important;
  margin:0 auto !important;
  min-height:66px !important;
  color:var(--sc-hub-muted) !important;
  font-size:14px !important;
  line-height:1.52 !important;
  text-align:center !important;
}

#ni-body-a .push-foot{
  width:100% !important;
  margin-top:auto !important;
  padding-top:13px !important;
  display:flex !important;
  justify-content:center !important;
}


/* =========================================================
   14) WEITERFÜHRENDE LINKS – ICONS & BUTTONS
   ========================================================= */

#ni-body-a .push-ico{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  align-self:center !important;
  border-radius:13px !important;
  margin:0 0 2px !important;
  border:2px solid rgba(255,255,255,.96) !important;
  transition:
    transform .18s ease,
    box-shadow .20s ease,
    background .20s ease !important;
}

#ni-body-a .push-ico svg{
  width:20px !important;
  height:20px !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(1) .push-ico{
  color:#183852 !important;
  background:linear-gradient(180deg, rgba(64,112,164,.25) 0%, rgba(64,112,164,.115) 100%) !important;
  box-shadow:0 8px 16px rgba(64,112,164,.14), inset 0 -4px 8px rgba(0,0,0,.055) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(2) .push-ico{
  color:#173f42 !important;
  background:linear-gradient(180deg, rgba(58,137,139,.245) 0%, rgba(58,137,139,.115) 100%) !important;
  box-shadow:0 8px 16px rgba(58,137,139,.13), inset 0 -4px 8px rgba(0,0,0,.055) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(3) .push-ico{
  color:#4a3712 !important;
  background:linear-gradient(180deg, rgba(198,166,90,.42) 0%, rgba(198,166,90,.18) 100%) !important;
  box-shadow:0 8px 16px rgba(198,166,90,.18), inset 0 -4px 8px rgba(0,0,0,.055) !important;
}

#ni-body-a .push-pill{
  min-width:150px !important;
  justify-content:center !important;
  padding:9px 14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.980) 0%, rgba(247,250,253,.925) 100%) !important;
  box-shadow:0 5px 11px rgba(17,34,54,.026) !important;
  font-size:15.5px !important;
  line-height:1.15 !important;
  color:var(--sc-hub-ink) !important;
  border-radius:999px !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(1) .push-pill{
  border:2px solid rgba(64,112,164,.40) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(2) .push-pill{
  border:2px solid rgba(58,137,139,.38) !important;
}

#ni-body-a .push-grid > a.push-card:nth-child(3) .push-pill{
  border:2px solid rgba(198,166,90,.58) !important;
}


/* =========================================================
   15) DESKTOP-HOVER – WEITERFÜHRENDE LINKS
   ========================================================= */

@media (hover:hover) and (pointer:fine){
  #ni-body-a .push-grid > a.push-card:hover{
    transform:translateY(-2px) !important;
  }

  #ni-body-a .push-grid > a.push-card:hover::after{
    opacity:1 !important;
  }

  #ni-body-a .push-grid > a.push-card:hover .push-ico{
    transform:translateY(-1px) !important;
  }

  #ni-body-a .push-grid > a.push-card:hover .push-pill{
    transform:translateX(2px) !important;
  }

  #ni-body-a .push-grid > a.push-card:nth-child(1):hover{
    box-shadow:0 18px 34px rgba(64,112,164,.095) !important;
    border-color:rgba(164,198,231,.98) !important;
  }

  #ni-body-a .push-grid > a.push-card:nth-child(2):hover{
    box-shadow:0 18px 34px rgba(58,137,139,.090) !important;
    border-color:rgba(160,214,216,.98) !important;
  }

  #ni-body-a .push-grid > a.push-card:nth-child(3):hover{
    box-shadow:0 18px 34px rgba(198,166,90,.125) !important;
    border-color:rgba(216,193,135,.98) !important;
  }
}


/* =========================================================
   16) LEGAL NOTE – RUHIGER PREMIUM-ABSCHLUSS
   Inhalt bleibt unverändert, nur Optik wird veredelt.
   ========================================================= */

#ni-body-a .legal-note{
  position:relative !important;
  margin-top:var(--sc-hub-end-gap) !important;
  margin-bottom:0 !important;
  padding:15px 16px 15px 18px !important;
  border-radius:16px !important;
  background:
    radial-gradient(360px 130px at 4% 0%, rgba(47,108,223,.045), transparent 68%),
    radial-gradient(300px 110px at 92% 100%, rgba(198,166,90,.075), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(241,246,251,.92) 100%) !important;
  border:1px solid rgba(205,218,233,.92) !important;
  box-shadow:0 8px 18px rgba(17,34,54,.035) !important;
  color:var(--sc-hub-ink) !important;
  overflow:hidden !important;
}

#ni-body-a .legal-note::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:14px !important;
  bottom:14px !important;
  width:4px !important;
  border-radius:0 999px 999px 0 !important;
  background:linear-gradient(180deg, rgba(47,108,223,.46) 0%, rgba(0,163,163,.30) 58%, rgba(198,166,90,.46) 100%) !important;
  pointer-events:none !important;
}

#ni-body-a .legal-note strong{
  color:var(--sc-hub-ink) !important;
  font-weight:950 !important;
}

#ni-body-a .legal-note .legal-main{
  font-size:15px !important;
  line-height:1.62 !important;
}

#ni-body-a .legal-note .legal-mini{
  margin-top:8px !important;
  color:#53657c !important;
  font-size:13.3px !important;
  line-height:1.5 !important;
}


/* =========================================================
   17) ENDSPACING – OBEN / UNTEN SYMMETRISCH
   Abstand Push-/Rechner-Kachel → Hinweisbox
   = Abstand Hinweisbox → Footer
   ========================================================= */

#ni-body-a{
  padding-bottom:var(--sc-hub-end-gap) !important;
}

#ni-body-a .legal-note{
  margin-top:var(--sc-hub-end-gap) !important;
  margin-bottom:0 !important;
}


/* =========================================================
   18) MOBILE – TABLET / NORMALE SMARTPHONES
   ========================================================= */

@media (max-width:740px){
  #ni-hero-a{
    padding-bottom:16px !important;
  }

  #ni-body-a{
    --sc-hub-end-gap:16px;
    padding-top:0 !important;
    padding-bottom:var(--sc-hub-end-gap) !important;
  }

  #ni-body-a .hub-cta{
    padding:16px 14px 14px !important;
    margin:0 0 16px !important;
  }

  #ni-body-a .hub-cta .headline{
    font-size:17.2px !important;
    line-height:1.32 !important;
  }

  #ni-body-a .hub-cta .sub{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  #ni-body-a .faq-grid > a.faq-card{
    min-height:auto !important;
  }

  #ni-body-a .faq-inner{
    grid-template-columns:42px 1fr !important;
    gap:13px !important;
    padding:14px 13px 13px !important;
  }

  #ni-body-a .faq-num{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    font-size:13.2px !important;
  }

  #ni-body-a .faq-num::after{
    inset:-3px !important;
  }

  #ni-body-a .faq-q{
    font-size:16.7px !important;
    line-height:1.22 !important;
    min-height:0 !important;
    overflow-wrap:break-word !important;
  }

  #ni-body-a .faq-mini{
    font-size:13.9px !important;
    line-height:1.48 !important;
    min-height:0 !important;
  }

  #ni-body-a .push-grid > a.push-card{
    min-height:auto !important;
    padding:17px 15px 16px !important;
  }

  #ni-body-a .push-text{
    min-height:0 !important;
    max-width:34ch !important;
  }

  #ni-body-a .legal-note{
    margin-top:var(--sc-hub-end-gap) !important;
    margin-bottom:0 !important;
    padding:14px 15px 14px 17px !important;
  }

  #ni-body-a .legal-note .legal-main{
    font-size:14.4px !important;
    line-height:1.56 !important;
  }

  #ni-body-a .legal-note .legal-mini{
    font-size:12.9px !important;
    line-height:1.45 !important;
  }
}


/* =========================================================
   19) MOBILE – BUTTON WIRKLICH MITTIG ZUR GESAMTEN KARTE
   391px–740px:
   Text bleibt rechts neben der Nummer.
   Button läuft über die volle Kartenbreite.
   ========================================================= */

@media (max-width:740px) and (min-width:391px){
  #ni-body-a .faq-inner{
    display:grid !important;
    grid-template-columns:42px 1fr !important;
    grid-template-rows:auto auto auto !important;
    column-gap:13px !important;
    row-gap:0 !important;
    align-items:start !important;
  }

  #ni-body-a .faq-inner > div:last-child{
    display:contents !important;
  }

  #ni-body-a .faq-num{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:start !important;
  }

  #ni-body-a .faq-q{
    grid-column:2 !important;
    grid-row:1 !important;
    margin-top:1px !important;
  }

  #ni-body-a .faq-mini{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  #ni-body-a .faq-foot{
    grid-column:1 / -1 !important;
    grid-row:3 !important;

    width:100% !important;
    margin-top:0 !important;
    padding-top:9px !important;
    min-height:24px !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  #ni-body-a .btn-visual{
    margin-left:auto !important;
    margin-right:auto !important;
    align-self:center !important;
    font-size:12.3px !important;
    padding:6px 10px !important;
    border-color:rgba(36,50,64,.22) !important;
  }
}


/* =========================================================
   20) MOBILE – KLEINE SMARTPHONES
   Badge bleibt bis 390px links.
   ========================================================= */

@media (max-width:560px){
  #ni-hero-a{
    padding-bottom:14px !important;
  }

  #ni-hero-a .hub-head{
    padding:17px 15px 15px !important;
    gap:12px !important;
  }

  #ni-hero-a .hub-media-frame{
    width:142px !important;
    height:142px !important;
    padding:7px !important;
  }

  #ni-hero-a .hub-media-frame::after{
    inset:7px !important;
  }

  #ni-hero-a .hub-meta{
    gap:7px !important;
    margin-top:7px !important;
  }

  #ni-hero-a .hub-chip{
    padding:6px 9px !important;
    font-size:11.8px !important;
    gap:7px !important;
  }

  #ni-hero-a .hub-dot{
    width:7px !important;
    height:7px !important;
  }

  #ni-body-a .hub-cta{
    margin:0 0 14px !important;
  }

  #ni-body-a .faq-grid{
    padding:14px !important;
    gap:14px !important;
  }

  #ni-body-a .faq-inner{
    grid-template-columns:40px 1fr !important;
    gap:12px !important;
  }

  #ni-body-a .faq-num{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    font-size:12.8px !important;
  }

  #ni-body-a .faq-q{
    font-size:16.4px !important;
  }

  #ni-body-a .faq-mini{
    font-size:13.8px !important;
  }

  #ni-body-a .btn-visual{
    font-size:12.1px !important;
    padding:6px 10px !important;
  }
}


/* =========================================================
   21) MOBILE – SEHR KLEINE SCREENS
   Bis 390px wird gestapelt.
   Button bleibt mittig zur gesamten Karte.
   ========================================================= */

@media (max-width:390px){
  #ni-body-a{
    --sc-hub-end-gap:16px;
    padding-bottom:var(--sc-hub-end-gap) !important;
  }

  #ni-body-a .faq-inner{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  #ni-body-a .faq-inner > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    width:100% !important;
  }

  #ni-body-a .faq-num{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    margin-bottom:2px !important;
  }

  #ni-body-a .faq-q{
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }

  #ni-body-a .faq-foot{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    padding-top:8px !important;
    gap:0 !important;
  }

  #ni-body-a .btn-visual{
    margin-left:auto !important;
    margin-right:auto !important;
    align-self:center !important;
    width:auto !important;
  }

  #ni-body-a .push-grid{
    padding:14px !important;
  }

  #ni-body-a .legal-note{
    margin-top:var(--sc-hub-end-gap) !important;
    padding:13px 14px 13px 17px !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:360px){
  #ni-hero-a .hub-media-frame{
    width:134px !important;
    height:134px !important;
  }

  #ni-hero-a .hub-chip{
    font-size:11.4px !important;
    padding:6px 8px !important;
  }

  #ni-body-a .faq-q{
    font-size:16.1px !important;
  }

  #ni-body-a .faq-mini{
    font-size:13.6px !important;
  }

  #ni-body-a .btn-visual{
    font-size:11.9px !important;
    padding:6px 9px !important;
  }
}


/* =========================================================
   22) WHATSAPP-FAB – MOBILE ETWAS DEZENTER
   Universell für alle S & C WhatsApp-Widgets.
   ========================================================= */

@media (max-width:740px){
  [id^="sc-wa-widget-"]{
    right:calc(10px + env(safe-area-inset-right, 0px)) !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  [id^="sc-wa-widget-"] .scwa-fab{
    width:54px !important;
    height:54px !important;
    box-shadow:0 14px 30px rgba(37,211,102,.24) !important;
  }
}


/* =========================================================
   23) REDUCED MOTION – FINAL ABSICHERUNG
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  #ni-body-a a.faq-card,
  #ni-body-a a.faq-card::after,
  #ni-body-a a.push-card,
  #ni-body-a a.push-card::after,
  #ni-body-a a.btn,
  #ni-body-a .btn-visual,
  #ni-body-a .push-pill,
  #ni-body-a .push-ico,
  #ni-body-a .faq-num,
  [id^="sc-wa-widget-"] .scwa-fab{
    transition:none !important;
  }

  #ni-body-a a.faq-card:hover,
  #ni-body-a a.push-card:hover,
  #ni-body-a a.btn:hover,
  #ni-body-a a.faq-card:hover .btn-visual,
  #ni-body-a .push-grid > a.push-card:hover .push-pill,
  #ni-body-a .push-grid > a.push-card:hover .push-ico,
  [id^="sc-wa-widget-"] .scwa-fab:hover{
    transform:none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-72eea04 *//* =========================================================
   S & C – FAQ HUB CONTENT BACKGROUND FIX | SAFE
   Ziel:
   - Hintergrund nur im Artikel-/Contentbereich angleichen
   - Header, Menü, Topbar und Footer NICHT anfassen
   ========================================================= */

/* Hub selbst absichern */
#ni-hero-a,
#ni-body-a{
  background:#f4f8fc !important;
}

/* Nur Content-Container, die den Hub wirklich enthalten */
.entry-content:has(#ni-hero-a),
.wp-block-post-content:has(#ni-hero-a),
.site-main:has(#ni-hero-a),
.content-area:has(#ni-hero-a),
main:has(#ni-hero-a),
article:has(#ni-hero-a){
  background:#f4f8fc !important;
}

/* Elementor nur dann, wenn es wirklich der Content-Wrapper mit dem Hub ist */
.elementor-widget-container:has(#ni-hero-a),
.elementor-widget-wrap:has(#ni-hero-a),
.elementor-column:has(#ni-hero-a),
.elementor-section:has(#ni-hero-a){
  background:#f4f8fc !important;
}/* End custom CSS */