/* ==========================================================================
   VANDENBOORN AUTOMOTIVE - Homepage in Carlink-opzet
   Maten en typografie 1:1 overgenomen van carlink.nl (root 16px, Montserrat).
   Kleuren vertaald naar Vandenboorn: zwart #000, brons #8E612B, grond #F4F1EA,
   verzonken #EAE5DA. Belknop groen (#6B4720) zoals in de bron.
   ========================================================================== */

:root{
  --cl-black:#000;
  --cl-white:#fff;
  --cl-primary:#8E612B;          /* carlink: #6B4720 */
  --cl-primary-deep:#6B4720;
  --cl-secondary:#EAE5DA;        /* carlink: #EAE5DA */
  --cl-tertiary:#F4F1EA;         /* carlink: #F4F1EA */
  --cl-green:#6B4720;
  --cl-green-hover:#8E612B;
  --cl-gray:#6B6259;
  --cl-muted:#6B6259;
  --cl-font:'Montserrat',sans-serif;
  --cl-gutter:12px;              /* --bs-gutter-x / 2 */
  --cl-container:1320px;
}

/* ---------- Reset (carlink gebruikt een reset + Bootstrap 5) ---------- */
.cl-home,.cl-home *,.cl-home *::before,.cl-home *::after{box-sizing:border-box}
html{font-size:16px;width:100%;overflow-x:hidden;scroll-behavior:smooth}
body.cl-home{
  margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;
  max-width:100vw;overflow-x:hidden;
  background-color:var(--cl-black);color:var(--cl-black);
  font-family:var(--cl-font);font-size:.9rem;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
body.cl-home.cl-no-scroll{overflow:hidden}
.cl-home main{flex:1 0 auto;height:auto}
.cl-home img,.cl-home video{max-width:100%;height:auto;vertical-align:middle}
.cl-home a{text-decoration:none;color:inherit;transition:color .3s ease}
.cl-home ul{margin:0;padding:0;list-style:none}
.cl-home p{margin:0 0 1rem}
.cl-home hr{margin:1rem 0;border:0;border-top:1px solid;opacity:.25}
.cl-home strong{font-weight:700}
.cl-home button{font-family:inherit}

/* Typografie: h1 3rem | h2 2.5rem | h3 2rem | h4 1.5rem | h5 1rem | h6 .5rem */
.cl-home h1,.cl-home h2,.cl-home h3,.cl-home h4,.cl-home h5,.cl-home h6{
  font-family:var(--cl-font);font-weight:700;line-height:1.2;color:var(--cl-white);
  margin:0 0 1rem;-webkit-font-smoothing:antialiased;
}
.cl-home h1{font-size:3rem}
.cl-home h2{font-size:2.5rem}
.cl-home h3{font-size:2rem}
.cl-home h4{font-size:1.5rem}
.cl-home h5{font-size:1rem}
.cl-home h6{font-size:.5rem}
@media only screen and (max-width:1200px){
  .cl-home h1{font-size:2rem}
  .cl-home h2{font-size:1.5rem}
  .cl-home h3{font-size:1.5rem}
  .cl-home h4{font-size:1rem}
  .cl-home h5{font-size:1rem}
}
.cl-home h1,.cl-home h2,.cl-home h3,.cl-home h4,.cl-home h5,.cl-home h6,
.cl-home p,.cl-home a,.cl-home span{color:var(--cl-white)}

/* ---------- Mini-raster (Bootstrap 5 breakpoints) ---------- */
.cl-container,.cl-container-fluid{
  width:100%;margin-right:auto;margin-left:auto;
  padding-right:var(--cl-gutter);padding-left:var(--cl-gutter);
}
@media (min-width:576px){.cl-container{max-width:540px}}
@media (min-width:768px){.cl-container{max-width:720px}}
@media (min-width:992px){.cl-container{max-width:960px}}
@media (min-width:1200px){.cl-container{max-width:1140px}}
@media (min-width:1400px){.cl-container{max-width:1320px}}
.cl-row{display:flex;flex-wrap:wrap;margin-right:calc(-1 * var(--cl-gutter));margin-left:calc(-1 * var(--cl-gutter))}
.cl-row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:var(--cl-gutter);padding-left:var(--cl-gutter)}
.cl-col{flex:1 0 0%;width:auto}
.cl-col-8{flex:0 0 auto;width:66.6666%}
.cl-col-12{flex:0 0 auto;width:100%}
@media (min-width:768px){
  .cl-col-md-3{flex:0 0 auto;width:25%}
  .cl-col-md-4{flex:0 0 auto;width:33.3333%}
  .cl-col-md-5{flex:0 0 auto;width:41.6666%}
  .cl-col-md-6{flex:0 0 auto;width:50%}
  .cl-col-md-8{flex:0 0 auto;width:66.6666%}
  .cl-col-md-10{flex:0 0 auto;width:83.3333%}
  .cl-offset-md-1{margin-left:8.3333%}
}
@media (min-width:992px){.cl-col-lg-5{flex:0 0 auto;width:41.6666%}}
@media (min-width:1400px){
  .cl-col-xxl-3{flex:0 0 auto;width:25%}
  .cl-offset-xxl-2{margin-left:16.6666%}
}
.cl-justify-center{justify-content:center}
.cl-text-center{text-align:center}

