/* Paddock Studio, thema Livery (concept C). Eén stylesheet voor de hele site.
   Bron van het ontwerp: Site-concepten/bouw_concepten.py, BASIS_CSS en CSS["C"], vertaald naar Gutenberg-blokmarkup. */

@font-face{font-family:"Archivo";src:url(fonts/archivo-var-latin.woff2) format("woff2");font-weight:500 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(fonts/figtree-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--baan:999px;--bg:#f6f6f3;--ink:#0b0b0c;--zacht:#55565a;--lijn:#d9d9d4;--oranje:#ff4f1a;--kobalt:#1d36e0;--veld:#fff;--vlak:#ebebe6;
  --kop:"Archivo","Arial Narrow",sans-serif;--tekst:"Figtree",system-ui,sans-serif;--gutter:max(20px,4.5vw)}

/* basis */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--tekst);font-size:17px;line-height:1.6;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);margin:0;line-height:1;font-stretch:70%;text-wrap:balance}
p{margin:0 0 14px}
figure{margin:0}
:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px}
.cta :focus-visible,.hero :focus-visible{outline-color:var(--ink)}
.wp-site-blocks > *,.entry-content > *{margin-top:0;margin-bottom:0}
.g{padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:10px;top:10px}
.zacht{color:var(--zacht)}
/* Een placeholder moet opvallen voor ons, maar niet als markeerstift voor een bezoeker: de site staat live. */
mark.placeholder{background:transparent;color:inherit;opacity:.72;font-style:italic;padding:0}
[id]{scroll-margin-top:90px}

