/* Einheitliche CTA-Kachel am Seitenende — geteilte Quelle.
   Design = .ki-cta-karte der Produkt-Landingpages (dort steckt es im
   Inline-ki-Framework; diese Datei versorgt alle übrigen Seiten).
   Alle Regeln sind auf die Kachel gescopet, damit nichts anderes kollidiert.
   Bei Design-Änderungen: HIER ändern UND die Inline-Blöcke der Landingpages
   nachziehen (python3 scripts/check-cta-buttons.py prüft die Buttons). */

.ki-cta-karte {
  background: linear-gradient(135deg, var(--_colors---brand-colors--blue-dark, #011630), #073272 55%, var(--_colors---brand-colors--blue, #0150c9));
  border-radius: 28px;
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: clip;
  margin-top: 6rem;
  margin-bottom: -12px;
}
.ki-cta-karte h2, .ki-cta-karte > p { color: #fff; }
.ki-cta-karte > p { max-width: 620px; margin: 1.25rem auto 0; }
.ki-cta-karte .buttons-wrapper { margin-top: 2rem; }
.ki-cta-karte .bottom-cta-mini-wrapper-h { margin-top: 1.25rem; }

.ki-cta-karte .ki-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.ki-cta-karte .ki-aurora.ist-blau {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, #9ac1fe 0%, transparent 70%);
  opacity: .28;
  animation: cta-treiben 21s ease-in-out infinite;
}
@keyframes cta-treiben {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 50px) scale(1.15); }
}

/* Scroll-Einblendung — nur aktiv, wenn JS läuft (html.ki-js), sonst sichtbar (Crawler!) */
html.ki-js .ki-cta-karte.ki-anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
html.ki-js .ki-cta-karte.ki-anim.ki-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ki-cta-karte .ki-aurora { animation: none !important; }
  .ki-cta-karte.ki-anim { opacity: 1; transform: none; transition: none; }
}