/* Alleen op de echte site (bouw.mjs --productie): de blokken voor de pagina's die het ontwerp niet had
   (blogs, vacatures, acties, juridisch) en de formulieren. Zelfde maten en kleuren als public/v2.css. */

/* ---------- tekst uit de kloon ---------- */
.n .proza p+p,.n .proza p+ul,.n .proza ul+p,.n .proza p+ol,.n .proza ol+p,.n .proza figure+p,.n .proza p+figure{margin-top:1.05em}
.n .proza h2{margin-top:1.6em;margin-bottom:.5em;font-size:clamp(24px,2.2vw,36px);line-height:1.15;letter-spacing:-.025em}
.n .proza h3{margin-top:1.4em;margin-bottom:.4em;font-size:clamp(19px,1.5vw,24px);line-height:1.25;letter-spacing:-.015em}
.n .proza>h2:first-child,.n .proza>h3:first-child{margin-top:0}
/* :not(.knop): een knop in de lopende tekst (bentwoud, pentest) hield anders deze linkkleur, en bij hover
   werd hij oranje op oranje (hover-contrast, 11-11-2026). */
.n .proza a:not(.knop){color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:2px;text-underline-offset:3px}
.n .proza a:not(.knop):hover{color:var(--oranje-hover)}
.n .proza .vinken{margin-top:1em;border-bottom:1px solid var(--blauwgrijs)}
.n .proza ol{list-style:decimal;padding-left:1.3em}
.n .proza ol li{padding:6px 0 6px .2em}
.n .proza ol li::marker{color:var(--oranje);font-weight:600}
.n .proza figure{margin:1.4em 0}
.n .proza figure img,.n .proza>img{width:100%;height:auto;border-radius:20px}
.n .proza blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--oranje);color:var(--antraciet)}
.n .proza table{width:100%;margin:1.4em 0;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.n .proza th,.n .proza td{padding:10px 12px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.n .proza th{color:var(--antraciet);font-weight:600}
.n .proza .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:2em}
.n .proza em{font-style:italic}

/* Een blog: één kolom op leesbreedte, in een wit vlak. */
.n-artikel{border-radius:32px;background:var(--wit);padding:clamp(32px,4.4vw,84px) var(--in)}
.n-artikel .lijf{max-width:72ch;margin:0 auto;font-size:var(--lijf);line-height:1.75}
.n-pagina.is-post .datum{color:var(--blauwgrijs);font:500 14px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- prijzen (glasvezel) ---------- */
.n-prijzen{padding:clamp(32px,4vw,76px) 0}
.n-prijzen h2{--maat:var(--h2);padding:0 var(--in);margin-bottom:clamp(24px,3vw,48px);font-size:min(var(--maat),calc((100vw - 68px)/(var(--w,1)*.63)))}
/* auto-fit en 210 px: de vijf glasvezelpakketten op één rij vanaf 1280 px, niet vier plus één (11-11-2026). */
.n-prijzen .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.n-prijzen .prijs{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,40px)}
.n-prijzen h3{font-size:clamp(20px,1.6vw,26px);line-height:1.2}
.n-prijzen .sub{color:var(--leigrijs);font-size:15px;line-height:1.5}
.n-prijzen .bedrag{color:var(--antraciet);font:600 clamp(34px,3vw,52px)/1 var(--mono);letter-spacing:-.04em}
.n-prijzen .bedrag span{font:500 14px/1 var(--mono);letter-spacing:.04em;color:var(--leigrijs)}
.n-prijzen .vinken{border-bottom:1px solid var(--blauwgrijs)}
.n-prijzen .noot{font-size:14px;line-height:1.5}
.n-prijzen .knop{margin-top:auto;align-self:flex-start}

/* ---------- stappen (pentest) ---------- */
.n-fases{padding:clamp(36px,4.4vw,84px) var(--in)}
.n-fases h2{--maat:var(--h2);margin-bottom:clamp(24px,3vw,48px);font-size:min(var(--maat),calc((100vw - 68px)/(var(--w,1)*.63)))}
.n-fases .stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.4vw,40px)}
.n-fases li{display:flex;flex-direction:column;gap:14px}
.n-fases .nr{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--oranje);color:var(--op-oranje);font:600 18px/1 var(--mono)}
.n-fases h3{font-size:clamp(19px,1.5vw,24px);line-height:1.2}

