:root{font-family:Arial,sans-serif;color:#192c43;background:#f3f5f7;font-size:16px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;max-width:none;min-height:100%;background:#f3f5f7;color:#192c43;font-family:Arial,sans-serif;font-size:16px}
a{color:#244d78}
h1,h2,h3{font-family:Arial,sans-serif;color:#192c43;line-height:1.25;letter-spacing:normal}
h1{font-size:28px;margin:20px 0}h2{font-size:24px;margin:0 0 20px}h3{font-size:19px}
body>header{width:100%;max-width:none;margin:0;padding:24px max(20px,calc((100% - 1000px)/2));background:#142b46;color:#fff;border:0;border-bottom:4px solid #b39351;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
body>header strong{font-size:23px;color:#fff}body>header>span{color:#e0e5ec}
body>header .brand{display:block;color:#fff!important;text-decoration:none;font-family:Arial,sans-serif;font-size:23px;font-weight:700;line-height:1.3;max-width:none;letter-spacing:normal}
body>header .brand small{display:block;margin-top:8px;color:#e0e5ec;font-size:16px;font-weight:400;letter-spacing:normal}
body>header:has(>.brand){flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
body>header>nav{display:flex;flex-direction:row;align-items:center;gap:16px;margin:0;padding:0;position:static;background:transparent;width:auto}
body>header>nav>a{display:inline-block;width:auto;margin:0;padding:0;background:transparent;border:0;border-radius:0;color:#fff;text-decoration:underline;font-size:15px;font-weight:400;box-shadow:none}
body>header>nav form{display:block;margin:0;padding:0;background:transparent;border:0}
body>header>nav button{margin:0;padding:9px 14px;background:transparent;color:#fff;border:1px solid #a9b5c3;font-size:15px}
body>main{display:block;max-width:1040px;width:100%;margin:28px auto;padding:0 20px;text-align:left}
.topline{display:flex;justify-content:space-between;gap:16px}
.card{display:block;background:#fff;border:1px solid #dce1e6;border-radius:10px;padding:28px;box-shadow:none;text-align:left}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.wide{grid-column:1/-1}
label{display:block;font-weight:600;text-align:left}
input,textarea,select{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #a9b5c3;border-radius:5px;font:inherit;color:#192c43;background:#fff}
textarea{resize:vertical}
button,.button{display:inline-block;background:#142b46;color:#fff;border:1px solid #142b46;border-radius:5px;padding:12px 20px;font:inherit;text-decoration:none;cursor:pointer;width:auto}
form>button{margin-top:24px}.secondary{background:#fff;color:#142b46}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e0e5eb}
.hint{font-size:14px;color:#526274;line-height:1.5}.notice{padding:16px;background:#fff4d9;border-left:4px solid #b39351;margin:20px 0}
.card section{margin-top:24px;padding-top:20px;border-top:1px solid #e0e5eb}
#save-status{margin-left:12px;font-size:14px}
body>footer{max-width:1040px;margin:30px auto;padding:20px;color:#526274;font-size:14px;background:transparent;text-align:left}
:focus-visible{outline:3px solid #b39351;outline-offset:3px}[hidden]{display:none!important}
/* Nieuwe dossierpagina: navigatie links, gekozen formulier rechts. */
body>main:has(>.topline){display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
main>.topline,main:has(>.topline)>h1{grid-column:1/-1}
main:has(>.topline)>h1{margin:0}
main>.topline~nav{grid-column:1;grid-row:3/span 8;display:flex;flex-direction:column;gap:12px;margin:0;position:sticky;top:20px}
main>.topline~nav a,.dossier-startmenu a{display:block;width:100%;padding:20px 16px;border:1px solid #c9d2dc;border-radius:7px;text-decoration:none;background:#fff;color:#192c43;font-size:16px;font-weight:400;line-height:1.4;text-align:left;box-shadow:0 2px 5px #142b4609}
main>.topline~nav a[aria-current]{background:#142b46;color:#fff;border-color:#142b46}
main:has(>.topline)>.card,main:has(>.topline)>.notice{grid-column:2;margin-top:0}
/* Bestaande overzichtspagina: vier blokken links, documenten rechts.
   Het oude dubbele formulier blijft in de bron behouden, maar wordt niet getoond. */
.dossier-startmenu{display:flex;flex-direction:column;gap:12px;width:100%;max-width:none;margin:0;padding:0;background:transparent}
.dossier-startmenu a:hover,main>.topline~nav a:hover{background:#e8edf3;color:#142b46}
main>.grid:has(.dossier-startmenu){display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start;margin-top:24px}
main>.grid:has(.dossier-startmenu)>section:first-child{background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
main>.grid:has(.dossier-startmenu)>section:first-child>h2,main>.grid:has(.dossier-startmenu)>section:first-child>p,main>.grid:has(.dossier-startmenu)>section:first-child>form{display:none}
main>.grid:has(.dossier-startmenu)+section.card{margin:24px 0 0 250px}
main>.eyebrow{font-size:13px;letter-spacing:1px;margin:0 0 12px;color:#526274}
main>.badge{display:inline-block;width:auto;padding:7px 12px;background:#e6edf3;color:#24415f;border-radius:20px;font-size:14px}
.card.narrow{max-width:480px;margin:36px auto}
@media(max-width:760px){body>header:has(>.brand){flex-direction:column;align-items:flex-start}body>main:has(>.topline){display:block}main:has(>.topline)>h1{margin:20px 0}main>.topline~nav{position:static;margin:20px 0}main>.grid:has(.dossier-startmenu){grid-template-columns:1fr}main>.grid:has(.dossier-startmenu)+section.card{margin:24px 0 0}.fields{grid-template-columns:1fr}.card{padding:18px}.topline{flex-wrap:wrap}body>header .brand,body>header strong{font-size:21px}}

/* Alleen de welkomst-/inlogpagina. Geen achtergrondfoto in dossiers. */
body:has(form input[name="action"][value="login"]){
  min-height:100svh;
  background:linear-gradient(rgba(12,28,25,.22),rgba(12,28,25,.38)),url('achtergrond-bos.jpg') center 55% / cover no-repeat;
}
body:has(form input[name="action"][value="login"])>main{
  min-height:calc(100svh - 215px);
  background:transparent;
}
body:has(form input[name="action"][value="login"]) .narrow{
  background:#fff;
  border:1px solid #e0e5e2;
  border-radius:12px;
  padding:clamp(22px,4vw,36px);
  box-shadow:0 12px 40px #071d2440;
}
body:has(form input[name="action"][value="login"])>footer{
  background:#ffffffed;
  color:#192c43;
}
@media print{
  body:has(form input[name="action"][value="login"]){background:#fff}
}