/* ============================================================
   Spinko Funnel 2 (Mystery Box) — Stylesheet
   Klon von Wild-Robin Funnel-2 mit Spinko-Brand-Tokens
   (Dark Navy/Purple + Spinko-Green + Lila-Accent)
   ============================================================ */

/* ---------- 1. Design-Tokens (Spinko-Brand) ---------- */
:root {
  /* Background — Dark Navy/Purple */
  --bg-deep: #1A0D3E;
  --bg-mid: #2A1461;
  --bg-light: #3D1F7A;

  /* Spinko-Purple */
  --purple: #6B3DDB;
  --purple-bright: #7A4CE6;
  --purple-deep: #4B2A9C;
  --purple-light: #B89CF0;

  /* Spinko-Green */
  --green: #FF48CD;
  --green-bright: #FF83DD;
  --green-deep: #A62A84;
  --orange: #FF8A00;
  --orange-bright: #FFA726;
  --orange-deep: #F5562D;
  --gold: #FAD879;
  --cream: #FCE393;
  --green-light: #5BFA7E;

  /* Text */
  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.6);

  /* Funnel-2 — Truhen-Tier-Tokens (Spinko-konform) */
  --tier-1: #7A4CE6;          /* Light-Tier (ehemals bronze) */
  --tier-1-bright: #B89CF0;
  --tier-2: #6B3DDB;          /* Mid-Tier (ehemals silver) */
  --tier-2-bright: #7A4CE6;
  --tier-3: #FF83DD;          /* Top-Tier (ehemals gold = Spinko-Brand-Highlight) */
  --tier-3-bright: #5BFA7E;
  --tier-stage2: #4B2A9C;     /* Stage-2 Deep-Purple (ehemals burgundy) */
  --tier-stage2-bright: #6B3DDB;

  /* Sizing */
  --radius-pill: 9999px;
  --radius-lg: 1.5rem;
  --radius-md: 1rem;

  /* Typo */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
}

/* ---------- 2. Reset / Normalize ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(91, 46, 184, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(21, 203, 60, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(139, 95, 224, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, #1A0D3E 0%, #1A0D3E 60%, #231045 100%);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

button {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ---------- 3. Stage-2 hidden bis Modal-1-CTA-Klick ---------- */
.stage-2-hidden {
  display: none;
}

/* ---------- 4. Sound-Toggle (Global G0) ---------- */
.sound-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(139, 95, 224, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(26, 27, 61, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  border-color: var(--purple-bright);
  background: rgba(26, 27, 61, 0.95);
  outline: none;
}

.sound-toggle:active {
  transform: scale(0.94);
}

.sound-toggle.sound-on {
  background: var(--green);
  border-color: var(--green-bright);
  color: var(--bg-deep);
}

.sound-toggle.sound-on svg line {
  display: none;
}

/* ---------- 5. Hero (S1) ---------- */
.hero-container {
  position: relative;
  max-width: 1024px;
  margin-inline: auto;
  padding: 0.875rem 1.5rem 0.5rem;
  text-align: center;
  overflow: hidden;
}

.glow-spot {
  position: absolute;
  top: 2.5rem;
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-pill);
  filter: blur(64px);
  pointer-events: none;
}
.glow-spot-left  { left: 25%;  background: var(--green);          opacity: 0.22; }
.glow-spot-right { right: 25%; background: var(--purple-bright);  opacity: 0.30; }

.wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--text);
}
.wordmark-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--bg-deep);
}

.hero-label {
  display: inline-block;
  padding: 0.375rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.hero-lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.hero-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: var(--green-bright);
  text-shadow: 0 4px 24px rgba(34, 229, 76, 0.45);
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
.hero-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green-deep) 100%);
  color: var(--bg-deep);
  box-shadow:
    0 0 30px rgba(34, 229, 76, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero-badge-percent {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
}
.hero-badge-text {
  font-weight: 700;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .hero-container  { padding: 1.75rem 3rem 1rem; }
  .wordmark        { margin-bottom: 1rem; }
  .wordmark-text   { font-size: 1.5rem; }
  .wordmark-star   { width: 2.25rem; height: 2.25rem; }
  .hero-label      { font-size: 0.875rem; }
  .hero-lead       { font-size: 40px; }
  .hero-number     { font-size: 78px; }
  .hero-sub        { font-size: 30px; }
  .hero-badge-percent { font-size: 1.5rem; }
  .hero-badge-text    { font-size: 0.875rem; }
}

/* ---------- 6. Stage-Section (S2 + S4) ---------- */
.stage-section {
  padding: 0.5rem 1.5rem 2rem;
  max-width: 1024px;
  margin-inline: auto;
}

.stage-header {
  text-align: center;
  margin-bottom: 0.875rem;
}

.stage-label-pill {
  display: inline-block;
  padding: 0.375rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}

.stage-subline {
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}
.stage-subline .hl {
  color: var(--green-bright);
  font-weight: 600;
}

.counter-text {
  white-space: nowrap;
  color: var(--text);
  opacity: 0.65;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
}

@media (min-width: 768px) {
  .stage-section   { padding: 0.75rem 3rem 3rem; }
  .stage-subline   { font-size: 1rem; }
}

/* ---------- 7. Chest-Grid + Slot ---------- */
.chest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: 32rem;
  margin-inline: auto;
  padding: 0 0.25rem;
}

