/* ============================================================================
   mizen-web.css — ontwerpsysteem voor de publieke Mizen-website
   ----------------------------------------------------------------------------
   Richting E2 (dubbele golf), vastgesteld op 2026-08-14. Palet en vormtaal komen
   letterlijk uit Tools-website\site\mizen.css; dat bestand is de bron en is niet
   gewijzigd. De MAATVOERING is hier anders: mizen.css is gemaakt voor dichte
   tabelschermen met 14px basis, dit is een leessite met 17px basis.

   Leeswijzer, in deze volgorde:
     0.  Lettertype en tokens
     1.  Grondslag en typografie
     2.  Toegankelijkheid: overslaan-naar-inhoud en focus
     3.  Kop met navigatie, uitklapmenu's, taalwissel, mobiel paneel
     4.  Hero en de dubbele golf
     5.  Opmaakraster, secties, tekstkolom
     6.  Knoppen en links
     7.  Rijenkaart, kaarten, kolommen
     8.  Tabel
     9.  Tijdlijn
     10. Vraag en antwoord
     11. Opbouw van een opdracht (eenheden, geen bedragen)
     12. Kruimelpad en paginering
     13. Kennisoverzicht met filters
     14. Artikel: kop, inhoudsopgave, lopende tekst
     15. Contactblok
     16. Formulier met foutmeldingen
     17. Meldingsvlak
     18. Voet
     19. Hulpklassen
     20. Beweging
     21. Print

   Harde regels die in dit bestand nergens worden gebroken:
     - geen box-shadow, nergens; scheiding met een rand of een hairline
     - geen scherpe hoeken op een vlak
     - geen mix-blend-mode en geen gradiënt tussen paletkleuren
     - #C6ED62 nooit als tekst of als dunne lijn op wit
     - geen kleur die niet in het palet van deel E staat
   ========================================================================== */

/* ============================================================================
   0. Lettertype en tokens
   ========================================================================== */

/* Jost is de letter van mizen.nl en staat vooraan in --geo. Er wordt NIETS van
   Google geladen; dat is precies de externe afhankelijkheid die de
   privacyverklaring als actiepunt noemt.

   Zolang bron/assets/lettertype/jost-variabel.woff2 er niet is, valt alles terug
   op Century Gothic en Questrial. Zodra dat bestand er wel staat, pakt de site
   Jost vanzelf op zonder dat hier iets hoeft te wijzigen. Prijs daarvan: tot die
   tijd één mislukte aanvraag per bezoek. Dat is bewust; de alternatieven zijn een
   handmatige stap vergeten of een externe bron laden, en die zijn erger.
   Zie bron/assets/lettertype/LEESMIJ.txt. */
@font-face{
  font-family:"Jost";
  src:local("Jost"),
      url("/assets/lettertype/jost-variabel.woff2") format("woff2-variations");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---------- palet: letterlijk uit Tools-website\site\mizen.css ---------- */
  --indigo:#191930;        /* dominante donkere drager, ook de vaste balk */
  --indigo-2:#232342;      /* iets lichter, voor randen en hover binnen donker */
  --lime:#C6ED62;          /* accent; alleen als vlak, nooit als tekst op wit */
  --lime-diep:#9FCB3E;     /* markeringen op bone en op donker */
  --lime-ink:#4E6B15;      /* limoen als tekst of lijn op een lichte ondergrond */
  --lila:#D2C7F7;          /* herokleur */
  --lila-diep:#8B7FB4;
  --teal:#03444E;
  --teal-diep:#022B31;
  --bone:#F4F3ED;          /* werkblad onder tabellen en formulieren */

  /* ---------- vlakken en tekst ---------- */
  --kaart:#FFFFFF;
  --lijn:#E3E2DC;
  --lijn-donker:rgba(255,255,255,.12);
  --ink:#1F2430;
  --ink-zacht:#5C6472;
  --ink-mut:#8A91A0;
  --ink-licht:#FFFFFF;
  --ink-licht-zacht:#A9B0C2;

  /* ---------- status; nooit als accentkleur of versiering ---------- */
  --ok:#2E7D32; --waarschuwing:#B26A00; --fout:#C0392B;
  --ok-vlak:#EDF5EE; --waarschuwing-vlak:#FFF7E6; --fout-vlak:#FDECEA;

  /* ---------- letterstapels ----------
     --geo   koppen, woordmerk, navigatie, knoppen
     --tekst grote lichte tekst (hero-inleiding); Segoe UI Light is bij kleine
             maten op scherm te dun, dus niet voor lopende tekst
     --lees  lopende tekst, regulier gewicht (afwijking van de documentnorm,
             staat als aanname 5 in strategie/stijl-en-voorkeuren.md)
     --half  halfvet, voor labels en knoppen */
  --geo:"Jost","Century Gothic","Questrial","Futura","Segoe UI",system-ui,Arial,sans-serif;
  --tekst:"Segoe UI Light","Segoe UI",system-ui,Arial,sans-serif;
  --lees:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --half:"Segoe UI Semibold","Segoe UI",system-ui,Arial,sans-serif;

  /* ---------- typografische schaal ----------
     Vloeiend tussen 375px en 1440px. De stappen zijn afgeleid van de
     hero-instelling uit mizen.css (clamp(30px,4.6vw,56px)) en daarna naar
     beneden doorgerekend met ongeveer factor 1,28. Getest zonder Jost: Century
     Gothic is breder en heeft een kleinere x-hoogte, daarom staan de koppen een
     halve stap kleiner dan de rekenreeks en is de regelafstand ruimer. */
  --t-mini:12px;                              /* kleine labels, altijd met vet */
  --t-klein:14px;                             /* meta, bijschrift, tabelvoet */
  --t-tekst:clamp(16px,0.18vw + 15.3px,17px); /* lopende tekst */
  --t-groot:clamp(17px,0.37vw + 15.6px,19px); /* eerste alinea van een sectie */
  --t-lead:clamp(19px,0.94vw + 15.5px,24px);  /* hero-inleiding */
  --t-h4:clamp(16px,0.19vw + 15.3px,17px);
  --t-h3:clamp(18px,0.56vw + 15.9px,21px);
  --t-h2:clamp(23px,1.5vw + 17.4px,31px);
  --t-h1:clamp(27px,2.6vw + 17.3px,41px);     /* compacte hero, subpagina's */
  --t-h1-groot:clamp(32px,4.3vw + 15.9px,56px);/* startpagina */

  --lh-kop:1.06;
  --lh-tekst:1.6;
  --ls-kop:-0.02em;   /* mizen.css doet -1.6px vast; in em blijft dat kloppen
                         over de hele clamp-reeks in plaats van alleen bovenaan */
  --ls-label:0.09em;

  /* ---------- verticaal ritme ----------
     Alles is een veelvoud van 4. --ruimte-sectie is de afstand tussen twee
     secties, --ruimte-blok tussen blokken binnen een sectie. */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:24px;
  --r-6:32px; --r-7:48px; --r-8:64px; --r-9:96px;
  --ruimte-sectie:var(--r-9);
  --ruimte-blok:var(--r-5);

  /* ---------- maten en vormen ---------- */
  --breed:1120px;
  --breed-tekst:68ch;   /* ongeveer 70 tekens; breder leest slecht */
  --rand:44px;
  --rond-xl:24px;       /* grote kaarten en secties */
  --rond-groot:18px;    /* kaarten en platen */
  --rond:14px;          /* invoervelden en kleine platen */
  --rond-klein:12px;    /* knoppen en navigatie */
  --rond-pil:999px;     /* chips */
  --kop-hoogte:68px;
  --golf-hoogte:88px;

  /* De focusring. Op licht moet hij 3:1 halen tegen wit; #9FCB3E haalt maar
     1,9:1 en is daarvoor dus ongeschikt. Op donker is --lime juist het beste. */
  --focus:var(--lime-ink);

  /* Tweede kleur van de dubbele golf: de kleur van wat eronder komt. */
  --golf-naar:var(--kaart);
}

/* ============================================================================
   1. Grondslag en typografie
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kop-hoogte) + var(--r-4));
}

body{
  margin:0;
  background:var(--kaart);
  color:var(--ink);
  font-family:var(--lees);
  font-size:var(--t-tekst);
  line-height:var(--lh-tekst);
  -webkit-font-smoothing:antialiased;
  /* Sluit horizontale overloop af op de hoogste laag. Als er ergens toch iets te
     breed is, scrollt de pagina niet zijwaarts maar valt het op in de proef. */
  overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:var(--geo);
  font-weight:600;
  line-height:var(--lh-kop);
  letter-spacing:var(--ls-kop);
  color:var(--indigo);
  margin:0 0 var(--r-3);
  text-wrap:balance;
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);letter-spacing:-0.01em;}
h4{font-size:var(--t-h4);letter-spacing:0;font-family:var(--half);font-weight:600;}

p{margin:0 0 var(--r-4);}
p:last-child{margin-bottom:0;}

ul,ol{margin:0 0 var(--r-4);padding-left:1.35em;}
li{margin:0 0 var(--r-2);}
li:last-child{margin-bottom:0;}

strong,b{font-family:var(--half);font-weight:600;}
small{font-size:var(--t-klein);}

a{color:var(--ink);text-decoration:underline;text-underline-offset:0.16em;
  text-decoration-thickness:from-font;}
a:hover{color:var(--lime-ink);text-decoration-color:var(--lime-diep);}

img,svg,video{max-width:100%;height:auto;}
figure{margin:0 0 var(--r-5);}
figcaption{font-size:var(--t-klein);color:var(--ink-zacht);margin-top:var(--r-2);}

hr{border:0;border-top:1px solid var(--lijn);margin:var(--r-7) 0;}

