@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plexsans-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plexsans-latin-ext.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Brixio-huisstijl: navy en oranje, IBM Plex Sans, radius 2px.
   Kleuren en hoeken komen uit public/assets/app.css van het product. */
:root{color-scheme:light;--kop:72px;
  --ground:#FFFFFF; --vlak:#EFF3F7; --card:#FFFFFF;
  --ink:#14181D; --ink-2:#2F3A45; --muted:#5B6B7B;
  --line:#CBD4DC; --line-2:#E2E7EC;
  --accent:#E8622A; --accent-hover:#C44A18; --op-accent:#FFFFFF;
  --navy:#1B3A5C; --navy-diep:#132A43; --navy-licht:#E8EFF5;
  --op-navy:#FFFFFF; --op-navy-zacht:#B3C4D4;
  --ok:#24A148; --fout:#C0392B;
  --lijn-navy-in:#41627F;
  --radius:2px;
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:88px;
  /* Breedte volgt axiops-site-v3: maximaal 1430px met dezelfde guttertrap */
  --gutter:24px;
  --breed:min(1430px,100% - var(--gutter)*2);
  /* Binnenmaten volgen axiops-site-v3: koppen 62rem, artikel 46rem, lopende tekst 68ch */
  --lees:62rem;
}
@media (min-width:768px){
  :root{--gutter:40px}
}
@media (min-width:1200px){
  :root{--gutter:72px}
}
:root[data-theme="dark"]{
  --ground:#10151A; --vlak:#161D25; --card:#1A222A;
  --ink:#E8EDF2; --ink-2:#C6CFD8; --muted:#94A1AE;
  --line:#2A333C; --line-2:#232B33;
  --accent:#FF7A45; --accent-hover:#FFA179; --op-accent:#14181D;
  --navy:#152532; --navy-diep:#0D141A; --navy-licht:#1E2A36; --lijn-navy-in:#3A4753;
  --op-navy:#E8EDF2; --op-navy-zacht:#8E9DAC;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{background:var(--ground);color:var(--ink);
     font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;
     overflow-wrap:break-word}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{padding:0}
.wrap{width:var(--breed);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--op-accent);
      padding:var(--s2) var(--s3);z-index:99}
.skip:focus{left:0}

/* Typografie */
.h1,.h2,.h3,h1,h2,h3{font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.h1{font-size:clamp(2.1rem,4.2vw,3.1rem);line-height:1.1}
.h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.h3{font-size:1.25rem;color:var(--navy)}
.h1 span{color:var(--accent)}
.h2 u{text-decoration:none;box-shadow:inset 0 -8px 0 var(--accent)}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:var(--lees)}
.lede-klein{color:var(--muted);max-width:var(--lees)}
.eyebrow{font:600 .74rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
         color:var(--accent)}
.voetnoot{margin-top:var(--s4);font-size:.88rem;color:var(--muted)}
.na-sectie{margin-top:var(--s5);display:grid;gap:var(--s3);justify-items:start}
.tekstlink{color:var(--navy);border-bottom:1px solid var(--line)}
.tekstlink:hover{color:var(--accent);border-color:var(--accent)}
.arrowlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy)}
.arrowlink:hover{color:var(--accent)}
.arrowlink svg{flex:none}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;
     font:600 .95rem/1 var(--font);white-space:nowrap;
     padding:0 var(--s4);height:44px;border-radius:var(--radius);
     border:1px solid transparent;cursor:pointer;
     transition:background .14s ease,border-color .14s ease,color .14s ease}
.btn--primary{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.vink{display:flex;gap:var(--s2);align-items:baseline;font-size:.92rem;color:var(--muted)}
.vink b{color:var(--ok);font-weight:700}
.vinken{margin-top:var(--s6);display:flex;flex-wrap:wrap;justify-content:center;
        gap:var(--s3) var(--s6)}
.stil{font-size:.95rem}
.stil a{color:var(--muted);border-bottom:1px solid var(--line)}
.stil a:hover{color:var(--ink);border-color:var(--muted)}

/* Topbalk */
.topbalk{background:var(--navy);color:var(--op-navy);font-size:.86rem}
.topbalk__in{display:flex;justify-content:flex-end;gap:var(--s4);align-items:center;height:34px}
.topbalk a:hover{color:var(--accent)}

/* Navbalk */
.site-head{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line-2)}
.site-head__in{display:flex;align-items:center;gap:var(--s5);height:72px}
.brand{font:700 1.5rem/1 var(--font);letter-spacing:-.035em;color:var(--navy)}
.brand i{color:var(--accent);font-style:normal}
.nav{margin-left:auto}
.nav__list{display:flex;gap:var(--s4);list-style:none;align-items:center}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:6px;font:500 1.02rem/1 var(--font);
           color:var(--navy);padding:var(--s3) var(--s1)}
