/* SocialRena — Paketkarten (Landingpage, Kabinett, Admin-Vorschau) */
.pc-toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: #eaf0f8; gap: 2px; position: relative; }
.pc-toggle button { position: relative; z-index: 1; border: 0; background: none; min-height: 42px; padding: 8px 20px; border-radius: 999px; font: 600 15px/1 var(--sr-font, sans-serif); color: #5d6480; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.pc-toggle button[aria-pressed="true"] { color: #10143a; }
.pc-toggle .pc-knob { position: absolute; z-index: 0; top: 5px; bottom: 5px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgb(28 59 110 / 10%); transition: left .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1); }
.pc-save { font-size: 12px; font-weight: 700; color: #167449; background: #e7f6ee; padding: 3px 8px; border-radius: 999px; }

.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; align-items: stretch; }
.pc-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 36px 32px 32px; background: #fff; border: 1px solid #e9eef6; border-radius: 28px; box-shadow: 0 8px 28px rgb(28 59 110 / 7%); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1); color: #10143a; font-family: var(--sr-font, sans-serif); text-align: left; }
.pc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgb(28 59 110 / 13%); }
.pc-card.is-hl { border: 2px solid transparent; background: linear-gradient(180deg, #f6f9ff, #fff 40%) padding-box, linear-gradient(105deg, #00b4ee, #087bfa 28%, #5742f5 55%, #a52bf4 80%, #cc38ef) border-box; box-shadow: 0 30px 70px rgb(87 66 245 / 18%); }
@media (min-width: 900px) { .pc-card.is-hl { transform: scale(1.03); } .pc-card.is-hl:hover { transform: scale(1.03) translateY(-6px); } }
.pc-card.is-current { border-color: #165dce; }
.pc-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(100deg, #0a8cf5, #3f63f6 45%, #8a3cf5 80%, #b43ff2); box-shadow: 0 8px 20px rgb(87 66 245 / 30%); }
.pc-name { font-family: var(--sr-font-display, var(--sr-font, sans-serif)); font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.pc-tag { color: #5d6480; font-size: 15px; line-height: 1.5; margin: 6px 0 0; min-height: 1.5em; }
.pc-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pc-amount { font-family: var(--sr-font-display, var(--sr-font, sans-serif)); font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-per { color: #707891; font-size: 15px; }
.pc-sub { color: #707891; font-size: 14px; min-height: 20px; margin-top: -12px; }
.pc-feats { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid #e9eef6; display: grid; gap: 12px; flex: 1; align-content: start; }
.pc-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.pc-feats li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: #e7f6ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167449' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.pc-card.is-hl .pc-feats li::before { background-color: #ece8ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235742f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.pc-feats li.off { color: #9aa3b8; text-decoration: line-through; text-decoration-color: rgb(154 163 184 / 60%); }
.pc-feats li.off::before { background: #f1f4f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; }
.pc-cta { width: 100%; }
.pc-note { text-align: center; font-size: 13px; color: #707891; margin: -8px 0 0; }
.pc-amount.flip { animation: pc-flip .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes pc-flip { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pc-card, .pc-amount.flip, .pc-toggle .pc-knob { transition: none; animation: none; } }

/* v1.18 – schönere Karten */
.pc-grid { gap: 28px; align-items: stretch; }
.pc-card { padding: 34px 30px 30px; gap: 18px; border-radius: 30px; overflow: hidden; }
.pc-card::before { content: ''; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(0 180 238 / 14%), transparent 70%); pointer-events: none; }
.pc-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 16px; color: #fff; box-shadow: 0 12px 24px -12px rgb(28 59 110 / 50%); }
.pc-ic svg { width: 26px; height: 26px; }
.pc-ic.c0 { background: linear-gradient(135deg, #3ad0ff, #087bfa); } .pc-ic.c1 { background: linear-gradient(135deg, #00b4ee, #5742f5 60%, #cc38ef); } .pc-ic.c2 { background: linear-gradient(135deg, #a52bf4, #e15cff); } .pc-ic.c3 { background: linear-gradient(135deg, #ffb340, #ff7a45); }
.pc-name { font-size: 26px; }
.pc-amount { font-size: 54px; }
.pc-lims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-lims span { display: grid; gap: 1px; padding: 10px 8px; border-radius: 14px; background: #f4f7fc; text-align: center; font-size: 12.5px; color: #707891; font-weight: 600; }
.pc-lims b { font-family: var(--sr-font-display, var(--sr-font, sans-serif)); font-size: 20px; color: #10143a; font-weight: 600; letter-spacing: -.02em; }
.pc-cta { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 54px; font-size: 16px; }
.pc-arr { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .pc-cta:hover .pc-arr { transform: translateX(4px); }
/* Hervorgehobenes Paket: dunkel & edel */
.pc-card.is-hl { color: #fff; border: 0; background: radial-gradient(120% 70% at 100% 0%, rgb(204 56 239 / 38%), transparent 60%), radial-gradient(100% 60% at 0% 100%, rgb(0 180 238 / 30%), transparent 60%), linear-gradient(165deg, #1a1f5c, #0d1238); box-shadow: 0 40px 90px -20px rgb(56 42 180 / 55%), inset 0 0 0 1px rgb(255 255 255 / 12%); }
.pc-card.is-hl::before { background: radial-gradient(circle, rgb(255 255 255 / 12%), transparent 70%); }
.pc-card.is-hl .pc-tag, .pc-card.is-hl .pc-per, .pc-card.is-hl .pc-sub, .pc-card.is-hl .pc-note { color: #bfc6ee; }
.pc-card.is-hl .pc-feats { border-color: rgb(255 255 255 / 14%); }
.pc-card.is-hl .pc-feats li::before { background-color: rgb(255 255 255 / 14%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.pc-card.is-hl .pc-lims span { background: rgb(255 255 255 / 9%); color: #bfc6ee; } .pc-card.is-hl .pc-lims b { color: #fff; }
.pc-card.is-hl .pc-amount { background: linear-gradient(100deg, #fff, #d9d2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-card.is-hl .pc-cta { background: #fff; color: #2b2f6b; box-shadow: 0 16px 34px -12px rgb(0 0 0 / 50%); }
.pc-card.is-hl .pc-cta:hover { background: #f1efff; }
.pc-card.is-hl .pc-badge { top: 22px; right: 22px; left: auto; transform: none; background: linear-gradient(100deg, #26c6ff, #8a6bff 55%, #e15cff); }
.pc-card.is-hl .pc-ic { box-shadow: 0 12px 30px -8px rgb(204 56 239 / 70%); }

/* Vergleichstabelle */
.cmp { margin-top: 96px; }
.cmp-title { text-align: center; font-family: var(--sr-font-display, var(--sr-font, sans-serif)); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.03em; margin: 0 0 32px; color: #10143a; }
.cmp-scroll { overflow-x: auto; border-radius: 28px; background: #fff; border: 1px solid #e9eef6; box-shadow: 0 20px 60px -30px rgb(28 59 110 / 25%); -webkit-overflow-scrolling: touch; }
.cmp-t { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-family: var(--sr-font, sans-serif); color: #10143a; }
.cmp-t th, .cmp-t td { padding: 16px 20px; text-align: center; border-bottom: 1px solid #eef2f8; font-size: 15px; }
.cmp-t tbody th[scope="row"] { text-align: left; font-weight: 500; color: #3c4466; width: 34%; }
.cmp-t thead th { position: sticky; top: 0; z-index: 2; background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px); padding: 28px 16px 22px; vertical-align: bottom; border-bottom: 1px solid #e3e9f3; }
.cmp-t thead th b { display: block; font-family: var(--sr-font-display, var(--sr-font, sans-serif)); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cmp-t thead th.cmp-first { text-align: left; vertical-align: bottom; }
.cmp-lead { font-size: 15px; color: #707891; font-weight: 500; }
.cmp-price { display: flex; justify-content: center; align-items: baseline; gap: 4px; margin: 6px 0 14px; }
.cmp-price .pc-amount { font-size: 28px; }
.cmp-price small { font-size: 13px; color: #707891; font-weight: 500; }
.cmp-badge { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(100deg, #0a8cf5, #5742f5 55%, #cc38ef); }
.cmp-t .hl { background: #f7f5ff; }
.cmp-t thead th.hl { background: linear-gradient(180deg, #efeaff, #f7f5ff); box-shadow: inset 0 3px 0 #5742f5; }
.cmp-g th { text-align: left !important; font-size: 12.5px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5742f5; background: #fafbfe; padding-top: 22px !important; }
.cmp-t tbody tr:not(.cmp-g):hover td, .cmp-t tbody tr:not(.cmp-g):hover th { background: #f8fafd; }
.cmp-t tbody tr:not(.cmp-g):hover td.hl { background: #f1edff; }
.cmp-t td b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-y { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e7f6ee; color: #167449; }
.cmp-y svg { width: 14px; height: 14px; }
.cmp-t td.hl .cmp-y { background: #ece8ff; color: #5742f5; }
.cmp-n { color: #c3cad8; font-weight: 700; font-size: 18px; }
.cmp-t tbody:last-child tr:last-child td, .cmp-t tbody:last-child tr:last-child th { border-bottom: 0; }
.cmp-t .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.pc-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
@media (min-width: 1100px) { .pc-grid:has(> .pc-card:nth-child(4)) .pc-card { padding: 30px 22px 24px; } .pc-grid:has(> .pc-card:nth-child(4)) .pc-amount { font-size: 46px; } }
@media (max-width: 760px) {
  .cmp-t { min-width: 640px; }
  .cmp-t tbody th[scope="row"], .cmp-t thead th.cmp-first { position: sticky; left: 0; z-index: 3; background: #fff; min-width: 150px; width: 150px; font-size: 13.5px; box-shadow: 6px 0 12px -8px rgb(28 59 110 / 25%); }
  .cmp-t th, .cmp-t td { padding: 12px 10px; }
  .cmp-g th { position: sticky; left: 0; }
}