/* Newsletter-Popup — bewusst zurueckhaltend.
   Farben aus theme-light.css uebernommen (--dark #142B3D, Akzent #2F6DF6),
   damit es nicht wie ein Fremdkoerper wirkt. */
#sv-nl {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 43, 61, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: sv-nl-ein .22s ease-out;
}
@keyframes sv-nl-ein { from { opacity: 0 } to { opacity: 1 } }
.sv-nl-box {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  font-family: "DM Sans", system-ui, sans-serif;
  animation: sv-nl-hoch .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sv-nl-hoch { from { transform: translateY(12px) } to { transform: none } }
.sv-nl-zu {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: #5C7284; padding: 4px 8px;
}
.sv-nl-zu:hover { color: #142B3D }
#sv-nl h2 { font-size: 18px; font-weight: 700; color: #142B3D; margin: 0 0 8px; letter-spacing: -.3px; line-height: 1.3 }
.sv-nl-sub { font-size: 13.5px; color: #475569; line-height: 1.55; margin: 0 0 18px }
.sv-nl-form { display: flex; flex-direction: column; gap: 12px }
.sv-nl-mail {
  width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit;
  border: 1.5px solid #E2E8F0; border-radius: 10px; background: #F7FAFD; color: #142B3D;
}
.sv-nl-mail:focus { outline: none; border-color: #2F6DF6; background: #fff }
.sv-nl-check { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; color: #475569; line-height: 1.5; cursor: pointer }
.sv-nl-check input { margin-top: 2px; flex-shrink: 0 }
/* 11,5px = kleiner Text -> --accent-text (5,51:1) statt --accent (4,53:1) */
.sv-nl-check a { color: #145AF5 }
.sv-nl-senden {
  padding: 11px 16px; font-size: 14px; font-weight: 600; font-family: inherit;
  background: #142B3D; color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: opacity .2s;
}
.sv-nl-senden:hover { opacity: .88 }
.sv-nl-senden:disabled { opacity: .55; cursor: default }
.sv-nl-meldung { font-size: 12.5px; margin: 0; min-height: 1px; color: #475569 }
.sv-nl-rot { color: #b91c1c }
.sv-nl-fertig { font-size: 13.5px; color: #142B3D; line-height: 1.6; margin: 0 }
@media (max-width: 480px) { .sv-nl-box { padding: 22px 18px 18px } #sv-nl h2 { font-size: 16.5px } }
@media (prefers-reduced-motion: reduce) { #sv-nl, .sv-nl-box { animation: none } }
