@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;
}

/* Huisstijl gelijk aan Brixio en aan de app: navy en oranje, IBM Plex Sans,
   radius 2px. Kleuren en hoeken komen uit apps/web/public/assets/app.css van Makelaarsdash. */
:root{color-scheme:light;--kop:72px;
  --ground:#FFFFFF; --vlak:#EEF4FB; --card:#FFFFFF;
  --ink:#14181D; --ink-2:#2F3A45; --muted:#5B6B7B;
  --line:#C9D6E6; --line-2:#E1E9F3;
  --accent:#0056A3; --accent-hover:#00427E; --op-accent:#FFFFFF;
  --navy:#131946; --navy-diep:#0C1033; --navy-licht:#E0ECF9;
  --op-navy:#FFFFFF; --op-navy-zacht:#B9CBEA; --licht-blauw:#98C4F5;
  --ok:#24A148; --fout:#C0392B;
  --lijn-navy-in:#2D3770;
  --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}
}
*,*::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);line-height:1.15}
.h3{font-size:1.25rem;color:var(--navy)}
.h1 span{color:var(--accent)}
.lede{font-size:1.15rem;color:var(--ink-2);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}

/* 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(--licht-blauw)}

/* 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}

/* 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__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 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. */
.foot-bijgewerkt{margin:0;font-size:.85rem;opacity:.7}
.hero-tekst{display:grid;gap:var(--s4);max-width:46rem}

/* Extra tekst in de hero */

/* 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. */

/* Schermvoorbeeld met het verkoopbord */
.stip{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}

/* Kaartenraster */

/* Branchekaarten */

/* Subbranches */

/* Kolommen */
.kolommen{display:grid;gap:var(--s6) var(--s5)}
.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k2{grid-template-columns:repeat(2,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 */

/* Cijfers */

/* 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:32ch}
.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 */

/* Artikel */
.artikel{max-width:46rem;margin-inline:auto;display:grid;gap:var(--s4)}
.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)}

/* 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 */

/* 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}
  .k3,.k2{grid-template-columns: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)}
  .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}
  .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(12,16,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(12,16,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. */

/* 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(19,25,70,.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)}
}

/* Schermafbeeldingen uit de app. De brede tabelschermen mogen buiten de
   leeskolom uitlopen, anders wordt de tekst in het beeld onleesbaar klein.
   Op een telefoon past zo'n scherm niet: daar schuift het kader horizontaal
   en houdt het beeld een vaste hoogte, zodat de tekst erin leesbaar blijft. */
.beeld{margin:var(--s6) 0 0;display:grid;gap:var(--s3)}
.beeld__kader{border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--card);overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08)}
.beeld img{display:block;width:100%;height:auto}
.beeld figcaption{font-size:.9rem;color:var(--muted);max-width:var(--lees)}
.beeld figcaption b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .beeld__kader{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .beeld img{width:auto;max-width:none;height:300px}
}

/* ===================================================================
   Makelaarsdash v2: onderdelen naar 21st.dev, omgezet naar gewone CSS in
   de huisstijl (navy, oranje, IBM Plex, radius 2px, geen verlopen of gloed).
   - Productvenster in de hero  naar "Hero with Product Mockup" (vaib215)
   - Vergelijking Excel / app    naar "Comparison Section" (mohammadshehadeh)
   - Bento met mini-schermen     naar "Bento Product Features" (kavikatiyar)
   - Schermwisselaar             naar "Feature Tab Switcher" (mohammadshehadeh)
   =================================================================== */