blockquote{
  margin:0 0 var(--r-5);
  padding:var(--r-4) var(--r-5);
  background:var(--bone);
  border-radius:var(--rond);
  border-left:3px solid var(--lime-diep);
  color:var(--ink);
}
blockquote p:last-child{margin-bottom:0;}

code,kbd,samp{
  font-family:Consolas,"Cascadia Mono",Menlo,monospace;
  font-size:0.92em;
  background:var(--bone);
  border:1px solid var(--lijn);
  border-radius:6px;
  padding:0.08em 0.34em;
}
pre{
  margin:0 0 var(--r-5);
  padding:var(--r-4);
  background:var(--bone);
  border:1px solid var(--lijn);
  border-radius:var(--rond);
  overflow-x:auto;
}
pre code{background:none;border:0;padding:0;font-size:var(--t-klein);}

button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}

/* Getallen in tabellen en bedragen lijnen onder elkaar uit. */
.mz-cijfers,td.mz-cijfers,th.mz-cijfers{font-variant-numeric:tabular-nums;}

/* Bovenkopje. Klein, halfvet, met spatiëring. Draagt nooit betekenis die niet
   ook in de kop eronder staat, want het is geen kopniveau. */
.mz-kopje{
  font-family:var(--half);
  font-size:var(--t-mini);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-zacht);
  margin:0 0 var(--r-3);
}
/* Op lila geen doorschijnende tekst: 12px op 70 procent dekking haalt geen 4,5:1.
   Solide indigo op lila is 10,8:1 en leest nog steeds als een label, want het is
   klein, halfvet en in hoofdletters. */
.mz-hero .mz-kopje{color:var(--indigo);}
.mz-donker .mz-kopje{color:var(--ink-licht-zacht);}

/* Inleidende alinea onder een h1 of h2. Leeg blijft hij weg: de sjablonen vullen
   hem uit de front-mattersleutel `samenvatting` en die is niet verplicht. */
.mz-lead{font-size:var(--t-lead);line-height:1.34;font-family:var(--tekst);}
.mz-lead:empty{display:none;}
.mz-intro{font-size:var(--t-groot);line-height:1.55;}

/* ============================================================================
   2. Toegankelijkheid: overslaan-naar-inhoud en focus
   ========================================================================== */

.mz-overslaan{
  position:absolute;
  left:var(--r-4);
  top:-100px;
  z-index:80;
  background:var(--lime);
  color:var(--indigo);
  font-family:var(--half);
  padding:12px 18px;
  border-radius:var(--rond-klein);
  text-decoration:none;
  transition:top 120ms linear;
}
.mz-overslaan:focus{top:var(--r-2);color:var(--indigo);}

/* Nooit outline:none. De ring is overal dezelfde vorm; alleen de kleur wisselt
   met de ondergrond, want anders haalt hij 3:1 niet. */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}
.mz-donker,.mz-kop,.mz-voet{--focus:var(--lime);}

/* Alleen voor schermlezers. */
.mz-alleenlezer{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================================
   3. Kop met navigatie
   ----------------------------------------------------------------------------
   Eén navigatielijst in de HTML, niet twee. Op de brede weergave is dat de balk,
   onder 900px is het het paneel. Twee kopieën van hetzelfde menu kosten een
   schermlezer een tweede rondje en een crawler een tweede set links.

   Het paneel opent met een aankruisvakje en niet met JavaScript, want de site
   moet zonder JavaScript volledig werken. mizen.js hangt er alleen aria-expanded,
   de Escape-toets en het klikken naast het paneel bij.
   ========================================================================== */

.mz-kop{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--indigo);
  color:var(--ink-licht);
  border-bottom:1px solid var(--indigo-2);
}
.mz-kop a{color:inherit;text-decoration:none;}

.mz-kop-binnen{
  max-width:var(--breed);
  margin:0 auto;
  padding:0 var(--rand);
  min-height:var(--kop-hoogte);
  display:flex;
  align-items:center;
  gap:var(--r-5);
}

/* --- woordmerk ------------------------------------------------------------- */
/* Het merk hoeft niet groot, het moet kloppen. Het woordmerk is het officiële
   logo als SVG, in limoen op indigo (12,8:1). Geen limoenstreep eronder: op
   indigo IS het woordmerk al het limoensignaal, en limoen op limoen zegt niets.
   In de voet, waar het woordmerk wit is, staat de streep er wel. */
.mz-merk{display:inline-flex;align-items:center;flex:0 0 auto;padding:var(--r-2) 0;}
.mz-merk img{display:block;width:104px;height:52px;}
.mz-merk:hover{opacity:.85;}

/* Telefoonknop, alleen op mobiel. Bellen is op een telefoon de handeling met de
   hoogste intentie en die mag niet achter het menu verdwijnen. Dit is de enige
   verdubbeling in de kop: hetzelfde tel:-adres staat ook in het paneel. Op een
   tel:-link kost dat geen crawlbudget, en de twee zijn nooit tegelijk zichtbaar
   voor een schermlezer, want het paneel is dicht met visibility:hidden. */
.mz-kop-tel-mobiel{display:none;}

/* --- navigatie ------------------------------------------------------------- */
.mz-kop-vouw{
  display:flex;
  align-items:center;
  gap:var(--r-5);
  flex:1 1 auto;
  min-width:0;
}

.mz-nav{flex:1 1 auto;min-width:0;}
.mz-nav > ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:var(--r-1);
}
.mz-nav > ul > li{margin:0;position:relative;}
/* De offerteknop is de laatste ingang uit site.json en wordt naar rechts
   geschoven. Eén hoofdknop per schermvulling; verder staat er in de balk geen
   tweede limoenvlak. */
.mz-nav > ul > li:last-child{margin-left:auto;padding-left:var(--r-4);}

.mz-nav > ul > li > a,
.mz-nav > ul > li > .mz-nav-knop{
  display:block;
  font-family:var(--geo);
  font-size:16px;
  line-height:1;
  padding:11px 14px;
  border-radius:var(--rond-klein);
  border:0;
  background:none;
  color:inherit;
  white-space:nowrap;
  position:relative;
}
.mz-nav > ul > li > a:hover,
.mz-nav > ul > li > .mz-nav-knop:hover{background:var(--indigo-2);color:var(--ink-licht);}

/* Actieve ingang: limoenstreep plus aria-current. Kleur is nooit de enige
   drager van betekenis, daarom staat aria-current in de HTML. */
.mz-nav > ul > li > a[aria-current]::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:4px;
  height:3px;
  border-radius:2px;
  background:var(--lime);
}

/* De offerteknop in de balk. Geselecteerd op zijn eigen adres en niet op
   positie, zodat een andere volgorde in site.json hem niet stilletjes sloopt. */
.mz-nav a[href$="/offerte/"],
.mz-nav a[href$="/quote/"]{
  background:var(--lime);
  color:var(--indigo);
  font-family:var(--half);
  padding:12px 20px;
  border-radius:var(--rond-klein);
  transition:background-color 120ms linear;
}
.mz-nav a[href$="/offerte/"]:hover,
.mz-nav a[href$="/quote/"]:hover{background:var(--lime-diep);color:var(--indigo);}
.mz-nav a[href$="/offerte/"][aria-current]::after,
.mz-nav a[href$="/quote/"][aria-current]::after{background:var(--lime-ink);}

/* --- uitklapmenu voor Diensten en Voor wie --------------------------------- */
/* De enige plek in de navigatie waar iets openklapt. Werkt met <details> zodat
   het zonder JavaScript opengaat en met het toetsenbord te bedienen is. */
.mz-uitklap{position:relative;}
.mz-uitklap > summary{
  display:block;
  list-style:none;
  cursor:pointer;
  font-family:var(--geo);
  font-size:16px;
  line-height:1;
  padding:11px 32px 11px 14px;
  border-radius:var(--rond-klein);
  white-space:nowrap;
  position:relative;
}
.mz-uitklap > summary::-webkit-details-marker{display:none;}
.mz-uitklap > summary::marker{content:"";}
.mz-uitklap > summary:hover{background:var(--indigo-2);}
/* Het pijltje. Een driehoek van randen, dus geen extra bestand en geen icoonset. */
.mz-uitklap > summary::after{
  content:"";
  position:absolute;
  right:13px;top:calc(50% - 2px);
  width:6px;height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
  opacity:.75;
}
.mz-uitklap[open] > summary::after{transform:rotate(-135deg);top:calc(50% - 4px);}
.mz-uitklap[open] > summary{background:var(--indigo-2);}

.mz-uitklap-paneel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:322px;
  background:var(--kaart);
  color:var(--ink);
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  padding:var(--r-2);
  z-index:60;
}
.mz-uitklap-paneel ul{list-style:none;margin:0;padding:0;}
.mz-uitklap-paneel li{margin:0;}
.mz-uitklap-paneel a{
  display:block;
  padding:9px 12px;
  border-radius:var(--rond-klein);
  font-size:15px;
  color:var(--ink);
}
.mz-uitklap-paneel a:hover{background:var(--bone);color:var(--ink);
  transform:translateX(3px);}
/* Eerste regel is het overzicht zelf, zodat de bovenliggende pagina bereikbaar
   blijft. Daaronder een hairline, niet een lege ruimte. */
.mz-uitklap-paneel .mz-uitklap-overzicht{
  font-family:var(--half);
  border-bottom:1px solid var(--lijn);
  border-radius:var(--rond-klein) var(--rond-klein) 0 0;
  margin-bottom:var(--r-1);
}