.nav__link:hover{color:var(--accent)}
.nav__link.is-active{box-shadow:inset 0 -2px 0 var(--accent)}
.nav__link--cta{background:var(--accent);color:var(--op-accent);border-radius:var(--radius);
                padding:0 var(--s4);height:44px;font-weight:600}
.nav__link--cta:hover{background:var(--accent-hover);color:var(--op-accent)}
.nav__link--cta.is-active{box-shadow:none}
.nav__caret{transition:transform .14s ease}
.has-sub:hover .nav__caret,.has-sub:focus-within .nav__caret{transform:rotate(180deg)}
.sub{position:absolute;left:0;top:100%;min-width:19rem;background:var(--card);
     border:1px solid var(--line-2);display:none;z-index:30}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub__list{list-style:none;padding:var(--s2)}
.sub__link{display:grid;gap:2px;padding:var(--s2) var(--s3);border-radius:var(--radius)}
.sub__link:hover{background:var(--vlak)}
.sub__link.is-active .sub__title{color:var(--accent)}
.sub__title{font-weight:600;color:var(--navy)}
.sub__desc{font-size:.85rem;color:var(--muted)}

/* Mobiel menu */
.knop-mobiel{display:none}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;
        cursor:pointer;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.burger__bar{display:block;width:22px;height:2px;background:var(--navy)}
.mnav{background:var(--card);border-bottom:1px solid var(--line-2)}
.mnav__in{padding:var(--s3) 0 var(--s4)}
.mnav__list{list-style:none;display:grid}
.mnav__link{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--line-2);
            font:500 1.05rem/1 var(--font);color:var(--navy)}
.mnav__link.is-active{color:var(--accent)}
.mnav__sub{list-style:none;padding:var(--s2) 0 var(--s2) var(--s3);display:grid;gap:var(--s2);
           border-bottom:1px solid var(--line-2);font-size:.97rem;color:var(--muted)}
.mnav__foot{display:flex;gap:var(--s4);padding-top:var(--s3);font-size:.95rem}
.mnav__tel,.mnav__mail{color:var(--navy);font-weight:600}

/* Kruimelpad */
.crumbs{font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line-2);background:var(--card)}
.crumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
              padding:var(--s2) 0}
.crumbs__item{display:inline-flex;align-items:center;gap:var(--s2)}
.crumbs a:hover{color:var(--accent)}
.crumbs__sep{color:var(--line)}

/* Secties */
.sec{padding:var(--s7) 0}
.sec--tint{background:var(--vlak)}
.sec--start{padding-top:var(--s6)}
.sec-kop{display:grid;gap:var(--s3);margin-bottom:var(--s6);max-width:var(--lees)}
.sec-kop.midden{max-width:none;text-align:center;justify-items:center}
.sec-kop p a{color:var(--navy);border-bottom:1px solid var(--line)}
.sec-kop p a:hover{color:var(--accent);border-color:var(--accent)}

/* Hero */
/* Hero vult het scherm, min de vaste kop. svh en niet vh: op een telefoon
   rekent vh de adresbalk niet mee, waardoor de hero te hoog wordt en er
   altijd een stuk wegvalt. De vh-regel blijft als terugval staan. */
.hero{background:var(--card);
      min-height:calc(100vh - var(--kop));
      min-height:calc(100svh - var(--kop));
      display:grid;align-items:center;
      padding:var(--s6) 0}
.hero .h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.08;max-width:16ch}
.foot-bijgewerkt{margin:0;font-size:.85rem;opacity:.7}
.hero-in{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.35fr);
         min-width:0;
         gap:var(--s6);align-items:center}
.hero-tekst{display:grid;gap:var(--s4);max-width:46rem}

/* Extra tekst in de hero */
.hero-eyebrow{margin:0;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
              font-weight:600;color:var(--accent)}
.hero-punten{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2);max-width:34rem}
.hero-punten li{position:relative;padding-left:1.6rem;color:var(--ink-2);line-height:1.5}
.hero-punten li::before{content:"";position:absolute;left:0;top:.55em;
                        width:9px;height:9px;border-radius:50%;background:var(--accent)}