/* ---------- Knoppen (button,.btn uit de bron) ---------- */
.cl-btn{
  display:inline-block;position:relative;cursor:pointer;outline:none;
  border-radius:10px;border:1px solid transparent;background:transparent;
  font-family:var(--cl-font);font-size:1.1rem;font-weight:600;line-height:1.2;
  padding:.7rem 1.5rem;text-align:center;text-transform:uppercase;white-space:nowrap;
  box-shadow:none;transition:all ease .3s;color:var(--cl-white);
}
.cl-btn-primary{background:var(--cl-primary);color:var(--cl-white);border-color:var(--cl-primary)}
.cl-home .cl-btn-primary:hover,.cl-home .cl-btn-primary:focus,.cl-home .cl-btn-primary:active{background:var(--cl-secondary);color:var(--cl-black);border-color:var(--cl-secondary)}
.cl-btn-outline-primary{background:transparent;color:var(--cl-white);border-color:var(--cl-primary)}
.cl-btn-outline-primary:hover,.cl-btn-outline-primary:focus{background:var(--cl-primary);color:var(--cl-white);border-color:var(--cl-primary)}
.cl-btn-black{background:var(--cl-black);color:var(--cl-white);border-color:var(--cl-black)}
.cl-btn-black:hover,.cl-btn-black:focus{background:var(--cl-primary);color:var(--cl-white);border-color:var(--cl-primary)}
.cl-btn-green{background:var(--cl-green);color:var(--cl-white);border-color:var(--cl-green)}
.cl-btn-green:hover,.cl-btn-green:focus{background:var(--cl-green-hover);color:var(--cl-white);border-color:var(--cl-green-hover)}
.cl-home .cl-btn-tertiary{background:var(--cl-tertiary);color:var(--cl-black);border-color:var(--cl-tertiary)}
.cl-home .cl-btn-tertiary:hover,.cl-home .cl-btn-tertiary:focus{background:var(--cl-primary);color:var(--cl-white);border-color:var(--cl-primary)}
.cl-btn-outline{background:transparent;color:var(--cl-white);border-color:var(--cl-white)}
.cl-home .cl-btn-outline:hover,.cl-home .cl-btn-outline:focus{background:var(--cl-white);color:var(--cl-black);border-color:var(--cl-white)}

/* ==========================================================================
   1. HEADER  (fixed, transparant; .cl-on-scroll -> zwart + blur + schaduw)
   ========================================================================== */
.cl-header{
  position:fixed;top:0;left:0;width:100%;z-index:1005;
  background:transparent;transition:all ease .3s;
}
.admin-bar .cl-header{top:32px}
@media (max-width:782px){.admin-bar .cl-header{top:46px}}
body.cl-on-scroll .cl-header{
  background-color:var(--cl-black);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 3px 3px 0 rgba(0,0,0,.16);
}
@media only screen and (max-width:992px){.cl-header{box-shadow:0 3px 3px 0 rgba(0,0,0,.04)}}

