/* ---------------------------------------------------------------
   WICHTIG: [hidden] muss JEDE display-Regel schlagen.
   Das HTML-Attribut hidden wirkt nur ueber die UA-Regel
   [hidden]{display:none}. Jede Klassenregel mit eigenem display
   (z.B. .grp-overlay{display:flex}) ueberschreibt sie - das
   Element bleibt dann sichtbar, obwohl JS el.hidden = true setzt.
   Deshalb hier global mit !important absichern.
   --------------------------------------------------------------- */
.grp-root [hidden],
.grp-overlay[hidden]{ display:none !important; }

/* GlücksradPilot – Frontend v1.3.0 */
.grp-root { --grp-accent:#e11d48; --grp-bg:#0b1020; --grp-fg:#ffffff; --grp-ring:#f59e0b; }

.grp-card{
  position:relative; display:flex; gap:32px; align-items:center;
  background:var(--grp-bg); color:var(--grp-fg);
  border-radius:20px; padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  max-width:860px; margin:0 auto; overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.grp-wheel-col{ flex:0 0 46%; min-width:260px; }
.grp-form-col{ flex:1; min-width:240px; }

.grp-wheel-box{ position:relative; width:100%; aspect-ratio:1/1; }
.grp-canvas{ width:100%; height:100%; display:block; }
.grp-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:3;
  border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:26px solid var(--grp-accent);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.grp-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:#ffffff; color:#111; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:2;
}

.grp-headline{ margin:0 0 8px; font-size:26px; line-height:1.2; font-weight:800; color:var(--grp-fg); }
.grp-subline{ margin:0 0 18px; font-size:15px; opacity:.85; }

.grp-field{ margin-bottom:12px; }
.grp-field label{ display:block; font-size:12px; font-weight:600; margin-bottom:5px; opacity:.85; }
.grp-field input{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px;
  border:1px solid rgba(127,127,127,.35); border-radius:10px;
  background:rgba(255,255,255,.94); color:#111;
}
.grp-field input:focus{ outline:2px solid var(--grp-accent); outline-offset:1px; }

.grp-consent{ display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.45; opacity:.85; margin:10px 0 14px; cursor:pointer; }
.grp-consent input{ margin-top:2px; }

.grp-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.grp-spin-btn{
  width:100%; padding:14px 20px; border:0; border-radius:12px; cursor:pointer;
  background:var(--grp-accent); color:#fff; font-size:16px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .12s ease, filter .12s ease;
}
.grp-spin-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.grp-spin-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.grp-spin-btn.grp-loading::after{ content:"…"; }

.grp-error{ margin:10px 0 0; font-size:13px; color:#fca5a5; font-weight:600; }

.grp-result{ text-align:center; padding:8px 0; }
.grp-result-emoji{ font-size:44px; line-height:1; margin-bottom:8px; }
.grp-result-title{ margin:0 0 6px; font-size:22px; font-weight:800; }
.grp-result-label{ margin:0 0 14px; font-size:16px; opacity:.9; }
.grp-code-box{
  display:flex; gap:10px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px dashed rgba(255,255,255,.4);
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
}
.grp-code{ font-size:18px; font-weight:800; letter-spacing:.08em; }
.grp-copy{
  border:0; border-radius:8px; padding:8px 12px; cursor:pointer;
  background:var(--grp-accent); color:#fff; font-size:12px; font-weight:700;
}
.grp-result-note{ font-size:12px; opacity:.75; margin:0; }

.grp-confetti{ position:absolute; inset:0; pointer-events:none; z-index:5; }

/* Popup-Modus */
.grp-launcher{
  position:fixed; right:18px; bottom:18px; z-index:99990;
  display:flex; align-items:center; gap:8px;
  border:0; border-radius:999px; padding:12px 18px; cursor:pointer;
  background:var(--grp-accent); color:#fff; font-size:14px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  animation:grp-pulse 2.4s ease infinite;
}
.grp-launcher-icon{ font-size:18px; }
@keyframes grp-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@media (prefers-reduced-motion: reduce){ .grp-launcher{ animation:none; } }

.grp-overlay{
  position:fixed; inset:0; z-index:99995;
  background:rgba(10,10,15,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  overflow-y:auto;
}
.grp-overlay .grp-card{ margin:auto; }
.grp-close{
  position:absolute; top:10px; right:12px; z-index:6;
  width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:var(--grp-fg); font-size:22px; line-height:1;
}
.grp-close:hover{ background:rgba(255,255,255,.3); }
body.grp-noscroll{ overflow:hidden; }

@media (max-width:680px){
  .grp-card{ flex-direction:column; padding:22px; gap:18px; }
  .grp-wheel-col{ flex:0 0 auto; width:82%; max-width:340px; }
  .grp-headline{ font-size:22px; text-align:center; }
  .grp-subline{ text-align:center; }
}

/* ---------------------------------------------------------------
   v1.1.0 – Roter Faden (Schritt-Anzeige), Extra-Dreh, Reveal-Gate
   --------------------------------------------------------------- */

.grp-flow{
    display:flex; align-items:center; gap:.5rem;
    list-style:none; margin:0 0 1.15rem; padding:0;
}
.grp-flow-item{
    display:flex; align-items:center; gap:.4rem;
    flex:1; min-width:0;
    font-size:.72rem; font-weight:600; letter-spacing:.01em;
    opacity:.45; transition:opacity .25s ease;
}
.grp-flow-num{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    width:1.45rem; height:1.45rem; border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    font-size:.72rem; line-height:1;
}
.grp-flow-txt{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grp-flow-item.is-active{ opacity:1; }
.grp-flow-item.is-active .grp-flow-num{
    background:var(--grp-accent); border-color:var(--grp-accent); color:#fff;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--grp-accent) 25%, transparent);
}
.grp-flow-item.is-done{ opacity:.8; }
.grp-flow-item.is-done .grp-flow-num{
    background:var(--grp-ring); border-color:var(--grp-ring); color:#1f2937;
}
.grp-flow-item.is-done .grp-flow-num::before{ content:'\2713'; }
.grp-flow-item.is-done .grp-flow-num{ font-size:.7rem; }

/* Extra-Dreh */
.grp-again{ margin-top:1rem; width:100%; }

/* Reveal-Gate: Claim-Formular in der Ergebnisbox */
.grp-claim{
    margin-top:1.15rem; padding-top:1.15rem;
    border-top:1px dashed rgba(255,255,255,.22);
    text-align:left;
}
.grp-claim-hint{
    margin:0 0 .8rem; font-size:.85rem; opacity:.85; text-align:center;
}
.grp-claim-error{
    margin:.6rem 0 0; font-size:.82rem; color:#fca5a5; text-align:center;
}
.grp-result-error{
    margin:.75rem 0 0; font-size:.82rem; color:#fca5a5; text-align:center;
}

@media (max-width:640px){
    .grp-flow-txt{ display:none; }
    .grp-flow{ justify-content:center; gap:.75rem; }
    .grp-flow-item{ flex:0 0 auto; }
}

/* ---------------------------------------------------------------
   v1.2.1 – Popup: Schliessen-Button robust und sichtbar
   --------------------------------------------------------------- */

/* Der Button lag optisch teils auf dem Rad und war je nach Theme kaum
   zu sehen. Jetzt mit eigenem Kontrast, groesserer Trefferflaeche und
   sicher ueber allen anderen Ebenen. */
.grp-overlay .grp-close{
    position:absolute; top:10px; right:12px;
    z-index:50;                     /* ueber Rad, Konfetti und Ergebnisbox */
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:24px; line-height:1;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color:transparent;
}
.grp-overlay .grp-close:hover{ background:rgba(0,0,0,.7); transform:scale(1.06); }
.grp-overlay .grp-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Konfetti darf den Schliessen-Button nie abfangen. */
.grp-confetti{ pointer-events:none; }

@media (max-width:680px){
    .grp-overlay .grp-close{ top:8px; right:8px; width:44px; height:44px; }
}

/* Doppelte Absicherung: geschlossen gewinnt IMMER, egal was ein
   Theme-CSS auf .grp-overlay setzt. */
.grp-overlay:not(.grp-is-open){ display:none !important; }
.grp-overlay.grp-is-open{ display:flex !important; }