.hero-punten b{color:var(--ink);font-weight:600}

/* Het schermbeeld. Bewust breder dan zijn kolom en over de rechterrand heen:
   zo oogt het als een venster dat doorloopt, en blijft er links ruimte voor
   de tekst. */
.hero-beeld{margin:0;min-width:0;display:grid;gap:var(--s3);align-content:center}
.hero-beeld__bij{margin:0;font-size:.88rem;color:var(--ink-2)}

.app{display:grid;grid-template-columns:170px minmax(0,1fr);
     background:var(--card);border:1px solid var(--line);border-radius:14px;
     overflow:hidden;font-size:12px;line-height:1.35;
     box-shadow:0 30px 70px -35px rgba(16,32,64,.55)}

.app__zij{background:var(--card);border-right:1px solid var(--line-2);
          padding:14px 0;display:grid;align-content:start;gap:1px}
.app__merk{font-weight:800;font-size:17px;color:var(--ink);padding:0 14px 12px}
.app__merk i{color:var(--accent);font-style:normal}
.app__groep{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
            color:var(--ink-2);opacity:.75;padding:12px 14px 4px}
.app__item{padding:5px 14px;color:var(--navy);border-left:3px solid transparent}
.app__item.is-actief{background:var(--navy-licht);border-left-color:var(--accent);
                     color:var(--ink);font-weight:600}

.app__hoofd{background:var(--navy-licht);padding:12px 14px;display:grid;
            align-content:start;gap:8px;min-width:0}
.app__kruimel{font-size:10px;color:var(--ink-2)}
.app__kruimel b{font-weight:400;opacity:.5}
.app__titel{font-size:16px;font-weight:700;color:var(--ink)}
.app__tabs{display:flex;gap:14px;align-items:center;
           border-bottom:1px solid var(--line-2);padding-bottom:7px}
.app__tabs span{color:var(--ink-2)}
.app__tabs i{font-style:normal;opacity:.6;margin-left:3px}
.app__tabs .is-actief{color:var(--accent);font-weight:600;
                      box-shadow:0 7px 0 -6px var(--accent)}
.app__filter{margin-left:auto;border:1px solid var(--line);border-radius:6px;
             padding:2px 8px;background:var(--card)}

.app__bord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
.app__kolom{display:grid;align-content:start;gap:6px;min-width:0}
.app__fase{display:flex;justify-content:space-between;align-items:center;
           font-weight:600;color:var(--ink-2);font-size:10px;
           letter-spacing:.04em;text-transform:uppercase;
           padding-bottom:5px;border-bottom:2px solid var(--line-2)}
.app__fase.is-actief{color:var(--accent);border-bottom-color:var(--accent)}
.app__fase i{font-style:normal;opacity:.7}
.app__kaart{display:grid;gap:1px;background:var(--card);border:1px solid var(--line-2);
            border-radius:7px;padding:7px 8px;min-width:0}
