/* Gerichte verfijning voor zeer brede schermen; normale desktop en mobiel blijven gelijk. */
@media (min-width:1700px){
  /* Eén consistente paginabreedte voor de volledige website. */
  .container{width:calc(100% - 112px)!important;max-width:1480px!important;margin-left:auto!important;margin-right:auto!important}
  header .container.nav,header .nav{width:calc(100% - 112px)!important;max-width:1480px!important;grid-template-columns:220px minmax(0,1fr) 116px!important}
  header nav,header nav.has-contact-item{width:min(100%,920px)!important;gap:clamp(16px,1.15vw,24px)!important;font-size:15.5px!important}
  header nav a{font-size:15.5px!important}
  header .desktop-contact{width:116px!important;min-width:116px!important;max-width:116px!important;height:48px!important;min-height:48px!important;font-size:15px!important}

  .breadcrumbs>.container,footer .container.foot{width:calc(100% - 112px)!important;max-width:1480px!important}
  main>.hero:not(#home){padding-top:82px!important;padding-bottom:82px!important}
  main>.hero:not(#home)>.container.hero-grid{width:calc(100% - 112px)!important;max-width:1480px!important;grid-template-columns:minmax(0,780px) minmax(360px,540px)!important;gap:clamp(64px,5vw,96px)!important;justify-content:space-between!important}
  .vacancies-overview-page main>.hero>.container.hero-grid{grid-template-columns:minmax(0,740px) minmax(0,640px)!important;gap:100px!important}
  .vacancies-overview-page main>.hero .hero-card{width:100%!important;max-width:640px!important;justify-self:end!important}
  main>.hero:not(#home)>.container.hero-grid.visual-hero-grid{grid-template-columns:minmax(0,720px) minmax(540px,640px)!important;gap:clamp(64px,4.25vw,82px)!important;justify-content:space-between!important}
  .visual-hero-grid .ambassador-hero-visual,.visual-hero-grid .about-hero-visual{width:630px!important;max-width:630px!important;justify-self:end!important}
  main>.hero:not(#home) h1{font-size:60px!important;line-height:1.03!important;letter-spacing:-.055em!important}
  main>.hero:not(#home) .lead{max-width:760px!important;font-size:19px!important;line-height:1.68!important}
  main>.hero:not(#home) .hero-card{padding:36px!important;border-radius:34px!important}
  main>.hero:not(#home)~section>.container{width:calc(100% - 112px)!important;max-width:1480px!important}

  .hero#home{padding-top:88px!important;padding-bottom:84px!important}
  .hero#home .container.hero-grid{width:calc(100% - 112px)!important;max-width:1480px!important;grid-template-columns:minmax(0,700px) minmax(480px,620px)!important;gap:clamp(64px,6vw,110px)!important;justify-content:space-between!important}
  .hero#home .hero-title .main-title{font-size:56px!important;line-height:1.02!important}
  .hero#home .hero-title .sub-title{font-size:33px!important;margin-top:12px!important}
  .hero#home .lead{max-width:650px!important;font-size:18.5px!important;line-height:1.68!important}
  .hero#home .hero-actions{gap:14px!important}
  .hero#home .hero-actions .btn{min-height:52px!important;padding:15px 24px!important;font-size:15.5px!important}
  .hero#home .stats{gap:14px!important;margin-top:28px!important}
  .hero#home .stat{min-height:72px!important;padding:17px 18px!important;border-radius:18px!important}
  .hero#home .stat strong{font-size:17px!important}
  .hero#home .stat span{font-size:14px!important}
  .hero#home .home-route-card{width:620px!important;max-width:620px!important;justify-self:end!important;aspect-ratio:5/4!important}
  .hero#home~section>.container{width:calc(100% - 112px)!important;max-width:1480px!important}
  .hero#home~section .section-head h2{max-width:940px!important;font-size:clamp(40px,2.55vw,48px)!important}
  .hero#home~section .section-head p{font-size:18px!important;line-height:1.7!important}

  main .page-hero .container.page-hero-grid{width:calc(100% - 112px)!important;max-width:1480px!important;grid-template-columns:minmax(0,720px) minmax(540px,640px)!important;gap:clamp(64px,4.25vw,82px)!important;justify-content:space-between!important}
  main .page-hero{padding-top:82px!important;padding-bottom:82px!important}
  main .page-hero-copy{max-width:720px!important}
  main .page-hero-copy h1{font-size:62px!important;line-height:1.03!important;letter-spacing:-.055em!important}
  main .page-hero-copy .lead{max-width:680px!important;font-size:19px!important;line-height:1.68!important}
  main .page-hero-copy .hero-actions{gap:14px!important}
  main .page-hero-copy .btn{min-height:52px!important;padding:15px 24px!important;font-size:15.5px!important}
  main .page-hero-visual{width:630px!important;max-width:630px!important;justify-self:end!important}
  main .page-hero~section>.container{width:calc(100% - 112px)!important;max-width:1480px!important}
  main .page-hero~section .section-head h2{max-width:940px!important;font-size:clamp(40px,2.55vw,48px)!important}
  main .page-hero~section .section-head p{max-width:820px!important;font-size:18px!important;line-height:1.7!important}

  main>.page-hero>.container:not(.page-hero-grid){width:calc(100% - 112px)!important;max-width:1480px!important}
  main>.page-hero>.container:not(.page-hero-grid) h1{max-width:1080px!important;font-size:60px!important;line-height:1.04!important;letter-spacing:-.052em!important}
  main>.page-hero>.container:not(.page-hero-grid) .lead{max-width:880px!important;font-size:19px!important;line-height:1.68!important}

  .vacature-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}
  .vacature-detail{grid-template-columns:minmax(0,960px) 380px!important;justify-content:space-between!important;gap:52px!important}
  .vacature-detail .content-card{padding:48px!important}
  .vacature-detail .side-card,.vacature-detail .sidebar-card{width:380px!important;max-width:100%!important}
  .detail-grid{grid-template-columns:minmax(0,960px) 380px!important;justify-content:space-between!important;gap:52px!important}
  .detail-grid .content-card{padding:48px!important}
  .detail-grid .side-card,.detail-grid .sidebar-card{width:380px!important;max-width:100%!important}
  .article-grid{gap:24px!important}
  .cards,.route-cards,.team-grid,.partner-usps{gap:24px!important}
  .contact-layout{grid-template-columns:minmax(440px,500px) minmax(0,1fr)!important;gap:32px!important;align-items:start!important}
  .contact-card,.forms-card{padding:40px!important}

  /* Lange teksten blijven comfortabel leesbaar, ook op een zeer breed scherm. */
  html body main#inhoud>.blog-article-section>.container.article-layout{width:min(1102px,calc(100% - 112px))!important;max-width:1102px!important;grid-template-columns:minmax(0,820px) 250px!important;gap:32px!important}
  html body main>.legal-content>.container{width:calc(100% - 112px)!important;max-width:1100px!important}
  .blog-article-section .content-card,.legal-content .legal-card{padding:50px!important}

  main>.legal-hero>.container,main>.collaboration-section>.container,main>.partner-content>.container,main>.cta>.container{width:calc(100% - 112px)!important;max-width:1480px!important}
  main>.legal-hero>.container{padding-right:18%!important}
  .collaboration-section .collaboration-head{max-width:920px!important;margin-bottom:36px!important}
  .collaboration-section .collaboration-logos{gap:24px!important}
  .collaboration-section .collaboration-logo{min-height:176px!important;padding:34px 40px!important;border-radius:28px!important}
  .collaboration-section .collaboration-logo--zekerarbo img{max-width:270px!important}
  .collaboration-section .collaboration-logo--masters img{max-width:290px!important}
  .collaboration-section .collaboration-logo--phlox img{max-width:205px!important;height:92px!important}
  .collaboration-section .collaboration-logo--dna img{max-width:136px!important;height:100px!important}
}

@media (min-width:2200px){
  .container{width:calc(100% - 160px)!important;max-width:1600px!important}
  header .container.nav,header .nav{width:calc(100% - 160px)!important;max-width:1600px!important}
  .hero#home .container.hero-grid,main .page-hero .container.page-hero-grid{width:calc(100% - 160px)!important;max-width:1600px!important}
  .hero#home .container.hero-grid{grid-template-columns:minmax(0,720px) minmax(0,650px)!important;gap:96px!important}
  .hero#home .hero-title .main-title{font-size:60px!important}
  .hero#home .hero-title .sub-title{font-size:34px!important}
  .hero#home .home-route-card{width:640px!important;max-width:640px!important}
  main .page-hero .container.page-hero-grid{grid-template-columns:minmax(0,760px) minmax(0,680px)!important;gap:96px!important}
  main .page-hero-copy{max-width:760px!important}
  main .page-hero-copy h1{font-size:66px!important}
  main .page-hero-visual{width:670px!important;max-width:670px!important}
  .hero#home~section>.container,main .page-hero~section>.container,main>.legal-hero>.container,main>.collaboration-section>.container,main>.partner-content>.container,main>.cta>.container{width:calc(100% - 160px)!important;max-width:1600px!important}
  .breadcrumbs>.container,footer .container.foot,main>.hero:not(#home)>.container.hero-grid,main>.hero:not(#home)~section>.container,main>.page-hero>.container:not(.page-hero-grid){width:calc(100% - 160px)!important;max-width:1600px!important}
  main>.hero:not(#home)>.container.hero-grid{grid-template-columns:minmax(0,840px) minmax(0,580px)!important;gap:100px!important}
  .vacancies-overview-page main>.hero>.container.hero-grid{grid-template-columns:minmax(0,800px) minmax(0,700px)!important;gap:100px!important}
  .vacancies-overview-page main>.hero .hero-card{max-width:700px!important}
  main>.hero:not(#home)>.container.hero-grid.visual-hero-grid{grid-template-columns:minmax(0,760px) minmax(0,680px)!important;gap:96px!important}
  .visual-hero-grid .ambassador-hero-visual,.visual-hero-grid .about-hero-visual{width:670px!important;max-width:670px!important}
  main>.hero:not(#home) h1,main>.page-hero>.container:not(.page-hero-grid) h1{font-size:64px!important}
  .vacature-detail{grid-template-columns:minmax(0,1080px) 400px!important;gap:64px!important}
  .vacature-detail .side-card,.vacature-detail .sidebar-card{width:400px!important}
  .detail-grid{grid-template-columns:minmax(0,1080px) 400px!important;gap:64px!important}
  .detail-grid .side-card,.detail-grid .sidebar-card{width:400px!important}
  html body main#inhoud>.blog-article-section>.container.article-layout{width:min(1210px,calc(100% - 160px))!important;max-width:1210px!important;grid-template-columns:minmax(0,900px) 270px!important;gap:40px!important}
  html body main>.legal-content>.container{max-width:1160px!important}
  .collaboration-section .collaboration-logo{min-height:188px!important}
}

/* Houd de routevisual op normale desktop gelijk aan de andere paginatypen. */
@media (min-width:1200px) and (max-width:1599px){
  main .page-hero-visual{width:508px!important;max-width:508px!important;justify-self:end!important}
}

/* Op standaard brede desktop volgen ook artikelkaarten de 1120px-rail. */
@media (min-width:1400px) and (max-width:1699px){
  html body.blog-page main#inhoud>.blog-article-section>.container.article-layout{
    width:min(1120px,calc(100% - 48px))!important;
    max-width:1120px!important;
    grid-template-columns:minmax(0,1fr) 240px!important;
    gap:28px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Ruimere contentverdeling op ultrabrede schermen, zonder lange tekstregels te forceren. */
@media (min-width:1700px){
  .container,
  header .container.nav,header .nav,
  footer .container.foot,
  main>.hero:not(#home)>.container.hero-grid,
  main>.hero:not(#home)~section>.container,
  .hero#home~section>.container,
  main .page-hero .container.page-hero-grid,
  main .page-hero~section>.container,
  main>.page-hero>.container:not(.page-hero-grid),
  main>.legal-hero>.container,
  main>.collaboration-section>.container,
  main>.partner-content>.container,
  main>.cta>.container{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
  }

  html body main#inhoud>.blog-article-section>.container.article-layout{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:48px!important;
  }
  .blog-article-section .content-card{padding:54px!important}
  .blog-article-section .content-card>p,
  .blog-article-section .content-card>ul,
  .blog-article-section .content-card>ol,
  .blog-article-section .content-card>blockquote{max-width:880px}

  html body main>.legal-content>.container{
    width:calc(100% - 112px)!important;
    max-width:1280px!important;
  }

  /* Breadcrumbs en hero-titels delen dezelfde vaste linker uitlijning. */
  .breadcrumbs>.container{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  main>.independent-page-hero{
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
}

@media (min-width:2200px){
  .container,
  header .container.nav,header .nav,
  footer .container.foot,
  main>.hero:not(#home)>.container.hero-grid,
  main>.hero:not(#home)~section>.container,
  .hero#home .container.hero-grid,
  .hero#home~section>.container,
  main .page-hero .container.page-hero-grid,
  main .page-hero~section>.container,
  main>.page-hero>.container:not(.page-hero-grid),
  main>.legal-hero>.container,
  main>.collaboration-section>.container,
  main>.partner-content>.container,
  main>.cta>.container{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
  }

  html body main#inhoud>.blog-article-section>.container.article-layout{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
    grid-template-columns:minmax(0,1fr) 320px!important;
    gap:56px!important;
  }
  .blog-article-section .content-card{padding:58px!important}
  .blog-article-section .content-card>p,
  .blog-article-section .content-card>ul,
  .blog-article-section .content-card>ol,
  .blog-article-section .content-card>blockquote{max-width:940px}

  html body main>.legal-content>.container{max-width:1360px!important}

  .breadcrumbs>.container{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
  }
}

/*
 * Definitieve ultrawide-rail.
 * Alle zichtbare paginadelen volgen dezelfde buitenlijnen als de navigatie.
 * Leesregels worden binnen die rail afzonderlijk begrensd.
 */
@media (min-width:1600px) and (max-width:2199px){
  html body header .container.nav,
  html body > .breadcrumbs > .container,
  html body main > section > .container,
  html body footer .container{
    box-sizing:border-box!important;
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.blog-page main > .blog-article-section > .container.article-layout,
  html body main > .legal-content > .container{
    width:calc(100% - 112px)!important;
    max-width:1480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (min-width:2200px){
  html body header .container.nav,
  html body > .breadcrumbs > .container,
  html body main > section > .container,
  html body footer .container{
    box-sizing:border-box!important;
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.blog-page main > .blog-article-section > .container.article-layout,
  html body main > .legal-content > .container{
    width:calc(100% - 160px)!important;
    max-width:1600px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (min-width:1700px){
  /* Vacatures en zelfstandige opdrachten benutten de volledige rail. */
  html body main > .job-hero > .job-hero-grid{
    grid-template-columns:minmax(0,1fr) 420px!important;
    gap:72px!important;
    align-items:center!important;
  }
  html body main > .job-section > .job-layout{
    grid-template-columns:minmax(0,1fr) 390px!important;
    gap:64px!important;
    align-items:start!important;
  }
  html body main > .job-section > .job-layout > .content-card{
    padding:48px!important;
  }
  html body main > .job-section > .job-layout > .side-card{
    width:390px!important;
    max-width:100%!important;
  }

  /* De artikelkaart vult de rail; de lopende tekst blijft prettig leesbaar. */
  html body.blog-page main > .blog-article-section > .container.article-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:48px!important;
    justify-content:stretch!important;
  }
  html body.blog-page .blog-article-section .content-card > p,
  html body.blog-page .blog-article-section .content-card > ul,
  html body.blog-page .blog-article-section .content-card > ol,
  html body.blog-page .blog-article-section .content-card > blockquote{
    max-width:900px!important;
  }

  /* Het zelfstandigenhero volgt dezelfde verticale titelpositie. */
  html body main > .independent-page-hero{
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
}

@media (min-width:2200px){
  html body main > .job-hero > .job-hero-grid{
    grid-template-columns:minmax(0,1fr) 460px!important;
    gap:88px!important;
  }
  html body main > .job-section > .job-layout{
    grid-template-columns:minmax(0,1fr) 410px!important;
    gap:72px!important;
  }
  html body main > .job-section > .job-layout > .side-card{
    width:410px!important;
  }
  html body.blog-page main > .blog-article-section > .container.article-layout{
    grid-template-columns:minmax(0,1fr) 320px!important;
    gap:56px!important;
  }
  html body.blog-page .blog-article-section .content-card > p,
  html body.blog-page .blog-article-section .content-card > ul,
  html body.blog-page .blog-article-section .content-card > ol,
  html body.blog-page .blog-article-section .content-card > blockquote{
    max-width:980px!important;
  }
}