/* =========================================
   Pricing – Intiqore
   Abhängig von layout.css (Tokens/Buttons/Container)
   ========================================= */

.pricing-page {
  --accent: var(--brand);
  --panel: var(--surface);
  --line: var(--border);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-xxl: 32px;

  --gold: #f5c542;
}

/* ===== Sektionen (ohne Trennlinien!) ===================== */

.pricing-page .section {
  padding-block: clamp(26px, 3.2vw, 72px);
  position: relative;
}

/* optional weicher Rahmen bei .pricing--rounded, aber keine Lines zwischen Sections */
.pricing--rounded .section {
  border-radius: var(--radius-xl);
}

/* ===== Typo / Intro ====================================== */

.pricing-page .headline {
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.02em;
  display: inline-block;
  position: relative;
}

.pricing-page .h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
}

.pricing-page .h3 {
  font-size: clamp(1.35rem, 2.8vw, 2.2rem);
}

.pricing-page .sub {
  color: var(--muted);
  max-width: 70ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.pricing-page .eyebrow {
  margin-bottom: 6px;
}

/* Intro-Wrapper mit leichter Aura */

.pricing-page .pricing-intro .container {
  position: relative;
}

.pricing-page .pricing-intro header {
  max-width: 780px;
  position: relative;
  z-index: 1;
}

.pricing-page .pricing-intro header::before {
  content: "";
  position: absolute;
  inset: -14px -18px auto -18px;
  background:
    radial-gradient(circle at 0 0, rgba(239,68,68,0.14), transparent 70%),
    radial-gradient(circle at 100% 0, rgba(129,140,248,0.12), transparent 70%);
  opacity: 0.9;
  filter: blur(4px);
  border-radius: 24px;
  pointer-events: none;
  z-index: -1;
}

/* ===== kleine Trust-Row ===================== */

.pricing-page .trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  justify-content: center;
  text-align: center;
}

/* Startzustand */
.pricing-page .trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,253,0.28);

  /* Typo responsiver */
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  font-weight: 600;

  background-color: color-mix(in oklab, var(--brand) 26%, transparent);
  color: var(--text);

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

/* Beim Einblenden */
.pricing-page .trust-row.in .trust-pill:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.pricing-page .trust-row.in .trust-pill:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.33s;
}
.pricing-page .trust-row.in .trust-pill:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.66s;
}

/* ===== Billing Toggle (optisch) =========================== */

.pricing-page .billing-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 80%, var(--accent) 20%);
  background:
    radial-gradient(circle at 0 0, rgba(239,68,68,0.16), transparent),
    rgba(5,10,22,0.98);
  gap: 4px;
  margin-top: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
  font-size: 0.8rem;
}

.pricing-page .billing-toggle span {
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0.6;
}

.pricing-page .billing-toggle span.is-active {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 90%, #fff 10%),
    var(--accent)
  );
  color: #fff;
  opacity: 1;
}

/* ===== Plans Grid ========================================= */

.pricing-page .plans {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 22px;
}

/* Tablet: etwas Luft, aber noch 1 Spalte für bessere Lesbarkeit */
@media (min-width: 760px) and (max-width: 979px) {
  .pricing-page .plans {
    gap: 18px;
  }
}

/* Desktop: 2 Spalten */
@media (min-width: 980px) {
  .pricing-page .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* ===== Plan Cards – Outline, Glow, Motion ================= */

.pricing-page .outline-card {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--line) 70%, var(--accent) 30%);
  border-radius: var(--radius-xxl);
  padding: clamp(16px, 2.6vw, 24px);
  background:
    radial-gradient(
      520px 220px at 14% 0%,
      color-mix(in oklab, var(--accent) 12%, transparent),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 98%, #000 2%),
      var(--panel)
    );
  box-shadow: 0 14px 36px rgba(0,0,0,0.34);
  transition:
    transform 0.22s var(--ease-out),
    border-color 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    background 0.22s var(--ease-out);
  overflow: hidden;
  transform: translateY(0);
}

/* Corner-Glow */
.pricing-page .outline-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
  opacity: 0.04;
  filter: blur(18px);
  pointer-events: none;
}

/* Hover-Effekt */
.pricing-page .outline-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: 0 22px 52px rgba(0,0,0,0.5);
  background:
    radial-gradient(
      520px 260px at 10% 0%,
      color-mix(in oklab, var(--accent) 16%, transparent),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 96%, #000 4%),
      var(--panel)
    );
}

/* ===== Badge ============================================== */

.pricing-page .badge {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.02)
  );
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== Plan-Kopf ========================================== */

.pricing-page .plan__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pricing-page .plan__emoji {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: rgba(15,23,42,0.96);
  border: 1px solid rgba(148,163,253,0.3);
}

.pricing-page .plan__title {
  margin: 0;
}

