/* ============================================================================
   Mizen Tools — gedeeld stijlsysteem
   ----------------------------------------------------------------------------
   Gebaseerd op ontwerprichting E2 (dubbele golf), gekozen op 2026-08-14.
   Dit bestand is de ENIGE plek waar kleur, typografie en de basiscomponenten
   staan. Een nieuwe tool laadt dit en ziet er automatisch goed uit; zet hier
   geen tool-specifieke uitzonderingen in, maar los die op in de tool zelf.

   Palet afgelezen van mizen.nl, niet verzonnen.
   ========================================================================== */

:root{
  /* ---------- palet ---------- */
  --indigo:#191930;        /* dominante donkere drager, ook de vaste balk */
  --indigo-2:#232342;      /* iets lichter, voor randen en hover */
  --lime:#C6ED62;          /* accent; de enige kleur met genoeg afstand tot indigo */
  --lime-diep:#9FCB3E;     /* datamarkeringen: #C6ED62 haalt op wit geen 3:1 contrast */
  --lime-ink:#4E6B15;      /* limoen als tekst op een lichte ondergrond */
  --lila:#D2C7F7;          /* herokleur */
  --lila-diep:#8B7FB4;
  --teal:#03444E;
  --teal-diep:#022B31;
  --bone:#F4F3ED;          /* werkblad voor pagina's met tabellen */

  /* ---------- vlakken en tekst ---------- */
  --blad:var(--indigo);            /* portaal: donker */
  --werkblad:var(--bone);          /* tools met tabellen: licht */
  --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 gebruiken ---------- */
  --ok:#2E7D32; --waarschuwing:#B26A00; --fout:#C0392B;
  --ok-vlak:#EDF5EE; --waarschuwing-vlak:#FFF7E6; --fout-vlak:#FDECEA;

  /* ---------- typografie ----------
     Jost staat vooraan: zodra we de lettertypebestanden meeleveren pakt
     alles hem automatisch op, zonder dat er iets anders hoeft te wijzigen. */
  --geo:"Jost","Century Gothic","Questrial","Futura","Segoe UI",system-ui,Arial,sans-serif;
  --tekst:"Segoe UI Light","Segoe UI",system-ui,Arial,sans-serif;
  --half:"Segoe UI Semibold","Segoe UI",system-ui,Arial,sans-serif;

  /* ---------- maten ---------- */
  --breed:1120px;
  --rand:44px;
  --rond:14px;
  --rond-groot:18px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
body{font-family:var(--tekst);font-size:14px;line-height:1.55;color:var(--ink-licht);
     background:var(--blad);-webkit-font-smoothing:antialiased;}
button,select,input,textarea{font-family:var(--tekst);font-size:14px;}
button{cursor:pointer;}
a{color:inherit;}
.mz-verborgen{display:none !important;}
.mz-cijfers{font-variant-numeric:tabular-nums;}

/* ============================================================================
   Inlogpoort — identiek op elke tool, zodat aanmelden overal hetzelfde voelt
   ========================================================================== */
.mz-poort{position:fixed;inset:0;background:var(--indigo);color:#fff;display:flex;
          align-items:center;justify-content:center;padding:24px;z-index:60;}
.mz-poort-kaart{background:var(--indigo-2);border-radius:22px;padding:38px 34px;
                max-width:420px;width:100%;text-align:center;}
.mz-logo{width:46px;height:46px;border-radius:13px;background:var(--lime);color:var(--indigo);
         display:flex;align-items:center;justify-content:center;
         font-family:var(--geo);font-weight:700;font-size:18px;margin:0 auto 20px;}
.mz-poort-kaart h1{font-family:var(--geo);font-weight:700;font-size:22px;margin:0 0 8px;}
.mz-poort-kaart p{color:var(--ink-licht-zacht);margin:0 0 26px;}

/* ============================================================================
   Vaste balk bovenaan
   ========================================================================== */
.mz-balk{background:var(--indigo);color:#fff;padding:0 var(--rand);}
.mz-balk-in{max-width:var(--breed);margin:0 auto;display:flex;align-items:center;
            justify-content:space-between;gap:16px;height:54px;}
.mz-merk{display:flex;align-items:center;gap:11px;font-family:var(--geo);font-size:16px;}
.mz-merk .mz-logo{width:30px;height:30px;border-radius:9px;margin:0;font-size:13px;}
.mz-merk a{text-decoration:none;}
.mz-merk .mz-sep{color:#49506B;}
.mz-ik{display:flex;align-items:center;gap:14px;color:var(--ink-licht-zacht);font-size:13px;}
.mz-rol{background:rgba(198,237,98,.16);color:var(--lime);border-radius:20px;
        padding:4px 12px;font-size:12px;font-family:var(--half);}
.mz-tekstknop{background:none;border:none;color:var(--ink-licht-zacht);
              text-decoration:underline;padding:0;font-size:13px;}
.mz-tekstknop:hover{color:#fff;}

/* ============================================================================
   Hero met dubbele golf — de handtekening van E2
   ========================================================================== */
.mz-hero{position:relative;background:var(--lila);color:var(--indigo);
         padding:34px var(--rand) 66px;}
.mz-hero-in{max-width:var(--breed);margin:0 auto;}
.mz-hero .mz-golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64px;display:block;}
.mz-datum{font-family:var(--half);font-size:11px;letter-spacing:2.3px;
          text-transform:uppercase;margin-bottom:12px;opacity:.68;}
.mz-hero h1{font-family:var(--geo);font-weight:700;font-size:clamp(30px,4.6vw,56px);
            line-height:.98;margin:0 0 14px;letter-spacing:-1.6px;text-wrap:balance;}
.mz-spreuk{font-size:clamp(16px,1.7vw,21px);line-height:1.3;margin:0;max-width:640px;}
.mz-bron{font-family:var(--half);font-style:normal;font-size:11px;letter-spacing:1.4px;
         text-transform:uppercase;display:block;margin-top:10px;opacity:.66;}

/* Compacte variant voor toolpagina's: dezelfde golf, minder hoogte. */
.mz-hero.mz-klein{padding:26px var(--rand) 56px;}
.mz-hero.mz-klein h1{font-size:clamp(24px,3.2vw,36px);margin-bottom:6px;letter-spacing:-1.1px;}

/* ============================================================================
   Inhoud
   ========================================================================== */
.mz-inhoud{max-width:var(--breed);margin:0 auto;padding:6px var(--rand) 40px;}
.mz-kopje{font-family:var(--half);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
          opacity:.55;margin:18px 0 11px;}
.mz-kopje:first-child{margin-top:2px;}

/* Werkblad: lichte sectie voor tabellen en formulieren. Vier van de vijf tools
   worden tabelzwaar, en lange rijen cijfers lezen op een licht vlak beter. */
.mz-werkblad{background:var(--werkblad);color:var(--ink);}
.mz-werkblad .mz-inhoud{padding-top:18px;}
.mz-werkblad .mz-kopje{opacity:.6;color:var(--ink-zacht);}

/* ============================================================================
   Tegels en kaarten
   ========================================================================== */
.mz-rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}

.mz-tegel{display:flex;align-items:center;gap:13px;border-radius:var(--rond);
          padding:13px 16px;text-decoration:none;color:inherit;
          background:rgba(255,255,255,.06);border:1px solid var(--lijn-donker);
          transition:transform .15s,background .15s,border-color .15s;}
a.mz-tegel:hover,.mz-tegel.mz-klikbaar:hover{transform:translateX(3px);
          background:rgba(210,199,247,.14);border-color:var(--lila);}
.mz-tegel .mz-ic{font-size:18px;width:25px;text-align:center;flex-shrink:0;color:var(--lime);}
.mz-tegel h3{font-family:var(--geo);font-weight:600;font-size:15px;margin:0;}
.mz-tegel p{margin:2px 0 0;font-size:12px;color:var(--ink-licht-zacht);}
.mz-tegel.mz-stil{opacity:.55;}

/* Kaart op het lichte werkblad */
.mz-kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond-groot);}
.mz-kaart-vulling{padding:18px 20px;}

