/* Snapjam Geschenkgutschein – Karte (Shop-Vorschau, Gutscheinseite, Druck, Back-Office) */
.vc{--vbg:linear-gradient(135deg,#FF4A2B 0%,#FF7A2F 55%,#FFB800 130%);--vink:#fff;--vsub:rgba(255,255,255,.82);--vchip:rgba(255,255,255,.18);--vline:rgba(255,255,255,.35);--vfr:#fff;
  position:relative;width:100%;aspect-ratio:1.62/1;border-radius:clamp(18px,3vw,28px);background:var(--vbg);color:var(--vink);overflow:hidden;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 40px 80px -40px rgba(255,74,43,.55),0 18px 30px -18px rgba(13,14,18,.35);
  container-type:inline-size;font-family:"Geist",system-ui,sans-serif;transform-style:preserve-3d}
.vc.liebe{--vbg:linear-gradient(140deg,#FFF3EF 0%,#FFE0D7 60%,#FFC8BA 120%);--vink:#0D0E12;--vsub:#5C6170;--vchip:rgba(13,14,18,.06);--vline:rgba(13,14,18,.14);--vfr:#fff;box-shadow:0 1px 0 #fff inset,0 40px 80px -40px rgba(255,120,90,.5),0 18px 30px -18px rgba(13,14,18,.25)}
.vc.winter{--vbg:linear-gradient(150deg,#F4F8FF 0%,#E3ECFF 55%,#D2E1FF 120%);--vink:#0D0E12;--vsub:#4E5A75;--vchip:rgba(13,14,18,.06);--vline:rgba(13,14,18,.12);--vfr:#fff;box-shadow:0 1px 0 #fff inset,0 40px 80px -40px rgba(80,120,220,.45),0 18px 30px -18px rgba(13,14,18,.25)}
.vc .deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vc .deco i{position:absolute;border-radius:50%;opacity:.9}
.vc.party .deco i{background:#FFE14D}
.vc.party .deco i:nth-child(3n){background:#fff}
.vc.party .deco i:nth-child(4n){background:#0D0E12;opacity:.25}
.vc.liebe .deco i{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,74,43,.35)}
.vc.winter .deco i{background:#FFB800;opacity:.75;border-radius:2px;transform:rotate(45deg)}
.vc.winter .deco i:nth-child(2n){background:#fff;opacity:1}
.vc .shine{position:absolute;inset:-40%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-60%);transition:transform 1.1s cubic-bezier(.23,1,.32,1)}
.vc:hover .shine,.vc.shiny .shine{transform:translateX(60%)}
.vc .in{position:absolute;inset:0;padding:6.2cqw 6.4cqw;display:grid;grid-template-columns:1fr 23cqw;gap:4cqw}
.vc .l{display:flex;flex-direction:column;min-width:0}
.vc .brand{display:flex;align-items:center;gap:1.6cqw;font-weight:650;font-size:3.6cqw;letter-spacing:-.05em}
.vc .brand .mk{width:5cqw;height:5cqw;border-radius:1.5cqw;background:var(--vink);display:grid;place-items:center;position:relative}
.vc .brand .mk svg{width:2.8cqw;height:2.8cqw}
.vc .brand .mk::after{content:"";position:absolute;top:.9cqw;right:.9cqw;width:.9cqw;height:.9cqw;border-radius:50%;background:#FF4A2B}
.vc.party .brand .mk::after{background:#FFE14D}
.vc .kind{margin-left:auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:1.9cqw;letter-spacing:.18em;text-transform:uppercase;padding:.9cqw 1.8cqw;border-radius:99px;background:var(--vchip)}
.vc .val{margin-top:auto;font-size:15cqw;line-height:.86;font-weight:650;letter-spacing:-.075em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;gap:.6cqw}
.vc .val small{font-size:6cqw;letter-spacing:-.03em;margin-top:1.4cqw}
.vc .to{margin-top:2.4cqw;font-size:3.6cqw;font-weight:550;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc .msg{margin-top:1cqw;font-size:2.55cqw;line-height:1.35;color:var(--vsub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.vc .foot{margin-top:2.6cqw;padding-top:2.2cqw;border-top:1px dashed var(--vline);display:flex;align-items:center;gap:2cqw;font-size:2.1cqw;color:var(--vsub)}
.vc .code{white-space:nowrap;flex:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:2.7cqw;letter-spacing:.06em;color:var(--vink);font-weight:500;padding:.8cqw 1.8cqw;border-radius:1.6cqw;background:var(--vchip)}
.vc .code.ph{opacity:.55}
.vc .foot>span:last-child{min-width:0;line-height:1.3}
.vc .r{display:flex;flex-direction:column;gap:2cqw;align-items:stretch}
.vc .strip{flex:1;background:var(--vfr);border-radius:1.6cqw;padding:1.6cqw;display:grid;grid-template-rows:repeat(3,1fr);gap:1.4cqw;transform:rotate(4deg);box-shadow:0 2cqw 4cqw -2cqw rgba(13,14,18,.35)}
.vc .strip b{border-radius:.8cqw;position:relative;overflow:hidden}
.vc .strip b:nth-child(1){background:linear-gradient(160deg,#FFD6CC,#FF8A6B)}
.vc .strip b:nth-child(2){background:linear-gradient(160deg,#FFF1BF,#FFB800)}
.vc .strip b:nth-child(3){background:linear-gradient(160deg,#DCE7FF,#8EAEFF)}
.vc .strip b::after{content:"";position:absolute;left:50%;bottom:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);transform:translateX(-50%)}
.vc .strip b::before{content:"";position:absolute;left:50%;top:22%;width:26%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.7);transform:translateX(-50%)}
.vc .qr{background:#fff;border-radius:1.6cqw;padding:.8cqw;aspect-ratio:1;display:grid;place-items:center}
.vc .qr svg{width:100%;height:auto;display:block}
.vc .qrcap{font-size:1.7cqw;text-align:center;color:var(--vsub);margin-top:-1cqw}
.vc.has-qr .strip{display:none}
/* Bühne: schwebt, kippt mit der Maus */
.vstage{perspective:1200px}
.vstage .vc{animation:vFloat 6s ease-in-out infinite;transition:transform .5s cubic-bezier(.23,1,.32,1)}
@keyframes vFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.vc .val b{display:inline-block}
.vc .val.bump b{animation:vBump .5s cubic-bezier(.23,1,.32,1)}
@keyframes vBump{0%{transform:translateY(14%) scale(.92);opacity:.3}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.vstage .vc{animation:none}.vc .shine{display:none}.vc .val.bump b{animation:none}}
@media print{.vc{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.vc .shine{display:none}}