/* ==== VIP-Seite (/de/vip/, /en/vip/) ====
   Nutzt ausschließlich die Design-Tokens aus style.css (--c1…--c6, --t1…--t6,
   --panel, --line, --muted …) -> Hell/Dunkel-Modus funktioniert automatisch. */

/* Akzentfarbe je Karte: --a = Füllfarbe, --at = lesbare Textfarbe (hell/dunkel) */
.a1{--a:var(--c1);--at:var(--t1)}
.a2{--a:var(--c2);--at:var(--t2)}
.a3{--a:var(--c3);--at:var(--t2)}
.a4{--a:var(--c4);--at:var(--t4)}
.a5{--a:var(--c5);--at:var(--t5)}
.a6{--a:var(--c6);--at:var(--t6)}

/* ---------- Hero ---------- */
.vip-hero .lead{max-width:620px}
.vip-hero .stats{margin-top:56px}
.vip-hero .stat .num{white-space:nowrap}

/* ---------- Feature-Raster ---------- */
.vip-section .block-head{margin-bottom:32px}
.vip-grid{display:grid;gap:20px;grid-template-columns:repeat(var(--cols,3),1fr)}
.vip-grid.cols-2{--cols:2}
.vip-grid.cols-3{--cols:3}
.vip-grid.cols-4{--cols:4}

.vip-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:24px;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.vip-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--a);box-shadow:0 0 20px var(--a)}
/* Spotlight: folgt dem Mauszeiger (--mx/--my setzt vip.js), sonst Glow oben mittig */
.vip-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--a) 22%,transparent),transparent 70%)}
.vip-card>*{position:relative;z-index:1}
.vip-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--a) 45%,var(--line));
  box-shadow:0 22px 50px light-dark(rgba(30,20,80,.17),rgba(0,0,0,.65))}
.vip-card:hover::after{opacity:1}

.vip-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vip-card .ico{transition:transform .3s}
.vip-card:hover .ico{transform:scale(1.08) rotate(-4deg)}
.vip-tag{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 11px;border-radius:999px;
  font:700 .8rem 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--at);
  background:color-mix(in srgb,var(--a) 14%,transparent);border:1px solid color-mix(in srgb,var(--a) 38%,transparent)}
.vip-tag svg{width:13px;height:13px}
.vip-card h3{font-size:1.15rem;line-height:1.25}
.vip-card p{color:var(--muted);font-size:.93rem}

.vip-link{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font:600 .9rem Inter,sans-serif;color:var(--at)}
.vip-link svg{width:15px;height:15px;transition:transform .2s}
.vip-link:hover svg{transform:translateX(4px)}
.vip-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Granaten-Paket */
.vip-multi{list-style:none;display:grid;gap:8px;margin-top:2px}
.vip-multi li{display:flex;align-items:baseline;gap:12px;padding:9px 14px;border-radius:11px;
  background:light-dark(rgba(30,20,60,.05),rgba(0,0,0,.26));border:1px solid var(--line);border-left:3px solid var(--a);
  font-weight:600;font-size:.95rem}
.vip-multi b{font:700 1.5rem/1 'Chakra Petch',sans-serif;color:var(--at);min-width:2.1ch}

/* Farbige Smokes */
.vip-swatches{display:flex;gap:9px;margin-top:2px}
.vip-swatches i{width:24px;height:24px;border-radius:50%;background:var(--sw);
  border:2px solid light-dark(#fff,rgba(255,255,255,.22));
  box-shadow:0 0 14px color-mix(in srgb,var(--sw) 55%,transparent);transition:transform .25s}
.vip-card:hover .vip-swatches i{transform:translateY(-3px)}
.vip-card:hover .vip-swatches i:nth-child(2){transition-delay:.04s}
.vip-card:hover .vip-swatches i:nth-child(3){transition-delay:.08s}
.vip-card:hover .vip-swatches i:nth-child(4){transition-delay:.12s}
.vip-card:hover .vip-swatches i:nth-child(5){transition-delay:.16s}
.vip-card:hover .vip-swatches i:nth-child(6){transition-delay:.20s}

/* Geplante Features */
.vip-card.is-soon{border-style:dashed;border-color:color-mix(in srgb,var(--muted) 45%,transparent);background:light-dark(rgba(255,255,255,.4),rgba(255,255,255,.025))}
.vip-card.is-soon::before{opacity:.45;box-shadow:none}
.vip-card.is-soon .ico{border-style:dashed}
.vip-card.is-soon .vip-tag{--a:var(--muted);--at:var(--muted)}

/* ---------- So wirst du VIP ---------- */
.vip-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vip-step{position:relative;padding:26px;display:flex;flex-direction:column;gap:8px}
.vip-step-n{font:700 3.2rem/1 'Chakra Petch',sans-serif;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.vip-step h3{font-size:1.1rem}
.vip-step p{color:var(--muted);font-size:.93rem}

.vip-cta{position:relative;overflow:hidden;margin-top:28px;padding:36px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.vip-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 220px at 15% 0,rgba(255,30,108,.16),transparent 70%),radial-gradient(500px 220px at 85% 100%,rgba(8,169,255,.18),transparent 70%)}
.vip-cta>*{position:relative}
.vip-cta h3{font-size:1.5rem}
.vip-cta p{color:var(--muted);max-width:520px}
.vip-cta .hero-actions{margin-top:6px}
.vip-help{margin-top:18px;text-align:center;color:var(--muted);font-size:.9rem}
.vip-help a{color:var(--t6);font-weight:600}
.vip-help a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Einblend-Animation (nur mit JS: <html class="vip-js">) ---------- */
.vip-js .vip-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.vip-js .vip-reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1060px){
  .vip-grid.cols-4{--cols:2}
}
@media(max-width:900px){
  .vip-grid.cols-3{--cols:2}
  /* ungerade letzte Karte füllt die Reihe, damit keine Lücke entsteht */
  .vip-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .vip-steps{grid-template-columns:1fr}
  .vip-section{padding-top:64px;padding-bottom:64px}
}
@media(max-width:600px){
  .vip-grid.cols-2,.vip-grid.cols-3,.vip-grid.cols-4{--cols:1}
  .vip-card{padding:20px}
  .vip-cta{padding:28px 20px}
}
@media(prefers-reduced-motion:reduce){
  .vip-js .vip-reveal{opacity:1;transform:none;transition:none}
  .vip-card,.vip-card .ico,.vip-swatches i,.vip-link svg{transition:none}
  .vip-card:hover,.vip-card:hover .ico,.vip-card:hover .vip-swatches i{transform:none}
}