.app__kaart b{font-size:11px;color:var(--ink);font-weight:600;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__kaart span{font-size:10px;color:var(--ink-2);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__kaart i{font-style:normal;font-size:10.5px;color:var(--navy);font-weight:600;margin-top:2px}

/* Schermvoorbeeld met het verkoopbord */
.scherm{background:var(--card);border:1px solid var(--line);align-self:center;
        display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.scherm-balk{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
             padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-2);background:var(--vlak)}
.scherm-titel{font-weight:700;color:var(--navy)}
.scherm-week{font-size:.82rem;color:var(--muted)}
.scherm-body{padding:var(--s4)}
.bord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.b-kolom{display:grid;gap:var(--s2);align-content:start}
.b-fase{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
        font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;
        letter-spacing:.08em;border-bottom:2px solid var(--line);padding-bottom:var(--s1)}
.b-fase.f-actief{color:var(--accent);border-color:var(--accent)}
.b-kaartje{border:1px solid var(--line-2);background:var(--card);
           padding:var(--s2) var(--s3);display:grid;gap:2px;font-size:.8rem;line-height:1.3}
.b-kaartje b{font-weight:600;color:var(--ink)}
.b-kaartje i{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.scherm-voet{display:flex;align-items:center;gap:var(--s2);
             padding:var(--s3) var(--s4);border-top:1px solid var(--line-2);
             font-size:.82rem;color:var(--muted)}
.stip{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}

/* Kaartenraster */
.kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.kaart{background:var(--card);border:1px solid var(--line-2);padding:var(--s5);
       display:grid;gap:var(--s3);align-content:start}
.kaart h3{font-size:1.3rem;font-weight:400;color:var(--navy);line-height:1.3}
.kaart h3 b{font-weight:700}
.kaart p{font-size:.97rem;color:var(--muted)}

/* Branchekaarten */
.branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.br-kaart{background:var(--card);border:1px solid var(--line-2);padding:var(--s5);
          display:grid;gap:var(--s3);align-content:start}
.br-kaart h2,.br-kaart h3{font-size:1.25rem;color:var(--navy)}
.br-kaart > p{font-size:.95rem;color:var(--muted)}
.br-kaart ul{list-style:none;display:grid;gap:var(--s2);font-size:.95rem;color:var(--ink-2)}
.br-kaart li{padding-left:var(--s3);position:relative}
.br-kaart li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                     background:var(--accent);border-radius:var(--radius)}
.br-link{font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);
         justify-self:start;margin-top:var(--s2)}
.br-link:hover{color:var(--accent);border-color:var(--accent)}

/* Subbranches */
.subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.sub-blok,.subs .sub{position:static;display:grid;background:var(--card);border:1px solid var(--line-2);
     padding:var(--s5);gap:var(--s3);align-content:start;min-width:0}
.subs .sub p{font-size:.97rem;color:var(--muted)}
.subs .sub ul{list-style:none;display:grid;gap:var(--s2);font-size:.95rem;color:var(--muted)}
.subs .sub li{padding-left:var(--s3);position:relative}
.subs .sub li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                      background:var(--accent);border-radius:var(--radius)}

/* Kolommen */
.kolommen{display:grid;gap:var(--s6) var(--s5)}
.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.blok{display:grid;gap:var(--s2);align-content:start}
.blok h3{font-size:1.1rem;color:var(--navy)}
.blok h3 a:hover{color:var(--accent)}
.blok p{font-size:.97rem;color:var(--muted)}
.blok ul{list-style:none;font-size:.95rem;color:var(--muted);display:grid;gap:var(--s1)}
.blok li{padding-left:var(--s3);position:relative}
.blok li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                 background:var(--accent);border-radius:var(--radius)}
.nr{font:700 .8rem/1 var(--font);color:var(--accent);letter-spacing:.1em}

/* Onderdelenlijst */
.onderdelen{display:grid;max-width:62rem}
.onderdelen details{border-bottom:1px solid var(--line-2)}
.onderdelen summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
                    padding:var(--s3) 0;color:var(--navy);font-weight:500;cursor:pointer;
                    list-style:none;min-height:44px}
.onderdelen summary::-webkit-details-marker{display:none}
.onderdelen summary::after{content:"";width:8px;height:8px;flex:none;
                           border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
                           transform:rotate(-45deg);transition:transform .15s ease}
.onderdelen details[open] summary::after{transform:rotate(45deg)}
.onderdelen summary:hover{color:var(--accent)}
.onderdelen summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.onderdelen ul{list-style:none;padding:0 0 var(--s4);display:grid;gap:var(--s2);
               font-size:.95rem;color:var(--muted)}
.onderdelen li{padding-left:var(--s3);position:relative}
.onderdelen li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                       background:var(--accent);border-radius:var(--radius)}

/* Cijfers */
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);text-align:center}
.cijfer{display:grid;gap:var(--s2);justify-items:center}
.cijfer b{font:700 2.4rem/1 var(--font);letter-spacing:-.03em;
          font-variant-numeric:tabular-nums;color:var(--navy)}
.cijfer p{font-size:.95rem;color:var(--muted);max-width:26ch}

/* Prijzen */
.prijs-een{background:var(--card);border:1px solid var(--accent);padding:var(--s5);
           display:grid;gap:var(--s5)}
.prijs-kop{display:grid;gap:var(--s2);max-width:var(--lees)}
.tarief{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.bedrag{font:700 3rem/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
        color:var(--navy)}
.per{font-size:.95rem;color:var(--muted)}
.prijs-sub{font-size:.97rem;color:var(--muted)}
.prijs-functies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s5);
                border-top:1px solid var(--line-2);padding-top:var(--s5)}
.prijs-functies ul{list-style:none;display:grid;gap:var(--s2);
                   font-size:.95rem;color:var(--muted);align-content:start}