@media (min-width: 768px) {
  .chest-grid {
    gap: 1.5rem;
    max-width: 48rem;
  }
}

.chest-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.chest-container {
  position: relative;
  cursor: pointer;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 5 / 4;
  transition: transform 0.2s ease;
  outline: none;
}

.chest-container:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 4px;
  border-radius: 8px;
}

.chest-container.is-idle:hover {
  animation: wobble 800ms ease-in-out infinite;
}

.chest-container.is-opened {
  cursor: default;
  pointer-events: none;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}

/* Stage-2 Größen-Varianten S/M/L */
.chest-grid--stage-2 { align-items: end; }

.chest-size-s { transform: scale(0.86); transform-origin: bottom center; }
.chest-size-m { transform: scale(0.93); transform-origin: bottom center; }
.chest-size-l { transform: scale(1.00); transform-origin: bottom center; }

.chest-size-s.is-idle:hover { animation: wobble-s 800ms ease-in-out infinite; }
.chest-size-m.is-idle:hover { animation: wobble-m 800ms ease-in-out infinite; }
.chest-size-l.is-idle:hover { animation: wobble-l 800ms ease-in-out infinite; }

@keyframes wobble-s {
  0%, 100% { transform: scale(0.86) rotate(0deg); }
  25%      { transform: scale(0.86) rotate(-2.5deg); }
  75%      { transform: scale(0.86) rotate(2.5deg); }
}
@keyframes wobble-m {
  0%, 100% { transform: scale(0.93) rotate(0deg); }
  25%      { transform: scale(0.93) rotate(-2.5deg); }
  75%      { transform: scale(0.93) rotate(2.5deg); }
}
@keyframes wobble-l {
  0%, 100% { transform: scale(1.00) rotate(0deg); }
  25%      { transform: scale(1.00) rotate(-2.5deg); }
  75%      { transform: scale(1.00) rotate(2.5deg); }
}

/* ---------- 8. Chest-SVG + Open-Animation ---------- */
.chest-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
  transition: filter 0.4s ease;
}
.chest-container.is-idle .chest-svg {
  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px rgba(34, 229, 76, 0.35));
}
.chest-container.is-opened .chest-svg {
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 38px rgba(34, 229, 76, 0.7));
}

.chest-lid {
  transform-origin: 50% 55%;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chest-container.is-opened .chest-lid {
  transform: rotate(-62deg) translate(-4px, -6px);
}

.chest-inner-glow {
  opacity: 0;
  transition: opacity 500ms ease 250ms;
}
.chest-container.is-opened .chest-inner-glow {
  opacity: 1;
  animation: glow-pulse 1.6s ease-in-out infinite 700ms;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

.chest-coin {
  opacity: 0;
  transition:
    opacity 400ms ease 400ms,
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms;
}
.chest-container.is-opened .chest-coin   { opacity: 1; }
.chest-container.is-opened .chest-coin-1 { transform: translate(-8px,  -8px); }
.chest-container.is-opened .chest-coin-2 { transform: translate( 6px, -10px); }
.chest-container.is-opened .chest-coin-3 { transform: translate(-2px, -14px); }

/* ---------- 9. Label + Reveal-Pill ---------- */
.chest-label-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.chest-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: opacity 200ms ease;
  display: flex;
  align-items: center;
}
.chest-container.is-opened ~ .chest-label-wrap .chest-label {
  display: none;
}

.chest-reveal-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green-deep) 100%);
  color: #FFFFFF;
  box-shadow:
    0 0 24px rgba(34, 229, 76, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.02em;
  animation: pill-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms backwards;
}

