/* --- huisstijl De Concessieman --------------------------------------------
   Kleuren en lettertype komen van deconcessieman.nl, opgemeten in de CSS van die site:
   #112337 tekst, #203E60 koppen, #5696DA accent, #335A97 het lichte vlak van het
   beeldmerk, #28A745 voor knoppen (hoek 8 px), #E8F4FB lichte vlakken, #DADBDD lijnen.

   Rubik staat op de server zelf; 10-install.sh haalt de bestanden op. Lukt dat niet, dan
   valt de opmaak terug op de systeemletter — dan klopt de vorm nog en alleen de letter
   niet, in plaats van een pagina die op een verbinding met Google staat te wachten.
   Zonder zelf-hosten zou het bovendien niet eens laden: het Content-Security-Policy van
   deze server staat alleen bronnen van de server zelf toe. */
@font-face{font-family:Rubik;src:url('/fonts/rubik-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rubik;src:url('/fonts/rubik-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Rubik;src:url('/fonts/rubik-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{font-family:Rubik,'Segoe UI',system-ui,Helvetica,Arial,sans-serif;color:#112337;background:#f2f6fa;font-size:16px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;background:#112337;color:white;padding:24px 5vw}.brand{font-size:25px;font-weight:800;letter-spacing:-1px}.dot{color:#5696da}.tag{font-size:12px;letter-spacing:2px;color:#a6d5f1}main{max-width:1450px;margin:auto;padding:38px 4vw}.intro{display:flex;justify-content:space-between;gap:20px;align-items:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#5696da}h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1.5px;margin:10px 0}p{line-height:1.6}.status{padding:10px 15px;background:#e8f4fb;border-radius:30px;font-size:14px;white-space:nowrap}details{background:white;border:1px solid #dadbdd;padding:18px 22px;margin:26px 0}summary{cursor:pointer;font-weight:bold}details p{max-width:900px;font-size:14px}#keyform{display:flex;align-items:end;gap:15px}#keyform label{flex:1}.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);gap:30px}.inputs{background:white;padding:25px;border:1px solid #dadbdd}h2{font-size:18px;margin:0 0 20px;color:#203e60}h2 span{color:#112337;margin-left:8px}h2:not(:first-child){margin-top:30px}label{font-size:14px;display:block;font-weight:600;margin:15px 0 0}input{display:block;width:100%;border:1px solid #c3c6ca;background:#ffffff;padding:12px;margin-top:7px;border-radius:5px;font-size:16px;color:#112337}input:focus{outline:2px solid #28a745;outline-offset:2px}.help{font-size:14px;color:#606266}a{font-size:14px;color:#335a97;line-height:1.6}button{font:600 15px Rubik,'Segoe UI',system-ui,Arial,sans-serif;background:#203e60;color:white;border:0;padding:13px 20px;cursor:pointer;border-radius:8px}button:disabled{opacity:.55;cursor:wait}.primary{width:100%;margin-top:25px;background:#28a745;line-height:1.5}#empty{min-height:480px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;border:1px dashed #c3c6ca;background:#e8f4fb}#empty h2{color:#112337;margin:20px 0 0}.cross{font-size:60px;color:#335a97}#message:not(:empty){background:#e8f4fb;border-left:4px solid #335a97;padding:16px;margin-bottom:20px}.view{background:white;border:1px solid #dadbdd;margin-top:22px;padding:20px}.view h3{margin:0 0 15px}.view img{width:100%;height:auto;display:block;margin:14px 0}.metrics{display:flex;gap:25px;flex-wrap:wrap}.metrics strong{display:block;font-size:25px;margin-top:5px}.metrics span{font-size:13px;color:#606266}.warning{font-size:14px;background:#fff1d8;color:#694809;padding:12px;border-left:3px solid #cb9526}.meta{font-size:13px;color:#606266}.checked{display:flex;align-items:flex-start;gap:10px;line-height:1.5}.checked input{width:18px;margin:2px 0;flex-shrink:0}.review{font-size:14px;margin-top:15px}.review textarea{width:100%;min-height:75px;display:block;font:16px inherit;padding:10px;margin-top:8px;border:1px solid #c3c6ca}#diagram:not(:empty){background:white;padding:20px;border:1px solid #dadbdd}#diagram svg{width:100%;height:280px;background:#f7fafd}footer{padding:20px 5vw;font-size:13px;color:#606266;border-top:1px solid #dadbdd}@media(max-width:850px){.workspace{grid-template-columns:1fr}.intro{align-items:start;flex-direction:column}#keyform{display:block}#keyform button{margin-top:15px}.tag{display:none}main{padding:25px 20px}#empty{min-height:260px}}

/* --- inlog- en wachtwoordpagina's ------------------------------------------ */
body.auth main.authbox{max-width:460px;margin:0 auto;padding:56px 24px 80px;display:flex;flex-direction:column;gap:20px}
body.auth .authbox form{background:white;border:1px solid #dadbdd;border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(17,43,66,.05),0 12px 32px -24px rgba(17,43,66,.5)}
body.auth .authbox h1{font-size:26px;margin:0;letter-spacing:-.5px}
body.auth .authbox .eyebrow{margin:0;font-size:11px;letter-spacing:2px;color:#335a97;font-weight:700}
body.auth .authbox .help{margin:0;font-size:14px;line-height:1.5;color:#606266}
body.auth .authbox label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:#112337}
body.auth .authbox button{margin-top:4px}
body.auth .authbox form.secondary{background:none;border:0;box-shadow:none;padding:0;align-items:flex-start}
body.auth .authbox form.secondary button{background:none;border:0;color:#606266;text-decoration:underline;padding:0;font-size:13px;cursor:pointer}
body.auth #message:empty{display:none}
body.auth #message{background:#fdeceb;border-left:3px solid #d44347;color:#8f2d30;padding:10px 12px;font-size:13.5px;border-radius:0 3px 3px 0}
.sessie{display:flex;align-items:center;gap:12px;font-size:12px;color:#a6d5f1}
.sessie form{margin:0}
.sessie button{background:none;border:1px solid rgba(255,255,255,.35);color:white;font-size:12px;padding:5px 11px;border-radius:3px;cursor:pointer}
.sessie button:hover{background:rgba(255,255,255,.12)}

/* --- beheer, rapporten en profielen ---------------------------------------- */
main.blad{max-width:1100px;margin:0 auto;padding:36px 5vw 80px}
main.blad h1{font-size:28px;margin:0 0 8px;letter-spacing:-.6px}
main.blad h2{font-size:19px;margin:32px 0 8px}
.kruimel{margin:0 0 18px;font-size:13px}
.uitleg{color:#606266;font-size:14px;line-height:1.6;max-width:74ch}
.melding{background:#e9f7ed;border-left:3px solid #28a745;padding:11px 14px;margin:0 0 20px;border-radius:0 3px 3px 0;font-size:14px}
.klein{font-size:12.5px;color:#606266}
.tabelblad{overflow-x:auto;margin:16px 0 8px}
table.beheer{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;background:white}
table.beheer th{text-align:left;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#8c9196;border-bottom:2px solid #112337;padding:0 12px 7px 0}
table.beheer td{border-bottom:1px solid #dadbdd;padding:11px 12px 11px 0;vertical-align:top}
table.beheer tr.dood{opacity:.55}
table.beheer td.leeg{text-align:center;color:#8c9196;padding:26px 0}
form.inline{display:inline-flex;gap:5px;align-items:center;margin:0 6px 4px 0}
form.inline input,form.inline select{padding:5px 7px;font-size:13px}
form.inline button{padding:5px 10px;font-size:12.5px}
button.gevaar{background:#fdeceb;color:#8f2d30;border:1px solid #e8b9b7}
form.rij{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:white;border:1px solid #dadbdd;border-radius:5px;padding:18px;margin:12px 0}
form.rij label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700}
.vlag{display:inline-block;font-size:11.5px;padding:3px 8px;border-radius:11px;background:#e8f4fb;color:#3a4c60}
.vlag.groen{background:#e9f7ed;color:#1f8c3a}
/* Getallen in een tabel rechts uitlijnen en op vaste breedte zetten, zodat 9 en 12 onder
   elkaar staan in plaats van te dansen. */
.getal{text-align:right;font-variant-numeric:tabular-nums}
/* Nul rapporten over: geen foutmelding, wel een kleur die opvalt in een rij cijfers. */
.op{color:#8f2d30}

/* --- accountbeheer: een kaart per account ------------------------------------
   Tien kolommen in een tabel schoven zijwaarts en lieten voor een e-mailadres een
   vakje van vier centimeter over. Een tabel is de goede vorm om rijen te vergelijken;
   dit scherm is er om per account iets te doen. Vandaar kaarten, met de invoervelden
   op de breedte die bij hun inhoud past. */
.accounts{list-style:none;margin:18px 0 8px;padding:0;display:flex;flex-direction:column;gap:14px}
.account{background:white;border:1px solid #dadbdd;border-radius:10px;padding:16px 18px}
.account.leeg{color:#8c9196;text-align:center;padding:26px 0}
.accountkop{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.accountkop h3{margin:0;font-size:17px}
.cijfers{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 14px;padding:12px 0;
  border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2}
.cijfers .cijfer{min-width:96px}
.cijfers dt{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#8c9196;margin:0 0 3px}
.cijfers dd{margin:0;font-size:19px;font-variant-numeric:tabular-nums;color:#112337}
.cijfers .let-op dd{color:#8f2d30}
.acties{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.acties .actie{display:flex;flex-direction:column;gap:5px}
.acties .actie.breed{flex:1 1 280px}
.acties .actie label{font-size:12px;color:#5c6672;margin:0}
.acties .actie input,.acties .actie select{width:100%;min-width:120px;margin:0}
.acties .actie.breed input{min-width:260px}
.acties .actie button{align-self:flex-start;margin-top:2px}
.handelingen{margin:0 0 10px;color:#8c9196}
.accountvoet{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid #eef0f2}
@media screen and (max-width:640px){
  .acties{flex-direction:column;align-items:stretch}
  .acties .actie{width:100%}
}
.vlag.rood{background:#fdeceb;color:#8f2d30}
.geheim{background:#fffbe8;border:1px solid #e8dca6;border-radius:5px;padding:18px 20px;margin:18px 0}
.geheim h3{margin:0 0 8px;font-size:15px}
.geheim p.code{font-family:ui-monospace,Consolas,monospace;font-size:22px;letter-spacing:2px;background:white;border:1px solid #e0d9be;padding:11px 14px;border-radius:4px;margin:0 0 10px;word-break:break-all}
.geheim p{margin:0;font-size:13px;line-height:1.55;color:#5b5330}
article.rapport{background:white;border:1px solid #dadbdd;border-radius:6px;padding:32px 34px}
article.rapport .eyebrow{font-size:11px;letter-spacing:2.5px;color:#335a97;font-weight:700;margin:0 0 6px}
.notitie{background:#f2f6fa;border-radius:5px;padding:14px 18px;margin:18px 0}
.notitie h3{margin:0 0 5px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:#606266}
.notitie p{margin:0;line-height:1.6}
section.conclusie{background:#f2f9f4;border-left:4px solid #28a745;border-radius:0 5px 5px 0;padding:18px 22px;margin:20px 0}
section.conclusie h2{margin:0 0 10px;font-size:17px}
p.groot{font-size:16px;line-height:1.5;margin:0 0 8px}
p.voorbehoud{font-size:12.5px;line-height:1.6;color:#606266;margin:12px 0 0}
ul.hoogtelijst{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
ul.hoogtelijst li{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:13px;padding:6px 10px;border-radius:4px;align-items:baseline}
ul.hoogtelijst li span:first-child{font-weight:700;font-variant-numeric:tabular-nums}
ul.hoogtelijst li.vrij{background:#e9f7ed;color:#1f8c3a}
ul.hoogtelijst li.geblokkeerd{background:#fdeeed;color:#7d3033}
.terrein{margin:16px 0 0;border-top:1px solid #dadbdd;padding-top:14px}
.oogblok{margin:0 0 16px}
.oogblok h4{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:#606266}
svg.profiel{width:100%;height:auto;background:#f7fafd;border:1px solid #dadbdd;border-radius:4px;margin-top:12px}
.sessie a{color:#a6d5f1;font-size:12px;text-decoration:none;border-bottom:1px solid rgba(159,220,204,.4)}
.sessie a:hover{color:white}
.optioneel{font-weight:400;color:#8c9196}
#rapportform{margin-top:32px;background:white;border:1px solid #dadbdd;border-radius:6px;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
#rapportform h2{margin:0}
#rapportform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700}
#rapportform textarea{font:inherit;padding:8px 10px;border:1px solid #dadbdd;border-radius:4px;resize:vertical}

/* --- bevestiging en waarschuwing bij de wachtwoordwissel -------------------- */
#paginamelding:empty{display:none}
#paginamelding{margin:0 5vw;padding:14px 18px;background:#e9f7ed;border-left:4px solid #28a745;border-radius:0 4px 4px 0;font-size:14px;line-height:1.55;color:#166a2b;max-width:76ch}
body.auth .letop{background:#fff8e6;border:1px solid #e8d9a6;border-radius:4px;padding:12px 14px;font-size:13px;line-height:1.55;color:#5b4c1f}
body.auth .letop strong{color:#3f3410}

/* --- mastmaten, bovenaanzicht en schermuitkomst ----------------------------- */
.matenrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.matenrij label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700}
#bovenaanzicht{margin:24px 0 0}
#bovenaanzicht h2{margin:0 0 4px}
svg.bovenaanzicht{width:100%;height:auto;border:1px solid #dadbdd;border-radius:5px;background:#f7fafd;margin-top:10px}
.schermvrij,.schermgeblokkeerd{font-size:13.5px;padding:7px 11px;border-radius:4px;margin:6px 0}
.schermvrij{background:#e9f7ed;color:#1f8c3a}
.schermgeblokkeerd{background:#fdeeed;color:#7d3033}
ul.hoogtelijst li.deels{background:#fdf3e3;color:#7a5411}

/* Het verhogingsadvies: opvallend als het iets oplevert, ingetogen als het niets doet. */
p.advies{background:#e8f4fb;border-left:3px solid #335a97;border-radius:0 4px 4px 0;
  padding:10px 13px;margin:8px 0;font-size:13.5px;line-height:1.55;color:#203e60}
p.advies strong{color:#0d1b2b}
.mastmaten,.plattegrond{margin:22px 0}
fieldset.schakelaar{border:1px solid #dadbdd;border-radius:5px;padding:10px 13px 12px;margin:10px 0 14px}
fieldset.schakelaar legend{font-size:12px;font-weight:700;padding:0 5px;color:#3a4c60}
fieldset.schakelaar label{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;margin:7px 0;font-weight:400}
/* De algemene regel hierboven maakt elke input blokniveau, 100% breed en 12px padding.
   Voor een keuzerondje moet dat alle drie terug, anders duwt het rondje de tekst het
   kader uit. Zelfde patroon als .checked input. */
fieldset.schakelaar input[type=radio]{width:16px;height:16px;min-width:16px;flex:0 0 auto;
  display:inline-block;padding:0;margin:2px 0 0;border:0;background:none;border-radius:0}
fieldset.schakelaar label span{flex:1 1 auto;min-width:0}
.plattegrond svg.bovenaanzicht{margin-top:8px}

/* --- score, bereik en toetsing ---------------------------------------------- */
.score{background:white;border:1px solid #dadbdd;padding:20px 22px;margin:22px 0;border-left:4px solid #8c9196}
.score.kansrijk{border-left-color:#1f8c3a}
.score.afgekeurd{border-left-color:#b8403c}
.score h2{margin:0 0 6px}
.scoredeel{margin:14px 0}
.scoretop{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px}
.scoretop span{color:#606266}
.balk{height:9px;background:#e8f4fb;border-radius:5px;overflow:hidden}
.balk span{display:block;height:100%;background:#335a97;border-radius:5px}
.score.kansrijk .balk span{background:#1f8c3a}
.scoredeel p.klein{margin:5px 0 0}
#score:empty,#bereik:empty,#toetsing:empty{display:none}
#bereik,#toetsing{background:white;border:1px solid #dadbdd;padding:20px 22px;margin:22px 0}
ul.eisen{font-size:13px;line-height:1.6;color:#3a4c60;padding-left:20px}
ul.eisen li{margin:4px 0}
/* De criteriumlijst gebruikt dezelfde opmaak als de hoogtelijst, maar de eerste kolom
   bevat daar een hele criteriumomschrijving in plaats van "30 m". Vandaar een brede
   eerste kolom, en op smal scherm onder elkaar in plaats van twee smalle kolommen. */
#toetsing ul.hoogtelijst li{grid-template-columns:minmax(220px,2fr) minmax(160px,1fr);align-items:start}
#toetsing ul.hoogtelijst li span:first-child{font-weight:600;line-height:1.45}
@media(max-width:700px){
  #toetsing ul.hoogtelijst li,#bereik ul.hoogtelijst li{grid-template-columns:1fr;gap:2px}
}
#bereik ul.hoogtelijst li{grid-template-columns:minmax(150px,1fr) minmax(200px,2fr);align-items:start}
.bereik,.toetsing,.concurrentie{margin:22px 0}

/* --- wat wel en niet gedeeld wordt ------------------------------------------ */
.intern{border:2px dashed #b8730c;border-radius:6px;padding:4px 18px 14px;margin:18px 0;background:#fffdf7}
.internstempel{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8a5a08;margin:12px 0 4px}
.waardeschakelaar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:#f2f6fa;border:1px solid #dadbdd;border-radius:5px;padding:12px 16px;margin:16px 0 4px;font-size:13.5px}
.waardeschakelaar button{padding:8px 14px;font-size:13px}
.waardeschakelaar + p.klein{margin:0 0 16px}

/* --- de uitkomst voor het scherm, boven de lijst met masthoogtes ------------- */
.schermregel{font-size:14.5px;line-height:1.55;padding:11px 14px;margin:10px 0;border-radius:0 3px 3px 0}
.schermregel.vrij{background:#e9f7ed;border-left:3px solid #28a745;color:#1c5c30}
.schermregel.deels{background:#fff1d8;border-left:3px solid #cb9526;color:#694809}
.schermregel.geblokkeerd{background:#fdeceb;border-left:3px solid #d44347;color:#8f2d30}
p.lijstkop{margin:14px 0 6px}

/* De zin die in de plaats van het bedrag kwam. Rustig, geen uitslagkleur: het is geen meting
   en geen waarschuwing maar een afspraak. */
.waardezin{background:#f4f6f8;border:1px solid #dadbdd;border-radius:6px;
  padding:14px 17px;margin:16px 0}
.waardezin p{margin:0;font-size:15px;line-height:1.6;color:#203e60}

/* --- de eigen toelichting van de adviseur -----------------------------------
   Moet op één blik te onderscheiden zijn van een gemeten uitkomst. Daarom het accent van de
   huisstijl en een eigen kopregel met de naam erin, en uitdrukkelijk NIET de kleuren die elders
   een uitslag betekenen: groen is "vrij", rood is "geblokkeerd", amber is "aanname". Een mening
   die eruitziet als een meting is hier de ene fout die niet gemaakt mag worden. */
.eigentekst{background:#e8f4fb;border-left:3px solid #5696da;
  padding:14px 17px;margin:16px 0;border-radius:0 3px 3px 0}
.eigentekst p{margin:0 0 9px;font-size:15px;line-height:1.6}
.eigentekst p:last-child{margin-bottom:0}
.eigentekst .eigenkop{font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#335a97;margin-bottom:8px}

/* --- de twee producten in de webwinkel -------------------------------------- */
.producten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 6px}
.productkaart{display:flex;flex-direction:column;gap:9px;background:white;border:1px solid #dadbdd;
  border-radius:8px;padding:18px 20px;cursor:pointer;font-weight:400;margin:0}
.productkaart:hover{border-color:#5696da}
.productkaart:has(input:checked){border-color:#28a745;box-shadow:0 0 0 1px #28a745}
.productkaart input{width:auto;margin:0}
.productkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.productkop strong{font-size:18px;color:#203e60}
.productprijs{font-size:20px;font-weight:700;white-space:nowrap}
.productprijs small{display:block;font-size:11.5px;font-weight:400;color:#606266;text-align:right}
.productonder{font-size:12.5px;color:#606266}
.producttekst{font-size:14px;line-height:1.55}
.productlijst{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:#3a4c60}
.productlijst span{padding-left:18px;position:relative}
.productlijst span::before{content:"\2713";position:absolute;left:0;color:#28a745;font-weight:700}
@media screen and (max-width:720px){.producten{grid-template-columns:1fr}}

/* --- een concept bewerken --------------------------------------------------- */
/* De tekstvakken zitten in een dichtgeklapte `details`. Dichtklappen verbergt ze alleen
   visueel; de velden gaan gewoon mee met het formulier, dus publiceren zonder uitklappen
   verliest niets. */
.toelichtingvak{background:white;border:1px solid #dadbdd;border-radius:6px;
  padding:14px 18px;margin:18px 0}
.toelichtingvak>summary{cursor:pointer;font-weight:600;font-size:15px;color:#203e60;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.toelichtingvak>summary::marker{color:#5696da}
.toelichtingvak>summary .klein{font-weight:400}
.toelichtingvak[open]>summary{margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid #dadbdd}
.knoprij{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.knoprij button{margin-top:0}
.knoprij .primary{width:auto}
.bewerkform label.geldigheid{max-width:22rem}
.bewerkform label{display:block;margin-top:18px}
.bewerkform textarea{display:block;width:100%;border:1px solid #c3c6ca;border-radius:5px;
  padding:11px;margin-top:7px;font:400 15px/1.55 Rubik,'Segoe UI',system-ui,Arial,sans-serif;
  color:#112337;resize:vertical}
.bewerkform textarea:focus,.bewerkform input:focus{outline:2px solid #28a745;outline-offset:2px}
.bewerkform button{margin-top:20px}
/* Het voorbeeld is het échte rapport, ingesloten. Een eigen kader eromheen maakt duidelijk dat
   het een weergave is en geen deel van deze pagina. */
.voorbeeld{border:1px solid #dadbdd;border-radius:8px;padding:6px 18px 18px;background:#fff;
  margin-top:14px}
.voorbeeld .rapport{box-shadow:none;border:0;padding:0;margin:0;background:transparent}

/* Een aanname buiten de helptekst. LET OP: .aanname bestond alleen als `.helpstuk .aanname`,
   en die selector geldt niet in het rapport zelf. De klassencontrole zoekt op ".aanname" in
   dit bestand en slaagt dan ook op de ingesloten variant -- dezelfde soort stille misser als
   destijds met .waarschuwing. Vandaar deze regel, los en op eigen kracht. */
.aanname{background:#fdf4e3;border-left:3px solid #b4740c;color:#5e4207;
  padding:12px 15px;margin:12px 0;border-radius:0 3px 3px 0;font-size:14.5px;line-height:1.55}

/* Een blokkade die op één meetlijn staat en op de andere niet. Dit is een nuancering van een
   uitkomst die er net boven staat, dus hij mag niet wegvallen en niet schreeuwen: geen rood
   (dat is "geblokkeerd") maar de aandachtskleur. */
.plaatselijk{background:#fff8ea;border-left:3px solid #cb9526;color:#5e4207;
  padding:12px 15px;margin:12px 0;border-radius:0 3px 3px 0;font-size:14.5px;line-height:1.55}
.plaatselijk p{margin:0 0 7px}
.plaatselijk p:last-child{margin-bottom:0}
.plaatselijk ul{margin:7px 0;padding-left:20px}
.plaatselijk li{margin:5px 0}
.plaatselijk .klein{color:#6c5212}

/* --- rapport mailen vanuit het portaal --------------------------------------- */
.mailform{margin:14px 0}
.mailform label{margin-top:14px}
.mailform textarea{display:block;width:100%;border:1px solid #c3c6ca;border-radius:5px;
  padding:11px;margin-top:7px;font:400 15px/1.5 Rubik,'Segoe UI',system-ui,Arial,sans-serif;
  color:#112337;resize:vertical}
.mailform textarea:focus,.mailform input:focus{outline:2px solid #28a745;outline-offset:2px}
.mailform fieldset.schakelaar{margin-top:16px}
.mailform button{margin-top:18px;background:#28a745}
hr.dun{border:0;border-top:1px solid #dadbdd;margin:22px 0 16px}
.knoplink.tweede{background:#fff;color:#203e60;border:1px solid #c3c6ca}

/* --- de ingetekende mast over het Street View-beeld -------------------------- */
figure.beeld{position:relative;margin:14px 0;line-height:0}
figure.beeld img{width:100%;height:auto;display:block;margin:0}
figure.beeld svg.montage{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* De foto met zijn laag in een eigen kader, zodat een bijschrift eronder buiten het
   positioneringskader van de laag valt. Zonder dit rekt de ingetekende mast mee over de
   bijschrifttekst. De oude regel hierboven blijft staan voor rapporten die al bevroren
   zijn: die hebben nog geen .opname en moeten gewoon blijven werken. */
figure.beeld .opname{position:relative;display:block;line-height:0}
figure.beeld figcaption{line-height:1.4;font-size:12.5px;color:#5c6672;padding:7px 2px 0;text-align:center}

/* Twee opnamen naast elkaar: recht vooruit en omhoog gekanteld. Op een smal scherm
   onder elkaar, want naast elkaar zijn ze dan te klein om iets aan te zien. */

/* Uitdrukkelijk `screen`. Zonder dat woord telt deze regel ook op papier mee, en een
   A4-blad is na aftrek van de marges smaller dan 720 px: de twee foto's kwamen dan in de
   PDF ónder elkaar te staan terwijl ze op het scherm naast elkaar stonden. Gevonden door
   de PDF werkelijk te maken en te bekijken -- op het scherm was er niets aan te zien. */

/* --- waarschuwingen ---------------------------------------------------------
   .waarschuwing werd op twintig plekken gebruikt maar was nooit gedefinieerd: bij de
   vernederlandsing is .warning hernoemd zonder dat de stylesheet meeging. Alle
   waarschuwingen in de applicatie én in bevroren rapporten stonden daardoor als gewone
   platte tekst. Beide namen staan er nu, zodat geen van beide opnieuw stil wegvalt. */
p.waarschuwing,.waarschuwing{font-size:14px;line-height:1.55;background:#fff1d8;color:#694809;
  padding:11px 14px;border-left:3px solid #cb9526;border-radius:0 3px 3px 0;margin:10px 0}
.waarschuwing strong{color:#4d340a}
.meldingen{margin:16px 0}
.meldingen .waarschuwing:first-child{margin-top:0}
.meldingen .waarschuwing:last-child{margin-bottom:0}

/* Het vinkje in het rapportformulier: #rapportform label is een ID-selector en zet
   flex-direction op column plus vet. Dat wint van .checked, waardoor het vakje bóven
   zijn eigen uitleg belandde. Hier expliciet terug naar een regel. */
#rapportform label.checked{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13px;line-height:1.5}
#rapportform label.checked input{width:16px;height:16px;min-width:16px;flex:0 0 auto;margin:2px 0 0;padding:0;border:0;background:none}
#rapportform label.checked input:disabled + span{color:#8c9196}

/* --- help: de vraagtekens in het formulier en de helppagina zelf ------------ */
/* Let op: de algemene regel input{width:100%} raakt deze knopjes niet — het zijn
   links, geen invoervelden. Wel expliciet gereset op font-size, want a{} zet die
   op 14px en dan valt het vraagteken uit zijn rondje. */
.hulp{float:right;width:20px;height:20px;line-height:19px;text-align:center;font-size:12px;
  font-weight:700;color:#335a97;background:#e9f7ed;border:1px solid #a9dcb6;border-radius:50%;
  text-decoration:none;margin-left:8px;flex-shrink:0}
.hulp:hover{background:#335a97;color:white;border-color:#335a97}

.help.artikel,article.help{max-width:none}
.helpindex{background:white;border:1px solid #dadbdd;padding:18px 22px;margin:22px 0 10px}
.helpindex .eyebrow{margin:0 0 10px}
.helpindex ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.helpindex li{font-size:14px;margin:4px 0;break-inside:avoid}
.helpindex a{font-size:14px}

.helpstuk{border-top:1px solid #dadbdd;padding-top:6px;margin-top:34px;scroll-margin-top:20px}
.helpstuk h2{font-size:20px;margin:14px 0 10px;color:#112337}
.helpstuk h3{font-size:15px;margin:22px 0 6px;color:#203e60}
.helpstuk p{font-size:15px;line-height:1.65;max-width:78ch;margin:0 0 12px}
.helpstuk ul,.helpstuk ol{font-size:15px;line-height:1.6;max-width:76ch;padding-left:22px}
.helpstuk li{margin:5px 0}
.helpstuk table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;background:white}
.helpstuk th{text-align:left;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:#8c9196;border-bottom:2px solid #112337;padding:0 12px 7px 0;white-space:nowrap}
.helpstuk td{border-bottom:1px solid #dadbdd;padding:10px 12px 10px 0;vertical-align:top}
.helpstuk dl.spec{display:grid;grid-template-columns:auto 1fr;gap:0;margin:14px 0;
  border-top:1px solid #dadbdd;font-size:14.5px}
.helpstuk dl.spec dt{font-weight:700;color:#606266;padding:9px 22px 9px 0;border-bottom:1px solid #dadbdd}
.helpstuk dl.spec dd{margin:0;padding:9px 0;border-bottom:1px solid #dadbdd}
.helpstuk .formule{font:13px/1.7 ui-monospace,Consolas,monospace;background:white;
  border:1px solid #dadbdd;border-left:3px solid #335a97;padding:14px 16px;margin:0 0 14px;
  overflow-x:auto;white-space:pre}
.helpstuk .aanname,.helpstuk .letop{padding:13px 16px;margin:0 0 14px;border-radius:0 3px 3px 0;max-width:80ch}
.helpstuk .aanname{background:#fdf4e3;border-left:3px solid #b4740c}
.helpstuk .letop{background:#fbeceb;border:0;border-left:3px solid #a83a36}
.helpstuk .aanname p,.helpstuk .letop p{margin:0;font-size:14.5px}
.helpstuk .etiket{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;margin-bottom:6px}
.helpstuk .aanname .etiket{color:#8d5c09}
.helpstuk .letop .etiket{color:#8f2d30}

/* De toelichting onderaan een bevroren rapport. Dichtgeklapt, want ze verklaart het
   rapport maar is niet de uitkomst. */
.toelichting{margin-top:30px}
.toelichting>summary{font-size:15px}
.toelichting .helpstuk:first-of-type{border-top:0}

/* Het rapportformulier staat met `hidden` in de HTML tot er een analyse is gedraaid.
   Maar #rapportform is een ID-selector met display:flex, en die wint van de
   browserregel [hidden]{display:none} — het formulier stond dus vanaf het laden open,
   ook zonder analyse. Dezelfde valkuil als eerder bij het vinkje: een ID-selector
   overrulet stilletjes wat verderop of van buiten wordt gezet. */
#rapportform[hidden]{display:none}

/* De rechterkolom draagt het bovenaanzicht en de hoogtediagrammen: brede SVG's in een
   grid-cel. minmax(0,1fr) op .workspace vangt dat al op; dit maakt het expliciet op de
   cel zelf, zodat een latere wijziging aan .workspace de tekening niet buiten beeld
   duwt. Het was tot nu toe de enige klasse in de applicatie zonder enkele regel. */
.results{min-width:0}
.helpstuk h4{font-size:14px;margin:20px 0 6px;color:#203e60}
.toelichting .helpstuk h3{font-size:17px;color:#112337}

/* --- de verkorte uitkomst: vier antwoorden ---------------------------------- */
.verkort{margin:26px 0 30px}
.verkort h2{margin:0 0 14px}
.kortregel{background:white;border:1px solid #dadbdd;border-left:4px solid #c3c6ca;
  border-radius:0 5px 5px 0;padding:14px 18px;margin:0 0 10px}
.kortregel.goed{border-left-color:#28a745}
.kortregel.slecht{border-left-color:#a83a36}
.kortregel.onbekend{border-left-color:#b4740c}
.kortvraag{margin:0;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8c9196}
.kortantwoord{margin:4px 0 0;font-size:23px;font-weight:700;letter-spacing:-.4px;line-height:1.25}
.kortcijfer{font-size:14px;font-weight:600;color:#606266;margin-left:12px;letter-spacing:0;white-space:nowrap}
.kortonder{margin:8px 0 0;font-size:14px;line-height:1.55;max-width:80ch}
.kortmits{color:#606266;font-size:13px}
.kortvoorbehoud{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#8c9196;max-width:80ch}
.kortslot{font-size:13px;color:#606266;margin:14px 0 0}
.internstempel{background:#fdf4e3;border-left:3px solid #b4740c;padding:11px 14px;margin:0 0 22px;
  font-size:13.5px;line-height:1.55;border-radius:0 3px 3px 0}

/* De draaiende versie in de voettekst. Klein, maar het antwoord op "waarom klopt deze
   melding niet met de code?" — het pakket komt op de werkplek terecht en moet daarna nog
   naar de server, en dat is hier al drie keer de eigenlijke oorzaak geweest. */
.versie{float:right;font-variant-numeric:tabular-nums;color:#8c9196}

/* --- wisselen van weergave en afdrukken naar PDF ---------------------------- */
.weergavewissel{display:flex;gap:6px;margin:18px 0 6px}
.weergavewissel a{font-size:13px;font-weight:600;padding:7px 14px;border:1px solid #dadbdd;
  border-radius:20px;background:white;text-decoration:none;color:#606266}
.weergavewissel a.aan{background:#335a97;border-color:#335a97;color:white}
.weergavewissel a:hover{border-color:#335a97}

.afdruk{background:white;border:1px solid #dadbdd;border-radius:6px;padding:18px 20px;margin:18px 0 24px}
.afdruk h2{margin:0 0 6px;font-size:17px}
.afdrukkeuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 20px;margin:12px 0}
.afdrukkeuzes label{margin:0;font-weight:400;font-size:13.5px}
.afdrukknop{width:auto;margin-top:6px}
.afdrukwenk{margin:8px 0 0}

/* De keuze werkt zonder script: elk vinkje staat vóór de blokken in dezelfde ouder, dus
   een uitgevinkt hokje kan met de zustercombinator precies zijn blok verbergen. Alleen
   bij het afdrukken — op het scherm blijft alles staan, anders lijkt het of er iets weg is. */
@media print{
  #kies-kort:not(:checked) ~ .blok-kort,
  #kies-mast:not(:checked) ~ .blok-mast,
  #kies-score:not(:checked) ~ .blok-score,
  #kies-conclusie:not(:checked) ~ .blok-conclusie,
  #kies-kaart:not(:checked) ~ .blok-kaart,
  #kies-bereik:not(:checked) ~ .blok-bereik,
  #kies-toetsing:not(:checked) ~ .blok-toetsing,
  #kies-concurrentie:not(:checked) ~ .blok-concurrentie,
  #kies-zijaanzichten:not(:checked) ~ .blok-zijaanzichten,
  #kies-beelden:not(:checked) ~ .blok-beelden,
  #kies-toelichting:not(:checked) ~ .blok-toelichting{display:none}

  /* Wat op papier niets te zoeken heeft. */
  header,footer,.afdruk,.weergavewissel,.kruimel,.waardeschakelaar,.melding{display:none}
  main.blad{max-width:none;padding:0}
  body{background:white;font-size:11pt}
  a{color:#112337;text-decoration:none}

  /* Een dichtgeklapte toelichting drukt leeg af; op papier hoort ze open te staan. */
  details{border:0;padding:0}
  details>summary{list-style:none;font-size:13pt;margin-bottom:6px}
  .toelichting .helpstuk{break-inside:avoid}

  /* Niets halverwege afbreken wat als geheel gelezen moet worden. */
  .blok,.view,.kortregel,figure,table{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .view img{max-height:11cm;object-fit:contain}
}

/* Het beeldmerk naast de naam. Eén kleur (currentColor) met het onderste vlak wat
   lichter: zo werkt hij op de donkere balk én op wit, zonder tweede bestand. */
.brand{display:inline-flex;align-items:center;gap:11px;letter-spacing:-.4px}
.beeldmerk{width:23px;height:31px;flex:0 0 auto}
header .beeldmerk{color:#ffffff}

/* --- mailen ---------------------------------------------------------------- */
.mailen{background:white;border:1px solid #dadbdd;border-radius:6px;padding:18px 20px;margin:0 0 24px}
.mailen h2{margin:0 0 6px;font-size:17px}
.mailen .inline{margin-left:10px}
.knoplink{display:inline-block;font:600 15px Rubik,'Segoe UI',system-ui,Arial,sans-serif;
  background:#203e60;color:white;text-decoration:none;padding:13px 20px;border-radius:8px;margin-top:6px}
.knoplink:hover{background:#112337}
.geheim .knoplink{background:#28a745}
.geheim .knoplink:hover{background:#1f8c3a}
.mailregel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}

/* De Word-knop naast het afdrukken. Bewust ingetogener dan de PDF-knop: de PDF is wat je
   naar buiten stuurt, Word is voor als je er zelf nog in wilt schrijven. */
.afdruk.word{margin-top:-6px}
.afdruk.word .klein{margin:0 0 12px}
button.wordknop{background:#ffffff;color:#203e60;border:1.5px solid #203e60}
button.wordknop:hover{background:#203e60;color:#ffffff}

/* 'bestaand' in de toetsingstabel: geen goedkeuring en geen afkeuring maar een
   constatering. Groen zou suggereren dat de norm gehaald is, rood dat er iets mis is. */
.vlag.blauw{background:#e8f4fb;color:#203e60;border:1px solid #a6d5f1}

/* --- zoeken in de bevindingen ---------------------------------------------- */
/* Eén rij die op een smal scherm netjes doorbreekt; de knoppen blijven onderaan
   staan zodat de volgorde van links naar rechts de leesvolgorde blijft. */
.zoekbalk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:18px 0;
  padding:14px 16px;background:#f4f6f8;border:1px solid #dadbdd;border-radius:6px}
.zoekbalk label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;
  color:#203e60;flex:1 1 200px;margin:0}
.zoekbalk label:nth-child(3){flex:0 0 110px}
.zoekbalk input,.zoekbalk select{font:400 15px Rubik,'Segoe UI',system-ui,Arial,sans-serif;
  padding:8px 10px;border:1px solid #c3c6ca;border-radius:4px;background:#fff;width:100%}
.zoekbalk button,.zoekbalk .knoplink{flex:0 0 auto;align-self:flex-end}

/* De enige knop in de applicatie die het bevindingenbestand wijzigt: zichtbaar apart, zodat
   niemand hem voor een zoekknop aanziet. */
.straatbeeldbalk{margin:18px 0;padding:14px 16px;background:#fffdf7;border:1px solid #e6d5ae;
  border-radius:6px}
.straatbeeldbalk p{margin:0 0 12px}
.straatbeeldbalk button{margin-right:10px}
table.beheer td input[type=checkbox]{width:18px;height:18px;margin:2px 0}

/* --- het aanvraagscherm ------------------------------------------------------ */
/* Eén kolom, ruim gezet: dit is het scherm waar iemand een klantvraag overtikt, en
   dan helpt smal lezen meer dan veel tegelijk kunnen zien. */
.aanvraagform{max-width:620px;display:flex;flex-direction:column;gap:4px;margin:22px 0}
.aanvraagform label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;
  color:#203e60;margin-top:14px}
.aanvraagform input,.aanvraagform select{font:400 16px Rubik,'Segoe UI',system-ui,Arial,sans-serif;
  padding:10px 12px;border:1px solid #c3c6ca;border-radius:4px;background:#fff;width:100%}
.aanvraagform .help{margin:4px 0 0}
.aanvraagform fieldset.schakelaar{margin-top:18px}
.aanvraagform details.maten{margin-top:18px;border:1px solid #dadbdd;border-radius:6px;padding:10px 14px}
.aanvraagform details.maten summary{cursor:pointer;font-weight:600;color:#203e60}
.aanvraagform details.maten .rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 16px}
.aanvraagform button{margin-top:22px;align-self:flex-start}

/* --- de werkbak: aanvragen die nog opgepakt moeten worden --------------------- */
.werkbak{background:#f4f6f8;border:1px solid #dadbdd;border-radius:6px;padding:16px 18px;margin:22px 0}
.werkbak h2{margin-top:0}
.werkbak .uitleg{margin-bottom:12px}
ul.bakken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.bakken li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  background:#fff;border:1px solid #dadbdd;border-radius:5px;padding:12px 14px}
ul.bakken li.bezig{border-color:#28a745;box-shadow:0 0 0 1px #28a745 inset}
ul.bakken .rechts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
ul.bakken .vraag{display:inline-block;margin-top:4px;font-style:italic;color:#4a5c6a}

/* Een veld dat wordt samengesteld, hoort er niet uit te zien als een veld waarin je kunt
   typen. Zonder dit verschil probeert iemand de naam te wijzigen, gebeurt er niets, en
   denkt hij dat het scherm hapert. */
input[readonly]{background:#f2f5f8;color:#41526a;cursor:default}
input[readonly]:focus{outline-color:#9fb3cc}

/* Het beheermenu in de kopbalk: één knop, de rest eronder.
   <details> zonder script, want het beveiligingsbeleid staat geen inline handlers toe. */
/* EERST DE ALGEMENE REGEL AFZETTEN. Bovenin staat `details{background:white;border:1px
   solid #dadbdd;padding:18px 22px;margin:26px 0}` -- bedoeld voor uitklapblokken in de
   inhoud. Die pakt dit menu mee, en dan staat er een wit vlak met 22 px lucht eromheen in
   een donkere kopbalk. Vierde keer dat een brede regel een nieuw onderdeel meeneemt: eerder
   met `input{width:100%}` op keuzerondjes en twee keer met een ID-selector. */
.sessie .menu{position:relative;background:none;border:0;padding:0;margin:0}
.sessie .menu>summary{list-style:none;cursor:pointer;color:#a6d5f1;font-size:12px;
  border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:5px 11px}
.sessie .menu>summary::-webkit-details-marker{display:none}
.sessie .menu>summary::after{content:' \25be'}
.sessie .menu>summary:hover{background:rgba(255,255,255,.12);color:white}
.sessie .menu[open]>summary{background:rgba(255,255,255,.12);color:white}
.sessie .menulijst{position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  display:flex;flex-direction:column;gap:2px;min-width:160px;padding:6px;
  background:#112337;border:1px solid rgba(255,255,255,.25);border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sessie .menulijst a{display:block;padding:7px 10px;border-bottom:0;border-radius:3px;white-space:nowrap}
.sessie .menulijst a:hover{background:rgba(255,255,255,.12)}
@media print{.sessie .menu{display:none}}