/* Vergleichsseite Free und Pro (pro.html, js/pro-page.js) – baut auf css/profile.css auf (Farben, Kopf, Knöpfe) */
.pr-intro { display: grid; gap: 12px; padding-top: 8px; }
.pr-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink); }
.pr-intro h1 { margin: 0; font: 700 clamp(30px, 5.5vw, 48px)/1.06 var(--font-body); letter-spacing: -.03em; color: var(--text-strong); text-wrap: balance; }
.pr-lead { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.pr-lead b { color: var(--text-strong); }

.pr-soon { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 211, 107, .45); background: rgba(255, 211, 107, .08); }
.pr-soon p { margin: 0; flex: 1 1 280px; color: var(--text); line-height: 1.5; }
.pr-badge { padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(255, 211, 107, .55); color: #ffd36b; font-size: 13px; font-weight: 700; white-space: nowrap; }

.pr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pr-plan { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.pr-plan.is-pro { border-color: rgba(145, 132, 217, .7); background: linear-gradient(160deg, rgba(145, 132, 217, .16), transparent 55%), var(--surface); box-shadow: 0 18px 50px -28px rgba(145, 132, 217, .7); }
.pr-plan h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 22px/1.2 var(--font-body); color: var(--text-strong); }
.pr-chip { padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, #9184d9, #c9b8ff); color: #160f2e; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pr-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pr-price b { font: 700 40px/1 var(--font-body); letter-spacing: -.02em; color: var(--text-strong); }
.pr-price span, .pr-plan-sub { color: var(--text-2); }
.pr-plan-sub { margin: 0; }
.pr-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; flex: 1; }
.pr-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; color: var(--text); }
.pr-list .ph { flex: none; margin-top: 3px; color: var(--acc-ink); }
.pr-list b { color: var(--text-strong); }
.pr-cta { justify-self: start; align-self: flex-start; }
.pr-cta:disabled { opacity: .6; cursor: not-allowed; }

.pr-table-wrap { display: grid; gap: 12px; }
.pr-table-wrap h2, .pr-faq h2 { margin: 0; font: 700 24px/1.2 var(--font-body); color: var(--text-strong); }
.pr-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.pr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-table th, .pr-table td { padding: 11px 16px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.pr-table thead th { border-top: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pr-table td, .pr-table thead th:not(:first-child) { width: 84px; text-align: center; }
.pr-table tbody th { font-weight: 500; color: var(--text); }
.pr-table tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--text-2); }
.pr-group th { padding-top: 18px; font-size: 12px; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink) !important; background: var(--surface-2); }
.pr-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(61, 220, 151, .15); color: #3ddc97; }
.pr-no { color: var(--muted); }
.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pr-faq { display: grid; gap: 10px; }
.pr-faq details { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pr-faq summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.pr-faq p { margin: 10px 0 0; line-height: 1.55; color: var(--text-2); }

@media (prefers-color-scheme: light) {
  .pr-badge { color: #8a5a00; border-color: rgba(176, 120, 0, .45); background: rgba(255, 211, 107, .2); }
  .pr-soon { border-color: rgba(176, 120, 0, .35); background: rgba(255, 211, 107, .12); }
  .pr-yes { color: #0f7a4a; }
}
@media (max-width: 520px) {
  .pr-table th, .pr-table td { padding: 10px 10px; }
  .pr-table td, .pr-table thead th:not(:first-child) { width: 56px; }
}
/* Preisangaben am Pro-Plan und Bestell-Vorschau (noch gesperrt) */
.pr-terms { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pr-order { display: grid; gap: 14px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.pr-order h2 { margin: 0; font: 700 24px/1.2 var(--font-body); color: var(--text-strong); }
.pr-order-sum { display: grid; gap: 8px; margin: 0; }
.pr-order-sum div { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pr-order-sum dt { color: var(--text-2); }
.pr-order-sum dd { margin: 0; color: var(--text); }
.pr-order-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pr-order-check input { width: 18px; height: 18px; margin: 2px 0 0; }
.pr-order-legal, .pr-order-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pr-order-legal a, .pr-order-sum a { color: var(--acc-2); }
.pr-order-btn { justify-self: start; }
.pr-order-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 520px) { .pr-order-sum div { grid-template-columns: 1fr; } }