/* sub-header: padding 1rem 0 .5rem; .9rem/600 uppercase; verborgen < 768 */
.cl-sub-header{padding:1rem 0 .5rem 0;color:var(--cl-white);font-weight:600;display:none}
@media (min-width:768px){.cl-sub-header{display:block}}
.cl-sub-header .cl-row{align-items:center}
.cl-sub-header__tag{flex:1 0 0%;width:auto;text-transform:uppercase;font-size:.9rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-sub-header__actions{display:none;align-items:center;justify-content:flex-end;flex:1 0 0%;width:auto}
@media (min-width:992px){.cl-sub-header__actions{display:flex}}
.cl-sub-header__actions .cl-btn{font-size:.8rem;font-weight:600;padding:.7rem 1.5rem}
.cl-sub-header__actions .cl-btn + .cl-btn,
.cl-sub-header__actions nav + nav{margin-left:.5rem}
.cl-contact-wrap{position:relative}

/* Contact-dropdown (.mainWrap): absolute, 350px, zwart, 1px witte rand, radius 10 */
.cl-contact-panel{
  position:absolute;right:0;margin-top:1rem;width:350px;padding:1rem;
  background:var(--cl-black);border:1px solid var(--cl-white);border-radius:10px;
  z-index:9000;display:none;text-align:left;
}
.cl-contact-panel.is-open{display:block}
.cl-contact-panel h4{margin-bottom:.75rem;text-transform:uppercase}
.cl-form{display:flex;flex-direction:column;gap:.6rem}
.cl-form label{display:block}
.cl-home .cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-form input[type=text],.cl-form input[type=email],.cl-form textarea{
  width:100%;padding:.7rem .9rem;border:1px solid var(--cl-white);border-radius:10px;
  background:transparent;color:var(--cl-white);font-family:var(--cl-font);font-size:.9rem;line-height:1.4;
}
.cl-form input::placeholder,.cl-form textarea::placeholder{color:var(--cl-muted)}
.cl-form textarea{min-height:120px;resize:vertical}
.cl-form .cl-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.75rem;line-height:1.35;color:var(--cl-white);text-transform:none;font-weight:400}
.cl-form .cl-consent input{margin:.15rem 0 0;accent-color:var(--cl-primary)}
.cl-form .cl-consent a{text-decoration:underline}
.cl-form .cl-btn{align-self:flex-start;font-size:.9rem;padding:.6rem 1.4rem}
.cl-form-notice{font-size:.8rem;line-height:1.4;padding:.6rem .8rem;border-left:3px solid var(--cl-primary);background:#000000;margin-bottom:.5rem}
.cl-form-notice--error{border-left-color:#c0392b}
.cl-hp{position:absolute;left:-9999px}

/* main-header: padding 1rem 0; drie gelijke kolommen */
.cl-main-header{padding:1rem 0}
.cl-main-header .cl-container{position:relative}
.cl-main-header .cl-row{display:flex;flex-wrap:nowrap}
.cl-main-header .cl-col{display:flex;align-items:center}
.cl-main-header .cl-col--left{justify-content:flex-start}
.cl-main-header .cl-col--logo{justify-content:center}
.cl-main-header .cl-col--right{justify-content:flex-end}
@media (max-width:767.98px){.cl-main-header .cl-col--left .cl-btn{visibility:hidden;pointer-events:none}}
@media (max-width:575.98px){
  .cl-main-header .cl-col--left{display:none}
  .cl-main-header .cl-col--logo{justify-content:flex-start}
}
/* .btn-tertiary in de header: 1rem, padding .5rem 2rem */
.cl-main-header .cl-btn-tertiary{font-size:1rem;padding:.5rem 2rem}
/* logo: height 1.7rem */
.cl-logo a{display:block;line-height:0}
.cl-logo img{height:1.7rem;width:auto;max-width:none;display:block}
/* Login (.userGreet): 600, icoon 1.2rem met .5rem marge */
.cl-user{display:flex;align-items:center;color:var(--cl-white);font-weight:600;transition:all ease .3s;font-size:.9rem;line-height:1.5}
.cl-user:hover{color:var(--cl-green)}
.cl-user svg{width:1.2rem;height:1.2rem;margin-left:.5rem;fill:currentColor;display:block}
@media (max-width:575.98px){.cl-user span{display:none}.cl-user svg{margin-left:0}}
/* Hamburger: padding-left 1.5rem, box 1.75rem, balken 3px / radius 4px, +-8px */
.cl-hamburger{
  padding:0 0 0 1.5rem;margin:-4px 0 0 0;border:0;background:transparent;cursor:pointer;
  display:block;height:1.75rem;overflow:visible;transition:opacity .15s linear,filter .15s linear;
}
.cl-hamburger__box{height:inherit;width:1.75rem;position:relative;display:block}
.cl-hamburger__inner,.cl-hamburger__inner::before,.cl-hamburger__inner::after{
  display:block;background-color:var(--cl-white);width:100%;height:3px;border-radius:4px;
  transition-property:transform,top,opacity;transition-duration:.15s;transition-timing-function:ease;
}
.cl-hamburger__inner{position:relative;top:50%;margin-top:-1.5px}
.cl-hamburger__inner::before{content:"";position:absolute;top:-8px}
.cl-hamburger__inner::after{content:"";position:absolute;top:8px}
.cl-hamburger.is-active .cl-hamburger__inner{transform:rotate(45deg)}
.cl-hamburger.is-active .cl-hamburger__inner::before{top:0;opacity:0}
.cl-hamburger.is-active .cl-hamburger__inner::after{top:0;transform:rotate(-90deg)}
.cl-hamburger:focus-visible{outline:2px solid var(--cl-primary);outline-offset:6px}

/* Mobiele contactknop + paneel (< 992) */
.cl-contact-mobile{
  position:fixed;bottom:1rem;right:1rem;z-index:11111;font-size:.8rem;
  background-color:var(--cl-black);color:var(--cl-white);
}
@media only screen and (min-width:992px){.cl-contact-mobile{display:none}}
.cl-contact-panel--mobile{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:420px;margin:0;
  z-index:11112;
}
@media only screen and (min-width:992px){.cl-contact-panel--mobile{display:none!important}}

/* ==========================================================================
   2. SLIDE-IN MENU
   ========================================================================== */
.cl-menu{position:fixed;z-index:1000;width:100vw;height:100%;inset:0;pointer-events:none}
.cl-menu__backdrop{position:absolute;width:100vw;height:100vh;background-color:transparent;overflow:hidden;transition:all ease .75s;pointer-events:none;margin:0}
.cl-menu .cl-container{overflow-y:hidden;height:100vh;margin-top:10rem;color:var(--cl-primary);z-index:2;transition:all ease .75s;transform:translateY(-150%);position:relative}
.cl-menu.is-active{pointer-events:all}
.cl-menu.is-active .cl-menu__backdrop{pointer-events:all;z-index:1;background-color:var(--cl-black)}
.cl-menu.is-active .cl-container{transform:translateY(0);overflow-y:auto}
.cl-menu .cl-row{padding-top:3rem}
.cl-menu__nav li{position:relative}
.cl-menu__nav a{
  color:var(--cl-white);padding:1rem 0;margin-bottom:1rem;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;width:fit-content;
  font-size:2.6rem;text-transform:uppercase;position:relative;line-height:1.2;
}
.cl-menu__nav li:first-child a{padding-top:0}
.cl-menu__nav a:hover{color:var(--cl-primary)}
.cl-menu__nav li.is-current a{font-weight:700}
.cl-menu__nav li.is-current a::before{content:"";position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);width:100%;height:6px;background:var(--cl-primary)}
.cl-menu__info{text-align:end;margin-top:0}
.cl-menu__info .cl-row{flex-direction:column;padding-top:3rem}
.cl-menu__info .cl-col-md-6{align-self:flex-end;margin-bottom:3rem}
.cl-menu__info .cl-col-md-6:last-child{margin-bottom:0}
.cl-menu__info p,.cl-menu__info a,.cl-menu__info li{font-size:1rem;color:var(--cl-white)}
.cl-menu__info h4{color:var(--cl-white)}
.cl-menu__info a:hover{color:var(--cl-primary)}
.cl-menu__info .cl-social{display:flex;justify-content:flex-end}
.cl-menu__info .cl-social a{font-size:1.5rem}
.cl-social svg{width:1.5rem;height:1.5rem;fill:currentColor;display:block}
@media (max-width:768px){
  .cl-menu .cl-container{margin-top:2rem}
  .cl-menu .cl-row{padding-top:5rem}
  .cl-menu__nav a{font-size:1.4rem;margin-bottom:0}
  .cl-menu__info{text-align:start;margin-top:1.5rem}
  .cl-menu__info .cl-row{padding-top:0}
  .cl-menu__info .cl-col-md-6{align-self:flex-start;margin-bottom:.5rem}
  .cl-menu__info .cl-social{justify-content:flex-start}
}

/* ==========================================================================
   3. HERO (video/afbeelding, 100vh, overlay 50%)
   ========================================================================== */
.cl-hero{position:relative;min-height:100vh;overflow:hidden;display:flex}
.cl-hero video,.cl-hero__img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.cl-hero__img{background-size:cover;background-position:center}
.cl-hero .cl-container{position:static;min-height:100vh}
.cl-hero__overlay{position:absolute;inset:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);pointer-events:none}
.cl-home-search{
  width:100%;position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  display:flex;flex-flow:column;justify-content:center;align-items:center;z-index:4;padding:0 2rem;
}
.cl-home-search h1{width:700px;max-width:100%;margin:0 auto 35px;text-align:center;color:var(--cl-white);text-transform:uppercase}
.cl-home-search form{width:100%;max-width:700px}
.cl-home-search ul{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-left:0}
.cl-home-search li{width:100%;display:flex;justify-content:center}
.cl-home-search .cl-sf-input{
  width:100%;max-width:560px;border:0;border-bottom:2px solid var(--cl-white);border-radius:10px 10px 0 0;
  font-family:var(--cl-font);font-size:2rem;font-weight:600;background:transparent;color:var(--cl-white);
  text-align:center;padding:.5rem 1rem;outline:none;
}
.cl-home-search .cl-sf-input::placeholder{color:var(--cl-white)}
.cl-home-search .cl-sf-submit{
  transition:all ease .3s;cursor:pointer;outline:none;border-radius:10px;font-size:1.1rem;position:relative;
  padding:.7rem 1.5rem;box-shadow:none;border:1px solid var(--cl-primary);background:var(--cl-primary);
  font-weight:600;line-height:1.2;font-family:var(--cl-font);text-transform:uppercase;color:var(--cl-white);
}
.cl-home-search .cl-sf-submit:hover,.cl-home-search .cl-sf-submit:focus{background:var(--cl-secondary);color:var(--cl-black);border-color:var(--cl-secondary)}
@media (max-width:768px){.cl-home-search .cl-sf-input{font-size:1.4rem}}