/* --- rechterkant van de balk ---------------------------------------------- */
.mz-kop-acties{
  display:flex;
  align-items:center;
  gap:var(--r-4);
  flex:0 0 auto;
}
.mz-kop-tel{
  font-family:var(--geo);
  font-size:15px;
  white-space:nowrap;
  color:var(--ink-licht);
}
.mz-kop-tel:hover{color:var(--lime);}
.mz-kop-mail{display:none;}

/* Taalwissel: tekst, geen vlag. Een vlag is een land en geen taal. Het
   aanraakvlak is minstens 44px hoog, ook op de brede weergave. */
.mz-taal{
  font-family:var(--half);
  font-size:13px;
  letter-spacing:0.04em;
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--rond-pil);
  padding:0 14px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.mz-taal:hover{border-color:var(--lime);color:var(--lime);}
/* Altijd de naam van de andere taal voluit, nooit twee letters en nooit een
   vlag. Een vlag is een land en geen taal, en de Engelse site is juist bedoeld
   voor lezers uit meerdere landen. */

/* --- menuknop en paneel op mobiel ----------------------------------------- */
.mz-menu-vink{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.mz-menu-knop{display:none;}

@media (max-width:899px){
  :root{--rand:20px;--kop-hoogte:56px;}

  .mz-kop-binnen{gap:var(--r-3);flex-wrap:wrap;padding-right:var(--r-3);}
  .mz-merk{margin-right:auto;order:1;}
  .mz-merk img{width:82px;height:41px;}

  .mz-kop-tel-mobiel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    border:1px solid var(--lijn-donker);
    border-radius:var(--rond-klein);
    color:var(--ink-licht);
    order:2;
  }
  .mz-kop-tel-mobiel:hover{border-color:var(--lime);color:var(--lime);}

  .mz-menu-knop{
    display:inline-flex;
    align-items:center;
    gap:var(--r-2);
    min-height:44px;
    padding:0 14px;
    border:1px solid var(--lijn-donker);
    border-radius:var(--rond-klein);
    font-family:var(--half);
    font-size:14px;
    cursor:pointer;
    order:3;
  }
  .mz-menu-knop:hover{border-color:var(--lime);}
  .mz-menu-vink:focus-visible + .mz-menu-knop{outline:2px solid var(--lime);outline-offset:2px;}

  /* Drie streepjes plus een leesbaar label, niet alleen streepjes. */
  .mz-menu-streep{position:relative;width:16px;height:2px;background:currentColor;
    border-radius:2px;display:block;}
  .mz-menu-streep::before,.mz-menu-streep::after{content:"";position:absolute;
    left:0;width:16px;height:2px;background:currentColor;border-radius:2px;}
  .mz-menu-streep::before{top:-5px;}
  .mz-menu-streep::after{top:5px;}
  /* Open: drie streepjes. Dicht: een kruis. Het woord naast het icoon blijft
     hetzelfde, want dat komt uit site.json en er is geen tweede term voor. */
  .mz-menu-vink:checked + .mz-menu-knop{border-color:var(--lime);}
  .mz-menu-vink:checked + .mz-menu-knop .mz-menu-streep{background:none;}
  .mz-menu-vink:checked + .mz-menu-knop .mz-menu-streep::before{top:0;transform:rotate(45deg);}
  .mz-menu-vink:checked + .mz-menu-knop .mz-menu-streep::after{top:0;transform:rotate(-45deg);}

  /* Het paneel. Volle breedte onder de balk, over de hele resterende hoogte.
     Niets schuift en niets zoomt: alleen de dekking gaat in 150ms omhoog. */
  .mz-kop-vouw{
    display:block;
    order:4;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:opacity 150ms linear,visibility 150ms linear;
  }
  .mz-menu-vink:checked ~ .mz-kop-vouw{
    /* Over de hele resterende hoogte, zodat het geen half open lade lijkt. */
    max-height:calc(100dvh - var(--kop-hoogte));
    min-height:calc(100dvh - var(--kop-hoogte));
    overflow-y:auto;
    opacity:1;
    visibility:visible;
    padding:var(--r-4) 0 var(--r-6);
    border-top:1px solid var(--indigo-2);
    margin-top:var(--r-2);
  }

  .mz-nav{flex:none;}
  .mz-nav > ul{display:block;}
  .mz-nav > ul > li > a,
  .mz-uitklap > summary{
    font-size:17px;
    padding:13px 4px;
    min-height:44px;
    display:flex;
    align-items:center;
    border-radius:var(--rond-klein);
  }
  .mz-nav > ul > li + li{border-top:1px solid var(--indigo-2);}
  .mz-nav > ul > li > a[aria-current]::after{left:4px;right:auto;width:22px;bottom:8px;}

  /* De offerteknop staat in het paneel onder de lijst, over de volle breedte.
     Wie het menu opent, zoekt eerst een pagina; de knop komt daarna. */
  .mz-nav > ul > li:last-child{
    margin:var(--r-4) 0 0;
    padding:var(--r-4) 0 0;
    border-top:1px solid var(--indigo-2);
  }
  .mz-nav a[href$="/offerte/"],
  .mz-nav a[href$="/quote/"]{
    justify-content:center;
    padding:13px 20px;
    font-size:16px;
  }
  .mz-nav a[href$="/offerte/"][aria-current]::after,
  .mz-nav a[href$="/quote/"][aria-current]::after{display:none;}

  /* Uitklap wordt een ingesprongen lijst in de stroom, geen zwevend paneel. */
  .mz-uitklap{position:static;}
  .mz-uitklap > summary{padding-right:28px;}
  .mz-uitklap-paneel{
    position:static;
    min-width:0;
    background:none;
    color:inherit;
    border:0;
    border-radius:0;
    padding:0 0 var(--r-3) var(--r-4);
  }
  .mz-uitklap-paneel a{
    color:var(--ink-licht-zacht);
    min-height:44px;
    display:flex;
    align-items:center;
    padding:8px 4px;
  }
  .mz-uitklap-paneel a:hover{background:none;color:var(--lime);}
  .mz-uitklap-paneel .mz-uitklap-overzicht{border-bottom:0;color:var(--ink-licht);}

  /* Volgorde in het paneel: eerst de ingangen, dan de knop, dan telefoon en
     e-mail, dan de taal voluit. */
  .mz-kop-acties{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--r-1);
    margin-top:var(--r-4);
    padding-top:var(--r-4);
    border-top:1px solid var(--indigo-2);
  }
  .mz-kop-tel,.mz-kop-mail{
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:17px;
    color:var(--ink-licht);
  }
  .mz-taal{align-self:flex-start;min-height:44px;font-size:15px;margin-top:var(--r-3);}
}

/* ============================================================================
   4. Hero en de dubbele golf
   ----------------------------------------------------------------------------
   De vastgestelde vorm: een vlak over de volle breedte, gestapeld, met een
   dubbele golf als onderrand. Limoen voorop, de bladkleur erachter. De golf
   staat één keer per pagina, onder de hero, en nergens anders; herhaling maakt
   er versiering van.

   De hero vult nooit het hele scherm. Onder de kop en de eerste alinea moet het
   begin van het volgende blok zichtbaar zijn, want dat is het bewijs dat de
   pagina doorloopt.
   ========================================================================== */

.mz-hero{
  position:relative;
  background:var(--lila);
  color:var(--indigo);
  padding:var(--r-7) var(--rand) calc(var(--golf-hoogte) + var(--r-6));
}
.mz-hero-in{max-width:var(--breed);margin:0 auto;}
.mz-hero h1{
  font-size:var(--t-h1-groot);
  margin:0 0 var(--r-4);
  max-width:22ch;
}
.mz-hero .mz-lead{max-width:56ch;margin:0;}
.mz-hero a{color:var(--indigo);}

/* Compacte variant voor elke pagina behalve de startpagina. */
.mz-hero.mz-hero-klein{padding:var(--r-6) var(--rand) calc(var(--golf-hoogte) + var(--r-5));}
.mz-hero.mz-hero-klein h1{font-size:var(--t-h1);max-width:26ch;margin-bottom:var(--r-3);}
.mz-hero.mz-hero-klein .mz-lead{font-size:var(--t-groot);line-height:1.5;}

/* Wat er onder de golf komt bepaalt de tweede kleur. */
.mz-hero.mz-naar-bone{--golf-naar:var(--bone);}
.mz-hero.mz-naar-wit{--golf-naar:var(--kaart);}

.mz-golf{
  position:absolute;
  left:0;right:0;bottom:-1px;
  width:100%;
  height:var(--golf-hoogte);
  display:block;
  pointer-events:none;
}
.mz-golf-voor{fill:var(--lime);}
.mz-golf-achter{fill:var(--golf-naar);}

@media (max-width:699px){
  :root{--golf-hoogte:52px;}
  .mz-hero h1{max-width:none;}
}

/* Paginakop zonder gekleurd vlak. Voor de kantoorgegevens: die pagina heeft
   geen hero met een gekleurd vlak en geen conversieblok. */
.mz-paginakop{
  border-bottom:1px solid var(--lijn);
  padding:var(--r-7) 0 var(--r-5);
}
.mz-paginakop h1{margin-bottom:var(--r-3);}
.mz-paginakop .mz-adresregel{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  margin:0;
}

/* ============================================================================
   5. Opmaakraster, secties, tekstkolom
   ========================================================================== */

.mz-inhoud{display:block;}

.mz-band{padding:var(--ruimte-sectie) var(--rand);}
.mz-band-in,.mz-in{max-width:var(--breed);margin:0 auto;}

/* Een band met een eigen ondergrond. Nooit meer dan zes vlakken op een pagina;
   wit, bone en indigo dragen de site. */
