/* De basis die eerst uit het Pixio-thema kwam: raster, knoppen, formulieren,
   afstanden, kop, voet.
   Het thema was 1,9 MB en zette op elk gedeeld onderdeel zijn eigen stempel,
   waardoor ons ontwerp er nooit precies uitkwam. Alles wat we er echt van
   gebruikten staat nu hier, in eigen regels en in ons eigen ontwerp.
   Het is bewust klein: dit bestand hoort niet te groeien tot een tweede thema.
   Wat maar op een plek nodig is hoort in design.css bij dat onderdeel. */

/* ---------- reset --------------------------------------------------------- */
/* Het thema bracht zijn eigen normalize mee. Die is met het thema verdwenen,
   dus hier het minimum: zonder dit houdt body de standaardmarge van 8px en
   staat de hele pagina scheef. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
[hidden]{display:none!important}
/* Een anker mag niet onder de plakkende kop verdwijnen. */
[id]{scroll-margin-top:92px}

/* ---------- raster -------------------------------------------------------- */
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
.row > [class*="col-"]{padding:0 12px}
[class*="col-"]{width:100%}
.g-2{margin:0 -6px}.g-2 > [class*="col-"]{padding:0 6px}
.g-3{margin:0 -9px}.g-3 > [class*="col-"]{padding:0 9px}

/* Twaalf kolommen. Klein scherm eerst: zonder mediaquery is alles vol breed,
   daarboven pakt de kolom zijn deel. Dat is dezelfde volgorde als bootstrap,
   zodat de bestaande markup blijft kloppen. */
.col-6{width:50%}
.col-12{width:100%}
@media (min-width:576px){
  .col-sm-6{width:50%}
}
@media (min-width:768px){
  .col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-6{width:50%}
}
@media (min-width:992px){
  .col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}
  .col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}
}
@media (min-width:1200px){
  .col-xl-2{width:16.6667%}.col-xl-3{width:25%}.col-xl-4{width:33.3333%}
  .col-xl-8{width:66.6667%}.col-xl-9{width:75%}
}
@media (min-width:1400px){ .col-xxl-2{width:16.6667%} }

.d-none{display:none}.d-block{display:block}
@media (min-width:768px){.d-md-none{display:none}.d-md-block{display:block}}
@media (min-width:992px){.d-lg-flex{display:flex}}
.justify-content-start{justify-content:flex-start}
.justify-content-end{justify-content:flex-end}
.text-center{text-align:center}

/* ---------- afstanden ----------------------------------------------------- */
.m-t10{margin-top:10px}.m-t15{margin-top:15px}.m-t20{margin-top:20px}
.m-t30{margin-top:30px}.m-t40{margin-top:40px}.m-t50{margin-top:50px}
.m-b5{margin-bottom:5px}.m-b20{margin-bottom:20px}.m-b30{margin-bottom:30px}
.m-b40{margin-bottom:40px}.m-b50{margin-bottom:50px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}
.me-2{margin-right:8px}.ms-2{margin-left:8px}
@media (min-width:768px){.me-md-5{margin-right:48px}}

/* Twee ritmes voor een sectie, zoals het thema ze had. */
.content-inner-1{padding:52px 0}
.content-inner-2{padding:64px 0}
.bg-light{background:var(--mist)}

/* ---------- typografie in blokken ----------------------------------------- */
.title{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);
  line-height:.98;text-transform:uppercase;margin:0 0 16px}