.prijs-functies li{padding-left:var(--s4);position:relative}
.prijs-functies li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ok);font-weight:700}

/* FAQ */
.faq{display:grid;max-width:62rem}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__q{list-style:none;cursor:pointer;min-height:44px;padding:var(--s3) 0}
.faq__q::-webkit-details-marker{display:none}
.faq__kop{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
          font-size:1.05rem;font-weight:500;color:var(--navy)}
.faq__q:hover .faq__kop{color:var(--accent)}
.faq__icon{width:8px;height:8px;flex:none;
           border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
           transform:rotate(-45deg);transition:transform .15s ease}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 0 var(--s4);color:var(--muted);max-width:68ch}

/* Afsluiter met formulier */
.slot{background:var(--navy);color:var(--op-navy-zacht)}
.slot-in{display:grid;gap:var(--s4);justify-items:start;padding:var(--s7) 0}
.slot .h2{color:var(--op-navy);max-width:20ch}
.slot p{max-width:46rem}
.stappen{list-style:none;display:grid;gap:var(--s2);max-width:46rem;counter-reset:stap}
.stappen li{position:relative;padding-left:var(--s5);counter-increment:stap}
.stappen li::before{content:counter(stap);position:absolute;left:0;top:0;
                    width:26px;height:26px;display:grid;place-content:center;
                    background:var(--accent);color:var(--op-accent);
                    font-weight:700;font-size:.85rem;border-radius:var(--radius)}
/* De vette aanhef stond op de kleur voor tekst op navy. Buiten de donkere
   sectie is dat wit op wit en dus onzichtbaar. */
.stappen b{color:var(--ink);font-weight:600}
.slot .stappen b{color:var(--op-navy)}
.aanmeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--s3);
         align-items:end;width:100%;max-width:56rem;margin-top:var(--s2)}
.aanmeld label{display:grid;gap:var(--s1);font-size:.88rem;color:var(--op-navy-zacht)}
.aanmeld input{height:44px;padding:0 var(--s3);border:1px solid var(--lijn-navy-in);
               border-radius:var(--radius);background:var(--card);color:var(--ink);
               font:400 1rem var(--font)}
.aanmeld input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.formfout{grid-column:1 / -1;background:var(--fout);color:#fff;padding:var(--s2) var(--s3);
          border-radius:var(--radius);font-size:.92rem}
.hp{position:absolute;left:-9999px;top:0}
.klein{font-size:.88rem;color:var(--op-navy-zacht)}
.klein a{border-bottom:1px solid var(--op-navy-zacht)}
.klein a:hover{color:var(--op-navy)}

/* Contactgegevens */
.contact-nap{display:grid;gap:var(--s2);font-style:normal;color:var(--muted)}
.contact-nap a{color:var(--navy);font-weight:600}
.contact-nap a:hover{color:var(--accent)}

/* Kennisbank */
.artikellijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.art-kaart{background:var(--card);border:1px solid var(--line-2);padding:var(--s5);
           display:grid;gap:var(--s3);align-content:start}
.art-kaart h2 a:hover{color:var(--accent)}
.art-kaart p{font-size:.97rem;color:var(--muted)}

/* Artikel */
.artikel{max-width:46rem;margin-inline:auto;display:grid;gap:var(--s4)}
.kern{background:var(--navy-licht);border-left:3px solid var(--accent);padding:var(--s4)}
.kern__kop{font:600 .74rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
           color:var(--navy);margin-bottom:var(--s3)}
.kern ul{list-style:none;display:grid;gap:var(--s2);font-size:.97rem;color:var(--ink-2)}
.kern li{padding-left:var(--s3);position:relative}
.kern li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                 background:var(--accent);border-radius:var(--radius)}
.inhoud-nav{border:1px solid var(--line-2);padding:var(--s4)}
.inhoud-nav ol{list-style:none;display:grid;gap:var(--s2);counter-reset:inh;font-size:.95rem}
.inhoud-nav li{padding-left:var(--s4);position:relative;counter-increment:inh}
.inhoud-nav li::before{content:counter(inh) ".";position:absolute;left:0;color:var(--accent);
                       font-weight:700;font-variant-numeric:tabular-nums}