.mz-band-bone{background:var(--bone);}
.mz-band-donker,.mz-donker{background:var(--indigo);color:var(--ink-licht);}
.mz-donker h1,.mz-donker h2,.mz-donker h3,.mz-donker h4{color:var(--ink-licht);}
.mz-donker a{color:var(--ink-licht);}
.mz-donker a:hover{color:var(--lime);text-decoration-color:var(--lime);}
.mz-donker .mz-zacht{color:var(--ink-licht-zacht);}

/* Direct onder de golf hoort geen extra ruimte, anders lijkt de pagina te
   beginnen met een gat. */
.mz-hero + .mz-band,.mz-hero + .kruimels + .mz-band{padding-top:var(--r-7);}

.mz-sectie{margin:0 0 var(--ruimte-sectie);}
.mz-sectie:last-child{margin-bottom:0;}
.mz-sectie > h2{margin-bottom:var(--r-4);}
.mz-sectie-kop{margin-bottom:var(--r-5);max-width:var(--breed-tekst);}
.mz-sectie-kop > :last-child{margin-bottom:0;}

/* Lopende tekst blijft binnen ongeveer 70 tekens. */
.mz-tekst,.mz-prose{max-width:var(--breed-tekst);}
.mz-tekst > :last-child{margin-bottom:0;}

/* Twee kolommen waarvan de linker de kop draagt. Op mobiel gestapeld. */
.mz-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);
  gap:var(--r-7);align-items:start;}
@media (max-width:899px){.mz-split{grid-template-columns:1fr;gap:var(--r-5);}}

.mz-zacht{color:var(--ink-zacht);}
.mz-meta{font-size:var(--t-klein);color:var(--ink-zacht);margin:0 0 var(--r-3);}

@media (max-width:699px){
  :root{
    --rand:20px;
    --ruimte-sectie:var(--r-8);
    --breed-tekst:100%;
  }
}

/* ============================================================================
   6. Knoppen en links
   ----------------------------------------------------------------------------
   Eén hoofdknop per schermvulling. Twee limoenknoppen naast elkaar laten de
   bezoeker kiezen tussen twee dingen die er even belangrijk uitzien, en dan
   kiest hij geen van beide. Knoptekst zegt wat er gebeurt; nooit "Lees meer".
   ========================================================================== */

.mz-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--r-2);
  min-height:44px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--rond-klein);
  background:var(--lime);
  color:var(--indigo);
  font-family:var(--half);
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
  transition:background-color 120ms linear,color 120ms linear,border-color 120ms linear;
}
.mz-knop:hover{background:var(--lime-diep);color:var(--indigo);}
.mz-knop:active{background:var(--lime-ink);color:var(--ink-licht);}

/* Rustige knop: wit met een rand. Voor de tweede actie. */
.mz-knop-rustig{background:var(--kaart);color:var(--ink);border-color:var(--lijn);}
.mz-knop-rustig:hover{background:var(--bone);color:var(--ink);border-color:var(--ink-mut);}

/* Op een donkere ondergrond: transparant met een witte rand. */
.mz-knop-donker{background:transparent;color:var(--ink-licht);border-color:rgba(255,255,255,.4);}
.mz-knop-donker:hover{background:var(--indigo-2);color:var(--ink-licht);border-color:var(--lime);}

.mz-knop[aria-disabled="true"],.mz-knop:disabled{
  background:var(--lijn);color:var(--ink-zacht);border-color:var(--lijn);
  cursor:not-allowed;
}

/* Knoprij. Op mobiel is de hoofdknop over de volle kolombreedte en staat er
   nooit meer dan één in beeld. */
.mz-knoprij{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r-4);}
@media (max-width:699px){
  .mz-knoprij{flex-direction:column;align-items:stretch;gap:var(--r-3);}
  .mz-knoprij .mz-knop{width:100%;}
}

/* Tekstlink met een pijl. Voor een tweede actie naast een knop. */
.mz-link{
  font-family:var(--half);
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:0.2em;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
}
.mz-link::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);}
.mz-link:hover{color:var(--lime-ink);}
.mz-donker .mz-link:hover{color:var(--lime);}

/* ============================================================================
   7. Rijenkaart, kaarten, kolommen
   ----------------------------------------------------------------------------
   Dit is het belangrijkste component van de site. Een lijst van diensten,
   ingangen of situaties is ÉÉN rustig vlak met rijen gescheiden door een
   hairline, en niet zes losse kaartjes met ruimte ertussen. Geen box-shadow.
   ========================================================================== */

.mz-rijen{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--kaart);
  border:1px solid var(--lijn);
  border-radius:var(--rond-xl);
  overflow:hidden;
}
.mz-rijen > li{margin:0;}
.mz-rijen > li + li{border-top:1px solid var(--lijn);}

.mz-rij{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--r-4) var(--r-5);
  padding:var(--r-5) var(--r-6);
  color:var(--ink);
  text-decoration:none;
  transition:background-color 120ms linear,transform 120ms linear;
}
a.mz-rij:hover{background:var(--bone);transform:translateX(3px);}
.mz-rij h3,.mz-rij .mz-rij-titel{
  margin:0 0 var(--r-1);
  font-size:var(--t-h3);
  color:var(--indigo);
}
a.mz-rij h3{text-decoration:underline;text-underline-offset:0.16em;}
.mz-rij p{margin:0;color:var(--ink-zacht);}
.mz-rij-bij{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.mz-rij-pijl{
  width:9px;height:9px;
  border-top:2px solid var(--lime-ink);
  border-right:2px solid var(--lime-ink);
  transform:rotate(45deg);
  flex:0 0 auto;
}
/* De rij met alleen tekst, zonder tweede kolom. */
.mz-rij.mz-rij-vol{grid-template-columns:minmax(0,1fr);}

@media (max-width:699px){
  .mz-rij{padding:var(--r-4) var(--r-4);grid-template-columns:minmax(0,1fr);}
  .mz-rij-bij{text-align:left;white-space:normal;}
  .mz-rij-pijl{display:none;}
}

/* Losse kaart. Alleen waar losse kaarten echt logisch zijn, zoals bij
   artikelen. Rand van --lijn, geen schaduw, geen afwijkende vulkleur. */
.mz-kaart,.kaart{
  background:var(--kaart);
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  padding:var(--r-5);
}
.mz-kaart > :last-child,.kaart > :last-child{margin-bottom:0;}
.mz-kaart-bone{background:var(--bone);}

/* Twee- en driekoloms opsomming. Elk kolomblok is een kop met een korte tekst
   of een korte lijst; geen zwevende tegels. */
.mz-kolommen{display:grid;gap:var(--r-6) var(--r-7);margin:0;padding:0;list-style:none;}
.mz-kolommen-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mz-kolommen-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mz-kolommen > li,.mz-kolommen > div{margin:0;min-width:0;}
.mz-kolommen h3{margin-bottom:var(--r-2);}
.mz-kolommen p{margin-bottom:0;color:var(--ink-zacht);}
/* Hairlines in plaats van ruimte: de kolommen horen bij elkaar. */
.mz-kolommen-lijn{gap:0;}
.mz-kolommen-lijn > *{padding:0 var(--r-6);border-left:1px solid var(--lijn);}
.mz-kolommen-lijn > *:first-child{border-left:0;padding-left:0;}
.mz-kolommen-lijn > *:last-child{padding-right:0;}

@media (max-width:899px){
  .mz-kolommen-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:699px){
  .mz-kolommen-2,.mz-kolommen-3{grid-template-columns:1fr;gap:var(--r-5);}
  .mz-kolommen-lijn > *{padding:0;border-left:0;}
  .mz-kolommen-lijn > * + *{padding-top:var(--r-5);border-top:1px solid var(--lijn);}
}

/* Lijst met een vinkje ervoor. Voor "wat wij doen" en "wat je zelf aanlevert".
   Het vinkje is in --lime-ink en niet in --lime: op wit haalt limoen geen 3:1. */
.mz-lijst{list-style:none;margin:0 0 var(--r-4);padding:0;}
.mz-lijst > li{position:relative;padding-left:26px;margin-bottom:var(--r-3);}
.mz-lijst > li::before{
  content:"";
  position:absolute;
  left:0;top:0.44em;
  width:11px;height:6px;
  border-left:2px solid var(--lime-ink);
  border-bottom:2px solid var(--lime-ink);
  transform:rotate(-45deg);
}
/* Variant voor grenzen en voorbehouden: een streep in plaats van een vinkje. */
.mz-lijst-grens > li::before{
  width:11px;height:0;border-left:0;border-bottom:2px solid var(--ink-mut);
  transform:none;top:0.72em;
}

/* Feitenlijst. Twee kolommen, sleutel en waarde, met hairlines. */
.mz-feiten{margin:0;display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);
  border-top:1px solid var(--lijn);}
.mz-feiten > dt{
  font-family:var(--half);
  padding:var(--r-3) var(--r-4) var(--r-3) 0;
  border-bottom:1px solid var(--lijn);
  color:var(--ink);
}
.mz-feiten > dd{
  margin:0;
  padding:var(--r-3) 0;
  border-bottom:1px solid var(--lijn);
  color:var(--ink-zacht);
}
@media (max-width:699px){
  .mz-feiten{grid-template-columns:1fr;}
  .mz-feiten > dt{padding-bottom:0;border-bottom:0;}
  .mz-feiten > dd{padding-top:var(--r-1);}
}

/* ============================================================================
   8. Tabel
   ----------------------------------------------------------------------------
   Een tabel heeft een <caption> en echte <th>-cellen. Op mobiel scrollt hij
   binnen zijn eigen kader in plaats van de pagina breed te maken. Het kader is
   focusbaar, anders is hij met het toetsenbord niet te scrollen.
   ========================================================================== */

