/* =============================================================================
   gewinnspiel.css — Gewinnspiel: schwebender Orb + Gewinner-Modal.
   Akzent = --pink-hot (erbt die Seitenfarbe: LaserTag grün, M2MAXX koralle, …).
   Kein blauer Fokus. Kein Scam-Look.
   ============================================================================= */

/* ---- EIN gemeinsames Dim-Overlay (Hover + Modal, kein Doppel-Overlay) - */
.gw-dim{
  position:fixed; inset:0; z-index:890; pointer-events:none;
  background:rgba(4,3,10,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .45s var(--ease-ui);
}
.gw-dim.is-on{ opacity:1; }

/* ---- Orb-Layer (nur der Kreis, ÜBER dem Dim) ------------------------- */
.gw-orb-layer{ position:fixed; inset:0; z-index:895; pointer-events:none; }

.gw-orb{
  position:absolute; pointer-events:auto; cursor:pointer;
  width:98px; height:98px; padding:0; border:none; border-radius:50%;
  display:grid; place-content:center;
  color:var(--gw-ink,#fff);
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--pink-hot) 78%, #fff 22%), var(--pink-hot) 62%, color-mix(in srgb,var(--pink-hot) 70%, #000 30%) 100%);
  box-shadow:0 18px 44px -14px color-mix(in srgb,var(--pink-hot) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.35);
  opacity:0; translate:0 140px;
  transition:opacity .7s var(--ease-ui), translate .9s cubic-bezier(.2,.9,.25,1.05), scale .4s var(--ease-ui), box-shadow .4s var(--ease-ui);
}
.gw-orb-layer.is-in .gw-orb{ opacity:1; translate:0 0; }
.gw-orb-layer.is-hot .gw-orb{
  scale:1.14;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pink-hot) 45%,transparent),
             0 0 60px 6px color-mix(in srgb,var(--pink-hot) 70%,transparent),
             0 24px 60px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.gw-orb-layer.is-consuming .gw-orb{ opacity:0; pointer-events:none; transition:opacity .16s ease; }
.gw-orb:focus-visible{ outline:none; box-shadow:0 0 0 4px #fff, 0 0 60px 6px color-mix(in srgb,var(--pink-hot) 70%,transparent); }
/* größere Hover-/Tipp-Fläche als der sichtbare Kreis → kein Hover-Flackern */
.gw-orb::after{ content:""; position:absolute; inset:-18px; border-radius:50%; }

.gw-orb__inner{ display:grid; justify-items:center; gap:3px; }
.gw-orb__txt{ font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* dezenter Puls-Ring im Idle */
.gw-orb__ring{ position:absolute; inset:-4px; border-radius:50%; border:2px solid color-mix(in srgb,var(--pink-hot) 65%,transparent); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .gw-orb-layer.is-in:not(.is-hot):not(.is-consuming) .gw-orb__ring{ animation:gwRing 2.4s ease-out infinite; }
}
@keyframes gwRing{ 0%{ opacity:.8; scale:1; } 70%{ opacity:0; scale:1.55; } 100%{ opacity:0; scale:1.55; } }

@media (max-width:560px){ .gw-orb{ width:76px; height:76px; } .gw-orb__txt{ font-size:.66rem; } }
@media (prefers-reduced-motion:reduce){
  .gw-orb{ transition:none; opacity:1; translate:0 0; }
  .gw-orb__ring{ display:none; }
  .gw-dim{ transition:none; }
}

/* Während des Morphs (die KARTE selbst wächst vom Kreis zur Endform):
   Inhalte warten und fließen dann gestaffelt von OBEN ein. Kein Proxy,
   keine zweite Form — ein Element, ein Rutsch. */
.gw-modal.is-morph .gw-modal__body > *:not(.gw-burst):not(.gw-confetti),
.gw-modal.is-morph .gw-modal__x{ opacity:0; }
.gw-modal.is-morph .gw-modal__card{ overflow:hidden; }

.gw-modal__body.gw-stagger > *:not(.gw-burst):not(.gw-confetti){
  animation:gwDropIn .65s var(--ease-ui) both;
  animation-delay:calc(.05s + var(--i,0) * .09s);
}
@keyframes gwDropIn{
  from{ opacity:0; transform:translateY(-14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .gw-modal__body.gw-stagger > *{ animation:none !important; opacity:1 !important; }
}
.gw-modal{
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease-ui), visibility .28s var(--ease-ui);
}
.gw-modal.is-open{ opacity:1; visibility:visible; }
/* Abdunkelung kommt vom gemeinsamen .gw-dim (z 890) — das Modal selbst ist transparent. */

.gw-modal__card{
  position:relative; z-index:1;
  width:min(600px,100%); max-height:92vh; overflow-y:auto;
  background:var(--bg-elev);
  border:1px solid color-mix(in srgb, var(--pink-hot) 30%, rgba(255,255,255,.1));
  border-radius:clamp(22px,3vw,30px);
  box-shadow:0 50px 140px -30px rgba(0,0,0,.9), 0 0 60px -20px color-mix(in srgb,var(--pink-hot) 40%,transparent);
  padding:clamp(30px,5vw,52px) clamp(24px,4.5vw,48px);
  text-align:center;
  opacity:0; transform:translateY(26px) scale(.9);
  transition:opacity .32s var(--ease-ui), transform .55s cubic-bezier(.16,1.18,.3,1);
}
.gw-modal.is-card-in .gw-modal__card{ opacity:1; transform:none; }

.gw-modal__x{
  position:absolute; top:16px; right:16px; z-index:3;
  width:42px; height:42px; display:grid; place-content:center;
  border:none; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  transition:background .3s var(--ease-ui), transform .3s var(--ease-ui);
}
.gw-modal__x:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.gw-modal__x:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pink-hot) 45%,transparent); }