.chest-container.is-opened ~ .chest-label-wrap .chest-reveal-pill {
  display: inline-flex;
}

@media (min-width: 640px) {
  .chest-reveal-pill { font-size: 18px; padding: 7px 18px; }
}

@keyframes pill-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(8px); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ---------- 10. Partikel-Burst ---------- */
.particle-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #FFFFFF 0%, var(--green-bright) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 8px var(--green-bright);
}
.particle.burst {
  animation: burst 1000ms ease-out forwards;
}
@keyframes burst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -80px)) scale(0.3); }
}

/* ---------- 11. Modal-Overlay (S3 + S5) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(11, 13, 46, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 300ms ease;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open {
  display: flex;
  opacity: 1;
}

.modal-body {
  max-width: 28rem;
  width: 100%;
  margin: auto;
  transform: scale(0.95);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.is-open .modal-body { transform: scale(1); }

.modal-frame {
  padding: 1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--purple-bright) 0%, var(--green) 100%);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
}

.modal-inner {
  padding: 2rem 2rem 2.5rem;
  border-radius: calc(var(--radius-lg) - 1px);
  background: var(--bg-mid);
  text-align: center;
}

.modal-top-marker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--green-bright);
  margin-bottom: 1rem;
}

.modal-emoji {
  font-size: 3.75rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.modal-big-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  color: var(--green-bright);
  text-shadow: 0 4px 16px rgba(34, 229, 76, 0.45);
  margin-bottom: 0.75rem;
}

.modal-body-text {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .modal-inner       { padding: 2.5rem 2.5rem 2.75rem; }
  .modal-emoji       { font-size: 4.5rem; }
  .modal-big-number  { font-size: 4rem; }
}

/* ---------- 12. CTA-Green ---------- */
.cta-green {
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green-deep) 100%);
  color: #FFFFFF;
  border: 3px solid var(--purple-bright);
  box-shadow:
    0 0 0 1px var(--bg-deep),
    0 0 30px rgba(34, 229, 76, 0.45),
    0 4px 0 var(--green-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
}

.modal-cta {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-size: 1.0625rem;
  transition: transform 200ms ease, filter 200ms ease;
}
.modal-cta:hover  { transform: scale(1.02); }
.modal-cta:active { transform: scale(0.98); }
.modal-cta:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 4px;
}

/* ---------- 13. Sticker-Strip ---------- */
.sticker-strip-section {
  max-width: 1024px;
  margin-inline: auto;
  padding: 0 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.sticker-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 42rem;
  margin-inline: auto;
}

.sticker-strip--stage-2 {
  margin-top: 3rem;
  padding: 0 1.5rem;
}

.sticker {
  padding: 0.4rem 0.875rem;
  background: rgba(26, 27, 61, 0.85);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(139, 95, 224, 0.5);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .sticker-strip { gap: 0.625rem; }
  .sticker       { padding: 0.5rem 1rem; font-size: 0.8125rem; }
}

/* ---------- 14. Slot-Tile-Mosaik ---------- */
.slot-mosaik-section {
  padding: 3rem 1.5rem;
  max-width: 1024px;
  margin-inline: auto;
}

.slot-mosaik-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--text);
  text-align: center;
  margin-bottom: 0.5rem;
}

.slot-mosaik-sub {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.slot-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: 42rem;
  margin-inline: auto;
}

.slot-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid var(--purple-bright);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--purple-deep) 100%);
  box-shadow:
    0 0 0 1px var(--bg-deep),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .slot-mosaik-title { font-size: 1.625rem; }
  .slot-tile-grid    { grid-template-columns: repeat(8, 1fr); }
  .slot-tile         { font-size: 1.875rem; }
}

/* ---------- 15. Compliance-Footer ---------- */
.compliance-footer {
  margin-top: 2rem;
  padding: 2.5rem 1.5rem;
  background: #0F0724;
  border-top: 2px solid var(--purple-deep);
}

.compliance-footer-inner {
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.compliance-footer p { margin: 0; }

.compliance-link {
  text-decoration: underline;
  color: rgba(34, 229, 76, 0.85);
}

.affiliate-disclosure { opacity: 0.65; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(139, 95, 224, 0.18);
}

.footer-links a {
  text-decoration: underline;
  color: var(--text-muted);
}

/* ---------- 16. Final-Modal (S5) ---------- */
.modal-frame-final {
  padding: 1.5px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green-bright) 0%, var(--purple-bright) 50%, var(--green) 100%);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(34, 229, 76, 0.45);
}

