/* VERM.Moto V44 – Gewinnspiel-Popup (Glücksrad, Karten, Roulette, Rubbellos) */
.sp-fab { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #7a146f, #cc1d77); color: #fff; font: 800 15px/1 "Archivo", system-ui, sans-serif; box-shadow: 0 10px 26px rgba(122, 20, 111, .38); animation: sp-bob 2.6s ease-in-out infinite; }
.sp-fab span { font-size: 22px; }
.sp-fab:hover { filter: brightness(1.08); }
@keyframes sp-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

.sp-back { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(20, 6, 26, .62); backdrop-filter: blur(4px); animation: sp-fade .25s ease; }
@keyframes sp-fade { from { opacity: 0 } }
.sp-box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 28px); overflow: auto; border-radius: 24px; background: #fff; color: #2a1233; box-shadow: 0 30px 80px rgba(20, 6, 26, .5);
  font: 400 15px/1.45 "Archivo", system-ui, sans-serif; animation: sp-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sp-pop { from { transform: scale(.85); opacity: 0 } }
.sp-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sp-x:hover { background: rgba(255, 255, 255, .3); }
.sp-head { padding: 22px 24px 18px; background: linear-gradient(135deg, #3b0f45, #7a146f 60%, #cc1d77); color: #fff; text-align: center; }
.sp-head h2 { color: #fff; background: none; -webkit-text-fill-color: #fff; margin: 0 30px 6px; font: italic 800 30px/1 "Archivo", system-ui, sans-serif; font-stretch: 75%; text-transform: uppercase; letter-spacing: .3px; }
.sp-head p { margin: 0; font-size: 14px; opacity: .9; }
.sp-stage { position: relative; display: flex; justify-content: center; padding: 18px 16px 6px; background: linear-gradient(#f6eef8, #fff); }
.sp-form { padding: 10px 22px 20px; }
.sp-form input[type=email] { width: 100%; padding: 13px 14px; border: 2px solid #e3d5e8; border-radius: 12px; font-size: 16px; background: #fff; }
.sp-form input[type=email]:focus { border-color: #cc1d77; outline: 0; }
.sp-check { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 12px; font-size: 13px; color: #6d5a77; cursor: pointer; }
.sp-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #cc1d77; flex: none; }
.sp-check a { color: #7a146f; }
.sp-go { width: 100%; padding: 15px; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #cc1d77, #ef4b6e); color: #fff; font: 800 17px/1 "Archivo", system-ui, sans-serif; letter-spacing: .3px;
  box-shadow: 0 10px 24px rgba(204, 29, 119, .3); }
.sp-go:disabled { opacity: .55; cursor: default; }
.sp-hint { margin: 0 0 10px; text-align: center; font-weight: 700; color: #7a146f; }
.sp-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fde8f1; color: #a3125c; font-size: 14px; }
.sp-small { margin: 10px 0 0; text-align: center; font-size: 12px; color: #9a87a3; }
.sp-prev { margin: 0; padding: 7px; background: #fff4c2; color: #6b5300; text-align: center; font-size: 12px; font-weight: 700; }

/* Ergebnis */
.sp-res { padding: 6px 22px 22px; text-align: center; animation: sp-pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.sp-res .sp-big { margin: 6px 0 4px; font: italic 800 34px/1.05 "Archivo", system-ui, sans-serif; font-stretch: 75%; text-transform: uppercase; color: #cc1d77; }
.sp-res p { margin: 6px 0; }
.sp-res .sp-go { margin-top: 12px; }

/* Glücksrad */
.sp-wheel { position: relative; width: min(300px, 76vw); aspect-ratio: 1; }
.sp-wheel svg:not(.sp-ptr) { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(59, 15, 69, .28)); }
.sp-rot { transform-origin: 150px 150px; transform-box: view-box; transition: transform 5.2s cubic-bezier(.12, .7, .08, 1); }
.sp-ptr { position: absolute; left: 50%; top: -6px; width: 34px; height: 40px; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); z-index: 2; }
.sp-wheel.is-done .sp-hit { animation: sp-blink .5s 4 alternate; }
@keyframes sp-blink { to { opacity: .35 } }

/* Roulette */
.sp-roul { position: relative; width: min(300px, 76vw); aspect-ratio: 1; }
.sp-roul svg:not(.sp-ptr) { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(59, 15, 69, .3)); }
.sp-roul .sp-rot { transition: transform 6s cubic-bezier(.15, .75, .1, 1); }
.sp-ball { transform-origin: 150px 150px; transform-box: view-box; transition: transform 6s cubic-bezier(.2, .8, .15, 1); }
.sp-ball circle { transition: cy 1.4s cubic-bezier(.5, 0, .7, 1) 4.4s; }

/* Karten */
.sp-cards { display: flex; gap: 12px; justify-content: center; padding: 6px 0 10px; perspective: 900px; }
.sp-card { width: min(110px, 26vw); aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.sp-card:disabled { cursor: default; }
.sp-card:not(:disabled):hover { transform: translateY(-6px) rotate(-2deg); }
.sp-card.is-open { transform: rotateY(180deg); }
.sp-card.is-open.is-pick { transform: rotateY(180deg) scale(1.08); }
.sp-card > i { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; backface-visibility: hidden; font-style: normal; box-shadow: 0 8px 18px rgba(59, 15, 69, .25); }
.sp-card .sp-cb { background: repeating-linear-gradient(45deg, #7a146f 0 10px, #8e1a80 10px 20px); border: 4px solid #fff; color: #fff; }
.sp-card .sp-cb b { font: italic 900 38px/1 "Archivo", system-ui, sans-serif; text-shadow: 0 2px 0 #3b0f45; }
.sp-card .sp-cb small { font: 800 10px/1 "Archivo", system-ui, sans-serif; letter-spacing: 2px; }
.sp-card .sp-cf { transform: rotateY(180deg); background: #fff; border: 3px solid #e3d5e8; color: #2a1233; padding: 8px; text-align: center; font: 800 17px/1.1 "Archivo", system-ui, sans-serif; }
.sp-card .sp-cf em { font-size: 30px; font-style: normal; }
.sp-card.is-pick .sp-cf { border-color: #cc1d77; background: linear-gradient(#fff, #fde8f1); }
.sp-card.is-other .sp-cf { opacity: .6; filter: grayscale(.5); }

/* Rubbellos */
.sp-scr { position: relative; width: min(300px, 76vw); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: #fff; border: 4px solid #7a146f; box-shadow: 0 10px 22px rgba(59, 15, 69, .25); }
.sp-scr .sp-under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; background: radial-gradient(circle, #fff, #fbeaf3); }
.sp-scr .sp-under em { font-size: 36px; font-style: normal; }
.sp-scr .sp-under b { font: italic 800 30px/1 "Archivo", system-ui, sans-serif; font-stretch: 75%; text-transform: uppercase; color: #cc1d77; }
.sp-scr canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .6s; }
.sp-scr canvas.is-off { opacity: 0; pointer-events: none; }

/* Konfetti */
.sp-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 24px; z-index: 4; }
.sp-conf i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: sp-fall linear forwards; }
@keyframes sp-fall { to { transform: translateY(720px) rotate(720deg); opacity: .2 } }
@media (prefers-reduced-motion: reduce) { .sp-rot, .sp-ball, .sp-card { transition-duration: .01s !important } .sp-fab { animation: none } }
body.is-locked .sp-fab { display: none; }
.sp-prev ~ .sp-x { top: 46px; }