/* Runde 63 – Paketseite der Vorlagen-Websites (bauplan/v2/pakete.py): Kombikarten und Abos als Karten mit Status.
   Grundgerüst aus v2-termin.css (tv-…). Die Karten haben eigene, feste Statusfarben – Silber kühl-metallisch,
   Gold warm, Platin dunkel – unabhängig von der Vorlage; Schrift und Rundungen kommen aus der Vorlage. */
.pk{--pk-r:clamp(14px,calc(var(--r-karte,16px) + 2px),22px)}

/* ── Die Karte ─────────────────────────────────────────────────────────── */
.pk-wahl,.pk-vorschau,.pk-gross,.pk-fertig-karte{container-type:inline-size}
.pk-karte{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto auto;gap:0;aspect-ratio:1.586;width:100%;
  padding:6.2cqi 6.8cqi;border-radius:var(--pk-r);overflow:hidden;color:var(--pk-tinte);
  background:var(--pk-grund);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.18) inset,
    0 18px 40px -22px var(--pk-schatten),0 2px 6px -2px rgba(0,0,0,.18);
  font-family:var(--fliess),system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  transition:transform 380ms cubic-bezier(.23,1,.32,1),box-shadow 380ms cubic-bezier(.23,1,.32,1)}
.pk-silber{--pk-tinte:#1d2329;--pk-leise:rgba(29,35,41,.62);--pk-schatten:rgba(40,52,64,.55);
  --pk-grund:linear-gradient(135deg,#f4f6f8 0%,#c9d0d7 28%,#eef1f4 46%,#aeb7c0 72%,#dfe4e9 100%)}
.pk-gold{--pk-tinte:#2b1d05;--pk-leise:rgba(43,29,5,.62);--pk-schatten:rgba(120,82,10,.55);
  --pk-grund:linear-gradient(135deg,#fbe9b7 0%,#d9a943 30%,#f6dc95 50%,#b9862a 76%,#ecc970 100%)}
.pk-platin{--pk-tinte:#f2f3f5;--pk-leise:rgba(242,243,245,.66);--pk-schatten:rgba(0,0,0,.7);
  --pk-grund:radial-gradient(120% 90% at 85% 0%,#4a4f58 0%,transparent 55%),linear-gradient(140deg,#2a2d33 0%,#121417 48%,#2b2f36 78%,#0c0d0f 100%)}
.pk-glanz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;opacity:.7;mix-blend-mode:soft-light}
.pk-platin .pk-glanz{opacity:.45;mix-blend-mode:screen;background-image:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%)}
@media (prefers-reduced-motion:no-preference){
  .pk-wahl:has(input:checked) .pk-glanz,.pk-gross .pk-glanz{animation:pk-glanz 1600ms cubic-bezier(.23,1,.32,1) both}
}
@keyframes pk-glanz{from{background-position:120% 0}to{background-position:-30% 0}}
.pk-motiv{position:absolute;right:-6%;bottom:-14%;width:58%;z-index:-1;opacity:.13;color:var(--pk-tinte)}
.pk-motiv svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4}
.pk-platin .pk-motiv{opacity:.16}
.pk-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-width:0}
.pk-marke{font-family:var(--anzeige),var(--fliess),sans-serif;font-weight:600;font-size:max(10px,3.5cqi);letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pk-status{flex:none;font-size:max(9px,2.8cqi);font-weight:700;letter-spacing:.26em;text-transform:uppercase;padding:5px 9px 5px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pk-tinte) 30%,transparent);background:color-mix(in srgb,var(--pk-tinte) 7%,transparent)}
.pk-mitte{display:flex;align-items:center;gap:10px;align-self:center}
.pk-chip{width:12cqi;height:auto;fill:color-mix(in srgb,#e8c46a 70%,var(--pk-tinte) 0%);stroke:rgba(90,62,10,.55);stroke-width:1}
.pk-silber .pk-chip{fill:#d7dce1;stroke:rgba(40,52,64,.45)}
.pk-platin .pk-chip{fill:#b9bec6;stroke:rgba(0,0,0,.5)}
.pk-funk{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.55}
.pk-name{font-family:var(--anzeige),var(--fliess),sans-serif;font-weight:var(--anzeige-gewicht,600);font-size:max(16px,6.6cqi);line-height:1.08;
  letter-spacing:-.01em;text-transform:var(--anzeige-versal,none);margin-bottom:6px}
.pk-unten{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-width:0}
.pk-was{font-size:max(11px,3.4cqi);line-height:1.3;color:var(--pk-leise);min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pk-preis{display:grid;justify-items:end;flex:none;line-height:1.1;font-variant-numeric:tabular-nums}
.pk-preis b{font-size:max(15px,5.8cqi);font-weight:700;letter-spacing:-.01em}
.pk-preis s{font-size:11px;color:var(--pk-leise)}
.pk-spart{margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px;
  background:var(--pk-tinte);color:color-mix(in srgb,var(--pk-tinte) 0%,#fff)}
.pk-silber .pk-spart,.pk-gold .pk-spart{color:#fff}
.pk-platin .pk-spart{background:#f2f3f5;color:#111}

/* ── Auswahl: Stapel der Karten ────────────────────────────────────────── */
.pk-stapel{display:grid;gap:18px;margin-top:20px}
.pk-wahl{position:relative;display:grid;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk-wahl[hidden]{display:none}
.pk-wahl input{position:absolute;opacity:0;pointer-events:none}
.pk-wahl .pk-karte{outline:2px solid transparent;outline-offset:4px;transition:transform 380ms cubic-bezier(.23,1,.32,1),outline-color 200ms ease,box-shadow 380ms cubic-bezier(.23,1,.32,1)}
.pk-wahl:not(:has(input:checked)) .pk-karte{transform:scale(.965);filter:saturate(.85)}
.pk-wahl:has(input:checked) .pk-karte{outline-color:var(--tv-ink);transform:none}
.pk-wahl:has(input:focus-visible) .pk-karte{outline:3px solid var(--tv-ink)}
.pk-wahl:active .pk-karte{transform:scale(.975)}
.pk-zeile{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--leise);padding:0 4px}
.pk-zeile span:last-child{font-weight:600;color:var(--text)}
.pk-text{font-size:14px;color:var(--leise);padding:0 4px;line-height:1.45}
.pk-wahl{max-width:440px}

/* Belegte Fakten (nur Vorschau für den Betrieb) */
.pk-belege{margin-top:24px;padding:16px 18px;border-radius:var(--tv-r);border:1px solid var(--tv-rand);background:var(--tv-fein);display:grid;gap:12px;font-size:14px}
.pk-belege-titel{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.pk-belege b{font-size:17px;font-variant-numeric:tabular-nums;color:var(--akzent,var(--text))}
.pk-belege small{display:block;margin-top:2px;font-size:11px;color:var(--leise)}

/* Kaufen: Vorschau der gewählten Karte */
.pk-vorschau{margin-top:18px;max-width:360px}
.pk-vorschau:empty{display:none}
.pk-vorschau .pk-karte{box-shadow:0 30px 60px -30px var(--pk-schatten)}
.pk-recht{margin-top:16px;line-height:1.5}
.pk-recht a{color:var(--text)}
a.tv-weiter{text-decoration:none}
@media (min-width:1000px){.tv-js .pk-vorschau{display:none}}

/* Übersicht rechts: große Karte */
.pk-gross{perspective:900px}
.pk-gross:empty{display:none}
.pk-gross .pk-karte{transform:rotateX(6deg) rotateY(-8deg);box-shadow:0 40px 70px -34px var(--pk-schatten)}
@media (prefers-reduced-motion:no-preference){.pk-gross .pk-karte{animation:pk-auf 520ms cubic-bezier(.23,1,.32,1) both}}
@keyframes pk-auf{from{opacity:0;transform:rotateX(18deg) rotateY(-14deg) translateY(16px)}to{opacity:1;transform:rotateX(6deg) rotateY(-8deg)}}

/* Danke */
.pk-fertig .pk-karte{max-width:320px;margin:0 auto 26px;text-align:left;text-shadow:none}
.pk-fertig a+a{margin-left:10px}
.pk-fertig .pk-zurueck{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.pk-gekuendigt{display:grid;gap:8px;margin:16px 0;padding:0}
.pk-kuendigen .tv-schritt p{margin-top:12px}
.pk-kuendigen .tv-schritt a{font-weight:600}