.mz-tabelkader{
  overflow-x:auto;
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  background:var(--kaart);
  margin:0 0 var(--r-5);
  -webkit-overflow-scrolling:touch;
}
.mz-tabelkader:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

table,.mz-tabel{
  width:100%;
  border-collapse:collapse;
  font-size:var(--t-klein);
  text-align:left;
}
.mz-tabelkader > table{min-width:34em;}
caption{
  caption-side:top;
  text-align:left;
  font-family:var(--half);
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  padding:var(--r-4) var(--r-5) var(--r-3);
}
th,td{
  padding:var(--r-3) var(--r-5);
  border-bottom:1px solid var(--lijn);
  vertical-align:top;
  overflow-wrap:break-word;
}
thead th{
  font-family:var(--half);
  color:var(--indigo);
  background:var(--bone);
  border-bottom:1px solid var(--lijn);
  white-space:nowrap;
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
td.mz-getal,th.mz-getal{text-align:right;font-variant-numeric:tabular-nums;}
tbody th{color:var(--indigo);font-family:var(--half);}

/* Tabellen die uit Markdown komen, hebben geen kader. Ze mogen de pagina op
   375px niet breed maken, dus hier geen min-width en wel afbreken. */
.artikel-tekst > table,.mz-prose > table{
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  overflow:hidden;
  margin:0 0 var(--r-5);
  table-layout:fixed;
}
.artikel-tekst > table th,.artikel-tekst > table td,
.mz-prose > table th,.mz-prose > table td{overflow-wrap:anywhere;hyphens:auto;}

@media (max-width:699px){
  th,td{padding:var(--r-3) var(--r-4);}
  caption{padding:var(--r-3) var(--r-4) var(--r-2);}
}

/* ============================================================================
   9. Tijdlijn
   ----------------------------------------------------------------------------
   Voor de werkwijze en voor termijnen. Genummerde stappen langs één verticale
   hairline, met een limoenstip per stap. De stap is een <li> in een <ol>, dus de
   volgorde staat in de HTML en niet alleen in de opmaak.
   ========================================================================== */

.mz-tijdlijn{
  list-style:none;
  margin:0 0 var(--r-5);
  padding:0 0 0 var(--r-6);
  position:relative;
  counter-reset:mz-stap;
}
.mz-tijdlijn::before{
  content:"";
  position:absolute;
  left:11px;top:8px;bottom:8px;
  width:1px;
  background:var(--lijn);
}
.mz-tijdlijn > li{
  position:relative;
  margin:0 0 var(--r-6);
  counter-increment:mz-stap;
}
.mz-tijdlijn > li:last-child{margin-bottom:0;}
.mz-tijdlijn > li::before{
  content:counter(mz-stap);
  position:absolute;
  left:calc(-1 * var(--r-6));
  top:0;
  width:23px;height:23px;
  border-radius:var(--rond-pil);
  background:var(--lime);
  color:var(--indigo);
  font-family:var(--half);
  font-size:12px;
  line-height:23px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.mz-tijdlijn h3{margin:0 0 var(--r-2);font-size:var(--t-h4);}
.mz-tijdlijn p{margin:0;color:var(--ink-zacht);max-width:var(--breed-tekst);}
.mz-tijdlijn-termijn{
  display:block;
  font-family:var(--half);
  font-size:var(--t-klein);
  color:var(--lime-ink);
  margin-top:var(--r-1);
}
.mz-donker .mz-tijdlijn::before{background:var(--lijn-donker);}
.mz-donker .mz-tijdlijn p{color:var(--ink-licht-zacht);}
.mz-donker .mz-tijdlijn-termijn{color:var(--lime);}

/* Tijdlijn zonder nummers, voor termijnen die geen volgorde hebben. */
.mz-tijdlijn-plat{counter-reset:none;}
.mz-tijdlijn-plat > li::before{
  content:"";
  width:11px;height:11px;
  left:calc(-1 * var(--r-6) + 6px);
  top:0.5em;
}

/* ============================================================================
   10. Vraag en antwoord
   ----------------------------------------------------------------------------
   Op de dienstpagina's en op de vragenpagina. De antwoorden staan UIT
   gebruikersoogpunt open: dichtgeklapte antwoorden zijn precies wat op de
   huidige site de goede inhoud onzichtbaar maakt. Waar inklappen wel nuttig is
   (een lange reeks) gebruikt hetzelfde component <details> met [open].
   ========================================================================== */

.mz-vragen{
  border:1px solid var(--lijn);
  border-radius:var(--rond-xl);
  background:var(--kaart);
  overflow:hidden;
}
.mz-vraag{border-bottom:1px solid var(--lijn);}
.mz-vraag:last-child{border-bottom:0;}

.mz-vraag > summary,.mz-vraag > h3{
  margin:0;
  padding:var(--r-5) var(--r-6);
  font-family:var(--geo);
  font-weight:600;
  font-size:var(--t-h3);
  color:var(--indigo);
  letter-spacing:-0.01em;
  line-height:1.25;
  position:relative;
}
.mz-vraag > summary{cursor:pointer;list-style:none;padding-right:calc(var(--r-6) + 24px);}
.mz-vraag > summary::-webkit-details-marker{display:none;}
.mz-vraag > summary::marker{content:"";}
.mz-vraag > summary:hover{background:var(--bone);}
.mz-vraag > summary::after{
  content:"";
  position:absolute;
  right:var(--r-6);top:calc(50% - 5px);
  width:8px;height:8px;
  border-right:2px solid var(--lime-ink);
  border-bottom:2px solid var(--lime-ink);
  transform:rotate(45deg);
}
.mz-vraag[open] > summary::after{transform:rotate(-135deg);top:calc(50% - 2px);}
.mz-vraag-antwoord{padding:0 var(--r-6) var(--r-5);max-width:var(--breed-tekst);}
.mz-vraag-antwoord > :last-child{margin-bottom:0;}
.mz-vraag-antwoord p{color:var(--ink-zacht);}

@media (max-width:699px){
  .mz-vraag > summary,.mz-vraag > h3{padding:var(--r-4);}
  .mz-vraag > summary{padding-right:calc(var(--r-4) + 22px);}
  .mz-vraag > summary::after{right:var(--r-4);}
  .mz-vraag-antwoord{padding:0 var(--r-4) var(--r-4);}
}

/* ============================================================================
   11. Opbouw van een opdracht
   ----------------------------------------------------------------------------
   BESLUIT 2026-08-18: er komt geen tarievenpagina en er staan nergens bedragen
   op de site. Dit component toont daarom per onderdeel WAT eronder valt en in
   welke EENHEID het loopt, en verder de voorwaarden. Er is met opzet geen
   bedragkolom en geen kolom die er later een zou kunnen worden: een component
   met een lege bedragkolom vraagt erom gevuld te worden.

   Dus ook geen pakketten, geen drie kolommen waarvan er één is uitgelicht, en
   geen "vanaf"-regel. Waar de prijs van afhangt staat als tekst onder de
   opbouw, en de knop gaat naar de offertepagina.
   ========================================================================== */

.mz-opbouw{
  border:1px solid var(--lijn);
  border-radius:var(--rond-xl);
  background:var(--kaart);
  overflow:hidden;
  margin:0 0 var(--r-5);
}
.mz-opbouw-rij{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--r-3) var(--r-5);
  align-items:start;
  padding:var(--r-5) var(--r-6);
  border-bottom:1px solid var(--lijn);
}
.mz-opbouw-rij:last-child{border-bottom:0;}
.mz-opbouw-naam{font-family:var(--half);color:var(--indigo);margin:0;}
.mz-opbouw-naam small{display:block;font-family:var(--lees);font-weight:400;
  color:var(--ink-zacht);margin-top:2px;font-size:var(--t-klein);}

/* De eenheid waarin het onderdeel loopt. Een pil, want het is een label en geen
   bedrag. Bone met een hairline; limoen zou hier decoratie zijn. */
.mz-eenheid{
  display:inline-flex;
  align-items:center;
  padding:5px 13px;
  border:1px solid var(--lijn);
  border-radius:var(--rond-pil);
  background:var(--bone);
  color:var(--ink);
  font-size:var(--t-klein);
  line-height:1.35;
}
.mz-opbouw-rij .mz-eenheid{justify-self:end;}

.mz-opbouw-voet{
  padding:var(--r-4) var(--r-6);
  background:var(--bone);
  border-top:1px solid var(--lijn);
  font-size:var(--t-klein);
  color:var(--ink-zacht);
}
.mz-opbouw-voet > :last-child{margin-bottom:0;}

@media (max-width:699px){
  .mz-opbouw-rij{grid-template-columns:minmax(0,1fr);padding:var(--r-4);}
  .mz-opbouw-voet{padding:var(--r-4);}
}

/* ============================================================================
   12. Kruimelpad en paginering
   ========================================================================== */

/* De klasse .kruimels komt uit bouw.ps1 en mag dus niet worden omgenoemd. */
.kruimels{
  max-width:var(--breed);
  margin:0 auto;
  padding:var(--r-4) var(--rand) 0;
  font-size:var(--t-klein);
}
.kruimels ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--r-1) var(--r-2);
  color:var(--ink-zacht);
}
.kruimels li{margin:0;display:flex;align-items:center;gap:var(--r-2);}
.kruimels li + li::before{content:"";width:5px;height:5px;border-top:1px solid var(--ink-mut);
  border-right:1px solid var(--ink-mut);transform:rotate(45deg);flex:0 0 auto;}
.kruimels a{color:var(--ink-zacht);text-decoration:underline;}
.kruimels a:hover{color:var(--lime-ink);}
.kruimels [aria-current="page"]{color:var(--ink);font-family:var(--half);}