.inhoud-nav a{color:var(--navy)}
.inhoud-nav a:hover{color:var(--accent)}
.prose{display:grid;gap:var(--s4);font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:1.5rem;margin-top:var(--s4)}
.prose h3{font-size:1.15rem;margin-top:var(--s2)}
.prose a{color:var(--navy);border-bottom:1px solid var(--line);font-weight:600}
.prose a:hover{color:var(--accent);border-color:var(--accent)}
.prose ul,.prose ol{list-style:none;display:grid;gap:var(--s2)}
.prose ul li{padding-left:var(--s4);position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;
                     background:var(--accent);border-radius:var(--radius)}
.prose ol{counter-reset:stap}
.prose ol li{padding-left:var(--s5);position:relative;counter-increment:stap}
.prose ol li::before{content:counter(stap);position:absolute;left:0;top:.15em;
                     width:26px;height:26px;display:grid;place-content:center;
                     background:var(--navy-licht);color:var(--navy);border-radius:var(--radius);
                     font-weight:700;font-size:.85rem}
.prose blockquote{padding:var(--s4);background:var(--vlak);
                  border-left:3px solid var(--accent);font-size:1.02rem}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-2)}
.prose th{color:var(--navy);font-weight:700}
.prose strong{font-weight:600;color:var(--ink)}
.tabelwrap{overflow-x:auto}
.auteur{border-top:1px solid var(--line-2);padding-top:var(--s4);display:grid;gap:var(--s2)}
.auteur__naam{font-weight:700;color:var(--navy)}
.auteur__naam span{font-weight:400;color:var(--muted)}
.auteur__bio{font-size:.95rem;color:var(--muted);max-width:68ch}

/* 404 */
.lijst-404{list-style:none;display:grid;gap:var(--s2)}
.lijst-404 a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.lijst-404 a:hover{color:var(--accent);border-color:var(--accent)}

/* Bijgewerkt */
.bijgewerkt{width:var(--breed);margin:0 auto;padding:var(--s4) 0 0;
            font-size:.85rem;color:var(--muted)}

/* Voet */
.site-foot{background:var(--navy-diep);color:var(--op-navy-zacht);font-size:.92rem;margin-top:0}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,3fr);gap:var(--s6);
          padding:var(--s6) 0}