/* ==========================================================================
   4. CARS (slider 60vw, dots, Toon alles)
   ========================================================================== */
.cl-cars{padding:8rem 0}
.cl-cars .cl-overflow-right{width:100vw}
.cl-cars-slider{
  display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;user-select:none;
}
.cl-cars-slider::-webkit-scrollbar{display:none}
.cl-cars-slider.is-dragging{cursor:grabbing;scroll-snap-type:none}
.cl-cars-slider__car{width:60vw;flex:0 0 60vw;scroll-snap-align:start;padding:0 var(--cl-gutter)}
.cl-cars-slider__image{border-radius:10px;overflow:hidden;position:relative;aspect-ratio:4/3;background:#141414}
.cl-cars-slider__image img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:all ease .5s;display:block}
.cl-cars-slider__image img:hover{transform:scale(1.05)}
.cl-cars-slider__car.is-selected .cl-cars-slider__image img{opacity:1}
.cl-cars-slider__sold{position:absolute;top:1rem;left:1rem;background:var(--cl-primary);color:var(--cl-white);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:6px;z-index:2}
.cl-cars-slider__info{height:100%;display:flex;flex-direction:column;margin-left:1rem}
.cl-cars-slider__info>a{display:flex;flex-direction:column;height:100%}
.cl-cars-slider__info h3,.cl-cars-slider__info h5{color:var(--cl-white);text-transform:uppercase;margin-bottom:.5rem}
.cl-cars-slider__info h3{margin-top:0}
.cl-cars-slider__info h5{font-size:1.1rem;font-weight:600;max-width:70%}
.cl-cars-slider__stats{margin-top:1rem;display:flex;flex-direction:row;flex-wrap:wrap}
.cl-cars-slider__stats p{color:var(--cl-white);display:flex;justify-content:flex-start;align-items:center;margin:0 1.5rem 1rem 0}
.cl-cars-slider__stats p:last-child{margin-right:0}
.cl-cars-slider__stats svg{font-size:26px;width:26px;height:26px;margin-right:.5rem;fill:var(--cl-white);flex:0 0 26px}
.cl-cars-slider__more{margin-top:auto}
.cl-cars-slider__more span{color:var(--cl-white);text-transform:uppercase;font-weight:600;font-size:1rem;transition:color .3s ease}
.cl-cars-slider__info>a:hover .cl-cars-slider__more span{color:var(--cl-primary)}
.cl-cars-dots{width:100%;padding-top:5rem;padding-bottom:5rem;display:flex;justify-content:center;align-items:center}
.cl-cars-dots button{
  width:15px;height:15px;border-radius:50%;border:0;padding:0;margin:0 1rem;cursor:pointer;
  background:var(--cl-white);opacity:.5;transition:all ease .3s;
}
.cl-cars-dots button:first-child{margin-left:0}
.cl-cars-dots button:last-child{margin-right:0}
.cl-cars-dots button.is-selected{opacity:1;width:20px;height:20px}
.cl-cars-button{display:flex;justify-content:center}
.cl-cars-button .cl-btn{text-transform:uppercase;padding:.9rem 2.5rem;font-weight:600}
@media (max-width:768px){
  .cl-cars{padding:4rem 0}
  .cl-cars .cl-overflow-right{width:auto}
  .cl-cars-slider__car{width:100%;flex:0 0 100%}
  .cl-cars-slider__info{margin-left:0}
  .cl-cars-slider__info h3{margin-top:1rem}
  .cl-cars-slider__stats{flex-direction:column;margin-bottom:1rem}
  .cl-cars-dots{padding-top:1rem;padding-bottom:3rem}
}
@media (min-width:769px){
  .cl-cars-slider__car .cl-row{flex-wrap:nowrap}
}