.mz-paginering{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--r-2);
  margin:var(--r-7) 0 0;
  padding:0;
  list-style:none;
}
.mz-paginering li{margin:0;}
.mz-paginering a,.mz-paginering span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 var(--r-3);
  border:1px solid var(--lijn);
  border-radius:var(--rond-klein);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.mz-paginering a:hover{background:var(--bone);border-color:var(--ink-mut);color:var(--ink);}
.mz-paginering [aria-current="page"]{
  background:var(--indigo);
  border-color:var(--indigo);
  color:var(--ink-licht);
  font-family:var(--half);
}
.mz-paginering .mz-paginering-uit{color:var(--ink-mut);border-style:dashed;}
.mz-paginering li.mz-paginering-eind{margin-left:auto;}
.mz-paginering-stand{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  border:0;
  min-width:0;
  padding:0;
}

/* ============================================================================
   13. Kennisoverzicht met filters
   ----------------------------------------------------------------------------
   Moet werken bij drie stukken en bij vierhonderd: gegroepeerd, nieuwste
   bovenaan, filterbaar. Het zoekveld is een gewone GET-vorm; zonder JavaScript
   filtert het niets en staat er dus ook niets misleidend te wachten.
   ========================================================================== */

.mz-zoek{
  display:flex;
  gap:var(--r-3);
  align-items:stretch;
  max-width:34em;
  margin:0 0 var(--r-5);
}
.mz-zoek input[type="search"]{
  flex:1 1 auto;
  min-width:0;
  min-height:48px;
  padding:0 var(--r-4);
  border:1px solid var(--lijn);
  border-radius:var(--rond);
  background:var(--kaart);
  color:var(--ink);
}
.mz-zoek input[type="search"]::placeholder{color:var(--ink-zacht);}

/* Filterchips. Pilvorm, want een chip is geen blok. De actieve chip is indigo
   met witte tekst en heeft aria-pressed of aria-current in de HTML. */
.mz-chips{display:flex;flex-wrap:wrap;gap:var(--r-2);margin:0 0 var(--r-5);padding:0;
  list-style:none;}
.mz-chips li{margin:0;}
.mz-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--r-2);
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--lijn);
  border-radius:var(--rond-pil);
  background:var(--kaart);
  color:var(--ink);
  font-size:var(--t-klein);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color 120ms linear,border-color 120ms linear;
}
.mz-chip:hover{background:var(--bone);border-color:var(--ink-mut);color:var(--ink);}
.mz-chip-aantal{font-variant-numeric:tabular-nums;color:var(--ink-zacht);}
.mz-chip[aria-pressed="true"],.mz-chip[aria-current]{
  background:var(--indigo);border-color:var(--indigo);color:var(--ink-licht);
}
.mz-chip[aria-pressed="true"] .mz-chip-aantal,
.mz-chip[aria-current] .mz-chip-aantal{color:var(--ink-licht-zacht);}

/* De artikellijst. bouw.ps1 zet hier .kaarten en .kaart neer, met een h2 per
   stuk en .artikel-meta erin; die namen staan dus vast. */
.kaarten,.mz-kaarten{
  list-style:none;
  margin:0 0 var(--r-5);
  padding:0;
  display:grid;
  gap:var(--r-4);
}
.kaarten > li,.mz-kaarten > li{margin:0;}
.kaarten > .kaart{
  background:var(--kaart);
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  padding:var(--r-5);
  transition:border-color 120ms linear,transform 120ms linear;
}
.kaarten > .kaart:hover{border-color:var(--ink-mut);transform:translateX(3px);}
.kaarten > .kaart h2,.kaarten > .kaart h3{
  font-size:var(--t-h3);
  margin:0 0 var(--r-2);
}
.kaarten > .kaart h2 a,.kaarten > .kaart h3 a{text-decoration:none;color:var(--indigo);}
.kaarten > .kaart h2 a:hover,.kaarten > .kaart h3 a:hover{text-decoration:underline;}
.kaarten > .kaart p{margin:0 0 var(--r-2);color:var(--ink-zacht);}
.kaarten > .kaart p:last-child{margin-bottom:0;}
.kaarten > .kaart .artikel-meta{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  margin:0 0 var(--r-2);
}
@media (min-width:900px){
  .kaarten,.mz-kaarten{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Groep per periode. Nieuwste bovenaan, met een leesbare kop en niet alleen een
   scheidingslijn. */
.mz-groep{margin:0 0 var(--r-7);}
.mz-groep > h2,.mz-groep > h3{
  font-size:var(--t-klein);
  font-family:var(--half);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-zacht);
  border-bottom:1px solid var(--lijn);
  padding-bottom:var(--r-2);
  margin-bottom:var(--r-4);
  letter-spacing:var(--ls-label);
}

/* Als een filter niets oplevert. Niet een leeg vlak, maar een uitleg. */
.mz-leeg{
  border:1px dashed var(--lijn);
  border-radius:var(--rond-groot);
  padding:var(--r-6);
  text-align:center;
  color:var(--ink-zacht);
}

/* ============================================================================
   14. Artikel: kop, inhoudsopgave, lopende tekst
   ========================================================================== */

.artikel{max-width:var(--breed);margin:0 auto;padding:var(--r-7) var(--rand) 0;}
.artikel-kop{max-width:var(--breed-tekst);margin:0 0 var(--r-6);}
.artikel-kop h1{font-size:var(--t-h1);margin:0 0 var(--r-4);}
.artikel-meta{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  margin:0 0 var(--r-3);
  font-family:var(--half);
  letter-spacing:0.02em;
}
/* In de hero staat de meta op lila; daar is --ink-zacht te bleek. */
.mz-hero .artikel-meta{color:var(--indigo);opacity:.72;}
.artikel-samenvatting{font-size:var(--t-groot);line-height:1.55;color:var(--ink);margin:0;}

/* De inhoudsopgave komt uit bouw.ps1 met de klasse .inhoudsopgave en verschijnt
   vanaf twee h2's. Een plaat op bone, geen zwevend kaartje. */
.inhoudsopgave{
  background:var(--bone);
  border:1px solid var(--lijn);
  border-radius:var(--rond-groot);
  padding:var(--r-5);
  margin:0 0 var(--r-7);
  max-width:var(--breed-tekst);
}
.inhoudsopgave > p{
  font-family:var(--half);
  font-size:var(--t-mini);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-zacht);
  margin:0 0 var(--r-3);
}
.inhoudsopgave ol{margin:0;padding-left:1.3em;font-size:var(--t-klein);}
.inhoudsopgave li{margin-bottom:var(--r-2);}
.inhoudsopgave a{color:var(--ink);text-decoration:underline;}
.inhoudsopgave a:hover{color:var(--lime-ink);}

.artikel-tekst,.mz-prose{max-width:var(--breed-tekst);}
.artikel-tekst h2,.mz-prose h2{
  font-size:var(--t-h2);
  margin:var(--r-7) 0 var(--r-3);
  scroll-margin-top:calc(var(--kop-hoogte) + var(--r-5));
}
.artikel-tekst h3,.mz-prose h3{
  margin:var(--r-6) 0 var(--r-2);
  scroll-margin-top:calc(var(--kop-hoogte) + var(--r-5));
}
.artikel-tekst > :first-child,.mz-prose > :first-child{margin-top:0;}
.artikel-tekst img{border-radius:var(--rond-groot);display:block;}

.artikel-gewijzigd{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  border-top:1px solid var(--lijn);
  padding-top:var(--r-4);
  margin:var(--r-7) 0 0;
  max-width:var(--breed-tekst);
}
.artikel-gewijzigd:empty{display:none;}

/* Voetregel van een artikel: waar het bij hoort en verder lezen. */
.mz-artikelvoet{max-width:var(--breed);margin:0 auto;padding:var(--r-7) var(--rand) 0;}

/* De kantoorgegevens. Een reeks korte blokken met een kop en daaronder een tabel
   of één alinea, in de volgorde waarin een inkoopuitvraag ze stelt. Droog,
   feitelijk, printbaar; geen verkooptaal en geen conversieblok. */
.mz-dossier{
  max-width:var(--breed);
  margin:0 auto;
  padding:var(--r-7) var(--rand) 0;
}
.mz-dossier > section,.mz-dossier > .mz-dossier-blok{
  max-width:var(--breed-tekst);
  margin:0 0 var(--r-7);
}
.mz-dossier > section:last-child,.mz-dossier > .mz-dossier-blok:last-child{margin-bottom:0;}
.mz-dossier h2{font-size:var(--t-h3);margin-bottom:var(--r-3);
  scroll-margin-top:calc(var(--kop-hoogte) + var(--r-5));}
.mz-dossier .mz-tabelkader,.mz-dossier table{max-width:100%;}
/* De enige knop op deze pagina. */
.mz-printknop{margin:0 0 var(--r-6);}

/* ============================================================================
   15. Contactblok
   ----------------------------------------------------------------------------
   Op de hele site dezelfde vorm: een kop, één zin, één limoenknop en hooguit
   één tekstlink ernaast. Staat NIET op de kantoorgegevenspagina; dat is de
   enige uitzondering en die is opzettelijk.
   ========================================================================== */

.mz-contactblok{
  background:var(--indigo);
  color:var(--ink-licht);
  border-radius:var(--rond-xl);
  padding:var(--r-7);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--r-6);
  align-items:center;
  --focus:var(--lime);
}
.mz-contactblok h2{color:var(--ink-licht);margin:0 0 var(--r-2);}
.mz-contactblok p{color:var(--ink-licht-zacht);margin:0;max-width:52ch;}
.mz-contactblok a:not(.mz-knop){color:var(--ink-licht);}
.mz-contactblok a:not(.mz-knop):hover{color:var(--lime);}
.mz-contactblok .mz-link{color:var(--ink-licht);}

