#nhp-funnel{
--nhp-ink:#060509;--nhp-ink-1:#0E1014;--nhp-ink-2:#15181D;--nhp-paper:#F7F4F0;
--nhp-soft:#9AA6B0;--nhp-mute:#7A8794;--nhp-acid:#F3F871;
--nhp-line:rgba(247,244,240,.16);--nhp-line-2:rgba(247,244,240,.28);
--nhp-ease:cubic-bezier(.22,1,.36,1);
position:fixed;inset:0;z-index:100000;
display:flex;align-items:center;justify-content:center;
padding:clamp(0px,2.5vh,28px) clamp(0px,2.5vw,28px);
font-family:'Grift','Helvetica Neue',Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
#nhp-funnel[hidden]{display:none}
#nhp-funnel *{box-sizing:border-box}
#nhp-funnel .nhp-fn-backdrop{
position:absolute;inset:0;background:rgba(6,5,9,.82);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;transition:opacity .32s var(--nhp-ease);
}
#nhp-funnel.nhp-fn-auf .nhp-fn-backdrop{opacity:1}
#nhp-funnel .nhp-fn-dialog{
position:relative;z-index:1;width:100%;max-width:660px;max-height:100%;
display:flex;flex-direction:column;overflow:hidden;
background:var(--nhp-ink-1);color:var(--nhp-paper);
border:1px solid var(--nhp-line);border-radius:clamp(0px,2.4vw,26px);
box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
opacity:0;transform:translateY(22px) scale(.985);
transition:opacity .34s var(--nhp-ease),transform .34s var(--nhp-ease);
}
#nhp-funnel.nhp-fn-auf .nhp-fn-dialog{opacity:1;transform:none}
#nhp-funnel .nhp-fn-kopf{
flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,34px) clamp(14px,2vw,18px);
border-bottom:1px solid var(--nhp-line);
}
#nhp-funnel .nhp-fn-kopf-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
#nhp-funnel .nhp-fn-marke{
font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--nhp-acid);line-height:1.2;
}
#nhp-funnel .nhp-fn-kopf-info{font-size:13px;font-weight:400;color:var(--nhp-mute);line-height:1.3}
#nhp-funnel .nhp-fn-zu{
flex:none;width:36px;height:36px;border-radius:50%;
border:1px solid var(--nhp-line);background:transparent;color:var(--nhp-soft);
font-size:20px;line-height:1;cursor:pointer;padding:0;
display:inline-flex;align-items:center;justify-content:center;
transition:border-color .18s var(--nhp-ease),color .18s var(--nhp-ease),transform .18s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-zu:hover{border-color:var(--nhp-paper);color:var(--nhp-paper);transform:rotate(90deg)}
#nhp-funnel .nhp-fn-fortschritt{flex:none;height:3px;background:rgba(247,244,240,.1)}
#nhp-funnel .nhp-fn-balken{
display:block;height:100%;width:0;background:var(--nhp-acid);
transition:width .42s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-body{
flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
padding:clamp(24px,3.6vw,38px) clamp(20px,3vw,34px) clamp(20px,3vw,28px);
}
#nhp-funnel .nhp-fn-schritt[hidden]{display:none}
#nhp-funnel .nhp-fn-schritt{animation:nhp-fn-rein .38s var(--nhp-ease) both}
@keyframes nhp-fn-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#nhp-funnel .nhp-fn-kicker{
display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--nhp-mute);margin:0 0 12px;
}
#nhp-funnel .nhp-fn-frage{
font-family:inherit;font-size:clamp(22px,3.4vw,30px);font-weight:800;
letter-spacing:-.035em;line-height:1.1;text-transform:none;
color:var(--nhp-paper);margin:0 0 8px;padding:0;
}
#nhp-funnel .nhp-fn-hilfe{
font-size:14.5px;font-weight:400;line-height:1.5;letter-spacing:normal;
color:var(--nhp-soft);margin:0 0 clamp(20px,2.6vw,26px);
}
#nhp-funnel .nhp-fn-karten{display:grid;gap:10px}
#nhp-funnel .nhp-fn-karte{
position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
width:100%;text-align:left;cursor:pointer;
font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;
color:var(--nhp-paper);background:var(--nhp-ink-2);
border:1px solid var(--nhp-line);border-radius:14px;
padding:17px 18px;margin:0;
transition:border-color .2s var(--nhp-ease),background-color .2s var(--nhp-ease),transform .2s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-karte:hover{border-color:var(--nhp-line-2);transform:translateX(3px)}
#nhp-funnel .nhp-fn-karte-txt{flex:1 1 auto;line-height:1.3}
#nhp-funnel .nhp-fn-karte-haken{
flex:none;width:22px;height:22px;border-radius:50%;
border:1px solid var(--nhp-line-2);position:relative;
transition:background-color .2s var(--nhp-ease),border-color .2s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-karte-haken::after{
content:"";position:absolute;left:6px;top:9px;width:9px;height:5px;
border-left:2px solid var(--nhp-ink);border-bottom:2px solid var(--nhp-ink);
transform:rotate(-45deg) scale(0);transform-origin:center;
transition:transform .2s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-karte[aria-pressed="true"]{border-color:var(--nhp-acid);background:rgba(243,248,113,.08)}
#nhp-funnel .nhp-fn-karte[aria-pressed="true"] .nhp-fn-karte-haken{background:var(--nhp-acid);border-color:var(--nhp-acid)}
#nhp-funnel .nhp-fn-karte[aria-pressed="true"] .nhp-fn-karte-haken::after{transform:rotate(-45deg) scale(1)}
#nhp-funnel .nhp-fn-regler{display:grid;gap:clamp(22px,3vw,30px)}
#nhp-funnel .nhp-fn-regler-zeile{display:block}
#nhp-funnel .nhp-fn-regler-label{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
font-size:15px;font-weight:500;color:var(--nhp-paper);margin:0 0 12px;line-height:1.3;
}
#nhp-funnel .nhp-fn-regler-wert{
flex:none;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--nhp-acid);
min-width:2.2ch;text-align:right;
}
#nhp-funnel .nhp-fn-range{
-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;
background:transparent;margin:0;padding:0;cursor:pointer;
}
#nhp-funnel .nhp-fn-range::-webkit-slider-runnable-track{
height:6px;border-radius:3px;
background:linear-gradient(90deg,var(--nhp-acid) 0%,var(--nhp-acid) var(--nhp-pct,50%),rgba(247,244,240,.14) var(--nhp-pct,50%),rgba(247,244,240,.14) 100%);
}
#nhp-funnel .nhp-fn-range::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
background:var(--nhp-paper);border:0;margin-top:-9px;
box-shadow:0 4px 12px -4px rgba(0,0,0,.8);
transition:transform .16s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-range:active::-webkit-slider-thumb{transform:scale(1.12)}
#nhp-funnel .nhp-fn-range::-moz-range-track{height:6px;border-radius:3px;background:rgba(247,244,240,.14)}
#nhp-funnel .nhp-fn-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--nhp-acid)}
#nhp-funnel .nhp-fn-range::-moz-range-thumb{
width:24px;height:24px;border-radius:50%;background:var(--nhp-paper);border:0;
box-shadow:0 4px 12px -4px rgba(0,0,0,.8);
}
#nhp-funnel .nhp-fn-regler-enden{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;
font-size:12px;font-weight:400;color:var(--nhp-mute);line-height:1.3;
}
#nhp-funnel .nhp-fn-empfehlung{
display:block;background:var(--nhp-acid);color:var(--nhp-ink);
border-radius:16px;padding:18px 20px;margin:0 0 clamp(20px,2.6vw,26px);
}
#nhp-funnel .nhp-fn-empf-kick{
display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:rgba(6,5,9,.62);margin-bottom:6px;
}
#nhp-funnel .nhp-fn-empf-name{
display:block;font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.05;
color:var(--nhp-ink);
}
#nhp-funnel .nhp-fn-empf-info{
display:block;font-size:13.5px;font-weight:500;line-height:1.4;
color:rgba(6,5,9,.72);margin-top:6px;
}
#nhp-funnel .nhp-fn-form{display:grid;gap:14px}
#nhp-funnel .nhp-fn-feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#nhp-funnel .nhp-fn-feld{display:block}
#nhp-funnel .nhp-fn-feld-label{
display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
color:var(--nhp-soft);margin:0 0 7px;
}
#nhp-funnel .nhp-fn-feld-label em{font-style:normal;color:var(--nhp-acid)}
#nhp-funnel .nhp-fn-opt{font-weight:400;color:var(--nhp-mute);letter-spacing:normal}
#nhp-funnel .nhp-fn-feld input,#nhp-funnel .nhp-fn-feld textarea{
display:block;width:100%;font-family:inherit;font-size:15.5px;font-weight:400;
color:var(--nhp-paper);background:var(--nhp-ink-2);
border:1px solid var(--nhp-line);border-radius:11px;
padding:13px 14px;margin:0;line-height:1.4;resize:vertical;
transition:border-color .18s var(--nhp-ease),background-color .18s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-feld input:focus,#nhp-funnel .nhp-fn-feld textarea:focus{
outline:none;border-color:var(--nhp-acid);background:#191D22;
}
#nhp-funnel .nhp-fn-feld input[aria-invalid="true"],#nhp-funnel .nhp-fn-feld textarea[aria-invalid="true"]{border-color:#E88A8A}
#nhp-funnel .nhp-fn-consent{
display:flex;align-items:flex-start;gap:11px;margin:4px 0 2px;
font-size:12.5px;font-weight:400;line-height:1.5;color:var(--nhp-soft);cursor:pointer;
}
#nhp-funnel .nhp-fn-consent input{
flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:#F3F871;cursor:pointer;
}
#nhp-funnel .nhp-fn-ds-link{display:inline}
#nhp-funnel .nhp-fn-ds-link a{color:var(--nhp-paper);text-decoration:underline}
#nhp-funnel .nhp-fn-koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#nhp-funnel .nhp-fn-fehler{
background:rgba(232,138,138,.12);border:1px solid rgba(232,138,138,.4);
border-radius:11px;padding:12px 14px;
font-size:13.5px;font-weight:500;line-height:1.45;color:#F3C9C9;
}
#nhp-funnel .nhp-fn-fehler[hidden]{display:none}
#nhp-funnel .nhp-fn-fehler ul{margin:0;padding-left:16px;list-style:disc}
#nhp-funnel .nhp-fn-senden{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
width:100%;cursor:pointer;font-family:inherit;
font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:none;
background:var(--nhp-acid);color:var(--nhp-ink);border:0;border-radius:100px;
padding:16px 26px;margin:6px 0 0;
transition:transform .18s var(--nhp-ease),box-shadow .22s var(--nhp-ease),opacity .18s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-senden:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(243,248,113,.55)}
#nhp-funnel .nhp-fn-senden[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
#nhp-funnel .nhp-fn-klein{
font-size:12px;font-weight:400;line-height:1.45;color:var(--nhp-mute);
margin:2px 0 0;text-align:center;
}
#nhp-funnel .nhp-fn-danke{text-align:center;padding:clamp(10px,3vw,26px) 0}
#nhp-funnel .nhp-fn-danke .nhp-fn-frage{margin-bottom:10px}
#nhp-funnel .nhp-fn-danke .nhp-fn-hilfe{max-width:38ch;margin-left:auto;margin-right:auto}
#nhp-funnel .nhp-fn-danke .nhp-fn-senden{max-width:280px;margin-left:auto;margin-right:auto}
#nhp-funnel .nhp-fn-danke-haken{
display:block;width:56px;height:56px;border-radius:50%;background:var(--nhp-acid);
margin:0 auto 20px;position:relative;
}
#nhp-funnel .nhp-fn-danke-haken::after{
content:"";position:absolute;left:18px;top:23px;width:20px;height:10px;
border-left:3px solid var(--nhp-ink);border-bottom:3px solid var(--nhp-ink);
transform:rotate(-45deg);
}
#nhp-funnel .nhp-fn-fuss{
flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:clamp(14px,2vw,18px) clamp(20px,3vw,34px);
border-top:1px solid var(--nhp-line);min-height:66px;
}
#nhp-funnel .nhp-fn-fuss button[hidden]{display:none}
#nhp-funnel .nhp-fn-zurueck{
cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;
background:transparent;color:var(--nhp-soft);border:0;padding:8px 2px;margin:0;
transition:color .18s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-zurueck:hover{color:var(--nhp-paper)}
#nhp-funnel .nhp-fn-weiter{
margin-left:auto;cursor:pointer;font-family:inherit;
font-size:15px;font-weight:600;letter-spacing:-.01em;
background:var(--nhp-paper);color:var(--nhp-ink);border:0;border-radius:100px;
padding:13px 26px;
transition:transform .18s var(--nhp-ease),background-color .18s var(--nhp-ease);
}
#nhp-funnel .nhp-fn-weiter:hover{transform:translateY(-2px);background:var(--nhp-acid)}
#nhp-funnel button:focus-visible,#nhp-funnel input:focus-visible,#nhp-funnel textarea:focus-visible{
outline:2px solid var(--nhp-acid);outline-offset:3px;
}
body.nhp-fn-fest{overflow:hidden !important}
button.nhp-funnel-auf{
display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
font-family:'Grift','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:none;
background:#F3F871;color:#060509;border:0;border-radius:100px;padding:16px 30px;
transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1);
}
button.nhp-funnel-auf:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(243,248,113,.55)}
button.nhp-funnel-auf--schlicht{
background:transparent;color:inherit;border:1px solid currentColor;padding:14px 26px;
}
@media(max-width:700px){
#nhp-funnel{padding:0;align-items:stretch}
#nhp-funnel .nhp-fn-dialog{max-width:none;border-radius:0;border:0;max-height:100%}
#nhp-funnel .nhp-fn-feldpaar{grid-template-columns:1fr}
#nhp-funnel .nhp-fn-frage{font-size:22px}
#nhp-funnel .nhp-fn-karte{padding:15px 16px;font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
#nhp-funnel .nhp-fn-backdrop,#nhp-funnel .nhp-fn-dialog,#nhp-funnel .nhp-fn-balken,
#nhp-funnel .nhp-fn-karte,#nhp-funnel .nhp-fn-zu,#nhp-funnel .nhp-fn-senden,
#nhp-funnel .nhp-fn-weiter,#nhp-funnel .nhp-fn-karte-haken,
#nhp-funnel .nhp-fn-karte-haken::after{transition:none}
#nhp-funnel .nhp-fn-schritt{animation:none}
#nhp-funnel .nhp-fn-dialog{transform:none}
#nhp-funnel .nhp-fn-karte:hover,#nhp-funnel .nhp-fn-senden:hover,
#nhp-funnel .nhp-fn-weiter:hover,button.nhp-funnel-auf:hover{transform:none}
#nhp-funnel .nhp-fn-zu:hover{transform:none}
}