/* ==========================================================================
   5. QUOTE + BRONZEN BALK
   ========================================================================== */
.cl-quote{padding:25vh 0;position:relative;background-blend-mode:multiply;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:rgba(0,0,0,.45)}
.cl-quote h1{color:var(--cl-white);text-align:center;margin-bottom:0}
.cl-quote h1 strong{color:var(--cl-primary)}
.cl-bar{padding:0;background-color:var(--cl-primary);min-height:5vh;max-height:5vh}
@media (max-width:768px){.cl-quote{padding:10vh 0}}

/* ==========================================================================
   6. SMALL INFO (verzonken vlak, zwarte tekst)
   ========================================================================== */
.cl-small-info{background-color:var(--cl-secondary);padding-top:8rem;padding-bottom:8rem}
.cl-small-info__left h2{text-transform:uppercase;color:var(--cl-black)}
.cl-small-info__left .cl-btn{margin-top:2rem;text-transform:uppercase;font-weight:600;display:none}
.cl-small-info__right p{font-size:1.22rem;color:var(--cl-black)}
.cl-small-info__right .cl-btn{display:block;width:max-content;margin-top:1rem}
@media (min-width:768px){
  .cl-small-info__left .cl-btn{display:inline-block}
  .cl-small-info__right .cl-btn{display:none}
}
@media (max-width:768px){
  .cl-small-info{padding:4rem 0}
  .cl-small-info p{font-size:1.1rem}
}

