/* Optional: lieber im als einbinden, aber @import geht auch */ @import url("/floating/floating-wpp.min.css"); /* Overlay */ #whats-exit-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:2147483646; /* über dem WA-Button */ padding:1rem; overflow:auto; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; } #whats-exit-overlay.open{ display:flex; opacity:1; visibility:visible; } /* Modal */ .whats-exit-modal{ background:#fff; color:#1f2a44; width:min(520px, 92vw); border-radius:12px; padding:1.25rem 1.25rem 1rem; box-shadow:0 12px 32px rgba(31,42,68,.15); position:relative; text-align:center; } /* Close */ .whats-exit-close{ position:absolute; top:.5rem; right:.5rem; background:transparent; border:0; color:#6b7280; font-size:1.25rem; line-height:1; cursor:pointer; } .whats-exit-close:hover,.whats-exit-close:focus{ color:#111827; outline:none; } /* Headline + Unterzeile */ .whats-exit-hl{ margin:0 0 .25rem; font-size:1.35rem; line-height:1.25; } .whats-exit-subtitle{ margin:0 0 .75rem; font-size:.95rem; line-height:1.35; color:#64748b; } /* Vorteils-Liste */ .whats-exit-points{ list-style:none; padding:0; margin:.25rem 0 1rem; display:grid; gap:.45rem; text-align:left; } .whats-exit-points li{ display:flex; align-items:flex-start; gap:.5rem; } .whats-exit-points .ico{ flex:0 0 auto; margin-top:.15rem; color:#16a34a; } /* Actions */ .whats-exit-actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:.5rem; } .whats-exit-cta{ font:inherit; cursor:pointer; border-radius:.5rem; padding:.6rem 1rem; border:0; transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease; } .whats-exit-primary{ background:#25D366; color:#fff; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 6px 14px rgba(37,211,102,.25); } .whats-exit-primary:hover{ filter:brightness(0.95); box-shadow:0 8px 18px rgba(37,211,102,.32); } .whats-exit-primary:active{ transform:translateY(1px); } .whats-exit-secondary{ background:transparent; color:#1f2a44; } .whats-exit-secondary:hover,.whats-exit-secondary:focus{ text-decoration:underline; } /* Icon im Primary-Button */ .whats-exit-primary .wa-icn{ width:20px; height:20px; flex:0 0 auto; vertical-align:middle; } /* Mobile Feinschliff */ @media (max-width:420px){ .whats-exit-hl{ font-size:1.25rem; } .whats-exit-subtitle{ font-size:.9rem; } .whats-exit-modal{ padding:1rem; } }