/* Digitale Gutscheinkarte · Black-Copper. Scheckkartenformat, Vorder-/Rückseite, drei Designs (Kupfer, Carbon, Stahl). */
@font-face{font-family:VCWord;src:url('/assets/fonts/orbitron-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:VCWord;src:url('/assets/fonts/orbitron-900.ttf') format('truetype');font-weight:900;font-display:swap}
.vc{--vc-c1:#f6d2a8;--vc-c2:#d9a477;--vc-c3:#8a5a35;--vc-ink:#f6eee6;--vc-mute:#c9b8a8;--rx:0deg;--ry:0deg;--mx:50%;--my:30%;
 position:relative;width:100%;max-width:440px;aspect-ratio:1.586;perspective:1200px;-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none;-webkit-user-select:none;container-type:inline-size;outline:0}
.vc:focus-visible .vc-inner{box-shadow:0 0 0 3px #070707,0 0 0 5px var(--vc-c2)}
.vc-inner{position:absolute;inset:0;border-radius:4.6cqw;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip,0deg)))}
.vc.flipped{--flip:180deg}
.vc-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--vc-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 box-shadow:0 1px 0 rgba(255,220,180,.28) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 0 0 1px rgba(217,164,119,.45),0 24px 50px -18px rgba(0,0,0,.9),0 10px 30px -12px rgba(217,164,119,.28)}
.vc-back{transform:rotateY(180deg)}