/* ==========================================================================
   7. LARGE INFO (donker beeld, 87% zwart)
   ========================================================================== */
.cl-large-info{position:relative;background-blend-mode:multiply;padding-top:6rem;padding-bottom:6rem;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:rgba(0,0,0,.87)}
.cl-large-info h1{text-align:center;text-transform:uppercase;color:var(--cl-white)}
.cl-large-info h1 strong{color:var(--cl-primary)}
.cl-large-info hr{margin:4rem auto;color:var(--cl-white);border:0;border-top:3px solid var(--cl-white);height:0;opacity:1;width:40%}
.cl-large-info__text-large{margin-bottom:3rem}
.cl-large-info__text-large p{color:var(--cl-white);font-weight:600;font-size:1.5rem}
.cl-large-info__text-left p,.cl-large-info__text-right p{color:var(--cl-white);font-size:1.2rem}
.cl-large-info__button{margin-top:3rem}
.cl-large-info__button .cl-btn{font-weight:600;text-transform:uppercase;padding:.7rem 2.5rem}
@media (max-width:768px){
  .cl-large-info{padding:4rem 0}
  .cl-large-info hr{margin:2rem auto}
  .cl-large-info p{font-size:1.1rem}
}

/* ==========================================================================
   8. CTA (registreren)
   ========================================================================== */