/* ===== Preisblock ========================================= */

.pricing-page .plan__price-row {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.pricing-page .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.pricing-page .price__value {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.2px;
}

.pricing-page .per {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
}

.pricing-page .fee {
  margin-top: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.pricing-page .fee-note {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ===== CTA im Plan ======================================== */

.pricing-page .plan__cta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Bullets ============================================ */

.pricing-page .bullets {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  color: var(--text);
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
}

.pricing-page .bullets li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: flex-start;
  gap: 0.4rem;
}

.pricing-page .bullets li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  color: color-mix(in oklab, var(--accent) 92%, #111);
  font-size: 11px;
}

/* ===== GOLD-PLAN Highlight ================================= */

.pricing-page .plan--gold {
  border-color: color-mix(in oklab, var(--gold) 70%, var(--line));
  background:
    radial-gradient(
      720px 320px at 0% 0%,
      color-mix(in oklab, var(--gold) 32%, transparent) 0%,
      color-mix(in oklab, var(--gold) 20%, transparent) 40%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 92%, var(--gold) 8%),
      var(--panel)
    );
  box-shadow:
    0 18px 46px rgba(0,0,0,0.6),
    0 0 38px rgba(245,197,66,0.18);
}

.pricing-page .plan--gold::after {
  opacity: 0.2;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold));
}

.pricing-page .plan--gold .badge {
  border-color: color-mix(in oklab, var(--gold) 70%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--gold) 34%, transparent),
    color-mix(in oklab, var(--gold) 16%, transparent)
  );
  color: #111827;
}

.pricing-page .plan--gold .badge::before {
  content: "★";
  font-size: 0.8rem;
}

/* Gold: Preisverlauf in Gradient */
.pricing-page .plan--gold .price__value {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--gold) 94%, #fff 6%),
    color-mix(in oklab, var(--gold) 68%, #b45309 32%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gold: Bullets */
.pricing-page .plan--gold .bullets li::before {
  border-color: color-mix(in oklab, var(--gold) 65%, var(--line));
  box-shadow: 0 0 14px rgba(245,197,66,0.32);
}

/* Gold Hover */
.pricing-page .plan--gold:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 64px rgba(0,0,0,0.75),
    0 0 56px rgba(245,197,66,0.22);
}

/* ===== Not-sure Band ====================================== */

.pricing-page .outline-band {
  border-radius: var(--radius-xxl);

  /* FIX: clamp war vertauscht. */
  padding: clamp(20px, 3vw, 50px);

  background:
    radial-gradient(
      520px 220px at 12% 0%,
      color-mix(in oklab, var(--accent) 14%, transparent),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--panel) 99%, #000 1%),
      var(--panel)
    );
  border: 1px solid color-mix(in oklab, var(--line) 80%, var(--accent) 20%);
  box-shadow: 0 14px 40px rgba(0,0,0,0.42);
  display: grid;
  gap: 8px;
}

/* Erste/letzte Zeile bündig mit dem Padding halten */
.pricing-page .outline-band > *:first-child {
  margin-top: 0;
}
.pricing-page .outline-band > *:last-child {
  margin-bottom: 0;
}

.pricing-page .outline-band .cta-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-page .outline-band .micro {
  font-size: 0.75rem;
}

/* ===== Reveal + Stagger ================================== */

.pricing-page .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.pricing-page .reveal.in {
  opacity: 1;
  transform: none;
}

.pricing-page [data-stagger] > * {
  --i: 0;
  transition-delay: calc(var(--i) * 90ms);
}

/* ===== Responsive Feinjustierung =========================== */

/* Große Phones */
@media (max-width: 720px) {
  .pricing-page .plans {
    gap: 14px;
  }

  .pricing-page .outline-card {
    padding: 14px;
    border-radius: var(--radius-xl);
  }

  .pricing-page .badge {
    top: 10px;
    right: 10px;
  }

  .pricing-page .price__value {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .pricing-page .bullets {
    gap: 0.4rem;
  }
}

/* Kleine Phones */
@media (max-width: 520px) {
  .pricing-page .section {
    padding-block: 22px;
  }

  .pricing-page .pricing-intro header {
    max-width: 100%;
  }

  .pricing-page .trust-row {
    gap: 8px 10px;
  }

  .pricing-page .trust-pill {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
  }

  .pricing-page .outline-band .cta-row a.btn {
    width: 100%;
    justify-content: center;
  }
}

/* Very small devices */
@media (max-width: 360px) {
  .pricing-page .outline-card {
    padding: 12px;
  }

  .pricing-page .bullets li {
    grid-template-columns: 16px 1fr;
  }

  .pricing-page .bullets li::before {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
}

/* ===== Reduced Motion ====================================== */

@media (prefers-reduced-motion: reduce) {
  .pricing-page * {
    transition: none !important;
    animation: none !important;
  }
}