/* 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; } }