.modal-emoji-big {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.modal-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.modal-sub {
  font-family: var(--font-body);
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}

.reveal-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.reveal-card {
  padding: 1rem 1.25rem;
  background: rgba(42, 43, 79, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 95, 224, 0.45);
  border-radius: var(--radius-md);
  text-align: center;
}

.reveal-card-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.reveal-card-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--green-bright);
  text-shadow: 0 2px 12px rgba(34, 229, 76, 0.4);
}

.modal-final-cta {
  display: block;
  width: 100%;
  padding: 1.125rem 2rem;
  border-radius: var(--radius-pill);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  transition: transform 200ms ease;
  text-align: center;
}
.modal-final-cta:hover  { transform: scale(1.025); }
.modal-final-cta:active { transform: scale(0.98); }
.modal-final-cta:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 4px;
}

@media (min-width: 768px) {
  .modal-emoji-big   { font-size: 5.25rem; }
  .modal-headline    { font-size: 2.25rem; }
  .reveal-card-value { font-size: 2.125rem; }
}

/* ---------- 17. prefers-reduced-motion — Chest-Branch ---------- */
@media (prefers-reduced-motion: reduce) {
  .chest-container.is-idle:hover { animation: none; }
  .chest-lid { transition: opacity 200ms ease; }
  .chest-container.is-opened .chest-lid { transform: none; opacity: 0.3; }
  .chest-container.is-opened .chest-inner-glow { animation: none; }
  .chest-container.is-opened .chest-coin { transition: opacity 200ms ease; }
  .chest-reveal-pill { animation: none; }
  .particle.burst { animation: none; opacity: 0; }
  .modal-overlay { transition: opacity 100ms ease; }
  .modal-body { transition: none; transform: scale(1); }
}

/* ---------- 18. Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Logo-Image (wordmark replacement) ---------- */
.wordmark-img {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
  max-height: 56px;
  margin: 0 auto;
  filter: drop-shadow(0 4px 18px rgba(21, 203, 60, 0.25));
}
@media (max-width: 600px) {
  .wordmark-img {
    max-width: 180px;
    max-height: 48px;
  }
}
@media (min-width: 768px) {
  .wordmark-img {
    max-width: 280px;
    max-height: 72px;
  }
}

/* ============================================================
   CRO-Ergänzungen 2026-08 — Einzahlungs-Framing
   ============================================================ */

/* Bonus-Mechanik: macht aus "gewonnen" ein verstandenes Angebot */
.bonus-math {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px dashed rgba(139, 95, 224, 0.5);
  border-radius: 10px;
  background: rgba(42, 43, 79, 0.45);
}
.bonus-math-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}
.bonus-math-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1rem;
}
.bonus-math-in    { color: rgba(255, 255, 255, 0.82); }
.bonus-math-arrow { color: rgba(255, 255, 255, 0.45); }
.bonus-math-out   { color: #22E54C; }

/* Vorframing direkt über dem CTA */
.next-step-hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(139, 95, 224, 0.14);
  border-left: 3px solid #8B5FE0;
  border-radius: 0 10px 10px 0;
  padding: 0.65rem 0.85rem;
  margin: 0 0 1.1rem;
  text-align: left;
}
.next-step-hint strong { color: #fff; }

/* Zahlungsmethoden */
.pay-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.pay-chip {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
}

.modal-fineprint {
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 1rem;
}

/* Exit-Intent-Modal */
.exit-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  z-index: 2;
}
.exit-stay-link {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  background: none;
  border: none;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: underline;
  cursor: pointer;
}

/* Reviews */
.reviews-section {
  padding: 2rem 1.25rem 2.5rem;
  max-width: 560px;
  margin: 0 auto;
}
.reviews-headline {
  font-weight: 800;
  font-size: 1.15rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1.1rem;
}
.review-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(139, 95, 224, 0.28);
  border-radius: 10px;
  background: rgba(42, 43, 79, 0.55);
  text-align: left;
}
.review-avatar {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(135deg, #8B5FE0, #FF48CD);
}
.review-stars { color: #FFC53D; font-size: 0.7rem; letter-spacing: -0.04em; }
.review-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.1rem 0 0.3rem;
}
.review-text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}