/* ============================================================================
   Knoppen
   ========================================================================== */
.mz-knop{background:var(--lime);color:var(--indigo);border:none;border-radius:12px;
         padding:11px 20px;font-family:var(--half);font-size:14px;}
.mz-knop:hover{background:var(--lime-diep);}
.mz-knop.mz-vol{width:100%;padding:13px 22px;}
.mz-knop.mz-rustig{background:var(--kaart);color:var(--ink);border:1px solid var(--lijn);
                   font-family:var(--tekst);}
.mz-knop.mz-rustig:hover{background:#fff;border-color:var(--lime-diep);}
.mz-knop.mz-donker{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--lijn-donker);
                   font-family:var(--tekst);}
.mz-knop.mz-donker:hover{background:rgba(255,255,255,.14);}

/* ============================================================================
   Formulierelementen
   ========================================================================== */
.mz-veld{border:1px solid var(--lijn);border-radius:10px;padding:9px 12px;
         background:var(--kaart);color:var(--ink);}
.mz-veld:focus{outline:2px solid var(--lime-diep);outline-offset:1px;}
.mz-label{color:var(--ink-zacht);font-family:var(--half);font-size:11px;
          letter-spacing:.5px;text-transform:uppercase;}
.mz-balkje{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);
           padding:13px 16px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.mz-duw{flex:1;}

