:root{--bg:#07090d;--bg2:#0c1118;--card:rgba(255,255,255,.075);--line:rgba(255,255,255,.13);--txt:#f7f7f8;--muted:#b8c0cc;--red:#d71920;--red2:#ff3b3b;--gold:#f1c76a;--green:#46d39a;--shadow:0 30px 90px rgba(0,0,0,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 20% -10%,rgba(215,25,32,.28),transparent 28%),radial-gradient(circle at 90% 10%,rgba(255,255,255,.08),transparent 22%),linear-gradient(180deg,#050608,#10151d 48%,#07090d);color:var(--txt);line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1220px,92vw);margin:auto}.topbar{background:#090b0f;border-bottom:1px solid var(--line);font-size:.86rem;color:#d5d8de}.topbar .container{display:flex;justify-content:space-between;gap:16px;padding:9px 0}.header{position:sticky;top:0;z-index:50;background:rgba(8,10,14,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0}.brand{display:flex;align-items:center;gap:18px;min-width:430px}.logoBox{width:245px;height:57px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:flex-start;overflow:visible;padding:0;box-shadow:none;flex:0 0 auto}.logoBox img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));image-rendering:auto}.brand strong{display:block;font-weight:900;letter-spacing:-.02em;font-size:1.05rem;color:#fff;line-height:1.1}.brand span span{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;letter-spacing:.01em}.menu{display:flex;gap:18px;align-items:center;font-weight:700;font-size:.94rem;color:#dfe3ea}.menu a{opacity:.86}.menu a:hover,.menu a.active{opacity:1;color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;padding:14px 20px;font-weight:900;border:1px solid transparent;cursor:pointer;transition:.25s}.btn.red{background:linear-gradient(135deg,var(--red),#a70f14);box-shadow:0 18px 50px rgba(215,25,32,.28)}.btn.red:hover{transform:translateY(-2px);box-shadow:0 24px 65px rgba(215,25,32,.4)}.btn.ghost{border-color:var(--line);background:rgba(255,255,255,.06)}.btn.light{background:white;color:#111}.hero{padding:90px 0 70px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.6),transparent 55%)}.heroGrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.eyebrow,.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);padding:9px 13px;border-radius:999px;color:#e4e7ed;font-weight:800;font-size:.86rem}.dot{width:9px;height:9px;border-radius:99px;background:var(--green);box-shadow:0 0 0 6px rgba(70,211,154,.12)}h1,h2,h3{line-height:1.05;margin:0;letter-spacing:-.045em}h1{font-size:clamp(3.1rem,7vw,6.7rem);font-weight:950;margin-top:20px}h2{font-size:clamp(2.2rem,4.6vw,4.55rem);font-weight:950}h3{font-size:1.55rem}.redText{color:var(--red2)}.lead{font-size:1.18rem;color:#d6dbe4;max-width:760px;margin:26px 0 0}.heroActions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:34px}.trust div{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:16px;padding:14px;font-weight:850;color:#e7ebf2;text-align:center}.visualPanel{min-height:600px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));box-shadow:var(--shadow);position:relative;overflow:hidden;padding:24px}.visualPanel:before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1400&auto=format&fit=crop') center/cover;opacity:.44;filter:saturate(.78)}.statusCard{position:relative;margin-top:250px;background:rgba(5,7,10,.82);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);border-radius:28px;padding:24px}.statusHeader{display:flex;justify-content:space-between;gap:14px;align-items:center}.live{color:var(--green);font-weight:900}.meter{height:9px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;margin:20px 0}.meter span{display:block;height:100%;width:83%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:99px}.statusGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini{padding:13px;border-radius:16px;background:rgba(255,255,255,.08)}.mini b{display:block;font-size:1.3rem}.mini span{display:block;color:var(--muted);font-size:.8rem}.section{padding:85px 0}.sectionHead{display:flex;justify-content:space-between;gap:34px;align-items:end;margin-bottom:34px}.sectionHead p{max-width:510px;color:var(--muted);font-size:1.08rem}.serviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service,.card,.panel,.contactCard,.form,.game,.priceCard,.jobCard{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 15px 45px rgba(0,0,0,.18)}.service{transition:.25s;display:block;position:relative;overflow:hidden}.service:hover{transform:translateY(-5px);border-color:rgba(215,25,32,.42)}.service .icon{font-size:2.2rem;margin-bottom:18px}.service p,.card p,.panel p,.priceCard p,.jobCard p{color:var(--muted)}.service ul{padding-left:18px;color:#e3e7ee}.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}.ctaBand{background:linear-gradient(135deg,rgba(215,25,32,.14),rgba(255,255,255,.04));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quote{border-radius:28px;padding:34px;background:linear-gradient(135deg,var(--red),#7e0c12);box-shadow:var(--shadow)}.proofGrid,.infoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}.proof,.info{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:20px;padding:19px}.proof b,.info b{font-size:2.3rem;display:block;color:#fff}.proof span,.info span{color:var(--muted)}.pageHero{padding:62px 0 38px}.breadcrumb{color:var(--muted);font-weight:800;margin-bottom:18px}.contentGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}.rich{font-size:1.08rem;color:#dbe0e8}.rich p{color:#d5dbe5}.rich ul{padding-left:20px}.rich li{margin:9px 0}.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gameTop{display:flex;justify-content:space-between;gap:18px;align-items:center}.score{background:rgba(255,255,255,.09);border:1px solid var(--line);border-radius:16px;padding:10px 14px;font-weight:950}.scenario{margin:22px 0;padding:22px;border-radius:22px;background:rgba(0,0,0,.22);border:1px solid var(--line);font-weight:850;font-size:1.1rem}.answers{display:grid;gap:12px}.answer{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:white;text-align:left;font-weight:850;cursor:pointer}.answer:hover{border-color:var(--red2);background:rgba(215,25,32,.18)}.feedback{min-height:34px;color:#e6ebf2;font-weight:800;margin-top:16px}.progress{height:12px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-top:16px}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold),var(--green));border-radius:99px;transition:.35s}.gameDashboard{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.gameBadge{padding:16px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid var(--line)}.miniGameTools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.toolBtn{border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:white;padding:16px 10px;font-weight:900;cursor:pointer}.toolBtn.selected{background:rgba(215,25,32,.34);border-color:var(--red2)}.tariffGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price{font-size:2.5rem;font-weight:950;color:white;margin:16px 0}.price small{font-size:1rem;color:var(--muted)}.notice{border-left:4px solid var(--red);background:rgba(215,25,32,.12);padding:18px;border-radius:18px;color:#eef1f6}.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px}.form{display:grid;gap:14px}.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.23);border-radius:16px;color:white;padding:16px;font:inherit}.form textarea{min-height:145px}.footer{padding:36px 0;border-top:1px solid var(--line);background:#06070a;color:var(--muted)}.footerGrid{display:flex;justify-content:space-between;gap:20px}.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.tags span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);font-weight:800}.timeline{display:grid;gap:14px;margin-top:20px}.step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}.step b{width:44px;height:44px;border-radius:15px;background:var(--red);display:flex;align-items:center;justify-content:center}.roundedImg{width:100%;border-radius:28px;border:1px solid var(--line);min-height:280px;object-fit:cover}@media(max-width:1050px){.menu{display:none}.heroGrid,.split,.contentGrid,.contactGrid{grid-template-columns:1fr}.serviceGrid,.tariffGrid,.cards3{grid-template-columns:1fr 1fr}.trust{grid-template-columns:repeat(2,1fr)}.visualPanel{min-height:460px}.statusCard{margin-top:180px}}@media(max-width:700px){.topbar .container,.footerGrid{flex-direction:column;display:flex}.brand{display:flex;align-items:center;gap:18px;min-width:430px}.brand strong{display:block;font-weight:900;letter-spacing:-.02em;font-size:1.05rem;color:#fff;line-height:1.1}.logoBox{width:245px;height:57px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:flex-start;overflow:visible;padding:0;box-shadow:none;flex:0 0 auto}.btn{padding:12px 14px}.hero{padding:55px 0}.serviceGrid,.cards2,.cards3,.tariffGrid,.gameDashboard,.miniGameTools{grid-template-columns:1fr}.statusGrid{grid-template-columns:1fr 1fr}.section{padding:58px 0}.sectionHead{display:block}h1{font-size:3rem}.visualPanel{display:none}}

.priceCard.featured{border-color:rgba(215,25,32,.55);box-shadow:0 24px 80px rgba(215,25,32,.18);position:relative;overflow:hidden}.priceCard.featured:before{content:"meest gekozen";position:absolute;right:18px;top:18px;background:linear-gradient(135deg,var(--red),#8d0d12);font-size:.76rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;padding:7px 11px;border-radius:999px}.priceCard ul{padding-left:20px}.priceCard li{margin:8px 0;color:#e8edf5}.feedback.correct{background:rgba(70,211,154,.14);border:1px solid rgba(70,211,154,.45);color:#dfffee;padding:16px;border-radius:18px}.feedback.wrong{background:rgba(255,59,59,.14);border:1px solid rgba(255,59,59,.45);color:#ffe6e6;padding:16px;border-radius:18px}.feedback.hint{background:rgba(241,199,106,.14);border:1px solid rgba(241,199,106,.45);color:#fff4d2;padding:16px;border-radius:18px}.toolBtn.correct{border-color:rgba(70,211,154,.85)!important;background:rgba(70,211,154,.22)!important}.toolBtn.wrong{border-color:rgba(255,59,59,.85)!important;background:rgba(255,59,59,.22)!important}.toolBtn{transition:.18s transform,.18s background,.18s border}.toolBtn:hover{transform:translateY(-2px)}.score{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}


/* Correcties: klantportaal knop, uniforme abonnement knoppen en badgepositie */
.navActions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn.portal{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.btn.portal:hover{background:#fff;color:#101114;transform:translateY(-2px)}
.priceCard.featured{padding-top:64px;overflow:visible}
.priceCard.featured:before{top:18px;right:22px;z-index:2;white-space:nowrap}
.priceCard .btn{margin-top:18px;width:100%}
@media(max-width:1050px){.navActions{margin-left:auto}.btn.portal{display:inline-flex}.nav{gap:12px}}
@media(max-width:700px){.nav{align-items:flex-start}.navActions{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.navActions .btn{width:100%}}

.darkNotice{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.22);color:#fff;margin-top:18px}
.emergencyCard{background:linear-gradient(135deg,#cf1f26,#8f1218);border-radius:28px;padding:38px;color:#fff;box-shadow:0 24px 80px rgba(207,31,38,.28)}
.emergencyCard span{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:800;opacity:.9}
.emergencyCard h2{font-size:clamp(36px,5vw,64px);line-height:1;margin:18px 0}
.emergencyCard p{color:rgba(255,255,255,.88);font-size:18px;margin-bottom:24px}

.priceCard strong{color:#ffffff;font-weight:900;}
/* Beheerdersgedeelte */
.adminWrap{min-height:100vh;background:linear-gradient(135deg,#080808,#151515 45%,#260909);padding:40px 0 90px}.adminShell{width:min(1180px,92%);margin:auto}.adminHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.adminHeader h1{font-size:clamp(2rem,4vw,4rem);line-height:1}.adminHeader p{color:#d4d4d8;max-width:720px;margin-top:10px}.adminLogin,.adminPanel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.35)}.adminTabs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.adminTab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:white;border-radius:999px;padding:12px 18px;cursor:pointer;font-weight:800}.adminTab.active{background:#dc2626;border-color:#dc2626}.adminGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.adminForm label{display:block;font-size:.85rem;color:#a1a1aa;margin:12px 0 6px}.adminForm input,.adminForm textarea,.adminForm select{width:100%;background:#090909;color:white;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;outline:none}.adminForm textarea{min-height:110px;resize:vertical}.adminList{display:grid;gap:14px}.adminItem{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}.adminItem strong{display:block;font-size:1.05rem}.adminActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.adminHint{color:#d4d4d8;font-size:.95rem;background:rgba(255,255,255,.06);border-left:4px solid #dc2626;border-radius:12px;padding:14px;margin:18px 0}.mutedSmall{color:#a1a1aa;font-size:.95rem;margin-top:10px}.jobMeta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.jobMeta span,.badgeSmall{display:inline-flex;background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.25);color:#fecaca;border-radius:999px;padding:7px 11px;font-size:.82rem;font-weight:800}.badgeSmall{margin-bottom:14px}.btn.small{padding:10px 13px;border-radius:12px;font-size:.85rem}.btn.green{background:#16a34a;color:white}.btn.darkBtn{background:#27272a;color:white}.hide{display:none!important}@media(max-width:800px){.adminGrid{grid-template-columns:1fr}.adminHeader{align-items:flex-start;flex-direction:column}}

/* Definitieve header-fix: volledige bedrijfsnaam, geen overlap, menu blijft zichtbaar */
.header .nav{
  display:grid !important;
  grid-template-columns:minmax(390px, auto) minmax(420px, 1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
}
.header .brand{
  min-width:0 !important;
  width:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  white-space:nowrap !important;
}
.header .logoBox{
  width:210px !important;
  height:52px !important;
  flex:0 0 210px !important;
}
.header .brand strong{
  display:block !important;
  font-size:1rem !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}
.header .brand span span{
  display:block !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.header .menu{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:16px !important;
  font-size:.96rem !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.header .menu a{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
.header .navActions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
}
.header .navActions .btn{
  white-space:nowrap !important;
  padding:13px 17px !important;
}
@media(max-width:1180px){
  .header .nav{
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "brand actions"
      "menu menu" !important;
    row-gap:12px !important;
    padding:14px 0 12px !important;
  }
  .header .brand{grid-area:brand !important;}
  .header .navActions{grid-area:actions !important;}
  .header .menu{
    grid-area:menu !important;
    justify-content:flex-start !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:8px 0 3px !important;
    gap:20px !important;
    font-size:1rem !important;
    scrollbar-width:none !important;
  }
  .header .menu::-webkit-scrollbar{display:none !important;}
}
@media(max-width:760px){
  .header .nav{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "menu" !important;
  }
  .header .brand{
    justify-content:flex-start !important;
    white-space:normal !important;
  }
  .header .logoBox{
    width:185px !important;
    height:46px !important;
    flex:0 0 185px !important;
  }
  .header .brand strong{
    font-size:.95rem !important;
    white-space:nowrap !important;
  }
  .header .brand span span{
    font-size:.72rem !important;
    white-space:nowrap !important;
  }
  .header .navActions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .header .navActions .btn{
    width:100% !important;
    padding:12px 10px !important;
  }
}
@media(max-width:470px){
  .header .brand{gap:10px !important;}
  .header .logoBox{
    width:145px !important;
    height:40px !important;
    flex:0 0 145px !important;
  }
  .header .brand strong{font-size:.82rem !important;}
  .header .brand span span{font-size:.63rem !important;}
  .header .menu{font-size:.92rem !important;gap:16px !important;}
}


/* DEFINITIEVE HEADER-FIX - geen overlap, geen afkortingen */
.header .nav{
  display:grid !important;
  grid-template-columns:minmax(360px,auto) minmax(0,1fr) auto !important;
  grid-template-areas:"brand menu actions" !important;
  align-items:center !important;
  column-gap:22px !important;
  row-gap:12px !important;
  padding:14px 0 !important;
}
.header .brand{
  grid-area:brand !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  overflow:hidden !important;
}
.header .logoBox{
  width:205px !important;
  height:52px !important;
  flex:0 0 205px !important;
  background:transparent !important;
  overflow:visible !important;
  padding:0 !important;
  box-shadow:none !important;
}
.header .logoBox img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.header .brand > span:last-child{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.header .brand strong{
  display:block !important;
  font-size:clamp(.94rem,1vw,1.08rem) !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#fff !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.header .brand span span{
  display:block !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.header .menu{
  grid-area:menu !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(12px,1.2vw,22px) !important;
  min-width:0 !important;
  width:100% !important;
  font-size:clamp(.92rem,.92vw,1.03rem) !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.header .menu a{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.header .navActions{
  grid-area:actions !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
  flex-shrink:0 !important;
}
.header .navActions .btn{
  white-space:nowrap !important;
  padding:12px 16px !important;
  font-size:.94rem !important;
}

@media (max-width:1450px){
  .header .nav{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "menu menu" !important;
    align-items:center !important;
  }
  .header .menu{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:8px 0 2px !important;
    gap:24px !important;
    font-size:1.02rem !important;
    scrollbar-width:none !important;
  }
  .header .menu::-webkit-scrollbar{display:none !important;}
}

@media (max-width:760px){
  .header .nav{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "menu" !important;
    padding:12px 0 !important;
  }
  .header .brand{
    gap:10px !important;
  }
  .header .logoBox{
    width:170px !important;
    height:44px !important;
    flex-basis:170px !important;
  }
  .header .brand strong{
    font-size:.93rem !important;
  }
  .header .brand span span{
    font-size:.70rem !important;
  }
  .header .navActions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .header .navActions .btn{
    width:100% !important;
    padding:12px 10px !important;
    font-size:.92rem !important;
  }
  .header .menu{
    width:100% !important;
    gap:18px !important;
    font-size:.95rem !important;
  }
}

@media (max-width:430px){
  .header .brand{
    display:grid !important;
    grid-template-columns:150px minmax(0,1fr) !important;
  }
  .header .logoBox{
    width:150px !important;
    height:40px !important;
    flex-basis:150px !important;
  }
  .header .brand strong{
    font-size:.82rem !important;
  }
  .header .brand span span{
    font-size:.62rem !important;
  }
}


/* =========================================================
   DEFINITIEVE HEADER 2026
   Opnieuw opgebouwd zodat logo, bedrijfsnaam, navigatie en knoppen
   nooit meer over elkaar heen lopen. Geen afkortingen.
   ========================================================= */
.header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  background:rgba(7,9,13,.88) !important;
  backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.header .container{
  width:min(1320px,94vw) !important;
}
.header .nav{
  display:grid !important;
  grid-template-columns:minmax(365px,430px) minmax(480px,1fr) auto !important;
  grid-template-areas:"brand menu actions" !important;
  align-items:center !important;
  column-gap:clamp(18px,2vw,34px) !important;
  row-gap:12px !important;
  padding:13px 0 !important;
}
.header .brand{
  grid-area:brand !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.header .logoBox{
  flex:0 0 156px !important;
  width:156px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
}
.header .logoBox img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)) !important;
}
.header .brand > span:last-child{
  display:block !important;
  min-width:0 !important;
  overflow:visible !important;
}
.header .brand strong{
  display:block !important;
  color:#fff !important;
  font-size:1.03rem !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.header .brand span span{
  display:block !important;
  margin-top:3px !important;
  color:#b8c0cc !important;
  font-size:.78rem !important;
  line-height:1.15 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.header .menu{
  grid-area:menu !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(18px,1.9vw,32px) !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-size:1.05rem !important;
  font-weight:850 !important;
  color:#e6ebf2 !important;
}
.header .menu a{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  opacity:.9 !important;
}
.header .menu a:hover,
.header .menu a.active{
  opacity:1 !important;
  color:#fff !important;
}
.header .navActions{
  grid-area:actions !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
  flex-shrink:0 !important;
}
.header .navActions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  padding:12px 16px !important;
  min-height:46px !important;
  font-size:.94rem !important;
  line-height:1 !important;
  border-radius:15px !important;
}

/* Bij normale laptopbreedtes wordt het menu bewust een nette tweede regel.
   Daardoor blijft de volledige bedrijfsnaam zichtbaar en komt niets over elkaar. */
@media (max-width:1250px){
  .header .nav{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "menu menu" !important;
    padding:13px 0 11px !important;
  }
  .header .menu{
    justify-content:flex-start !important;
    gap:28px !important;
    font-size:1.04rem !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    padding:8px 0 2px !important;
  }
  .header .menu::-webkit-scrollbar{display:none !important;}
}

@media (max-width:760px){
  .topbar .container{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }
  .header .nav{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "menu" !important;
    padding:12px 0 !important;
  }
  .header .brand{
    gap:12px !important;
    width:100% !important;
  }
  .header .logoBox{
    flex-basis:145px !important;
    width:145px !important;
    height:38px !important;
  }
  .header .brand strong{
    font-size:.94rem !important;
  }
  .header .brand span span{
    font-size:.70rem !important;
  }
  .header .navActions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .header .navActions .btn{
    width:100% !important;
    padding:12px 10px !important;
    font-size:.92rem !important;
  }
  .header .menu{
    width:100% !important;
    justify-content:flex-start !important;
    gap:22px !important;
    font-size:.96rem !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:7px 0 2px !important;
  }
}

@media (max-width:440px){
  .header .brand{
    gap:9px !important;
  }
  .header .logoBox{
    flex-basis:118px !important;
    width:118px !important;
    height:32px !important;
  }
  .header .brand strong{
    font-size:.82rem !important;
    letter-spacing:-.02em !important;
  }
  .header .brand span span{
    display:none !important;
  }
  .header .menu{
    font-size:.92rem !important;
    gap:18px !important;
  }
}

/* =========================================================
   DEFINITIEVE HEADER REBUILD - 2026-05-19
   Doel: nooit overlap tussen Contact en Klantportaal, volledige bedrijfsnaam behouden.
   ========================================================= */
.header .nav{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "brand actions"
    "menu menu" !important;
  align-items:center !important;
  column-gap:22px !important;
  row-gap:10px !important;
  padding:13px 0 11px !important;
}
.header .brand{
  grid-area:brand !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  white-space:nowrap !important;
}
.header .logoBox{
  flex:0 0 158px !important;
  width:158px !important;
  height:42px !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
}
.header .logoBox img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.header .brand > span:last-child{
  min-width:0 !important;
  overflow:hidden !important;
}
.header .brand strong{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:1.05rem !important;
  line-height:1.12 !important;
  letter-spacing:-.015em !important;
}
.header .brand span span{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:.78rem !important;
  line-height:1.15 !important;
  margin-top:3px !important;
}
.header .navActions{
  grid-area:actions !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
  min-width:max-content !important;
}
.header .navActions .btn{
  white-space:nowrap !important;
  min-height:44px !important;
  padding:11px 16px !important;
  font-size:.94rem !important;
  line-height:1 !important;
  border-radius:15px !important;
}
.header .menu{
  grid-area:menu !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:10px 24px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:normal !important;
  font-size:1.02rem !important;
  font-weight:850 !important;
  padding:8px 0 2px !important;
}
.header .menu a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  line-height:1.1 !important;
  padding:4px 2px !important;
}
@media (min-width:1120px){
  .header .menu{
    gap:12px 34px !important;
    font-size:1.07rem !important;
  }
}
@media (max-width:760px){
  .header .nav{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "actions"
      "menu" !important;
    row-gap:11px !important;
  }
  .header .brand{
    gap:11px !important;
  }
  .header .logoBox{
    flex-basis:142px !important;
    width:142px !important;
    height:37px !important;
  }
  .header .brand strong{
    font-size:.95rem !important;
  }
  .header .brand span span{
    font-size:.70rem !important;
  }
  .header .navActions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    min-width:0 !important;
  }
  .header .navActions .btn{
    width:100% !important;
    padding:12px 10px !important;
    font-size:.92rem !important;
  }
  .header .menu{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:20px !important;
    font-size:.96rem !important;
    scrollbar-width:none !important;
  }
  .header .menu::-webkit-scrollbar{display:none !important;}
}
@media (max-width:430px){
  .header .logoBox{
    flex-basis:118px !important;
    width:118px !important;
    height:32px !important;
  }
  .header .brand strong{font-size:.82rem !important;}
  .header .brand span span{display:none !important;}
  .header .menu{font-size:.92rem !important;gap:18px !important;}
}


/* Definitieve header-oplossing mei 2026:
   Klantportaal en Bel direct staan als compacte acties in de bovenbalk.
   De hoofdheader blijft daardoor rustig: logo + volledige bedrijfsnaam + menu.
   Geen overlap, geen afkorting, geen tweede headerregel op normale schermen. */
.topbar{
  background:#07090d !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.topbar .topbarInner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:8px 0 !important;
}
.topbarInfo{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:wrap !important;
  color:#d8dce4 !important;
}
.topbarActions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-shrink:0 !important;
}
.topbarActions a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:.84rem !important;
  white-space:nowrap !important;
}
.topbarActions a:last-child{
  background:linear-gradient(135deg,var(--red),#a70f14) !important;
  border-color:rgba(215,25,32,.8) !important;
  box-shadow:0 10px 28px rgba(215,25,32,.22) !important;
}
.header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(8,10,14,.84) !important;
  backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.header .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  padding:14px 0 !important;
  min-height:82px !important;
  flex-wrap:nowrap !important;
}
.header .brand{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
  flex:0 1 auto !important;
  max-width:520px !important;
}
.header .logoBox{
  width:218px !important;
  height:54px !important;
  flex:0 0 218px !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
}
.header .logoBox img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)) !important;
}
.header .brand > span:last-child{
  min-width:230px !important;
  max-width:275px !important;
}
.header .brand strong{
  display:block !important;
  font-size:1.02rem !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  color:#fff !important;
  white-space:nowrap !important;
  letter-spacing:-.025em !important;
}
.header .brand span span{
  display:block !important;
  margin-top:4px !important;
  font-size:.8rem !important;
  color:#aeb5c0 !important;
  white-space:nowrap !important;
}
.header .menu{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:clamp(14px,1.6vw,26px) !important;
  margin-left:auto !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  font-size:clamp(.92rem,1vw,1.02rem) !important;
  font-weight:850 !important;
  color:#e6e9ef !important;
  overflow:visible !important;
}
.header .menu a{
  white-space:nowrap !important;
  opacity:.9 !important;
}
.header .menu a:hover,
.header .menu a.active{
  opacity:1 !important;
  color:#fff !important;
}
.header .navActions{display:none !important;}

@media(max-width:1120px){
  .header .nav{
    gap:18px !important;
  }
  .header .logoBox{
    width:185px !important;
    flex-basis:185px !important;
  }
  .header .brand > span:last-child{min-width:220px !important;max-width:240px !important;}
  .header .brand strong{font-size:.96rem !important;}
  .header .brand span span{font-size:.75rem !important;}
  .header .menu{gap:13px !important;font-size:.9rem !important;}
}
@media(max-width:940px){
  .header .nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    min-height:0 !important;
    padding:12px 0 10px !important;
  }
  .header .brand{
    max-width:100% !important;
    justify-content:flex-start !important;
  }
  .header .menu{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 0 6px !important;
    gap:20px !important;
    scrollbar-width:none !important;
  }
  .header .menu::-webkit-scrollbar{display:none !important;}
}
@media(max-width:700px){
  .topbar .topbarInner{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  .topbarInfo{gap:8px !important;display:grid !important;}
  .topbarActions{width:100% !important;display:grid !important;grid-template-columns:1fr 1fr !important;}
  .header .logoBox{width:152px !important;height:43px !important;flex-basis:152px !important;}
  .header .brand{gap:12px !important;}
  .header .brand > span:last-child{min-width:0 !important;max-width:none !important;}
  .header .brand strong{font-size:.92rem !important;white-space:normal !important;line-height:1.13 !important;}
  .header .brand span span{font-size:.7rem !important;white-space:normal !important;}
  .header .menu{font-size:.9rem !important;gap:18px !important;}
}


/* Definitieve header-oplossing: geen overlap, geen afkorting, klantportaal buiten de header */
.topbar{display:none!important;}
.header{position:sticky;top:0;z-index:100;background:rgba(7,9,13,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.13);}
.nav{display:grid!important;grid-template-columns:minmax(360px,auto) minmax(420px,1fr) auto;align-items:center;gap:24px;padding:14px 0!important;}
.brand{min-width:0!important;display:flex!important;align-items:center!important;gap:16px!important;white-space:nowrap;}
.logoBox{width:168px!important;height:46px!important;flex:0 0 168px!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important;}
.logoBox img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));}
.brandText{min-width:0;display:block;}
.brand strong{font-size:1.04rem!important;line-height:1.05!important;letter-spacing:-.02em!important;white-space:nowrap!important;display:block!important;}
.brandText > span,.brand span span{font-size:.78rem!important;color:var(--muted)!important;margin-top:4px!important;display:block!important;white-space:nowrap!important;}
.menu{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(12px,1.55vw,24px)!important;font-size:clamp(.9rem,.95vw,1.02rem)!important;font-weight:850!important;white-space:nowrap!important;min-width:0!important;overflow:visible!important;}
.menu a{white-space:nowrap!important;opacity:.9;}
.headerActions{display:flex;align-items:center;gap:10px;justify-content:flex-end;white-space:nowrap;}
.btn.small{padding:12px 17px!important;border-radius:14px!important;font-size:.94rem!important;}
.menuToggle{display:none;border:1px solid var(--line);background:rgba(255,255,255,.075);color:#fff;border-radius:14px;padding:12px 16px;font-weight:900;font-family:inherit;cursor:pointer;}
.portalFloat{position:fixed;right:22px;bottom:22px;z-index:120;background:linear-gradient(135deg,#fff,#e9edf4);color:#101216;border:1px solid rgba(255,255,255,.35);box-shadow:0 18px 55px rgba(0,0,0,.38);border-radius:999px;padding:14px 20px;font-weight:950;letter-spacing:-.01em;}
.portalFloat:before{content:'↗';margin-right:8px;color:var(--red);font-weight:950;}
.portalFloat:hover{transform:translateY(-2px);}
.priceCard{position:relative;}
.priceCard.featured{padding-top:26px!important;overflow:visible!important;}
.priceCard.featured:before{display:none!important;}
.badgeSmall{display:inline-flex!important;align-items:center;justify-content:center;position:static!important;background:rgba(215,25,32,.18);border:1px solid rgba(215,25,32,.38);color:#fff;border-radius:999px;padding:7px 12px;font-size:.76rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;white-space:nowrap;}
@media(max-width:1180px){
  .nav{grid-template-columns:minmax(330px,1fr) auto!important;gap:16px;}
  .menu{display:none!important;position:absolute;top:100%;left:0;right:0;background:rgba(7,9,13,.98);border-bottom:1px solid var(--line);padding:16px 4vw;box-shadow:0 25px 50px rgba(0,0,0,.28);}
  .menu.open{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:14px 24px!important;}
  .headerActions{grid-column:2;}
  .menuToggle{display:inline-flex;align-items:center;justify-content:center;}
}
@media(max-width:720px){
  .nav{grid-template-columns:1fr auto!important;padding:11px 0!important;gap:10px!important;}
  .logoBox{width:128px!important;height:38px!important;flex-basis:128px!important;}
  .brand{gap:10px!important;}
  .brand strong{font-size:.86rem!important;max-width:170px;overflow:hidden;text-overflow:ellipsis;}
  .brandText > span,.brand span span{font-size:.68rem!important;max-width:170px;overflow:hidden;text-overflow:ellipsis;}
  .btn.small{display:none!important;}
  .portalFloat{right:14px;bottom:14px;padding:12px 16px;font-size:.9rem;}
  .menu.open{justify-content:flex-start!important;}
}


/* FINAL HEADER RESET 2026-05-19
   Doel: volledige bedrijfsnaam zichtbaar, geen overlap, logo scherp, klantportaal buiten de header. */
.header{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:rgba(7,9,13,.94)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
}
.header .nav{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(16px,2vw,30px)!important;
  padding:13px 0!important;
  min-height:74px!important;
}
.header .brand{
  min-width:0!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.header .logoBox{
  width:clamp(116px,12vw,158px)!important;
  height:46px!important;
  flex:0 0 clamp(116px,12vw,158px)!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  padding:0!important;
}
.header .logoBox img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))!important;
}
.header .brandText{
  display:block!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
}
.header .brand strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(.98rem,1.08vw,1.14rem)!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
}
.header .brandText > span,
.header .brand span span{
  display:block!important;
  color:var(--muted)!important;
  margin-top:4px!important;
  font-size:clamp(.72rem,.8vw,.82rem)!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
}
.header .menu{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(11px,1.25vw,22px)!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:clamp(.87rem,.92vw,1rem)!important;
  font-weight:850!important;
}
.header .menu a{
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
.header .headerActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}
.header .btn.small{
  padding:11px 16px!important;
  border-radius:14px!important;
  font-size:.93rem!important;
  flex:0 0 auto!important;
}
.header .menuToggle{
  display:none!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  border-radius:14px!important;
  padding:11px 15px!important;
  font-weight:900!important;
  font-family:inherit!important;
  cursor:pointer!important;
}
@media(max-width:1240px){
  .header .nav{gap:14px!important;}
  .header .logoBox{width:118px!important;flex-basis:118px!important;}
  .header .brand{gap:12px!important;}
  .header .brand strong{font-size:.98rem!important;}
  .header .brandText > span,.header .brand span span{font-size:.72rem!important;}
  .header .menu{gap:11px!important;font-size:.86rem!important;}
  .header .btn.small{padding:10px 14px!important;font-size:.88rem!important;}
}
@media(max-width:1080px){
  .header .nav{grid-template-columns:minmax(0,1fr) auto!important;}
  .header .menu{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    z-index:99!important;
    background:rgba(7,9,13,.985)!important;
    border-bottom:1px solid var(--line)!important;
    padding:16px 4vw!important;
    box-shadow:0 25px 50px rgba(0,0,0,.28)!important;
  }
  .header .menu.open{
    display:flex!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:14px 24px!important;
  }
  .header .menuToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
}
@media(max-width:650px){
  .header .nav{min-height:66px!important;padding:10px 0!important;gap:10px!important;}
  .header .logoBox{width:92px!important;height:34px!important;flex-basis:92px!important;}
  .header .brand{gap:9px!important;}
  .header .brand strong{font-size:.86rem!important;white-space:normal!important;line-height:1.08!important;}
  .header .brandText > span,.header .brand span span{font-size:.66rem!important;white-space:normal!important;margin-top:3px!important;}
  .header .btn.small{display:none!important;}
  .header .menuToggle{padding:10px 12px!important;font-size:.88rem!important;}
  .portalFloat{right:14px!important;bottom:14px!important;padding:12px 16px!important;font-size:.9rem!important;}
}
@media(max-width:390px){
  .header .logoBox{width:76px!important;flex-basis:76px!important;}
  .header .brand strong{font-size:.79rem!important;}
  .header .brandText > span,.header .brand span span{display:none!important;}
}


/* =========================================================
   DEFINITIEVE HEADER 1 REGEL - 2026-05-19
   Logo + volledige bedrijfsnaam + menu + belknop blijven op één nette balk.
   Geen tweede menuregel. Bij minder breedte verschijnt alleen een menuknop.
========================================================= */
.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:rgba(7,9,13,.96)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.header .container.nav,
.header .nav{
  width:min(1280px,94vw)!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  gap:18px!important;
  min-height:78px!important;
  padding:12px 0!important;
  overflow:visible!important;
}
.header .brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.header .logoBox{
  width:96px!important;
  height:42px!important;
  flex:0 0 96px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.header .logoBox img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 6px 15px rgba(0,0,0,.35))!important;
}
.header .brandText,
.header .brand > span:last-child{
  display:block!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.header .brand strong{
  display:block!important;
  font-size:1.02rem!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.03em!important;
  color:#fff!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
}
.header .brandText > span,
.header .brand span span{
  display:block!important;
  margin-top:4px!important;
  font-size:.72rem!important;
  line-height:1.1!important;
  color:#aeb5c2!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:none!important;
}
.header .menu{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:1 1 auto!important;
  min-width:0!important;
  gap:clamp(13px,1.45vw,24px)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.header .menu a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  font-size:clamp(.88rem,.95vw,1rem)!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  color:#e5e7eb!important;
  padding:8px 0!important;
}
.header .menu a:hover,
.header .menu a.active{color:#fff!important;}
.header .headerActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
  gap:10px!important;
  margin:0!important;
  white-space:nowrap!important;
}
.header .headerActions .btn.small,
.header .btn.small.red{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  padding:11px 16px!important;
  border-radius:15px!important;
  font-size:.92rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.header .menuToggle{
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  border-radius:15px!important;
  padding:11px 15px!important;
  font-weight:900!important;
  font-family:inherit!important;
  cursor:pointer!important;
}
@media(max-width:1180px){
  .header .container.nav,.header .nav{width:min(1240px,95vw)!important;gap:14px!important;}
  .header .logoBox{width:86px!important;flex-basis:86px!important;height:38px!important;}
  .header .brand{gap:10px!important;}
  .header .brand strong{font-size:.94rem!important;}
  .header .brandText > span,.header .brand span span{font-size:.66rem!important;}
  .header .menu{gap:13px!important;}
  .header .menu a{font-size:.85rem!important;}
  .header .headerActions .btn.small,.header .btn.small.red{padding:10px 13px!important;font-size:.86rem!important;}
}
@media(max-width:980px){
  .header .container.nav,.header .nav{min-height:72px!important;}
  .header .menu{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    z-index:999!important;
    background:rgba(7,9,13,.985)!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 24px 50px rgba(0,0,0,.35)!important;
    padding:16px 5vw!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:14px 26px!important;
  }
  .header .menu.open{display:flex!important;}
  .header .menuToggle{display:inline-flex!important;}
}
@media(max-width:620px){
  .header .container.nav,.header .nav{width:94vw!important;min-height:66px!important;gap:10px!important;padding:9px 0!important;}
  .header .logoBox{width:72px!important;height:34px!important;flex-basis:72px!important;}
  .header .brand{gap:8px!important;}
  .header .brand strong{font-size:.82rem!important;line-height:1.05!important;}
  .header .brandText > span,.header .brand span span{display:none!important;}
  .header .headerActions .btn.small,.header .btn.small.red{display:none!important;}
  .header .menuToggle{padding:10px 13px!important;font-size:.88rem!important;}
}
@media(max-width:400px){
  .header .logoBox{width:62px!important;flex-basis:62px!important;}
  .header .brand strong{font-size:.76rem!important;letter-spacing:-.04em!important;}
}

/* Definitieve headercorrectie: groter logo, één regel op desktop, geen afkapping */
.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  overflow:visible!important;
}
.header .container.nav,
.header .nav{
  width:min(1320px,94vw)!important;
  min-height:86px!important;
  padding:13px 0!important;
  display:grid!important;
  grid-template-columns:minmax(410px,auto) minmax(0,1fr) auto!important;
  grid-template-areas:"brand menu actions"!important;
  align-items:center!important;
  column-gap:26px!important;
  overflow:visible!important;
}
.header .brand{
  grid-area:brand!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  min-width:410px!important;
  max-width:none!important;
  width:auto!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.header .logoBox{
  width:170px!important;
  height:40px!important;
  flex:0 0 170px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  box-shadow:none!important;
}
.header .logoBox img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))!important;
}
.header .brandText,
.header .brand > span:last-child{
  display:block!important;
  min-width:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.header .brand strong{
  display:block!important;
  font-size:1.08rem!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  color:#fff!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.header .brandText > span,
.header .brand span span{
  display:block!important;
  margin-top:4px!important;
  font-size:.74rem!important;
  line-height:1.1!important;
  color:#aeb5c2!important;
  white-space:nowrap!important;
}
.header .menu{
  grid-area:menu!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(14px,1.35vw,24px)!important;
  min-width:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  position:static!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.header .menu a{
  display:inline-flex!important;
  white-space:nowrap!important;
  font-size:clamp(.88rem,.92vw,1rem)!important;
  font-weight:850!important;
  padding:8px 0!important;
}
.header .headerActions{
  grid-area:actions!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}
.header .headerActions .btn.small,
.header .btn.small.red{
  padding:12px 17px!important;
  border-radius:15px!important;
  font-size:.92rem!important;
  white-space:nowrap!important;
}
.header .menuToggle{display:none!important;}

@media(max-width:1240px){
  .header .container.nav,
  .header .nav{
    grid-template-columns:minmax(365px,auto) minmax(0,1fr) auto!important;
    column-gap:18px!important;
  }
  .header .brand{min-width:365px!important;gap:12px!important;}
  .header .logoBox{width:145px!important;height:34px!important;flex-basis:145px!important;}
  .header .brand strong{font-size:.99rem!important;}
  .header .brandText > span,.header .brand span span{font-size:.68rem!important;}
  .header .menu{gap:13px!important;}
  .header .menu a{font-size:.84rem!important;}
  .header .headerActions .btn.small,.header .btn.small.red{padding:10px 13px!important;font-size:.84rem!important;}
}
@media(max-width:1080px){
  .header .container.nav,
  .header .nav{
    grid-template-columns:1fr auto!important;
    grid-template-areas:"brand actions"!important;
    min-height:78px!important;
  }
  .header .brand{min-width:0!important;}
  .header .logoBox{width:158px!important;height:37px!important;flex-basis:158px!important;}
  .header .menu{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    z-index:999!important;
    background:rgba(7,9,13,.985)!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 24px 50px rgba(0,0,0,.35)!important;
    padding:16px 5vw!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:14px 26px!important;
  }
  .header .menu.open{display:flex!important;}
  .header .menuToggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:rgba(255,255,255,.075)!important;
    color:#fff!important;
    border-radius:15px!important;
    padding:11px 15px!important;
    font-weight:900!important;
    font-family:inherit!important;
    cursor:pointer!important;
  }
}
@media(max-width:660px){
  .header .container.nav,
  .header .nav{width:94vw!important;min-height:70px!important;padding:10px 0!important;column-gap:10px!important;}
  .header .brand{gap:10px!important;}
  .header .logoBox{width:118px!important;height:28px!important;flex-basis:118px!important;}
  .header .brand strong{font-size:.88rem!important;line-height:1.05!important;}
  .header .brandText > span,.header .brand span span{display:none!important;}
  .header .headerActions .btn.small,.header .btn.small.red{display:none!important;}
  .header .menuToggle{padding:10px 13px!important;font-size:.88rem!important;}
}
@media(max-width:430px){
  .header .logoBox{width:96px!important;height:23px!important;flex-basis:96px!important;}
  .header .brand{gap:8px!important;}
  .header .brand strong{font-size:.78rem!important;letter-spacing:-.04em!important;}
}


/* Techniek Games pagina */
.gameHero{background:radial-gradient(circle at 78% 0%,rgba(215,25,32,.22),transparent 34%),rgba(255,255,255,.025)}
.gameShell{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:32px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.32)}
.gameStatus{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.gameStatus div,.cityHud div{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:18px;padding:14px}
.gameStatus span,.cityHud span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.gameStatus b,.cityHud b{display:block;font-size:22px;margin-top:2px;color:#fff}
.scenarioCard{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:24px;padding:22px;margin-bottom:18px}
.scenarioIcon{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:rgba(215,25,32,.14);border:1px solid rgba(215,25,32,.34);font-size:40px}
.answerGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}
.answerGrid button{border:1px solid var(--line);background:rgba(255,255,255,.055);color:white;border-radius:18px;padding:18px;text-align:left;font-weight:850;cursor:pointer;font:inherit}
.answerGrid button:hover{background:rgba(255,255,255,.095)}
.answerGrid button.good{border-color:rgba(70,211,154,.65);background:rgba(70,211,154,.12)}
.answerGrid button.bad{border-color:rgba(255,59,59,.65);background:rgba(255,59,59,.12)}
.gameFeedback{min-height:36px;font-weight:900;margin:12px 0;color:#fff}
.cityGameWrap{position:relative;background:#07090f;border:1px solid var(--line);border-radius:32px;padding:16px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.38)}
#cityGame{display:block;width:100%;height:auto;aspect-ratio:1000/620;border-radius:22px;background:#0c1018;touch-action:none}
.cityHud{position:absolute;left:28px;top:28px;display:flex;gap:10px;z-index:2}
.cityHud div{min-width:92px;backdrop-filter:blur(10px)}
.cityControls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.cityControls button{border:1px solid var(--line);background:rgba(255,255,255,.07);color:white;border-radius:14px;padding:12px 16px;font-weight:900;cursor:pointer;min-width:48px;font:inherit}
.cityControls div{display:flex;gap:6px}
@media(max-width:760px){.gameStatus,.answerGrid{grid-template-columns:1fr}.scenarioCard{grid-template-columns:1fr}.cityHud{position:static;margin-bottom:12px;display:grid;grid-template-columns:repeat(3,1fr)}.cityHud div{min-width:0}.cityControls{justify-content:center}.cityControls .btn{width:100%}}

.jobCard .btn.red{margin-top:16px;}


/* Embedded Red de Stad game */
.gameEmbed{border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden;background:#05060a;box-shadow:0 30px 90px rgba(0,0,0,.35);height:min(78vh,760px);min-height:620px}
.gameEmbed iframe{width:100%;height:100%;border:0;display:block;background:#05060a}
@media(max-width:760px){.gameEmbed{height:78vh;min-height:540px;border-radius:22px}}


.social-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1;
}
.social-link:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26);
}
.social-icon{
  width:18px;
  height:18px;
  display:inline-block;
}


/* Nette social iconen, alleen bedoeld voor footer en contactpagina */
.social-links{display:none!important;}
.social-icons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.social-icon-btn{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  transition:.2s ease;
}
.social-icon-btn:hover{
  background:rgba(255,255,255,.11);
  transform:translateY(-1px);
}
.social-icon-btn span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.social-svg{
  width:21px;
  height:21px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}
.social-icon-btn[aria-label="Facebook"] .social-svg{
  fill:currentColor;
  stroke:none;
}
.footer-social-title{
  margin-top:18px;
  margin-bottom:0;
}


/* Zichtbare social iconen */
.vdk-social-icons{
  display:flex!important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.vdk-social-icon{
  width:46px;
  height:46px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.075);
  color:#fff!important;
  text-decoration:none;
  transition:.18s ease;
}
.vdk-social-icon:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.32);
}
.vdk-social-icon svg{
  width:22px;
  height:22px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
}
.vdk-social-icon[aria-label="Facebook"] svg{
  fill:currentColor;
  stroke:none;
}
.footer-social-title{
  margin-top:18px!important;
  margin-bottom:0!important;
}


/* Social iconen zichtbaar in footer en contact */
.socialMini{display:inline-flex!important;align-items:center;gap:10px;margin-left:14px;vertical-align:middle}
.socialMini a{width:42px;height:42px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.socialMini a:hover{background:rgba(255,255,255,.13)}
.socialMini svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.socialMini a[aria-label="Facebook"] svg{fill:currentColor;stroke:none}
.contactSocialBox{margin-top:24px;padding:22px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
.contactSocialBox h3{margin:0 0 8px}
.contactSocialBox p{margin:0 0 12px}
.contactSocialBox .socialMini{margin-left:0}
@media(max-width:720px){.socialMini{margin-left:0;margin-top:10px}.footerGrid{gap:12px}.footerGrid span:last-child{display:flex;flex-direction:column;align-items:flex-start}}


/* Socials alleen naast copyright in footer */
.contactSocialBox{display:none!important;}
.footerGrid span:first-child{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.socialMini{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  margin-left:8px;
  vertical-align:middle;
}
.socialMini a{
  width:34px;
  height:34px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#fff;
  text-decoration:none;
  transition:.18s ease;
}
.socialMini a:hover{
  background:rgba(255,255,255,.13);
  transform:translateY(-1px);
}
.socialMini svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
}
.socialMini a[aria-label="Facebook"] svg{
  fill:currentColor;
  stroke:none;
}
@media(max-width:720px){
  .footerGrid span:first-child{justify-content:flex-start}
  .socialMini{margin-left:0}
}

/* Tarievenpagina vernieuwd */
.priceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
.priceCard{background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:28px;min-height:100%}
.priceCard.highlight{border-color:rgba(223,31,45,.52);box-shadow:0 28px 70px rgba(223,31,45,.12)}
.priceCard h3{margin:8px 0 14px}.priceCard .price{font-size:clamp(28px,3vw,42px);line-height:1;font-weight:950;color:#fff;margin-bottom:18px}
.priceLabel{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(223,31,45,.16);border:1px solid rgba(223,31,45,.28);color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em}
.priceCard ul{margin:20px 0 0;padding-left:18px;color:rgba(255,255,255,.78)}.priceCard li{margin:8px 0}
@media(max-width:980px){.priceGrid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.priceGrid{grid-template-columns:1fr}}

/* Salarisindicatie werken bij */
.salaryList{display:grid;gap:12px;list-style:none;padding:0;margin:24px 0}
.salaryList li{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
.salaryList strong{color:#fff}.salaryList span{color:#fff;font-weight:900;white-space:nowrap}
@media(max-width:760px){.salaryList li{display:grid;gap:6px}.salaryList span{white-space:normal}}