.brand--foot{color:var(--op-navy);font-size:1.3rem}
.foot-pitch{margin-top:var(--s3);max-width:30ch}
.foot-nap{display:grid;gap:var(--s1);font-style:normal;margin-top:var(--s4)}
.foot-nap a:hover{color:var(--op-navy)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.foot-h{margin:0 0 var(--s3);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
        color:var(--op-navy);font-weight:700}
.foot-col ul{list-style:none;display:grid;gap:var(--s2)}
.foot-col a:hover{color:var(--op-navy)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--s4) 0;font-size:.86rem;
             display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.foot-bottom a{border-bottom:1px solid var(--op-navy-zacht)}
.foot-bottom a:hover{color:var(--op-navy)}
.foot-bottom ul{list-style:none;display:flex;gap:var(--s4)}

/* Responsief */
@media (max-width:1000px){
  :root{--kop:60px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .kaarten,.cijfers,.k3,.subs,.artikellijst{grid-template-columns:minmax(0,1fr)}
  .branches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prijs-functies{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}

  .nav{display:none}
  .knop-mobiel{display:inline-flex;margin-left:auto;height:38px;padding:0 var(--s3)}
  .burger{display:flex;margin-left:var(--s2)}
  .site-head__in{height:60px;gap:var(--s3)}
}
@media (min-width:1001px){
  .mnav{display:none}
}
@media (max-width:860px){
  :root{--s7:56px;--s6:40px}
  body{font-size:16px}
  .topbalk__in{justify-content:space-between;height:auto;padding:var(--s2) 0;flex-wrap:wrap;gap:var(--s3)}
  .scherm{display:none}
  .branches{grid-template-columns:minmax(0,1fr)}
  .br-kaart,.kaart,.subs .sub,.art-kaart{padding:var(--s4)}
  .sec-kop{margin-bottom:var(--s5)}
  .aanmeld{grid-template-columns:minmax(0,1fr)}
  .aanmeld .btn{width:100%}
  .slot .h2{max-width:none}
}
@media (max-width:520px){
  .h1{font-size:clamp(1.6rem,9vw,2.1rem);hyphens:auto}
  .hero .h1{font-size:clamp(1.6rem,9vw,2.1rem);line-height:1.12;max-width:none}
  .hero{padding:var(--s6) 0}
  .acts{gap:var(--s2)}
  .acts .btn{flex:1 1 100%}
  .btn{white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;
       text-align:center}
  .topbalk__in{gap:var(--s2) var(--s3);font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}

/* Kennismaking-modal.
   Een dialog centreren doe je met position:fixed, inset:0 en margin:auto.
   Dat werkt alleen als de hoogte bepaald is, vandaar height:fit-content;
   zonder dat plakt het venster linksboven. */
.modal{position:fixed;inset:0;margin:auto;
       width:min(34rem,calc(100vw - 2rem));
       height:fit-content;max-height:calc(100dvh - 2rem);
       border:0;padding:0;background:transparent;color:var(--ink);
       overflow:hidden;border-radius:16px}
.modal::backdrop{background:rgba(11,26,51,.6)}

.modal__doos{position:relative;background:var(--card);border-radius:16px;
             padding:var(--s5);display:grid;gap:var(--s4);
             max-height:calc(100dvh - 2rem);overflow-y:auto;
             box-shadow:0 40px 90px -35px rgba(11,26,51,.6)}
.modal__kop{display:grid;gap:var(--s2)}
.modal__kop .h3{margin:0;padding-right:var(--s5)}
.modal__kop p{margin:0;color:var(--ink-2)}

.modal__sluit{position:absolute;top:var(--s3);right:var(--s3);
              width:40px;height:40px;line-height:1;font-size:1.6rem;
              border:0;border-radius:10px;background:transparent;color:var(--ink-2);
              cursor:pointer;display:grid;place-items:center}
.modal__sluit:hover{background:var(--line-2);color:var(--ink)}
.modal__sluit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Het formulier op de pagina staat op een donkere sectie en zet drie velden
   plus knop op een rij. In de modal is de achtergrond licht en is er maar een
   kolom, dus die regels moeten hier allemaal opnieuw. */
.aanmeld--modal,
.aanmeld--kaart{grid-template-columns:minmax(0,1fr);max-width:none;margin-top:0;
                align-items:stretch;gap:var(--s3)}
.aanmeld--modal label,
.aanmeld--kaart label{gap:6px;font-size:.9rem;font-weight:500;color:var(--ink)}
.aanmeld--modal input,
.aanmeld--kaart input{height:48px;width:100%;padding:0 var(--s3);
                      border:1px solid var(--line);border-radius:10px;
                      background:var(--card);color:var(--ink)}
.aanmeld--modal input::placeholder,
.aanmeld--kaart input::placeholder{color:var(--ink-2)}
.aanmeld--modal .btn,
.aanmeld--kaart .btn{width:100%;height:48px;margin-top:var(--s1)}
.modal .klein{margin:0;color:var(--ink-2)}

@media (max-width:520px){
  .modal{width:calc(100vw - 1.5rem)}
  .modal__doos{padding:var(--s4);gap:var(--s3)}
  .modal__kop{gap:var(--s1)}
  .modal__kop p{font-size:.95rem}
  .aanmeld--modal{gap:var(--s2)}
  .aanmeld--modal input{height:46px}
  .modal .klein{font-size:.82rem}
}

/* Het schermbeeld op smallere schermen. De zijbalk valt als eerste weg: die
   draagt de minste informatie en kost de meeste breedte. Daarna gaat het bord
   naar twee kolommen. */
@media (max-width:1200px){
  .app{grid-template-columns:150px minmax(0,1fr);font-size:11px}
  .app__merk{font-size:15px}
}
@media (max-width:1000px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app__zij{display:none}
  .app{font-size:12px}
}
@media (max-width:640px){
  .app__bord{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app__kolom:nth-child(n+3){display:none}
  .app__tabs .app__filter{display:none}
}

/* Contactpagina: gegevens links, formulier meteen ernaast. Het stond eerder
   onder de veelgestelde vragen, waardoor je bovenaan alleen een telefoonnummer
   en een e-mailadres zag. */
.contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
            gap:var(--s7);align-items:start}
.formkaart{background:var(--card);border:1px solid var(--line);border-radius:16px;
           padding:var(--s5);display:grid;gap:var(--s3);
           box-shadow:0 24px 60px -40px rgba(16,32,64,.5)}
.formkaart .h3{margin:0}
.formkaart .klein{margin:0;color:var(--ink-2)}
.contact-nap{display:grid;gap:4px;font-style:normal}

@media (max-width:1000px){
  .contact-in{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
}
@media (max-width:520px){
  .formkaart{padding:var(--s4)}
}