/* ============================================================================
   Tabellen
   ========================================================================== */
.mz-scroll{overflow-x:auto;}
.mz-tabel{border-collapse:collapse;width:100%;}
.mz-tabel th,.mz-tabel td{padding:11px 16px;border-top:1px solid var(--lijn);
                          text-align:left;vertical-align:top;}
.mz-tabel th{font-family:var(--half);font-size:11px;letter-spacing:.6px;
             text-transform:uppercase;color:var(--ink-zacht);white-space:nowrap;}
.mz-tabel tbody tr:hover{background:#FBFBF7;}
.mz-tabel .mz-rechts{text-align:right;white-space:nowrap;}
.mz-groepskop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
              padding:10px 16px;background:var(--bone);border-top:1px solid var(--lijn);
              font-family:var(--half);font-size:12px;color:var(--ink-zacht);}

/* ============================================================================
   Kerncijfers
   ========================================================================== */
.mz-cijferrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.mz-cijferrij > div{background:var(--kaart);border:1px solid var(--lijn);
                    border-radius:var(--rond-groot);padding:16px 18px;}
.mz-cijfer-lab{font-family:var(--half);font-size:11px;letter-spacing:.7px;
               text-transform:uppercase;color:var(--ink-mut);margin-bottom:7px;}
.mz-cijfer-val{font-family:var(--geo);font-size:27px;font-weight:400;line-height:1.1;color:var(--ink);}
.mz-cijfer-val small{font-family:var(--tekst);font-size:13px;color:var(--ink-zacht);margin-left:3px;}
.mz-cijfer-noot{font-size:12px;color:var(--ink-zacht);margin-top:6px;}

/* ============================================================================
   Labels en meldingen
   ========================================================================== */
.mz-pil{display:inline-block;font-family:var(--half);font-size:11px;border-radius:6px;
        padding:2px 9px;border:1px solid var(--lijn);color:var(--ink-zacht);background:var(--bone);}
.mz-pil.mz-aan{background:#EEF9DA;color:var(--lime-ink);border-color:#D8E9AE;}

.mz-melding{border-radius:var(--rond);padding:13px 16px;margin-bottom:16px;font-size:13px;}
.mz-melding.mz-let{background:var(--waarschuwing-vlak);border:1px solid #F2DFB3;color:#7A5200;}
.mz-melding.mz-mis{background:var(--fout-vlak);border:1px solid #F5C6C2;color:#8B2A20;}
.mz-melding code{background:#fff;padding:1px 5px;border-radius:4px;}

.mz-voet{color:var(--ink-licht-zacht);font-size:13px;margin-top:20px;line-height:1.6;}
.mz-werkblad .mz-voet{color:var(--ink-zacht);}

@media (max-width:700px){
  :root{--rand:20px;}
  .mz-balk-in{height:56px;}
  .mz-ik span:first-child{display:none;}   /* mailadres wijkt op smal scherm */
}