/* ---------- ingebedde tool (praktijkscan) ---------- */
.n-frame{padding:clamp(16px,2vw,32px)}
.n-frame iframe{display:block;width:100%;min-height:760px;border:0}

/* ---------- formulieren ---------- */
.n .keuzes{margin:0 0 clamp(16px,1.5vw,24px);padding:16px 18px;border:0;border-radius:14px;background:var(--grijs)}
.n .keuzes .titel{padding:0;margin-bottom:10px;color:var(--antraciet);font-weight:600;font-size:15px}
.n .keuzes label{display:flex;gap:12px;align-items:flex-start;padding:4px 0;font-size:15px;line-height:1.45;color:var(--leigrijs)}
.n .veld select{display:block;width:100%;height:56px;padding:0 18px;border:0;border-radius:14px;background:var(--grijs);color:var(--antraciet);font:400 16px/1.4 var(--sans)}
.n .veld select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--oranje)}
.n .veld input[type=number],.n .veld input[type=url],.n .veld input[type=date]{display:block;width:100%;height:56px;padding:16px 18px;border:0;border-radius:14px;background:var(--grijs);color:var(--antraciet);font:400 16px/1.4 var(--sans)}
.n .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.n .niet-verzonden{display:none;padding:18px 22px;border-radius:14px;background:var(--grijs);color:var(--antraciet);box-shadow:inset 0 0 0 2px var(--oranje)}
.n .niet-verzonden p{font-size:16px;line-height:1.6}
html.st-fout .n .niet-verzonden{display:block;margin-bottom:16px}

/* De cookiebanner van de kloon in de letter van Versie 2. */
.acta-cc{font-family:'Poppins','Poppins Fallback',system-ui,sans-serif}

/* Een kop die een hele zin is (uit de bron) op de maat van een tussenkop, niet van een ontwerpkop. */
.n-tekst.lange-kop h2,.n-split.lange-kop h2{--maat:clamp(28px,2.7vw,48px);line-height:1.1;letter-spacing:-.025em}

/* Tegels met een link (de diensten op Bentwoud). */
.n-tegels h3{font-size:clamp(22px,2vw,32px);line-height:1.1;letter-spacing:-.025em}
.n-tegels .tegel-link{color:var(--leigrijs);text-decoration:none;transition:box-shadow .15s}
.n-tegels .tegel-link:hover{box-shadow:inset 0 0 0 2px var(--oranje)}
.n-tegels .tegel-link .rond{margin-top:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--oranje);color:var(--op-oranje)}
.n-prijzen .lint{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--oranje);color:var(--op-oranje);font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---------- melding na verzenden: de popuptekst van de bron (glasvezel, quiz) ---------- */
.n .verzonden.ruim{align-items:flex-start;padding:26px 28px 28px 22px}
.n .verzonden .na>*+*{margin-top:.75em}
.n .verzonden .na .titel{font-size:clamp(22px,1.9vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.n .verzonden .na .tussenkop{font-weight:600;margin-top:1.2em}
.n .verzonden .na ul{display:grid;gap:.45em}
.n .verzonden .na li{font-size:16px;line-height:1.6}
@media (max-width:599px){.n .verzonden.ruim{flex-direction:column;gap:12px;padding:22px}}
.n .verzonden .na a{color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:2px;text-underline-offset:3px}

/* Het ronde cookieknopje (consent.js) viel over het open mobiele menu, op de regel met het telefoonnummer (11-11-2026). */
html.st-mob .acta-cc__terug{display:none}

/* Een link naast het formulier (de Calendly-agenda op /vrijblijvend-kennismaken/, 11-11-2026). */
.n-formulier .naast{margin-top:1.2em;font-size:16px;line-height:1.6}
.n-formulier .naast a{color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:2px;text-underline-offset:3px}
.n-formulier .naast a:hover{color:var(--oranje-hover)}