/* AVENUE V Store (Rick 10.10.) – Zusatz zum UCP-Stil (/assets/style.css): nur Store-Bausteine */

/* ---------- Paket-Karten (Coins) ---------- */
.s-pakete { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.s-paket { padding: 0; display: flex; flex-direction: column; transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s; }
.s-paket:hover { transform: translateY(-5px); border-color: rgba(229,154,184,.5); box-shadow: 0 22px 50px rgba(0,0,0,.4), 0 0 36px rgba(145,96,234,.3); }
.s-paket .s-bild { aspect-ratio: 640 / 672; overflow: hidden; border-bottom: 1px solid var(--panel-rand); }
.s-paket .s-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.s-paket:hover .s-bild img { transform: scale(1.04); }
.s-paket .s-info { padding: 14px 16px 16px; }
.s-paket .s-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.s-paket .s-name b { font: 700 20px Rajdhani; text-transform: uppercase; letter-spacing: .04em; }
.s-preis { font: 700 22px Rajdhani; background: linear-gradient(90deg, #c9a8ff, #f0a8c0); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.s-paket .s-wert { font-size: 11px; color: var(--leise); letter-spacing: .08em; margin-top: 2px; }
.s-paket .s-aktionen { display: flex; gap: 8px; margin-top: 12px; }
.s-paket .s-aktionen .knopf { flex: 1; justify-content: center; padding: 11px; font-size: 13px; }
.s-paket .s-aktionen .knopf.s-i { flex: none; width: 40px; padding: 0; }
.s-band { position: absolute; z-index: 2; top: 12px; left: 12px; font: 700 10px Inter; letter-spacing: .16em; padding: 4px 9px; border-radius: 6px; background: #f2c96b; color: #2b1e05; box-shadow: 0 4px 14px rgba(242,201,107,.4); }

/* kleine Paket-Zeilen (Startseite) */
.s-empf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-empf .karte { display: flex; align-items: center; gap: 14px; padding: 12px; cursor: pointer; transition: transform .15s, border-color .15s; }
.s-empf .karte:hover { transform: translateY(-3px); border-color: rgba(229,154,184,.5); }
.s-empf img { width: 76px; height: 80px; object-fit: cover; border-radius: 8px; }
.s-empf b { display: block; font: 700 20px Rajdhani; text-transform: uppercase; }
.s-empf .s-mehr { margin-left: auto; color: var(--leise); }

/* letzte Käufe */
.s-kaeufe { display: flex; gap: 8px; flex-wrap: wrap; }
.s-kaeufe i { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font: 700 16px Rajdhani; font-style: normal; background: var(--verlauf); box-shadow: 0 4px 12px rgba(145,96,234,.35); }

/* ---------- VIP-Tabelle ---------- */
.s-vip { overflow-x: auto; }
.s-vip table { width: 100%; min-width: 680px; border-collapse: collapse; }
.s-vip th { padding: 18px 12px; vertical-align: bottom; }
.s-vip th:first-child { text-align: left; }
.s-band-vip { width: 110px; height: 64px; margin: 0 auto 10px; border-radius: 10px; position: relative; display: grid; place-items: center; font: 700 20px Rajdhani; letter-spacing: .2em; color: #1a1226; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.s-band-vip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); }
.s-band-vip.silber { background: linear-gradient(135deg, #f1f4fa, #9aa3b5); }
.s-band-vip.gold { background: linear-gradient(135deg, #ffe7a3, #c8952e); }
.s-band-vip.platin { background: linear-gradient(135deg, #e9f8ff, #7ec3e6 55%, #b9a6ff); }
.s-vip th b { display: block; font: 700 20px Rajdhani; text-transform: uppercase; letter-spacing: .08em; }
.s-vip th small { display: block; font-size: 11px; color: var(--lila-h); font-weight: 700; margin-bottom: 8px; }
.s-vip td { padding: 12px; border-top: 1px solid var(--panel-rand); text-align: center; font-size: 13px; }
.s-vip td:first-child { text-align: left; font-weight: 600; }
.s-vip td:first-child small { display: block; font-weight: 400; font-size: 11px; color: var(--leise); }
.s-vip tr:hover td { background: rgba(145,96,234,.07); }
.s-ja, .s-nein { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.s-ja { background: rgba(143,227,169,.16); color: #8fe3a9; }
.s-nein { background: rgba(255,155,155,.1); color: rgba(255,155,155,.7); }

/* ---------- Hilfe ---------- */
.s-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-schritt .s-nr { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 700 24px Rajdhani; background: var(--verlauf); box-shadow: 0 6px 18px rgba(145,96,234,.4); margin-bottom: 14px; }
.s-schritt b { font: 700 19px Rajdhani; text-transform: uppercase; display: block; }
.s-schritt p { color: var(--matt); font-size: 13px; margin-top: 6px; line-height: 1.55; }
.s-faq details { padding: 13px 0; border-top: 1px solid var(--panel-rand); }
.s-faq details:first-of-type { border-top: 0; }
.s-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
.s-faq summary::after { content: '+'; color: var(--lila-h); font-weight: 700; }
.s-faq details[open] summary::after { content: '−'; }
.s-faq details p { color: var(--matt); font-size: 13px; margin-top: 8px; }
.s-text { color: var(--matt); font-size: 13.5px; line-height: 1.65; }
.s-text b { color: #fff; }
.s-warn { margin-top: 16px; padding: 13px 16px; border-radius: 10px; background: rgba(255,155,155,.08); border: 1px solid rgba(255,155,155,.3); color: #ffd6d6; font-size: 13px; }
.s-warn b { color: #fff; }

/* ---------- Warenkorb (Seitenpanel) ---------- */
.korb-schleier { position: fixed; inset: 0; background: rgba(8,5,16,.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40; }
.korb-schleier.an { opacity: 1; pointer-events: auto; }
.korb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 41; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  background: rgba(20,12,34,.97); backdrop-filter: blur(16px); border-left: 1px solid var(--panel-rand); box-shadow: -30px 0 80px rgba(0,0,0,.5); }
.korb-panel.an { transform: none; }
.korb-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--verlauf); position: relative; overflow: hidden; }
.korb-kopf::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.06) 26px 27px); }
.korb-kopf b { font: 700 22px Rajdhani; text-transform: uppercase; letter-spacing: .06em; }
.korb-kopf small { display: block; font-size: 10px; letter-spacing: .24em; color: rgba(255,255,255,.85); font-weight: 600; }
.korb-kopf button { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.2); color: #fff; font-size: 15px; cursor: pointer; position: relative; z-index: 1; }
.korb-wer { margin: 14px 20px 0; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-rand); font-size: 13px; color: var(--matt); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.korb-wer b { color: #fff; }
.korb-wer a { color: var(--rose); font-weight: 700; font-size: 12px; }
.korb-liste { flex: 1; overflow-y: auto; padding: 14px 20px; display: grid; gap: 10px; align-content: start; }
.korb-zeile { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-rand); }
.korb-zeile img { width: 46px; height: 48px; border-radius: 7px; object-fit: cover; }
.korb-zeile div { flex: 1; min-width: 0; }
.korb-zeile b { display: block; font: 700 17px Rajdhani; text-transform: uppercase; }
.korb-zeile span { font-size: 12px; color: var(--lila-h); font-weight: 600; }
.korb-zeile button { width: 30px; height: 30px; border-radius: 8px; color: #ff9b9b; border: 1px solid rgba(255,155,155,.3); background: none; cursor: pointer; }
.korb-leer { text-align: center; color: var(--leise); padding: 40px 0; font-size: 13px; }
.korb-fuss { padding: 16px 20px 20px; border-top: 1px solid var(--panel-rand); display: grid; gap: 12px; }
.korb-code { display: flex; gap: 8px; }
.korb-code input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--rand2); background: rgba(255,255,255,.05); color: #fff; font: 500 13px Inter; outline: none; }
.korb-code input:focus { border-color: var(--rose); }
.korb-summe { display: flex; justify-content: space-between; align-items: baseline; }
.korb-summe span { color: var(--matt); font-size: 13px; }
.korb-summe b { font: 700 28px Rajdhani; background: linear-gradient(90deg, #c9a8ff, #f0a8c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.korb-fuss .knopf.voll { justify-content: center; padding: 13px; font-size: 14px; }
.korb-fuss small { color: var(--leise); font-size: 11px; text-align: center; }
.laden-k { opacity: .5; pointer-events: none; }
.korb-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(0,0,0,.3); font-size: 11px; display: inline-grid; place-items: center; }

/* Figur (Konto) klickbar */
.figur.s-konto { cursor: pointer; }
.figur.s-konto .ava { font-size: 16px; }

.s-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); opacity: 0; padding: 12px 18px; border-radius: 10px; background: rgba(20,14,32,.96); border: 1px solid var(--rand2); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: all .3s; font-weight: 600; font-size: 13px; z-index: 60; max-width: min(560px, 92vw); text-align: center; }
.s-toast.an { opacity: 1; transform: translate(-50%, 0); }

.s-danke { text-align: center; padding: 50px 20px; }
.s-danke .s-gross { font-size: 54px; margin-bottom: 10px; }

@media (max-width: 1100px) { .s-empf, .s-schritte { grid-template-columns: 1fr; } }

/* Symbole in Knöpfen + Figur als Linien (sonst schwarz gefüllt) */
.knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.figur .ava svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; }
.s-empf .s-mehr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }