/* FITVYR® – Zufallsgutschein (Joshua 08.11.2026): Pop-up im BF-Rot von v3 (Schwarz, Rot nur als Akzent) und Feld in der Kasse.
   Eigene Farben, damit es auch ohne Saison-Maske (28.11.–01.12.) stimmt. Keine Schatten (Regelwerk fitvyr.css). */
.gs { --gs-rot: #E4252B; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 30px 28px 24px; border: 0;
  border-top: 4px solid var(--gs-rot); border-radius: 18px; background: #000; color: #fff; }
.gs::backdrop { background: rgba(0,0,0,.62); }
.gs-zu { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; }
.gs-zu svg { width: 22px; height: 22px; }
.gs-zu:hover { background: rgba(255,255,255,.12); }
.gs-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; color: var(--gs-rot); font: 800 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; }
.gs-kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.gs-kicker .sz-entwurf { color: rgba(255,255,255,.7); }
.gs-betrag { margin: 10px 0 0; font: 400 clamp(84px, 22vw, 120px)/.85 var(--anzeige); letter-spacing: .01em; }
.gs-satz { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.86); }
.gs-satz b { color: #fff; }
.gs-code { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 10px 10px 16px; border: 1.5px dashed rgba(255,255,255,.5); border-radius: 14px; }
.gs-code code { flex: 1; min-width: 0; font: 700 clamp(15px, 4.2vw, 22px)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; white-space: nowrap; color: #fff; }
/* Die Datei lädt vor fitvyr.css: darum mit .gs davor gegen .knopf.zweit */
.gs .gs-code .knopf { flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.gs .gs-code .knopf:hover { background: #fff; color: #000; }
.gs-ablauf { margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,.8); }
.gs-ablauf b { color: var(--gs-rot); font-variant-numeric: tabular-nums; }
.gs-knoepfe { margin-top: 18px; }
.knopf.gs-rot { width: 100%; background: var(--gs-rot); border-color: var(--gs-rot); color: #fff; }
.knopf.gs-rot:hover { background: #fff; border-color: #fff; color: #000; }
.gs-bedingungen { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 6px; font-size: 13px; color: rgba(255,255,255,.78); }
.gs-bedingungen li { position: relative; padding-left: 18px; }
.gs-bedingungen li::before { content: "+"; position: absolute; left: 0; top: -1px; color: var(--gs-rot); font: 400 16px/1 var(--anzeige); }
.gs-link { display: inline-block; margin-top: 12px; font-size: 13px; color: #fff; text-decoration: underline; text-decoration-color: var(--gs-rot); text-underline-offset: 4px; }

/* Kasse: Feld „Gutscheincode“ */
.gs-feld { margin: 18px 0 4px; }
.gs-feld label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.gs-zeile { display: flex; gap: 8px; }
.gs-zeile input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid #857c69; border-radius: 12px; font: 600 16px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.gs-zeile .knopf { min-height: 48px; padding: 0 18px; }
.gs-stand { margin: 8px 0 0; font-size: 13px; color: #8c2f23; }
.gs-stand.gut { color: #1d6b3a; }