/* ---------- Pakete & Angebot / Pricing page ----------
   Reuses generic mk-* (module.css) for head, final card and FAQ.
   pp-* holds the plan cards and offer details. */

.pp-hero { padding-top: calc(var(--header-h) + 56px); }

/* Plan grid */
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; align-items: stretch; }
.pp-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px; }
.pp-card--featured { border-color: color-mix(in srgb, var(--nx-green) 50%, var(--border)); box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--nx-green) 28%, transparent), 0 16px 44px -16px color-mix(in srgb, var(--nx-green) 40%, transparent); }
.pp-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--nx-gradient-x); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-2); }

.pp-name { font-size: 19px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em; }
.pp-users { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.pp-desc { margin-top: 14px; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; min-height: 40px; }

.pp-price { margin-top: 22px; display: flex; align-items: baseline; gap: 4px; }
.pp-price .amt { font-size: 42px; font-weight: 800; letter-spacing: -0.025em; color: var(--fg-strong); line-height: 1; }
.pp-price .cur { font-size: 22px; font-weight: 700; color: var(--fg-strong); }
.pp-price--text .amt { font-size: 28px; letter-spacing: -0.01em; }
.pp-per { margin-top: 6px; font-size: 13px; color: var(--fg-subtle); }
.pp-note { margin-top: 4px; font-size: 12px; color: var(--fg-subtle); min-height: 16px; }

.pp-cta { margin-top: 24px; }
.pp-cta .btn { width: 100%; }

.pp-feats { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 13px; }
.pp-feats .hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); margin-bottom: 1px; }
.pp-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--fg); line-height: 1.45; }
.pp-feats .ci { flex-shrink: 0; color: var(--nx-green); margin-top: 1px; } .pp-feats .ci svg { width: 16px; height: 16px; }

/* Included-in-all strip */
.pp-incl { margin-top: 44px; text-align: center; }
.pp-incl .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); }
.pp-incl ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 16px; }
.pp-incl li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-muted); }
.pp-incl .ci { color: var(--nx-green); display: grid; place-items: center; } .pp-incl .ci svg { width: 15px; height: 15px; }

/* FAQ */
.pp-faq { max-width: 760px; margin: 0 auto; }
.pp-faq .mk-details { margin-top: 12px; }

@media (max-width: 940px){ .pp-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }