/* ============ Newsletter ============
   Genutzt von der Newsletter-Seite (Honeypot) und vom Scroll-Popup,
   das auf allen Tutorialseiten liegt. */

/* Honeypot: Fuer Menschen unsichtbar, aber nicht per display:none –
   manche Bots ignorieren ausgeblendete Felder gezielt. */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Overlay ---------- */
.nl-pop{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,20,28,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease;
}
.nl-pop.show{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- Dialog ---------- */
.nl-box{
  position:relative;width:100%;max-width:460px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:30px;
  transform:translateY(14px) scale(.98);transition:transform .28s cubic-bezier(.2,.7,.3,1);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.nl-pop.show .nl-box{transform:none}

.nl-box .eyebrow{display:inline-flex;align-items:center;gap:.45rem}
.nl-box h3{font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--heading);margin-top:.6rem;line-height:1.3}
.nl-box .nl-lead{font-size:.9rem;color:var(--muted);margin-top:.5rem;line-height:1.6}
.nl-box .check-list{margin-top:1rem}
.nl-box .check-list li{font-size:.85rem}

/* ---------- Schliessen ---------- */
.nl-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--muted-2);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.nl-x:hover{background:var(--surface-2);border-color:var(--line);color:var(--text)}
.nl-x:focus-visible{outline:2px solid var(--g2);outline-offset:2px}

/* ---------- Formular ---------- */
.nl-form{margin-top:18px;display:grid;gap:12px}
.nl-form .f-field label{font-size:.78rem;font-weight:600;color:var(--text)}
.nl-form .btn{width:100%;justify-content:center}
.nl-note{font-size:.72rem;color:var(--muted-2);line-height:1.55;text-align:center}
.nl-note a{color:var(--accent-text)}

/* Fehler- und Erfolgsmeldung */
.nl-msg{display:none;font-size:.85rem;padding:11px 13px;border-radius:9px;line-height:1.5}
.nl-msg.show{display:block}
.nl-msg.err{background:rgba(198,58,58,.09);border:1px solid rgba(198,58,58,.4);color:#c63a3a}

.nl-done{display:none;text-align:center;padding:8px 0 4px}
.nl-done.show{display:block}
.nl-done .nl-tick{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));
}
.nl-done h3{margin-top:0}
.nl-done p{font-size:.9rem;color:var(--muted);margin-top:.5rem;line-height:1.6}

/* Waehrend des Sendens */
.nl-form.busy{opacity:.6;pointer-events:none}

@media(max-width:520px){
  .nl-box{padding:24px 20px}
  .nl-box h3{font-size:1.1rem}
}

/* Nutzer, die Bewegung reduzieren moechten, bekommen kein Einblenden. */
@media(prefers-reduced-motion:reduce){
  .nl-pop,.nl-box{transition:none}
  .nl-box{transform:none}
}