.cl-cta{padding:7rem 0}
.cl-cta .cl-row{align-items:center}
.cl-cta__info h2{color:var(--cl-white)}
.cl-cta__info p{color:var(--cl-white);font-size:1.2rem;margin-bottom:3rem}
.cl-cta__info{margin-bottom:3rem}
.cl-cta__image img{width:100%;border-radius:10px;aspect-ratio:4/3;object-fit:cover}
@media (min-width:768px){.cl-cta__info{margin-bottom:0}}
@media (max-width:768px){
  .cl-cta{padding:4rem 0}
  .cl-cta p{font-size:1.1rem}
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.cl-footer{background-color:var(--cl-black);position:relative;padding:3rem 0 0 0;font-size:.75rem;width:100%;margin-top:auto}
.cl-footer p,.cl-footer a,.cl-footer li{font-size:1rem;color:var(--cl-white)}
.cl-footer h4{color:var(--cl-white)}
.cl-main-footer{padding-bottom:3rem}
.cl-main-footer .cl-row>div{margin-bottom:2rem}
@media (min-width:768px){.cl-main-footer .cl-mt-md-5{margin-top:3rem}}
.cl-footer ul li{list-style:none}
.cl-footer ul li a{color:var(--cl-white);font-size:1rem;padding:0;display:inline-block}
.cl-footer a{width:fit-content}
.cl-footer a:hover,.cl-footer a:active{color:var(--cl-primary)}
.cl-footer .cl-with-bullets li{list-style:inside!important;color:var(--cl-white)}
.cl-footer .cl-social{display:flex;align-items:center;margin-top:15px}
.cl-footer .cl-social a{padding:0 7.5px;display:flex;font-size:1.2rem;transition:color .33s ease-in-out}
.cl-footer .cl-social a:first-child{margin-left:-7.5px}
.cl-footer .cl-social svg{width:1.2rem;height:1.2rem}
.cl-footer .cl-social a:hover{color:var(--cl-primary)}
.cl-sub-footer{padding:1rem 0;background:var(--cl-black)}
.cl-sub-footer .cl-container{position:relative}
.cl-sub-footer .cl-container::before{content:"";width:calc(100% - 24px);height:1px;position:absolute;left:12px;top:-16px;background:var(--cl-white);opacity:.4}
.cl-sub-footer .cl-row{align-items:center}
.cl-sub-footer .cl-row>div{color:var(--cl-white);font-family:var(--cl-font);font-weight:300;font-size:.9rem;line-height:1;text-align:center}
.cl-sub-footer .cl-row a{font-size:.9rem;color:var(--cl-white)}
.cl-sub-footer .cl-row a:hover{color:var(--cl-primary)}
.cl-sub-footer .cl-copy{order:2;margin-top:.25rem}
.cl-sub-footer .cl-legal{order:1}
@media (min-width:992px){
  .cl-sub-footer .cl-copy{order:1;text-align:left;margin-top:0;width:50%}
  .cl-sub-footer .cl-legal{order:2;text-align:right;width:50%}
}

/* ---------- Scroll-animatie (korte fade, zoals data-aos fade-up) ---------- */
.cl-aos{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.cl-aos.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cl-aos{opacity:1;transform:none;transition:none}
  .cl-home *{transition-duration:0s!important;scroll-behavior:auto!important}
}