/* Gratis SEO-scan: in de stijl van sterkinweb.nl (blauwe vlakken, witte kaarten, koppen in hoofdletters, zwarte pill-knoppen). Mobiel eerst. */

@font-face { font-family: 'Alegreya Sans'; font-weight: 700; font-display: swap; src: url(fonts/AlegreyaSans-700.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-weight: 800; font-display: swap; src: url(fonts/AlegreyaSans-800.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-display: swap; src: url(fonts/Lato-400.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-display: swap; src: url(fonts/Lato-700.woff2) format('woff2'); }

:root {
	/* Globale kleuren van sterkinweb.nl (Elementor) */
	--siw-1: #1B4961;
	--siw-2: #265B77;
	--siw-3: #357AA1;
	--siw-4: #45A5DD;
	--tekst: #363636;
	--donker: #252525;
	--lijn: #D5D5D5;
	--bg: #EDEFF1;
	--knop: #2F855A;        /* SEO-152l: groene hoofdknop (= --groen, witte tekst 4,6:1) */
	--knop-hover: #252525;  /* hover antraciet */
	--vink: #2F9E5A;
	--fout: #C53030;
	--groen: #2F855A;
	--rand: 20px;
	--blauw-vlak: linear-gradient(160deg, #1B4961 0%, #265B77 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.6 'Lato', Arial, sans-serif; } /* SEO-152k (Elmar 27-10): 16px leest rustiger, ook op de computer */
/* Pagina altijd minimaal schermhoog (header + inhoud + footer): footer staat onderaan, ook bij weinig inhoud */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > .kopbalk, body > .voetbalk { flex-shrink: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--siw-3); }
b, strong { color: var(--donker); }
h1, h2, h3 { font-family: 'Alegreya Sans', Arial, sans-serif; color: var(--siw-1); line-height: 1.1; margin: 0 0 .5em; }
h1, h2 { text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 6vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.breed { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.smal { max-width: 760px; }

/* Kopbalk: donker, logo in een wit pilletje (zoals de site) */
.kopbalk { background: var(--siw-1); }
.kopbalk .breed { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.logo { display: inline-block; background: #fff; border-radius: 40px; padding: 8px 16px; line-height: 0; }
.logo img { display: block; height: 26px; width: auto; }
.kop-actie { color: #fff; font: 700 .95rem 'Alegreya Sans', sans-serif; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.kop-actie:hover { color: var(--siw-4); }

/* Held: blauw vlak met witte tekst */
.held { background: var(--blauw-vlak); color: #fff; padding: 36px 0 48px; }
.held h1 { color: #fff; }
.held b { color: #fff; }
.held-raster { display: grid; gap: 28px; }
.bovenregel { display: inline-block; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: .85rem; border-radius: var(--rand); padding: 4px 12px; margin-bottom: 14px; }
.intro { font-size: 1.12rem; color: #E6F0F6; }
.vinkjes { list-style: none; padding: 0; margin: 0 0 1.2em; }
.vinkjes li { position: relative; padding-left: 30px; margin-bottom: 8px; }
/* "Wat je krijgt" (SEO-152g, Elmar: rustiger, 1 kolom): één wit vlak met een lijst, per punt vette titel + één korte regel,
   alleen dunne lijnen ertussen. Eén onderdeel (siw_rapport_inhoud_kaarten in gegevens/functies.php) voor /seo/ en de bestelpagina.
   .krijg-strook = Voor wie / Levertijd als één antraciet strook (2 kolommen vanaf 640px). Geen iconen, geen losse kaartjes. */
.krijg-lijst { list-style: none; margin: 4px 0 14px; padding: 4px 22px; background: #fff; border-radius: var(--rand); }
.kaart-wit .krijg-lijst { padding: 0; background: transparent; }
.krijg-lijst li { padding: 12px 0; border-top: 1px solid #E6E8EA; }
.krijg-lijst li:first-child { border-top: 0; }
.krijg-lijst b, .krijg-strook b { display: block; font: 800 1.02rem/1.3 'Alegreya Sans', sans-serif; color: var(--siw-1); }
.krijg-lijst span, .krijg-strook span { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.45; color: #4a5560; }
.krijg-strook { display: grid; gap: 14px 28px; margin: 0 0 14px; padding: 18px 22px; border-radius: var(--rand); background: var(--donker); }
@media (min-width: 640px) { .krijg-strook { grid-template-columns: 1fr 1fr; } }
.krijg-strook b { color: #fff; }
.krijg-strook span { color: #E6F0F6; }
.vinkjes li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--vink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.held .vinkjes li { color: #fff; }

/* Teller "websites al gescand" (echte aantallen) */
.teller { display: inline-flex; align-items: baseline; gap: 8px; margin: 4px 0 0; color: #E6F0F6; font-weight: 700; }
.teller-getal { font: 800 2.2rem/1 'Alegreya Sans', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }

/* Formulier: witte kaart */
.formulier-kaart { background: #fff; color: var(--tekst); border-radius: var(--rand); padding: 24px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); scroll-margin-top: 16px; }
.formulier-kaart b { color: var(--donker); }
.form-titel { font-size: 1.5rem; text-transform: none; letter-spacing: 0; }
.stap-label { font-size: .8rem; font-weight: 700; color: var(--siw-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
label { display: block; font-weight: 700; color: var(--donker); font-size: .95rem; margin: 12px 0 4px; }
input[type=text], input[type=email] { width: 100%; font: inherit; font-size: 1.05rem; padding: 13px 14px; border: 2px solid var(--lijn); border-radius: 12px; background: #fff; color: var(--donker); }
textarea { display: block; width: 100%; font: inherit; font-size: 1rem; line-height: 1.4; padding: 11px 14px; border: 2px solid var(--lijn); border-radius: 12px; background: #fff; color: var(--donker); resize: vertical; }
textarea:focus { outline: none; border-color: var(--siw-4); box-shadow: 0 0 0 3px rgba(69, 165, 221, .25); }
/* SEO-04e: optioneel blok "Vertel kort over je bedrijf" in stap 2, dicht = één regel */
.over-bedrijf { margin-top: 14px; }
.over-bedrijf summary { cursor: pointer; list-style: none; font-weight: 700; font-size: .95rem; color: var(--siw-3); }
.over-bedrijf summary::-webkit-details-marker { display: none; }
.over-bedrijf summary::before { content: '+'; display: inline-block; width: 1em; font-weight: 800; }
.over-bedrijf[open] summary::before { content: '–'; }
.over-bedrijf summary:focus-visible { outline: 3px solid var(--siw-4); outline-offset: 3px; border-radius: 4px; }
.over-bedrijf summary .klein-grijs { font-weight: 400; font-size: .85rem; color: #6b7280; }
input:focus { outline: none; border-color: var(--siw-4); box-shadow: 0 0 0 3px rgba(69, 165, 221, .25); }
input[aria-invalid=true] { border-color: var(--fout); }
.vinkje-veld { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .9rem; margin-top: 14px; }
.vinkje-veld input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

/* Zwarte pill-knop zoals op sterkinweb.nl */
.knop { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 40px; background: var(--knop); color: #fff; font: 800 1.1rem/1.2 'Alegreya Sans', Arial, sans-serif; letter-spacing: .05em; padding: 16px 24px; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.knop:hover { background: var(--knop-hover); }
.knop:active { transform: scale(.98); }
.knop:focus-visible { outline: 3px solid var(--siw-4); outline-offset: 3px; }
.knop::after { content: ' →'; }
.knop-licht { display: inline-block; width: auto; }
/* Uitlegvak (harde regel Elmar 27-10, SEO-155m/SEO-155o): uitleg, leeswijzer en toelichting staan nooit als losse tekstregel,
   altijd in dit vak. Eén onderdeel voor de hele site, het scanportaal en het beheer (die laden allemaal dit bestand); zelfde vak
   als .uitleg in de scan-pdf's (SEO MANAGER/huisstijl/rapport.css) en het lichtblauwe paneel in de mails.
   Gebruik: <p class="uitleg">…</p> of <div class="uitleg"><p>…</p><p>…</p></div>. Geen eigen variant maken. */
.uitleg { position: relative; margin: 12px 0 0; padding: 10px 14px 10px 42px; border-radius: 14px; background: #EAF4FB; color: var(--donker); font-size: .9rem; line-height: 1.5; text-align: left; }
.uitleg::before { content: "i"; position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--siw-3); color: #fff; font: italic 700 13px/20px Georgia, serif; text-align: center; }
.uitleg > p { margin: 0; } .uitleg > p + p { margin-top: 6px; }
.melding { background: #FDECEC; color: var(--fout); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: .95rem; }
.veld-fout { color: var(--fout); font-size: .88rem; font-weight: 700; margin: 4px 0 0; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Met JavaScript: twee stappen. Zonder JavaScript staat alles onder elkaar. */
.js .stap-2 { display: none; }
.js .scan-form.op-stap-2 .stap-1 { display: none; }
.js .scan-form.op-stap-2 .stap-2 { display: block; animation: in .25s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gekozen-site { font-size: .9rem; background: #EAF4FB; border-radius: 12px; padding: 8px 12px; margin-bottom: 4px; }
.gekozen-site button { background: none; border: 0; color: var(--siw-3); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; margin-left: 6px; }

/* Blokken: licht en blauw om en om, zoals de site */
.blok { padding: 60px 0; }
.blok-wit { background: #fff; }
.blok-blauw { background: var(--blauw-vlak); color: #E6F0F6; }
.blok-blauw h2, .blok-blauw b { color: #fff; }
.blok-intro { max-width: 720px; font-size: 1.08rem; }
.twee-kolom { display: grid; gap: 32px; align-items: center; }

/* Rapportvoorbeeld */
.rapport-voorbeeld { margin: 0; background: #fff; border-radius: var(--rand); padding: 22px; box-shadow: 0 12px 40px rgba(27, 73, 97, .16); transform: rotate(-1.5deg); max-width: 420px; justify-self: center; width: 100%; }
.vb-kop { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: #6b7280; margin-bottom: 12px; }
.vb-titel { font-family: 'Alegreya Sans', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--siw-1); margin-bottom: 10px; }
.vb-regel { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #ECEEF0; font-size: .95rem; }
.vb-regel b { color: #fff; border-radius: 20px; width: 34px; text-align: center; font-family: 'Alegreya Sans', sans-serif; }
.c-groen { background: var(--groen); } .c-oranje { background: #DD6B20; } .c-rood { background: var(--fout); }
.vb-vervaagd { display: grid; gap: 8px; margin-top: 12px; filter: blur(2px); }
.vb-vervaagd span { height: 10px; background: #E3E7EB; border-radius: 6px; }
.vb-vervaagd span:nth-child(2) { width: 80%; } .vb-vervaagd span:nth-child(3) { width: 60%; }
.rapport-voorbeeld figcaption { font-size: .8rem; color: #6b7280; margin-top: 12px; }

/* Onderdelen: witte kaarten op blauw */
.onderdelen { list-style: none; counter-reset: o; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.onderdelen li { counter-increment: o; background: #fff; color: var(--tekst); border-radius: var(--rand); padding: 18px 18px 16px 60px; position: relative; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.onderdelen li::before { content: counter(o); position: absolute; left: 16px; top: 17px; width: 30px; height: 30px; border-radius: 50%; background: var(--siw-4); color: #fff; font: 800 .95rem/30px 'Alegreya Sans', sans-serif; text-align: center; }
.onderdelen h3 { margin-bottom: 2px; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; }
.onderdelen p { margin: 0; font-size: .95rem; }

/* Stappen */
.stappen { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.stappen li { background: #fff; color: var(--tekst); border-radius: var(--rand); padding: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.stap-nr { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--siw-4); color: #fff; font: 800 1.2rem/40px 'Alegreya Sans', sans-serif; text-align: center; margin-bottom: 10px; }
.stappen h3 { text-transform: uppercase; letter-spacing: .02em; }
.stappen p { margin: 0; }

/* Veelgestelde vragen */
.vragen details { background: #fff; border-radius: var(--rand); margin-bottom: 10px; box-shadow: 0 4px 14px rgba(27, 73, 97, .07); }
.vragen summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; position: relative; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 800 1.6rem/1 'Alegreya Sans', sans-serif; color: var(--siw-3); }
.vragen details[open] summary::after { content: '–'; }
.vragen summary h3 { margin: 0; font-size: 1.08rem; }
.vragen details p { padding: 0 20px 18px; margin: 0; font-size: .95rem; line-height: 1.6; } /* antwoord kleiner dan de vraag (1.08rem) */

/* Slot en voet */
.slot { background: var(--blauw-vlak); color: #E6F0F6; text-align: center; padding: 60px 0 68px; }
.slot h2 { color: #fff; }
.slot .knop { display: inline-block; width: auto; }
.voetbalk { background: var(--donker); color: #c9cdd2; font-size: .9rem; padding: 24px 0 90px; }
.voetbalk p { margin: 4px 0; }
.voetbalk a, .voetbalk b { color: #fff; }

/* Vaste knop onderin: verschijnt zodra het eerste blok (met formulier) uit beeld is, op elk scherm */
.zwevende-knop { position: fixed; left: 16px; right: 16px; bottom: 14px; max-width: 440px; margin: 0 auto; z-index: 10; background: var(--knop); color: #fff; text-align: center; font: 800 1.05rem/1 'Alegreya Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 16px; border-radius: 40px; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: opacity .2s, transform .2s; }
.zwevende-knop.weg { opacity: 0; transform: translateY(20px); pointer-events: none; }

@media (min-width: 860px) {
	.held { padding: 64px 0 80px; }
	.held-raster { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
	.formulier-kaart { padding: 32px 30px; }
	.twee-kolom { grid-template-columns: 1fr 1fr; gap: 56px; }
	.onderdelen { grid-template-columns: repeat(3, 1fr); }
	.stappen { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.rapport-voorbeeld { transform: none; }
}

/* Privacybeleid als popup: wit vlak, alleen tekst */

/* Extra aanbod tijdens het invullen (vakje staat standaard uit) */
.extra-aanbod { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; padding: 14px; border: 2px dashed var(--siw-4); border-radius: 14px; background: #F4FAFE; font-weight: 400; cursor: pointer; }
.extra-aanbod:has(input:checked) { border-style: solid; background: #EAF4FB; }
.extra-aanbod input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--siw-1); }
.extra-aanbod > span { display: block; }
.extra-titel { display: block; color: var(--donker); font-weight: 700; }
.extra-tekst { display: block; font-size: .85rem; color: #6b7280; margin: 2px 0 4px; }
.extra-prijs { display: block; font-size: .9rem; color: var(--donker); }
.extra-prijs s { color: #8a9099; }
.extra-prijs b { color: var(--siw-1); font-size: 1.05rem; }

/* Medewerker die naar het formulier wijst (alleen brede schermen; op mobiel staat het formulier eronder).
   Twee kolommen blijven zoals ze waren; zij staat los op de onderrand van de band, net links van het formulier,
   en overlapt met haar hand de linkeronderhoek van de formulierkaart. */
.held-wijzer { display: none; }
@media (min-width: 1100px) {
	.held-raster.met-wijzer { position: relative; align-items: end; }
	.held-raster.met-wijzer .formulier-kaart { position: relative; z-index: 1; }
	/* begin formulierkolom = 16px rand + tekstkolom (1.15 van 2.15 deel) + 56px tussenruimte; zij steekt er 40px in */
	.held-wijzer { display: block; position: absolute; z-index: 2; bottom: -80px; left: calc(16px + (100% - 32px - 56px) * 0.5349 + 56px - 150px); width: 190px; pointer-events: none; }
	.held-wijzer img { display: block; width: 190px; height: auto; }
}

/* Scan dicht (schakelaar in het beheer): pagina wazig, wachtlijst-kaart in het midden */
.scan-wazig { filter: blur(8px); pointer-events: none; user-select: none; }
.scan-dicht { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(27, 73, 97, .35); overflow-y: auto; }
.scan-dicht-kaart { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: var(--tekst); border-radius: var(--rand); padding: 28px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.scan-dicht-kaart .logo { display: inline-block; background: #fff; border-radius: 40px; line-height: 0; margin-bottom: 14px; }
.scan-dicht-kaart .logo img { height: 28px; width: auto; }
.scan-dicht-kaart h2 { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 10px; }
.scan-dicht-kaart label { display: block; font-weight: 700; margin: 12px 0 6px; }
.scan-dicht-kaart input[type=text], .scan-dicht-kaart input[type=email] { width: 100%; font: inherit; padding: 13px 14px; border: 2px solid var(--lijn); border-radius: 12px; }
.scan-dicht-kaart .knop { width: 100%; margin-top: 18px; }
.vinkje-veld .klein-grijs { font-size: .85rem; color: #6b7280; font-weight: 400; } /* SEO-152o: (afmelden kan altijd) achter het tipsvinkje */
.scan-dicht-kaart .klein-grijs { font-size: .85rem; color: #6b7280; font-weight: 400; }
.scan-dicht-kaart .melding { border-radius: 12px; padding: 12px 14px; }

/* Spinnenweb in de kop (website én gratis SEO-scan; verhuisd uit assets/site.css): spint zich bij het laden, spinnetje deint aan een draad */
/* Spinnenweb in de kop van de homepage (Sterk in WEB): spint zich bij het laden, spinnetje deint aan een draad */
.held-web { position: relative; overflow: hidden; }
.held-web > .breed { position: relative; z-index: 1; }
.web { position: absolute; top: 0; right: 0; width: min(760px, 95vw); height: auto; color: #fff; pointer-events: none; }
.web .spaak, .web .ring { stroke-opacity: .16; stroke-width: 1.3; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: web-spinnen 2.2s ease-out forwards; }
.web .ring { stroke-width: 1.1; animation-duration: 1.6s; animation-delay: calc(.35s + var(--i) * .12s); }
.web .draad { stroke: #fff; stroke-opacity: .35; stroke-width: 1; }
.web .spin { color: #fff; opacity: 0; animation: spin-zakken 1.6s 1.8s ease-out forwards, spin-deinen 4.5s 3.4s ease-in-out infinite alternate; }
.web .spin-lijf { opacity: .6; }
@keyframes web-spinnen { to { stroke-dashoffset: 0; } }
@keyframes spin-zakken { from { opacity: 0; transform: translateY(calc(var(--spin-y, 0px) - 260px)); } to { opacity: 1; transform: translateY(var(--spin-y, 0px)); } }
@keyframes spin-deinen { from { transform: translateY(var(--spin-y, 0px)); } to { transform: translateY(calc(var(--spin-y, 0px) - 34px)); } }
@media (max-width: 700px) { .web { width: 135vw; right: -30vw; opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
	.web .spaak, .web .ring { stroke-dashoffset: 0; animation: none; }
	.web .spin { opacity: 1; animation: none; }
}
.held-web:has(.met-wijzer) .web .spin { display: none; } /* scanpagina: spinnetje zou achter het formulier hangen */

/* ---------- Eerste scherm op telefoon (2026-10-02): meer in beeld, het doel (knop of formulier) altijd zichtbaar ---------- */
@media (max-width: 600px) {
	body { font-size: 16px; line-height: 1.55; }
	h1 { font-size: clamp(1.65rem, 7.4vw, 2.2rem); }
	h2 { font-size: clamp(1.35rem, 5.6vw, 1.8rem); }
	.held { padding: 22px 0 30px; }
	.bovenregel { font-size: .78rem; margin-bottom: 10px; padding: 3px 10px; }
	.intro { font-size: 1rem; }
	.held .vinkjes li { font-size: .95rem; }
	.web .spin { display: none; } /* spinnetje valt op een smal scherm over de tekst */
}
/* Scanpagina op telefoon en tablet (één kolom): formulier direct onder titel en intro, vinkjes en teller eronder */
@media (max-width: 859px) {
	.held-raster.met-wijzer { display: flex; flex-direction: column; gap: 0; }
	.held-raster.met-wijzer .held-tekst { display: contents; }
	.held-raster.met-wijzer .bovenregel { align-self: flex-start; }
	.held-raster.met-wijzer .formulier-kaart { order: 1; margin: 6px 0 22px; }
	.held-raster.met-wijzer .vinkjes, .held-raster.met-wijzer .teller { order: 2; }
}

/* ---------- Kopbalk en blauwe kop als één vlak (geen naad) ----------
   Begint de pagina met een blauwe kop (.held), dan is de kopbalk doorzichtig en schuift de kop eronder door;
   het spinnenweb begint zo helemaal bovenin. Op de website wordt de vaste kopbalk na scrollen weer effen (site.css, class .vast).
   Pagina's zonder blauwe kop bovenaan (bedankt, opdracht) houden een effen kopbalk. */
body:has(> main > .held:first-child) > .kopbalk { background: transparent; position: relative; z-index: 15; }
body > .kopbalk ~ main > .held:first-child { margin-top: -68px; padding-top: 104px; }
body > .kopbalk ~ main > .held-klein:first-child { padding-top: 108px; }
@media (min-width: 860px) {
	body > .kopbalk ~ main > .held:first-child { padding-top: 132px; }
	body > .kopbalk ~ main > .held-klein:first-child { padding-top: 108px; }
}
@media (max-width: 600px) {
	body > .kopbalk ~ main > .held:first-child { padding-top: 90px; }
	body > .kopbalk ~ main > .held-klein:first-child { padding-top: 92px; }
}

/* Witruimte tussen blokken op telefoon en tablet iets kleiner (overal gelijk) */
@media (max-width: 859px) { .blok { padding: 40px 0; } }

/* ---------- Voet (website én trechter): merk, kolommen + onderbalk met juridische links (verhuisd uit assets/site.css) ---------- */
.site-voet { padding: 48px 0 0; font-size: .95rem; color: #c9cdd2; }
.site-voet p { margin: 0; }
.site-voet a { color: #fff; text-decoration: none; }
.site-voet a:hover, .site-voet a:focus-visible { color: var(--siw-4); text-decoration: underline; }
.voet-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.voet-merk { grid-column: 1 / -1; }
.voet-merk .logo { display: inline-block; background: #fff; border-radius: 40px; padding: 8px 16px; line-height: 0; margin-bottom: 16px; }
.voet-merk .logo img { height: 26px; width: auto; }
.voet-tagline { color: #fff; max-width: 340px; margin-bottom: 8px !important; }
.voet-partner { color: #9aa1a9; font-size: .85rem; max-width: 340px; }
.voet-social { display: flex; gap: 10px; margin-top: 16px !important; }
.voet-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; color: #fff; }
.voet-social a:hover { background: var(--siw-3); color: #fff; }
.voet-social svg { width: 18px; height: 18px; fill: currentColor; }
.voet-kop { font: 800 .8rem 'Alegreya Sans', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9ED3F2; margin-bottom: 12px !important; }
.voet-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet-contact { grid-column: 1 / -1; }
.voet-contact li { line-height: 1.5; }
.voet-onder { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; color: #9aa1a9; }
.voet-onder .breed { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 22px; }
.voet-juridisch { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.voet-onder a { color: #c9cdd2; }
@media (min-width: 860px) {
	.voet-raster { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
	.voet-merk, .voet-contact { grid-column: auto; }
}
@media (min-width: 600px) and (max-width: 859px) { .voet-raster { grid-template-columns: repeat(3, 1fr); } .voet-contact { grid-column: auto; } } /* tablet: Diensten, Sterk in Web en Contact naast elkaar */
.trechter-voet { padding-bottom: 0; }
.trechter-voet .voet-raster { grid-template-columns: 1fr; }
@media (min-width: 700px) { .trechter-voet .voet-raster { grid-template-columns: 1.6fr 1fr; } .trechter-voet .voet-merk, .trechter-voet .voet-contact { grid-column: auto; } }
.trechter-voet .voet-merk .logo { pointer-events: none; }
body:has(.zwevende-knop) .trechter-voet .voet-onder .breed { padding-bottom: 96px; } /* ruimte voor de vaste knop op mobiel */
@media (max-width: 600px) { .kop-actie { display: none; } } /* telefoon: formulier staat al in beeld en de vaste knop onderin neemt het over */
.bovenregel { background: var(--groen); color: #fff; } /* groen label boven de titel; --groen i.p.v. --vink voor contrast >= 4,5:1 met witte tekst (SEO-158) */