.venster{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px -24px rgba(19,25,70,.35),0 2px 0 var(--line-2)}
.venster img{display:block;width:100%;height:auto;border-top:1px solid var(--line-2)}
.venster__balk{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:var(--vlak)}
.venster__balk span{width:8px;height:8px;border:1px solid var(--line)}
.venster__balk b{margin-left:10px;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
/* --- Vergelijking: Excel tegenover Makelaarsdash --- */
.vgl{display:grid;gap:var(--s4)}
.vgl__schakel{display:none}
.vgl__kanten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-2);background:var(--card)}
.vgl__kant{padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.vgl__kant h3{font-size:1.15rem;color:var(--navy)}
.vgl__kant ul{list-style:none;padding:0;display:grid;gap:var(--s3)}
.vgl__kant li{position:relative;padding-left:2rem;line-height:1.5}
.vgl__kant li::before{position:absolute;left:0;top:.05em;width:1.25rem;height:1.25rem;display:grid;place-items:center;
  font-size:.78rem;font-weight:700;border-radius:var(--radius)}
.vgl__kant--nu{background:var(--vlak);color:var(--muted)}
.vgl__kant--nu h3{color:var(--muted)}
.vgl__kant--nu li::before{content:"\2715";background:var(--line-2);color:var(--muted)}
.vgl__kant--straks{border-left:1px solid var(--line-2);color:var(--ink-2)}
.vgl__kant--straks li::before{content:"\2713";background:#EAF4EE;color:var(--ok)}
.vgl__uitkomst{margin:0;padding:var(--s3) var(--s4);background:var(--navy);color:var(--op-navy);font-size:1.02rem}
.vgl__uitkomst b{color:var(--licht-blauw)}

/* --- Bento met mini-schermen --- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.bento__cel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);display:grid;align-content:start;
  transition:border-color .2s,transform .2s}
.bento__cel:hover{border-color:var(--line);transform:translateY(-2px)}
.bento__cel--breed{grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.bento__tekst{padding:var(--s4) var(--s5) var(--s5);display:grid;gap:var(--s2)}
.bento__cel--breed .bento__tekst{padding:var(--s5)}
.bento__tekst h3{font-size:1.15rem;font-weight:400;color:var(--navy);line-height:1.3}
.bento__tekst h3 b{font-weight:700}
.bento__tekst p{font-size:.95rem;color:var(--muted)}

.mini{margin:var(--s4) var(--s4) 0;padding:var(--s3);background:var(--vlak);border:1px solid var(--line-2);border-radius:var(--radius);
  display:grid;gap:6px;font-size:.86rem;color:var(--ink-2)}
.bento__cel--breed .mini{margin:var(--s4)}
.mini__kop{font-weight:600;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--line-2)}
.mini__rij{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:28px;
  font-variant-numeric:tabular-nums}
.mini__rij span{display:flex;align-items:center;gap:8px}
.mini__rij b{font-weight:600;color:var(--ink)}
.mini__rij--som{border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.mini__rij--som b{color:var(--navy);font-size:1rem}
.mini__veld{background:var(--card);border:1px solid var(--accent);padding:2px 8px;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--accent)}
.mini__balk{display:flex;height:10px;gap:2px;margin-bottom:4px}
.mini__balk i{display:block;height:100%}
.mini__balk .w60{width:60%;background:var(--navy)}
.mini__balk .w40{width:40%;background:var(--licht-blauw)}
.stip{display:inline-block;width:10px;height:10px}
.stip--1{background:var(--navy)}
.stip--2{background:var(--licht-blauw)}
.label{font-size:.74rem;font-weight:600;padding:2px 6px;border-radius:var(--radius)}
.label--ok{background:#EAF4EE;color:#14532D}
.label--let{background:#FBF3E2;color:#946200}
.mini__melding{margin-top:4px;padding:8px 10px;background:var(--card);border:1px solid var(--line-2);border-left:3px solid var(--accent);font-size:.82rem}
.mini__melding b{color:var(--accent-hover);margin-right:6px}

/* --- Schermwisselaar --- */
.tabs{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--s5);align-items:start}
.tabs__lijst{display:grid;gap:2px}
.tabs__lijst [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-left:3px solid var(--line-2);color:var(--muted);transition:background .15s,border-color .15s}
.tabs__lijst [role=tab] b{color:var(--ink-2);font-size:1.05rem;font-weight:600}
.tabs__lijst [role=tab] span{font-size:.92rem;line-height:1.45;display:none}
.tabs__lijst [role=tab]:hover{background:var(--card)}
.tabs__lijst [role=tab][aria-selected=true]{background:var(--card);border-left-color:var(--accent)}
.tabs__lijst [role=tab][aria-selected=true] b{color:var(--navy)}
.tabs__lijst [role=tab][aria-selected=true] span{display:block}
.tabs__lijst [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabs__paneel{animation:paneel-in .35s ease both}
@keyframes paneel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.venster--plat{box-shadow:0 16px 40px -24px rgba(19,25,70,.35)}

/* --- Tijdlijn van de start --- */
.tijdlijn{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);position:relative}
.tijdlijn::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:1px dashed var(--line)}
.tijdlijn li{position:relative;display:grid;gap:var(--s2);align-content:start;padding-top:var(--s5)}
.tijdlijn li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;background:var(--accent);box-shadow:0 0 0 5px var(--vlak)}
.tijdlijn h3{font-size:1.1rem;color:var(--navy)}
.tijdlijn p{font-size:.97rem;color:var(--muted)}

