/* De nieuwsbrief-pop-up (13 okt 2026). HTML: nieuwsbrief_popup() in technisch/bouw.py, gedrag: js/nieuwsbrief-popup.js.
   Op zichzelf staand, want hij staat ook op de homepage-reel (zonder site.css). Kleuren uit tokens.json.
   Klein en in het midden; op gsm een bottom sheet. */
.nb-popup { --nb-ivory: #F2E8DA; --nb-ivorydof: #ADA79C; --nb-goud: #D3B27E; --nb-charcoal: #1A1A1A; --nb-rood: #8F2E22;
  position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: var(--nb-charcoal); }
.nb-popup[hidden] { display: none; }
.nb-popup *, .nb-popup *::before, .nb-popup *::after { box-sizing: border-box; }
.nb-popup-laag { position: absolute; inset: 0; background: rgba(26,26,26,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: nb-in .3s ease; }
.nb-popup-kaart { position: relative; width: min(460px, 100%); background: var(--nb-ivory); border-radius: 24px; padding: 34px 34px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: nb-kaart .4s cubic-bezier(.2,.8,.2,1); outline: none; }
.nb-popup-kaart h2 { margin: 0 0 10px; font-family: "Cal Sans", system-ui, sans-serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: inherit; }
.nb-popup-kaart > p { margin: 0 0 20px; font-size: 15.5px; color: #5B5B5B; }
.nb-popup-sluit { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(26,26,26,.14); background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nb-popup-sluit svg { width: 16px; height: 16px; }
.nb-popup-sluit:hover { background: rgba(26,26,26,.07); }
.nb-popup-velden { display: grid; gap: 10px; margin-bottom: 12px; }
.nb-popup-velden input { width: 100%; background: #fff; color: inherit; border: 1px solid rgba(26,26,26,.2); border-radius: 14px; padding: 13px 16px; font: inherit; font-size: 15.5px; }
.nb-popup-velden input::placeholder { color: #7a766e; }
.nb-popup-velden input:focus { outline: none; border-color: var(--nb-charcoal); box-shadow: 0 0 0 3px rgba(26,26,26,.14); }
.nb-popup-velden input.fout { border-color: var(--nb-rood); }
.nb-vink { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #5B5B5B; margin: 2px 0 16px; cursor: pointer; }
.nb-vink input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--nb-charcoal); }
.nb-vink.fout { color: var(--nb-rood); }
.nb-vink a { color: inherit; }
.nb-knop { display: flex; width: 100%; justify-content: center; align-items: center; border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer;
  background: var(--nb-goud); color: var(--nb-charcoal); font: 600 15px/1.2 "Manrope", system-ui, sans-serif; transition: background .25s ease, color .25s ease; }
.nb-knop:hover { background: var(--nb-charcoal); color: var(--nb-ivory); }
.nb-knop[disabled] { opacity: .6; cursor: wait; }
.nb-melding { margin: 0; font-size: 15.5px; }
.nb-melding.fout { color: var(--nb-rood); font-size: 13.5px; margin-top: 10px; }
.nb-popup-sluit:focus-visible, .nb-knop:focus-visible, .nb-vink input:focus-visible, .nb-vink a:focus-visible { outline: 2px solid var(--nb-charcoal); outline-offset: 3px; }
.nb-popup-kaart ::selection { background: var(--nb-goud); color: var(--nb-charcoal); }
.ts-vak:empty { display: none; }
@keyframes nb-in { from { opacity: 0 } }
@keyframes nb-kaart { from { opacity: 0; transform: translateY(16px) scale(.98) } }
@media (max-width: 600px) {
  .nb-popup { align-items: flex-end; padding: 0; }
  .nb-popup-kaart { width: 100%; border-radius: 24px 24px 0 0; padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); max-height: 88dvh; overflow: auto; }
  @keyframes nb-kaart { from { transform: translateY(40px) } }
}
@media (prefers-reduced-motion: reduce) { .nb-popup-laag, .nb-popup-kaart { animation: none; } }