/* I-Leadership huisstijl (brandbook v1.0) · gedeeld door alle schermen */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2");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:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* brandbook */
  --ink:#141414; --cyan:#2DB4F4; --indigo:#180EA2; --bg:#FFFFFF; --surface:#F5F6FA;
  /* afgeleid, enkel voor tekst en lijnen */
  --muted:#5B5F6E; --line:#E3E5EE; --card:#FFFFFF;
  --indigo-soft:#ECEBFA; --cyan-soft:#E8F6FE;
  /* enkel voor meldingen */
  --red:#B4232C; --red-soft:#FCEBEC; --amber:#8A5A00; --amber-soft:#FDF3DE; --green:#17784A; --green-soft:#E6F4EC;
  --radius:16px; --radius-sm:10px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:18px;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
/* bodemlijn: sluit elke pagina af */
body::after{content:"";display:block;height:10px;background:var(--indigo);margin-top:auto;flex:none}
img,svg{max-width:100%}
a{color:var(--indigo);text-underline-offset:3px;transition:color .18s,background-color .18s}
a:hover{text-decoration-thickness:2px}
button,a,[role=radio],label.check{cursor:pointer}
[hidden]{display:none!important}

/* toegankelijkheid */
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--indigo);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);z-index:100;font-weight:700}
.skip:focus{top:12px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* circulair motief: enkel in de rand, nooit achter het logo */
.motif{position:fixed;top:-180px;right:-180px;width:440px;height:440px;border-radius:50%;background:var(--cyan-soft);z-index:-1;pointer-events:none}
.motif::before,.motif::after{content:"";position:absolute;border-radius:50%;border:1.5px solid #CDEBFC}
.motif::before{inset:60px}
.motif::after{inset:120px}
@media (max-width:700px){.motif{width:260px;height:260px;top:-130px;right:-130px}}

/* logo: nooit uitgerekt, altijd op wit, witruimte rondom */
.logo{display:inline-block;background:#fff;padding:4px 0;line-height:0}
.logo{flex:none}
.logo img{height:40px;width:auto;max-width:none;display:block;flex:none}

/* kop, pill, underline */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1.5px solid var(--indigo);border-radius:999px;background:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);line-height:1.4}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
h1{font-size:clamp(32px,4.4vw,48px);line-height:1.1;font-weight:800;letter-spacing:-.035em;margin-top:16px}
h1:focus{outline:none}
h2{font-size:24px;font-weight:800;letter-spacing:-.015em;margin:12px 0 8px;line-height:1.25}
h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.ul{width:56px;height:3px;background:var(--indigo);margin:18px 0 20px}
.lead{color:var(--muted);font-size:20px;max-width:760px}
.hint{font-size:16px;color:var(--muted)}
.eg{font-size:16px;color:var(--muted);margin-top:6px}
.muted{color:var(--muted)}

/* genummerde badge */
.num{width:30px;height:30px;border-radius:6px;background:var(--indigo);color:#fff;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.num.sm{width:22px;height:22px;font-size:11px;border-radius:5px}

/* vlakken */
.card{background:var(--surface);border-radius:var(--radius);padding:28px}
@media (max-width:700px){.card{padding:20px}}
.card.white{background:var(--card);border:1.5px solid var(--line)}
.statement{background:var(--indigo);color:#fff;border-radius:var(--radius);padding:24px}
.statement .accent{color:var(--cyan)}

/* knoppen */
.btn{font-family:inherit;font-weight:700;font-size:17px;border:2px solid var(--indigo);border-radius:999px;padding:11px 24px;min-height:48px;cursor:pointer;background:var(--indigo);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2;transition:background-color .18s,border-color .18s,color .18s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn:hover{background:#120A80;border-color:#120A80}
.btn.ghost{background:#fff;color:var(--indigo)}
.btn.ghost:hover{background:var(--indigo-soft)}
.btn.cy{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn.cy:hover{background:#1FA3E2;border-color:#1FA3E2}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.sm{padding:8px 18px;font-size:16px;min-height:48px}
.btn.icon{background:#fff;border:1.5px solid var(--line);color:var(--muted);padding:0;width:48px;height:48px;min-height:48px;flex:none}
.btn.icon:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.link{background:none;border:none;color:var(--indigo);padding:6px 8px;min-height:48px;text-decoration:underline;text-underline-offset:3px}
.btn.link:hover{background:var(--indigo-soft);text-decoration-thickness:2px}
.btn.x{background:none;border:none;color:var(--muted);padding:6px 10px;font-size:20px;line-height:1;min-height:40px;min-width:40px}
.btn.x:hover{color:var(--red);background:var(--red-soft)}
.btn[disabled]{opacity:.55;cursor:not-allowed}


/* velden */
label{display:block;font-weight:700;font-size:17px;margin:22px 0 8px}
label:first-child{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],textarea,select{width:100%;font-family:inherit;font-size:18px;color:var(--ink);background:var(--card);border:1.5px solid #B9BCCB;border-radius:var(--radius-sm);padding:11px 14px;min-height:52px;transition:border-color .18s}
input:hover,textarea:hover,select:hover{border-color:#8E92A4}
textarea{line-height:1.6}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:3px solid var(--indigo);outline-offset:0;border-color:var(--indigo)}
input::placeholder,textarea::placeholder{color:#62666F}

/* meldingen */
.note{display:flex;gap:10px;align-items:flex-start;background:var(--cyan-soft);border-left:4px solid var(--cyan);border-radius:var(--radius-sm);padding:14px 16px;font-size:16px}
.note.warn{background:var(--amber-soft);border-left-color:#E0A21B}
.note.error{background:var(--red-soft);border-left-color:var(--red);color:#5C1015}
.note.ok{background:var(--green-soft);border-left-color:var(--green)}
.msg{font-size:14px;margin-top:10px;font-weight:600}
.msg.error{color:var(--red)}

/* algemene layout */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
.empty{color:var(--muted);font-style:italic;font-size:14px}

/* kopbalk */
.topbar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.topbar .wrap{display:flex;align-items:center;gap:16px 20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.topbar .app-name{color:var(--muted);font-weight:600;font-size:15px}
.topbar .grow{flex:1}

/* toast */
.toast{position:fixed;bottom:28px;font-size:16px!important;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1}

/* dialoog */
dialog{margin:auto;border:none;border-radius:var(--radius);padding:28px;max-width:520px;width:calc(100vw - 32px);color:var(--ink);box-shadow:0 10px 40px rgba(20,20,20,.18)}
dialog::backdrop{background:rgba(20,20,20,.45)}
dialog h2{margin-bottom:8px}
dialog p{color:var(--muted);font-size:17px}
dialog .row{justify-content:flex-end;margin-top:20px}

/* voettekst */
.foot{color:var(--muted);font-size:15px;text-align:center;padding:22px 16px}

@media print{
  body::after,.motif,.toast,.topbar,.foot,.noprint{display:none!important}
}

/* gsm: kopbalk op één regel */
@media (max-width:560px){
  .topbar .wrap{gap:10px;flex-wrap:nowrap}
  .topbar .logo img{height:34px}
}