/* --- Rustig verschijnen bij scrollen (alleen met JS, en niet bij beperkte beweging) --- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js-reveal [data-reveal].is-zichtbaar{opacity:1;transform:none}

@media (max-width:1000px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tabs{grid-template-columns:minmax(0,1fr)}
  .tabs__lijst{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:0;border-bottom:1px solid var(--line-2)}
  .tabs__lijst [role=tab]{border-left:0;border-bottom:3px solid transparent;padding:var(--s2) var(--s3)}
  .tabs__lijst [role=tab][aria-selected=true]{border-bottom-color:var(--accent)}
  .tabs__lijst [role=tab][aria-selected=true] span{display:none}
}
@media (max-width:760px){
  .vgl__schakel{display:inline-flex;justify-self:start;border:1px solid var(--line);background:var(--card)}
  .vgl__schakel button{all:unset;cursor:pointer;padding:8px 14px;font-size:.9rem;font-weight:600;color:var(--muted)}
  .vgl__schakel button[aria-selected=true]{background:var(--navy);color:var(--op-navy)}
  .vgl__schakel button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .vgl__kanten{grid-template-columns:minmax(0,1fr)}
  .vgl__kant--straks{border-left:0}
  .vgl[data-actief=nu] .vgl__kant--straks,.vgl[data-actief=straks] .vgl__kant--nu{display:none}
  .bento,.bento__cel--breed{grid-template-columns:minmax(0,1fr)}
  .bento__cel--breed{grid-column:auto}
  .tijdlijn{grid-template-columns:minmax(0,1fr)}
  .tijdlijn::before{left:6px;right:auto;top:0;bottom:0;border-top:0;border-left:1px dashed var(--line)}
  .tijdlijn li{padding:0 0 0 var(--s5)}
  .tijdlijn li::before{top:4px}
}
@media (prefers-reduced-motion:reduce){
  .tabs__paneel{animation:none}
  .js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
  .bento__cel{transition:none}
  .bento__cel:hover{transform:none}
}

/* --- Hero: gecentreerd op navy, het dashboard eronder. Het venster schaalt
   mee met de schermhoogte (--hero-boven is alles boven en onder het beeld:
   kopbalk, tekst, marges), zodat het bij het laden helemaal in beeld staat. --- */
.hero2{--hero-boven:470px;background:linear-gradient(var(--navy) 0 72%,var(--vlak) 72% 100%);color:var(--op-navy);
  padding:var(--s5) 0 var(--s4)}
.hero2__in{display:grid;gap:var(--s4)}
.hero2__tekst{display:grid;justify-items:center;text-align:center;gap:var(--s3)}
.hero2__eyebrow{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--licht-blauw)}
.hero2 .h1{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.08;color:#fff;letter-spacing:-.015em}
.hero2 .h1 span{color:var(--licht-blauw)}
.hero2__lede{font-size:1.08rem;line-height:1.55;color:var(--op-navy-zacht);max-width:44rem}
.hero2__acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s1)}
.hero2__link{color:#fff;font-weight:600;border-bottom:1px solid var(--lijn-navy-in);padding-bottom:2px}
.hero2__link:hover{border-color:var(--accent)}
.hero2__feiten{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s4);
  font-size:.86rem;color:var(--op-navy-zacht)}
.hero2__feiten li{display:flex;align-items:center;gap:8px}
.hero2__feiten li::before{content:"\2713";color:#7FD49B;font-weight:700}
.hero2__beeld{margin:0 auto;width:min(100%,66rem,(100svh - var(--hero-boven))*1.6)}
.hero2__beeld .venster{box-shadow:0 26px 60px -28px rgba(12,16,51,.6)}
.venster__balk em{margin-left:auto;font-style:normal;font-size:.72rem;color:var(--muted)}
/* Lagere schermen (de meeste laptops): tekst links, dashboard rechts, allebei in beeld. */
@media (min-width:1001px) and (max-height:900px){
  .hero2{background:var(--navy);padding:var(--s5) 0}
  .hero2__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:var(--s6);
    min-height:calc(100svh - 106px - var(--s5)*2)}
  .hero2__tekst{justify-items:start;text-align:left}
  .hero2 .h1{font-size:clamp(2rem,3vw,2.8rem);max-width:16ch}
  .hero2__acts,.hero2__feiten{justify-content:flex-start}
  .hero2__feiten{flex-direction:column;gap:var(--s1)}
  .hero2__beeld{width:100%;max-height:calc(100svh - 106px - var(--s5)*2)}
  .hero2__beeld .venster{border-color:var(--lijn-navy-in)}
}
@media (max-width:1000px){
  .hero2__beeld{width:100%}
}
@media (max-width:760px){
  .hero2{padding:var(--s4) 0 var(--s5);background:var(--navy)}
  .hero2__beeld{order:-1}
  .hero2__feiten{flex-direction:column;align-items:center}
}

/* Op marineblauw: witte knop met blauwe tekst, lichtblauwe accenten. */
.hero2 .btn--primary,.slot .btn--primary{background:#fff;border-color:#fff;color:var(--accent)}
.hero2 .btn--primary:hover,.slot .btn--primary:hover{background:var(--navy-licht);border-color:var(--navy-licht);color:var(--accent-hover)}
.slot .stappen li::before{background:var(--licht-blauw);color:var(--navy)}
.slot .aanmeld input:focus-visible,.hero2 .btn:focus-visible{outline-color:var(--licht-blauw)}
.site-foot .brand i{color:var(--licht-blauw)}