/* Untergrund je Design */
.vc--copper .vc-face{background:
 radial-gradient(120% 90% at 100% 0%,rgba(240,180,120,.42),transparent 55%),
 radial-gradient(90% 80% at 0% 110%,rgba(150,85,40,.55),transparent 60%),
 repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
 linear-gradient(135deg,#3a2415 0%,#1d120b 42%,#0c0806 100%)}
.vc--carbon .vc-face{background:
 radial-gradient(110% 80% at 100% 0%,rgba(217,164,119,.26),transparent 55%),
 linear-gradient(160deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55)),
 repeating-linear-gradient(45deg,#121212 0 4px,#1b1b1b 4px 8px),
 repeating-linear-gradient(-45deg,#0d0d0d 0 4px,#171717 4px 8px);background-blend-mode:normal,normal,multiply,normal}
.vc--steel{--vc-c1:#f3d9bd;--vc-mute:#c7c2bd}
.vc--steel .vc-face{background:
 radial-gradient(120% 80% at 90% 0%,rgba(255,255,255,.16),transparent 55%),
 repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 2px),
 linear-gradient(140deg,#3b3d40 0%,#202224 45%,#0e0f10 100%)}

/* Zielflagge (wie im Logo), Glanz und Kupferkante */
.vc-flag{position:absolute;right:-6%;top:-10%;width:62%;height:78%;opacity:.16;transform:skewX(-18deg) rotate(-8deg);
 background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 0 0/9cqw 9cqw;
 -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.vc-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.75;
 background:radial-gradient(60% 55% at var(--mx) var(--my),rgba(255,214,170,.32),transparent 60%),
 linear-gradient(115deg,transparent 30%,rgba(255,225,190,.16) 45%,rgba(255,255,255,.04) 52%,transparent 64%)}
.vc-edge{position:absolute;left:0;right:0;bottom:0;height:.9cqw;background:linear-gradient(90deg,transparent,var(--vc-c3),var(--vc-c1),var(--vc-c2),var(--vc-c3),transparent);opacity:.9}

/* Vorderseite */
.vc-front{padding:5.4cqw 6cqw;display:grid;grid-template-rows:auto 1fr auto;gap:1cqw}
.vc-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw}
.vc-logo{width:31cqw;height:auto;display:block;mix-blend-mode:screen;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) saturate(1.08) brightness(1.08);margin:-1cqw 0 0 -1.4cqw}
.vc-kind{text-align:right;font:700 2.3cqw/1.25 VCWord,Inter,sans-serif;letter-spacing:.28em;color:var(--vc-c2);text-transform:uppercase}
.vc-kind b{display:block;font-size:3.3cqw;letter-spacing:.16em;color:var(--vc-c1);background:linear-gradient(180deg,var(--vc-c1),var(--vc-c2) 60%,var(--vc-c3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vc-state{display:inline-block;margin-top:1.6cqw;padding:.7cqw 2cqw;border-radius:99px;font:700 2.1cqw/1.3 Inter,sans-serif;letter-spacing:.12em;border:1px solid currentColor;background:rgba(0,0,0,.35);-webkit-text-fill-color:currentColor}
.vc-state.ok{color:#9fd8b2}.vc-state.bad{color:#f09a8a}.vc-state.mute{color:#c9b8a8}
.vc-mid{position:relative;display:flex;align-items:center;gap:3.2cqw}
.vc-chip{width:11.5cqw;aspect-ratio:1.3;border-radius:1.6cqw;position:relative;flex:none;
 background:linear-gradient(135deg,#f7d6ac,#c58e5c 35%,#f0c79c 55%,#8a5a35);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 1px 3px rgba(0,0,0,.5)}
.vc-chip::before{content:"";position:absolute;inset:22% 0;border-top:1px solid rgba(60,30,10,.55);border-bottom:1px solid rgba(60,30,10,.55)}
.vc-chip::after{content:"";position:absolute;inset:0 34%;border-left:1px solid rgba(60,30,10,.55);border-right:1px solid rgba(60,30,10,.55);border-radius:1cqw}
.vc-nfc{width:5.4cqw;height:5.4cqw;color:var(--vc-c2);opacity:.85}
.vc-amount{margin-left:auto;text-align:right;line-height:1}
.vc-amount small{display:block;font:600 2.2cqw/1 Inter,sans-serif;letter-spacing:.22em;color:var(--vc-mute);text-transform:uppercase;margin-bottom:1.2cqw}
.vc-amount strong{display:block;font:900 10.2cqw/1 VCWord,Inter,sans-serif;letter-spacing:-.01em;white-space:nowrap;
 background:linear-gradient(180deg,#fff6ec 0%,var(--vc-c1) 38%,var(--vc-c2) 70%,var(--vc-c3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.65))}
.vc-amount em{display:block;margin-top:1.1cqw;font:600 2.3cqw/1 Inter,sans-serif;font-style:normal;color:var(--vc-mute)}
.vc-bar{height:.9cqw;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:1.2cqw 0 0 auto;width:34cqw}
.vc-bar i{display:block;height:100%;width:var(--p,100%);background:linear-gradient(90deg,var(--vc-c3),var(--vc-c1));border-radius:inherit}
.vc-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:4cqw;font-family:"Courier New",ui-monospace,monospace}
.vc-name{min-width:0;font:700 3.6cqw/1.15 "Courier New",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#efe2d4;text-shadow:0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,230,200,.25)}
.vc-name small,.vc-valid small{display:block;font:600 1.8cqw/1.2 Inter,sans-serif;letter-spacing:.2em;color:var(--vc-mute);text-shadow:none;margin-bottom:.6cqw}
.vc-valid{text-align:right;flex:none;font:700 3.2cqw/1.15 "Courier New",ui-monospace,monospace;letter-spacing:.08em;color:#efe2d4}

/* Rückseite */
.vc-back{display:grid;grid-template-rows:auto auto 1fr auto}
.vc-stripe{height:15cqw;margin-top:6cqw;background:linear-gradient(180deg,#050505,#151515 40%,#050505)}
.vc-code{margin:4cqw 6cqw 0;display:flex;align-items:center;gap:3cqw}
.vc-code span{flex:1;min-width:0;padding:2cqw 3cqw;border-radius:1.4cqw;background:repeating-linear-gradient(135deg,#efe6da 0 4px,#e2d6c7 4px 8px);color:#1a120c;font:800 4.4cqw/1 "Courier New",ui-monospace,monospace;letter-spacing:.1em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-code img{width:13cqw;height:auto;flex:none;mix-blend-mode:screen;opacity:.9}
.vc-msg{margin:3cqw 6cqw 0;font:italic 500 3cqw/1.4 Georgia,"Times New Roman",serif;color:#efe2d4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.vc-msg b{font:600 2.4cqw/1.3 Inter,sans-serif;font-style:normal;color:var(--vc-c2);letter-spacing:.06em;display:block;margin-top:1cqw}
.vc-fine{margin:0 6cqw 4.4cqw;font:500 1.95cqw/1.45 Inter,sans-serif;color:var(--vc-mute)}
.vc-fine b{color:var(--vc-c2);font-weight:700;letter-spacing:.08em}

/* Zustände */
.vc[data-state=used] .vc-amount strong,.vc[data-state=expired] .vc-amount strong,.vc[data-state=cancelled] .vc-amount strong{filter:grayscale(.85) brightness(.75)}
.vc[data-state=cancelled] .vc-face::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.vc-hint{display:block;margin-top:10px;text-align:center;color:#9c8f84;font:500 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.04em}

/* Kleine Kartenvorschau für Auswahl der Designs */
.vc-designs{display:flex;gap:10px;flex-wrap:wrap}
.vc-designs button{flex:1 1 90px;min-height:58px;border-radius:12px;border:1px solid #3d2f25;color:#f4ece5;font:700 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;padding:8px;position:relative;overflow:hidden}
.vc-designs button[data-d=copper]{background:linear-gradient(135deg,#3a2415,#0c0806)}
.vc-designs button[data-d=carbon]{background:repeating-linear-gradient(45deg,#121212 0 4px,#1d1d1d 4px 8px)}
.vc-designs button[data-d=steel]{background:linear-gradient(140deg,#3b3d40,#0e0f10)}
.vc-designs button[aria-pressed=true]{border-color:#f0c79c;box-shadow:0 0 0 2px rgba(240,199,156,.35)}
.vc-designs button:focus-visible{outline:2px solid #f0c79c;outline-offset:2px}

@media (prefers-reduced-motion:reduce){.vc-inner{transition:none}.vc{--rx:0deg!important;--ry:0deg!important}}
@media print{.vc-face{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}}