/* ============================================================
   Pricing-Karten — Premium-Rahmen + Featured-Holo-Ring.
   Port-Idee aus pricing-card-*.html: konsistenter Karten-Look mit
   Gradient-Stroke + Dark-Glass; die Featured-Karte (Pro) bekommt einen
   langsam rotierenden holographischen Conic-Ring (über @property-Winkel,
   kein Box-Rotate → kein Corner-Clip). Restyle-in-place, Tokens.
   Lädt nach dem Inline-Block → gewinnt.
   ============================================================ */
@property --pcard-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.price-card {
  --accent-rgb: 139, 92, 246;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xl);
  transition: transform .5s var(--ease-apple), box-shadow .45s var(--ease-apple);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 3px 14px rgba(var(--accent-rgb), 0.10);
}
.price-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  z-index: -2;
  background:
    radial-gradient(120% 36% at 50% 0%, rgba(139, 92, 246, 0.42), transparent 55%),
    linear-gradient(180deg,
      rgba(139, 92, 246, 0.30) 0%,
      rgba(240, 238, 230, 0.10) 20%,
      rgba(240, 238, 230, 0.05) 100%);
}
.price-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  z-index: -1;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.10) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-obsidian) 100%);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.55),
    0 8px 28px rgba(var(--accent-rgb), 0.22);
}

/* ── Pro Plus: Premium-Distinction (animierter Conic-Ring 8s + Glow) ── */
.price-card.pro-plus {
  --accent-rgb: 139, 92, 246;
  box-shadow:
    0 0 60px rgba(139, 92, 246, 0.18),
    0 0 120px rgba(255, 61, 129, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.4);
}
.price-card.pro-plus::before {
  background: conic-gradient(from var(--pcard-angle),
    #8B5CF6, #FF3D81, #FFB155, #8B5CF6);
  opacity: 0.9;
  filter: blur(0.3px) saturate(1.05);
  animation: pcard-holo-spin 8s linear infinite;
}
.price-card.pro-plus::after {
  background: linear-gradient(160deg,
    rgba(139, 92, 246, 0.12) 0%,
    rgba(255, 61, 129, 0.06) 50%,
    var(--bg-elevated) 100%);
}
/* Tier-Name + Preis in Pro-Plus mit Brand-Gradient */
.price-card.pro-plus .price-name {
  background: linear-gradient(110deg, #8B5CF6, #FF3D81, #FFB155);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Featured (Pro): rotierender Holo-Ring ── */
.price-card.featured { --accent-rgb: 255, 61, 129; }
.price-card.featured::before {
  background: conic-gradient(from var(--pcard-angle),
    #5BE9DC, #5B8FF9, #8B5CF6, #FF3D81, #FFB155, #5BE9DC);
  opacity: 0.85;
  filter: blur(0.3px) saturate(1.05);
  animation: pcard-holo-spin 7s linear infinite;
}
@keyframes pcard-holo-spin { to { --pcard-angle: 360deg; } }

/* ── Tier-Badges („Beliebteste" / „NEU") — Sticker-Look, hoch sichtbar ── */
.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-primary);
  white-space: nowrap;
  background: var(--bg-obsidian);
  border: 1.5px solid var(--color-k);
  box-shadow: 0 0 24px rgba(255, 61, 129, 0.5), 0 0 0 4px var(--bg-obsidian);
  text-shadow: 0 0 8px rgba(255, 61, 129, 0.6);
}
.price-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-k);
  box-shadow: 0 0 8px var(--color-k);
  animation: price-badge-pulse 2s ease-in-out infinite;
}
.price-badge--new {
  border-color: var(--color-t);
  box-shadow: 0 0 24px rgba(255, 177, 85, 0.5), 0 0 0 4px var(--bg-obsidian);
  text-shadow: 0 0 8px rgba(255, 177, 85, 0.6);
}
.price-badge--new::before { background: var(--color-t); box-shadow: 0 0 8px var(--color-t); }
@keyframes price-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) { .price-badge::before { animation: none; } }

/* Pricing-CTAs (gq-btn) volle Breite + an Karten-Unterkante */
.price-card .gq-btn.price-cta-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .price-card.featured::before { animation: none; }
}

/* ============================================================
   Batch 3.2 — Monthly/Yearly Billing-Toggle pro Karte + Save-Badge
   ============================================================ */
.billing-toggle {
  display: inline-flex;
  gap: 0;
  margin: 0 0 14px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.billing-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.60);
  font: 600 12.5px/1 'Outfit', sans-serif;
  letter-spacing: 0.01em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.billing-toggle-btn:hover { color: rgba(255, 255, 255, 0.85); }
.billing-toggle-btn.is-active {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.40);
}
.price-card.pro-plus .billing-toggle-btn.is-active {
  background: linear-gradient(135deg, #A855F7, #EC4899);
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.40);
}

/* Save-Badge bei Yearly-Auswahl */
.price-save-badge {
  display: inline-block;
  margin: -4px 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font: 700 11.5px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  color: #5BE9DC;
  background: rgba(91, 233, 220, 0.10);
  border: 1px solid rgba(91, 233, 220, 0.30);
  animation: price-save-pop 0.32s ease;
}
.price-save-badge[hidden] { display: none; }
@keyframes price-save-pop {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .price-save-badge { animation: none; }
  .billing-toggle-btn { transition: none; }
}