@media (max-width:899px){
  .mz-contactblok{grid-template-columns:1fr;padding:var(--r-6);gap:var(--r-5);}
}
@media (max-width:699px){
  .mz-contactblok{padding:var(--r-5);border-radius:var(--rond-groot);}
}

/* Lichte variant. Voor het kennisoverzicht en onder een artikel: geen
   conversieknop, alleen een regel met een tekstlink. */
.mz-contactblok-licht{
  background:none;
  color:var(--ink);
  border:1px solid var(--lijn);
  padding:var(--r-5) var(--r-6);
  --focus:var(--lime-ink);
}
.mz-contactblok-licht h2{color:var(--indigo);}
.mz-contactblok-licht p{color:var(--ink-zacht);}
.mz-contactblok-licht a:not(.mz-knop),.mz-contactblok-licht .mz-link{color:var(--ink);}
.mz-contactblok-licht a:not(.mz-knop):hover{color:var(--lime-ink);}

/* ============================================================================
   16. Formulier met foutmeldingen
   ----------------------------------------------------------------------------
   Eén kolom, altijd. Label BOVEN het veld en niet erin, want een label in het
   veld verdwijnt zodra iemand typt. Achtergrond van het blok is bone zodat het
   als werkblad leest, met de velden in wit. Verplichte velden krijgen het woord
   "verplicht" en niet alleen een sterretje.
   ========================================================================== */

.mz-formulier{
  background:var(--bone);
  border:1px solid var(--lijn);
  border-radius:var(--rond-xl);
  padding:var(--r-6);
  max-width:40em;
}
.mz-formulier > :last-child{margin-bottom:0;}

.mz-formulier-uitleg{color:var(--ink-zacht);margin:0 0 var(--r-5);}

/* Groep met een kop. Elke groep past op één schermvulling op mobiel. */
.mz-groepje{border:0;margin:0 0 var(--r-6);padding:0;}
.mz-groepje > legend{
  padding:0;
  margin:0 0 var(--r-4);
  font-family:var(--geo);
  font-weight:600;
  font-size:var(--t-h3);
  color:var(--indigo);
  letter-spacing:-0.01em;
}
.mz-groepje-stand{
  display:block;
  font-family:var(--half);
  font-size:var(--t-mini);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-zacht);
  margin-bottom:var(--r-1);
}

.mz-veld{margin:0 0 var(--r-5);}
.mz-veld:last-child{margin-bottom:0;}
.mz-veld > label,.mz-veld > .mz-label{
  display:block;
  font-family:var(--half);
  color:var(--indigo);
  margin-bottom:var(--r-2);
}
.mz-veld-bij{
  display:block;
  font-family:var(--lees);
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  margin-top:2px;
}
.mz-verplicht{
  font-family:var(--lees);
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  font-weight:400;
}

.mz-veld input[type="text"],
.mz-veld input[type="email"],
.mz-veld input[type="tel"],
.mz-veld input[type="number"],
.mz-veld input[type="date"],
.mz-veld select,
.mz-veld textarea{
  display:block;
  width:100%;
  min-height:48px;
  padding:11px 14px;
  background:var(--kaart);
  color:var(--ink);
  border:1px solid var(--lijn);
  border-radius:var(--rond);
  transition:border-color 120ms linear;
}
.mz-veld textarea{min-height:8em;resize:vertical;line-height:1.5;}
.mz-veld select{
  /* Geen eigen pijltje van een achtergrondafbeelding: het systeempijltje is
     duidelijker en verspringt niet bij een andere zoomstand. */
  appearance:none;
  background-image:linear-gradient(var(--kaart),var(--kaart));
  padding-right:var(--r-6);
}
.mz-veld select::-ms-expand{display:none;}
.mz-veld-select{position:relative;}
.mz-veld-select::after{
  content:"";
  position:absolute;
  right:16px;bottom:20px;
  width:7px;height:7px;
  border-right:2px solid var(--ink-zacht);
  border-bottom:2px solid var(--ink-zacht);
  transform:rotate(45deg);
  pointer-events:none;
}
.mz-veld input:hover,.mz-veld select:hover,.mz-veld textarea:hover{border-color:var(--ink-mut);}

/* Aankruisvakjes en keuzerondjes. Aanraakvlak minstens 44px hoog. */
.mz-keuzes{border:0;margin:0;padding:0;}
.mz-keuzes > legend{
  padding:0;
  font-family:var(--half);
  color:var(--indigo);
  margin-bottom:var(--r-2);
}
.mz-keuze,.mz-veld > label.mz-keuze,.mz-keuzes > label.mz-keuze{
  display:flex;
  align-items:flex-start;
  gap:var(--r-3);
  min-height:44px;
  padding:var(--r-2) var(--r-3);
  background:var(--kaart);
  border:1px solid var(--lijn);
  border-radius:var(--rond);
  margin-bottom:var(--r-2);
  cursor:pointer;
}
.mz-keuze:hover{border-color:var(--ink-mut);}
.mz-keuze input{width:20px;height:20px;margin:12px 0 0;accent-color:var(--lime-ink);
  flex:0 0 auto;}
.mz-keuze > span{padding:11px 0;}
.mz-keuze small{display:block;color:var(--ink-zacht);}

/* Foutmelding. Verschijnt bij het verlaten van een veld, staat ONDER het veld,
   in tekst, met een driehoekje erbij. Kleur is nooit de enige drager. */
.mz-veld-fout{
  display:flex;
  align-items:flex-start;
  gap:var(--r-2);
  margin:var(--r-2) 0 0;
  color:var(--fout);
  font-size:var(--t-klein);
  font-family:var(--half);
}
/* mizen.js zet hidden op een melding zodra de fout hersteld is. Zonder deze regel
   wint display:flex van de UA-regel voor [hidden]. */
.mz-veld-fout[hidden]{display:none;}
.mz-veld-fout::before{
  content:"!";
  flex:0 0 auto;
  width:18px;height:18px;
  border-radius:var(--rond-pil);
  background:var(--fout);
  color:var(--ink-licht);
  font-size:12px;
  line-height:18px;
  text-align:center;
}
.mz-veld[data-fout] input,
.mz-veld[data-fout] select,
.mz-veld[data-fout] textarea,
.mz-veld input[aria-invalid="true"],
.mz-veld select[aria-invalid="true"],
.mz-veld textarea[aria-invalid="true"]{
  border-color:var(--fout);
  border-width:2px;
  background:var(--fout-vlak);
}

.mz-formulier-voet{
  border-top:1px solid var(--lijn);
  padding-top:var(--r-5);
  margin-top:var(--r-6);
}
.mz-formulier-voet .mz-privacy{
  font-size:var(--t-klein);
  color:var(--ink-zacht);
  margin:var(--r-3) 0 0;
}

@media (max-width:699px){
  .mz-formulier{padding:var(--r-4);border-radius:var(--rond-groot);}
  .mz-formulier .mz-knop{width:100%;}
}

/* ============================================================================
   17. Meldingsvlak
   ----------------------------------------------------------------------------
   Vier soorten. De kleur is nooit de enige drager: er staat altijd een woord
   voorop dat zegt wat het is. Statuskleuren worden nergens anders gebruikt.
   ========================================================================== */

.mz-melding{
  border:1px solid var(--lijn);
  border-left:4px solid var(--ink-mut);
  border-radius:var(--rond);
  background:var(--bone);
  padding:var(--r-4) var(--r-5);
  margin:0 0 var(--r-5);
  max-width:var(--breed-tekst);
}
.mz-melding > :last-child{margin-bottom:0;}
.mz-melding strong:first-child{display:block;margin-bottom:var(--r-1);color:var(--indigo);}

.mz-melding-ok{background:var(--ok-vlak);border-left-color:var(--ok);}
.mz-melding-ok strong:first-child{color:var(--ok);}
.mz-melding-waarschuwing{background:var(--waarschuwing-vlak);border-left-color:var(--waarschuwing);}
.mz-melding-waarschuwing strong:first-child{color:var(--waarschuwing);}
.mz-melding-fout{background:var(--fout-vlak);border-left-color:var(--fout);}
.mz-melding-fout strong:first-child{color:var(--fout);}
.mz-melding-taal{border-left-color:var(--lila-diep);}

/* Bevestiging na het verzenden van een formulier. Staat bovenaan dezelfde
   pagina, niet op een aparte bedanktpagina. */
.mz-bevestiging{
  border:1px solid var(--ok);
  border-left-width:4px;
  border-radius:var(--rond);
  background:var(--ok-vlak);
  padding:var(--r-5);
  margin:0 0 var(--r-6);
  max-width:40em;
}
.mz-bevestiging h2{font-size:var(--t-h3);color:var(--ok);margin-bottom:var(--r-2);}

/* Plaatshouder. Alles met deze klasse moet er nog uit. */
.plaatshouder{
  border:1px dashed var(--lila-diep);
  border-radius:var(--rond);
  background:var(--kaart);
  padding:var(--r-3) var(--r-4);
  color:var(--ink-zacht);
  font-size:var(--t-klein);
}

/* ============================================================================
   18. Voet
   ----------------------------------------------------------------------------
   Vier kolommen op de brede weergave, gestapeld op mobiel, met daaronder één
   regel juridische gegevens. Het woordmerk is hier wit met de limoenstreep van
   3px eronder, precies zoals in de goedgekeurde klantmail.
   ========================================================================== */