/* Body-Inhalt über den Effekt-Layern */
.gw-modal__body{ position:relative; transition:opacity .19s var(--ease-ui), transform .19s var(--ease-ui); }
.gw-modal__body > *{ position:relative; z-index:1; }
.gw-modal__body > .gw-burst, .gw-modal__body > .gw-confetti{ z-index:0; }
.gw-modal__body.is-leaving{ opacity:0; transform:translateY(-10px); }
.gw-modal__body.is-entering{ opacity:0; transform:translateY(14px); }

/* ---- Typografie ----------------------------------------------------- */
.gw-eyebrow{
  font-size:.82rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink-hot); margin-bottom:.7rem;
}
.gw-title{
  font-weight:900; font-size:clamp(2rem,7vw,2.9rem); line-height:1.02; letter-spacing:-.015em;
  color:#fff; margin:0;
}
.gw-title span{ color:var(--pink-hot); }
.gw-title--sm{ font-size:clamp(1.5rem,5vw,2.1rem); }
.gw-lead{
  font-size:clamp(.98rem,2.4vw,1.08rem); color:var(--text-dim); line-height:1.55;
  margin:16px auto 26px; max-width:40ch;
}

/* Satz direkt unter der Headline (Reihenfolge: Titel → Satz → Bild → Button) */
.gw-lead--tight{ margin:14px auto 6px; }

/* ---- Prämienbild (Glow + Shine) ------------------------------------- */
.gw-prizewrap{ position:relative; margin:20px auto 26px; max-width:360px; }
/* feste Höhe + cover: Kartenhöhe steht schon VOR dem Bild-Load fest → Proxy-Morph
   trifft exakt, nichts springt nach */
.gw-prize-img{ width:100%; height:clamp(170px,26vh,230px); object-fit:cover; border-radius:18px; display:block; box-shadow:0 24px 60px -22px rgba(0,0,0,.75); }
.gw-prize-glow{
  position:absolute; inset:-10px; z-index:-1; border-radius:26px; opacity:.55;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--pink-hot) 60%,transparent), transparent 70%);
  filter:blur(16px);
}
@media (prefers-reduced-motion:no-preference){ .gw-modal.is-open .gw-prize-glow{ animation:gwGlow 2.4s ease-in-out .3s infinite; } }
@keyframes gwGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }
.gw-shine{ position:absolute; inset:0; border-radius:18px; overflow:hidden; pointer-events:none; }
.gw-shine::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-70%; width:45%;
  transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
@media (prefers-reduced-motion:no-preference){ .gw-modal.is-open .gw-shine::before{ animation:gwShine 1.1s ease-out .55s 1; } }
@keyframes gwShine{ 0%{ left:-70%; } 100%{ left:130%; } }

/* ---- Feier-Glow hinter dem Inhalt ----------------------------------- */
.gw-burst{
  position:absolute; left:50%; top:16%; width:135%; aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.4); opacity:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--pink-hot) 42%,transparent) 0%, transparent 62%);
}
@media (prefers-reduced-motion:no-preference){ .gw-modal.is-open .gw-burst{ animation:gwBurst 1.1s ease-out .05s forwards; } }
@keyframes gwBurst{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); } 45%{ opacity:.85; } 100%{ opacity:.4; transform:translate(-50%,-50%) scale(1); } }

