/* Homepage-Paket 2 Teil 1: Exit-Intent-Popup — Glas-Spec (entscheidungen.md):
   Sheet rgba(22,36,26,.62) + blur(24px), 1px-Border rgba(255,255,255,.14),
   Gold nur als Akzent (CTA-Gradient d8b98a→c9a575). rgba-Fallback ohne
   backdrop-filter deckt alte Browser ab. */

.wy-exit {
    position: fixed;
    inset: 0;
    z-index: 12000; /* über Kursplan (planActive) und Sheets, unter nichts Relevantem */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 10, 6, 0.55);
    font-family: var(--font-sans, 'Jost', sans-serif);
}
.wy-exit.is-open { display: flex; }

.wy-exit-sheet {
    position: relative;
    width: min(440px, 100%);
    padding: 28px 26px 24px;
    border-radius: 18px;
    background: rgba(22, 36, 26, 0.92); /* Fallback ohne backdrop-filter */
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    color: #fff;
    text-align: left;
    animation: wy-exit-in .35s cubic-bezier(.22, .61, .36, 1) both;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .wy-exit-sheet {
        background: rgba(22, 36, 26, 0.62);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }
}
/* EIN Keyframe-Set mit CSS-Var — @keyframes in Media Queries zu redefinieren lässt
   laufende Animationen beim Breakpoint-Wechsel im from-Zustand hängen. */
@keyframes wy-exit-in { from { opacity: 0; transform: translateY(var(--wy-exit-from, 16px)) scale(var(--wy-exit-scale, .98)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wy-exit-sheet { animation: none; } }

.wy-exit-close {
    position: absolute; top: 10px; right: 12px;
    background: transparent; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.55); font-size: 1.6rem; line-height: 1;
    padding: 6px 8px;
}
.wy-exit-close:hover { color: #fff; }

.wy-exit-eyebrow { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: #d8b98a; opacity: .85; margin-bottom: 10px; }
.wy-exit-headline { font-family: var(--font-serif, 'Cinzel', serif); font-size: clamp(1.35rem, 5vw, 1.7rem); margin: 0 0 8px; color: #fff; }
.wy-exit-sub { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }

.wy-exit-scarcity {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 9px 12px;
    border-radius: 12px; font-size: .85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(216, 185, 138, 0.28);
    color: rgba(255, 255, 255, .85);
}
.wy-exit-dot { width: 7px; height: 7px; border-radius: 50%; background: #7bd88f; flex: 0 0 auto; animation: wy-exit-pulse 1.6s ease-in-out infinite; }
@keyframes wy-exit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wy-exit-dot { animation: none; } }

.wy-exit-cta {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 14px 20px;
    border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, #d8b98a, #c9a575);
    color: #0b170f; font-weight: 700; font-size: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wy-exit-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(216, 185, 138, .35); color: #0b170f; }

.wy-exit-proof { margin: 12px 0 0; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* Mobil: Bottom-Sheet statt zentrierter Karte (Daumenzone) */
@media (max-width: 640px) {
    .wy-exit { align-items: flex-end; padding: 0; }
    .wy-exit-sheet {
        --wy-exit-from: 40px;
        --wy-exit-scale: 1;
        width: 100%;
        border-radius: 22px 22px 0 0;
        padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
        border-left: none; border-right: none; border-bottom: none;
    }
}