/* Exit-Popup (Splittest A/B). Desktop: Dialog in der Mitte. Handy (.is-leiste): Leiste von unten,
   kein Vollbild, damit Google es nicht als störendes Interstitial wertet. Farben aus styles.css. */
.vm-exit[hidden], .vm-exit [hidden] { display: none !important; }
.vm-exit { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vm-exit-backdrop { position: absolute; inset: 0; background: rgba(7, 9, 15, .72); opacity: 0; transition: opacity .2s ease; }
.vm-exit-box {
  position: relative; width: 100%; max-width: 460px; padding: 30px 28px 22px;
  background: var(--panel); color: var(--text); text-align: left; border: 1px solid rgba(201, 168, 76, .45); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s ease, transform .2s ease;
}
.vm-exit.is-offen .vm-exit-backdrop { opacity: 1; }
.vm-exit.is-offen .vm-exit-box { opacity: 1; transform: none; }

.vm-exit-box h2 { text-align: left; margin: 0 32px 8px 0; font-size: 1.375rem; line-height: 1.25; color: var(--text); outline: none; }
.vm-exit-box p { margin: 0 0 18px; color: var(--muted); font-size: var(--fs-callout); line-height: 1.5; }
.vm-exit-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.vm-exit-x:hover, .vm-exit-x:focus-visible { color: var(--text); border-color: var(--gold); }

.vm-exit-antworten { display: grid; gap: 8px; margin-bottom: 16px; }
.vm-exit-antwort {
  display: block; width: 100%; padding: 12px 16px; text-align: left; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(232, 228, 220, .04); color: var(--text);
  font: 600 var(--fs-callout)/1.35 "Inter", sans-serif; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.vm-exit-antwort:hover, .vm-exit-antwort:focus-visible { border-color: var(--gold); background: rgba(201, 168, 76, .08); outline: none; }

.vm-exit-cta { width: 100%; margin-bottom: 14px; }
.vm-exit-box .vm-exit-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; font-size: var(--fs-caption); }
.vm-exit-fuss a { color: var(--gold-light); }
.vm-exit-klein { color: var(--muted); }
.vm-exit-nein { margin-left: auto; padding: 8px 4px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.vm-exit-nein:hover, .vm-exit-nein:focus-visible { color: var(--text); }

/* Handy: Leiste von unten */
.vm-exit.is-leiste { align-items: flex-end; padding: 0; }
.vm-exit.is-leiste .vm-exit-backdrop { background: rgba(7, 9, 15, .45); }
.vm-exit.is-leiste .vm-exit-box {
  max-width: none; max-height: 56vh; overflow-y: auto; padding: 22px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; transform: translateY(100%);
}
.vm-exit.is-leiste.is-offen .vm-exit-box { transform: none; }
.vm-exit.is-leiste .vm-exit-box h2 { font-size: 1.1875rem; }
.vm-exit.is-leiste .vm-exit-box p { margin-bottom: 12px; }
.vm-exit.is-leiste .vm-exit-antwort { padding: 10px 14px; }

@media (prefers-reduced-motion: reduce) {
  .vm-exit-backdrop, .vm-exit-box { transition: none; }
}