/* ===========================================
   SEOlogical - Pricing Section CSS
   Zentralisiert aus index.html
   =========================================== */

/* Section-Background & Grundfarbwelt */
#pricing {
  --accent: #8b5cf6; /* lila soft */
  --accent-12: rgba(139, 92, 246, .12);
  --accent-16: rgba(139, 92, 246, .16);
  position: relative;
  background: radial-gradient(circle at 0% 0%, #f5f3ff 0, #ffffff 38%, #eff6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}
#pricing::before {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(129, 140, 248, .22), transparent 60%);
  opacity: .5;
  pointer-events: none;
}

/* Pulse-Dot im Subtitle */
#pricing .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  position: relative;
  /* CLS-Fix: GPU-optimierte Animationen verwenden (transform/opacity statt box-shadow) */
  animation: pricing-pulse-dot 1.8s ease-out infinite;
  will-change: transform, opacity;
}
/* Pseudo-Element für Glow-Effekt (GPU-optimiert) */
#pricing .pulse-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .45);
  opacity: 0;
  animation: pricing-pulse-glow 1.8s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes pricing-pulse-dot {
  0% { transform: scale(1) translateZ(0); }
  70% { transform: scale(1.5) translateZ(0); }
  100% { transform: scale(1) translateZ(0); }
}
@keyframes pricing-pulse-glow {
  0% { transform: scale(1) translateZ(0); opacity: 0.45; }
  70% { transform: scale(2) translateZ(0); opacity: 0; }
  100% { transform: scale(1) translateZ(0); opacity: 0; }
}

/* Subtitle-Pill etwas „glossier" */
#pricing .al-section-subtitle {
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border-color: rgba(148, 163, 184, .45);
}

/* Basis-Akzent (wird per JS je nach Modus neu gesetzt) – bestehend, leicht erweitert */
#pricing .pricing-mode__pill {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 18px rgba(2, 6, 23, .06),
    0 0 0 6px var(--accent-16) !important;
  outline: 1px solid var(--accent-12) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

/* CTAs bekommen subtilen lila Glow (12–16%) */
#pricing .al-cta-btn--glow {
  box-shadow:
    0 0 0 0 var(--accent-12),
    0 8px 24px rgba(15, 23, 42, .08);
}
#pricing .al-cta-btn--glow:hover {
  box-shadow:
    0 0 0 6px var(--accent-16),
    0 10px 26px rgba(15, 23, 42, .12);
}

/* Primärer Farb-Look der CTAs */
#pricing .al-cta-btn--primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1, #a855f7) !important;
  border-color: rgba(129, 140, 248, .7) !important;
}
#pricing .al-cta-btn--primary:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5, #a855f7) !important;
}
#pricing .al-cta-btn--primary .al-cta-icon {
  box-shadow: inset 0 1px 0 #fff, 0 1px 6px var(--accent-12);
  border-color: rgba(129, 140, 248, .55) !important;
  color: #4f46e5 !important;
  background: linear-gradient(180deg, #ffffff, #eef2ff) !important;
}

/* ROI-Zeile in Karten – leicht eingefärbt */
#pricing .pricing-roi {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(15, 23, 42, .02), rgba(148, 163, 184, .06));
  border: 1px solid rgba(148, 163, 184, .5);
  color: #020617;
  font-weight: 700;
  font-size: 13px;
}

/* Pricing-Karten optisch angehoben */
#pricing .pricing-card {
  background: radial-gradient(circle at 0 0, #f5f3ff 0, #ffffff 55%) !important;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .6);
  outline: none !important;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, .12),
    0 0 0 1px rgba(255, 255, 255, .85);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
  /* GPU-Optimierung für flüssige Hover-Transitions */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#pricing .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, .16),
    0 0 0 1px rgba(255, 255, 255, 0.01);
  border-color: rgba(129, 140, 248, .9);
  background: radial-gradient(circle at 0 0, #ede9fe 0, #ffffff 55%) !important;
}

/* Badges mit etwas mehr „Chip"-Charakter */
#pricing .pricing-card-badge-row .pricing-badge {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
}

/* Feature-Liste: kleines typografisches Tuning */
#pricing .pricing-feature-list {
  font-size: 13.5px;
  color: #475569;
}
#pricing .pricing-feature-item svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* Nachtexte etwas softer */
#pricing .pricing-aftertext {
  color: #6b7280 !important;
}

/* Aktive Tab-Typografie-Kontrast */
#pricing .pricing-mode__tab[aria-selected="true"] { color: #0f172a !important; }
#pricing .pricing-mode__tab[aria-selected="false"] { color: #475569 !important; }

/* Switch selbst etwas weicher */
#pricing .pricing-mode[] > div[role="group"] {
  background: radial-gradient(circle at 0 0, #eef2ff, #ffffff);
}