/* Vormgeving volgt de huisstijl van POWERNAPP zelf — amber als accent, warm
   donkergrijs als inkt — en niet die van DenkBot. Dit is hún demo; wij staan er
   met één regel onder. Rechte hoeken, één accentkleur, geen schaduwen. */

:root{
  --amber:#FFAE0B;
  --amber-zacht:#fff6e2;
  --inkt:#252523;
  --inkt-zacht:#4b4a4d;
  --grijs:#858589;
  --lijn:#e4e3e0;
  --papier:#fbfbfb;
  --wit:#ffffff;
  --blauw:#203e8a;
  --goed:#1f7a4d;
  --let:#b45309;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--inkt);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 .8em}
p:last-child{margin-bottom:0}

/* ---- kop ---- */
.kop{background:var(--inkt); color:#fff}
.kop-in{max-width:1280px; margin:0 auto; padding:18px 24px; display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap}
.merk-naam{font-weight:800; font-size:20px; letter-spacing:.14em}
.merk-sub{margin-left:12px; color:#b1b1b4; font-size:14px}
.kop-rechts{display:flex; align-items:center; gap:14px}
.pil{background:var(--amber); color:var(--inkt); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px}
.door{color:#b1b1b4; font-size:13px}

/* ---- uitleg ---- */
.uitleg{background:var(--wit); border-bottom:1px solid var(--lijn)}
.uitleg-in{max-width:1280px; margin:0 auto; padding:20px 24px; max-inline-size:none}
.uitleg p{max-width:76ch}
.fijn{color:var(--grijs); font-size:14px}

/* ---- raam ---- */
.raam{max-width:1280px; margin:0 auto; padding:24px; display:grid; grid-template-columns:minmax(320px,400px) 1fr; gap:24px; align-items:start}
@media (max-width:900px){ .raam{grid-template-columns:1fr} }

.kolom h2{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--grijs); margin-bottom:10px; display:flex; justify-content:space-between; align-items:baseline}
.tel{font-weight:400; letter-spacing:0; text-transform:none}

/* ---- postvak ---- */
.mails{list-style:none; margin:0 0 20px; padding:0; border:1px solid var(--lijn); background:var(--wit)}
.mails li + li{border-top:1px solid var(--lijn)}
.mail{display:block; width:100%; text-align:left; background:none; border:0; padding:14px 16px; cursor:pointer; font:inherit; border-left:3px solid transparent}
.mail:hover{background:var(--amber-zacht)}
.mail[aria-current="true"]{background:var(--amber-zacht); border-left-color:var(--amber)}
.mail-van{font-size:13px; color:var(--grijs); display:flex; justify-content:space-between; gap:10px}
.mail-ond{font-weight:600; margin:2px 0 4px}
.mail-toont{font-size:13px; color:var(--inkt-zacht); font-style:italic}

.eigen{border:1px solid var(--lijn); background:var(--wit); padding:16px}
.eigen h3{font-size:14px; margin-bottom:10px}
.eigen label{display:block; font-size:13px; color:var(--inkt-zacht); margin-bottom:10px}
.eigen input,.eigen textarea{
  display:block; width:100%; margin-top:4px; padding:9px 10px;
  border:1px solid var(--lijn); border-radius:0; background:var(--papier);
  font:14px/1.5 var(--sans); color:var(--inkt);
}
.eigen textarea{font-family:var(--mono); font-size:13px; resize:vertical}
.eigen input:focus,.eigen textarea:focus{outline:2px solid var(--amber); outline-offset:-1px; background:var(--wit)}
.knop{
  background:var(--inkt); color:#fff; border:0; border-radius:0;
  padding:10px 18px; font:600 14px var(--sans); cursor:pointer;
}
.knop:hover{background:var(--blauw)}
.knop:disabled{background:var(--grijs); cursor:progress}

/* ---- werkbank ---- */
.leeg{border:1px dashed var(--lijn); background:var(--wit); padding:60px 24px; text-align:center; color:var(--grijs)}

.blok{border:1px solid var(--lijn); background:var(--wit); margin-bottom:16px}
.blok-kop{padding:12px 16px; border-bottom:1px solid var(--lijn); display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.blok-n{font:700 11px var(--mono); letter-spacing:.14em; color:var(--amber); background:var(--inkt); padding:3px 7px}
.blok-kop h3{font-size:15px}

.mailtekst{
  margin:0; padding:16px; font:13px/1.65 var(--mono); white-space:pre-wrap;
  color:var(--inkt-zacht); background:var(--wit);
}
.mail-meta{padding:10px 16px; border-bottom:1px solid var(--lijn); font-size:13px; color:var(--grijs); background:var(--papier)}

/* ---- stappen ---- */
.stappen{list-style:none; margin:0 0 16px; padding:0; counter-reset:s}
.stappen > li{
  border:1px solid var(--lijn); background:var(--wit); padding:14px 16px 14px 58px;
  position:relative; margin-bottom:-1px;
}
/* Alleen de stap zelf krijgt het nummervlak — niet de opsommingsregels erin. */
.stappen > li::before{
  content:attr(data-n); position:absolute; left:0; top:0; bottom:0; width:42px;
  display:flex; align-items:center; justify-content:center;
  font:700 14px var(--mono); color:#fff; background:var(--inkt);
}
.stappen > li[data-door="mens"]::before{background:var(--let)}
.stappen > li[data-uit="true"]::before{background:var(--grijs)}
.stap-kop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.stap-t{font-weight:700; font-size:15px}
.stap-door{font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--grijs)}
.stap-door[data-door="mens"]{color:var(--let)}
.stappen ul{margin:0; padding-left:18px; color:var(--inkt-zacht); font-size:14px}
.stappen > li.wacht{opacity:.45}
.stappen ul li{border:0; padding:1px 0; margin:0; position:static}

/* ---- kaders / velden ---- */
.kaders{margin:0; padding:8px 16px 14px; display:grid; grid-template-columns:auto 1fr; gap:2px 16px; font-size:14px}
.kaders dt{color:var(--grijs); padding:4px 0}
.kaders dd{margin:0; padding:4px 0; font-weight:600}
.kaders dd.leeg{font-weight:400; color:var(--let); font-style:italic}

/* ---- opties ---- */
.optie{padding:14px 16px; border-top:1px solid var(--lijn)}
.optie:first-child{border-top:0}
.optie-kop{display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap}
.optie-naam{font-weight:700}
.optie-tarief{font:600 14px var(--mono); color:var(--inkt-zacht)}
.optie-feiten{font-size:13.5px; color:var(--inkt-zacht); margin-top:3px}
.merkje{display:inline-block; font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; margin-top:7px}
.m-goed{background:#e8f5ee; color:var(--goed)}
.m-let{background:#fdf1e0; color:var(--let)}
.m-vraag{background:#eef1f8; color:var(--blauw)}
.optie-concessie{font-size:13.5px; color:var(--let); margin-top:5px}
.optie-onzeker{font-size:13px; color:var(--grijs); margin-top:4px; font-style:italic}

/* ---- concept ---- */
.concept{border-color:var(--amber); border-width:2px}
.tedoen{border-top:1px solid var(--lijn); padding:12px 16px; background:var(--amber-zacht); font-size:14px}
.tedoen b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--let); margin-bottom:6px}
.tedoen ul{margin:0; padding-left:18px}

/* ---- voet ---- */
.voet{border-top:1px solid var(--lijn); background:var(--wit); margin-top:12px}
.voet p{max-width:1280px; margin:0 auto; padding:18px 24px; color:var(--grijs); font-size:13px}

.fout{border:1px solid var(--let); background:#fdf1e0; color:var(--let); padding:14px 16px; margin-bottom:16px}