Öffnet bei 50 % Scroll-Tiefe oder nach einem Zeit-Fallback; nach dem Schließen
7 Tage Pause via localStorage. Backdrop-Blur, sanfter Eintritts-Transform, schließt
über ESC, X und Backdrop, gibt den Fokus an den Auslöser zurück. Vorbild: NDS, Silver Mountain,
Bernstein. (Demo öffnet hier per Knopf statt per Scroll/Zeit.)
Förderung prüfen
Bis zu 4.000 € Zuschuss — haben Sie Anspruch?
In zwei Minuten prüfen, ob die Voraussetzungen erfüllt sind. Anschließend unterstützen wir bei der Antragstellung.
Anspruch jetzt prüfen<button type="button" data-open-lead>Popup öffnen</button>
<div class="fx-lead" id="lead" role="dialog" aria-modal="true" aria-labelledby="lead-t" hidden>
<div class="fx-lead__card">
<button type="button" class="fx-lead__close" data-lead-close aria-label="Schließen">×</button>
<div class="fx-lead__icon" aria-hidden="true">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 2"/></svg>
</div>
<span class="fx-lead__eyebrow">Förderung prüfen</span>
<h2 id="lead-t" class="fx-lead__title">Bis zu <strong>4.000 €</strong> Zuschuss — haben Sie Anspruch?</h2>
<p class="fx-lead__text">In zwei Minuten prüfen, ob die Voraussetzungen erfüllt sind.</p>
<a href="#" class="fx-lead__cta" data-lead-close>Anspruch jetzt prüfen</a>
<button type="button" class="fx-lead__later" data-lead-close>Später, danke</button>
</div>
</div>
<style>
.fx-lead{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(10,10,14,.55);-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);
opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.fx-lead.open{opacity:1;visibility:visible}
.fx-lead__card{position:relative;width:min(420px,100%);background:#17171b;border:1px solid #2b2b33;border-radius:20px;
padding:38px 32px 28px;text-align:center;color:#e9e9ee;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fx-lead.open .fx-lead__card{transform:none}
.fx-lead__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:11px;background:transparent;
border:1px solid #34343e;color:#a1a1aa;font-size:22px;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease}
.fx-lead__close:hover,.fx-lead__close:focus-visible{background:rgba(255,255,255,.06);color:#f4f4f5}
.fx-lead__icon{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
background:color-mix(in srgb,var(--akzent, #7c87ff) 16%,transparent);color:var(--akzent, #7c87ff)}
.fx-lead__eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--akzent, #7c87ff);margin-bottom:10px}
.fx-lead__title{font-size:1.4rem;line-height:1.25;margin:0 0 12px;font-weight:800}
.fx-lead__title strong{color:var(--akzent, #7c87ff)}
.fx-lead__text{font-size:.92rem;line-height:1.6;color:#a1a1aa;margin:0 0 22px}
.fx-lead__cta{display:block;width:100%;padding:.8em 1.1em;border-radius:99px;background:var(--akzent, #7c87ff);
color:#fff;font-weight:700;text-decoration:none;margin-bottom:10px;transition:filter .2s ease}
.fx-lead__cta:hover,.fx-lead__cta:focus-visible{filter:brightness(1.1)}
.fx-lead__later{width:100%;background:transparent;border:1px solid #34343e;color:#a1a1aa;border-radius:99px;
padding:.7em 1.1em;font:inherit;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.fx-lead__later:hover,.fx-lead__later:focus-visible{background:rgba(255,255,255,.05);color:#f4f4f5}
@media (prefers-reduced-motion:reduce){.fx-lead,.fx-lead__card{transition:none}}
</style>
<script>
(function(){
var modal=document.getElementById('lead');
if(!modal) return;
var KEY='fx-lead-dismissed', TTL=7*24*60*60*1000; // 7 Tage Pause
var SCROLL=0.5, FALLBACK=20000; // 50% Tiefe / 20s Fallback
var opened=false, lastFocus=null, timer=null;
function dismissed(){
try{var ts=parseInt(localStorage.getItem(KEY)||'0',10);
return ts && (Date.now()-ts < TTL);}catch(e){return false;}
}
function remember(){try{localStorage.setItem(KEY,String(Date.now()));}catch(e){}}
function open(){
if(opened) return; opened=true;
lastFocus=document.activeElement;
modal.hidden=false;
requestAnimationFrame(function(){modal.classList.add('open');});
document.body.style.overflow='hidden'; // Body-Scroll-Lock
window.removeEventListener('scroll',onScroll);
if(timer) clearTimeout(timer);
setTimeout(function(){modal.querySelector('.fx-lead__close').focus();},40);
}
function close(){
modal.classList.remove('open');
document.body.style.overflow=''; // Scroll-Lock lösen
remember();
setTimeout(function(){modal.hidden=true;},300);
if(lastFocus && lastFocus.focus) lastFocus.focus();
}
modal.addEventListener('click',function(e){
if(e.target===modal || e.target.closest('[data-lead-close]')){e.preventDefault();close();}
});
document.addEventListener('keydown',function(e){
if(e.key==='Escape' && !modal.hidden) close();
});
// Manueller Auslöser (z.B. Demo-Knopf)
var trigger=document.querySelector('[data-open-lead]');
if(trigger) trigger.addEventListener('click',open);
// Auto-Trigger: 50% Scroll-Tiefe ODER Zeit-Fallback
function depth(){var h=document.documentElement.scrollHeight-window.innerHeight;
return h<=0?1:(window.scrollY||0)/h;}
function onScroll(){if(!opened && depth()>=SCROLL) open();}
if(!dismissed()){
window.addEventListener('scroll',onScroll,{passive:true});
timer=setTimeout(open,FALLBACK);
}
})();
</script>