.sub-title{display:block;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.text-primary{color:var(--ink)}
.widget{margin-bottom:30px}
.widget-title,.footer-title{font-family:var(--display);font-weight:400;font-size:17px;
  text-transform:uppercase;margin:0 0 14px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:5px 0}
.widget li a:hover{color:var(--lime-deep)}
.meta{display:block;font-family:var(--ui);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.disclosure{font-size:12.5px;color:var(--muted)}
.side-bar{position:sticky;top:96px}

/* ---------- knoppen ------------------------------------------------------- */
/* Dezelfde vorm als .fsg-btn, want twee knopfamilies naast elkaar is precies
   wat we met het thema wilden afschaffen. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;
  padding:13px 22px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  border-radius:var(--radius);transition:.15s ease;text-decoration:none}
.btn:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-secondary{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline-secondary{background:transparent;color:var(--ink)}
.btn-outline-secondary:hover{background:var(--ink);color:#fff}
.btn-sm{padding:9px 14px;font-size:11px;letter-spacing:.12em}
.btn-md{padding:11px 18px;font-size:12px}
.btn-lg{padding:15px 28px;font-size:14px}
.btn-rounded{border-radius:999px}
.btn-link{background:none;border:0;padding:0;color:inherit;letter-spacing:0;text-transform:none}
.btn-link:hover{background:none;color:var(--lime-deep)}
.btn-close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:inherit}

/* ---------- formulieren --------------------------------------------------- */
.form-control{width:100%;padding:12px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);font-family:var(--body);font-size:15px;color:var(--ink)}
.form-control::placeholder{color:#8E8E88}
.form-control:focus{outline:none;border-color:var(--ink)}
select.form-control{appearance:none;padding-right:38px;font-family:var(--ui);font-weight:600;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 21px) 19px,calc(100% - 16px) 19px;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- tabel --------------------------------------------------------- */
.table-scroll{overflow-x:auto}
.table-scroll table{width:100%;border-collapse:collapse;font-size:14px}
.table-scroll th,.table-scroll td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.table-scroll th{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- kop ----------------------------------------------------------- */
.fsg-top{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff}
.fsg-top__in{display:flex;align-items:center;gap:30px;height:76px}
.fsg-top__logo{flex:0 0 auto;display:flex;align-items:center}
.fsg-top__logo img{height:26px;width:auto}
.fsg-nav{display:flex;gap:26px;margin-left:auto;font-family:var(--ui);font-weight:600;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.fsg-nav__item{position:relative}
.fsg-nav__link{display:flex;align-items:center;gap:7px;height:76px;color:#fff;opacity:.92;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.fsg-nav__link:hover,.fsg-nav__item[data-open="true"] .fsg-nav__link{opacity:1;color:var(--lime)}
.fsg-nav__caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .16s ease}
.fsg-nav__item[data-open="true"] .fsg-nav__caret{transform:translateY(1px) rotate(-135deg)}
.fsg-nav__panel{position:absolute;top:76px;left:-18px;min-width:216px;background:#fff;color:var(--ink);
  border:1px solid var(--line);padding:10px 0;z-index:70;box-shadow:0 18px 40px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.fsg-nav__item:hover .fsg-nav__panel,.fsg-nav__item:focus-within .fsg-nav__panel,
.fsg-nav__item[data-open="true"] .fsg-nav__panel{opacity:1;visibility:visible;transform:none}
.fsg-nav__panel a{display:block;padding:8px 18px;letter-spacing:.08em;text-decoration:none}
.fsg-nav__panel a:hover{background:var(--lime);color:var(--ink)}
.fsg-top__util{display:flex;align-items:center;gap:16px;flex:0 1 auto;min-width:0}
.fsg-top__util button,.fsg-top__util a{display:grid;place-items:center;width:28px;height:28px;
  background:none;border:0;color:#fff;cursor:pointer;padding:0}
.fsg-top__util button:hover,.fsg-top__util a:hover{color:var(--lime)}
.fsg-top__burger{display:none;width:30px;height:30px;background:none;border:0;color:#fff;cursor:pointer;padding:0}
.fsg-top__burger span{display:block;height:2px;background:currentColor;margin:5px 0;transition:.18s ease}
.fsg-top__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fsg-top__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fsg-top__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Het uitklapmenu op mobiel. Het ontwerp liet de nav onder 1080px gewoon
   verdwijnen; dat kan niet, dus dit is van ons. */
.fsg-drawer{position:fixed;inset:0;z-index:80;overflow:hidden;background:rgba(11,11,11,.6);
  opacity:0;visibility:hidden;transition:.2s ease}
.fsg-drawer[data-open="true"]{opacity:1;visibility:visible}
.fsg-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--ink);
  color:#fff;overflow-y:auto;padding:20px 0 40px;transform:translateX(100%);transition:transform .22s ease}
.fsg-drawer[data-open="true"] .fsg-drawer__panel{transform:none}
.fsg-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 18px}
.fsg-drawer__head img{height:24px;width:auto}
.fsg-drawer__close{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.fsg-drawer__group{border-top:1px solid #262622}
.fsg-drawer__top{display:flex;align-items:center;width:100%;gap:10px;padding:15px 20px;background:none;border:0;
  color:#fff;font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;text-align:left;text-decoration:none}
.fsg-drawer__top:hover{color:var(--lime)}
.fsg-drawer__top .fsg-nav__caret{margin-left:auto}
.fsg-drawer__sub{display:none;padding:0 0 12px}
.fsg-drawer__group[data-open="true"] .fsg-drawer__sub{display:block}
.fsg-drawer__sub a{display:block;padding:8px 20px 8px 34px;color:#C6C6C0;font-size:14.5px;text-decoration:none}
.fsg-drawer__sub a:hover{color:var(--lime)}
.fsg-drawer__foot{padding:20px 20px 0;border-top:1px solid #262622;margin-top:12px}

@media (max-width:1080px){
  .fsg-nav{display:none}
  .fsg-top__burger{display:block}
  .fsg-top__in{gap:12px}
  .fsg-top__util{margin-left:auto;gap:12px}
}
@media (max-width:420px){
  .fsg-top__util{gap:10px}
  .fsg-top__logo img{height:22px}
}

/* ---------- zoekpaneel ---------------------------------------------------- */
.fsg-zoek{position:fixed;inset:0;z-index:90;overflow:hidden;background:rgba(11,11,11,.72);
  opacity:0;visibility:hidden;transition:.18s ease}
.fsg-zoek[data-open="true"]{opacity:1;visibility:visible}
.fsg-zoek__panel{background:#fff;padding:34px 0 40px;transform:translateY(-14px);transition:transform .2s ease}
.fsg-zoek[data-open="true"] .fsg-zoek__panel{transform:none}
.fsg-zoek__head{display:flex;justify-content:flex-end}

/* ---------- voet ---------------------------------------------------------- */
.fsg-foot{background:var(--ink);color:#9B9B94}
.fsg-foot__top{padding:52px 0 34px}
.fsg-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.fsg-foot__logo img{height:56px;width:auto;margin-bottom:16px}
.fsg-foot__intro{margin:0;font-size:14px;line-height:1.55;max-width:38ch;color:#B9B9B2}
.fsg-foot h2{font-family:var(--display);font-weight:400;font-size:16px;color:#fff;
  text-transform:uppercase;margin:0 0 14px}
.fsg-foot ul{list-style:none;margin:0;padding:0}
.fsg-foot li{padding:5px 0;font-size:14px}
.fsg-foot a{text-decoration:none}
.fsg-foot a:hover{color:var(--lime)}
.fsg-foot__langs{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.fsg-foot__langs [aria-current="true"]{color:var(--lime)}
.fsg-foot__end{border-top:1px solid #262622;padding:18px 0}
.fsg-foot__end p{margin:0;font-size:12px;color:#7E7E77;max-width:none}

/* De aanmeldbalk uit het ontwerp, met de lime rand erboven. */
.fsg-signup{background:var(--ink-2);color:#fff;border-top:3px solid var(--lime);padding:34px 0}
.fsg-signup__in{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.fsg-signup h2{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 4px;text-transform:uppercase}
.fsg-signup p{margin:0;color:#B9B9B2;font-size:14px;max-width:44ch}
.fsg-signup__form{display:flex;gap:12px;margin-left:auto}
.fsg-signup__form input{width:280px;padding:13px 16px;background:#fff;border:0;border-radius:var(--radius);color:var(--ink)}
.fsg-signup__smiley{width:52px;height:52px;color:var(--lime);flex:0 0 auto}

@media (max-width:980px){
  .fsg-foot__grid{grid-template-columns:1fr 1fr}
  .fsg-signup__form{margin-left:0;width:100%}
  .fsg-signup__form input{flex:1;width:auto}
  .fsg-signup__smiley{display:none}
}
@media (max-width:600px){
  .fsg-foot__grid{grid-template-columns:1fr}
  .container{padding:0 18px}
}

/* ---------- zoekveld ------------------------------------------------------ */
.fsg-search__veld{display:flex;align-items:stretch}
.fsg-search__veld .form-control{border-right:0}
.fsg-search__knop{display:grid;place-items:center;width:52px;flex:0 0 auto;background:var(--ink);
  border:1.5px solid var(--ink);color:#fff;cursor:pointer;border-radius:0 var(--radius) var(--radius) 0}
.fsg-search__knop:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* ---------- veelgestelde vragen ------------------------------------------- */
.fsg-faq{border-top:1px solid var(--line)}
.fsg-faq__item{border-bottom:1px solid var(--line)}
.fsg-faq__item summary{display:flex;align-items:center;gap:16px;padding:16px 0;cursor:pointer;
  font-family:var(--ui);font-weight:600;font-size:16px;letter-spacing:.02em;list-style:none}
.fsg-faq__item summary::-webkit-details-marker{display:none}
.fsg-faq__item summary:hover{color:var(--lime-deep)}
.fsg-faq__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:0 0 auto}
.fsg-faq__plus::before,.fsg-faq__plus::after{content:"";position:absolute;background:currentColor}
.fsg-faq__plus::before{left:0;right:0;top:6px;height:2px}
.fsg-faq__plus::after{top:0;bottom:0;left:6px;width:2px;transition:transform .16s ease}
.fsg-faq__item[open] .fsg-faq__plus::after{transform:scaleY(0)}
.fsg-faq__body{padding:0 0 18px}
.fsg-faq__body p{margin:0 0 10px;color:#4A4A45}

/* ---------- landkiezer in de zwarte kop ----------------------------------- */
/* fsg.css tekent hem voor een witte balk; hier zetten we hem om naar de kop. */
.fsg-top .fsg-market-btn{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:6px 12px;border-radius:999px;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.08em;display:flex;align-items:center;gap:8px;cursor:pointer}
.fsg-top .fsg-market-btn:hover{border-color:var(--lime);color:var(--lime)}
.fsg-top .fsg-market-menu{background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.18)}
@media (max-width:1080px){ .fsg-top .fsg-market-label{display:none} }
.fsg-drawer__foot .fsg-market-btn{border-color:rgba(255,255,255,.28);color:#fff}

/* De reset haalt de opsommingstekens overal weg. In lopende tekst horen ze
   juist wel, dus daar zetten we ze terug. */
.fsg-prose ul,.fsg-prose ol,.dz-post-text ul,.dz-post-text ol{margin:0 0 16px;padding-left:22px}
.fsg-prose ul{list-style:disc}
.fsg-prose ol{list-style:decimal}
.fsg-prose li{margin-bottom:6px}

/* Het hartje in de kop, met de teller. */
.fsg-top__saved{position:relative}
.fsg-top__badge{position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--lime);color:var(--ink);font-family:var(--ui);font-weight:700;
  font-size:10px;line-height:16px;text-align:center}