/* knoppen */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.wp-block-button{margin:0}
.wp-block-button__link,.knop,.knop-kop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;font-weight:600;padding:12px 22px;font-size:16px;line-height:1.3;border:0;border-radius:var(--baan);cursor:pointer;font-family:var(--tekst);background:var(--ink);color:#fff;transition:background-color .15s,color .15s}
.wp-block-button__link:hover,.knop:hover{background:#2a2a2d}
.wp-block-button.oranje > .wp-block-button__link,.knop-kop{background:var(--oranje);color:var(--ink)}
.wp-block-button.oranje > .wp-block-button__link:hover,.knop-kop:hover{background:#ff6a3d}
.wp-block-button.licht > .wp-block-button__link{background:#fff;color:var(--ink)}
.wp-block-button.licht > .wp-block-button__link:hover{background:var(--vlak)}

/* koppen */
h2,.entry-content h2{font-size:clamp(46px,5.8vw,92px);font-weight:900;text-transform:uppercase;line-height:.9;margin-bottom:24px}
h3{font-size:30px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
section.wp-block-group{padding-top:96px;padding-bottom:96px}

/* header */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:20;background:var(--bg)}
.admin-bar .wp-site-blocks > header.wp-block-template-part{top:32px}
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;position:relative}
.logo{display:block;text-decoration:none;line-height:0}
.logo img{display:block;height:34px;width:auto;max-width:100%}
.logo .logo-smal{display:none}
.logo a{text-decoration:none;color:inherit}
.hoofd ul,.menu-mob ul{list-style:none;margin:0;padding:0}
.hoofd ul{display:flex;gap:clamp(13px,1.6vw,26px);font-size:clamp(14px,1.05vw,15px);font-weight:500}
.hoofd li{white-space:nowrap}
.hoofd a,.menu-mob nav a{text-decoration:none}
.hoofd a:hover,.hoofd .current-menu-item > a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menu-mob{display:none}
.menu-mob summary{list-style:none;cursor:pointer;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.menu-mob summary::-webkit-details-marker{display:none}
.menu-mob[open] summary{background:var(--oranje);color:var(--ink)}
/* het uitklapicoon: drie streepjes die bij openen een kruis worden */
.menu-mob .ham{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:background-color .15s}
.menu-mob .ham::before,.menu-mob .ham::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.menu-mob .ham::before{top:-6px}.menu-mob .ham::after{top:6px}
.menu-mob[open] .ham{background:transparent}
.menu-mob[open] .ham::before{transform:translateY(6px) rotate(45deg)}
.menu-mob[open] .ham::after{transform:translateY(-6px) rotate(-45deg)}
.menu-mob nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:8px var(--gutter) 20px}
.menu-mob nav li a{display:block;padding:12px 0;font-size:20px;font-weight:600;border-bottom:1px solid var(--lijn)}
.menu-mob nav .knop-kop{margin-top:16px}

/* hero: home volgt concept 2 (beeld met sluier, geen racelijn), de landingspagina's
   volgen concept 3 (beeldband met kobalt snede en een inktbord eroverheen). Keuze Mitch 24-09-2026. */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.hero h1{font-weight:900;text-transform:uppercase;line-height:.88;margin:0}
.hero .sub{font-size:clamp(17px,1.4vw,21px);color:#e6e6e3;margin:18px 0 0;max-width:52ch}

/* ---- home */
.hero.home{height:clamp(600px,86svh,860px);display:grid;align-items:stretch;overflow:hidden}
.hero.home > .wp-block-image{grid-area:1/1;margin:0;position:relative;min-height:0}
.hero.home > .wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero.home .sluier{grid-area:1/1;z-index:1;
  background:linear-gradient(0deg,rgba(11,11,12,.93) 0%,rgba(11,11,12,.6) 24%,rgba(11,11,12,0) 50%),
             linear-gradient(96deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.86) 30%,rgba(11,11,12,.36) 64%,rgba(11,11,12,.6) 100%)}
.hero.home .hero-in{grid-area:1/1;z-index:2;align-self:end;container-type:inline-size;
  padding-top:64px;padding-bottom:0;max-width:min(1100px,74%)}
.hero.home h1{font-size:clamp(34px,8.2cqw,84px)}

/* ---- landingspagina's */
.hero.lp{display:block}
.hero.lp .hero-foto{position:relative;height:clamp(300px,40svh,440px);overflow:hidden}
.hero.lp .hero-foto .wp-block-image,.hero.lp .hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero.lp .snede{position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:2;background:var(--kobalt);
  clip-path:polygon(0 62%,100% 4%,100% 100%,0 100%)}
.hero.lp .bord{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:48px;align-items:start;background:var(--ink);margin:-84px var(--gutter) 0;padding:44px 48px 46px;
  border-radius:var(--baan) 10px var(--baan) 10px}
.hero.lp .bord-kop{container-type:inline-size;min-width:0}
.hero.lp .bord-zij{min-width:0;padding-top:6px;display:flex;flex-direction:column;gap:20px}
.hero.lp .bord .wp-block-buttons{margin-top:26px}
.hero.lp h1{font-size:clamp(30px,9.4cqw,72px)}
.hero.lp .sub{margin-top:0}

/* ---- de USP-strook uit concept 1: gelijke kolommen, haarlijnen, alles op een lijn */
.diensten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;
  border-top:1px solid rgba(255,255,255,.24)}
.diensten .d{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:16px 16px 18px 0;
  color:inherit;text-decoration:none;transition:background-color .18s}
.diensten .d + .d{border-left:1px solid rgba(255,255,255,.24);padding-left:16px}
.diensten .d:hover{background:rgba(255,255,255,.06)}
.diensten svg{flex:0 0 23px;width:23px;height:23px;margin-top:2px}
.diensten .d-in{min-width:0}
.diensten b{display:block;font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:15px;
  text-transform:uppercase;line-height:1.05}
.diensten span span,.diensten .d-in > span{display:block;font-size:13.5px;color:#b9b9b6;line-height:1.35}
.diensten .d.rustig b{color:#8d8d8a}
.diensten .d.rustig .d-in > span{color:#7f7f7c}
.diensten .d.rustig svg{opacity:.55}

/* ---- sectorbalk, het kleureffect uit concept 3 */

/* sponsorvlakken op de auto */
.auto{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--ink);color:#fff}
.auto .beeld{position:relative;aspect-ratio:3/2;min-height:320px;background:var(--ink)}
.auto .beeld > .wp-block-image{position:absolute;inset:0}
.auto .beeld > .wp-block-image img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.auto .plek{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin:0;line-height:1.2;z-index:2}
.auto .plek::before{content:"";flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--oranje);box-shadow:0 0 0 5px rgba(255,79,26,.35)}
.auto .plek span{background:var(--ink);color:#fff;padding:4px 9px}
.auto .plek-1{left:49%;top:26%}.auto .plek-2{left:53%;top:39%}.auto .plek-3{left:70%;top:35%}.auto .plek-4{left:56%;top:53%}.auto .plek-5{left:29%;top:50%}
.auto .in{padding:64px var(--gutter) 64px 56px;display:flex;flex-direction:column;justify-content:center}
.auto .in h2{color:#fff;font-size:clamp(38px,3.8vw,62px)}
.auto .prijzen{list-style:none;margin:10px 0 0;padding:0;font-size:15.5px;color:#d0d0d0}
.auto .prijzen li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:18px;margin-bottom:10px}
.auto .prijzen strong{color:var(--oranje)}

/* aanbod */
.podium{margin-top:36px}
.podium .mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.podium .mods > div{position:relative;padding:24px 0;border-top:2px solid var(--ink)}
.podium .mods h3 a{text-decoration:none}
.podium .mods h3 a::after{content:"";position:absolute;inset:0}
.podium .mods > div:hover h3{color:var(--kobalt)}
.podium .basis{margin-top:28px;background:var(--ink);color:#fff;padding:32px max(20px,2.5vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:32px;align-items:center}
.podium .basis h3{font-size:44px;color:var(--oranje);margin:0}
.podium .basis p{margin:0}

/* voor wie */
.doel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.doel .wp-block-image img,.split .wp-block-image img{width:100%;aspect-ratio:4/5;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
.doel-lijst > div{padding:22px 0;border-top:2px solid var(--ink)}
.doel-lijst > div:last-child{border-bottom:2px solid var(--ink)}
.doel-lijst p{margin:0}

/* jaar */
.tijd{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;margin-top:40px;padding-top:34px}
.tijd::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:var(--ink)}
/* finishvlag aan het eind van de lijn (Mitch, 24-09-2026: "missen ellen nog een finish vlag") */
.tijd::after{content:"";position:absolute;right:0;top:0;width:28px;height:20px;z-index:2;
  background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/7px 7px;
  box-shadow:inset 0 0 0 2px var(--ink)}
.tijd > div{position:relative}
.tijd > div::before{content:"";position:absolute;top:-34px;left:0;width:19px;height:19px;border-radius:50%;background:var(--oranje);border:3px solid var(--ink)}
.tijd p{color:var(--zacht)}

/* schuine fotoband */
.schuin{position:relative;height:540px;overflow:hidden}
.schuin > .wp-block-image,.schuin > .wp-block-image img{width:100%;height:100%;object-fit:cover}
.schuin::before{content:"";position:absolute;left:0;right:0;top:-1px;height:90px;background:var(--bg);clip-path:polygon(0 0,100% 0,100% 20%,0 100%);z-index:2}
.schuin > p,.schuin > .schuin-tekst{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;z-index:2;background:var(--kobalt);color:#fff;padding:16px 22px;margin:0;max-width:560px;font-weight:500}
.schuin-tekst h2{color:#fff;font-size:clamp(22px,2.2vw,32px);margin:0 0 8px}
.schuin-tekst p{margin:0}

/* rapport */
.rapport-sectie{background:var(--kobalt);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.rapport{background:#fff;color:var(--ink);padding:22px;border:2px solid var(--ink)}
.rapport .kop{font-family:var(--kop);font-stretch:70%;font-size:28px;font-weight:900;text-transform:uppercase;margin-bottom:6px;line-height:1.1}
.rapport .rijen{list-style:none;margin:0 0 8px;padding:0}
.rapport .rijen li{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--lijn);padding:9px 0}
.rapport .rijen em{font-style:normal;white-space:nowrap}
.rapport .klein{display:block;color:var(--zacht);font-size:14px;margin:0}

/* kennisbank */
.kennis2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px}
.kennis2 > div{position:relative;padding:20px 0;border-top:2px solid var(--ink)}
.kennis2 h3 a{text-decoration:none}
.kennis2 h3 a::after{content:"";position:absolute;inset:0}
.kennis2 > div:hover h3 a{color:var(--kobalt)}

/* over */
.over{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.over .wp-block-image img{width:100%;aspect-ratio:5/4;object-fit:cover}

/* onderdelen, split, fasen */
.onderdelen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;margin-top:36px}
.onderdelen > div{padding:22px 0;border-top:2px solid var(--ink)}
.onderdelen p{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.intro{max-width:56ch}
.fasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px;margin-top:36px;grid-template-rows:auto auto auto}
.fasen > div{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0;align-content:start}
.fasen > div{padding-top:0}
.fasen h3{font-size:48px}
.lijst{margin:0;padding-left:1.1em}
.lijst li{margin-bottom:10px}

/* vragen */
.vragen{max-width:900px}
.wp-block-details{border-bottom:1px solid var(--lijn);padding:16px 0}
.wp-block-details summary{cursor:pointer;font-weight:600;font-size:18px;min-height:32px}
.wp-block-details p{margin:10px 0 0}

/* contact en formulier */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;background:var(--oranje)}
.formulier-plek{border:2px dashed var(--ink);padding:28px;margin:0;font-weight:600;align-self:start}

/* losse pagina's, tekstpagina's en 404 */
.enkel{padding-top:96px;padding-bottom:96px}
.enkel h1{font-size:clamp(46px,6vw,100px);font-weight:900;text-transform:uppercase;line-height:.9;margin:0 0 24px}
.tekst{max-width:72ch}
.tekst h2{font-size:clamp(28px,3vw,40px);margin:36px 0 12px}
.tekst ul{padding-left:1.1em}

/* footer */
.voet{background:var(--ink);color:#c9c9c9}





.voet strong{color:#fff}

/* ---- ontwerpvormen voor de landingspagina's (24-09-2026)
   Toegevoegd nadat de markdown-converter alle secties plat sloeg en elke pagina dezelfde kale
   kolom tekst werd. Elke vorm hieronder hoort bij een behandeling in md_blokken.py.
   Kleurregel uit de merkgids: oranje tekst mag op inkt (6,0:1), niet op de lichte achtergrond. */

.inleiding{padding-top:56px;padding-bottom:0}
.inleiding p{max-width:68ch;font-size:clamp(18px,1.6vw,21px)}
.bron{color:var(--zacht);font-size:14px}
/* .zacht en .bron zijn grijs op de lichte achtergrond; in een donkere of gekleurde sectie
   halen ze de contrastnorm niet. Daar erven ze de sectiekleur, iets gedempt. */
.raster .bron,.cijfers .bron,.statement .bron,.rapport-sectie .bron,
.raster .zacht,.cijfers .zacht,.statement .zacht,.rapport-sectie .zacht{color:rgba(255,255,255,.78)}
.cta .zacht,.cta .bron{color:var(--ink)}

/* beeld naast tekst, om en om */
.split.om > .wp-block-image{order:2}
.split .wp-block-buttons{margin-top:22px}
.split h2{font-size:clamp(36px,4.2vw,68px)}

/* opsomming op inkt, met regels in plaats van kaarten */
.raster{background:var(--ink);color:#fff}
.raster h2,.raster h3{color:#fff}
.raster p{color:#d4d4d2}
.raster h2{font-size:clamp(36px,4.2vw,68px)}
.raster-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 44px;margin-top:30px}
.raster-in > div{padding:22px 0;border-top:2px solid #45464a}
.raster-in h3{font-size:23px;margin:0 0 6px}
.raster-in p{margin:0}
.raster .wp-block-buttons{margin-top:32px}

/* genummerde stappen onder elkaar, nummer in een oranje vlak (inkt op oranje = 6,0:1) */
.stappen{margin-top:32px;border-top:2px solid var(--ink)}
.stap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;padding:24px 0;border-bottom:2px solid var(--ink)}
.stap .nr{background:var(--oranje);color:var(--ink);font-family:var(--kop);font-stretch:70%;font-weight:900;
  font-size:32px;line-height:1;margin:0;width:62px;height:62px;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.stap-in h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 6px}
.stap-in p{margin:0;max-width:70ch}

/* genummerde fasen naast elkaar */
.fasen > div{padding-top:0}
.fasen h3{font-size:44px;font-variant-numeric:tabular-nums;margin:0 0 4px;color:var(--oranje);line-height:.9;align-self:start}
.fasen h4{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:21px;line-height:1.1;margin:0 0 10px;text-transform:uppercase;align-self:start}
.fasen p{margin:0;color:var(--zacht)}

/* cijfers en tabellen op inkt */
.cijfers{background:var(--ink);color:#fff}
.cijfers h2{color:#fff;font-size:clamp(36px,4.2vw,68px)}
.cijfers p{color:#d4d4d2;max-width:70ch}
.cijfers a{color:#fff}
.cijfertabel{margin-top:28px}
.cijfertabel table{width:100%;border-collapse:collapse}
.cijfertabel th{text-align:left;font-family:var(--kop);font-stretch:70%;font-weight:800;text-transform:uppercase;
  font-size:15px;padding:0 16px 10px 0;border-bottom:2px solid var(--oranje);color:#fff}
.cijfertabel td{padding:12px 16px 12px 0;border-bottom:1px solid #35363a;color:#e8e8e6;font-variant-numeric:tabular-nums;vertical-align:top}
.cijfertabel tr td:last-child{color:var(--oranje);font-weight:700}
.cijfers .wp-block-buttons{margin-top:30px}

/* uitspraak op kobalt, de tweede merkkleur */
.statement{background:var(--kobalt);color:#fff}
.statement{position:relative;overflow:hidden}
.statement::after{content:"";position:absolute;right:-40px;bottom:-30px;width:min(380px,42%);height:280px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23ffffff' stroke-width='14' stroke-linecap='round' stroke-linejoin='round' opacity='0.14'><path d='M95 250c-45 0-70-26-70-60s28-52 66-52h58c34 0 52-16 52-40S183 58 149 58H92'/><path d='M196 250h118c46 0 72-28 72-62s-26-60-72-60h-40'/></svg>") right bottom/contain no-repeat;pointer-events:none}
.statement-in{position:relative;z-index:1}
@media (max-width:760px){.statement::after{width:70%;height:180px;right:-30px;bottom:-20px;opacity:.7}}

.statement h2{color:#fff;font-size:clamp(34px,4vw,64px)}
.statement a{color:#fff}
.statement-in{max-width:74ch}
.statement-in p{font-size:clamp(17px,1.5vw,20px)}
.statement .wp-block-buttons{margin-top:24px}

/* kopregels binnen de bestaande vormen die nu ook uit markdown komen */
.doel-lijst h3,.onderdelen h3,.kennis2 h3{font-size:23px;margin:0 0 6px}
.onderdelen{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.doel h2,.over h2,.rapport-sectie h2{font-size:clamp(34px,4vw,64px)}
.doel .wp-block-buttons,.over .wp-block-buttons,.rapport-sectie .wp-block-buttons,.onderdelen + .wp-block-buttons{margin-top:24px}
.rapport-sectie a{color:#fff}

/* tekst die onder een raster hoort, niet in de laatste kolom */
.raster-in + p,.onderdelen + p,.fasen + p,.stappen + p,.tijd + p,.doel-lijst + p,.cijfertabel + p{margin-top:26px;max-width:70ch}
.raster a{color:#fff}

/* formuliersectie en het Formidable-formulier in de huisstijl */
.formulier-sectie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start;background:var(--vlak)}
.formulier-sectie h2{font-size:clamp(34px,4vw,64px)}
.formulier-kaart{background:var(--veld);border:2px solid var(--ink);padding:26px}
.frm_forms .frm_form_field{margin-bottom:16px}
.frm_forms .frm_primary_label{font-weight:600;font-size:15px;margin-bottom:6px;display:block}
.frm_forms .frm_description{color:var(--zacht);font-size:14px;margin-top:4px}
.frm_forms input[type=text],.frm_forms input[type=email],.frm_forms input[type=tel],
.frm_forms input[type=url],.frm_forms input[type=number],.frm_forms textarea,.frm_forms select{
  width:100%!important;border:2px solid var(--ink)!important;border-radius:0!important;
  padding:11px 12px!important;font-family:var(--tekst)!important;font-size:16px!important;
  background:var(--veld)!important;color:var(--ink)!important;box-shadow:none!important}
.frm_forms textarea{min-height:130px}
.frm_forms .frm_radio label,.frm_forms .frm_checkbox label{font-weight:400}
/* Formidable zet labels op #1d2939; op oranje haalt dat 4,47:1 en dus net niet de norm. */
.frm_forms label,.frm_forms .frm_primary_label,.frm_forms .frm_radio label,
.frm_forms .frm_checkbox label{color:inherit!important}
.frm_forms .frm_button_submit,.frm_forms input[type=submit]{
  background:var(--oranje)!important;color:var(--ink)!important;border:0!important;border-radius:var(--baan)!important;
  min-height:48px;padding:12px 26px!important;font-family:var(--tekst)!important;font-weight:700!important;
  font-size:16px!important;cursor:pointer}
.frm_forms .frm_button_submit:hover,.frm_forms input[type=submit]:hover{background:#ff6a3d!important}

/* de inleidende alinea als standfirst, niet als losse regel tekst over de volle breedte */
.inleiding{padding-top:64px;padding-bottom:16px}
.inleiding p{font-size:clamp(20px,1.9vw,26px);line-height:1.38;max-width:34ch;margin:0}
.inleiding > p:first-child{max-width:58ch}
.kennis2.een{grid-template-columns:minmax(0,1fr)}
.kennis2.een > div{max-width:640px}
.vragen-2{columns:2;column-gap:52px}
.vragen-2 .wp-block-details{break-inside:avoid}

/* Formidable binnen de perken houden. Een fieldset heeft van zichzelf min-width:min-content en
   krimpt dus niet mee in een grid; dat duwde de homepage op 390px 134 px te breed
   (zie [[grid-fr-overflow-door-min-width-auto]]). */
.frm_forms,.frm_forms form,.frm_form_fields,.frm_forms fieldset{min-width:0;max-width:100%}
.frm_forms fieldset{border:0;margin:0;padding:0}
.frm_forms .frm_form_field{min-width:0}
/* honeypot: Formidable verbergt het invoerveld wel, het label erboven niet */
.frm_forms div:has(> input.frm_verify),.frm_forms input.frm_verify{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
/* tekst op oranje is altijd inkt; het grijs van .zacht haalt daar 4,5:1 niet */
.cta .zacht,.cta .frm_description,.cta .frm_primary_label,.cta .bron,.cta mark.placeholder{color:var(--ink)}
.cta mark.placeholder{opacity:.85}
.cta .frm_description{color:#3a2015}

/* ---- voet: steviger, en zonder onderstreepte links (Mitch, 24-09-2026) */
.voet{padding-top:72px;padding-bottom:0;font-size:15px;color:#b7b7b4}
.voet a{color:#fff;text-decoration:none;transition:color .15s}
.voet a:hover{color:var(--oranje)}
.voet-rij{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px;align-items:start}
.voet-merk{max-width:36ch}
.voet-over{margin:0;line-height:1.6}
.voet .logo{display:inline-block;margin-bottom:16px}
.voet .logo img{height:34px}
.voet-kop{font-size:17px;font-weight:800;text-transform:uppercase;color:#fff;margin:0 0 12px}
.voet-rij p{margin:0;line-height:2}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 26px;
  margin-top:52px;padding:20px 0 26px;border-top:1px solid #2c2c2f;font-size:14px}
.voet-onder p{margin:0}

/* ---- subtiele hover, overal hetzelfde gedrag */
.onderdelen > div,.raster-in > div,.kennis2 > div,.stap{transition:border-color .18s}
/* De doellijst gebruikt geen streep meer maar een inspringing, zodat niet elke vorm op de site
   hetzelfde beeld geeft: streep, hoofdletterkop, zin. */
.doel-lijst > div{border-top:0!important;padding-left:20px;position:relative;transition:border-color .18s}
.doel-lijst > div::before{content:"";position:absolute;left:0;top:calc(1em - 1px);width:10px;height:2px;background:var(--ink)}
.doel-lijst > div:hover::before{background:var(--oranje);width:14px}
.onderdelen > div:hover,.kennis2 > div:hover{border-top-color:var(--kobalt)}
.raster-in > div:hover{border-top-color:var(--oranje)}
.wp-block-button__link{transition:background-color .15s,transform .18s cubic-bezier(.2,.7,.3,1)}
.wp-block-button__link:hover{transform:translateX(3px)}
.split .wp-block-image,.doel .wp-block-image,.over .wp-block-image{overflow:hidden}
.split .wp-block-image img,.doel .wp-block-image img,.over .wp-block-image img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.split:hover .wp-block-image img,.doel:hover .wp-block-image img,.over:hover .wp-block-image img{transform:scale(1.03)}
.entry-content a:not(.wp-block-button__link):not(.knop-kop){text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s}
.entry-content a:not(.wp-block-button__link):not(.knop-kop):hover{color:var(--kobalt)}
.raster a:hover,.cijfers a:hover,.statement a:hover,.rapport-sectie a:hover{color:var(--oranje)}

/* ---- vaste CTA-balk op een telefoon */
.sticky-cta{display:none}
@media (max-width:1150px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;
    transform:translateY(105%);transition:transform .22s cubic-bezier(.2,.7,.3,1);will-change:transform;
    justify-content:space-between;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--ink);border-top:2px solid var(--oranje)}
  .sticky-cta .sticky-tekst{color:#fff;font-weight:600;font-size:15px;line-height:1.2;
    min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical}
  .sticky-cta .knop-kop{flex:0 0 auto;min-height:44px;padding:10px 16px;font-size:15px;
    max-width:52%;white-space:nowrap}
  .voet{padding-bottom:84px}
  .voet-rij{grid-template-columns:minmax(0,1fr);gap:30px}
  .voet-onder{margin-top:34px}
}
@media (max-width:1100px) and (min-width:901px){.voet-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* symmetrie: elke sectiekop en elke lopende tekst begint op dezelfde lijn, ongeacht de vorm
   (Mitch, 24-09-2026: "symmetrie is wel echt belangrijk") */
section.wp-block-group > .wp-block-heading,section.wp-block-group > .wp-block-paragraph,
section.wp-block-group > .wp-block-buttons{margin-left:0;margin-right:0}
.statement-in,.raster-in,.onderdelen,.cijfertabel,.stappen,.fasen,.tijd,.vragen,.vragen-2{margin-left:0}

@media (max-width:900px){
  /* de overgang van beeld naar kop moet vloeiend zijn; de sluier loopt door tot vol inkt
     voordat de tekst begint, en de tekst schuift met een negatieve marge in die zone */
  .hero.home{height:auto;min-height:0;display:block;overflow:visible}
  .hero.home > .wp-block-image{position:relative;aspect-ratio:1/1;height:auto}
  .hero.home > .wp-block-image img{position:absolute;inset:0;height:100%}
  /* de sluier dekt de foto, niet de hele hero: anders liggen de verlooppunten op de verkeerde
     hoogte en begint de kop in een lichte zone (gemeten 24-09-2026) */
  .hero.home .sluier{position:absolute;left:0;right:0;top:0;height:calc(100vw + 44px);
    background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.1) 34%,rgba(11,11,12,.55) 62%,rgba(11,11,12,.92) 82%,var(--ink) 94%)}
  .hero.home .hero-in{position:relative;max-width:none;padding-top:0;padding-bottom:26px;margin-top:-26px}
  .hero.home h1{font-size:clamp(32px,11.4cqw,46px)}
  .hero.lp .bord{grid-template-columns:minmax(0,1fr);gap:24px;margin:-58px 14px 0;padding:26px 22px 30px;
    border-radius:36px 8px 36px 8px}
  .hero.lp .hero-foto{height:clamp(240px,46svh,360px)}
  .hero.lp .snede{height:80px}
  .diensten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diensten .d + .d{border-left:0;padding-left:0}
  .diensten .d:nth-child(2n){padding-left:16px;border-left:1px solid rgba(255,255,255,.24)}
  .diensten .d:nth-child(n+3){border-top:1px solid rgba(255,255,255,.24)}
}
@media (max-width:480px){
  .diensten{grid-template-columns:minmax(0,1fr)}
  .diensten .d{padding-left:0!important;border-left:0!important}
  .diensten .d + .d{border-top:1px solid rgba(255,255,255,.24)}
}

/* ---- USP's in het inktbord van een landingspagina. Eigen regels per pagina, geen balk.
   Vervangt de sectorbalk, die een verhouding toonde zonder een enkel cijfer erbij. */
.usp-lijst{list-style:none;margin:0;padding:0;display:grid;gap:0}
.usp-lijst li{padding:13px 0 0;border-top:1px solid rgba(255,255,255,.26);margin-top:13px}
.usp-lijst li:first-child{margin-top:0}
.usp-lijst b{display:block;font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:15.5px;
  text-transform:uppercase;letter-spacing:0;color:#fff;margin-bottom:3px}
.usp-lijst span{display:block;font-size:14px;line-height:1.45;color:#bfbfbc}

/* ==== zoekwoordenonderzoek in beeld =========================================
   Opbouw: het seizoen (twaalf maanden) op inkt, daaronder het startgrid als tabel, en daarnaast
   het blok over AI-zichtbaarheid. De volgorde komt van Mitch, 24-09-2026: "ik ben het eens met 2
   en dan 1 eronder". Het nummer in het startgrid heeft bewust geen kopje "Positie": dat woord
   betekent in SEO iets anders. */
.zoekvraag{margin-top:26px;display:grid;gap:0}
.zoekvraag > *{min-width:0}
.zv-kop,.zv-svg,.zv-legenda{background:var(--ink);color:#fff}
.zv-kop{padding:26px 26px 4px}
.zv-kop h3{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:clamp(20px,2.2vw,28px);
  text-transform:uppercase;color:#fff;margin:0 0 6px}
.zv-kop p{margin:0;color:#b9b9b6;font-size:15px}
.zv-svg{display:block;width:100%;height:auto;padding:14px 18px 0}
.zv-maand{font-family:var(--tekst);font-weight:600;font-size:12.5px;fill:#8d8d8a}
.zv-legenda{display:flex;flex-wrap:wrap;gap:9px 26px;padding:6px 26px 26px;font-size:14.5px;color:#cfcfcc}
.zv-legenda span{display:inline-flex;align-items:center;gap:9px}
.zv-legenda i{width:12px;height:12px;flex:0 0 12px;border-radius:3px}
.zv-legenda b{color:#fff;font-weight:600}

.zv-grid{padding:28px 0 0}
.zv-grid h3,.zv-ai h3{font-family:var(--kop);font-stretch:70%;font-weight:800;
  font-size:clamp(20px,2.2vw,28px);text-transform:uppercase;margin:0 0 14px}
.grid-tabel{width:100%;border-collapse:collapse;font-size:15px}
.grid-tabel th{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:11.5px;
  text-transform:uppercase;color:var(--zacht);text-align:left;padding:0 14px 8px 0;
  border-bottom:2px solid var(--ink);white-space:nowrap}
.grid-tabel td{padding:14px 14px 14px 0;border-bottom:1px solid var(--lijn);vertical-align:middle}
.grid-tabel tr:last-child td{border-bottom:2px solid var(--ink)}
.g-nr{font-family:var(--kop);font-stretch:70%;font-weight:900;font-size:24px;
  font-variant-numeric:tabular-nums;width:1%;white-space:nowrap;padding-right:18px!important}
.g-term{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:17px;text-transform:uppercase}
.g-kd{display:inline-block;border-radius:var(--baan);padding:4px 12px;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.g-vol{width:40%;min-width:150px}
.g-spoor{display:block;height:13px;border-radius:var(--baan);background:var(--vlak);overflow:hidden}
.g-spoor i{display:block;height:100%;background:var(--oranje);border-radius:var(--baan)}
.g-vol b{display:block;margin-top:5px;font-family:var(--kop);font-stretch:70%;font-weight:900;
  font-size:16px;font-variant-numeric:tabular-nums}
.g-rechts{text-align:right;padding-right:0!important}
.g-cpc{font-variant-numeric:tabular-nums;color:var(--zacht);font-weight:600}
.vw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* AI-zichtbaarheid: geen cijfer, want we hebben het nog niet gemeten. Een vlak met de methode. */
.zv-ai{margin-top:30px;background:var(--vlak);padding:26px 26px 22px;
  border-top:6px solid var(--kobalt)}
.zv-ai p{margin:0 0 12px;max-width:72ch}
.zv-ai p:last-child{margin-bottom:0}
.zv-eerlijk{color:var(--zacht);font-size:15.5px;border-top:1px solid var(--lijn);padding-top:12px}
.zoekvraag-sectie .bron{margin-top:14px}

@media (min-width:1000px){
  .zv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .zoekvraag{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .zv-kop{padding:20px 18px 2px}
  .zv-legenda{padding:6px 18px 20px;gap:8px 18px;font-size:13.5px}
  .zv-ai{padding:20px 18px 18px}
  .grid-tabel thead{display:none}
  .grid-tabel,.grid-tabel tbody,.grid-tabel tr,.grid-tabel td{display:block;width:auto}
  .grid-tabel tr{border-bottom:1px solid var(--lijn);padding:14px 0;
    display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline}
  .grid-tabel tr:last-child{border-bottom:2px solid var(--ink)}
  .grid-tabel td{border:0;padding:0}
  .g-nr{grid-row:1/3;align-self:center;font-size:30px;padding-right:0!important}
  .g-vol{width:auto;min-width:0;grid-column:2}
  .g-rechts{grid-column:2;text-align:left}
  .g-cpc::before{content:"klikprijs "}
}

/* ==== voor en na ============================================================
   Twee schetsen van een pagina naast elkaar, geen screenshot: we hebben nog geen eigen voorbeeld
   en het scherm van een ander bedrijf mag hier niet staan. */
.voorna{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  align-items:start}
.vn-scherm{margin:0;min-width:0}
.vn-scherm figcaption{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:13px;
  text-transform:uppercase;color:var(--zacht);padding-bottom:9px;margin-bottom:12px;
  border-bottom:2px solid var(--lijn)}
.vn-na figcaption{color:var(--ink);border-bottom-color:var(--ink)}
.vn-venster{background:#fff;border:2px solid var(--lijn);padding:12px;display:grid;gap:9px}
.vn-na .vn-venster{border-color:var(--ink);box-shadow:10px 10px 0 var(--vlak)}
.vn-balk{display:flex;gap:7px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--lijn)}
.vn-balk i{display:block;height:7px;width:30px;background:var(--lijn);border-radius:var(--baan)}
.vn-balk.vn-aan i{background:var(--ink)}
.vn-balk.vn-aan i:first-child{background:var(--oranje);width:22px}
.vn-beeld{aspect-ratio:16/7;display:grid;place-items:center;position:relative;max-width:100%}
.vn-leeg{background:repeating-linear-gradient(135deg,var(--vlak) 0 9px,#f2f2ee 9px 18px)}
.vn-leeg span{font-size:12.5px;color:#9a9a97}
.vn-vol{background:var(--ink)}
.vn-vol span{font-size:12.5px;color:#fff;font-weight:600}
.vn-vol em{position:absolute;left:8px;top:6px;font-style:normal;font-size:10.5px;
  color:var(--oranje);font-weight:700;text-transform:uppercase}
.vn-regel{height:8px;background:var(--vlak);border-radius:var(--baan)}
.vn-na .vn-regel{background:#dededa}
.vn-regel.w90{width:90%}.vn-regel.w80{width:80%}.vn-regel.w75{width:75%}
.vn-regel.w70{width:70%}.vn-regel.w60{width:60%}
.vn-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.vn-kaarten span{background:var(--vlak);border-bottom:3px solid var(--oranje);padding:9px 7px;
  font-size:11.5px;font-weight:600;text-align:center;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.vn-voet{margin-top:3px;padding-top:9px;border-top:1px solid var(--lijn);font-size:12.5px;
  color:var(--zacht);line-height:1.35}
.vn-voet-aan{color:var(--ink);font-weight:600;border-top-color:var(--ink)}
.vn-punten{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 30px}
.vn-punten li{padding:13px 0;border-top:2px solid var(--ink)}
.vn-punten b{display:block;font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:16px;
  text-transform:uppercase;margin-bottom:3px}
.vn-punten span{display:block;color:var(--zacht);font-size:15px;line-height:1.45}
@media (max-width:700px){
  .voorna{grid-template-columns:minmax(0,1fr);gap:26px}
  .vn-na .vn-venster{box-shadow:6px 6px 0 var(--vlak)}
}

/* ==== doelgroepen met een eigen symbool =====================================
   Acht cellen, vier bij twee op desktop, zodat het raster opgaat. Mitch, 24-09-2026: "de
   onderdelen zijn nu 5 boven en 2 onder - dit is niet nice qua symmetrie". */
.doelgroepen{margin-top:30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.doelgroepen .dg{display:block;text-decoration:none;color:inherit;min-width:0;
  padding:20px 20px 22px 0;border-top:2px solid var(--ink);
  transition:border-top-color .18s,background-color .18s}
.doelgroepen .dg + .dg{border-left:1px solid var(--lijn);padding-left:20px}
.doelgroepen .dg:nth-child(4n+1){border-left:0;padding-left:0}
.doelgroepen .dg:hover{border-top-color:var(--oranje);background:var(--vlak)}
.doelgroepen svg{display:block;width:28px;height:28px;margin-bottom:12px;color:var(--ink)}
.doelgroepen .dg:hover svg{color:var(--oranje)}
.doelgroepen b{display:block;font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:17px;
  text-transform:uppercase;margin-bottom:5px}
.doelgroepen span{display:block;font-size:14.5px;line-height:1.45;color:var(--zacht)}
@media (max-width:900px){
  .doelgroepen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doelgroepen .dg:nth-child(4n+1){border-left:1px solid var(--lijn);padding-left:20px}
  .doelgroepen .dg:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .doelgroepen{grid-template-columns:minmax(0,1fr)}
  .doelgroepen .dg{border-left:0!important;padding-left:0!important;padding-right:0}
}

/* Een kennisbankitem zonder link is geen artikel en krijgt dus geen kaart die klikbaar lijkt. */
.kennis-noot{margin-top:26px;padding:16px 20px;background:var(--vlak);max-width:680px}
.kennis-noot h3{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:17px;
  text-transform:uppercase;margin:0 0 5px}
.kennis-noot p{margin:0;color:var(--zacht);font-size:15.5px}
.kennis-noot + .wp-block-buttons{margin-top:22px}

/* ---- kennisbank: elk artikel als een startvak met een vlagmarkering */
.kennis2 > div{position:relative;padding-top:26px}
.kennis2.een > div::before,.kennis2:not(.een) > div::before{content:"";position:absolute;top:10px;left:0;width:22px;height:15px;
  background:repeating-conic-gradient(var(--ink) 0 25%,var(--bg) 0 50%) 0 0/5px 5px;
  box-shadow:inset 0 0 0 2px var(--ink)}
.kennis2 > div:hover::before{background:repeating-conic-gradient(var(--oranje) 0 25%,var(--bg) 0 50%) 0 0/5px 5px}
.kennis2 h3{margin-top:4px}

/* ---- baan: een dunne circuitlijn langs de pagina met een auto die meeloopt met het scrollen */
.baan{position:fixed;right:max(10px,2vw);top:0;bottom:0;width:26px;z-index:15;pointer-events:none;
  opacity:0;transition:opacity .4s}
.baan.aan{opacity:1}
.baan .spoor{position:absolute;left:11px;top:12vh;bottom:6vh;width:4px;border-radius:var(--baan);
  background:var(--lijn)}
.baan .gereden{position:absolute;left:0;top:0;width:100%;height:0;border-radius:var(--baan);
  background:var(--oranje)}
.baan .auto{position:absolute;left:0;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center}
.baan .auto i{display:block;width:15px;height:23px;background:var(--ink);
  /* een auto van bovenaf: neus smal, achterkant breed, met een vleugel als streep */
  clip-path:polygon(34% 0,66% 0,74% 20%,100% 34%,100% 52%,80% 56%,82% 84%,100% 88%,100% 100%,0 100%,0 88%,18% 84%,20% 56%,0 52%,0 34%,26% 20%);
  filter:drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 4px var(--bg))}
.baan .auto::after{content:"";position:absolute;left:50%;top:3px;width:5px;height:7px;margin-left:-2.5px;
  background:var(--oranje);border-radius:2px}
.baan .vlag{position:absolute;left:3px;width:20px;height:15px;bottom:calc(6vh - 20px);
  background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/4px 4px;box-shadow:inset 0 0 0 2px var(--ink)}
@media (max-width:1100px){.baan{display:none}}
@media (prefers-reduced-motion:reduce){.baan{display:none}}

h1,h2,h3,h4{hyphens:auto;overflow-wrap:normal;word-break:normal}
@media (max-width:620px){h1,h2,h3,h4{overflow-wrap:break-word}}
.wp-block-table,.cijfertabel{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.wp-block-table table,.cijfertabel table{min-width:0}
/* Een lange samenstelling in een cel is de gewone oorzaak: laat die afbreken voordat de tabel
   breder wordt dan de pagina. */
.wp-block-table td,.wp-block-table th,.cijfertabel td,.cijfertabel th{overflow-wrap:anywhere}
@media (max-width:620px){
  .wp-block-table table,.cijfertabel table{font-size:14.5px}
  .cijfertabel th,.cijfertabel td{padding-right:12px}
}
@media (max-width:1150px){.top > .knop-kop{display:none}}
@media (max-width:900px){
  .hoofd{display:none}
  .menu-mob{display:block}
  .auto,.doel,.over,.cta,.split,.rapport-sectie,.kennis2{grid-template-columns:minmax(0,1fr)}
  .auto .in{padding:48px var(--gutter)}
  .auto .plek span{display:none}
  .podium .mods{grid-template-columns:1fr}
  .podium .basis{grid-template-columns:1fr;gap:12px}
  .tijd{grid-template-columns:1fr 1fr;row-gap:48px}
  .tijd::before{display:none}
  .fasen > div{margin-bottom:28px}
  .schuin{height:320px}
  section.wp-block-group,.enkel{padding-top:64px;padding-bottom:64px}
  .doel,.over,.split,.cta,.rapport-sectie{gap:40px}
}
@media (max-width:782px){.admin-bar .wp-site-blocks > header.wp-block-template-part{top:0}}
@media (max-width:500px){.logo .logo-breed{display:none}.logo .logo-smal{display:block}.top{gap:12px}}
@media (max-width:560px){.voet .logo img{height:28px}}
@media (max-width:560px){.tijd{grid-template-columns:1fr}.auto .prijzen li{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (max-width:900px){
  .split.om > .wp-block-image{order:0}
  .raster-in,.onderdelen{grid-template-columns:1fr;gap:0}
  .stap{grid-template-columns:minmax(0,1fr);gap:12px}
  .stap .nr{width:52px;height:52px;font-size:26px}
  .fasen{grid-template-columns:1fr;gap:0}
  .cijfertabel table{min-width:520px}
  .cijfers .wp-block-table{overflow-x:auto}
}
@media (max-width:560px){
  .inleiding{padding-top:40px}
  .fasen h3{font-size:36px}
}
@media (max-width:900px){.formulier-sectie{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Onder 430px past "MARKETINGBUREAU" niet meer op een regel van 350px bij 46px Archivo 900.
   De koppen krimpen daar dus, in plaats van midden in een woord af te breken (dat leverde
   eerder "MARKETINGBUREA/U" op) of buiten het scherm te lopen. Gemeten op 24-09-2026. */
@media (max-width:430px){
  .hero h1,.enkel h1{font-size:38px}
  h2,.entry-content h2,.auto .in h2,.split h2,.raster h2,.cijfers h2,.statement h2,
  .doel h2,.over h2,.rapport-sectie h2,.formulier-sectie h2{font-size:36px}
  .fasen h3{font-size:32px}
}
@media (max-width:360px){
  .hero h1,.enkel h1{font-size:34px}
  h2,.entry-content h2,.auto .in h2,.split h2,.raster h2,.cijfers h2,.statement h2,
  .doel h2,.over h2,.rapport-sectie h2,.formulier-sectie h2{font-size:32px}
}
@media (max-width:900px){
  .split.om > .wp-block-image{order:2}
  .vragen-2{columns:1}
  .inleiding p{max-width:none}
}
@media (max-width:620px){
  .raster-in,.onderdelen,.fasen{grid-template-columns:minmax(0,1fr);gap:0}
  .onderdelen > div,.raster-in > div{padding:20px 0}
}

/* De vaste balk komt pas in beeld zodra er gescrold wordt (Mitch, 24-09-2026: "Sticky CTA moet op
   mobiel pas inkomen als er over de pagina wordt gescrollt, niet bij het laden"). De klasse
   `gescrold` wordt door assets/baan.js op de body gezet. */
body.gescrold .sticky-cta{transform:none}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* Formidable rendert zijn velden in Arial zolang het thema dat niet overschrijft, en dat is een
   derde lettertype op de pagina. De merkgids staat er twee toe. */
.frm_forms,.frm_forms input,.frm_forms select,.frm_forms textarea,.frm_forms button,
.frm_forms label,.frm_forms .frm_description,.frm_forms .frm_error{font-family:var(--tekst)!important}

/* Een markering in de kopregel dat een dienst nog in opbouw is. Staat achter de kop, niet erboven:
   een hoofdletterlabel boven een kop is een sjabloon-tell en verboden in de merkgids. */
.opbouw{display:inline-block;vertical-align:middle;font-style:normal;font-family:var(--tekst);
  font-weight:600;font-size:max(13px,.26em);text-transform:none;letter-spacing:0;
  background:var(--oranje);color:var(--ink);padding:5px 13px;border-radius:var(--baan);
  margin-left:.34em;position:relative;top:-.12em;white-space:nowrap}
.auto .in h2 .opbouw{background:var(--oranje);color:var(--ink)}
@media (max-width:620px){.opbouw{display:block;margin:10px 0 0;width:max-content;font-size:13px}}

/* ==== formulier ============================================================
   Mitch, 24-09-2026: "niet echt een formulier gevoel door wegvallen in achtergrond - moet
   formulier echt worden - passend in de branding." Dus: een echte kaart met een rand in inkt,
   velden die niet breder zijn dan de inhoud vraagt, en een verzendknop die op elk vlak leesbaar is. */
.frm_forms{background:var(--veld);border:2px solid var(--ink);padding:26px 24px 24px;max-width:600px}
.formulier-kaart .frm_forms{max-width:none}
.frm_forms .frm_form_field{max-width:460px}
/* Korte velden hoeven geen halve pagina breed te zijn. */
.frm_forms .frm_form_field:has(input[type=tel]),
.frm_forms .frm_form_field:has(input[type=number]){max-width:260px}
.frm_forms .frm_form_field:has(input[type=email]){max-width:390px}
.frm_forms textarea{max-width:none}
.frm_forms .frm_form_field:has(textarea){max-width:none}
.frm_forms legend.frm_screen_reader{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* De stappenbalk die het thema zelf tekent. */
.stapbalk{margin:0 0 20px;max-width:600px}
.formulier-kaart .stapbalk{max-width:none}
.stapbalk-telling{font-family:var(--kop);font-stretch:70%;font-weight:800;font-size:12.5px;
  text-transform:uppercase;color:var(--zacht);margin:0 0 9px}
.stapbalk ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.stapbalk li{display:flex;align-items:center;gap:9px;min-width:0;padding:11px 12px 11px 0;
  border-top:3px solid var(--lijn);color:var(--zacht)}
.stapbalk li + li{padding-left:12px}
.stapbalk li b{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lijn);color:var(--ink);font-family:var(--kop);font-stretch:70%;font-weight:900;
  font-size:13px}
.stapbalk li span{font-size:13.5px;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis}
.stapbalk li.nu{border-top-color:var(--oranje);color:var(--ink);font-weight:600}
.stapbalk li.nu b{background:var(--oranje);color:var(--ink)}
.stapbalk li.af{border-top-color:var(--ink);color:var(--ink)}
.stapbalk li.af b{background:var(--ink);color:#fff}
@media (max-width:560px){
  .stapbalk ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stapbalk li span{display:none}
  .stapbalk li{justify-content:center;padding:11px 4px}
}

/* In de oranje CTA-sectie stond een oranje knop op een oranje vlak, en dat is precies waar de
   knop wegviel. Daar wordt hij inkt; de kaart blijft wit zodat het formulier een formulier blijft. */
.cta .frm_forms{background:var(--veld);border-color:var(--ink)}
.cta .frm_forms .frm_button_submit,.cta .frm_forms input[type=submit]{
  background:var(--ink)!important;color:#fff!important}
.cta .frm_forms .frm_button_submit:hover,.cta .frm_forms input[type=submit]:hover{
  background:#2a2a2d!important}
.cta .stapbalk-telling{color:#3a2015}
.cta .stapbalk li{color:#3a2015}
.cta .stapbalk li.nu,.cta .stapbalk li.af{color:var(--ink)}
.cta .stapbalk li.nu{border-top-color:var(--ink)}
.cta .stapbalk li.nu b{background:var(--ink);color:#fff}
.cta .stapbalk li b{background:rgba(11,11,12,.16)}

/* Compacte hero voor /contact/: een smalle beeldband, zodat het formulier en de gegevens meteen
   in beeld komen in plaats van na een scroll. */
.hero.lp.compact .hero-foto{height:clamp(150px,22svh,240px)}
.hero.lp.compact .snede{height:70px}
.hero.lp.compact .bord{grid-template-columns:minmax(0,1fr);margin-top:-48px;padding-bottom:30px}
.hero.lp.compact h1{font-size:clamp(30px,7cqw,58px)}
.hero.lp.compact .sub{max-width:62ch;margin-top:16px}
@media (max-width:900px){
  .hero.lp.compact .hero-foto{height:clamp(120px,18svh,180px)}
  .hero.lp.compact .snede{height:54px}
}