/* GLOBAL */

body { overflow: auto; background: white; font: 16.5px Roboto; line-height: 25px; }

a:link { text-decoration: none; }

.content { width: 80%; margin: 0 auto; max-width: 1440px; }
.BasicWebMenu .mobileOnly { display: none; }
.mobile .BasicWebMenu .mobileOnly { display:inherit; }
.BasicWebForm .data { margin-left: 20px; }
.BasicWebForm .label { font-weight: bold; }
.BasicWebView .filter { cursor: pointer; }
input[type="text"], textarea { font: 16.5px Roboto; border: 1px solid #EBEBEB; border-radius: 5px; }

/*.rotator { opacity: 0; transition: .5s opacity; }
.rotator.on { opacity: 1; }*/
.logos0 { display: inline-flex; flex-wrap: wrap; }
.block.top { background: white url(image/homebg.jpg); background-size: cover; background-position: center; min-height: calc(100vh - 210px); color: white; padding-bottom: 40px;}
.block.top .row { padding: 200px 0; }
.row.header { padding: 50px 0; background: #fffffff0; width: 100%; }
.block { position: relative; }
.block.top .row.header { position: fixed; top: 0; z-index: 10; transition: .5s;  -webkit-backface-visibility: hidden; }
.block.top .row.header .content { display: grid; grid-template-columns: 1fr 100fr; }
.row.footer { padding: 50px 0; background: #fffffff0; font-family: Swiss721 BT; font-weight: 700; font-style: Bold Extended; font-size: 35px; leading-trim: NONE; line-height: 45px; letter-spacing: 0%; }

.calque { position: absolute; z-index: 1; pointer-events: none; }
.calque img { max-height: 30vh; }
@media (min-width: 561px) {
  .kolom2 { display: grid; grid-template-columns: 1fr 1fr; }
}

img.hamburger { height: 21px; margin: 7px 20px 18px 0; }
.hamburgermenu, .menus { display: inline-block; }
.menus { display: grid; grid-template-columns: 1fr 10fr 1fr; }
.menus .logo { width: 300px; }
.BasicWebMenu { width: unset; max-width: inherit; margin: 0; }
.hamburgermenu .clicky-menu { display: inline-block; background: #F6FAFE; border: 1px solid #cccc; }
.Menu2026 { animation: slide .8s forwards; margin-top: -300px; grid-column: span 2; }
@keyframes slide { 100% { margin-top: 50px; } }
.clicky-menu > li { flex: none; }
.BasicWebMenu.homemenu { display: inline-block; vertical-align: top; max-width: none; margin-top: -10px; }
.homemenu .menu { flex-wrap: nowrap; justify-content: space-evenly; }
.BasicWebMenu.homemenu .clicky-menu > li { flex: auto; }
.opdrachtgevers0 {
  display: flex;flex-wrap: wrap;
  img { max-height: 20vw; }
}

.menu a { 
  font-family: Swiss721 BT; font-weight: 400; font-style: Extended; font-size: 16px; leading-trim: NONE; line-height: 22px; letter-spacing: 5%; color: #29275C; 
  @media (max-width: 560px) { white-space: wrap; }
}
.menu.V, .menu.V a { padding: 0; }
.menu { padding: 0px; }

@media (max-width: 900px){ 
  .content { width: 96%; }
  .BasicWebMenu.homemenu, .BasicWebNav.zoekmenu0 { display: none; }
  .menus .logo { width: 70vw; }
  .intro { min-width: 80vw; }
  .block.top .row { 
    padding: unset; margin-top: 120px; 
  &.header { padding: 10px 0 !important; margin-top: 0; }
  }
}



.button { cursor: pointer; }
.button.big { 
  font-family: Swiss721 BT; font-weight: 400; font-style: Black Extended; font-size: 18px; leading-trim: NONE; line-height: 24px; letter-spacing: 0%; text-align: center; 
  @media (max-width: 560px) { margin-top: 12px;}
}
.button a, .button.direct, .BasicWebFormSubmit button { padding: 12px 24px; border-radius: 50px; font-weight: bold; position: relative; margin-right: 20px; }
.button a:hover, .button.direct:hover, .BasicWebFormSubmit button :hover {box-shadow: 1px 1px 5px 2px #ccc; }
.button.big a { padding-right: 60px; }
.button.big a::before, .button.big.direct:before { content: ''; background-image: url(image/arrow.png); position: absolute; pointer-events: none; width: 40px; height: 40px; background-size: cover; right: 4px; top: 3px; }
.button.blue.big a::before, .button.blue.big.direct:before { background-image: url(image/arrowb.png); }
.button a:hover::before, .BasicWebFormSubmit button:hover::before { transform: rotate(45deg); transition: .3s; }
.button.green a { background: #00A062; color: white; }
.button.blue a, .button.blue.direct, .BasicWebFormSubmit button { background: #29275C; color: white; cursor: pointer; }
.button.white a { background: white; color:  #00A062; }
.button.big.white a::before { content: ''; background-image: url(image/arrowbg.png); position: absolute; pointer-events: none; width: 40px; height: 40px; background-size: cover; right: 4px; top: 3px; }
.button.lightgrey a span { background: #EBEBEB; }
.button.lightgreen {  display: flex; align-items: center; background: #E9FEF6; color: #00A062; gap: 6px; padding: 6px 12px; border-radius: 6px; }
.button.lightgreen img { width: 18px; height: auto; display: block; }
.button.small { font-family: Swiss721 BT; font-weight: 400; font-style: Black Extended; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0%; text-align: center; }
.button.small a, .BasicWebFormSubmit button  { padding-right: 40px; }
.button.small a::before, .BasicWebFormSubmit button::before { content: ''; background-image: url(image/arrowbg.png); position: absolute; pointer-events: none; width: 20px; height: 20px; background-size: cover; right: 4px; top: 10px; }
.homemenu, .Menu2026 {
  li.selected a::before { 
    content: ''; background-image: url(image/arrow.png); transform: rotate(90deg); position: absolute; pointer-events: none; width: 20px; height: 20px; background-size: cover; right: 0px; top: 18px; 
    @media (max-width: 560px) { right: -20px; top: 8px;}
  }
  li:not(.selected):hover a::before { content: ''; background-image: url(image/arrow.png); transform: rotate(45deg); position: absolute; pointer-events: none; width: 20px; height: 20px; background-size: cover; right: 0px; top: 10px; }
}

.button.next { background: url(../image/pijltjeR.svg); background-repeat: no-repeat; background-size: cover; border: 0; width: 40px; height: 40px; margin: 10px; }
.button.previous { background: url(../image/pijltjeL.svg); background-repeat: no-repeat; background-size: cover; border: 0; width: 40px; height: 40px; margin: 10px; }
.button.first, .button.last { display: none; }

.zoekmenu0 { display: inline-block; }
.zoekmenu0 img { width: 35px; margin-bottom: 11px; }
.intromenu { margin: 0; }
.intromenu .clicky-menu > li { flex: initial; }

.clicky-menu a:hover { background: none; }

h1, h2 {
  font-family: Swiss721 BT; font-weight: 700; font-style: Bold Extended; font-size: 55px; leading-trim: NONE; line-height: 65px; letter-spacing: 0%; padding: 20px 0; margin: 0; position: relative; 
  @media (max-width: 560px){ font-size: 45px; }
}
h1.blue, h2.blue { background-image: linear-gradient(90deg, #29275C 19.18%, #9BB5DF 127.89%); background-clip: text; color: transparent; <!-- -webkit-text-stroke: 1px grey; --> }
h1.grey, h2.grey { background-image: linear-gradient(90deg, #29275C 0%, #9BB5DF 100%); background-clip: text; width: fit-content; color: transparent; <!-- -webkit-text-stroke: 1px grey; --> }
h1.white, h2.white { color: white; <!-- -webkit-text-stroke: 1px grey; --> }

h2 * { vertical-align: middle; display: inline-block; }
h2.metstreep:after { content: ' '; border-bottom: 7px solid #00A062; width: 35px; position: absolute; bottom: 5px; left: 0; overflow: auto; }
h2.metstreep.donker:after { ; border-bottom: 7px solid #008052; }
h2.metstreep.wit:after { ; border-bottom: 7px solid white; }

h3 {font-family: Swiss721 BT; font-weight: 700; font-style: Bold Extended; font-size: 35px; leading-trim: NONE; line-height: 65px; letter-spacing: 0%; position: relative; }
h3.blue { background-image: linear-gradient(90deg, #29275C 19.18%, #9BB5DF 127.89%); background-clip: text; width: fit-content; color: transparent; }
h3.extended { font-style: Extended; } 

h4 {font-family: Swiss721 BT; font-weight: 700; font-style: Extended; font-size: 27px; text-box: trim-both ex alphabetic; line-height: 35px; letter-spacing: 0%; }

h5 { margin: 6px 0; }

h6 {}

p.blue {color: #29275C; }
.p1 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 22px; text-box: trim-both ex alphabetic; line-height: 32px; letter-spacing: 2%; }
.p2 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 20px; text-box: trim-both ex alphabetic; line-height: 32px; letter-spacing: 2%; }
.p3 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 18px; text-box: trim-both ex alphabetic; line-height: 32px; letter-spacing: 2%; }
.intro { width: 40%; font-family: Swiss721 BT; font-weight: 400; font-style: Extended; font-size: 27px; text-box: trim-both ex alphabetic; line-height: 35px; letter-spacing: 0%; }
.intro1 {font-family: Swiss721 BT; font-weight: 600; font-style: Extended; font-size: 27px; text-box: trim-both ex alphabetic; line-height: 35px; letter-spacing: 0%; }
.intro2 {font-family: Swiss721 BT; font-weight: 400; font-style: Extended; font-size: 27px; text-box: trim-both ex alphabetic; line-height: 35px; letter-spacing: 0%; }
.footer h2 {
  margin: 0 auto; font-size: min(2.2vw, 50px);
  @media (max-width: 560px){ font-size: min(12vw, 50px); }
  img { 
    width: min(8.5vw, 150px); 
    @media (max-width: 560px){width: 40vw; margin: -4px; }
  }
}

ul.u1 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 22px; line-height: 32px; letter-spacing: 2%; } 
ul.u2 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 20px; line-height: 32px; letter-spacing: 2%; } 
ul.u3 {font-family: Roboto; font-weight: 400; font-style: Regular; font-size: 18px; line-height: 32px; letter-spacing: 2%; } 

.aibuddy, .aibuddyT { 
  position: fixed; width: 384px; height; 560px; right: 100px; bottom: 120px; z-index: 10; 
  .toggle {cursor: pointer; }
  @media (max-width: 560px) { display: none}
}
.toggler {
  @media (max-width: 560px) { display: none}
}

.learn { width: 80%; margin: 0 auto; max-width: 1440px; }
.pagecontainer { margin-top: 200px; }

.leerlijnen { background: url(image/calque2.svg),linear-gradient(360deg, #0F5E4F 5.28%, #009F62 63%); background-size: cover; min-height: calc(100vh - 210px); color: white; } 
.navLeerlijnen0 { text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.navLeerlijnen0 img { width: 100%; }
.leerlijn-aanbod { background-color: #F2FAF7; }

.vLeerlijnen .BasicWebViewRow { height: 450px; 
  .BasicWebViewCell {
    background-color: #E9FEF6; border-radius: 10px; 
    .prijs { color: #00A062; }
    .footer { border-top: 0;  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  }
}
.vLeerlijnen .header { display: none; }
.vPopulair .header { display: none; }

.vAanbod .BasicWebViewRow {
   .BasicWebViewCell {
   .footer { border-top: 0;  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    }
}

/* teaser blokken */

.block.incompany { background: white url(image/maninpak.png); background-size: cover; background-position: center; min-height: calc(100vh - 210px); color: white; position: relative; }
.block.opdrachtgevers { background: #9BB5DF; background-size: cover; min-height: 353px; color: white; }
.block.erkende-certificering { background: #9BB5DF; background-size: cover; min-height: 353px; color: white; }

.block.AI-SelectBuddy { background: #9BB5DF; background-size: cover; min-height: 353px; color: white; }
.block.AI-PrepBuddy { background: #F2FAF7; background-size: cover; min-height: 353px; color: white; }
.block.AI-TutorBuddy { background: #9BB5DF; background-size: cover; min-height: 353px; color: white; }
.block.AI-CoachBuddy { background: #F2FAF7 ; background-size: cover; min-height: 353px; color: white; }
.block.AI-ExamBuddy { background: #9BB5DF; background-size: cover; min-height: 353px; color: white; }
.block.Persoonlijke-AI h2.metstreep::after { border-bottom: 7px solid #ffff; width: 35px; }
.block.Persoonlijke-AI { background: linear-gradient(to right, #00A062, #CBD857); background-size: cover; min-height: 353px; color: white; }

.block.nieuwsbrief { background: #00A062; background-size: cover; min-height: 115px; color: white; }
.block.contact { background: #00A062; background-size: cover; min-height: 115px; color: white; }
.block.traineeships { background: white; background-size: cover; min-height: 115px; color: #29275C; }
.block.MS-certificering { background:#9BB5DF; background-size: cover; min-height: 353px; color: white; }
.block.NRTO-keurmerk { background: linear-gradient(to right, #00A062, #CBD857); background-size: cover; min-height: 353px; color: white; }
.block.NRTO-keurmerk h2.metstreep::after { border-bottom: 7px solid #ffff; width: 35px; }
.block.video { display: none;}
.block.studie { padding-top: 20px;}
.block.footer .media { 
  grid-area: 2/1;
  @media (max-width: 560px){ grid-area: 3/1; grid-column-start: 1; grid-column-end: auto; grid-column: span 2; }
}

/* USP */

:root{
  /* kleuren (vul exact vanuit Figma) */
  --THA_GREEN: #16a36a; /* <-- plak hier jouw Figma waarde */
  --THA_DARK_GREEN: #0f5b3f; /* <-- plak hier jouw Figma waarde */
  --TEKST_DONKER: #1f2a44; /* <-- plak hier jouw Figma waarde */
  --CIJFER_MINT: #cfeee4; /* <-- plak hier jouw Figma waarde */

  /* layout */
  --container-breedte: 1040px; /* pas aan als je Figma container anders is */
}

.waarom-wij{ background: #fff; padding: 64px 20px; }
.waarom-wij__container { width:100%; margin: 0 auto; }
.waarom-wij__titel{ margin: 0 0 28px; font-size: 39px; line-height: 52px; font-weight: 700; color: var(--TEKST_DONKER); letter-spacing: 0; position: relative; }
.waarom-wij__titel::after{ content: ""; display: block; width: 18px; height: 4px; background: var(--THA_GREEN); margin-top: 10px; border-radius: 999px; }
.waarom-wij__raster{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 44px; }
.waarom-wij__item{ padding-top: 8px; }
.waarom-wij__lijn{ width: 100%; height: 3px; background: var(--THA_GREEN); border-radius: 999px; margin-bottom: 18px; border-bottom: 3px solid var(--THA_GREEN); }
.waarom-wij__lijn2 { width: 100%; height: 3px; background: var(--THA_GREEN); border-radius: 999px; margin-bottom: 18px; border-bottom: 3px solid var(--THA_GREEN); }
.waarom-wij__lijn3 { width: 100%; height: 3px; background: var(--THA_GREEN); border-radius: 999px; margin-bottom: 18px; border-bottom: 3px solid var(--THA_GREEN); }
.waarom-wij__nummer{ font-size: 100px; line-height: 100px; font-weight: 300; color: var(--CIJFER_MINT); letter-spacing: 0; margin-bottom: 14px; }
.waarom-wij__kop,
.waarom-wij__tekst{ font-size: 16.5px; line-height: 25px; letter-spacing: 0; margin: 0; color: var(--TEKST_DONKER); }
.waarom-wij__kop{ font-weight: 700; }
.waarom-wij__tekst{ font-weight: 400; color: var(--TEKST_DONKER); max-width: 320px; }

/* === Responsive === */
@media (max-width: 900px){
  .waarom-wij__raster{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .waarom-wij__lijn3 { display: none; }
}
@media (max-width: 560px){
  .waarom-wij{
    padding: 48px 16px; 
  }
  .waarom-wij__raster{
    grid-template-columns: 1fr; 
    row-gap: 28px; 
  }
  .waarom-wij__tekst{
    max-width: none; 
  }
   .waarom-wij__lijn2 { display: none; }
   .waarom-wij__lijn3 { display: none; }
}





/* over ons */

.block.over-ons.top { background-image: url(image/overonsbg.jpg); color: black; }
.block.Contact.top { background-image: url(image/overonsbg.jpg); color: black; }
.navTeam0 { 
  display: flex; flex-wrap: wrap; gap: 30px; 
  @media (max-width: 560px){ flex-wrap: nowrap; overflow-x: auto; } 
}
.navTeam0 img {width: 300px; background: white; border-radius: 10px; box-shadow: 2px 2px 4px 2px grey; transition: transform .5s ease; }
.navTeam0 img:hover {transform: scale(1.1); }

.contact-cards { display: flex; justify-content: center; gap: 40px; padding: 40px 20px; flex-wrap: wrap; }
.card { background: #E9FFF8; width: 270px; padding: 30px 20px 35px; text-align: center; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.icon-circle { width: 55px; height: 55px; background: #009E55; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.icon-circle img { width: 45px; height: 45px; }
.card h3 { margin: 0 0 10px; color: #1A2C41; }
.card p { margin: 0; color: #1A2C41; line-height: 1.5; }


/* ai-buddy */
.block.ai-buddy.top { background-image: url(image/buddybg.jpg); color: white; }


/* trainingen */
.block.aanbod { background-color: #9BB5DF40; }
.block.trainingen.top { background-image: url(image/trainingenbg.jpg); color: black; }

.BasicWebView .filter .header { display: inline-block; line-height: 22px; padding: 9px; }
.BasicWebView .filter.zoekwoord .header { display: none; }

.vAanbod, .vExamen, .vWebinar, .vLocaties, .vLeerlijnen, .vStrippenkaart, .vStrippenkaart2, .vPopulair { 
  display: grid; 
 .BasicWebViewRows { 
    display: flex; flex-wrap: wrap; gap: 20px; grid-area: 2/1; 
    @media (max-width: 560px){ flex-wrap: nowrap; overflow-x: auto; } 
  }
  .BasicWebViewRow { 
    width: 400px; min-height: 300px; background: white; border-radius: 10px; box-shadow: 2px 2px 4px 2px grey; display: grid;
    @media (max-width: 500px){ width: 100%; min-width: 310px;margin: 4px; } 
    .button a { height: unset; margin-bottom: 15px; }
  }
  .BasicWebViewCell { 
     position: relative; display: block; height: 100%; padding: 2px 16px; 
     a { display: block; color: #29275C; height: calc(100% - 10px); }
     a > span { display: flex; flex-wrap: wrap; height: 100%; }
     .footer { align-self: flex-end; border-top: 2px solid #cfcfcf; width: 100%; padding: 10px 0 0; }
     .datum { float: right; }
      h3 { font-size: 27px; line-height: 100%; } 
      .aantal { font-size: 48px }
      .strippen { font-size: 20px } 
      .mark { 
        display: inline-block; padding: 6px 12px; border-radius: 5px; margin: 6px; .font: 13.5px Roboto; font-weight: 500; white-space: nowrap; 
        img { height: 20px; margin-top: 4px; }
      }
      . korting { padding: 10px; }
      .niveau { background: #9BB5DF50; color: #29275C; }
      .duur { background: #CFCFCF50; color: #29275C; }
      .certif, .korting { background: #00A06250; color: #00A062; }
      .meest { color: #00A062; }
      .plaatje { width: calc(100% + 32px); margin: -2px -16px; }
      .naam { display: block; font-family: Swiss721 BT; font-weight: 400; font-style: Extended; font-size: 27px; leading-trim: NONE; line-height: 35px; letter-spacing: 0%; }
      .tekst { font-family: Roboto; font-weight: 500; font-style: Medium; font-size: 13.5px; leading-trim: NONE; line-height: 21px; letter-spacing: 0%; }
      .prijs, vprijs { font-family: Swiss721 BT; font-weight: 400; font-style: Extended; font-size: 20px; leading-trim: NONE; line-height: 28px; letter-spacing: 0%; }
      .prijsinfo { margin: 12px 0; }
      .vprijs { margin-left: 15px; text-decoration: line-through; }
      .bespaar { display: block; }
      .actielabel { position: absolute; top: 20px; left: 100%; transform: rotate(90deg); transform-origin: top left; padding: 6px 16px; background: #FE4D00; white-space: nowrap; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; color: 
white; font-weight: bold; }
      .prijs.oud { text-decoration: 2px #E00C line-through; margin-left: 1em; }
    }
  .BasicWebViewResult { grid-area: 2/1; }
  .BasicWebViewResult  .header { font: 22px Roboto; margin: 20px; }
  .BasicWebViewTable { grid-area: 3/1; grid-column: span 2; display: grid; }
  .BasicWebViewPager.before { text-align: end; }
  .BasicWebViewPager { text-align: end; display: flex; align-items: center; align-content: space-evenly; justify-content: end; align-content: end; 
    &.hidden { display: none; }
    .button span { display: none; }
  }
  .filterBlock { border: 2px solid #EBEBEB; background-color: white; border-radius: 5px; padding: 20px; grid-area: 1/1; grid-column: span 2; }
  .filters { float: none; display: flex; flex-wrap: wrap; width: 100%; }
  .filters .filter { order: 2; background: none; }
  .filter { position: relative; color: black; font: 12px Swiss721 BT; border: 1px solid #ddd; border-radius: 30px; margin-right: 20px; padding: 0 26px 0 0; }
  .selecteer { position: absolute; max-height: 50vh; border: 2px solid #ddd; border-radius: 10px; z-index: 999; background: white; overflow: auto; display: none; }
  .selecteer .title { margin-left: 10px; margin-top: 10px; }
  fieldset { width: max-content; display: none; border: 0; }
  .filters .filter.zoekwoord { order: 1; width: 100%; font-size: 16.5px; border: 0; }
  .filters .filter.zoekwoord input { padding: 16px; width: calc(100% - 64px); background: #d9d9d933; border: 2px solid #ccc; border-radius: 10px; font-size: 16.5px; }
  .filterSummary { } 
  .selected { color: #29275C; font-size: 13,5px }

  .filters .filter.pijltje::before { background-image: url(image/pijltje.png); width: 20px; content: ''; height: 20px; background-size: cover; position: absolute; top: 10px; right: 6px; }
  .filters .filter:hover::before { transform: rotate(45deg); transition: .3s; }
  .filterSummary .summary { background-color: #CFCFCF50; border-radius: 10px; border: none; }
  .filters .filter.pijltje.empty { display: none; }
}

/* Leerportaal Learn */

.block.leerportaal.top { background: white; color: black; }


/* Alles over AI */
.block.aanbod { background-color: #9BB5DF40; }
.block.ai.top { background-image: url(image/aibg.jpg); color: black; }

/* leerlijnen */
.block.aanbod { background-color: #9BB5DF40; }
.block.leerlijnen.top { background-image: url(image/leerlijnenbg.jpg); color: black; }

/* strippenkaart */
.block.strippenkaart.top { background-image: url(image/strippenkaartbg.jpg); color: black; }
.vStrippenkaart .BasicWebViewResult { display: none; }
.vStrippenkaart .BasicWebViewRow { width: 530px; 
   .prijs { font-weight: bold; font-size: 28px; margin-top: 12px; margin: 24px 0; display: inline-block; }
  .vprijs, .bespaar { color: #00A062; }
}
.vStrippenkaart .BasicWebViewCell .korting { background: #00A06230; }
.vStrippenkaart2 .BasicWebViewCell .korting { background: #CFCFCF80; color: white; }
.vStrippenkaart2 .BasicWebViewCell .prijs { padding-top: 12px; display: inline-block; }

.block.strippenkaart { background: linear-gradient(0deg,#057060 18.81%,#009F62 82.51%); background-size: cover; color: white; position: relative; }
.block.cta-strippenkaart { background: #00A062; background-size: cover; min-height: calc(100vh - 210px); color: white; position: relative; }
.container { 
  display: flex; gap: 20px; 
  @media (max-width: 560px) { display: block; }
}
.kolom { flex: 1; padding: 20px; }
.block.strippenkaart h2.metstreep::after { border-bottom: 7px solid #ffff; width: 35px; }
.pakket { background: url(image/pakket.png); background-size: contain; min-height: calc(50vh - 180px); color: white; position: relative; }
.pakket p { margin-left: 25px; margin-top: 20px; }

.strippenkaart-voordeel { background: #057060; padding: 40px 20px; color: #ffffff; }
.strippenkaart-faq { background: white; padding: 40px 20px; color: #00A062; }
.usp-strippenkaart { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }



.price-compare{ display:flex; align-items:flex-end; gap:28px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.price-block{ display:flex; flex-direction:column; gap:6px; line-height:1; }
.price-label{ font-size:13px; font-weight:600; color:#6B7280; /* grijs */ }
/* Normale prijs (links) */
.price-block--normal .price-label{
  color:#5B4B8A; /* paarsig zoals in screenshot */
}
.price-block--normal .price-value{
  font-size:14px; 
  font-weight:600; 
  color:#5B4B8A; 
  text-decoration:line-through; 
  text-decoration-thickness:2px; 
  text-decoration-color:#5B4B8A; 
  opacity:.9; 
}

/* Jouw prijs (rechts) */
.price-block--your .price-label{ color:#10B981; /* groen */ }
.price-block--your .price-value{ font-size:24px; font-weight:800; color:#10B981; }

/* Optioneel: ? iets compacter/strakker */
.currency{   margin-right:4px; }



/* Responsive */
@media (max-width: 900px) { .usp-strippenkaart { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .usp-strippenkaart { grid-template-columns: 1fr; } }



/* strippenkaart overzicht */
.vStrippenkaart {
  .BasicWebViewRow { max-width: unset; color: #29275C; }
  ._44, ._48 { grid-column: span 2; }
  ._48 { 
    color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; background: #29275C; 
    @media (max-width: 560px) { grid-column:span 1; width: 302px;}
  }
  ._47 { grid-area: 3/1; }
  ._46 { grid-area: 3/2; }
  ._46 a { color: white; }
  ._49 { align-content: center; 
     @media (max-width: 560px) { grid-column:span 2; height: 100%; position: unset;}
 }
  ._49 a { color: white; height: unset; }
}
.vStrippenkaart2 {
  .BasicWebViewRow { max-width: unset; color: #29275C; }
  ._48 { border-top-left-radius: 10px; border-top-right-radius: 10px; }
  ._44, ._48 { color: white; background: #00A062; grid-column: span 2; }
  ._50, ._51 { grid-column: span 2; }
  ._50 { padding-top: 25px; padding-bottom: 25px; }
  ._47 { grid-area: 3/1; }
  ._46 { grid-area: 3/2; }
  ._46 a { color: white; }
  ._51 { align-content: center; margin: auto; }
  ._51 a { color: white; height: unset; }
}

/* algemene-kleurblokken */

.block.wit { background: white; background-size: cover; color: #29265B; position: relative; }
.block.lichtblauw { background: #9BB5DF; background-size: cover; min-height: calc(100vh - 210px); color: #29265B; position: relative; }
.block.donkerblauw { background: #29265B; background-size: cover; color: white; position: relative; }

/* algemeen buddy blok */

.block.buddy h2.metstreep::after { border-bottom: 7px solid #ffff; width: 35px; }
.block.buddy { background: linear-gradient(to right, #00A062, #CBD857); background-size: cover; min-height: 353px; color: white; }



/* Incompany landingspagina */

.block.incompany.top { background-image: url(image/incompanybg.jpg); color: white; position: relative; }
.block.werkwijze { background: white; background-size: cover; min-height: calc(100vh - 210px); color: white; position: relative; }
.block.office { background: #9BB5DF; background-size: cover; min-height: calc(100vh - 210px); color: white; position: relative; }

/* Alles over AI landingspagina */

.fotoblok-ai0 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fotoblok-ai0 img { max-width: 100%; }
.block.ai-trainingen { color: #29275C ; } 


/* webinars */

.block.ai-webinars { background: url(image/calque2.png),linear-gradient(360deg, #0F5E4F 5.28%, #009F62 63%); background-size: cover; min-height: calc(100vh - 210px); } 
.vWebinar {
  .BasicWebViewRow { max-width: unset; color: #29275C; }
  ._232 { color: #00A062; }
  ._224 { color: #00A062; } 
  ._230 { color: #00A062; }
}

/* FAQ */

.ToggleDIV { margin-top: 12px; padding: 10px; border-radius: 5px; }
.secties { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); border-radius: 10px; display: block; margin-top: 18px; }
.sectie { border: 1px solid rgba(16,51,98,.1); padding: 12px; position: relative; }
.BasicWebToggle { font: 24px Rubik; font-weight: bold; padding: 0 0 20px 30px; cursor: pointer; position: absolute; right: 14px; top: 14px; }
.sectie .open, .sectie.closed { cursor: pointer; }
.BasicWebToggle.open::before { content: "-"; }
.BasicWebToggle.closed::before { content: "+"; }

/* examens */
.block.aanbod { background-color: #9BB5DF40; }
.block.examens.top { background-image: url(image/examensbg.jpg); color: black; }

.BasicWebView .filter  {
  .header { display: inline-block; line-height: 22px; padding: 9px; color: #29275C; font-size: 12px; }
  img { width: 12px; margin-left: 6px; }
}
.BasicWebView .filter.zoekwoord .header { display: none; }

/* training */
.block.training.top { background-image: url(image/trainingenbg.jpg); color: black; }
.block.inhoud { background: #9BB5DF40; }

/* leerlijn */
.block.leerlijn.top { background-image: url(image/leerlijnenbg.jpg); color: black; }
.block.inhoud { background: #9BB5DF40; }

/* footer */
.block.footer { background: #29275C; background-size: cover; color: white; }
.BasicWebMenu.FooterMenu2026 { margin: 0; color: #9BB5DF; }
.BasicWebMenu.FooterMenu2026 .clicky-menu a { color: #9BB5DF; }
.BasicWebForm.aanvraag_nieuwsbrief { display: flex; align-items: center; }

.footermenu {display: inline-block; margin-right: 60px; }
.footermenu a { color: white; }
.media0 img { height: 50px; margin-right: 10px; }
.footer .menu a { color: inherit; }


/* print offerte */

.afdrukken { display: none;}


/* popup formulier */

.popup { color: #29275C; }