/*  WEBSITE STYLES
    --------------------------------------------- */
html {
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    background: #fff;
    font-family: 'redhat';
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    color: #505252;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 30px;
    color: #313536;
    font-weight: 700;
}

h2 {
    margin: 30px 0 20px;
    padding-bottom: 20px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
}

p, li, table {
    color: #505252;
    line-height: 23px;
    font-size: 15px;
    font-weight: 300;
}

strong, a {
    color: #f00000;
    -webkit-transition: color 500ms;
    transition: color 500ms;
}

a:hover {
    color: #3a3a3a;
}

/*  HEADER
    --------------------------------------------- */
header.top {
    width: 100%;
    position: relative;
    z-index: 9998;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

/* over een donkere hero heen: transparant, geen rand */
.frontpage header.top,
.video-advertenties header.top,
.has-pagehero header.top {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-bottom: 0;
}

/* logo, menu en CTA op één rij - op elke pagina, overal dezelfde hoogte */
header.top > article:first-of-type {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    font-size: 0;
}

header a.logo_taggleauto {
    flex: 0 0 150px;
}

header.top > article:first-of-type > nav.original {
    flex: 1 1 auto;
    min-width: 0;
}

/* stretch i.p.v. center: zo loopt elk menu-item door tot de onderkant van de
   balk en ontstaat er geen dode zone tussen "Producten" en het uitklapmenu */
nav.menufixed > section {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 2px;
}

nav.menufixed > section > ul {
    display: flex;
    align-items: stretch;
}

nav:not(.mobile) section li.btn {
    display: flex;
    align-items: center;
}

header.top article a.cta {
    align-self: center;
}

/* de sticky kloon blijft over de volle breedte staan */
nav.menufixed.cloned {
    width: 100% !important;
}

header a.logo_taggleauto {
    width: 150px;
    height: 34px;
    display: inline-block;
    vertical-align: middle;
    background: url('../img/logo-taggleauto.svg') no-repeat left bottom / 150px 34px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.frontpage header a.logo_taggleauto,
.video-advertenties header a.logo_taggleauto,
.has-pagehero header a.logo_taggleauto {
    background-image: url('../img/logo-taggleauto-white.svg')
}

header a.logo_taggleauto:hover {
    opacity: .8;
}

header.top article a.cta {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 0 0 15px;
    padding: 8px 25px;
    background: #df2227;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

header.top a.cta:hover {
    background: #df474b;
}

.frontpage header.top article a.cta {
    flex: 0 0 auto;
    margin: 0;
    padding: 11px 26px;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.content__main {

}

.content__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 30px;
}

[data-page="404"] .content__center {
    padding: 330px 30px 200px;
    text-align: center;
    background: url(../img/icons/icon-404.svg) no-repeat center 170px / 130px;
}

.content__introduction {
    text-align: center;
}

.content__introduction h1 {
    margin: 0;
    padding: 0;
    font: 700 42px / 42px 'redhat', sans-serif;
    border: 0;
}

.content__introduction p {
    margin: 0;
    padding: 0;
    font: 400 26px / 34px 'redhat', sans-serif !important;
    border: 0;
}

.content__introduction a {
    margin-top: 30px;
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    background-color: #f00000;
    font: 700 18px / 24px 'redhat', sans-serif;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: ease 100ms all;
    transition: ease 100ms all;
}

.content__introduction a:hover {
    background-color: #ed3f3f;
}

.content__visuals {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.content__visuals img {
    flex: 1 1 160px; 
    width: 100%;
    min-width: 160px;
    margin: 0 10px;
}

.content__block_list {
    padding: 30px;
}

.content__block_list h2 {
    margin: 0;
    padding: 0;
    font: 700 26px / 34px 'redhat', sans-serif;
    border: 0;
}

.content__block_list ul {
    margin-top: 20px;
}

.content__block_list ul li {
    padding-left: 40px;
    background: url(../img/icons/icon-google-ads.svg) no-repeat center left / 20px;
    font: 400 16px / 26px 'redhat', sans-serif;
}

[data-page="google-vehicle-ads"] > .content__center {
    padding-bottom: 30px;
}

[data-page="google-vehicle-ads"] .taggle-video-ads__center {
    max-width: 1280px;
}

[data-page="google-vehicle-ads"] .taggle-video-ads__optimized_content {
    padding-left: 0;
}

[data-page="google-vehicle-ads"] .taggle-video-ads[data-block="optimized"] .taggle-video-ads__center[data-width="full"] {
    padding-top: 30px;
}

[data-page="google-vehicle-ads"] .taggle-video-ads[data-block="optimized"] h2:after {
    background-color: #f00000;
}

[data-page="google-vehicle-ads"] form input[type="submit"] {
    background-color: #f00000;
    border: 0;
    box-shadow: none;
    -webkit-border-radius: 300px;
    border-radius: 300px;  
    -webkit-transition: ease 100ms all;
    transition: ease 100ms all;
}

[data-page="google-vehicle-ads"] form input[type="submit"]:hover {
    background-color: #ed3f3f;
}

[data-page="google-vehicle-ads"] p {
    font: 400 16px / 26px 'redhat', sans-serif;
}

[data-page="google-vehicle-ads"] strong {
    color: #000;
}

div.center {
    width: 100%;
    padding: 10px 20px;
    text-align: right;
}

.frontpage div.center {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.totalviews {
    padding: 8px 0;
    color: #505252;
    font: 400 15px / 28px 'redhat', sans-serif;
}

div.center article {
    max-width: 1280px;
    margin: 0 auto;
}

div.center div.block {
    padding: 8px 0;
    display: inline-block;
    vertical-align: top;
}

div.center div.block a {
    display: block;
}

div.center div.block.phoneNumber {
    margin: 0 10px 0 0;
    padding-right: 10px;
}

div.center div.block.phoneNumber a {
    color: #727272;
    font-size: .8em;
    line-height: 100%;
    font-weight: 300;
}

div.center div.block a.button {
    color: #727272;
    font-size: .8em;
    font-weight: 300;
    line-height: 100%;
}

div.center div.block a:hover {
    color: #ed3f3f;
}

/*  NAVIGATION
    --------------------------------------------- */
nav {
    width: calc(100% - 150px);
    z-index: 9999;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}

nav.mobile {
    background: none;
    margin: 0;
}

div.menuOverlay {
    width: calc(100% - 40px);
    padding: 20px;
    position: absolute;
    z-index: 9999;
    right: 20px;
    top: 85px;
    display: none;
    background: #fff;
    overflow-x: hidden;
    opacity: 0;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}

.video-advertenties div.menuOverlay {
    background-color: #165e71;
}

.frontpage div.menuOverlay,
.has-pagehero div.menuOverlay {
    background-color: #15181b;
}

div.smallMenu {
    display: none;
}

nav.cloned {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 0;
    left: 0 !important;
    display: inline-block;
    background: #fff;
    border: 0;
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .15);
    -webkit-transition: all 300ms;
    transition: all 300ms;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

nav.cloned section {
    max-width: 1280px;
    margin: 0 auto;
}

nav.cloned li.btn a {
    padding: 3px 25px 3px 0;
    display: block;
    color: #3A3A3A !important;
}

nav.cloned li.btn.active {
    -webkit-border-radius: 0;
    border-radius: 0;
}

nav.cloned li.btn a:hover {
    color: #f00000;
}

nav section {
    width: 100%;
}

nav section ul {
    display: inline-block;
    vertical-align: middle;
}

nav.cloned section {
    background: url('../img/logo.png') no-repeat left;
    background-size: 88px 20px;
}

nav section li.btn {
    display: inline-block;
}

nav section li.btn.has-children {
    cursor: pointer;
    position: relative;
}

nav section li.btn.has-children .sub-menu {
    width: 210px;
    padding: 10px 15px;
    display: none;
    background: #fff;
    text-align: left;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
}

nav section li.btn.has-children:hover .sub-menu {
    display: inline-block;
    position: absolute;
    top: 35px;
    left: 0;
}

nav.cloned section li.btn.has-children:hover .sub-menu {
    top: 30px;
}

nav section li.btn.has-children .sub-menu li {
    width: 100%;
}

nav.mobile section li.btn {
    width: 100%;
    margin: 0;
}

nav section li.btn a:hover {
    color: #f00000;
}

nav section li.btn a {
    width: 100%;
    padding: 6px 8px;
    display: inline-block;
    color: #000;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: -.01em;

}

nav section li.btn.has-children .sub-menu li a {
    color: #000;
    font-size: 15px;
}

nav section li.btn.active {
    position: relative;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

nav.mobile section li.btn.active {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

nav section li.btn.active a,
nav section li.btn.active:hover a,
.frontpage nav section li.btn a,
.frontpage nav section li.btn a:hover,
.video-advertenties nav section li.btn a,
.video-advertenties nav section li.btn a:hover {
    color: #f00000;
}

.frontpage nav section li.btn a,
.video-advertenties nav section li.btn a,
.has-pagehero nav section li.btn a {
    color: #fff;
}

/*  HOOFDMENU
    --------------------------------------------- */
nav:not(.mobile) section li.btn > a {
    width: auto;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    letter-spacing: -.01em;
    white-space: nowrap;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: all 200ms;
    transition: all 200ms;
}

nav:not(.mobile) section li.btn:not(.secondary) > a:hover {
    background: #f1f3f5;
}

.frontpage nav.original section li.btn:not(.secondary) > a:hover,
.video-advertenties nav.original section li.btn:not(.secondary) > a:hover,
.has-pagehero nav.original section li.btn:not(.secondary) > a:hover {
    background: rgba(255, 255, 255, .13);
}

/* icoon erft de tekstkleur via mask */
.nav-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    opacity: .7;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 17px 17px;
    mask-size: 17px 17px;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
}

li.btn > a:hover .nav-icon,
li.btn.active > a .nav-icon {
    opacity: 1;
}

.nav-icon[data-icon="home"]         { -webkit-mask-image: url('../img/icons/nav/nav-home.svg');         mask-image: url('../img/icons/nav/nav-home.svg'); }
.nav-icon[data-icon="products"]     { -webkit-mask-image: url('../img/icons/nav/nav-products.svg');     mask-image: url('../img/icons/nav/nav-products.svg'); }
.nav-icon[data-icon="integrations"] { -webkit-mask-image: url('../img/icons/nav/nav-integrations.svg'); mask-image: url('../img/icons/nav/nav-integrations.svg'); }
.nav-icon[data-icon="contact"]      { -webkit-mask-image: url('../img/icons/nav/nav-contact.svg');      mask-image: url('../img/icons/nav/nav-contact.svg'); }
.nav-icon[data-icon="login"]        { -webkit-mask-image: url('../img/icons/nav/nav-login.svg');        mask-image: url('../img/icons/nav/nav-login.svg'); }

/* chevron op Producten */
nav:not(.mobile) section li.btn.has-children > a:after {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin-left: -2px;
    background-color: currentColor;
    opacity: .6;
    -webkit-mask: url('../img/icons/nav/nav-chevron.svg') no-repeat center / 12px 12px;
    mask: url('../img/icons/nav/nav-chevron.svg') no-repeat center / 12px 12px;
    -webkit-transition: transform 200ms;
    transition: transform 200ms;
}

nav:not(.mobile) section li.btn.has-children:hover > a:after {
    opacity: 1;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*  SECONDARY BUTTON IN DE NAV (Inloggen)
    --------------------------------------------- */
nav section li.btn.secondary {
    margin-left: 12px;
}

nav section li.btn.secondary > a,
nav.cloned section li.btn.secondary > a {
    width: auto;
    padding: 9px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d5dade;
    font-weight: 600;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

nav section li.btn.secondary > a:hover,
nav.cloned section li.btn.secondary > a:hover {
    border-color: #df2227;
    color: #df2227 !important;
}

.frontpage nav.original section li.btn.secondary > a,
.video-advertenties nav.original section li.btn.secondary > a,
.has-pagehero nav.original section li.btn.secondary > a {
    border-color: rgba(255, 255, 255, .40);
}

/*  MEGA MENU (Producten)
    --------------------------------------------- */
nav section {
    position: relative;
}

nav section li.btn.has-children.mega {
    position: static;
}

nav section li.btn.has-children.mega .sub-menu {
    width: auto;
    padding: 14px 0 0;
    background: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

nav section li.btn.has-children.mega:hover .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

nav.cloned section li.btn.has-children.mega:hover .sub-menu {
    top: 100%;
}

.mega-menu__inner {
    background: #fff;
    overflow: hidden;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -webkit-box-shadow: 0 24px 60px 0 rgba(0, 0, 0, .18);
    box-shadow: 0 24px 60px 0 rgba(0, 0, 0, .18);
}

.mega-menu__group {
    padding: 26px 34px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 30px;
    border-top: 1px solid #ededed;
}

.mega-menu__group:first-child {
    border-top: 0;
}

.mega-menu__label > strong {
    display: block;
    color: #10161c;
    font: 700 17px / 24px 'redhat', sans-serif;
}

.mega-menu__label > span {
    margin-top: 5px;
    display: block;
    color: #79818a;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.mega-menu__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 26px;
}

nav section li.btn.mega .mega-menu__items a {
    width: auto;
    padding: 10px;
    margin: -10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #10161c;
    font-weight: 400;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

nav section li.btn.mega .mega-menu__items a:hover {
    background: #f5f6f7;
    color: #10161c;
}

.mega-menu__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: #f1f3f5 no-repeat center / 19px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.mega-menu__icon[data-icon="automatic"] { background-image: url('../img/icons/icon-usp-automatic.svg'); }
.mega-menu__icon[data-icon="campaign"]  { background-image: url('../img/icons/icon-usp-campaign.svg'); }
.mega-menu__icon[data-icon="catalog"]   { background-image: url('../img/icons/icon-usp-catalog.svg'); }
.mega-menu__icon[data-icon="stats"]     { background-image: url('../img/icons/icon-usp-stats.svg'); }
.mega-menu__icon[data-icon="play"]      { background-image: url('../img/icons/icon-play.svg'); }
.mega-menu__icon[data-icon="whatsapp"]  { background-image: url('../img/icons/icon-whatsapp.svg'); }
.mega-menu__icon[data-icon="facebook"]  { background-image: url('../img/icons/icon-facebook.svg'); }
.mega-menu__icon[data-icon="instagram"] { background-image: url('../img/icons/icon-instagram.svg'); }
.mega-menu__icon[data-icon="google"]    { background-image: url('../img/icons/icon-google-ads.svg'); }

.mega-menu__text {
    min-width: 0;
}

.mega-menu__text > strong {
    display: block;
    color: #10161c;
    font: 600 15px / 21px 'redhat', sans-serif;
}

.mega-menu__items a.active .mega-menu__text > strong {
    color: #df2227;
}

.mega-menu__text > span {
    margin-top: 3px;
    display: block;
    color: #79818a;
    font: 400 13px / 18px 'redhat', sans-serif;
}

.frontpage nav.original section li.btn a:hover,
.has-pagehero nav.original section li.btn a:hover {
    color: #df2227;
}

.frontpage nav.original section li.btn.has-children .sub-menu li a:hover,
.video-advertenties nav.original section li.btn.has-children .sub-menu li a:hover,
.has-pagehero nav.original section li.btn.has-children .sub-menu li a:hover {
    color: #df2227;
}

/*  STREAMER
    --------------------------------------------- */
section.streamer {
    width: 100%;
    height: calc(100% - 200px);
    padding: 100px 20px 0 20px;
    background: rgb(15,77,93);
    background: linear-gradient(120deg, rgba(15,77,93,1) 0%, rgba(23,101,121,1) 100%);
    position: relative;
}

section.streamer > article {
    width: 100%;
    max-width: 936px;
    margin: 0 auto;
}

section.streamer article div.block {
    width: 100%;
    margin: 0;
    padding: 50px 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 0;
}

section.streamer article div.block div.content {
    width: calc(100% - 248px);
    padding: 0 50px 0 0;
    display: inline-block;
    vertical-align: middle;
}

section.streamer article div.block.right {
    margin-right: 0;
    padding: 0;
}

section.streamer article div.block h2 {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 40px;
    line-height: 45px;
    font-weight: 700;
    border: 0;
    color: #fff;
}

section.streamer article div.block p {
    margin-top: 10px;
    color: #000;
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
    color: #fff;
}

section.streamer article div.block a {
    height: auto;
    margin-top: 15px;
    padding: 10px 25px;
    background: #df2227;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

section.streamer article div.block a:hover {
    background: #df474b;
    color: #fff;
}

.taggleads {
    width: 100%;
    max-width: 220px;
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .1);
}

.taggleads video {
    width: 100%;
    height: 383px;
    vertical-align: top;
    border: 5px solid #484848;
    -webkit-border-radius: 15px;
}


/*  PARTNERS
    --------------------------------------------- */
section.partners {
    width: auto;
    padding: 0 40px;
    position: relative;
    z-index: 9990;
    background: #f7f8fa;
}

section.partners p.partner-text {
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    position: static;
    color: #10161c;
    font: 700 32px / 40px 'redhat', sans-serif;
    text-align: center;
}

section.partners p.partner-intro {
    max-width: 680px;
    margin: 0 auto 45px;
    color: #5f676f;
    font: 400 17px / 27px 'redhat', sans-serif;
    text-align: center;
}

section.partners article {
    width: 100%;
    max-width: 1280px;
    padding: 90px 30px;
    margin: 0 auto;
    position: relative;
}

section.partners article .partner-grid {
    padding: 50px 45px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 45px 40px;
    align-items: center;
    background: #fff;
    border: 1px solid #e9ebee;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

section.partners a.partner-link {
    margin: 28px auto 0;
    display: block;
    color: #5f676f;
    font: 400 15px / 22px 'redhat', sans-serif;
    text-align: center;
}

section.partners a.partner-link:after {
    content: " \2192";
    color: #df2227;
}

section.partners a.partner-link:hover {
    color: #df2227;
}

section.partners article .partner-grid div.partner {
    width: auto;
    margin: 0;
    display: block;
}

section.partners article .partner-grid div.partner img {
    width: 100%;
    height: 40px;
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

/*  SELECTION
    --------------------------------------------- */
section.selection {
    width: auto;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 9989;
    
}

section.selection article {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    text-align: center;
}

section.selection a.block {
    width: calc(16.66% - 25px);
    height: 100px;
    margin-right: 25px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .1);
    background-repeat: no-repeat;
    background-position: 50% 20px;
    background-size: 25px;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    -webkit-border-radius: 6px;
}

section.selection a.block:last-of-type {
    margin-right: 0;
}

section.selection a.block:hover,
section.selection a.block.active {
    background-color: rgba(0, 0, 0, .2);
}

section.selection a.block.icon01a {
    background-image: url('../img/btn-icon-01a.png');
}
section.selection a.block.icon01b {
    background-image: url('../img/btn-icon-01b.png');
}
section.selection a.block.icon02 {
    background-image: url('../img/btn-icon-02.png');
}
section.selection a.block.icon03 {
    background-image: url('../img/btn-icon-04.png');
}
section.selection a.block.icon04 {
    background-image: url('../img/btn-icon-03.png');
}
section.selection a.block.icon05 {
    background-image: url('../img/btn-icon-05.png');
}
section.selection a.block.icon06 {
    background-image: url('../img/btn-icon-06.png');
}

section.selection a.block span {
    width: 100%;
    position: absolute;
    bottom: 18px;
    left: 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    letter-spacing: .025em;
}

/*  CONTENT
    --------------------------------------------- */
section.middle div.content-left {
    width: 58%;
    margin-right: 4%;
    display: inline-block;
    vertical-align: top;
}

section.middle div.content-left strong {
    font-size: 18px;
}

section.middle div.content-right {
    width: 33%;
    display: inline-block;
    vertical-align: top;
}

section.middle div.content-right form,
section.middle div.tekstmodule-right form {
    background: #f5f5f5;
    padding: 40px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

section.middle div.content-right form h2,
section.middle div.tekstmodule-right form h2 {
    margin-top: 0;
}

.content-right_help {
    padding: 30px;
    background: #f9f9f9;
    -webkit-border-radius: 6px;
}

.content-right_help_title {
    margin-bottom: 10px;
    display: inline-block;
    font-size: 24px;
}

/*  SUBPAGINA-HERO
    -------------------------------- */
.pagehero {
    width: 100%;
    background: #0d1014;
    position: relative;
    overflow: hidden;
}

/* scrim over de trailerwand, zodat de tekst leesbaar blijft */
.pagehero:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background:
        -webkit-linear-gradient(top, rgba(10, 12, 14, .25) 0%, rgba(10, 12, 14, .25) 45%, rgba(10, 12, 14, .25) 100%),
        -webkit-linear-gradient(left, rgba(10, 12, 14, .26) 0%, rgba(10, 12, 14, .28) 50%, rgba(10, 12, 14, .22) 100%);
    background:
        linear-gradient(180deg, rgba(10, 12, 14, .25) 0%, rgba(10, 12, 14, .25) 45%, rgba(10, 12, 14, .25) 100%),
        linear-gradient(90deg, rgba(10, 12, 14, .26) 0%, rgba(10, 12, 14, .28) 50%, rgba(10, 12, 14, .22) 100%);
}

.pagehero:after {
    content: "";
    width: 620px;
    height: 620px;
    position: absolute;
    top: -340px;
    right: -180px;
    z-index: 3;
    background: -webkit-radial-gradient(center, ellipse, rgba(223, 34, 39, .17) 0%, rgba(223, 34, 39, 0) 70%);
    background: radial-gradient(ellipse at center, rgba(223, 34, 39, .17) 0%, rgba(223, 34, 39, 0) 70%);
}

.pagehero__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 150px 30px 80px;
    position: relative;
    z-index: 4;
}

.pagehero h1 {
    max-width: 900px;
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 52px / 60px 'redhat', sans-serif;
    letter-spacing: -.03em;
    border: 0;
}

.pagehero__intro {
    max-width: 660px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .62);
    font: 400 18px / 29px 'redhat', sans-serif;
}

.pagehero__cta {
    margin-top: 32px;
    padding: 15px 36px;
    display: inline-block;
    background: #df2227;
    color: #fff;
    font: 600 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-box-shadow: 0 12px 32px rgba(223, 34, 39, .30);
    box-shadow: 0 12px 32px rgba(223, 34, 39, .30);
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.pagehero__cta:hover {
    background: #df474b;
    color: #fff;
}

/*  SUBPAGINA-CONTENT
    -------------------------------- */
section.middle {
    width: 100%;
    background: #fff;
}

section.middle article {
    padding: 70px 0;
}

section.middle article video {
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: top;
}

section.middle article:nth-child(even) {
    background: #f7f8fa;
}

section.middle article > div {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

section.middle article > div h1 {
    margin: 0 0 26px;
    color: #10161c;
    font: 700 38px / 46px 'redhat', sans-serif;
    letter-spacing: -.02em;
}

section.middle article > div h2 {
    margin: 44px 0 14px;
    padding-bottom: 0;
    color: #10161c;
    font: 700 26px / 34px 'redhat', sans-serif;
    letter-spacing: -.01em;
    border-bottom: 0;
}

section.middle article > div h3 {
    margin: 32px 0 12px;
    color: #10161c;
    font: 700 20px / 28px 'redhat', sans-serif;
}

section.middle article > div > h2:first-child,
section.middle article > div > div > h2:first-child {
    margin-top: 0;
}

section.middle article > div p {
    margin-bottom: 18px;
    color: #4c545c;
    font: 400 17px / 29px 'redhat', sans-serif;
    text-align: left;
}

section.middle article > div p:last-child {
    margin-bottom: 0;
}

section.middle article > div ul {
    margin: 0 0 22px;
    padding: 0;
}

section.middle article > div ul li {
    margin-bottom: 11px;
    padding-left: 30px;
    position: relative;
    list-style-type: none;
    color: #4c545c;
    font: 400 17px / 27px 'redhat', sans-serif;
}

section.middle article > div ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 10px;
    left: 6px;
    background: #df2227;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

section.middle article > div p a,
section.middle article > div li a {
    color: #df2227;
    font-weight: 600;
    -webkit-transition: color 200ms;
    transition: color 200ms;
}

section.middle article > div p a:hover,
section.middle article > div li a:hover {
    color: #c01d22;
    text-decoration: underline;
}

@media only screen and (max-width: 1024px) {

    .pagehero h1 {
        font-size: 40px;
        line-height: 48px;
    }

    section.middle article > div h1 {
        font-size: 30px;
        line-height: 38px;
    }

    section.middle article > div h2 {
        font-size: 23px;
        line-height: 31px;
    }

}

@media only screen and (max-width: 768px) {

    .pagehero__center {
        padding: 120px 25px 55px;
    }

    .pagehero h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .pagehero__intro {
        font-size: 16px;
        line-height: 26px;
    }

    section.middle article {
        padding: 50px 0;
    }

    section.middle article > div {
        padding: 0 25px;
    }

    section.middle article > div h1 {
        font-size: 26px;
        line-height: 34px;
    }

    section.middle article > div p,
    section.middle article > div ul li {
        font-size: 16px;
        line-height: 27px;
    }

}

section.middle article > div div.buttonContain {
    width: 100%;
    display: inline-block;
    margin-top: 30px;
    text-align: left;
}

section.middle article > div div.buttonContain a.button {
    width: auto;
    padding: 10px 0;
    display: inline-block;
    color: #f00000;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: background 500ms;
    transition: background 500ms;
}

section.middle article > div div.buttonContain a.button:hover {
    text-decoration: underline;
}

section.middle article > div p span.roundBlock {
    width: 170px;
    height: 170px;
    margin: 0 60px 10px 0;
    float: left;
    background: #6c6d72 no-repeat center;
    background-size: 110px;
    display: none;
    border: 1px solid #636468;
    border-bottom: 3px solid #545559;
    border-radius: 10px;

}

section.middle article.app > div p span.roundBlock      {
    background-image: url('../img/btn-icon-01-white.png');
}
section.middle article.maatwerk > div p span.roundBlock {
    background-image: url('../img/btn-icon-02-white.png');
}

section.middle article.information div.videoContainer {
    width: 100%;
    max-width: 320px;
    height: 100%;
    padding: 0;
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
    background: #f9f9f9;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}

section.middle article.information .right div.videoContainer {
    background-color: #fff;
}

section.middle article.information div.videoContainer a {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}

section.middle article.information div.videoContainer a img,
section.middle article.information div.videoContainer img {
    width: 100%;
    height: auto;
    display: inline-block;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: 300ms ease opacity;
    transition: 300ms ease opacity;
}

section.middle article.information div.videoContainer a img:hover {
    opacity: .8;
}

section.middle article.information div h2 {
    border-bottom: 0;
    padding-bottom: 0;
}

section.middle article div.left,
section.middle article div.right {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

section.middle article div.left {
    width: 47%;
    margin-right: 6%;
}

section.middle article div.right {
    width: 47%;
}

section.middle article.information > div div.buttonContain {
    text-align: left;
}

section.middle article.information {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 0 0;
    font-size: 0;
}

section.middle article.information > div {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    display: inline-block;
    vertical-align: top;
    background: #f9f9f9;
    -webkit-border-radius: 10px;
}

section.middle article.information div.videoContainer {
    float: left;
    margin-right: 30px;
}

section.middle article.information > div:last-of-type {
    margin-right: 0;
}

section.middle article.information h2 {
    margin: 0 0 15px;
    font: 700 28px / 38px 'redhat', sans-serif;
}

section.middle article ul {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0 0 15px 15px;
}

section.middle article ul li {
    list-style: disc;
    padding-left: 5px;
    line-height: 200%;
}

section.middle article.specs > div ul {
    padding: 0;
}

section.middle article.specs > div ul li {
    width: 24.25%;
    height: 230px;
    margin: 0 1% 1% 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-color: #f9f9f9;
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 80px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

section.middle article.specs > div ul li:nth-child(4n) {
    margin-right: 0;
}

section.middle article.specs > div ul li.spec1 {
    background-image: url('../img/icon-specs-hd.png');
}
section.middle article.specs > div ul li.spec2 {
    background-image: url('../img/icon-specs-cloud.png');
}
section.middle article.specs > div ul li.spec3 {
    background-image: url('../img/icon-specs-voice.png');
}
section.middle article.specs > div ul li.spec4 {
    background-image: url('../img/icon-specs-subs.png');
}
section.middle article.specs > div ul li.spec5 {
    background-image: url('../img/icon-specs-app.png');
}
section.middle article.specs > div ul li.spec6 {
    background-image: url('../img/icon-specs-social.png');
}
section.middle article.specs > div ul li.spec7 {
    background-image: url('../img/icon-specs-doorplaatsen.png');
}
section.middle article.specs > div ul li.spec13 {
    background-image: url('../img/icon-specs-up.png');
    background-size: 120px;
}
section.middle article.specs > div ul li.spec9 {
    background-image: url('../img/icon-specs-qrcode.png');
}
section.middle article.specs > div ul li.spec10 {
    background-image: url('../img/icon-specs-down.png');
    background-size: 120px;
}
section.middle article.specs > div ul li.spec11 {
    background-image: url('../img/icon-specs-flyer.png');
}
section.middle article.specs > div ul li.spec12 {
    background-image: url('../img/icon-specs-website.png');
}

section.middle article.specs > div ul li span {
    width: 100%;
    height: 50px;
    padding: 0 30px;
    position: absolute;
    bottom: 25px;
    text-align: center;
}

article.templates div.block div.videoContainer.blackBorder img {
    border: 1px solid #c0c0c0;
}

/*  PLAY BUTTON
    --------------------------------------------- */
a.playButton {
    height: 100px;
    width: 100px;
    position: absolute;
    right: 310px;
    top: 230px;
    z-index: 9005;
    background: rgba(255, 255, 255, .05) url('../img/btn-icon-play.png') no-repeat 50% 50%;
    background-size: 60px;
    opacity: 1;

}

a.playButton:hover {
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
}

/* TRAILERS
   --------------------------------------------- */
article.templates div.trailerContainter {
    display: inline-block;
    margin-top: 30px;
}

article.templates div.block {
    width: 30.66666666666667%;
    margin-right: 4%;
    margin-bottom: 4%;
    background: #fff;
    display: inline-block;
    position: relative;
    z-index: 4;
    vertical-align: top;
    -webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .015);
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .015);
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

article.templates div.block:nth-of-type(3n) {
    margin-right: 0;
}

article.templates div.block p.description {
    padding: 10px 10px 0;
}

article.templates div.block h2 {
    width: 100%;
    margin: 0 0 0px;
    padding: 2px 0 13px;
    background: #f3f3f3;
    border: 1px solid #e2e2e2;
    border-bottom: 0;
    display: inline-block;
    z-index: 5;
    color: #525252;
    font-size: 1.2em;
    font-weight: 800;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

article.templates div.block h2 span {
    margin: 12px 0 0 20px;
    display: inline-block;
    text-align: left;
}

article.templates div.block div.videoContainer {
    padding: 0;
    position: relative;
}

article.templates div.block div.videoContainer a.playButton {
    width: auto;
    height: auto;
    padding: 7px 60px 7px 10px;
    top: -45px;
    color: #616161;
    background: #fbfbfb url('../img/btn-icon-play-voice.png') no-repeat 93% 50%;
    border: 1px solid #e1e1e1;
    background-size: 45px;
    font-size: 1em;
    font-weight: 500;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

article.templates div.block div.videoContainer a.playButton:hover {
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
}

article.templates div.block div.videoContainer a.playButton.man {
    right: 138px;
}

article.templates div.block div.videoContainer a.playButton.woman {
    right: 8px;
}

article.templates div.block div.videoContainer img {
    width: 100%;
    display: block;
}

article.templates div.block div.specifications {
    margin: 0;
    border: 1px solid #e2e2e2;
    border-top: 0;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
article.templates div.block div.specifications div.row {
    padding: 10px 0;
    line-height: 100%;
}

article.templates div.block div.specifications div.row.header div.cell02,
article.templates div.block div.specifications div.row.header div.cell03 {
    font-weight: 500;
    font-size: 1em;
}

article.templates div.block div.specifications div.row:nth-child(even) {
    background: #eef1f3;
}

article.templates div.block div.specifications div.row div.cell01 {
    width: calc(60% - 20px);
    padding-left: 20px;
    display: inline-block;
    vertical-align: top;
    color: #2D2D2D;
    font-weight: 400;
    line-height: 100%;
    font-size: .9em;
}

article.templates div.block div.specifications div.row div.cell02 {
    width: 17.5%;
    display: inline-block;
    vertical-align: top;
    color: #2D2D2D;
    font-weight: 300;
    font-size: .9em;
}
article.templates div.block div.specifications div.row div.cell03 {
    width: 17.5%;
    display: inline-block;
    vertical-align: top;
    color: #2D2D2D;
    font-weight: 300;
    font-size: .9em;
}

article.templates div.block div.specifications div.row img {
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: top;
}

img.calltoaction {
    width: 100%;
    max-width: 500px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

div.ctaScreens div.hold {
    margin: 0 20px 0 0;
    display: inline-block;
    vertical-align: top;
}

div.ctaScreens div.hold:last-of-type {
    margin: 0;
}

div.ctaScreens div.hold img {
    display: block;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

/*  PARTNERS
    --------------------------------------------- */
article.partners h2 {
    margin: 50px 0 30px;
    font-weight: 500;
    letter-spacing: -.015em;
}

article.partners div.partner {
    width: 18.40%;
    margin: 0 2% 2% 0;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    border: 2px solid #eaeaea;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

article.partners div.container1 div.partner:nth-child(5n),
article.partners div.container2 div.partner:nth-child(5n),
article.partners div.container3 div.partner:nth-child(5n) {
    margin-right: 0;
}

article.partners div.partner img {
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/*  APP
    --------------------------------------------- */
section.middle article.app ul {
    display: block;
}

section.middle article.app ul li {
    margin: 8px 0;
    list-style-type: disc;
    font-size: 15px;
    line-height: 23px;
}

section.middle article.app div div.app-left,
section.middle article.tekstmodule div div.tekstmodule-left {
    width: 57%;
    padding-right: 3%;
    margin: 0 3% 0 0;
    display: inline-block;
    vertical-align: top;
}

section.middle article.app div div.app-left {
    width: 65%;
    border: 0;
}

section.middle article.app div div.app-left h2 {
    padding-bottom: 0;
    border: 0;
}

section.middle article.app div div.app-left img.instagram {
    width: 200px;
    margin-left: 40px;
    float: right;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

section.middle article.app div div.app-left img.taggle360-logo {
    max-width: 220px;
    float: left;
    margin: 0 20px 10px 0;
}

section.middle article.tekstmodule div div.tekstmodule-left strong {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

section.middle article.app div div.app-right,
section.middle article.tekstmodule div div.tekstmodule-right {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

section.middle article.app div div.app-right {
    width: 30%;
    padding: 30px;
    background: #fdfdfd;
    border: 1px solid #eee;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

section.middle article.app div div.app-right h3 {
    font-size: 24px;
    font-weight: 500;
    text-align: left;
}

section.middle article.app div div.app-right ul {
    padding: 0;
}

section.middle article.app div div.app-right ul li {
    margin: 15px 0;
    padding-left: 40px;
    list-style-type: none;
    background: no-repeat left center / 24px;
}

section.middle article.app div div.app-right ul li.aanbod {
    background-image: url('/assets/img/carviewer-aanbod.svg');
}

section.middle article.app div div.app-right ul li.share {
    background-image: url('/assets/img/carviewer-share.svg');
}

section.middle article.app div div.app-right ul li.stats {
    background-image: url('/assets/img/carviewer-stats.svg');
}

section.middle article.app div div.app-right ul li.social {
    background-image: url('/assets/img/carviewer-social.svg');
}

section.middle article.app div div.app-right ul li.record {
    background-image: url('/assets/img/carviewer-record.svg');
}

section.middle article.app div.app-right img.imgRight,
section.middle article.tekstmodule div.tekstmodule-right img.imgRight {
    width: 100%;
    display: block;
}

section.middle article.app div.app-right div.customVideoContainer,
section.middle article.tekstmodule div.tekstmodule-right div.customVideoContainer {
    width: 100%;
    margin-top: 30px;
    display: inline-block;
    border: 6px solid #c1c3d1;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

section.middle article.app div.app-right div.customVideoContainer a img,
section.middle article.tekstmodule div.tekstmodule-right div.customVideoContainer a img,
section.middle article.tekstmodule div.tekstmodule-right div.customVideoContainer img {
    width: 100%;
    display: block;
    -webkit-transition: ease opacity 300ms;
    transition: ease opacity 300ms;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

section.middle article.app div.app-right div.customVideoContainer a img:hover,
section.middle article.tekstmodule div.tekstmodule-right div.customVideoContainer a img:hover {
    opacity: .8;
}

section.middle article.app.taggle360 div div.app-left {
    width: calc(75% - 70px);
    margin-right: 70px;
    padding: 0;
    border: 0;
}

section.middle article.app.taggle360 div div.app-right {
    width: 25%;
}

section.middle article.app.taggle360 div div.app-right .carousel .slick-slider .slick-track {
    margin: 0 !important;
}

section.middle article.app.taggle360 div div.app-right .carousel .slick-list {
    margin: 0 -5px 0 0 !important;
}

section.middle article.app.taggle360 div div.app-right .carousel .slick-slide {
    margin-right: 5px !important;
}

section.middle article.app.taggle360 div div.app-right .carousel .slick-slide.slick-active:last-of-type {
    margin-right: 0 !important;
}

section.middle article.app.taggle360 div div.app-right .carousel .slick-slide img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}

section.middle article.app.taggle360 div div.app-right .carousel button.slick-arrow {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 0;
    margin: auto;
    padding: 0;
    border: 0;
    z-index: 999;
    cursor: pointer;
    outline: none;
}

section.middle article.app.taggle360 div div.app-right .carousel button.slick-arrow:hover {
    opacity: .8;
}

section.middle article.app.taggle360 div div.app-right .carousel button.slick-arrow.slick-disabled  {
    display: none !important;
}

section.middle article.app.taggle360 div div.app-right .carousel button.slick-prev {
    left: 0;
    right: auto;
    background: url('/assets/img/icon-arrow-left.svg') no-repeat 50% / 30px, linear-gradient(to right,  rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%);
}

section.middle article.app.taggle360 div div.app-right .carousel button.slick-next {
    right: 0;
    left: auto;
    background: url('/assets/img/icon-arrow-right.svg') no-repeat 50% / 30px, linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
}

/*  CONTACT
    --------------------------------------------- */
article.contact div div.left {
    width: 45%;
    margin-right: 5%;
    display: inline-block;
    vertical-align: top;
}

article.contact div form {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

/* FORMS
   --------------------------------------------- */
form {
    position: relative;
}

section.middle article form.facebook-winkel ul,
section.middle article form.tekst-generator ul {
    padding: 0;
    margin-left: 15px;
}

section.middle article form.facebook-winkel ul li,
section.middle article form.tekst-generator ul li {
    padding: 0 0 10px 0;
    list-style-type: disc;
    font-size: 14px;
    line-height: 22px;
}

/* legacy-lijsten gelijktrekken met de nieuwe stijl (staan later in het bestand
   en wonnen daardoor van de content-regels hierboven) */
section.middle article ul li,
section.middle article.app ul li,
section.middle article form.facebook-winkel ul li,
section.middle article form.tekst-generator ul li {
    margin-bottom: 11px;
    padding: 0 0 0 30px;
    position: relative;
    list-style-type: none;
    color: #4c545c;
    font: 400 17px / 27px 'redhat', sans-serif;
}

section.middle article ul li:before,
section.middle article.app ul li:before,
section.middle article form.facebook-winkel ul li:before,
section.middle article form.tekst-generator ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 10px;
    left: 6px;
    background: #df2227;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

form table {
    width: 100%;
}
form table tr td {
    width: 49%;
    display: inline-block;
    vertical-align: middle;
}
form table tr td.verplicht {
    width: 100%;
    margin-top: 10px;
}
form table tr td.agree {
    margin-top: 10px;
    width: 100%;
}

form table tr td.agree label {
    cursor: pointer;
}

form label.error {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
    font-size: 14px;
}

form.facebook-winkel label.error,
form.tekst-generator label.error,
form.webshop-module label.error {
    display: none;
}

form input[type="password"],
form input[type="email"],
form input[type="text"],
form textarea {
    width: 100%;
    margin: 2px 0;
    padding: 7px 10px;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border: 2px solid #d9d7d7;
    color: #505252;
    font-family: 'redhat';
    font-weight: 300;
    font-size: 1em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

form input[type="text"]:hover,
form input[type="password"]:hover,
form input[type="email"]:hover {
    border: 2px solid #b2b1b1;
}

form.facebook-winkel input[type="checkbox"],
form.tekst-generator input[type="checkbox"],
form.webshop-module input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 3px;
    cursor: pointer;
}

form.facebook-winkel input[type="checkbox"]:checked,
form.tekst-generator input[type="checkbox"]:checked,
form.webshop-module input[type="checkbox"]:checked {
    background: #1ad469;
    border-color: #1ad469;
}

form.facebook-winkel input[type="email"].error,
form.facebook-winkel input[type="text"].error,
form.facebook-winkel input[type="checkbox"].error,
form.tekst-generator input[type="email"].error,
form.tekst-generator input[type="text"].error,
form.tekst-generator input[type="checkbox"].error,
form.webshop-module input[type="email"].error,
form.webshop-module input[type="text"].error,
form.webshop-module input[type="checkbox"].error {
    border-color: red;
}

form input[type="submit"] {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 20px 0 0 0;
    padding: 10px 25px;
    background: #df2227;
    border: 0;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

form.facebook-winkel input[type="submit"],
form.tekst-generator input[type="submit"],
form.webshop-module input[type="submit"] {
    float: none;
}

form input[type="submit"]:hover {
    background: #df474b;
    cursor: pointer;
}

/* Freemonth - staat nu als sectie boven de footer (zie inc_cta.php) */
form.form_02 {
    padding: 0;
    background: none;
}

form.form_02 label.error {
    margin-top: 6px;
    display: block;
    color: #ff5c60;
    font: 400 13px / 19px 'redhat', sans-serif;
}

form.form_02 input[type="submit"] {
    width: 100%;
    max-width: none;
    background: #df2227;
}

form.form_02 input[type="submit"]:hover {
    background: #df474b;
}

form.form_02 div.melding p {
    color: rgba(255, 255, 255, .80);
    font: 400 17px / 28px 'redhat', sans-serif;
}

form.form_01 div.melding p,
form.form_02 div.melding p {
    font-size: 1em;
    color: #505252;
}
form.form_02 div.melding h2 {
    margin: 0 0 20px;
}

form.form_03 {
    max-width: 640px;
}

#colorbox.vrijblijvend-advies #cboxContent {
    padding: 30px;
    background: #fff;
}

#colorbox.vrijblijvend-advies form h2 {
    margin-top: 0;
}

#colorbox.vrijblijvend-advies #cboxClose {
    right: 10px;
    left: auto;
}

article.maatwerk h2 {
    margin-top: 50px;
}



div.loaderDiv {
    width: 100%;
    height: 100%;
    padding: 5px;
    background: url('../img/loading.svg') no-repeat center center;
    -moz-opacity:0.4;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

form.form_03 table {
    max-width: 100%;
}

article.contact div form.form_01 div.melding {
    margin-top: 30px;
}

/*  FORM INLOGGEN
    --------------------------------------------- */
/* de kaart zit nu om het formulier heen (zie .login__card) */
form.inloggen {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

form.inloggen > label {
    width: 100%;
    display: inline-block;
}
form.inloggen > input[type="text"],
form.inloggen > input[type="email"],
form.inloggen > input[type="password"] {
    width: 100%;
    margin: 10px 0 5px;
    padding: 10px;
    display: inline-block;
    border: 1px solid #ececec;
    color: #303436;
    font-weight: 300;
    font-size: 1em;
    font-family: 'redhat';
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

form.inloggen > input[type="text"].email {
    background: url('../img/form_icon_mail.png') no-repeat 98% 50%;
}
form.inloggen > input[type="email"].email {
    background: url('../img/form_icon_mail.png') no-repeat 98% 50%;
}
form.inloggen > input[type="password"].pass {
    background: url('../img/form_icon_password.png') no-repeat 98% 50%;
}
form.inloggen > input[type="text"]:focus,
form.inloggen > input[type="email"]:focus,
form.inloggen > input[type="password"]:focus {
    border: 1px solid #f00000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #747474;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #747474;
    opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #747474;
}
:-moz-placeholder { /* Firefox 18- */
    color: #747474;
    opacity: 1;
}

form.inloggen > input[type="submit"] {

    margin-top: 10px;
    padding: 10px 20px;
    background: #f00000;
    border: 0;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    float: none;
    font-family: 'redhat';
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

form.inloggen > input[type="submit"]:hover {
    background: #646464;
    border: 0;
    cursor: pointer;
}

form.inloggen div.options {
    width: 100%;
    margin: 40px 0 10px;
    display: inline-block;
    font-size: .9em;
}
form.inloggen div.options .checkbox {
    width: 25px;
    display: inline-block;
    position: relative;
}
form.inloggen div.options .checkbox label {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #b3b1b1;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

form.inloggen div.options span {
    margin-left: 6px;
    color: #303436;
}
form.inloggen a.wachtwoordvergeten {
    margin-top: 3px;
    float: right;
}

/* FORM_VERGETEN
   --------------------------------------------- */
section.vergeten {
    height: 100%;
    padding: 5% 0;
}

section.vergeten article {
    height: 100%;
}

form.vergeten {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 30px 40px;
    background: #fff;
    border: 2px solid #eaeaea;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

form.vergeten input[type="text"],
form.vergeten textarea {
    background: #fff;
    border: 1px solid #ececec;
    color: #303436;
}

form.vergeten input[type="submit"] {
    float: none;
}

form.vergeten p {
    margin-bottom: 15px;
    text-align: center;
}

form.vergeten p a {
    width: 100%;
    margin-top: 20px;
    display: inline-block;
}

/* FOOTER
   --------------------------------------------- */
footer {
    width: 100%;
    padding: 0;
    background: #0d1014;
}

.footer__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

.footer__top {
    padding: 72px 0 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 60px;
}

.footer__logo {
    width: 160px;
    height: 36px;
    display: block;
    background: url('../img/logo-taggleauto-white.svg') no-repeat left center / 160px 36px;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
}

.footer__logo:hover {
    opacity: .8;
}

.footer__pitch {
    max-width: 340px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .55);
    font: 400 15px / 24px 'redhat', sans-serif;
}

.footer__stat {
    margin-top: 30px;
    padding: 18px 22px;
    display: inline-block;
    background: #14181e;
    border: 1px solid #232830;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.footer__stat > strong {
    display: block;
    color: #df2227;
    font: 700 28px / 34px 'redhat', sans-serif;
    letter-spacing: -.02em;
}

.footer__stat > span {
    display: block;
    color: rgba(255, 255, 255, .50);
    font: 400 14px / 20px 'redhat', sans-serif;
}

.footer__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.footer__col_title {
    margin-bottom: 16px;
    display: block;
    color: #fff;
    font: 700 15px / 22px 'redhat', sans-serif;
}

.footer__col ul {
    margin: 0;
    padding: 0;
}

.footer__col li {
    padding: 0;
    list-style-type: none;
}

.footer__col li a {
    padding: 5px 0;
    display: inline-block;
    color: rgba(255, 255, 255, .55);
    font: 400 15px / 22px 'redhat', sans-serif;
    -webkit-transition: color 200ms;
    transition: color 200ms;
}

.footer__col li a:hover {
    color: #ff5c60;
}

.footer__bottom {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #1e232b;
}

.footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .40);
    font: 400 14px / 20px 'redhat', sans-serif;
}

.footer__legal {
    display: flex;
    gap: 26px;
}

.footer__legal a {
    color: rgba(255, 255, 255, .40);
    font: 400 14px / 20px 'redhat', sans-serif;
    -webkit-transition: color 200ms;
    transition: color 200ms;
}

.footer__legal a:hover {
    color: #ff5c60;
}

@media only screen and (max-width: 1024px) {

    .footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

}

@media only screen and (max-width: 768px) {

    .footer__top {
        padding: 55px 0 45px;
    }

    .footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

@media only screen and (max-width: 414px) {

    .footer__links {
        grid-template-columns: minmax(0, 1fr);
    }

}

/*  DEMO VIDEO
    -------------------------------- */
div.video {
    padding: 10px;
    display: inline-block;
    outline: none;
}

/*  KLANTEN
    -------------------------------- */
section.middle.klanten {
    height: calc(100% - 154px);
    position: relative;
    z-index: 1;
}

section.middle article.klanten {
    height: 100%;
    padding: 0;
    border: 0;
    position: relative;
}

section.middle article.klanten > div {
    max-width: 100%;
    height: 100%;
}

section.middle article.klanten > div div.centered {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

section.middle article.klanten > div h1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 9998;
}

.statistiekenmap {
    height: 100%;
}

.mapCanvas {
    width: 100%;
    height: 100%;
    z-index: 9996;
    /*padding-bottom: 55%;*/
}

/*  FRONTPAGE
    -------------------------------- */
.content__blocks_contain {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 30px 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    font-size: 0;
}

.content__block {
    flex: 1;
    padding: 30px;
    background: #f9f9f9;
    -webkit-border-radius: 10px;
}

.content__block h3 {
    margin: 0 0 15px;
    font: 700 28px / 38px 'redhat', sans-serif;
}

.content__block > a {
    width: 50%;
    max-width: 150px;
    display: inline-block;
    vertical-align: top;
    font: 400 18px / 28px 'redhat', sans-serif;
}

.content__block a img {
    width: calc(100% - 10px);
    height: auto;
    display: inline-block;
    vertical-align: top;
}

.content__block p {
    min-height: 240px;
}

.content__block_cta {
    margin-bottom: 20px;
}

.content__block_cta > a {
    font: 400 16px / 24px 'redhat', sans-serif;
}

.content__block_cta > a:hover {
    text-decoration: underline;
}

/*
 * Video ads
 */

.taggle-video-ads__center {
    width: 100%;
    margin: 0 auto;
    max-width: 1280px;
    padding: 70px 30px;
    text-align: left;
    font-size: 0;
    position: relative;
    z-index: 11;
}

.taggle-video-ads__center[data-width="full"] {
    max-width: 1280px;
}

.taggle-video-ads__center[data-width="full"] h2 {
    margin: 0 0 10px;
    color: #000;
    font: 700 28px / 32px 'redhat', sans-serif;
}

.taggle-video-ads[data-block="introduction"] {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 110px 0 15px 0;
    background: rgb(15,77,93);
    background: linear-gradient(120deg, rgba(15,77,93,1) 0%, rgba(23,101,121,1) 100%);
    position: relative;
    overflow: hidden;
}

.taggle-video-ads[data-block="introduction"] .taggle-video-ads__center {
    padding-bottom: 0;
}

.taggle-video-ads[data-block="optimized"] {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.taggle-video-ads[data-block="automatic"] {
    background: #ffffff;
}

.taggle-video-ads {
    position: relative;
}

.taggle-video-ads h1 {
    margin: 0;
    padding: 0 0 0 0;
    color: #fff;
    font: 700 42px / 48px 'redhat', sans-serif;
    border: 0;
}

.taggle-video-ads h2 {
    margin: 20px 0 50px;
    padding: 0;
    font: 400 22px / 30px 'redhat', sans-serif;
    color: #fff;
    border: 0;
}

.taggle-video-ads__introduction_intro,
.taggle-video-ads__introduction_video {
    width: 45%;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}

.taggle-video-ads__introduction_intro {
    text-align: left;
    padding-left: 0;
    vertical-align: top;
}

.taggle-video-ads__introduction_intro h1 {
    position: relative;
}

.taggle-video-ads[data-block="introduction"]:after {
    content: "";
    width: calc(100% + 20px);
    height: 80px;
    background: #f9f9f9;
    position: absolute;
    bottom: -40px;
    left: -10px;
    z-index: 10;
    transform: rotate(-1deg);
    transform-origin: center;
}

.taggle-video-ads[data-block="introduction"] h2 {
    margin-bottom: 15px;
}

.taggle-video-ads[data-block="optimized"] h2 {
    padding-bottom: 12px;
    font-weight: 700;
    position: relative;
}

.taggle-video-ads[data-block="optimized"] h2:after {
    content: "";
    width: 100px;
    height: 3px;
    background: #13596b;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-border-radius: 10px;
}

.taggle-video-ads__introduction_intro a {
    height: auto;
    margin-top: 20px;
    padding: 10px 25px;
    background: #df2227;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, .3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.taggle-video-ads__introduction_intro a:hover {
    background-color: #df474b;
}

.taggle-video-ads__introduction_video {
    width: 55%;
    margin: 50px 0 0 0;
    padding-left: 50px;
}

.taggle-video-ads__introduction_video > div {
    display: flex;
    gap: 20px;
    padding: 0 0 10px;
}

.taggle-video-ads__introduction_video_contain {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 13px rgba(0, 0, 0, .1);
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 13px rgba(0, 0, 0, .1);
    -webkit-border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    
}

.taggle-video-ads__introduction_video_contain:hover img {
    opacity: .8;
    -webkit-transition: ease opacity 200ms;
    transition: ease opacity 200ms;
}

.taggle-video-ads__introduction_video_contain:hover video {
    /*display: inline-block;*/
}

.taggle-video-ads__introduction_video_contain:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: url('../img/icons/icon-play.svg') no-repeat center / 30px;
}

.taggle-video-ads__introduction_video_contain:hover:after {
    /*display: none;*/
}

.taggle-video-ads__introduction_video_contain img {
    width: 150px;
    height: auto;
    display: inline-block;
    vertical-align: top;
}

.taggle-video-ads video {
    width: 200px;
    height: 355px;
    display: none;
    vertical-align: top;
    -webkit-border-radius: 10px;
}

.taggle-video-ads__video video {
    width: 100%;
    max-width: 50%;
    height: auto;
    vertical-align: top;
    -webkit-border-radius: 10px;
}

.taggle-video-ads__video .slbContentOuter {
    text-align: center;
}

.taggle-video-ads .videos video:last-of-type {
    margin-right: 0;
}

.taggle-video-ads__main_content {
    width: 70%;
    display: inline-block;
    vertical-align: top;
}

.taggle-video-ads__sidebar {
    width: 30%;
    margin-top: 30px;
    display: inline-block;
    vertical-align: top;
}

.taggle-video-ads__optimized_icons,
.taggle-video-ads__optimized_content {
    width: 35%;
    display: inline-block;
    vertical-align: middle;
}

.taggle-video-ads__optimized_content {
    width: 65%;
    padding: 50px 30px 50px 30px;
    text-align: left;
}

.taggle-video-ads__optimized_icons img {
    width: 100%;
    height: 240px;
    margin: 0 20px 0 0;
    object-fit: cover;
    -webkit-border-radius: 100px 30px 100px 30px;
}

.taggle-video-ads__optimized_icons img:last-of-type {
    margin-right: 0;
}

.taggle-video-ads__automatic_intro,
.taggle-video-ads__automatic_usp {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.taggle-video-ads[data-block="automatic"] ul {
    width: 100%;
    margin-top: 30px;
    display: inline-block;
    vertical-align: middle;
}

.taggle-video-ads[data-block="automatic"] ul li {
    width: calc(50% - 20px);
    min-height: 250px;
    margin: 20px 20px 0 0;
    padding: 0 25px 25px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    background: #f9f9f9;
    border-bottom: 2px solid #eee;
    -webkit-border-radius: 10px;
}

.taggle-video-ads[data-block="automatic"] ul li span {
    width: 100%;
    height: 150px;
    display: inline-block;
    vertical-align: top;
    background: no-repeat center / 80px;
}

.taggle-video-ads[data-block="automatic"] ul li[data-icon=automatic] span {
    background-image: url('../img/icons/icon-usp-automatic.svg');
}

.taggle-video-ads[data-block="automatic"] ul li[data-icon=catalog] span {
    background-image: url('../img/icons/icon-usp-catalog.svg');
}

.taggle-video-ads[data-block="automatic"] ul li[data-icon=campaign] span {
    background-image: url('../img/icons/icon-usp-campaign.svg');
}

.taggle-video-ads[data-block="automatic"] ul li[data-icon=stats] span {
    background-image: url('../img/icons/icon-usp-stats.svg');
}

.taggle-video-ads[data-block="automatic"] ul li:nth-of-type(4n+4) {
    margin-right: 0;    
}

.taggle-video-ads__contain {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.taggle-video-ads__contain img {
    width: calc(100% - 500px);
    display: inline-block;
    vertical-align: middle;
}

.video-advertenties .taggle-video-ads__center {
    max-width: 1280px;
    font-size: 0;
}

.video-advertenties [data-block="optimized"] .taggle-video-ads__center {
    padding: 0 30px 0 0;
    
}

.video-advertenties [data-block="optimized"] { 
    -webkit-border-radius: 10px 10px 100px 10px;
}

.video-advertenties [data-block="introduction"] .taggle-video-ads__center {
    padding-top: 0;
}

.video-advertenties .taggle-video-ads__introduction_intro {
    width: 100%;
    padding: 0 40px;
}

.video-advertenties .taggle-video-ads__introduction_video {
    width: 100%; 
    height: 350px;
    background: url('../img/video-ads-arrow.png') no-repeat 30px 80px / 350px;
}

.video-advertenties .taggle-video-ads__introduction_video > div {
    justify-content: flex-end;
}

.video-advertenties .taggle-video-ads[data-block="introduction"]:after {
    height: 350px;
}

.taggle-video-ads__contain p {
    font-size: 16px;
    line-height: 26px;
}

.taggle-video-ads__contain img {
    width: 100%;
    max-width: 340px;
    margin: 0 0 20px 40px;
    float: right;
    -webkit-border-radius: 100px 30px 100px 30px
}

[data-block="advice"] .taggle-video-ads__center {
    padding-top: 0;
    text-align: left;
}

[data-block="advice"].cloned {
    max-width: 384px;
    position: fixed;
    top: 0;
    display: none; 
}

[data-block="advice"] form {
    max-width: 768px;
    margin: 0 auto;
    padding: 30px;
    background: #f9f9f9;
    -webkit-border-radius: 10px;
}

[data-block="advice"] form h2 {
    font-size: 20px !important;
    line-height: 24px !important;
}

[data-block="advice"] form p {
    font-size: 14px;
    line-height: 20px;
}

[data-block="advice"] form img {
    max-width: 160px;
    margin-bottom: 20px;
    -webkit-border-radius: 300px; 
    border-radius: 300px; 
}

.taggle-video-ads__introduction_intro h1 > span.vms__highlight_carousel {
    max-width: unset;
    margin: 10px 0 0;
    padding: 5px 10px;
    --count: 8; 
    --duration: 9s;
    background-color: #fff;
    display: inline-grid;
    grid-auto-flow: dense;
    position: relative;
    white-space: nowrap;
    text-align: center;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}

.vms__highlight_carousel > span {
    margin: 0;
    grid-area: 1 / 1;
    opacity: 0;
    animation: vms-fade var(--duration) linear infinite;
    will-change: opacity;
}

.vms__highlight_carousel > span > img {
    max-width: 240px;
    vertical-align: top;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}

.vms__highlight_carousel > span:nth-child(1){ animation-delay: calc(-0 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(2){ animation-delay: calc(-1 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(3){ animation-delay: calc(-2 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(4){ animation-delay: calc(-3 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(5){ animation-delay: calc(-4 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(6){ animation-delay: calc(-5 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(7){ animation-delay: calc(-6 * (var(--duration) / var(--count))); }
.vms__highlight_carousel > span:nth-child(8){ animation-delay: calc(-7 * (var(--duration) / var(--count))); }

@keyframes vms-fade {
    0%, 8%   { opacity: 0; }
    12%, 26% { opacity: 1; }
    30%,100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vms__highlight_carousel > span{ animation: none; opacity: 0; }
    .vms__highlight_carousel > span:first-child{ opacity: 1; }
}

/*  FRONTPAGE HERO
    Losstaand van [data-block="introduction"], die door
    /producten/video-advertenties gebruikt wordt.
    -------------------------------- */
.taggle-video-ads[data-block="hero"] {
    width: 100%;
    min-height: 70vh;
    padding: 140px 0 110px;
    display: flex;
    align-items: center;
    background: #0a0c0e;
    position: relative;
    overflow: hidden;
}

/* achtergrondfoto - ontkleurd en gedimd */
/* driftende wand van eigen trailers als achtergrond */
.hero__wall {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

/* sfeervideo als hero-achtergrond.
   .hero__wall staat er bewust bij: de oude regel
   '.taggle-video-ads video { display: none }' is specifieker dan
   .hero__video alleen en verborg de video op de homepage. */
.hero__wall .hero__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}

/* bij 'minder beweging' blijft de video staan maar wordt hij stilgezet
   (zie effects.js); zo blijft de hero er hetzelfde uitzien */
.hero__wall {
    background: #0d1014;
}

.hero__wall_inner {
    width: 150%;
    height: 190%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    gap: 16px;
    opacity: .98;
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
    transform: translate(-50%, -50%) rotate(-10deg);
    will-change: transform;
}

.hero__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-animation: hero-drift 70s linear infinite;
    animation: hero-drift 70s linear infinite;
}

.hero__col[data-col="1"] { -webkit-animation-duration: 95s; animation-duration: 95s; -webkit-animation-direction: reverse; animation-direction: reverse; }
.hero__col[data-col="2"] { -webkit-animation-duration: 80s; animation-duration: 80s; }
.hero__col[data-col="3"] { -webkit-animation-duration: 110s; animation-duration: 110s; -webkit-animation-direction: reverse; animation-direction: reverse; }
.hero__col[data-col="4"] { -webkit-animation-duration: 88s; animation-duration: 88s; }
.hero__col[data-col="5"] { -webkit-animation-duration: 102s; animation-duration: 102s; -webkit-animation-direction: reverse; animation-direction: reverse; }
.hero__col[data-col="6"] { -webkit-animation-duration: 76s; animation-duration: 76s; }

.hero__col > span {
    width: 100%;
    padding-top: 177%;
    display: block;
    flex: 0 0 auto;
    background: #14181e no-repeat center center / cover;
    -webkit-border-radius: 14px;
    border-radius: 14px;
}

@-webkit-keyframes hero-drift {
    from { -webkit-transform: translateY(0); }
    to   { -webkit-transform: translateY(-50%); }
}

@keyframes hero-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {

    .hero__col {
        -webkit-animation: none;
        animation: none;
    }

}

/* op smalle schermen minder kolommen, anders worden de tegels postzegels */
@media only screen and (max-width: 1024px) {

    .hero__col[data-col="6"] {
        display: none;
    }

}

@media only screen and (max-width: 768px) {

    .hero__wall_inner {
        width: 190%;
        gap: 12px;
    }

    .hero__col {
        gap: 12px;
    }

    .hero__col[data-col="4"],
    .hero__col[data-col="5"] {
        display: none;
    }

}

/* scrim zodat tekst overal leesbaar blijft */
.taggle-video-ads[data-block="hero"]:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    /* donkerst in het midden, waar de kop staat */
    background:
        -webkit-radial-gradient(50% 45%, ellipse, rgba(10, 12, 14, .23) 0%, rgba(10, 12, 14, .12) 100%),
        -webkit-linear-gradient(top, rgba(10, 12, 14, .20) 0%, rgba(10, 12, 14, .25) 45%, rgba(10, 12, 14, .27) 100%);
    background:
        radial-gradient(ellipse 62% 58% at 50% 45%, rgba(10, 12, 14, .23) 0%, rgba(10, 12, 14, .12) 100%),
        linear-gradient(180deg, rgba(10, 12, 14, .20) 0%, rgba(10, 12, 14, .25) 45%, rgba(10, 12, 14, .27) 100%);
}

.taggle-video-ads[data-block="hero"] .taggle-video-ads__center {
    max-width: 1280px;
    padding: 0 30px;
    text-align: center;
    z-index: 3;
}

.taggle-video-ads[data-block="hero"] .taggle-video-ads__introduction_intro {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}

.taggle-video-ads[data-block="hero"] h1 {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    color: #fff;
    font-family: 'redhat', sans-serif;
    font-weight: 700;
    font-size: 66px;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.taggle-video-ads[data-block="hero"] h2 {
    max-width: 640px;
    margin: 30px auto 0;
    padding: 0;
    color: rgba(255, 255, 255, .70);
    font: 400 19px / 28px 'redhat', sans-serif;
}

.taggle-video-ads[data-block="hero"] .taggle-video-ads__introduction_intro > a {
    height: auto;
    margin-top: 38px;
    padding: 16px 42px;
    background: #df2227;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font: 600 17px / 22px 'redhat', sans-serif;
    text-align: center;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-box-shadow: 0 14px 38px rgba(223, 71, 75, .45);
    box-shadow: 0 14px 38px rgba(223, 71, 75, .45);
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.taggle-video-ads[data-block="hero"] .taggle-video-ads__introduction_intro > a:hover {
    background-color: #df474b;
    text-decoration: none;
    -webkit-box-shadow: 0 14px 38px rgba(223, 71, 75, .45);
    box-shadow: 0 14px 38px rgba(223, 71, 75, .45);
}

@media only screen and (max-width: 1360px) {

    .taggle-video-ads[data-block="hero"] h1 {
        font-size: 60px;
    }

}

@media only screen and (max-width: 1024px) {

    .taggle-video-ads[data-block="hero"] {
        padding: 140px 0 60px;
    }

    .taggle-video-ads[data-block="hero"] h1 {
        font-size: 46px;
    }

}

@media only screen and (max-width: 768px) {

    .taggle-video-ads[data-block="hero"] {
        min-height: 0;
        padding: 120px 0 60px;
    }

    .taggle-video-ads[data-block="hero"] h1 {
        font-size: 34px;
        letter-spacing: -.02em;
    }

    .taggle-video-ads[data-block="hero"] h2 {
        margin-top: 22px;
        font-size: 17px;
        line-height: 25px;
    }

}

/*  PLATFORM BLOK - wat is taGGleAuto
    -------------------------------- */
.platform {
    width: 100%;
    background: #fff;
}

.platform__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 30px;
    text-align: center;
}

.platform__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.platform h2 {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    color: #10161c;
    font: 700 40px / 48px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.platform__intro {
    max-width: 720px;
    margin: 20px auto 0;
    color: #5f676f;
    font: 400 17px / 27px 'redhat', sans-serif;
}

.platform__grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
}

.platform__card {
    padding: 30px 28px 28px;
    display: block;
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}

.platform__card:hover {
    border-color: #d3d7dc;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 18px 40px 0 rgba(16, 22, 28, .08);
    box-shadow: 0 18px 40px 0 rgba(16, 22, 28, .08);
}

.platform__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    display: block;
    background: #f4f6f8 no-repeat center / 24px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.platform__icon[data-icon="automatic"] { background-image: url('../img/icons/icon-usp-automatic.svg'); }
.platform__icon[data-icon="campaign"]  { background-image: url('../img/icons/icon-usp-campaign.svg'); }
.platform__icon[data-icon="catalog"]   { background-image: url('../img/icons/icon-usp-catalog.svg'); }
.platform__icon[data-icon="facebook"]  { background-image: url('../img/icons/icon-facebook.svg'); }
.platform__icon[data-icon="instagram"] { background-image: url('../img/icons/icon-instagram.svg'); }
.platform__icon[data-icon="google"]    { background-image: url('../img/icons/icon-google-ads.svg'); }

.platform__card h3 {
    margin: 0 0 10px;
    padding: 0;
    color: #10161c;
    font: 700 20px / 26px 'redhat', sans-serif;
}

.platform__card p {
    margin: 0;
    color: #5f676f;
    font: 400 15px / 24px 'redhat', sans-serif;
}

.platform__more {
    margin-top: 18px;
    display: inline-block;
    color: #df2227;
    font: 400 15px / 20px 'redhat', sans-serif;
}

.platform__more:after {
    content: " \2192";
}

/*  BEREIK BLOK - waar de auto's verschijnen
    -------------------------------- */
.reach {
    width: 100%;
    background: #fff;
}

.reach__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 70px;
    align-items: center;
}

.reach__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reach h2 {
    margin: 0 0 22px;
    padding: 0;
    color: #10161c;
    font: 700 40px / 48px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.reach__content p {
    margin: 0 0 18px;
    color: #5f676f;
    font: 400 17px / 28px 'redhat', sans-serif;
}

.reach__link {
    margin-top: 8px;
    display: inline-block;
    color: #df2227;
    font: 400 16px / 22px 'redhat', sans-serif;
}

.reach__link:after {
    content: " \2192";
}

.reach__panel {
    padding: 34px;
    background: #f7f8fa;
    border: 1px solid #e9ebee;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.reach__panel_title {
    margin: 0 0 6px;
    color: #10161c;
    font: 700 18px / 26px 'redhat', sans-serif;
}

.reach__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reach__list li {
    padding: 15px 0;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #e6e9ec;
}

.reach__list li:last-child {
    border-bottom: 0;
}

.reach__list strong {
    flex: 1 1 auto;
    color: #10161c;
    font: 600 16px / 22px 'redhat', sans-serif;
}

.reach__list em {
    padding: 4px 11px;
    background: #fff;
    border: 1px solid #e2e5e9;
    color: #79818a;
    font: 500 12px / 16px 'redhat', sans-serif;
    font-style: normal;
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.reach__check {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: #df2227;
    position: relative;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.reach__check:after {
    content: "";
    width: 5px;
    height: 9px;
    position: absolute;
    top: 5px;
    left: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.reach__panel_note {
    margin: 18px 0 0;
    color: #79818a;
    font: 400 14px / 21px 'redhat', sans-serif;
}

@media only screen and (max-width: 1024px) {

    .reach__center {
        padding: 70px 30px;
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .reach h2 {
        font-size: 32px;
        line-height: 40px;
    }

}

@media only screen and (max-width: 768px) {

    .reach__center {
        padding: 60px 25px;
    }

    .reach h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .reach__panel {
        padding: 26px 22px;
    }

}

/*  FEATURE-BLOK - tekst met beeld/paneel ernaast
    -------------------------------- */
.feature {
    width: 100%;
    background: #fff;
}

.feature[data-tone="grey"] {
    background: #f7f8fa;
}

.feature[data-tone="dark"] {
    background: #0d1014;
}

.feature__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.feature[data-flip="true"] .feature__visual {
    order: -1;
}

.feature__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.feature h2 {
    margin: 0 0 20px;
    padding: 0;
    color: #10161c;
    font: 700 34px / 42px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.feature__content p {
    margin: 0 0 18px;
    color: #4c545c;
    font: 400 17px / 29px 'redhat', sans-serif;
}

.feature__content p:last-child {
    margin-bottom: 0;
}

.feature__content ul {
    margin: 0 0 18px;
    padding: 0;
}

.feature__content ul li {
    margin-bottom: 11px;
    padding-left: 30px;
    position: relative;
    list-style-type: none;
    color: #4c545c;
    font: 400 17px / 27px 'redhat', sans-serif;
}

.feature__content ul li:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 10px;
    left: 6px;
    background: #df2227;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.feature__content p a,
.feature__content li a,
.usps__card p a {
    color: #df2227;
    font-weight: 600;
    -webkit-transition: color 200ms;
    transition: color 200ms;
}

.feature__content p a:hover,
.feature__content li a:hover,
.usps__card p a:hover {
    color: #c01d22;
    text-decoration: underline;
}

.feature__link {
    margin-top: 6px;
    display: inline-block;
    color: #df2227;
    font: 600 16px / 22px 'redhat', sans-serif;
}

.feature__link:after {
    content: " \2192";
}

.feature[data-tone="dark"] h2 {
    color: #fff;
}

.feature[data-tone="dark"] .feature__content p,
.feature[data-tone="dark"] .feature__content ul li {
    color: rgba(255, 255, 255, .62);
}

/* .feature__content wordt meegenomen, anders wint de algemene
   paragraaf-regel hierboven van het labeltje en de link */
.feature[data-tone="dark"] .feature__content .feature__eyebrow,
.feature[data-tone="dark"] .feature__content .feature__link,
.feature[data-tone="dark"] .feature__eyebrow,
.feature[data-tone="dark"] .feature__link {
    color: #ff5c60;
}

/* beeld of paneel in de rechterkolom */
.feature__visual img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.feature__panel {
    padding: 34px;
    background: #f7f8fa;
    border: 1px solid #e9ebee;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.feature[data-tone="grey"] .feature__panel {
    background: #fff;
}

.feature[data-tone="dark"] .feature__panel {
    background: #14181e;
    border-color: #232830;
}

.feature__panel_title {
    margin: 0 0 6px;
    color: #10161c;
    font: 700 18px / 26px 'redhat', sans-serif;
}

.feature[data-tone="dark"] .feature__panel_title {
    color: #fff;
}

.feature__rows {
    margin: 0;
    padding: 0;
}

.feature__rows li {
    padding: 15px 0;
    display: flex;
    align-items: center;
    gap: 13px;
    list-style-type: none;
    border-bottom: 1px solid #e6e9ec;
    color: #10161c;
    font: 600 16px / 22px 'redhat', sans-serif;
}

.feature__rows li:last-child {
    border-bottom: 0;
}

.feature__rows li:before {
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    position: static;
    background: #df2227 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 11'/%3E%3C/svg%3E") no-repeat center / 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.feature__rows li em {
    margin-left: auto;
    padding: 4px 11px;
    background: #fff;
    border: 1px solid #e2e5e9;
    color: #79818a;
    font: 500 12px / 16px 'redhat', sans-serif;
    font-style: normal;
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.feature[data-tone="dark"] .feature__rows li {
    border-bottom-color: #232830;
    color: #fff;
}

.feature[data-tone="dark"] .feature__rows li em {
    background: #0f1318;
    border-color: #2a303a;
    color: rgba(255, 255, 255, .55);
}

.feature__frame {
    width: 100%;
    height: 420px;
    display: block;
    border: 0;
    background: #fff;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

/* video mag niet op zijn eigen pixelformaat uit de kolom lopen */
/* videolink met poster: opent de speler in een lightbox */
.feature__videolink {
    position: relative;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    overflow: hidden;
}

.feature__videolink img {
    width: 100%;
    height: auto;
    display: block;
}

.feature__videolink a {
    display: block;
    position: relative;
}

.feature__video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.feature__visual .carousel {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    overflow: hidden;
}

/* smalle bronbeelden niet groter tonen dan ze zijn; opschalen boven
   hun eigen breedte (320px) maakt ze onscherp */
.feature__visual .carousel[data-shape="portrait"] {
    max-width: 300px;
}

.feature__visual .carousel[data-shape="compact"] {
    max-width: 320px;
}

.feature__visual .carousel img {
    width: 100%;
    height: auto;
    display: block;
}

/* pijlen: hoorden bij de oude opmaak en misten in het nieuwe feature-blok */
.feature__visual .carousel button.slick-arrow {
    width: 50px;
    height: 100%;
    margin: auto;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 0;
    z-index: 5;
    cursor: pointer;
    outline: none;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
}

.feature__visual .carousel button.slick-arrow:hover {
    opacity: .8;
}

/* op de smalle varianten nemen 50px brede pijlen te veel van het
   beeld in beslag */
.feature__visual .carousel[data-shape] button.slick-arrow {
    width: 38px;
}

.feature__visual .carousel button.slick-arrow.slick-disabled {
    display: none !important;
}

.feature__visual .carousel button.slick-prev {
    left: 0;
    right: auto;
    background: url('../img/icon-arrow-left.svg') no-repeat 50% / 26px, -webkit-linear-gradient(left, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 100%);
    background: url('../img/icon-arrow-left.svg') no-repeat 50% / 26px, linear-gradient(to right, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 100%);
}

.feature__visual .carousel button.slick-next {
    right: 0;
    left: auto;
    background: url('../img/icon-arrow-right.svg') no-repeat 50% / 26px, -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%);
    background: url('../img/icon-arrow-right.svg') no-repeat 50% / 26px, linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%);
}

/*  USP-TEGELS
    -------------------------------- */
.usps {
    width: 100%;
    background: #f7f8fa;
}

.usps[data-tone="white"] {
    background: #fff;
}

.usps__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    text-align: center;
}

.usps__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.usps h2 {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    color: #10161c;
    font: 700 34px / 42px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.usps__intro {
    max-width: 700px;
    margin: 18px auto 0;
    color: #5f676f;
    font: 400 17px / 27px 'redhat', sans-serif;
}

.usps__grid {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
}

.usps__grid[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usps__grid[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usps__card {
    padding: 30px 26px;
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 16px;
    border-radius: 16px;
}

.usps[data-tone="white"] .usps__card {
    background: #f7f8fa;
}

.usps__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    display: block;
    background: #f1f3f5 no-repeat center / 24px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.usps[data-tone="white"] .usps__icon {
    background-color: #fff;
}

.usps__icon[data-icon="automatic"] { background-image: url('../img/icons/icon-usp-automatic.svg'); }
.usps__icon[data-icon="campaign"]  { background-image: url('../img/icons/icon-usp-campaign.svg'); }
.usps__icon[data-icon="catalog"]   { background-image: url('../img/icons/icon-usp-catalog.svg'); }
.usps__icon[data-icon="stats"]     { background-image: url('../img/icons/icon-usp-stats.svg'); }
.usps__icon[data-icon="play"]      { background-image: url('../img/icons/icon-play.svg'); }
.usps__icon[data-icon="whatsapp"]  { background-image: url('../img/icons/icon-whatsapp.svg'); }
.usps__icon[data-icon="facebook"]  { background-image: url('../img/icons/icon-facebook.svg'); }
.usps__icon[data-icon="instagram"] { background-image: url('../img/icons/icon-instagram.svg'); }
.usps__icon[data-icon="google"]    { background-image: url('../img/icons/icon-google-ads.svg'); }

.usps__card h3 {
    margin: 0 0 10px;
    padding: 0;
    color: #10161c;
    font: 700 19px / 26px 'redhat', sans-serif;
}

.usps__card p {
    margin: 0;
    color: #5f676f;
    font: 400 15px / 24px 'redhat', sans-serif;
}
/* codeblok in een usp-kaart */
.usps__card .docs__code {
    margin-top: 18px;
}


@media only screen and (max-width: 1024px) {

    .feature__center {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 70px 30px;
    }

    .feature[data-flip="true"] .feature__visual {
        order: 0;
    }

    .feature h2,
    .usps h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .usps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usps__grid[data-cols="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media only screen and (max-width: 768px) {

    .feature__center,
    .usps__center {
        padding: 55px 25px;
    }

    .feature h2,
    .usps h2 {
        font-size: 25px;
        line-height: 33px;
    }

    .feature__content p,
    .feature__content ul li {
        font-size: 16px;
        line-height: 27px;
    }

    .usps__grid,
    .usps__grid[data-cols="3"] {
        margin-top: 36px;
        grid-template-columns: minmax(0, 1fr);
    }

    .feature__panel {
        padding: 26px 22px;
    }

}

/* bestelformulieren staan nu over de volle breedte */
section.middle article.tekstmodule div div.tekstmodule-right--wide {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    float: none;
    display: block;
    background: none;
    border: 0;
}

section.middle article .tekstmodule-right--wide .customVideoContainer {
    margin-top: 30px;
}

/*  CONTACTPAGINA
    -------------------------------- */
.contactpage {
    width: 100%;
    background: #fff;
}

.contactpage__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 60px;
    align-items: start;
}

.contactpage__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.contactpage h2 {
    margin: 0;
    padding: 0;
    color: #10161c;
    font: 700 34px / 42px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.contactpage__text {
    max-width: 440px;
    margin: 18px 0 0;
    color: #4c545c;
    font: 400 17px / 28px 'redhat', sans-serif;
}

.contactpage__list {
    margin: 34px 0 0;
    padding: 0;
}

.contactpage__list li {
    margin-bottom: 22px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    list-style-type: none;
}

.contactpage__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: #f7f8fa no-repeat center / 21px;
    border: 1px solid #e9ebee;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.contactpage__icon[data-icon="phone"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df2227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
.contactpage__icon[data-icon="mail"]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df2227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m3 6 9 6 9-6'/%3E%3C/svg%3E"); }
.contactpage__icon[data-icon="pin"]   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df2227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

.contactpage__row {
    display: block;
}

.contactpage__row strong {
    display: block;
    color: #10161c;
    font: 700 15px / 22px 'redhat', sans-serif;
}

.contactpage__row a,
.contactpage__row > span {
    display: block;
    color: #4c545c;
    font: 400 16px / 25px 'redhat', sans-serif;
}

.contactpage__row a {
    color: #df2227;
    font-weight: 600;
}

.contactpage__row a:hover {
    text-decoration: underline;
}

.contactpage__company {
    margin: 30px 0 0;
    padding-top: 22px;
    border-top: 1px solid #e9ebee;
    color: #79818a;
    font: 400 14px / 22px 'redhat', sans-serif;
}

.contactpage__form {
    padding: 34px;
    background: #f7f8fa;
    border: 1px solid #e9ebee;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.contactpage__field {
    margin-bottom: 16px;
}

.contactpage__field label {
    margin-bottom: 7px;
    display: block;
    color: #4c545c;
    font: 500 14px / 20px 'redhat', sans-serif;
}

.contactpage__form input[type="text"],
.contactpage__form textarea {
    width: 100%;
    height: auto;
    padding: 13px 16px;
    display: block;
    background: #fff;
    border: 1px solid #e2e5e9;
    color: #10161c;
    font: 400 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: border-color 200ms;
    transition: border-color 200ms;
}

.contactpage__form textarea {
    min-height: 110px;
    resize: vertical;
}

.contactpage__form input[type="text"]:focus,
.contactpage__form textarea:focus {
    border-color: #df2227;
    outline: 0;
}

.contactpage__form input[type="submit"] {
    width: 100%;
    max-width: none;
    margin-top: 10px;
    padding: 15px 30px;
    background: #df2227;
    border: 0;
    color: #fff;
    font: 600 16px / 22px 'redhat', sans-serif;
    cursor: pointer;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

.contactpage__form input[type="submit"]:hover {
    background: #df474b;
}

.contactpage__note {
    margin: 14px 0 0;
    color: #79818a;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.contactpage__form label.error {
    margin-top: 6px;
    display: block;
    color: #d93025;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.contactpage__form div.melding p {
    color: #4c545c;
    font: 400 17px / 28px 'redhat', sans-serif;
}

.contactpage__map {
    width: 100%;
    line-height: 0;
}

.contactpage__map iframe {
    width: 100%;
    height: 420px;
    display: block;
    border: 0;
    -webkit-filter: grayscale(35%);
    filter: grayscale(35%);
}

/*  INLOGGEN
    -------------------------------- */
.login {
    width: 100%;
    background: #f7f8fa;
}

.login__center {
    max-width: 520px;
    margin: 0 auto;
    padding: 80px 30px 100px;
}

.login__card {
    padding: 40px;
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    -webkit-box-shadow: 0 18px 40px 0 rgba(16, 22, 28, .06);
    box-shadow: 0 18px 40px 0 rgba(16, 22, 28, .06);
}

.login h2 {
    margin: 0;
    padding: 0;
    color: #10161c;
    font: 700 28px / 36px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.login__text {
    margin: 12px 0 28px;
    color: #5f676f;
    font: 400 16px / 25px 'redhat', sans-serif;
}

.login__error {
    margin: 0 0 22px;
    padding: 13px 16px;
    background: rgba(217, 48, 37, .07);
    border-left: 3px solid #d93025;
    color: #b0261c;
    font: 400 15px / 23px 'redhat', sans-serif;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.login__field {
    margin-bottom: 18px;
}

.login__field label {
    margin-bottom: 7px;
    display: block;
    color: #4c545c;
    font: 500 14px / 20px 'redhat', sans-serif;
}

.login form.inloggen input[type="email"],
.login form.inloggen input[type="password"] {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 13px 16px;
    display: block;
    background: #f7f8fa;
    border: 1px solid #e2e5e9;
    color: #10161c;
    font: 400 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: border-color 200ms;
    transition: border-color 200ms;
}

.login form.inloggen input[type="email"]:focus,
.login form.inloggen input[type="password"]:focus {
    background: #fff;
    border-color: #df2227;
    outline: 0;
}

.login__row {
    margin: 4px 0 24px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.login__remember {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4c545c;
    font: 400 15px / 22px 'redhat', sans-serif;
    cursor: pointer;
}

.login__remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #df2227;
    cursor: pointer;
}

.login a.wachtwoordvergeten {
    color: #df2227;
    font: 600 15px / 22px 'redhat', sans-serif;
}

.login a.wachtwoordvergeten:hover {
    text-decoration: underline;
}

.login form.inloggen input[type="submit"] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 30px;
    background: #df2227;
    border: 0;
    color: #fff;
    font: 600 16px / 22px 'redhat', sans-serif;
    cursor: pointer;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

.login form.inloggen input[type="submit"]:hover {
    background: #df474b;
}

/* kale variant: alleen het formulier, geen header en footer.
   De kaart staat dan midden in het scherm. */
body.bare {
    background: #f7f8fa;
}

body.bare .login {
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.bare .login__center {
    width: 100%;
    padding: 40px 30px;
}

/* terug-knop bovenin de kaart */
.login__back {
    margin: 0 0 26px;
    padding: 10px 20px 10px 16px;
    display: -webkit-inline-box;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #f7f8fa;
    border: 1px solid #e2e5e9;
    color: #4c545c;
    font: 600 14px / 20px 'redhat', sans-serif;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms, border-color 200ms, color 200ms;
    transition: background 200ms, border-color 200ms, color 200ms;
}

.login__back::before {
    content: '';
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform 200ms;
    transition: transform 200ms;
}

.login__back:hover {
    background: #10161c;
    border-color: #10161c;
    color: #fff;
}

.login__back:hover::before {
    -webkit-transform: translateX(-3px) rotate(45deg);
    transform: translateX(-3px) rotate(45deg);
}

@media only screen and (max-width: 1024px) {

    .contactpage__center {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .contactpage h2 {
        font-size: 28px;
        line-height: 36px;
    }

}

@media only screen and (max-width: 768px) {

    .contactpage__center {
        padding: 60px 25px;
    }

    .contactpage__form {
        padding: 26px 22px;
    }

    .contactpage__map iframe {
        height: 320px;
    }

    .login__center {
        padding: 55px 25px 70px;
    }

    .login__card {
        padding: 28px 24px;
    }

    .login__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

/*  ADVIESBLOK - uniforme CTA op subpaginas
    -------------------------------- */
.advice {
    width: 100%;
    background: #f7f8fa;
    scroll-margin-top: 90px;
}

.advice__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 60px;
    align-items: start;
}

.advice__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.advice h2 {
    max-width: 480px;
    margin: 0;
    padding: 0;
    color: #10161c;
    font: 700 34px / 42px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.advice__text {
    max-width: 470px;
    margin: 20px 0 0;
    color: #4c545c;
    font: 400 17px / 28px 'redhat', sans-serif;
}

.advice__contact {
    margin: 24px 0 0;
    color: #5f676f;
    font: 400 16px / 24px 'redhat', sans-serif;
}

.advice__contact a {
    color: #df2227;
    font-weight: 600;
}

.advice__form {
    padding: 34px;
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.advice__field {
    margin-bottom: 16px;
}

.advice__field label {
    margin-bottom: 7px;
    display: block;
    color: #4c545c;
    font: 500 14px / 20px 'redhat', sans-serif;
}

.advice__form input[type="text"],
.advice__form textarea {
    width: 100%;
    height: auto;
    padding: 13px 16px;
    display: block;
    background: #f7f8fa;
    border: 1px solid #e2e5e9;
    color: #10161c;
    font: 400 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: border-color 200ms;
    transition: border-color 200ms;
}

.advice__form textarea {
    min-height: 92px;
    resize: vertical;
}

.advice__form input[type="text"]:focus,
.advice__form textarea:focus {
    background: #fff;
    border-color: #df2227;
    outline: 0;
}

.advice__form input[type="submit"] {
    width: 100%;
    max-width: none;
    margin-top: 10px;
    padding: 15px 30px;
    background: #df2227;
    border: 0;
    color: #fff;
    font: 600 16px / 22px 'redhat', sans-serif;
    cursor: pointer;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

.advice__form input[type="submit"]:hover {
    background: #df474b;
}

.advice__note {
    margin: 14px 0 0;
    color: #79818a;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.advice__form label.error {
    margin-top: 6px;
    display: block;
    color: #d93025;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.advice__form div.melding h2 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 32px;
}

.advice__form div.melding p {
    color: #4c545c;
    font: 400 17px / 28px 'redhat', sans-serif;
}

.cta-block__note-scope {
    max-width: 470px;
    margin: 22px 0 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid #df2227;
    color: rgba(255, 255, 255, .55);
    font: 400 14px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.cta-block__text strong {
    color: #fff;
    font-weight: 600;
}

@media only screen and (max-width: 1024px) {

    .advice__center {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .advice h2 {
        font-size: 28px;
        line-height: 36px;
    }

}

@media only screen and (max-width: 768px) {

    .advice__center {
        padding: 60px 25px;
    }

    .advice h2 {
        font-size: 25px;
        line-height: 33px;
    }

    .advice__form {
        padding: 26px 22px;
    }

}

/*  CTA-BLOK boven de footer
    -------------------------------- */
.cta-block {
    width: 100%;
    background: #0d1014;
    scroll-margin-top: 90px;
}

.cta-block__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 60px;
    align-items: center;
}

.cta-block__eyebrow {
    margin: 0 0 14px;
    color: #ff5c60;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cta-block h2 {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 38px / 46px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.cta-block__text {
    max-width: 460px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .62);
    font: 400 17px / 28px 'redhat', sans-serif;
}

.cta-block__list {
    margin: 26px 0 0;
    padding: 0;
}

.cta-block__list li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    list-style-type: none;
    color: rgba(255, 255, 255, .62);
    font: 400 16px / 25px 'redhat', sans-serif;
}

.cta-block__list li:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 9px;
    left: 6px;
    background: #df2227;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.cta-block__form {
    padding: 34px;
    background: #14181e;
    border: 1px solid #232830;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.cta-block__field {
    margin-bottom: 16px;
}

.cta-block__field label {
    margin-bottom: 7px;
    display: block;
    color: rgba(255, 255, 255, .70);
    font: 500 14px / 20px 'redhat', sans-serif;
}

.cta-block__form input[type="text"] {
    width: 100%;
    height: auto;
    padding: 13px 16px;
    display: block;
    background: #0f1318;
    border: 1px solid #2a303a;
    color: #fff;
    font: 400 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: border-color 200ms;
    transition: border-color 200ms;
}

.cta-block__form input[type="text"]:focus {
    border-color: #df2227;
    outline: 0;
}

.cta-block__form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    padding: 15px 30px;
    background: #df2227;
    border: 0;
    color: #fff;
    font: 600 16px / 22px 'redhat', sans-serif;
    cursor: pointer;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

.cta-block__form input[type="submit"]:hover {
    background: #df474b;
}

.cta-block__note {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .40);
    font: 400 13px / 19px 'redhat', sans-serif;
}

.cta-block__form label.error {
    margin-top: 6px;
    display: block;
    color: #ff5c60;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.cta-block__form .melding p {
    color: rgba(255, 255, 255, .80);
    font: 400 17px / 28px 'redhat', sans-serif;
}

@media only screen and (max-width: 1024px) {

    .cta-block__center {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .cta-block h2 {
        font-size: 30px;
        line-height: 38px;
    }

}

@media only screen and (max-width: 768px) {

    .cta-block__center {
        padding: 60px 25px;
    }

    .cta-block h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .cta-block__form {
        padding: 26px 22px;
    }

}

/*  SCROLL-REVEAL
    -------------------------------- */
.reveal {
    opacity: 0;
    -webkit-transform: translateY(26px);
    transform: translateY(26px);
    -webkit-transition: opacity 700ms cubic-bezier(.16, .84, .44, 1), -webkit-transform 700ms cubic-bezier(.16, .84, .44, 1);
    transition: opacity 700ms cubic-bezier(.16, .84, .44, 1), transform 700ms cubic-bezier(.16, .84, .44, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-transition: none;
        transition: none;
    }

}

/*  APPS BLOK - CarViewer en taGGle360
    -------------------------------- */
.apps {
    width: 100%;
    background: #f7f8fa;
}

.apps__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 30px;
    text-align: center;
}

.apps__eyebrow {
    margin: 0 0 14px;
    color: #df2227;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.apps h2 {
    margin: 0;
    padding: 0;
    color: #10161c;
    font: 700 40px / 48px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.apps__intro {
    max-width: 620px;
    margin: 18px auto 0;
    color: #5f676f;
    font: 400 17px / 27px 'redhat', sans-serif;
}

.apps__grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
}

.apps__card {
    padding: 36px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.apps__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 22px;
    display: block;
    background: #f4f6f8 no-repeat center / 26px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}

.apps__icon[data-icon="taggle360"],
.mega-menu__icon[data-icon="taggle360"] {
    background-color: transparent;
    background-image: url('../img/taggle360.webp');
    background-size: cover;
}

/* CarViewer-app heeft een eigen app-icoon, dat de tegel vult */
.apps__icon[data-icon="carviewer"],
.mega-menu__icon[data-icon="carviewer"] {
    background-color: transparent;
    background-image: url('../img/carviewer.webp');
    background-size: cover;
}

.apps__icon[data-icon="whatsapp"] { background-image: url('../img/icons/icon-whatsapp.svg'); }
.apps__icon[data-icon="play"]     { background-image: url('../img/icons/icon-play.svg'); }

.apps__card h3 {
    margin: 0 0 12px;
    padding: 0;
    color: #10161c;
    font: 700 24px / 32px 'redhat', sans-serif;
}

.apps__card > p {
    margin: 0;
    color: #5f676f;
    font: 400 15px / 25px 'redhat', sans-serif;
}

.apps__link {
    margin-top: 20px;
    display: inline-block;
    align-self: flex-start;
    color: #df2227;
    font: 400 15px / 20px 'redhat', sans-serif;
}

.apps__link:after {
    content: " \2192";
}

.apps__stores {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.apps__stores img {
    width: auto;
    height: 46px;
    display: block;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
}

.apps__stores a:hover img {
    opacity: .8;
}

@media only screen and (max-width: 1024px) {

    .apps h2 {
        font-size: 32px;
        line-height: 40px;
    }

}

@media only screen and (max-width: 768px) {

    .apps__center {
        padding: 70px 25px;
    }

    .apps h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .apps__grid {
        margin-top: 40px;
        grid-template-columns: minmax(0, 1fr);
    }

    .apps__card {
        padding: 28px 24px;
    }

}

/*  SHOWCASE BLOK - video en tekst
    -------------------------------- */
.showcase {
    width: 100%;
    background: #0d1014;
}

.showcase__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 30px;
    text-align: center;
}

.showcase h2 {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 40px / 48px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.showcase__intro {
    max-width: 660px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, .62);
    font: 400 17px / 27px 'redhat', sans-serif;
}

.showcase__pair {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
}

.showcase__card {
    padding: 34px;
    display: flex;
    flex-direction: column;
    background: #14181e;
    border: 1px solid #232830;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.showcase__tag {
    margin-bottom: 16px;
    padding: 5px 13px;
    display: inline-block;
    align-self: flex-start;
    background: rgba(223, 34, 39, .16);
    color: #ff5c60;
    font: 600 12px / 16px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.showcase__card h3 {
    margin: 0 0 12px;
    padding: 0;
    color: #fff;
    font: 700 24px / 30px 'redhat', sans-serif;
}

.showcase__card > p {
    margin: 0;
    color: rgba(255, 255, 255, .60);
    font: 400 15px / 24px 'redhat', sans-serif;
}

.showcase__link {
    margin-top: 24px;
    display: inline-block;
    align-self: flex-start;
    color: #ff5c60;
    font: 600 15px / 20px 'redhat', sans-serif;
}

.showcase__link:after {
    content: " \2192";
}

.showcase__link:hover {
    color: #ff8a8d;
}

/* mockups */
.showcase__mock {
    margin: 26px 0 4px;
    padding: 24px;
    background: #0f1318;
    border: 1px solid #202630;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

/* geluidsgolf van de voice-over */
.showcase__wave {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

.showcase__wave > span {
    flex: 1 1 0;
    min-height: 4px;
    display: block;
    background: -webkit-linear-gradient(top, #ff5c60 0%, #df2227 100%);
    background: linear-gradient(180deg, #ff5c60 0%, #df2227 100%);
    opacity: .85;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.showcase__caption {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase__caption_bar {
    flex: 1 1 auto;
    height: 8px;
    display: block;
    background: rgba(255, 255, 255, .13);
    -webkit-border-radius: 300px;
    border-radius: 300px;
    position: relative;
    overflow: hidden;
}

.showcase__caption_bar:after {
    content: "";
    width: 62%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #df2227;
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.showcase__caption_time {
    color: rgba(255, 255, 255, .45);
    font: 500 13px / 18px 'redhat', sans-serif;
}

/* gegenereerde omschrijving */
.showcase__mock--text {
    padding: 26px 24px;
}

.showcase__line {
    height: 9px;
    margin-bottom: 13px;
    display: block;
    background: rgba(255, 255, 255, .12);
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.showcase__line:last-child {
    margin-bottom: 0;
}

.showcase__line--mark {
    background: rgba(223, 34, 39, .55);
}

/* cijferstrook */
.showcase__stats {
    margin-top: 20px;
    padding: 6px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #14181e;
    border: 1px solid #232830;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}

.showcase__stat {
    padding: 34px 30px;
    text-align: left;
    border-left: 1px solid #232830;
}

.showcase__stat:first-child {
    border-left: 0;
}

.showcase__stat > strong {
    display: block;
    color: #fff;
    font: 700 38px / 44px 'redhat', sans-serif;
    letter-spacing: -.02em;
}

.showcase__stat > span {
    margin-top: 4px;
    display: block;
    color: rgba(255, 255, 255, .55);
    font: 400 15px / 22px 'redhat', sans-serif;
}

@media only screen and (max-width: 1024px) {

    .showcase h2 {
        font-size: 32px;
        line-height: 40px;
    }

    .showcase__stat > strong {
        font-size: 30px;
        line-height: 36px;
    }

}

@media only screen and (max-width: 768px) {

    .showcase__center {
        padding: 70px 25px;
    }

    .showcase h2 {
        font-size: 27px;
        line-height: 34px;
    }

    .showcase__pair {
        margin-top: 40px;
        grid-template-columns: minmax(0, 1fr);
    }

    .showcase__stats {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .showcase__stat {
        padding: 26px 24px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .28);
    }

    .showcase__stat:first-child {
        border-top: 0;
    }

}

/*  DOCUMENTATIE - implementatie- en supportpaginas
    -------------------------------- */
.docs {
    width: 100%;
    background: #fff;
}

.docs__center {
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 30px 100px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}

/* zijnavigatie die meeloopt met de scroll
   (width/text-align overrulen de generieke nav-regels van het hoofdmenu) */
.docs__nav {
    width: 100%;
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
    text-align: left;
}

.docs__nav_title {
    margin: 0 0 14px;
    color: #10161c;
    font: 600 13px / 18px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.docs__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #e7e9ec;
}

.docs__nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs__nav a {
    margin-left: -1px;
    padding: 8px 0 8px 16px;
    display: block;
    border-left: 2px solid transparent;
    color: #5f676f;
    font: 400 15px / 22px 'redhat', sans-serif;
    -webkit-transition: color 200ms, border-color 200ms;
    transition: color 200ms, border-color 200ms;
}

.docs__nav a:hover,
.docs__nav a.is-active {
    border-left-color: #df2227;
    color: #df2227;
}

.docs__nav a.is-active {
    font-weight: 600;
}

/* inhoudsblokken */
.docs__block {
    scroll-margin-top: 100px;
}

.docs__block + .docs__block {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid #eef0f2;
}

.docs__eyebrow {
    margin: 0 0 12px;
    color: #df2227;
    font: 600 13px / 18px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.docs h2 {
    margin: 0 0 16px;
    padding: 0;
    color: #10161c;
    font: 700 30px / 38px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.docs__content > .docs__block > p {
    max-width: 720px;
    margin: 0 0 14px;
    color: #5f676f;
    font: 400 16px / 27px 'redhat', sans-serif;
}

/* stappen */
.docs__steps {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.docs__step {
    margin: 0;
    padding: 24px 22px;
    list-style: none;
    background: #f7f8fa;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 14px;
    border-radius: 14px;
}

.docs__step_num {
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #df2227;
    color: #fff;
    font: 700 14px / 1 'redhat', sans-serif;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.docs__step h3 {
    margin: 0 0 8px;
    padding: 0;
    color: #10161c;
    font: 700 17px / 24px 'redhat', sans-serif;
    border: 0;
}

.docs__step p {
    margin: 0;
    color: #5f676f;
    font: 400 15px / 24px 'redhat', sans-serif;
}

/* aandachtsblok */
.docs__callout {
    margin-top: 28px;
    padding: 20px 24px;
    background: rgba(223, 34, 39, .05);
    border-left: 3px solid #df2227;
    -webkit-border-radius: 0 12px 12px 0;
    border-radius: 0 12px 12px 0;
}

.docs__callout p {
    max-width: none;
    margin: 0;
    color: #4c545c;
    font: 400 15px / 25px 'redhat', sans-serif;
}

.docs__callout strong {
    color: #10161c;
    font-weight: 700;
}

/* codeblok */
.docs__code {
    margin: 26px 0 0;
    background: #10161c;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    overflow: hidden;
    -webkit-box-shadow: 0 16px 36px 0 rgba(16, 22, 28, .10);
    box-shadow: 0 16px 36px 0 rgba(16, 22, 28, .10);
}

.docs__code_bar {
    padding: 11px 14px 11px 20px;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.docs__code_label {
    color: rgba(255, 255, 255, .45);
    font: 600 11px / 16px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.docs__copy {
    padding: 7px 15px;
    background: rgba(255, 255, 255, .09);
    border: 0;
    color: #fff;
    font: 600 12px / 16px 'redhat', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

.docs__copy:hover {
    background: #df2227;
}

.docs__copy.is-copied {
    background: #1f9d55;
}

.docs__code pre {
    margin: 0;
    padding: 20px 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.docs__code code {
    color: #e7edf3;
    font: 400 14px / 24px Consolas, Menlo, Monaco, 'Courier New', monospace;
    white-space: pre;
}

.docs__code .tok-tag  { color: #ff9a52; }
.docs__code .tok-attr { color: #7fd1ff; }
.docs__code .tok-str  { color: #a5e0a0; }
.docs__code .tok-var  { color: #ffc37d; }

/* parameteroverzicht */
.docs__table {
    margin-top: 26px;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    overflow: hidden;
}

.docs__row {
    padding: 17px 22px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
}

.docs__row + .docs__row {
    border-top: 1px solid #eef0f2;
}

.docs__row > code {
    padding: 4px 10px;
    display: inline-block;
    background: rgba(223, 34, 39, .07);
    color: #d95500;
    font: 500 13px / 20px Consolas, Menlo, Monaco, 'Courier New', monospace;
    word-break: break-word;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.docs__row p {
    max-width: none;
    margin: 0;
    color: #5f676f;
    font: 400 15px / 24px 'redhat', sans-serif;
    word-break: break-word;
}

/* code binnen lopende tekst */
.docs__content p code {
    padding: 2px 7px;
    background: #f1f3f5;
    color: #10161c;
    font: 500 13px / 20px Consolas, Menlo, Monaco, 'Courier New', monospace;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

/* supportknop */
a.docs__support {
    margin-top: 10px;
    padding: 13px 30px;
    display: inline-block;
    background: #df2227;
    color: #fff;
    font: 600 15px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-transition: background 200ms;
    transition: background 200ms;
}

a.docs__support:hover {
    background: #df474b;
    color: #fff;
}

@media only screen and (max-width: 1024px) {

    .docs__center {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding: 70px 30px 80px;
    }

    /* de index wordt een horizontale rij chips boven de tekst */
    .docs__nav {
        position: static;
    }

    .docs__nav_title {
        display: none;
    }

    .docs__nav ul {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-left: 0;
    }

    .docs__nav a {
        margin: 0;
        padding: 8px 16px;
        background: #f7f8fa;
        border: 1px solid #e7e9ec;
        font-size: 14px;
        -webkit-border-radius: 300px;
        border-radius: 300px;
    }

    .docs__nav a:hover,
    .docs__nav a.is-active {
        border-color: #df2227;
    }

    .docs h2 {
        font-size: 27px;
        line-height: 35px;
    }

    .docs__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media only screen and (max-width: 768px) {

    .docs__center {
        padding: 55px 25px 70px;
    }

    .docs h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .docs__block + .docs__block {
        margin-top: 44px;
        padding-top: 44px;
    }

    .docs__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .docs__code pre {
        padding: 18px;
    }

    .docs__code code {
        font-size: 13px;
        line-height: 22px;
    }

}

/*  LOGOWAND - integraties per groep
    -------------------------------- */
.logowall {
    width: 100%;
    background: #fff;
}

/* grijze variant en een vast aantal kolommen voor kleine sets */
.logowall[data-tone="grey"] {
    background: #f7f8fa;
}

.logowall__grid[data-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.logowall__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px 100px;
}

.logowall__group + .logowall__group {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid #eef0f2;
}

.logowall__head {
    max-width: 720px;
    margin-bottom: 34px;
}

.logowall__eyebrow {
    margin: 0 0 12px;
    display: -webkit-box;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #df2227;
    font: 600 13px / 18px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* aantal koppelingen binnen de groep */
.logowall__count {
    padding: 2px 9px;
    background: rgba(223, 34, 39, .08);
    font-size: 12px;
    letter-spacing: 0;
    -webkit-border-radius: 300px;
    border-radius: 300px;
}

.logowall h2 {
    margin: 0 0 14px;
    padding: 0;
    color: #10161c;
    font: 700 28px / 36px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.logowall__text {
    margin: 0;
    color: #5f676f;
    font: 400 16px / 27px 'redhat', sans-serif;
}

/* auto-fill vult de rij netjes op, ongeacht het aantal logos */
.logowall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.logowall__tile {
    min-height: 112px;
    padding: 24px 22px;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* wit, zodat de witte achtergrond van de logo-jpgs niet als vlak opvalt */
    background: #fff;
    border: 1px solid #e7e9ec;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: border-color 250ms, box-shadow 250ms, -webkit-transform 250ms;
    transition: border-color 250ms, box-shadow 250ms, transform 250ms;
}

/* alle logos op dezelfde optische hoogte, in eigen kleur zodat een bezoeker
   zijn systeem direct herkent */
.logowall__tile img {
    width: 100%;
    height: 40px;
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
    image-rendering: -webkit-optimize-contrast;
}

/* vierkante beeldmerken (social) mogen groter, anders vallen ze weg
   naast de brede woordmerken van de andere groepen */
.logowall__grid[data-shape="icon"] .logowall__tile img {
    height: 52px;
}

.logowall__tile:hover {
    border-color: #f5b8ba;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 12px 28px 0 rgba(16, 22, 28, .08);
    box-shadow: 0 12px 28px 0 rgba(16, 22, 28, .08);
}

.logowall__note {
    margin: 60px 0 0;
    padding-top: 34px;
    border-top: 1px solid #eef0f2;
    color: #5f676f;
    font: 400 16px / 26px 'redhat', sans-serif;
}

.logowall__note a {
    color: #df2227;
    font-weight: 600;
}

.logowall__note a:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

    .logowall__tile {
        -webkit-transition: none;
        transition: none;
    }

    .logowall__tile:hover {
        -webkit-transform: none;
        transform: none;
    }

}

@media only screen and (max-width: 1024px) {

    .logowall__center {
        padding: 70px 30px 80px;
    }

    .logowall h2 {
        font-size: 25px;
        line-height: 33px;
    }

    .logowall__grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .logowall__group + .logowall__group {
        margin-top: 50px;
        padding-top: 50px;
    }

}

@media only screen and (max-width: 768px) {

    .logowall__center {
        padding: 55px 25px 70px;
    }

    .logowall h2 {
        font-size: 23px;
        line-height: 31px;
    }

    .logowall__head {
        margin-bottom: 26px;
    }

    .logowall__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .logowall__tile {
        min-height: 92px;
        padding: 20px 18px;
    }

    .logowall__tile img {
        height: 32px;
    }

    .logowall__note {
        margin-top: 44px;
    }

}

/*  ORANJE KNOPPEN - overal dezelfde vorm en gloed
    Referentie is de hero-knop op de homepage. Breedte wordt hier bewust
    niet gezet, zodat knoppen die vol in een formulier staan vol blijven.
    -------------------------------- */
header.top article a.cta,
section.streamer article div.block a,
.pagehero__cta,
.taggle-video-ads__introduction_intro a,
.taggle-video-ads[data-block="hero"] .taggle-video-ads__introduction_intro > a,
form input[type="submit"],
form.form_02 input[type="submit"],
.contactpage__form input[type="submit"],
.login form.inloggen input[type="submit"],
.advice__form input[type="submit"],
.cta-block__form input[type="submit"],
a.docs__support {
    padding: 16px 42px;
    background: #df2227;
    border: 0;
    color: #fff;
    font: 600 17px / 22px 'redhat', sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -webkit-box-shadow: 0 12px 32px rgba(223, 71, 75, .32);
    box-shadow: 0 12px 32px rgba(223, 71, 75, .32);
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

header.top article a.cta:hover,
section.streamer article div.block a:hover,
.pagehero__cta:hover,
.taggle-video-ads__introduction_intro a:hover,
.taggle-video-ads[data-block="hero"] .taggle-video-ads__introduction_intro > a:hover,
form input[type="submit"]:hover,
form.form_02 input[type="submit"]:hover,
.contactpage__form input[type="submit"]:hover,
.login form.inloggen input[type="submit"]:hover,
.advice__form input[type="submit"]:hover,
.cta-block__form input[type="submit"]:hover,
a.docs__support:hover {
    background: #df474b;
    color: #fff;
    text-decoration: none;
    -webkit-box-shadow: 0 14px 38px rgba(223, 71, 75, .32);
    box-shadow: 0 14px 38px rgba(223, 71, 75, .32);
}

/*  REELS - verticale advertentievideos
    -------------------------------- */
.reels {
    width: 100%;
    background: #0d1014;
}

.reels__center {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 30px;
    text-align: center;
}

.reels__eyebrow {
    margin: 0 0 14px;
    color: #ff5c60;
    font: 600 14px / 20px 'redhat', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reels h2 {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    color: #fff;
    font: 700 34px / 42px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.reels__intro {
    max-width: 680px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, .62);
    font: 400 17px / 27px 'redhat', sans-serif;
}

.reels__grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.reels__item {
    background: #14181e;
    border: 1px solid #232830;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}

.reels__item video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 9 / 16;
    background: #0d1014;
    object-fit: cover;
}

/* liggende voorbeelden (themavideos zijn 4:3) */
.reels__grid[data-shape="landscape"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* vaste kolomaantallen voor kleinere sets */
.reels__grid[data-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* schermafbeelding in plaats van video: eigen verhouding behouden */
.reels__item > img {
    width: 100%;
    height: auto;
    display: block;
}

/* klikbare poster: opent de trailer in een popup */
.reels__link {
    display: block;
    position: relative;
    background: #0d1014;
}

.reels__link img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

/* de themavideos zijn niet allemaal 4:3 (obsidian is 16:9): contain
   houdt het raster gelijk zonder beeld weg te snijden */
.reels__grid[data-shape="landscape"] .reels__link img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.reels__play {
    width: 62px;
    height: 62px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(223, 34, 39, .92) url('../img/icons/icon-play.svg') no-repeat center / 22px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    -webkit-transition: background-color 250ms, -webkit-transform 250ms;
    transition: background-color 250ms, transform 250ms;
}

.reels__link:hover .reels__play {
    background-color: #df474b;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

/* de speler in de popup */
#colorbox.themeVideo #cboxLoadedContent {
    margin-bottom: 0;
}

/* sluitknop in de rechterbovenhoek; blijft altijd binnen het scherm */
#colorbox.themeVideo #cboxClose {
    top: 12px;
    right: 12px;
    left: auto;
    background-color: rgba(0, 0, 0, .6);
}

#colorbox.themeVideo #cboxClose:hover {
    background-color: #df2227;
    opacity: 1;
}

.themeVideo__player {
    width: 100%;
    height: auto;
    max-height: 78vh;
    display: block;
    background: #000;
}

@media (prefers-reduced-motion: reduce) {

    .reels__play {
        -webkit-transition: none;
        transition: none;
    }

    .reels__link:hover .reels__play {
        -webkit-transform: none;
        transform: none;
    }

}

.reels__caption {
    margin: 0;
    padding: 14px 18px;
    display: -webkit-box;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    font: 600 15px / 22px 'redhat', sans-serif;
    text-align: left;
}

.reels__caption span {
    color: rgba(255, 255, 255, .45);
    font-weight: 400;
    font-size: 14px;
}

@media only screen and (max-width: 1024px) {

    .reels__center {
        padding: 70px 30px 80px;
    }

    .reels h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .reels__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reels__grid[data-shape="landscape"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media only screen and (max-width: 768px) {

    .reels__center {
        padding: 55px 25px 70px;
    }

    .reels h2 {
        font-size: 25px;
        line-height: 33px;
    }

    .reels__grid {
        margin-top: 34px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .reels__grid[data-shape="landscape"] {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* foto bij het adviesblok op de Meta Ads-pagina */
.advice__photo {
    width: 92px;
    height: 92px;
    margin-top: 28px;
    display: block;
    object-fit: cover;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/*  SCROLL TOP
    -------------------------------- */
.scroll-top:hover {
    -webkit-animation: logo .01s 1 forwards ease-in;
    animation: logo .01s 1 forwards ease-in;
}

@keyframes logo {
    0%   {
        opacity: 1;
    }
    5%   {
        opacity: 0;
    }
    50%  {
        background-position: 0 -60px;
        opacity: 0;
    }
    100% {
        background-position: 0 -60px;
        opacity: 1;
    }
}
@-webkit-keyframes logo {
    0%   {
        opacity: 1;
    }
    5%   {
        opacity: 0;
    }
    50%  {
        background-position: 0 -60px;
        opacity: 0;
    }
    100% {
        background-position: 0 -60px;
        opacity: 1;
    }
}

.scroll-top {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 5%;
    right: 3%;
    z-index: 9998;
    background-color: #fff;
    background-image: url('../img/arrow-up.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

/*  COLORBOX
    --------------------------------------------- */

.videoGeneratorFront .cboxIframe {
    padding: 20px;
    background: #fff;
}

    #colorbox #vrijblijvend-advies > img {
        display: none;
    }

/*  TAGGLESOCIAL
    --------------------------------------------- */
#tagglesocial {
    font-size: 0;
}

#tagglesocial h1 {
    padding: 0 30px;
    font: 700 36px / 42px 'redhat', sans-serif;
}

#tagglesocial h2 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.tagglesocial__form {
    padding: 30px;
    background: #f9f9f9;
    -webkit-border-radius: 3px;
}

.tagglesocial__preorder {
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    font: 700 26px / 42px 'redhat', sans-serif;
}

.tagglesocial__contain_input {
    width: calc(20% - 16px);
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
}

.tagglesocial__contain_inputs {
    width: 100%;
    display: inline-block;
}

.tagglesocial__contain_inputs .tagglesocial__contain_input:nth-of-type(5) {
    margin-right: 0;
}

.tagglesocial__contain_input.full {
    width: 100%;
    margin: 10px 0;
}

.tagglesocial__contain_input label[for=user_agree] {
    width: 100%;
    margin-bottom: 15px;
    display: inline-block;
    cursor: pointer;
    line-height: 28px !important;
}

.tagglesocial__contain_input label[for=user_agree] > input {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border: 2px solid #d9d7d7;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
}

.tagglesocial__contain_input label[for=user_agree] > input:checked {
    border-color: #73c06b;
    background-color: #73c06b;
}

.tagglesocial__contain_input label[for=user_agree] > input.error {
    border-color: #ed4956;
}

.tagglesocial__contain_input label.error {
    display: none;
}

.tagglesocial__form_required {
    font: 400 16px / 24px 'redhat', sans-serif;
}

.tagglesocial__contain_input label,
.tagglesocial__contain_input input {
    font: 400 16px / 24px 'redhat', sans-serif !important;
}

.tagglesocial__contain_input input.error {
    border-color: #ed4956;
}

.tagglesocial__contain_input input[type="submit"] {
    float: none;
    margin-right: 20px;
    font: 400 16px / 24px 'redhat', sans-serif;
}

.tagglesocial__content_full {
    padding: 30px;
}

.tagglesocial__content_full_bottom {
    width: 100%;
    margin-top: 20px;
    display: inline-block;
}

.tagglesocial__content_full_bottom > img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: inline-block;
    vertical-align: top;
}

.tagglesocial__content_full_bottom_howdoesitwork {
    width: calc(100% - 640px);
    margin-left: 40px;
    display: inline-block;
    vertical-align: top;
}

.tagglesocial__content_full_bottom_howdoesitwork_subjects {
    margin-bottom: 0 !important;
}

::-webkit-input-placeholder {
    color: #9a9a9a;
}
:-moz-placeholder           {
    color: #9a9a9a;
    opacity: 1;
}
::-moz-placeholder          {
    color: #9a9a9a;
    opacity: 1;
}
:-ms-input-placeholder      {
    color: #9a9a9a;
}

@media only screen and (min-width: 0) and (max-width: 960px) {

    .tagglesocial__content_full_bottom_howdoesitwork {
        width: 100%;
        margin: 20px 0 0;
    }
    
    [data-page="404"] .content__center {
        padding: 160px 30px 60px;
        background-position: center 30px;
        background-size: 100px;
    }
    
    [data-page="404"] .content__center h1 {
        font: 700 24px / 28px 'redhat', sans-serif;
    }
       

}

@media only screen and (min-width: 0) and (max-width: 768px) {

    #tagglesocial h1 {
        padding: 0;
        font: 700 30px / 36px 'redhat', sans-serif;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input:nth-of-type(n) {
        width: calc(50% - 10px);
        margin: 0 20px 0 0;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input:nth-of-type(2n+2) {
        margin-right: 0;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input.full {
        width: 100%;
        margin-top: 30px;
    }
    
    .taggle-video-ads__center {
        padding: 0;
    }
    
    .taggle-video-ads__center[data-width="full"],
    .video-advertenties [data-block="optimized"] .taggle-video-ads__center {
        padding: 30px;
    }
        
    .taggle-video-ads__contain {
        width: 100%;
    }
    
    [data-block="meta"] .taggle-video-ads__center img,
    [data-block="taggle"] .taggle-video-ads__center img {
        width: 100%;
        margin: 0 0 30px 0;
    }
    
}

@media only screen and (min-width: 0) and (max-width: 500px) {

    #tagglesocial h1 {
        font: 700 26px / 34px 'redhat', sans-serif;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input:nth-of-type(n) {
        width: 100%;
        margin: 0;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input:nth-of-type(2n+2) {
        margin-right: 0;
    }

    .tagglesocial__contain_inputs .tagglesocial__contain_input.full {
        width: 100%;
        margin-top: 30px;
    }

}

/*  MEDIA_QUERIES
    --------------------------------------------- */
/* de tegelrij moet meeschalen binnen de 1280px-container */
@media only screen and (min-width: 1281px) {

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain {
        flex: 0 1 150px;
        min-width: 0;
    }

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain img {
        width: 100%;
    }

}

@media only screen and (min-width: 0) and (max-width: 1600px) {

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain:nth-of-type(4) {
        display: none;
    }

}

@media only screen and (min-width: 0) and (max-width: 1360px) {

    header.top {
        padding: 0 20px;
    }
    
    .taggle-video-ads__introduction_intro {
        width: 60%;
    }
    
    .taggle-video-ads__introduction_video {
        width: 40%;
    }

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain:nth-of-type(3) {
        display: none;
    }

    footer {
        padding: 0;
        text-align: left;
    }

    footer section article div.left:nth-child(1n+0) {
        width: 100%;
        max-width: 740px;
    }
    
    footer section article div.right:nth-child(2n+0) {
        display: none;
    }

}

@media only screen and (min-width: 0) and (max-width: 1280px) {

    section.partners {
        padding: 0;
    }

    section.partners article {
        margin: 0 auto;
        box-shadow: none;
        border-bottom: 1px solid #eee;
    }

    section.streamer {
        height: 550px;
        background-image: url('../img/header-image-1280.jpg');
    }

    section.streamer article div.block {
        min-height: 550px;
    }

    header.top {
        padding: 0;
    }

    header.top > article:first-of-type {
        padding: 20px 0 0;
        text-align: center;
    }

    nav {
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        float: none;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

    section.middle article.klanten > div h1 {
        left: 20px;
    }

    div.center div.block a.button {
        padding-right: 10px;
    }

    section.middle article {
        padding: 20px 20px 100px;
    }

    section.inloggen,
    section.vergeten {
        padding: 50px 20px;
    }

    section.selection {
        padding: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    section.selection article {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    section.selection a.block:first-child {
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    section.selection a.block:last-child {
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    section.middle article.specs > div ul li {
        font-size: 12px;
        line-height: 150%;
    }

    article.templates div.block h2 span {
        font-size: .9em;
    }

    article.templates div.block div.videoContainer a.playButton {
        padding: 5px 43px 5px 5px;
        top: -39px;
        font-size: .8em;
        background-size: 35px;
    }

    article.templates div.block div.videoContainer a.playButton.man {
        right: 113px;
    }

    .totalViews {
        bottom: 20px;
        right: 20px;
        font-size: 1.8em;
    }
    
    .taggle-video-ads__introduction_intro {
        width: 100%;
        margin: 50px 0;
        text-align: center;
    }
    
    .taggle-video-ads__introduction_intro h1 > span {
        max-width: 200px;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .taggle-video-ads__introduction_video > div {
        display: block;
    }

    .taggle-video-ads__introduction_video {
        width: 100%;
        text-align: center;
        padding: 0;

    }

    .taggle-video-ads__introduction_video_contain {
        margin: 0 10px;
    }

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain:nth-of-type(3),
    [data-block="introduction"] .taggle-video-ads__introduction_video_contain:nth-of-type(4) {
        display: inline-block;
    }

    .video-advertenties .taggle-video-ads__introduction_video {
        background-image: none;
    }

}

@media only screen and (min-width: 0) and (max-width: 1024px) {

    section.streamer article div.block h2 {
        font-size: 30px;
    }

    section.streamer article div.block p {
        font-size: 14px;
        font-weight: 400;
    }

    section.middle article.information div.left,
    section.middle article.information div.right {
        width: 100%;
        margin: 0;
    }

    section.middle article.information div.left {
        margin-bottom: 20px;
    }

    article.templates div.block {
        width: 48%;
    }

    article.templates div.block h2 span {
        font-size: 0.75em;
        margin-left: 15px;
    }

    article.partners div.partner {
        width: 23.5%;
        margin: 0 2% 2% 0;
    }

    article.partners div.container1 div.partner:nth-child(5n),
    article.partners div.container2 div.partner:nth-child(5n),
    article.partners div.container3 div.partner:nth-child(5n) {
        margin-right: 2%;
    }

    article.partners div.container1 div.partner:nth-child(4n),
    article.partners div.container2 div.partner:nth-child(4n),
    article.partners div.container3 div.partner:nth-child(4n) {
        margin-right: 0%;
    }

    .totalViews {
        font-size: 1.5em;
    }

    footer section article.contactformulier {
        padding-left: 10%;
    }

    .hideFreeMonth {
        display: none;
    }

    .capFreeMonth {
        text-transform: capitalize;
    }

    form.tekst-generator td {
        width: 100%;
        margin-top: 5px;
    }

    section.partners article .partner-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px 35px;
    }

    [data-block="introduction"] .taggle-video-ads__introduction_video_contain:nth-of-type(4) {
        display: none;
    }

}

@media only screen and (min-width: 640px) and (max-width: 1024px) {

    section.middle article.specs > div ul li {
        width: 32.66666666666667%;
    }

    section.middle article.specs > div ul li:nth-child(3n) {
        margin-right: 0;
    }

    section.middle article.specs > div ul li:nth-child(4n) {
        margin-right: 1%;
    }

    article.templates div.block:nth-of-type(3n) {
        margin-right: 4%;
    }

    article.templates div.block:nth-of-type(2n) {
        margin-right: 0;
    }

}

@media only screen and (min-width: 0) and (max-width: 768px) {
    
    [data-page="google-vehicle-ads"] > .content__center {
        padding: 30px 20px;
    }
    
    .content__introduction h1 {
        font: 700 30px / 34px 'redhat', sans-serif;
    }
    
    .content__introduction p {
        font: 400 20px / 24px 'redhat', sans-serif !important;
    }
    
    .taggle-video-ads__main_content,
    .taggle-video-ads__sidebar {
        width: 100%;
    }
    
     .taggle-video-ads__optimized_icons img {
        margin-top: 20px;
    }

    section.streamer {
        height: 550px;
        background-image: url('../img/header-image-960.jpg');
        background-position: center bottom;
    }

    section.streamer article div.block {
        min-height: 550px;
    }

    article.contact div div.left,
    article.contact div form {
        width: 100%;
    }

    section.middle article {
        padding: 20px;
    }

    section.middle article.block_c > div h1 {
        margin-bottom: 20px;
    }

    section.middle article.specs > div ul li {
        width: 32.33333%;
    }

    article.partners div.partner {
        width: 32%;
        margin: 0 2% 2% 0;
    }

    article.partners div.container1 div.partner:nth-child(5n),
    article.partners div.container2 div.partner:nth-child(5n),
    article.partners div.container3 div.partner:nth-child(5n),
    article.partners div.container1 div.partner:nth-child(4n),
    article.partners div.container2 div.partner:nth-child(4n),
    article.partners div.container3 div.partner:nth-child(4n) {
        margin-right: 2%;
    }

    article.partners div.container1 div.partner:nth-child(3n),
    article.partners div.container2 div.partner:nth-child(3n),
    article.partners div.container3 div.partner:nth-child(3n) {
        margin-right: 0%;
    }

    .totalViews {
        font-size: 1.3em;
    }

    footer section article {
        width: 100%;
    }

    footer section article:nth-child(1) {
        width: 100%;
    }

    footer section article.contactformulier {
        margin-top: 50px;
        padding: 0;
    }

    footer section form label {
        width: 100%;
        display: inline-block;
        padding-right: 10px;
        font-size: .9em;
    }

    form table tr td.verplicht p {
        font-size: .9em;
    }

    footer section article div.left form {
        width: 100%;
    }

    footer section article div.left form table {
        width: 100%;
        display: inline-block;
    }
    
    .taggle-video-ads h1 {
        margin-top: 15px;
        font: 700 24px / 28px 'redhat', sans-serif;
    }
    
    .taggle-video-ads h2 {
        margin: 5px 0 15px;
        font: 400 16px / 24px 'redhat', sans-serif
    }
    
    .taggle-video-ads__introduction_video_contain {
        display: none;
    }

    .taggle-video-ads__optimized_icons {
        width: 100%;
    } 
    
    .taggle-video-ads__optimized_content {
        width: 100%;
        margin-top: 30px;
        padding: 0;
    }
    
    .taggle-video-ads__automatic_intro, .taggle-video-ads__automatic_usp {
        text-align: left;
    }
    
    .taggle-video-ads[data-block="automatic"] ul li {
        width: 100%;
        min-height: auto;
        padding: 30px;
        margin: 0 0 15px;
        text-align: left;
    }
    
    .taggle-video-ads[data-block="automatic"] ul li span {
        max-width: 40px;
        height: 40px;
        margin-right: 30px;
        float: left;
        background-size: 40px;
    }
    
    .content__block {
        width: 100%;
        flex: 1 1 100%;
    }
    
    .content__block p {
        margin-bottom: 10px;
        min-height: auto;
    }
    
}

@media only screen and (min-width: 0) and (max-width: 640px) {

    section.partners p.partner-text {
        margin-bottom: 35px;
        font-size: 24px;
        line-height: 30px;
    }

    section.partners article {
        padding: 60px 30px;
    }

    section.partners article .partner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 25px;
    }

    section.streamer {
        background-image: url('../img/header-image-640.jpg');
    }

    section.streamer article div.block {
        width: 100%;
        margin: 20px 0 0 0;
        min-height: 0;
        padding: 15px;
        background: rgba(255, 255, 255, .1);
        border-radius: 10px;
    }

    section.streamer article div.block h2 {
        font-size: 22px;
    }

    section.streamer article div.block p {
        font-size: 14px;
        line-height: 18px;
    }

    section.streamer article div.block.right {
        padding: 20px;
    }

    section.streamer article div.block div.content {
        padding-top: 0;
    }

    header.top > article:first-of-type {
        padding: 40px 0 20px;
    }

    section.streamer article div.totalviews {

    }

    section.middle article.app div div.app-left,
    section.middle article.tekstmodule div div.tekstmodule-left,
    section.middle article.app.taggle360 div div.app-left {
        width: 100%;
        margin: 0 0 30px;
        padding: 0;
        border: 0;
    }

    section.middle article.app div div.app-right,
    section.middle article.tekstmodule div div.tekstmodule-right {
        width: 100%;
    }

    section.middle article.app.taggle360 div div.app-right {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    header.top article {
        padding-bottom: 50px;
        position: relative;
    }

    header.top div.center div.block {
        width: 50px;
        height: 50px;
        display: inline-block;
        right: -10px;
    }

    header.top div.center div.block a.button {
        width: 48px;
        height: 48px;
        background: #f00000 url('../img/icon-login.png') no-repeat center;
        background-size: 30px;
        text-indent: -9999999px;
        overflow:  hidden;
    }

    nav.menufixed {
        display: none;
    }

    div.smallMenu {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-block;
        position: absolute;
        top: 35px;
        right: 20px;
        z-index: 9998;
        background: #525252 url(../img/icons/icon-menu.svg) no-repeat center / 40px;
        background-size: 15px;
        text-align: left;
        font-size: 1em;
        font-weight: 500;
        color: #616161;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        cursor: pointer;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .video-advertenties div.smallMenu {
        background-color: #2492ae;
    }

    .frontpage div.smallMenu,
    .has-pagehero div.smallMenu {
        background-color: #df2227;
    }

    nav section li.btn a {
        text-align: left;
    }

    section.selection article {
        border-bottom: 0;
    }

    section.selection article a.block {
        width: 50%;
        border-bottom: 1px solid #f1f1f1;
    }

    section.middle article.information {
        border-top: 0;
    }

    section.middle article.block_c > div h1,
    section.middle article > div h1 {
        font-size: 1.6em;
    }

    section.middle article.templates {
        padding-top: 20px;
    }

    section.middle article.templates div.block {
        width: 100%;
        margin-bottom: 20px;
    }

    .mapCanvas {
        padding-bottom: 100%;
    }

    .totalViews {
        right: auto;
        left: 20px;
        text-align: left;
        font-size: 1.1em;
    }

    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
        font-size: 16px !important;
    }

    div.center div.totalviews {
        display: none;
    }
    
    .taggle-video-ads[data-block="introduction"] .taggle-video-ads__center {
        padding-top: 0;
    }
    
    form table tr td {
        width: 100%;
    }
 
    #colorbox.vrijblijvend-advies #cboxContent {
        padding: 10px 15px 25px;
    }
    
    #colorbox.vrijblijvend-advies form h2 {
        padding: 0;
        margin: 0 10px 0 0;      
        border: 0;
        font: 700 18px / 22px 'redhat', sans-serif;
    }
    
    #colorbox.vrijblijvend-advies form p,
    #colorbox.vrijblijvend-advies form label {
        font: 400 14px / 20px 'redhat', sans-serif;
    }
    
    #colorbox.vrijblijvend-advies form input[type="email"], 
    #colorbox.vrijblijvend-advies form input[type="text"] {
        padding: 6px;
    }
 
}

@media only screen and (min-width: 414px) and (max-width: 640px) {

    section.middle article.specs > div ul li {
        width: 49.5%;
    }

    section.middle article.specs > div ul li:nth-child(2n) {
        margin-right: 0;
    }

    form.form_02 {
        padding: 25px;
    }

}

@media only screen and (min-width: 0) and (max-width: 414px) {

    section.streamer {
        background-image: url('../img/header-image-414.jpg');
    }

    form.form_02 {
        padding: 10px;
    }

    form.form_02 h3 {
        margin-top: 10px;
        font-size: 1.3em;
    }

    div.center div.block.phoneNumber {
        width: 30px;
        height: 30px;
        display: inline-block;
        margin: 0 10px 0 0;
        background: #ff0000 url('../img/icon-phonenumber.png') no-repeat center;
        background-size: 20px;
        color: #fff;
        font-size: 1em;
        font-weight: 700;
        text-align:left;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
        -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5);
        box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .5);
        -webkit-transition: background 500ms;
        transition: background 500ms;
    }

    div.center div.block.phoneNumber a {
        width: 30px;
        height: 30px;
        margin-top: -8px;
        display: inline-block;
        vertical-align: top;
        overflow:  hidden;
        text-indent: -9999px;
    }

    section.middle article.specs > div ul li {
        width: 100%;
        height: 170px;
        margin: 0 0 2%;
        padding: 0;
        overflow: hidden;
    }

    section.middle article.specs > div ul li span {
        bottom: -5px;
    }

    section.middle article > div p span.roundBlock {
        width: 100px;
        height: 100px;
        margin-right: 30px;
        background-size: 50px;
    }

    section.middle article.information div.videoContainer a.playButton {
        padding-right: 40px;
        font-size: .9em;
        background-size: 30px;
    }

    section.middle article.information div.videoContainer a.playButton.man {
        right: 130px;
    }

    section.middle article > div div.buttonContain a.button {
        max-width: 100%;
    }

    article.templates div.block div.videoContainer a.playButton {
        padding: 5px 40px 5px 5px;
        top: -38px;
        font-size: .7em;
        background-size: 30px;
    }

    article.templates div.block div.videoContainer a.playButton.man {
        right: 103px;
    }

    article.partners div.partner {
        width: 48%;
        margin: 0 2% 2% 0;
    }

    article.partners div.container1 div.partner:nth-child(5n),
    article.partners div.container2 div.partner:nth-child(5n),
    article.partners div.container3 div.partner:nth-child(5n),
    article.partners div.container1 div.partner:nth-child(4n),
    article.partners div.container2 div.partner:nth-child(4n),
    article.partners div.container3 div.partner:nth-child(4n),
    article.partners div.container1 div.partner:nth-child(3n),
    article.partners div.container2 div.partner:nth-child(3n),
    article.partners div.container3 div.partner:nth-child(3n) {
        margin-right: 2%;
    }

    article.partners div.container1 div.partner:nth-child(2n),
    article.partners div.container2 div.partner:nth-child(2n),
    article.partners div.container3 div.partner:nth-child(2n) {
        margin-right: 0%;
    }

    .totalViews span {
        font-size: 2.2em;
    }

}
/*  VWE AANMELDFORMULIER (kale pagina)
    VWE-huisstijl: indigo #2d2e83 met turquoise #009fa0 als accent.
    Twee varianten via ?product=metaads of ?product=googlevehicleads, die
    alleen de accentkleur en het productlogo veranderen.
    -------------------------------- */
.leadform {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #eef0f6;
    background: -webkit-linear-gradient(top, #f4f5f9 0%, #e6e8f2 100%);
    background: linear-gradient(180deg, #f4f5f9 0%, #e6e8f2 100%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.leadform--metaads .leadform__body:before {
    background: #1877f1;
}

.leadform--metaads .leadform__eyebrow {
    color: #1877f1;
}

.leadform--googlevehicleads .leadform__body:before {
    background: #2e8adc;
}

.leadform--googlevehicleads .leadform__eyebrow {
    color: #2e8adc;
}

.leadform__center {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.leadform__card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe2ec;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -webkit-box-shadow: 0 22px 50px 0 rgba(45, 46, 131, .12);
    box-shadow: 0 22px 50px 0 rgba(45, 46, 131, .12);
}

/* merkbalk: VWE links, het gekozen product rechts */
.leadform__brandbar {
    padding: 24px 40px;
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e7e9f2;
}

.leadform__vwe {
    width: auto;
    height: 40px;
    display: block;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.leadform__product {
    display: -webkit-box;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.leadform__productmarks {
    display: -webkit-box;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leadform__productmarks img {
    width: 24px;
    height: 24px;
    display: block;
}

/* het Meta-beeldmerk is breder dan hoog, dus op hoogte schalen */
.leadform__productmarks img.is-wide {
    width: auto;
    height: 21px;
    margin-left: 2px;
}

.leadform__productname {
    color: #4c5468;
    font: 600 14px / 20px 'redhat', sans-serif;
    white-space: nowrap;
}

/* accentstreep onder de merkbalk, kleurt mee met het product */
.leadform__body {
    position: relative;
    padding: 36px 40px 34px;
}

.leadform__body:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #009fa0;
    content: "";
}

.leadform__eyebrow {
    margin: 0 0 10px;
    color: #009fa0;
    font: 700 12px / 18px 'redhat', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.leadform h2 {
    margin: 0;
    padding: 0;
    color: #2d2e83;
    font: 700 30px / 38px 'redhat', sans-serif;
    letter-spacing: -.02em;
    border: 0;
}

.leadform__text {
    margin: 10px 0 30px;
    color: #5f6678;
    font: 400 16px / 25px 'redhat', sans-serif;
}

.leadform__row {
    display: -webkit-box;
    display: flex;
    gap: 18px;
}

.leadform__row .leadform__field {
    -webkit-box-flex: 1;
    flex: 1 1 0;
    min-width: 0;
}

.leadform__field {
    margin-bottom: 18px;
}

.leadform__field label {
    margin-bottom: 7px;
    display: block;
    color: #3c4356;
    font: 600 14px / 20px 'redhat', sans-serif;
}

.leadform form.form_vwe input[type="text"],
.leadform form.form_vwe input[type="tel"],
.leadform form.form_vwe input[type="email"],
.leadform form.form_vwe select {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 13px 16px;
    display: block;
    background: #f6f7fb;
    border: 1px solid #dcdfeb;
    color: #1b1f2e;
    font: 400 16px / 22px 'redhat', sans-serif;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border-color 200ms, box-shadow 200ms;
    transition: border-color 200ms, box-shadow 200ms;
}

.leadform form.form_vwe input[type="text"]:focus,
.leadform form.form_vwe input[type="tel"]:focus,
.leadform form.form_vwe input[type="email"]:focus,
.leadform form.form_vwe select:focus {
    background: #fff;
    border-color: #2d2e83;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(45, 46, 131, .1);
    box-shadow: 0 0 0 3px rgba(45, 46, 131, .1);
}

.leadform form.form_vwe label.error {
    margin: 6px 0 0;
    color: #d93025;
    font: 400 13px / 19px 'redhat', sans-serif;
}

.leadform form.form_vwe input[type="submit"] {
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    padding: 15px 30px;
    background: #2d2e83;
    border: 0;
    color: #fff;
    font: 700 16px / 22px 'redhat', sans-serif;
    cursor: pointer;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* de generieke knopstijl zet hier een rode gloed onder; overschrijven met
       een ingetogen indigo schaduw die bij de VWE-huisstijl past */
    -webkit-box-shadow: 0 10px 26px rgba(45, 46, 131, .22);
    box-shadow: 0 10px 26px rgba(45, 46, 131, .22);
    -webkit-transition: background 200ms, box-shadow 200ms;
    transition: background 200ms, box-shadow 200ms;
}

.leadform form.form_vwe input[type="submit"]:hover {
    background: #23246a;
    -webkit-box-shadow: 0 12px 30px rgba(45, 46, 131, .3);
    box-shadow: 0 12px 30px rgba(45, 46, 131, .3);
}

.leadform__note {
    margin: 16px 0 0;
    color: #8b91a3;
    font: 400 13px / 20px 'redhat', sans-serif;
}

/* notitie zonder geldige ?product= parameter */
.leadform__notice {
    padding: 22px 24px;
    background: #f6f7fb;
    border: 1px solid #dcdfeb;
    border-left: 3px solid #009fa0;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.leadform__notice_title {
    margin: 0 0 14px;
    color: #2d2e83;
    font: 700 13px / 18px 'redhat', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.leadform__notice ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leadform__notice li {
    margin: 0 0 14px;
    padding: 0;
}

.leadform__notice li:last-child {
    margin-bottom: 0;
}

.leadform__notice li strong {
    margin-bottom: 4px;
    display: block;
    color: #3c4356;
    font: 600 15px / 21px 'redhat', sans-serif;
}

.leadform__notice code {
    display: block;
    color: #5f6678;
    font: 400 13px / 20px monospace;
    word-break: break-all;
}

/* afsluitende regel: taGGleAuto levert het product */
.leadform__provider {
    margin: 0;
    padding: 18px 40px;
    background: #f6f7fb;
    border-top: 1px solid #e7e9f2;
    color: #6a7186;
    font: 500 14px / 20px 'redhat', sans-serif;
    text-align: center;
}

.leadform form.form_vwe div.melding h2 {
    margin: 0 0 10px;
    color: #2d2e83;
    font: 700 24px / 32px 'redhat', sans-serif;
    border: 0;
}

.leadform form.form_vwe div.melding p {
    margin: 0;
    color: #5f6678;
    font: 400 16px / 25px 'redhat', sans-serif;
}

@media only screen and (max-width: 600px) {

    .leadform {
        padding: 0;
    }

    .leadform__card {
        border: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    .leadform__brandbar {
        padding: 20px 22px;
        gap: 14px;
    }

    .leadform__vwe {
        height: 32px;
    }

    .leadform__productname {
        display: none;
    }

    .leadform__body {
        padding: 28px 22px 26px;
    }

    .leadform h2 {
        font: 700 25px / 32px 'redhat', sans-serif;
    }

    .leadform__row {
        display: block;
    }

    .leadform__provider {
        padding: 16px 22px;
    }

}


/*  ============================================================
    REDESIGN - LICHTE HUISSTIJL
    ------------------------------------------------------------
    Dit deel stond tot 02-09-2026 in een eigen bestand dat
    na style.css werd ingeladen. Nu de huisstijl vast staat is
    het samengevoegd, in dezelfde leesrichting: alles hieronder
    komt na de regels hierboven en wint dus nog steeds.

    Laat dit blok daarom onderaan staan. Zet nieuwe regels voor
    de lichte huisstijl er onderaan bij, niet ertussen.
    ============================================================ */

/*  ============================================================
    taGGleAuto - REDESIGN (licht)
    ------------------------------------------------------------
    Witte, rustige indeling: een gesplitste hero met de tekst links
    en een beeldpaneel rechts waarop kaartjes zweven, daaronder de
    vijf producten als kaarten en een strook met vier pluspunten.

    Een schrift (montserrat), donkerblauwe tekst, de merkkleur rood
    als accent op een woord per kop en op de knoppen.

    Deze regels overschrijven de oudere opmaak hierboven. De vorige
    donkere versie is op 02-09-2026 weggehaald en staat nog in de
    git-geschiedenis, in de commit voor deze opruiming.
    ============================================================ */

/*  TOKENS
    --------------------------------------------- */
:root {
    --paper:      #FFFFFF;
    --paper-2:    #F6F7F9;
    --paper-3:    #FAF6F6;
    --ink:        #16202E;
    --ink-2:      #22303F;
    --muted:      #5B6675;
    --muted-2:    #8A939F;

    --brand:      #DF2227;
    --brand-dark: #C0161B;
    --brand-tint: #FDEDEE;

    --line:       #E8EBEF;
    --line-2:     #DDE2E8;

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --r-xl: 30px;

    --wrap: 1180px;
    --gut:  clamp(20px, 4vw, 40px);

    --f-body: 'montserrat', 'redhat', system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(.22,.61,.36,1);

    --shadow-sm: 0 2px 8px rgba(22,32,46,.06);
    --shadow:    0 8px 24px rgba(22,32,46,.08);
    --shadow-lg: 0 18px 44px rgba(22,32,46,.12);
}

/*  CANVAS
    --------------------------------------------- */
body.frontpage {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    overflow-x: hidden;
}

body.frontpage ::selection {
    background: var(--brand);
    color: #fff;
    text-shadow: none;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    position: relative;
}

/*  KOPPEN
    ---------------------------------------------
    Een schrift, geen serif meer. Het accent zit in <strong>: dat
    woord wordt rood.                                             */
.dsp {
    font-family: var(--f-body);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
    color: var(--ink);
    margin: 0;
    border: 0;
    padding: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.dsp strong {
    font-weight: 800;
    color: var(--brand);
}

.dsp--xl { font-size: clamp(27px, 3.6vw, 42px); }
.dsp--lg { font-size: clamp(24px, 2.8vw, 34px); }
.dsp--md { font-size: clamp(20px, 1.9vw, 25px); }

/*  rode streep onder een woord in de kop  */
.underline {
    position: relative;
    display: inline-block;
    color: var(--brand);
}

.underline::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -.16em;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease) .2s;
}

.is-in .underline::after { transform: scaleX(1); }

/*  EYEBROW - rood bolletje met kapitalen
    --------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

/*  LOOPTEKST
    --------------------------------------------- */
.lead {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.72;
    font-weight: 400;
    color: var(--muted);
    max-width: min(56ch, 100%);
    margin: 22px 0 0;
}

.lead strong { color: var(--ink); font-weight: 700; }

/*  KNOPPEN
    --------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 17px 30px;
    border-radius: 100px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.pill--fill {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
}

.pill--fill:hover,
.pill--fill:focus-visible {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(223,34,39,.32);
}

.pill--line {
    background: #fff;
    border-color: var(--line-2);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.pill--line:hover,
.pill--line:focus-visible {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.pill__arrow {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    flex: none;
    transition: transform .35s var(--ease);
}

.pill:hover .pill__arrow { transform: rotate(45deg) translate(2px, -2px); }

/*  tekstlink
    --------------------------------------------- */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    transition: gap .35s var(--ease), color .35s var(--ease);
}

.tlink:hover { gap: 14px; color: var(--brand-dark); }

/*  SCROLL-REVEAL
    --------------------------------------------- */
.rise {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.rise.is-in { opacity: 1; transform: none; }

.rise-2 { transition-delay: .08s; }
.rise-3 { transition-delay: .16s; }
.rise-4 { transition-delay: .24s; }
.rise-5 { transition-delay: .32s; }
.rise-6 { transition-delay: .40s; }

/*  ============================================================
    HEADER - wit, met kleine pictogrammen in het menu
    ============================================================ */
body.frontpage header.top {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

body.frontpage.is-scrolled header.top {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

body.frontpage header.top > article:first-of-type {
    max-width: var(--wrap);
    padding: 18px var(--gut);
}

/*  het donkere logo, want de header is nu wit  */
body.frontpage .logo_taggleauto {
    background-image: url('../img/logo-taggleauto.svg') !important;
}

body.frontpage /*  De actieve streep is een rand en geen ::after: het megamenu gebruikt
    ::after al voor het pijltje, en die verdween daardoor op de actieve
    pagina. De onderrand staat op alle items (doorzichtig als het item niet
    actief is), zodat het menu niet verspringt. De pil van style.css wordt
    hier rechthoekig gemaakt, anders loopt de streep als een boog mee.  */
nav.menufixed ul > li.btn > a {
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 600;
    position: relative;
}

body.frontpage nav.menufixed ul > li.btn > a:hover { color: var(--brand); }

/*  actief item: rood met een streepje eronder  */
body.frontpage nav.menufixed ul > li.btn.active > a { color: var(--brand); }

body.frontpage nav.menufixed .nav-icon { background-color: currentColor; }

body.frontpage nav.menufixed ul > li.btn.secondary > a {
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

body.frontpage nav.menufixed ul > li.btn.secondary > a:hover {
    border-color: var(--ink);
    background: #fff;
    color: var(--ink);
}

/*  style.css zet hier al een rode achtergrond met het hamburgericoon erin.
    Een eigen background-regel zou die afbeelding overschrijven, dus alleen
    de plaatsing wordt hier bijgesteld op de nieuwe headerhoogte.        */
body.frontpage .smallMenu {
    top: 17px;
}

/*  ============================================================
    HERO - tekst links, beeldpaneel rechts
    ============================================================ */
.hero {
    position: relative;
    background: var(--paper);
    padding: clamp(26px, 3vw, 40px) 0 0;
    overflow: hidden;
}

/*  de logo-plaatjes en de bewijsregel staan gecentreerd bovenaan  */
.hero__trust {
    position: relative;
    z-index: 3;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.hero__stack {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero__stack li {
    margin: 0;
    padding: 0 22px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    flex: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.hero__stack li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.hero__stack li::after { display: none; }

.hero__stack img {
    width: auto;
    height: 26px;
    object-fit: contain;
    display: block;
}

/*  de twee kolommen  */
.hero__center {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(30px, 3.4vw, 46px) var(--gut) clamp(20px, 2.4vw, 34px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
    z-index: 2;
}

.hero__copy .eyebrow { margin-bottom: 24px; }

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: clamp(28px, 3vw, 38px);
}

/*  drie kleine pluspunten onder de knoppen  */
.hero__usps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: clamp(26px, 3vw, 36px) 0 0;
    padding: 0;
    list-style: none;
}

.hero__usps li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-2);
    flex: 1 1 0;
    min-width: 0;
    max-width: 17ch;
}

.hero__usps li::after { display: none; }

.hero__usps .ico {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--brand);
}

.hero__usps .ico svg { width: 100%; height: 100%; display: block; }

/*  BEELDPANEEL
    ---------------------------------------------
    Het paneel loopt aan de rechterkant door tot buiten de wrap en
    heeft links een schuine rand, zoals in het ontwerp.            */
/*  Het paneel loopt iets boven de tekstkolom uit en is wat hoger dan de
    tekst, zoals in het voorbeeld. De negatieve bovenmarge trekt het omhoog
    richting de logobalk; align-self: stretch maakt het paneel daardoor
    hoger in plaats van dat het opschuift.                              */
.hero__panel {
    position: relative;
    align-self: stretch;
    margin-top: -44px;
    margin-bottom: -12px;
    min-height: clamp(340px, 41vw, 520px);
}

.hero__shot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /*  Doorlopen tot precies de rechterrand van het scherm: de afstand van de
        rechterkant van de wrap tot de schermrand is (100vw - wrap)/2 plus de
        binnenmarge. Er zat 40px extra bij, en daardoor viel de achterkant van
        de auto buiten beeld.                                              */
    width: calc(100% + (100vw - var(--wrap)) / 2 + var(--gut));
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
    background: var(--paper-2);
}

.hero__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*  DE SCHUINE RAND
    ---------------------------------------------
    Een witte vorm die over de linkerkant van het beeld ligt. Eerder deed
    clip-path dit, daarna een masker, maar Chrome tekent die beide zonder
    antialiasing: de schuine rand en de twee bochten werden een trapje. Een
    gewone svg-vorm wordt wel uitgevloeid getekend.

    De vulling volgt de achtergrond van de hero via currentColor, dus als
    --paper verandert, verandert de rand mee.

    preserveAspectRatio="none" met een viewBox van 100x100 maakt de
    coordinaten in het pad gelijk aan procenten van het paneel.          */
.hero__wedge {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    color: var(--paper);
    pointer-events: none;
}

.hero__wedge path { fill: currentColor; }

/*  ronde speelknop midden op het beeld  */
.hero__play {
    position: absolute;
    left: 46%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: clamp(58px, 6vw, 76px);
    height: clamp(58px, 6vw, 76px);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 12px 30px rgba(223,34,39,.38);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: transform .4s var(--ease), background .4s var(--ease);
}

.hero__play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--brand-dark); }

.hero__play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 17px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

/*  de zwevende kaartjes  */
.hcard {
    position: absolute;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    transition: transform .5s var(--ease);
}

.hcard:hover { transform: translateY(-4px); }

.hcard__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    white-space: nowrap;
}

.hcard__note {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-2);
    margin: 8px 0 0;
    white-space: nowrap;
}

.hcard__logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}

.hcard__logos img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: block;
    object-fit: contain;
}

/*  kaartje 1: Meta Ads, rechtsboven  */
.hcard--meta { top: 4%; right: 2%; }

/*  kaartje 2: Google Vehicle Ads, linksonder  */
.hcard--google {
    bottom: 8%;
    left: -6%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hcard--google img {
    width: 34px;
    height: 34px;
    flex: none;
    display: block;
}

.hcard--google .hcard__note { margin-top: 3px; }

/*  kaartje 3: Tekst-generator, rechtsonder, met grijze regels  */
.hcard--tekst { bottom: 2%; right: 6%; width: 190px; }

.hcard--tekst .hcard__head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hcard--tekst .hcard__head img {
    width: 22px;
    height: 22px;
    flex: none;
    display: block;
}

.hcard__lines {
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

.hcard__lines span {
    height: 7px;
    border-radius: 4px;
    background: var(--line);
    display: block;
}

.hcard__lines span:nth-child(1) { width: 100%; }
.hcard__lines span:nth-child(2) { width: 86%; }
.hcard__lines span:nth-child(3) { width: 94%; }
.hcard__lines span:nth-child(4) { width: 62%; }

/*  ============================================================
    PRODUCTEN - vijf kaarten
    ============================================================ */
.prods {
    position: relative;
    background: var(--paper);
    padding: clamp(28px, 3.2vw, 44px) 0 clamp(30px, 4vw, 48px);
}

/*  Breed genoeg om 'Onze producten die jouw voorraad laten verkopen' op een
    regel te houden; op 760px viel 'laten verkopen' naar de tweede regel.  */
.prods__head {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto clamp(30px, 3.4vw, 44px);
}

.prods__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.prod {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 14px 20px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.prod:hover,
.prod:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-2);
}

.prod__shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
}

.prod__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease);
}

.prod:hover .prod__shot img { transform: scale(1.05); }

/*  het ronde logo hangt over de bovenrand van het beeld  */
.prod__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(22,32,46,.20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod__badge img {
    width: 23px;
    height: 23px;
    display: block;
    object-fit: contain;
}

/*  Video en Tekst hebben een compleet app-icoon met eigen achtergrond;
    die mag het rondje bijna vullen. De platformlogo's zijn transparant
    en houden hun witte marge.                                        */
.prod__badge--fill img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.prod__body {
    padding: 20px 8px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prod h3 {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.prod p {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.62;
    font-weight: 400;
    color: var(--muted);
    margin: 0;
}

/*  de rode pijl onderaan  */
.prod__go {
    margin-top: 22px;
    width: 26px;
    height: 12px;
    position: relative;
    color: var(--brand);
    flex: none;
}

.prod__go::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width .4s var(--ease);
}

.prod__go::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .4s var(--ease);
}

.prod:hover .prod__go::before { width: 26px; }
.prod:hover .prod__go::after { transform: rotate(45deg) translate(3px, -3px); }

/*  ============================================================
    PLUSPUNTEN - vier vakken in een lichte strook
    ============================================================ */
.usps {
    background: var(--paper);
    padding: clamp(30px, 4vw, 48px) 0 clamp(58px, 7vw, 92px);
}

.usps__panel {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4vw, 52px) clamp(14px, 2vw, 26px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.usp {
    text-align: center;
    padding: 0 clamp(14px, 2vw, 26px);
    border-right: 1px solid var(--line-2);
}

.usp:last-child { border-right: 0; }

.usp__ico {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--brand-tint);
    box-shadow: 0 4px 14px rgba(223,34,39,.10);
    color: var(--brand);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp__ico svg { width: 32px; height: 32px; display: block; }

.usp h3 {
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.usp p {
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/*  ============================================================
    VMS-BAND - de voorraadsystemen waar wij op aansluiten
    ============================================================ */
.vms {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.vms__head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto clamp(34px, 4vw, 50px);
    padding: 0 var(--gut);
}

.vms__title {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
}

.vms__title strong { color: var(--brand); font-weight: 800; }

.vms__intro {
    font-size: 15px;
    line-height: 1.68;
    color: var(--muted);
    margin: 14px 0 0;
}

/*  de band staat twee keer in de html, dat maakt de lus naadloos  */
.vms__belt {
    display: flex;
    width: max-content;
    gap: 64px;
    animation: belt 46s linear infinite;
    will-change: transform;
}

.vms__belt:hover { animation-play-state: paused; }

@keyframes belt {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.vms__belt ul {
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.vms__belt li { padding: 0; margin: 0; flex: none; }
.vms__belt li::after { display: none; }

.vms__belt img {
    height: 34px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .5;
    transition: opacity .4s var(--ease), filter .4s var(--ease);
}

.vms__belt li:hover img { filter: none; opacity: 1; }

.vms__foot {
    text-align: center;
    margin-top: clamp(34px, 4vw, 50px);
    padding: 0 var(--gut);
}

/*  ============================================================
    CIJFERS
    ============================================================ */
.fig {
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
}

.fig__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(38px, 4.5vw, 58px);
}

.fig__head .lead { margin-left: auto; margin-right: auto; }

.fig__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fig__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 34px 24px;
    text-align: center;
}

.fig__n {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(30px, 3.2vw, 42px);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--brand);
}

.fig__l {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 13px;
}

.fig__src {
    text-align: center;
    font-size: 12px;
    color: var(--muted-2);
    margin: 26px 0 0;
}

/*  ============================================================
    WAAROM - vier genummerde kaarten
    ============================================================ */
.edge {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.edge__top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    margin-bottom: clamp(34px, 4vw, 50px);
}

.edge__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.edge__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 26px;
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.edge__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/*  In het donkere ontwerp stond hier een foto als achtergrond. Op wit
    werkt dat niet, dus de kaart is nu tekst met een rood nummer.     */
.edge__card img { display: none; }

.edge__n {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--brand);
    margin-bottom: 16px;
}

.edge__card h3 {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.28;
    color: var(--ink);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.edge__card p {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

/*  ============================================================
    BEREIK
    ============================================================ */
.rch {
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
}

.rch__center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 70px);
    align-items: start;
}

.rch__panel {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(26px, 3vw, 38px);
}

.rch__panel_title {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 20px;
}

.rch__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
}

.rch__list li {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink);
}

.rch__list li:last-child { border-bottom: 0; }
.rch__list li::after { display: none; }

.rch__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-tint);
    position: relative;
    flex: none;
}

.rch__check::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 5px;
    height: 8px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}

.rch__list strong { font-weight: 600; color: var(--ink); }

.rch__list em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.rch__panel_note {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/*  ============================================================
    APPS
    ============================================================ */
.app2 {
    background: var(--paper-2);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.app2__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(34px, 4vw, 52px);
}

.app2__head .lead { margin-left: auto; margin-right: auto; }

.app2__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.app2__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: clamp(26px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.app2__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.app2__icon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

.app2__card h3 {
    font-family: var(--f-body);
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.app2__card p {
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

.app2__card .tlink { margin-top: 20px; align-self: flex-start; }

.app2__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 26px;
}

.app2__stores img {
    height: 42px;
    width: auto;
    display: block;
    border-radius: 6px;
}

/*  ============================================================
    START-BLOK - staat op elke pagina boven de footer
    ============================================================ */
.start {
    font-family: var(--f-body);
    background: var(--paper);
    padding: clamp(58px, 7vw, 96px) 0;
    border-top: 1px solid var(--line);
}

.start__center {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(36px, 4.5vw, 70px);
    align-items: start;
}

.start__list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 12px;
}

.start__list li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.start__list li::after { display: none; }

.start__list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}

.start__scope {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted-2);
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    max-width: min(56ch, 100%);
}

.start__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 36px);
}

.start__form_title {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 6px;
}

.start__form_sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 24px;
}

.start__field { margin-bottom: 15px; }

.start__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.start__form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.start__form input[type="text"]:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.start__form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 17px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.start__form input[type="submit"]:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
}

.start__form label.error {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 6px;
}

.start__note {
    font-size: 12px;
    color: var(--muted-2);
    margin: 15px 0 0;
    text-align: center;
}

/*  ============================================================
    FOOTER
    ============================================================ */
footer {
    font-family: var(--f-body);
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding: clamp(52px, 6vw, 84px) 0 30px;
}

footer .footer__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
}

footer .footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
    gap: clamp(34px, 5vw, 70px);
    padding-bottom: clamp(34px, 4.5vw, 52px);
    border-bottom: 1px solid var(--line-2);
}

footer .footer__logo {
    display: block;
    width: 162px;
    height: 38px;
    background: url('../img/logo-taggleauto.svg') no-repeat left center;
    background-size: contain;
    margin-bottom: 20px;
}

footer .footer__pitch {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 24px;
    max-width: min(42ch, 100%);
}

footer .footer__stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    display: inline-block;
}

footer .footer__stat strong {
    display: block;
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 31px);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--brand);
}

footer .footer__stat span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 7px;
}

footer .footer__links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

footer .footer__col_title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 16px;
}

footer .footer__col ul { list-style: none; padding: 0; margin: 0; }

footer .footer__col li {
    padding: 0;
    margin: 0 0 10px;
    font-size: 14px;
}

footer .footer__col li::after { display: none; }

footer .footer__col a {
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color .3s var(--ease);
}

footer .footer__col a:hover { color: var(--brand); }

/*  style.css geeft deze regel een border-top van #1e232b - bijna zwart, uit
    het donkere ontwerp. Op wit is dat een harde streep. De lichte lijn
    onder footer__top doet het werk al.                                  */
footer .footer__bottom {
    border-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
}

footer .footer__bottom p {
    font-size: 12.5px;
    color: var(--muted-2);
    margin: 0;
}

footer .footer__legal { display: flex; gap: 22px; }

footer .footer__legal a {
    font-size: 12.5px;
    color: var(--muted-2);
    text-decoration: none;
    transition: color .3s var(--ease);
}

footer .footer__legal a:hover { color: var(--brand); }

/*  ============================================================
    RESPONSIVE
    ============================================================ */
@media screen and (max-width: 1100px) {

    .hero__center {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /*  Het paneel liep met een schuine rand door tot buiten het scherm.
        In een kolom is dat een gewoon beeld over de volle breedte. De
        negatieve marges die het paneel op breed beeld omhoog trekken moeten
        hier weg, anders schuift het beeld over de regels erboven.       */
    .hero__panel {
        min-height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .hero__shot {
        position: relative;
        width: 100%;
        height: clamp(260px, 44vw, 400px);
        border-radius: var(--r-lg);
    }

    /* de schuine rand hoort bij de tweekolomsindeling */
    .hero__wedge { display: none; }

    .hcard--google { left: 2%; }
    .hcard--tekst { right: 3%; }

    .prods__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .usps__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usp:nth-child(2) { border-right: 0; }
    .usp:nth-child(1),
    .usp:nth-child(2) { padding-bottom: 34px; border-bottom: 1px solid var(--line-2); }
    .usp:nth-child(3),
    .usp:nth-child(4) { padding-top: 34px; }

    .fig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rch__center,
    .start__center { grid-template-columns: 1fr; }

    footer .footer__top { grid-template-columns: 1fr; }

}

@media screen and (max-width: 860px) {

    .prods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .edge__top { display: block; }
    .edge__top .pill { margin-top: 24px; }

    .app2__grid { grid-template-columns: 1fr; }

    footer .footer__links { grid-template-columns: repeat(2, 1fr); }

}

@media screen and (max-width: 640px) {

    :root { --r-xl: 22px; }

    .hero__stack { gap: 9px; }
    .hero__stack li { height: 44px; padding: 0 14px; }
    .hero__stack img { height: 19px; }

    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .pill { width: 100%; }

    .hero__usps { gap: 16px; }
    .hero__usps li { max-width: none; width: 100%; font-size: 13px; }

    /*  De kaartjes zouden op een klein scherm over de auto heen vallen
        en elkaar overlappen; daar zijn ze beter weg.                  */
    .hero__shot { height: clamp(210px, 52vw, 280px); }

    .hcard--meta,
    .hcard--google,
    .hcard--tekst { display: none; }

    .prods__grid { grid-template-columns: 1fr; }
    .fig__grid { grid-template-columns: 1fr; }
    .edge__grid { grid-template-columns: 1fr; }

    .usps__panel { grid-template-columns: 1fr; }
    .usp { border-right: 0; padding: 0 10px; }
    .usp:nth-child(1),
    .usp:nth-child(2),
    .usp:nth-child(3) { padding-bottom: 28px; border-bottom: 1px solid var(--line-2); }
    .usp:nth-child(2),
    .usp:nth-child(3),
    .usp:nth-child(4) { padding-top: 28px; }

    .vms__belt,
    .vms__belt ul { gap: 40px; }

    .vms__belt img { height: 26px; }

    footer .footer__links { grid-template-columns: 1fr; }
    footer .footer__bottom { flex-direction: column; align-items: flex-start; }

}

/*  ============================================================
    BEWEGING UIT
    ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .vms__belt { animation: none; }

    .rise {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .underline::after { transform: scaleX(1); transition: none; }

    .prod:hover,
    .edge__card:hover,
    .app2__card:hover,
    .hcard:hover,
    .pill:hover,
    .hero__stack li:hover {
        transform: none;
    }

}

/*  ============================================================
    SUBPAGINA'S
    ------------------------------------------------------------
    De homepage kreeg het lichte ontwerp; hieronder krijgen de
    overige pagina's dezelfde behandeling. Ze zijn opgebouwd uit
    een vaste set blokken - pagehero, feature, usps, reels,
    logowall, advice, contactpage, login, docs en leadform - dus
    het volstaat om die tien families opnieuw te zetten.

    style.css staat eerder in de reeks, dus regels met dezelfde
    zwaarte winnen hier. Waar style.css met een body-klasse werkt
    (.has-pagehero, .video-advertenties) is die klasse hier
    overgenomen om even zwaar te wegen.
    ============================================================ */

/*  SPRINGEN NAAR EEN SECTIE
    ---------------------------------------------
    De header plakt bovenaan en zou de bovenkant van een aangesprongen
    sectie bedekken; scroll-margin-top houdt daar rekening mee. Het rollen
    gaat zacht, behalve als iemand minder beweging heeft ingesteld.    */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

section[id],
[id="start"],
[id="advies"],
[id="producten"] {
    scroll-margin-top: 92px;
}

/*  CANVAS EN KOPPEN
    --------------------------------------------- */
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
}

body h1,
body h2,
body h3,
body h4 {
    font-family: var(--f-body);
    color: var(--ink);
    letter-spacing: -.02em;
    font-weight: 700;
}

body p,
body li {
    font-family: var(--f-body);
    color: var(--muted);
}

/*  HEADER - wit en plakkend op elke pagina
    ---------------------------------------------
    style.css zet de header op subpagina's absoluut en transparant,
    omdat hij daar over een donkere hero heen lag. Die hero is nu
    licht, dus dat wordt teruggedraaid.                          */
.has-pagehero header.top,
.video-advertenties header.top,
body.frontpage header.top,
header.top {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

body.is-scrolled header.top {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

header.top > article:first-of-type {
    max-width: var(--wrap);
    padding: 18px var(--gut);
}

/*  het donkere logo hoort bij de witte header  */
header a.logo_taggleauto {
    background-image: url('../img/logo-taggleauto.svg') !important;
}

nav.menufixed ul > li.btn > a {
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 600;
    position: relative;
}

nav.menufixed ul > li.btn > a:hover,
nav.menufixed ul > li.btn.active > a { color: var(--brand); }

/*  Geen ronde hoeken op de menu-items. style.css maakt er pillen van met
    border-radius: 300px, wat je bij hover ziet als een afgeronde vulling.
    De selector heeft een element meer dan die van style.css, zodat hij
    zeker wint - een gelijk zware regel bleek daar eerder niet genoeg.
    De knop Inloggen is wel een pil en houdt zijn ronding.             */
nav.menufixed section ul > li.btn:not(.secondary) > a {
    border-radius: 0;
}

/*  style.css geeft het actieve item ook een border-radius van 3px op de li
    zelf. De streep eronder is een inset-schaduw en volgde die ronding, dus
    hij liep aan de uiteinden krom.                                      */
nav.menufixed section ul > li.btn.active {
    border-radius: 0;
}

/*  De streep onder het actieve item is een inset-schaduw op de li.
    Drie eerdere pogingen liepen ergens op vast, vandaar deze:

    - een ::after op de link botst met het pijltje van het megamenu, dat
      diezelfde ::after gebruikt;
    - een position: relative op de li om daar een ::after op te hangen brak
      het megamenu: style.css zet het mega-item bewust op position: static,
      zodat het uitklapmenu met left/right: 0 de volle breedte van de balk
      pakt. Werd de li relatief, dan klapte het menu samen tot de breedte
      van het item zelf;
    - een achtergrondlijntje op de link kwam in de transition: all van
      style.css terecht en werd bij hover overschreven door de background-
      shorthand, met een schokkerige overgang als gevolg.

    Een inset-schaduw op de li heeft geen van die problemen: geen pseudo-
    element, geen position, en de li heeft geen eigen achtergrond of
    transitie die eroverheen gaat.                                       */
nav.menufixed ul > li.btn.active {
    box-shadow: inset 0 -2px 0 var(--brand);
}

/*  de knop Inloggen is een pil en krijgt geen streep  */
nav.menufixed ul > li.btn.secondary.active {
    box-shadow: none;
}

nav.menufixed .nav-icon { background-color: currentColor; }

nav.menufixed ul > li.btn.secondary > a {
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 100px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

nav.menufixed ul > li.btn.secondary > a:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.smallMenu { top: 17px; }

/*  ============================================================
    PAGINA-HERO
    ============================================================ */
/*  style.css legt hier twee donkere lagen over de hero (:before met een
    verloop, :after met een rode gloed). Die horen bij het oude donkere
    ontwerp en worden uitgezet.                                        */
.pagehero:before,
.pagehero:after {
    display: none;
}

/*  Zelfde opbouw als de hero op de homepage: tekst links, beeldpaneel
    rechts. Het paneel zelf (.hero__panel, .hero__shot, .hero__wedge) wordt
    hierboven al beschreven; hier staat alleen wat op een subpagina anders
    is - een lagere band en een kleinere kop.                            */
.pagehero {
    position: relative;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: clamp(20px, 2.4vw, 34px) 0 0;
    overflow: hidden;
}

.pagehero__center {
    position: relative;
    z-index: 2;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut) clamp(24px, 3vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    text-align: left;
}

.pagehero .hero__panel {
    margin: 0;
    min-height: clamp(230px, 25vw, 330px);
}

/*  De band is veel breder dan hoog. De foto die hier gebruikt wordt staat
    daarom op een breder doek (hero-car-wide.jpg): de auto beslaat 64% van
    de breedte in plaats van de volle breedte, dus hij staat kleiner in beeld
    en cover hoeft er nauwelijks iets af te snijden. Contain met een egale
    vulling erachter gaf zichtbare randen, omdat de studio in de foto zelf
    een verloop heeft.                                                    */
.pagehero .hero__shot {
    background: var(--paper-2);
}

/*  De marges op auto zijn hier het punt: style.css geeft de kop
    max-width: 900px met margin: 0, waardoor het kader links bleef staan en
    alleen de tekst erbinnen centreerde - de kop stond dan honderd pixels
    naast het midden.                                                    */
.pagehero h1 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -.025em;
    line-height: 1.14;
    color: var(--ink);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-wrap: balance;
}

.pagehero__intro {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.7;
    color: var(--muted);
    max-width: min(52ch, 100%);
    margin: 18px 0 0;
}

.pagehero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 16px 30px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.pagehero__cta:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}

/*  ============================================================
    TONEN
    ------------------------------------------------------------
    De blokken kunnen 'white' of 'grey' zijn. De tone 'dark' is uit
    de opmaak gehaald, maar staat hier voor de zekerheid ook licht,
    zodat een vergeten data-tone geen zwart vlak oplevert.
    ============================================================ */
.feature,
.usps,
.reels,
.logowall {
    background: var(--paper);
}

.feature[data-tone="grey"],
.usps[data-tone="grey"],
.reels[data-tone="grey"],
.logowall[data-tone="grey"],
.feature[data-tone="dark"],
.usps[data-tone="dark"],
.reels[data-tone="dark"],
.logowall[data-tone="dark"] {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.feature[data-tone="white"],
.usps[data-tone="white"] {
    background: var(--paper);
}

/*  ============================================================
    FEATURE - tekst met beeld of paneel ernaast
    ============================================================ */
.feature {
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.feature__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 4.5vw, 68px);
    align-items: center;
}

.feature[data-flip="true"] .feature__visual { order: -1; }

.feature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.feature__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.feature[data-tone] h2,
.feature h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    line-height: 1.18;
    color: var(--ink);
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.feature[data-tone] .feature__content p,
.feature__content p {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 0 0 15px;
}

.feature[data-tone] .feature__content ul li,
.feature__content ul li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.feature[data-tone] .feature__link,
.feature__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    transition: gap .35s var(--ease);
}

.feature__link:hover { gap: 14px; color: var(--brand-dark); }

/*  het beeld ernaast  */
.feature__visual img,
.feature__frame img,
.feature__videolink img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
}

/*  De carousel in een featureblok. De schermafbeeldingen erin zijn ruim
    1100px breed; zonder breedtebeperking liepen ze ongeschaald buiten de
    kolom en vulden ze het halve scherm. Dit geldt zowel voor de
    geinitialiseerde slider als voor de losse afbeeldingen ervoor.      */
.feature__visual .carousel {
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--r-lg);
}

.feature__visual .carousel > a,
.feature__visual .carousel .slick-slide {
    display: block;
    max-width: 100%;
}

.feature__visual .carousel img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
}

/*  staan de beelden nog onder elkaar omdat de slider niet is gestart, dan
    is er tenminste ruimte tussen  */
.feature__visual .carousel > a + a { margin-top: 14px; }

.feature__frame,
.feature__videolink {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: var(--shadow);
}

.feature__video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
}

/*  het paneel met een rij eigenschappen  */
.feature[data-tone] .feature__panel,
.feature__panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: clamp(24px, 3vw, 36px);
}

.feature[data-tone] .feature__panel_title,
.feature__panel_title {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 18px;
}

.feature__rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature[data-tone] .feature__rows li,
.feature__rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    margin: 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink);
}

.feature__rows li:last-child { border-bottom: 0; }
.feature__rows li::after { display: none; }

.feature[data-tone] .feature__rows li em,
.feature__rows li em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    flex: none;
}

/*  ============================================================
    USP-TEGELS
    ============================================================ */
.usps {
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.usps__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    text-align: center;
}

.usps__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.usps__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

/*  margin: 0 auto en niet margin: 0 - style.css geeft deze kop een
    max-width en centreert hem met auto-marges. Een reset naar margin: 0
    zet dat kader weer tegen de linkerkant, met een kop die dan naast de
    gecentreerde bovenregel en intro staat.                            */
.usps h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    line-height: 1.18;
    color: var(--ink);
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-wrap: balance;
}

.usps__intro {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    max-width: min(62ch, 100%);
    margin: 16px auto 0;
}

.usps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(32px, 4vw, 48px);
    text-align: left;
}

.usps[data-tone] .usps__card,
.usps__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 24px;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.usps__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/*  De pictogrammen komen uit style.css als background-image. Onze eigen
    lijntekeningen wijzen hieronder naar de -brand.svg varianten, zodat ze
    in de merkkleur staan; de logo's van Meta, Google en WhatsApp houden
    hun eigen kleur.                                                    */
.usps[data-tone] .usps__icon,
.usps__icon {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.usps__icon[data-icon="automatic"] { background-image: url('../img/icons/icon-usp-automatic-brand.svg'); }
.usps__icon[data-icon="campaign"]  { background-image: url('../img/icons/icon-usp-campaign-brand.svg'); }
.usps__icon[data-icon="catalog"]   { background-image: url('../img/icons/icon-usp-catalog-brand.svg'); }
.usps__icon[data-icon="stats"]     { background-image: url('../img/icons/icon-usp-stats-brand.svg'); }
.usps__icon[data-icon="play"]      { background-image: url('../img/icons/icon-play-brand.svg'); }
.usps__icon[data-icon="whatsapp"]  { background-image: url('../img/icons/icon-whatsapp-brand.svg'); }

.usps__card h3 {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.usps__card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

.usps__panel {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 36px);
    margin-top: clamp(28px, 3.4vw, 42px);
    text-align: left;
}

/*  ============================================================
    REELS - verticale advertentievideo's
    ============================================================ */
.reels {
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.reels__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    text-align: center;
}

.reels__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.reels__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.reels h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-wrap: balance;
}

.reels__intro {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    max-width: min(62ch, 100%);
    margin: 16px auto 0;
}

/*  Een reels__item is de kaart: daarin zit reels__link met het beeld en de
    speelknop, en daaronder reels__caption met de naam en de duur. De items
    zijn standaard staand (9:16, de advertentieformaten); met
    data-shape="landscape" zijn het liggende themavideo's.               */
.reels__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(32px, 4vw, 48px);
}

.reels__grid[data-shape="landscape"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.reels__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.reels__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.reels__item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/*  De verhoudingen komen uit style.css en blijven staan: de staande
    advertenties zijn 9:16 met cover, de themavideo's 4:3 met contain omdat
    ze onderling van formaat verschillen. Alleen de ondergrond wordt hier
    donker gezet, zodat de letterbox eromheen als videovlak leest in plaats
    van als wit gat in de kaart.                                         */
.reels__link {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ink);
    text-decoration: none;
    margin: 0;
}

.reels__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 8px 20px rgba(223,34,39,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s var(--ease);
}

.reels__item:hover .reels__play { transform: translate(-50%, -50%) scale(1.08); }

.reels__play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 12px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/*  de regel onder het beeld: naam links, duur rechts  */
.reels__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 13px 16px;
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    text-shadow: none;
}

.reels__caption span {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-2);
}

/*  ============================================================
    LOGOWAND - integraties per groep
    ============================================================ */
.logowall {
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.logowall__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
}

.logowall__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.logowall__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.logowall h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.logowall__text,
.logowall__note {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 0 0 10px;
}

.logowall__note { font-size: 13px; color: var(--muted-2); }

.logowall__group { margin-top: clamp(34px, 4vw, 52px); }

/*  style.css zet een streep tussen twee groepen en boven de slotregel. Die
    lijnen zweven los over de pagina; de witruimte doet het scheiden al.  */
.logowall__group + .logowall__group { border-top: 0; padding-top: 0; }
.logowall__note { border-top: 0; padding-top: 0; }

/*  In de kop van een groep staan het label met het aantal, de titel en een
    korte toelichting onder elkaar. Titel links, toelichting rechts, met de
    lijn eronder als scheiding met de logo's.                            */
.logowall__head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(24px, 4vw, 60px);
    margin-bottom: 22px;
}

.logowall__head .logowall__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 14px;
}

.logowall__head h2 {
    font-size: clamp(21px, 2.2vw, 27px);
    margin: 0;
}

.logowall__head .logowall__text {
    margin: 0;
    padding-bottom: 4px;
}

.logowall__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: 10px;
    border-radius: 100px;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.logowall__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.logowall__tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.logowall__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.logowall__tile img {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

/*  ============================================================
    ADVIESBLOK - de CTA op de subpagina's
    ============================================================ */
.advice {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.advice__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(34px, 4.5vw, 68px);
    align-items: start;
}

.advice__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.advice__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.advice h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    line-height: 1.18;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.advice__text {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 0;
}

.advice__contact {
    font-size: 15px;
    color: var(--ink);
    margin: 20px 0 0;
}

.advice__contact a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.advice__photo img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
    margin-top: 24px;
}

.advice__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 36px);
}

.advice__field { margin-bottom: 15px; }

.advice__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.advice__form input[type="text"],
.advice__form textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.advice__form textarea { resize: vertical; min-height: 90px; }

.advice__form input[type="text"]:focus,
.advice__form textarea:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.advice__form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 17px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.advice__form input[type="submit"]:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
}

.advice__form label.error {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 6px;
}

.advice__note {
    font-size: 12px;
    color: var(--muted-2);
    margin: 15px 0 0;
    text-align: center;
}

/*  ============================================================
    CONTACTPAGINA
    ============================================================ */
.contactpage {
    background: var(--paper);
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.contactpage__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 4.5vw, 68px);
    align-items: start;
}

.contactpage__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 18px;
}

.contactpage__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.contactpage h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.contactpage__text {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 0 0 24px;
}

/*  style.css zet hier een streep boven; die hoorde bij de lijst met
    strepen die nu weg is.                                            */
.contactpage__company {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 22px 0 0;
    padding-top: 0;
    border-top: 0;
}

.contactpage__details,
.contactpage__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*  Geen streep tussen de regels: het waren er drie kort onder elkaar en dat
    leest als losse onderstrepingen in plaats van als een lijst.         */
.contactpage__details li,
.contactpage__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    margin: 0;
    border-bottom: 0;
    font-size: 14.5px;
    color: var(--ink);
}

/*  De labels Telefoon, E-mail en Bezoekadres zijn verschillend lang. Naast
    elkaar in een flexrij begon de waarde daardoor bij elke regel op een
    andere plek. Een vaste kolom voor het label zet de waarden onder
    elkaar.                                                             */
.contactpage__row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
}

.contactpage__row strong {
    font-weight: 700;
    color: var(--ink);
}

.contactpage__details li::after,
.contactpage__list li::after { display: none; }



.contactpage__details a,
.contactpage__list a {
    color: var(--ink);
    text-decoration: none;
}

.contactpage__details a:hover,
.contactpage__list a:hover { color: var(--brand); }

.contactpage__icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contactpage__icon img { width: 15px; height: 15px; display: block; }

/*  De kaart staat in de opmaak buiten de kolommen en liep daardoor van
    rand tot rand. Hier krijgt hij dezelfde breedte als de inhoud, zodat de
    afgeronde hoeken ook echt te zien zijn.                              */
.contactpage__map {
    max-width: calc(var(--wrap) - 2 * var(--gut));
    margin: clamp(30px, 4vw, 48px) auto 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.contactpage__map iframe { height: 380px; }

.contactpage__map iframe,
.contactpage__map img {
    width: 100%;
    display: block;
    border: 0;
}

.contactpage__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 36px);
}

.contactpage__field { margin-bottom: 15px; }

.contactpage__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.contactpage__form input[type="text"],
.contactpage__form textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
}

.contactpage__form textarea { resize: vertical; min-height: 110px; }

.contactpage__form input[type="text"]:focus,
.contactpage__form textarea:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.contactpage__form input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 17px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease), transform .35s var(--ease);
}

.contactpage__form input[type="submit"]:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
}

.contactpage__form label.error {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 6px;
}

.contactpage__note {
    font-size: 12px;
    color: var(--muted-2);
    margin: 15px 0 0;
    text-align: center;
}

/*  ============================================================
    INLOGGEN EN WACHTWOORD VERGETEN
    ============================================================ */
.login,
.vergeten {
    background: var(--paper-2);
    padding: clamp(52px, 7vw, 96px) 0;
    min-height: 60vh;
}

.login__center {
    max-width: 470px;
    margin: 0 auto;
    padding: 0 var(--gut);
}

.login__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(26px, 3vw, 40px);
}

.login h1,
.login h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(21px, 2.2vw, 27px);
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.login__text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 24px;
}

.login__field { margin-bottom: 15px; }

.login__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}

.login input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 16px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
    transition: background .35s var(--ease);
}

.login input[type="submit"]:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.login__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.login__remember,
.login__back {
    font-size: 13.5px;
    color: var(--muted);
}

.login__remember label { color: var(--muted); }

.login a,
.login__back a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.login__error {
    background: var(--brand-tint);
    border: 1px solid rgba(223,34,39,.28);
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 13.5px;
    color: var(--ink);
    margin: 0 0 18px;
}

/*  ============================================================
    DOCUMENTATIE
    ============================================================ */
.docs {
    background: var(--paper);
    padding: clamp(48px, 6vw, 82px) 0;
}

.docs__center {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gut);
}

.docs__row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.docs__aside {
    position: sticky;
    top: 96px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
}

.docs__nav_title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 14px;
}

.docs__nav { list-style: none; padding: 0; margin: 0; }

.docs__nav li {
    padding: 0;
    margin: 0 0 9px;
    font-size: 14px;
}

.docs__nav li::after { display: none; }

.docs__nav a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color .3s var(--ease);
}

.docs__nav a:hover { color: var(--brand); }

.docs__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 16px;
}

.docs__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}

.docs h1,
.docs h2 {
    font-family: var(--f-body);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
    padding: 0;
    border: 0;
}

.docs h1 { font-size: clamp(25px, 3vw, 36px); margin: 0 0 16px; }
.docs h2 { font-size: clamp(19px, 2.1vw, 25px); margin: 34px 0 14px; }

.docs h3 {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 24px 0 10px;
    padding: 0;
    border: 0;
}

.docs__content p,
.docs__block p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0 0 14px;
}

.docs__block { margin-bottom: 30px; }

/*  codeblok  */
.docs__code {
    background: var(--ink);
    border-radius: var(--r);
    overflow: hidden;
    margin: 16px 0 22px;
}

.docs__code_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.docs__code_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
}

.docs__copy {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 0;
    border-radius: 100px;
    padding: 6px 13px;
    cursor: pointer;
}

.docs__copy:hover { background: var(--brand); }

.docs__code pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #E8EBEF;
}

.docs__code code { font-family: inherit; color: inherit; }

.tok-tag  { color: #8FB9F0; }
.tok-attr { color: #C6A6F0; }
.tok-str  { color: #9FD6A0; }
.tok-var  { color: #F0B37A; }

/*  stappen  */
.docs__steps { list-style: none; padding: 0; margin: 18px 0 24px; }

.docs__step {
    position: relative;
    padding: 0 0 0 46px;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.docs__step::after { display: none; }

.docs__step_num {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docs__callout {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    margin: 18px 0 24px;
}

.docs__callout p { margin: 0; font-size: 14px; color: var(--ink-2); }

.docs__table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14px;
}

.docs__table th,
.docs__table td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.docs__table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    background: var(--paper-2);
}

.docs__support {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-top: 34px;
}

/*  ============================================================
    LEADFORMULIER (kale pagina)
    ============================================================ */
.leadform {
    background: var(--paper-2);
    padding: clamp(34px, 4vw, 60px) 0;
    min-height: 100vh;
}

.leadform__center {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--gut);
}

.leadform__brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.leadform__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    padding: clamp(24px, 3vw, 40px);
}

.leadform__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 0 0 14px;
}

.leadform h1 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.leadform__text {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 0 0 22px;
}

.leadform__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 15px;
}

.leadform__field { margin-bottom: 15px; }

.leadform__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}

.leadform input[type="text"],
.leadform textarea,
.leadform select {
    width: 100%;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink);
}

.leadform input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 100px;
    padding: 17px 30px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(223,34,39,.26);
}

.leadform__notice {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.leadform__notice_title {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin: 0 0 8px;
}

.leadform__product,
.leadform__productname,
.leadform__productmarks,
.leadform__provider,
.leadform__note,
.leadform__vwe,
.leadform__body {
    color: var(--muted);
    font-size: 14px;
}

.leadform__productname {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
}

/*  ============================================================
    MIDDEN-BLOK
    ============================================================ */
.middle {
    background: var(--paper);
    padding: clamp(52px, 6.5vw, 92px) 0;
}

.middle h2 {
    font-family: var(--f-body);
    font-weight: 800;
    font-size: clamp(23px, 2.6vw, 32px);
    letter-spacing: -.025em;
    color: var(--ink);
}

/*  ============================================================
    RESPONSIVE - SUBPAGINA'S
    ============================================================ */
@media screen and (max-width: 1100px) {

    /*  Deze regels horen in het subpagina-mediablok en niet in dat van de
        homepage: dat laatste staat eerder in het bestand, waardoor de
        tweekolomsregel er daarna weer overheen ging.                    */
    .pagehero__center {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pagehero .hero__panel { min-height: 0; }

    .feature__center,
    .advice__center,
    .contactpage__center { grid-template-columns: 1fr; }

    .feature[data-flip="true"] .feature__visual { order: 0; }

    .usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .logowall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .docs__row { grid-template-columns: 1fr; }

    .docs__aside { position: static; }

}

@media screen and (max-width: 640px) {

    .usps__grid { grid-template-columns: 1fr; }
    .reels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logowall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .leadform__row { grid-template-columns: 1fr; }

    .login__row { flex-direction: column; align-items: flex-start; }

}