/* ---- Konfetti ------------------------------------------------------- */
.gw-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.gw-conf{ position:absolute; top:-16px; background:var(--c); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .gw-modal.is-open .gw-conf{ animation:gwConf var(--t) var(--d) cubic-bezier(.3,.55,.5,1) forwards; }
}
@keyframes gwConf{ 0%{ opacity:1; transform:translate(0,0) rotate(0); } 100%{ opacity:0; transform:translate(var(--dx),360px) rotate(var(--r)); } }

/* ---- Button (voll, markentreu; nutzt .btn-pill-Hover) --------------- */
.gw-cta-btn{
  width:100%; justify-content:center; border:none; cursor:pointer;
  font-size:clamp(1rem,2.6vw,1.08rem); padding:1.05em 1.6em; margin-top:4px;
}
.gw-cta-btn[disabled]{ opacity:.6; cursor:default; }

/* ---- Formular ------------------------------------------------------- */
.gw-form{ text-align:left; display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.gw-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.gw-field{ display:flex; flex-direction:column; gap:6px; }
.gw-field label{ font-size:.84rem; font-weight:600; color:var(--text-dim); }
.gw-field input{
  width:100%; padding:14px 16px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--r-input); color:#fff; font:inherit; font-size:1rem;
  transition:border-color .25s var(--ease-ui), box-shadow .25s var(--ease-ui), background .25s var(--ease-ui);
}
.gw-field input::placeholder{ color:rgba(255,255,255,.4); }
/* Fokus: PINK statt Blau, mit weichem Glow — kein Outline */
.gw-field input:focus, .gw-field input:focus-visible{
  outline:none;
  border-color:var(--pink-hot);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pink-hot) 22%, transparent);
}
.gw-err{ color:var(--pink-hot); font-size:.82rem; font-weight:600; }
.gw-err:empty{ display:none; }
.gw-status{ margin:2px 0 0; font-size:.86rem; }
.gw-status.is-err{ color:var(--pink-hot); }
.gw-status:empty{ display:none; }

/* Consent im Modal: kompakt + Fokus ebenfalls pink (nicht blau) */
.gw-form .consent-group{ margin:2px 0; }
.gw-modal .consent-item input[type="checkbox"]{ accent-color:var(--pink-hot); }
.gw-modal .consent-item input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--pink-hot) 35%,transparent); border-radius:4px; }

/* ---- Erfolgs-Ansicht ------------------------------------------------ */
.gw-success__ic{
  width:70px; height:70px; margin:4px auto 14px; display:grid; place-content:center;
  border-radius:var(--r-pill); color:#fff;
  background:var(--pink-hot);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--pink-hot) 18%,transparent);
}
@media (prefers-reduced-motion:no-preference){ .gw-modal.is-open .gw-success__ic{ animation:gwPop .5s cubic-bezier(.16,1.3,.3,1) 1; } }
@keyframes gwPop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.gw-code{
  margin:20px auto 8px; padding:16px;
  background:var(--bg); border:1.5px dashed var(--pink-hot); border-radius:16px;
}
.gw-code__lab{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.gw-code__val{ font-size:1.7rem; font-weight:900; letter-spacing:.14em; color:#fff; font-variant-numeric:tabular-nums; }
.gw-success__meta{ font-size:.84rem; color:var(--text-dim); margin-top:8px; }

/* Scroll-Lock */
body.gw-lock{ overflow:hidden; }

/* ---- Mobil: groß & zentriert (kein gequetschtes Mini-Modal) --------- */
@media (max-width:560px){
  .gw-modal{ padding:14px; align-items:center; }
  .gw-modal__card{ width:100%; max-height:94vh; padding:34px 22px 26px; }
  .gw-prizewrap{ max-width:280px; }
}

/* ---- Reduced Motion ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .gw-modal, .gw-modal__card, .gw-modal__body{ transition:none !important; }
  .gw-modal__card{ transform:none !important; }
  .gw-burst, .gw-confetti, .gw-shine{ display:none !important; }
}
.gw-modal[data-reduce="1"] .gw-modal__card{ transform:none !important; transition:none !important; }
.gw-modal[data-reduce="1"] .gw-burst, .gw-modal[data-reduce="1"] .gw-confetti, .gw-modal[data-reduce="1"] .gw-shine{ display:none !important; }

/* X-Button fadet nach dem Morph mit ein (Transition-Erweiterung, überschreibt Basisregel) */
.gw-modal__x{ transition:background .3s var(--ease-ui), transform .3s var(--ease-ui), opacity .3s var(--ease-ui); }