.voet{
  background:var(--indigo);
  color:var(--ink-licht-zacht);
  margin-top:var(--ruimte-sectie);
  padding:var(--r-8) var(--rand) var(--r-6);
  --focus:var(--lime);
}
.voet-merk{max-width:var(--breed);margin:0 auto var(--r-7);}
.voet-merk img{display:block;width:112px;height:56px;}
.voet-merk::after{
  content:"";
  display:block;
  width:112px;
  height:3px;
  background:var(--lime);
  border-radius:2px;
  margin-top:var(--r-2);
}
.voet-binnen{
  max-width:var(--breed);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--r-6) var(--r-5);
}
.voet-kolom h2{
  font-family:var(--half);
  font-weight:600;
  font-size:var(--t-mini);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-licht);
  margin:0 0 var(--r-3);
}
.voet-kolom ul{list-style:none;margin:0;padding:0;}
.voet-kolom li{margin:0;}
.voet-kolom a,.voet-kolom span{
  display:inline-block;
  padding:7px 0;
  font-size:var(--t-klein);
  color:var(--ink-licht-zacht);
  text-decoration:none;
}
.voet-kolom a:hover{color:var(--lime);text-decoration:underline;}
.voet-kolom address{font-style:normal;font-size:var(--t-klein);line-height:1.7;
  color:var(--ink-licht-zacht);}

.voet-regel{
  max-width:var(--breed);
  margin:var(--r-7) auto 0;
  padding-top:var(--r-5);
  border-top:1px solid var(--indigo-2);
  font-size:var(--t-klein);
  color:var(--ink-licht-zacht);
}
.voet-regel a{color:var(--ink-licht-zacht);}
.voet-regel a:hover{color:var(--lime);}

@media (max-width:899px){
  .voet-binnen{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:699px){
  .voet{padding-top:var(--r-7);}
  .voet-binnen{grid-template-columns:1fr;gap:var(--r-5);}
  .voet-kolom a,.voet-kolom span{padding:10px 0;}
}

/* ============================================================================
   19. Hulpklassen
   ========================================================================== */

/* --- alleen voor /nl/ontwerp/componenten/ ----------------------------------
   Deze handvol klassen bestaat zodat die pagina geen enkel style-attribuut nodig
   heeft. Een inline style vraagt later om 'unsafe-inline' in de
   Content-Security-Policy, en dat is een prijs die een naslagpagina niet waard is.
   Gebruik ze nergens anders. */
.mz-demo-indigo{background:var(--indigo);color:var(--ink-licht);border-color:var(--indigo-2);}
.mz-demo-indigo h3{color:var(--ink-licht);}
.mz-demo-indigo p{color:var(--ink-licht-zacht);}
.mz-demo-lila{background:var(--lila);border-color:var(--lila-diep);}
.mz-demo-lila h3,.mz-demo-lila p{color:var(--indigo);}
.mz-demo-kader{border:1px solid var(--lijn);border-radius:var(--rond-xl);overflow:hidden;}
.mz-demo-kader .mz-hero{--rand:32px;}
.mz-demo-onder{padding:var(--r-5) 32px;}
.mz-demo-donker{border-radius:var(--rond-xl);padding:var(--r-6);}
/* De kopbalkdemo: niet plakkend, en zonder overflow:hidden zodat het openstaande
   uitklappaneel te zien is in plaats van afgesneden. */
.mz-demo-kader-kop{overflow:visible;}
.mz-demo-kop{position:static;border-radius:var(--rond-xl) var(--rond-xl) 0 0;}
.mz-demo-kop .mz-kop-binnen{--rand:24px;}
.mz-demo-kop-ruimte{min-height:270px;border-radius:0 0 var(--rond-xl) var(--rond-xl);}
@media (max-width:899px){
  .mz-demo-kop-ruimte{min-height:0;}
}

/* Een kop laten ZIEN zonder een kopniveau te gebruiken. Alleen bedoeld voor de
   componentenpagina: daar moet de h1-maat te zien zijn, en er mag maar één echte
   h1 per pagina staan. Niet gebruiken op een gewone pagina. */
.mz-alsh1,.mz-alsh2{
  font-family:var(--geo);
  font-weight:600;
  line-height:var(--lh-kop);
  letter-spacing:var(--ls-kop);
  color:var(--indigo);
  margin:0 0 var(--r-3);
}
.mz-alsh1{font-size:var(--t-h1);}
.mz-alsh2{font-size:var(--t-h2);}

.mz-verborgen{display:none !important;}
.mz-geen-marge{margin:0 !important;}
.mz-smal{max-width:var(--breed-tekst);}
.mz-midden{margin-left:auto;margin-right:auto;}
.mz-ruimte-boven{margin-top:var(--r-7);}
.mz-nowrap{white-space:nowrap;}

/* ============================================================================
   20. Beweging
   ----------------------------------------------------------------------------
   Wat mag bewegen: kleurwissel op hover (120ms), translateX(3px) op een rij,
   de dekking van het menupaneel (150ms), het openklappen van een uitklap of een
   vraag (max 200ms). Verder niets. De golf staat stil. Geen inhoud die pas bij
   het scrollen verschijnt; alles staat er meteen, ook zonder JavaScript.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto;}
  a.mz-rij:hover,.kaarten > .kaart:hover,.mz-uitklap-paneel a:hover{transform:none;}
}

/* ============================================================================
   21. Print
   ----------------------------------------------------------------------------
   De kantoorgegevenspagina moet de vergelijking op papier doorstaan en
   doorgestuurd worden. Eén kolom, geen navigatie, geen voettekst, geen
   achtergrondkleuren, zwarte tekst, en de kantoorgegevens in de kop van elk vel.
   Maatvoering volgens de organisatienorm voor documenten: lopende tekst 11pt,
   koptekst 10pt, Segoe UI Light, logo binnen 4 bij 4 cm.
   ========================================================================== */

/* Op het scherm bestaat de printkop niet. */
.mz-printkop{display:none;}

@media print{
  @page{margin:16mm 15mm 14mm;}

  html,body{
    background:#FFFFFF !important;
    color:#000000;
    font-family:"Segoe UI Light","Segoe UI",Arial,sans-serif;
    font-size:11pt;
    line-height:1.45;
    overflow:visible;
  }

  /* Weg: alles wat op papier niets doet. */
  .mz-kop,.voet,.mz-overslaan,.kruimels,.mz-contactblok,.mz-contactblok-licht,
  .mz-golf,.mz-zoek,.mz-chips,.mz-paginering,.mz-printknop,.plaatshouder{
    display:none !important;
  }

  /* De kop van elk vel: drie kolommen, tekst 10pt, logo rechts binnen 4 cm. */
  .mz-printkop{
    display:grid !important;
    position:fixed;
    top:0;left:0;right:0;
    grid-template-columns:1fr 1fr auto;
    gap:8mm;
    align-items:start;
    font-size:10pt;
    line-height:1.35;
    padding-bottom:4.5mm;
    border-bottom:0.4pt solid #000000;
  }
  .mz-printkop div{text-align:left;}
  /* De organisatienorm geeft een kader van 4 bij 4 cm. Het woordmerk is 2:1, dus
     32 bij 16 mm past daarin en verhoudt zich beter tot 10pt tekst. */
  .mz-printkop img{width:32mm;height:auto;max-height:16mm;justify-self:end;}
  /* Ruimte vrijhouden voor die vaste kop. */
  body{padding-top:26mm;}

  .mz-hero,.mz-paginakop{
    background:none !important;
    color:#000000;
    padding:0 0 6mm;
    border-bottom:0.4pt solid #000000;
  }
  .mz-hero h1,.mz-paginakop h1{font-size:20pt;letter-spacing:0;}
  .mz-band,.mz-band-bone,.mz-band-donker{background:none !important;padding:6mm 0 0;}
  .mz-in,.mz-band-in,.artikel{max-width:none;padding:0;}

  h1,h2,h3,h4{color:#000000;break-after:avoid;page-break-after:avoid;}
  /* Op papier is grijs geen nuance maar verlies. Alles wat op het scherm zacht is,
     wordt hier zwart. Met !important, want de schermregels zijn specifieker; in een
     printblok is dat de gebruikelijke en de duidelijkste oplossing. */
  p,li,td,th,dd,dt,caption,address,small,strong,
  .mz-feiten > dd,.mz-meta,.mz-zacht,.mz-adresregel,.mz-opbouw-voet,
  .mz-veld-bij,.mz-rij p,.mz-tijdlijn p,.mz-vraag-antwoord p{color:#000000 !important;}
  h2{font-size:13pt;margin-top:7mm;}
  h3{font-size:11.5pt;}
  p,li{orphans:3;widows:3;}

  /* Tabellen breken niet over een paginagrens heen als dat te vermijden is. */
  .mz-tabelkader{border:0;overflow:visible;break-inside:avoid;page-break-inside:avoid;}
  .mz-tabelkader > table{min-width:0;}
  table{width:100%;font-size:10pt;border:0.4pt solid #000000;break-inside:avoid;
    page-break-inside:avoid;}
  thead th{background:none !important;border-bottom:0.6pt solid #000000;}
  th,td{border-bottom:0.3pt solid #666666;padding:1.6mm 2mm;}

  .mz-rijen,.mz-vragen,.mz-opbouw,.mz-kaart,.kaart,.inhoudsopgave,.mz-melding,
  .mz-formulier{
    border:0.4pt solid #000000;
    border-radius:0;
    background:none !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .mz-melding{border-left-width:1.2pt;}
  .mz-feiten > dt,.mz-feiten > dd{border-bottom:0.3pt solid #999999;}
  .mz-tijdlijn > li::before{background:none;border:0.4pt solid #000000;color:#000000;}

  a{color:#000000;text-decoration:underline;}
  /* De links naar de eigen documenten zijn op papier waardeloos zonder adres. */
  .mz-documenten a[href]::after{content:" (mizen.nl" attr(href) ")";font-size:9pt;}
}