/* NAGLOED offertemodule, Advance Events huisstijl */
:root{--ink:#15171C;--slate:#21252D;--slate2:#2C313B;--slate3:#363C47;--orange:#EA650D;--ember:#B8500A;
--sunburst:#F2913E;--spark:#FBE0CE;--paper:#F7F4EF;--cloud:#ECE7DF;--line:#E2DCD2;--muted:#857E74;
--ok:#2F7D4F;--let:#B8500A;--radius:18px;--maxw:1280px;--gut:clamp(18px,4vw,60px)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{font-family:'Archivo','Helvetica Neue',Arial,sans-serif;background:var(--paper);color:var(--ink);
font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
min-height:100vh;display:flex;flex-direction:column}
body > footer{margin-top:auto}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.025em;line-height:1.05;font-weight:700}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.kicker{font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:2px;background:var(--orange)}
.mono{font-variant-numeric:tabular-nums}

/* kop */
.top{background:var(--ink);color:#EDEBE7;padding:18px 0;position:sticky;top:0;z-index:70}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .logo{height:34px;width:auto}
.top .rechts{display:flex;align-items:center;gap:14px;font-size:13px;color:#9A958C}
.rolchip{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
padding:5px 10px;border-radius:999px;background:var(--orange);color:#fff}
.rolchip.klant{background:rgba(255,255,255,.14);color:#EDEBE7}

/* hero */
.hero{background:var(--slate);color:#EDEBE7;padding:clamp(30px,5vw,58px) 0}
.hero h1{font-size:clamp(28px,4.6vw,52px);margin:12px 0 12px;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--sunburst)}
.hero p{color:#B6B0A6;max-width:62ch}

/* stappen */
.stappen{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.stap{font-size:12px;font-weight:700;letter-spacing:.05em;color:#8E8880;
display:flex;align-items:center;gap:7px}
.stap b{width:20px;height:20px;border-radius:50%;background:var(--slate3);color:#EDEBE7;
display:flex;align-items:center;justify-content:center;font-size:11px}
.stap.on{color:#EDEBE7}.stap.on b{background:var(--orange);color:#fff}
.stap i{font-style:normal;opacity:.35;margin:0 4px}

/* layout */
.blad{display:grid;grid-template-columns:1fr 372px;gap:clamp(20px,3vw,40px);align-items:start;
padding:clamp(28px,4vw,54px) var(--gut) 90px}
@media(max-width:960px){.blad{grid-template-columns:1fr}
  /* op een telefoon liep de tekst tot tegen de rand aan, opmerking 52 */
  .zij{position:static;top:auto}}
@media(max-width:640px){:root{--gut:22px}
  main,aside{min-width:0}}
section.blok{margin-bottom:34px}
section.blok > h2{font-size:clamp(21px,2.6vw,28px);margin-bottom:6px}
section.blok > p.uitleg{color:var(--muted);margin-bottom:18px;font-size:15px;max-width:62ch}

/* velden */
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.veld label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-weight:800;margin-bottom:7px}
.veld input,.veld select,.veld textarea{width:100%;background:#fff;border:1px solid var(--line);
color:var(--ink);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15.5px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.veld textarea{min-height:84px;resize:vertical}
.presets{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.preset{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px;
padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.preset:hover,.preset.on{background:var(--orange);border-color:var(--orange);color:#fff}

/* keuzekaarten */
.keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.keuze{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
cursor:pointer;transition:.18s;position:relative;display:flex;flex-direction:column;text-align:left;
font-family:inherit;color:inherit;padding:0}
.keuze:hover{box-shadow:0 12px 30px -18px rgba(21,23,28,.35);transform:translateY(-2px)}
.keuze[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.keuze .shot{aspect-ratio:16/10;background:var(--cloud) center/cover;position:relative}
/* Nog geen foto van Advance ontvangen. Liever een bewust leeg vlak met de naam
   erin dan een willekeurige stockfoto: Marina wil geen beeld dat niet klopt. */
.keuze .shot.geenfoto{background:linear-gradient(135deg,#21252D,#15171C);
display:flex;align-items:center;justify-content:center;padding:14px}
.keuze .shot.geenfoto::after{display:none}
.keuze .shot.geenfoto .nogfoto{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
font-weight:800;color:#8A857D;text-align:center;line-height:1.5}
.keuze .shot::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(21,23,28,0) 55%,rgba(21,23,28,.6) 100%)}
.keuze .dur{position:absolute;bottom:10px;left:12px;z-index:2;color:#fff;font-size:12px;font-weight:700;
text-shadow:0 1px 6px rgba(0,0,0,.5)}
.keuze .vink{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:50%;
background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
font-size:14px;color:transparent}
.keuze[aria-pressed="true"] .vink{background:var(--orange);border-color:var(--orange);color:#fff}
.keuze .inh{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.keuze h3{font-size:16.5px;line-height:1.22}
.keuze p{font-size:13.5px;color:var(--muted);line-height:1.45}
.keuze .prijs{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700}
.keuze .prijs span{font-weight:400;color:var(--muted)}
.keuze .lev{font-size:11.5px;color:var(--muted)}
.keuze .marge{font-size:11.5px;color:var(--ok);font-weight:700}

/* add-ons */
.cat{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);
font-weight:800;margin:20px 0 8px}
/* Maaltijd is geen prijsregel maar een ja-of-nee-vraag, opmerking 73 en 74. */
.rij-add.janee{grid-template-columns:1fr auto}
.rij-add.janee .jn{display:flex;gap:16px;align-items:center;font-size:14.5px;white-space:nowrap}
.rij-add.janee .jn label{display:flex;gap:6px;align-items:center;cursor:pointer}
.rij-add{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:11px 14px;margin-bottom:7px}
.rij-add .naam{flex:1;font-size:14.5px;line-height:1.35}
.rij-add .op{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--let);background:var(--spark);padding:3px 8px;border-radius:6px;white-space:nowrap}
.rij-add .pr{font-size:14px;font-weight:700;white-space:nowrap;min-width:96px;text-align:right}
.rij-add .pr small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.tel{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.tel button{width:30px;height:30px;border:0;background:#fff;cursor:pointer;font-size:16px;
font-family:inherit;color:var(--ink);line-height:1}
.tel button:hover{background:var(--cloud)}
.tel input{width:44px;border:0;text-align:center;font-family:inherit;font-size:14px;font-weight:700;
background:#fff;padding:6px 0}
.tel input:focus{outline:0}
.zoekbalk{margin-bottom:12px}
.zoekbalk input{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;
padding:12px 14px;font-family:inherit;font-size:15px}
.rij-add.weg{display:none}

/* zijkant */
.zij{position:sticky;top:86px;background:var(--slate);color:#EDEBE7;border-radius:20px;
padding:24px;display:flex;flex-direction:column;gap:2px}
.zij .big{font-size:clamp(34px,4vw,46px);font-weight:700;line-height:.95;color:var(--sunburst);
letter-spacing:-.03em}
.zij .biglbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#9A958C;margin:9px 0 4px}
.zij hr{border:0;border-top:1px solid var(--slate3);margin:16px 0;width:100%}
.zij .rij{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
.zij .rij span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.zij .rij.dim{color:#8E8880;font-weight:400;font-size:13px}
.zij .rij.tot{font-size:17px;font-weight:700;padding-top:12px;border-top:1px solid var(--slate3);margin-top:8px}
.zij .let{font-size:12.5px;color:var(--sunburst);margin-top:12px;line-height:1.45}
.zij .let:empty{display:none}
.zij .opa{background:var(--slate2);border-radius:11px;padding:11px 13px;margin-top:13px;font-size:12.5px;
color:#B6B0A6;line-height:1.45}
.zij .opa b{color:#EDEBE7;display:block;margin-bottom:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* knoppen */
.knoppen{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.knop{border:0;border-radius:999px;padding:13px 20px;font-size:14.5px;font-weight:700;cursor:pointer;
font-family:inherit;transition:.16s;text-align:center;text-decoration:none;display:block}
.knop.p{background:var(--orange);color:#fff}
.knop.p:hover{background:var(--ember)}
.knop.s{background:transparent;color:#EDEBE7;border:1px solid var(--slate3)}
.knop.s:hover{background:var(--slate2)}
.knop:disabled{opacity:.45;cursor:not-allowed}
.knop.klein{padding:9px 16px;font-size:13px}

/* melding */
.melding{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
background:var(--ink);color:var(--paper);padding:13px 22px;border-radius:999px;font-size:14.5px;
font-weight:600;z-index:200;transition:.25s;box-shadow:0 12px 34px -12px rgba(0,0,0,.5)}
.melding.zie{transform:translateX(-50%) translateY(0)}

/* dialoog */
.laag{position:fixed;inset:0;background:rgba(21,23,28,.62);display:none;align-items:center;
justify-content:center;z-index:150;padding:20px}
.laag.open{display:flex}
.venster{background:var(--paper);border-radius:20px;padding:clamp(22px,3vw,34px);max-width:520px;width:100%;
max-height:88vh;overflow:auto}
.venster h3{font-size:23px;margin-bottom:8px}
.venster p.uit{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.venster .velden{grid-template-columns:1fr}
.venster .acties{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.venster .acties .knop{flex:1;min-width:140px}
.venster .knop.s{color:var(--ink);border-color:var(--line);background:#fff}
.deellink{display:flex;gap:8px;margin-top:14px}
.deellink input{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
font-family:inherit;font-size:14px}

/* reacties */
.reactie{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:0 12px 12px 0;
padding:13px 15px;margin-bottom:9px}
.reactie.vraag{border-left-color:var(--sunburst)}
.reactie.niet_akkoord{border-left-color:#C0392B}
.reactie .wie{font-weight:700;font-size:14.5px}
.reactie .wat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.reactie p{font-size:14.5px;color:#3A352D;margin-top:5px}

/* tabel intern */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.lijst{width:100%;border-collapse:collapse;font-size:14px;min-width:940px}
table.lijst th{background:var(--ink);color:var(--paper);text-align:left;padding:12px 14px;font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase;font-weight:800;white-space:nowrap}
table.lijst td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
table.lijst tr:hover td{background:var(--paper)}
table.lijst td.num{text-align:right;white-space:nowrap}
.st{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;
border-radius:6px;white-space:nowrap}
.st-concept{background:var(--cloud);color:var(--muted)}
.st-gedeeld{background:rgba(58,99,192,.14);color:#3A63C0}
.st-ter_goedkeuring{background:var(--spark);color:var(--let)}
.st-akkoord_intern{background:rgba(47,125,79,.15);color:var(--ok)}
.st-aangevraagd{background:var(--orange);color:#fff}
.st-offerte,.st-akkoord{background:var(--ok);color:#fff}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.kpi .k{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kpi .k .n{font-size:28px;font-weight:700;line-height:1}
.kpi .k .l{font-size:12.5px;color:var(--muted);margin-top:6px}
.leeg{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:44px 24px;
text-align:center;color:var(--muted)}
.inlog{max-width:420px;margin:70px auto;background:#fff;border:1px solid var(--line);
border-radius:20px;padding:32px}
.inlog h2{font-size:24px;margin-bottom:8px}
.inlog p{color:var(--muted);font-size:14.5px;margin-bottom:20px}
footer{background:var(--ink);color:#8A857D;padding:30px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}


/* Projectnummer in de werkvoorraad. Klein en rustig: het is een veld dat je
   een keer invult en daarna alleen nog leest. Groen randje als het bewaard is,
   want zonder terugkoppeling weet niemand of het gelukt is. */
.lijst input.projectnr{width:92px;font:inherit;font-size:13px;padding:5px 7px;
border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.lijst input.projectnr::placeholder{color:var(--muted)}
.lijst input.projectnr:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
.lijst input.projectnr.bezig{opacity:.55}
.lijst input.projectnr.bewaard{border-color:var(--ok);box-shadow:0 0 0 2px rgba(30,140,80,.14)}


/* Mobiel: niets mag breder worden dan het scherm.
   De body is een kolom-flexbox. Een flexitem krijgt dan van zichzelf een
   ondergrens ter grootte van zijn eigen inhoud, en die was op een telefoon
   495 pixels breed. Daardoor schoof de hele pagina horizontaal weg: je kon
   naar rechts vegen en zag de rand van elk blok. Met min-width:0 mag het
   item wel krimpen en past alles binnen 390 pixels.
   Gevonden op 31 augustus tijdens de eigen doorloop op mobiel. */
main{min-width:0}
.blad>*{min-width:0}
.velden>*,.keuzes>*{min-width:0}


/* Waarschuwing in de werkvoorraad: prijzen die opnieuw bekeken moeten worden.
   Zandkleurig en niet rood: het is een herinnering, geen storing. */
.waarschuwing{background:#FFF6E8;border:1px solid #F0DCBE;border-left:4px solid var(--sunburst);
border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:22px 0}
.waarschuwing b{font-size:16px}
.waarschuwing p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:6px 0 12px;max-width:70ch}
.waarschuwing ul{list-style:none;display:grid;gap:7px}
.waarschuwing li{font-size:14.5px;line-height:1.4}
.waarschuwing li span{color:var(--muted);font-size:13px}


/* ============================================================
   16 september 2026, de inbreng van Arie en Marina
   ============================================================ */

/* Het prijsblok liep niet mee. De kolom was precies zo hoog als het blok zelf,
   en dan heeft sticky geen ruimte om te schuiven. De kolom rekt nu mee met de
   pagina, en het blok past altijd in het scherm. */
.blad>aside{align-self:stretch}
.zij{max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
@media(max-width:960px){.zij{max-height:none;overflow:visible}}

/* Kleine letters werken niet op een scherm. Ondergrens 13px, labels 14px. */
.kicker{font-size:13px}
.veld label{font-size:13px;letter-spacing:.08em}
.cat{font-size:14px;letter-spacing:.1em}
.stap{font-size:14px}
.stap b{width:24px;height:24px;font-size:13px}
.rolchip{font-size:13px;letter-spacing:.06em}
.zij .biglbl{font-size:13px}
.zij .rij.dim{font-size:14px}
.zij .let,.zij .opa{font-size:14px}
.zij .opa b{font-size:13px}
.rij-add .op{font-size:13px;letter-spacing:.03em}
.rij-add .pr small{font-size:13px}
.keuze p{font-size:14px}
.keuze .dur{font-size:14px}
.keuze .shot.geenfoto .nogfoto{font-size:13px}
.preset{font-size:14px}
.reactie .wat{font-size:13px}
.tel input{font-size:15px}
table.lijst th{font-size:13px;letter-spacing:.06em}
.st{font-size:13px;letter-spacing:.04em}
.kpi .k .l{font-size:14px}
.hint{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.45;text-wrap:pretty;max-width:68ch}

/* Velden die nodig zijn voor een aanvraag en nog leeg zijn */
.veld.mist input,.veld.mist select{border-color:var(--orange);box-shadow:0 0 0 3px rgba(234,101,13,.18)}
.veld .nodig{color:var(--orange);font-weight:800}

/* Het basisarrangement, bovenaan de samensteller */
.basis{background:var(--slate);color:#EDEBE7;border-radius:var(--radius);padding:clamp(20px,3vw,30px)}
.basis .bkop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.basis h2{font-size:clamp(22px,2.6vw,28px)}
.basis h2 em{font-style:normal;color:var(--sunburst)}
/* Alleen het bedrag blijft op een regel. De zin eronder mag afbreken, anders
   loopt hij op een telefoon buiten beeld en schuift de pagina opzij. */
.basis .bprijs{font-size:26px;font-weight:800;color:var(--sunburst);min-width:0;max-width:100%}
.basis .bprijs #b-pp{white-space:nowrap}
.basis .bprijs small{display:block;font-size:14px;font-weight:500;color:#B6B0A6;text-align:right;white-space:normal;overflow-wrap:anywhere}
.basis p.bsub{color:#B6B0A6;font-size:15px;margin:6px 0 18px;max-width:62ch}
.basislijst{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px 26px}
.basislijst li{position:relative;padding-left:24px;font-size:15px;line-height:1.45}
.basislijst li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--orange)}

/* Meer weten over een activiteit, zonder hem meteen te kiezen */
.keuze .info{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:2px;
font-size:14px;font-weight:700;color:var(--ember);cursor:pointer;border-radius:999px;padding:2px 0}
.keuze .info i{font-style:normal;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;
display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-family:Georgia,serif}
.keuze .info:hover{color:var(--orange)}
.venster.breed{max-width:680px}
.venster .ifoto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:16px}
.venster .itags{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 14px}
.venster .itags span{background:var(--cloud);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:600}
.venster .itekst p{font-size:15px;line-height:1.6;margin-bottom:10px}
.venster .iincl{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.venster .iincl b{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.venster .iincl ul{margin:8px 0 0 18px;font-size:15px}

/* Uitleg onder een categorie of een regel bij de extra's */
.cat-uitleg{color:var(--muted);font-size:14.5px;margin:-4px 0 12px;max-width:66ch;line-height:1.5}
.cat-uitleg b{color:var(--ink)}
.rij-add .naam .toel{display:block;color:var(--muted);font-size:14px;margin-top:3px}

/* De aanvraagknop moet opvallen */
.knop.aanvraag{background:var(--orange);color:#fff;font-size:16px;padding:16px 20px;
box-shadow:0 10px 26px -10px rgba(234,101,13,.8)}
.knop.aanvraag:hover{background:var(--ember)}
.knop.aanvraag:disabled{opacity:1;background:var(--ok);box-shadow:none;cursor:default}
.zij .knoppen .klaar{font-size:14px;color:#B6B0A6;text-align:center;line-height:1.45}

/* Het slot van de samensteller: zelfde prijs en knoppen, onderaan de pagina */
.slotblok{background:var(--ink);color:#EDEBE7;border-radius:var(--radius);padding:clamp(22px,3vw,34px);
display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.slotblok h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.slotblok p{color:#B6B0A6;font-size:15px;max-width:52ch}
.slotblok .sbprijs{font-size:15px;color:#B6B0A6;margin-top:10px}
.slotblok .sbprijs b{color:var(--sunburst);font-size:24px;margin-right:6px}
.slotblok .knoppen{margin-top:0;min-width:270px}
@media(max-width:700px){.slotblok{grid-template-columns:1fr}.slotblok .knoppen{min-width:0}}

/* Een collega opent een gedeelde opzet */
.gedeeld{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px}
.gedeeld span{color:#EDEBE7;font-size:15px;flex:1;min-width:220px}

/* Bevestiging na het aanvragen */
.venster .vink-groot{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:14px}
.venster ol.verder{list-style:none;counter-reset:v;margin:6px 0 4px;display:grid;gap:12px}
.venster ol.verder li{counter-increment:v;position:relative;padding-left:40px;font-size:15px;line-height:1.5}
.venster ol.verder li::before{content:counter(v);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
background:var(--orange);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.venster ol.verder li b{display:block}
.aangevraagd-label{background:rgba(47,125,79,.18);color:#9ED9B4;border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.45}
/* Een regel met uitleg eronder mag de rij niet breder maken dan het scherm */
.rij-add .naam{min-width:0}
@media(max-width:640px){.rij-add{flex-wrap:wrap}.rij-add .naam{flex:1 1 55%}}
/* Werkvoorraad: de knoppen voorop, en hoe een offerte bij de klant komt */
.acties-rij{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.acties-rij .knop{display:inline-block;padding:7px 13px;font-size:13px}
.zo-versturen{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
border-radius:0 14px 14px 0;padding:14px 18px;margin-bottom:16px;display:grid;gap:4px;max-width:900px}
.zo-versturen b{font-size:16px}
.zo-versturen span{color:var(--muted);font-size:14.5px;line-height:1.5}
.zo-versturen a{color:var(--ember);font-weight:700}


/* ============================================================
   20 september 2026, de samensteller bruikbaar voor de HR-manager
   Alles hieronder is toegevoegd. Nieuwe klassen dragen het voorvoegsel
   rvdz-, zodat ze niet botsen met wat er al staat, zoals .stap.
   ============================================================ */

/* De prijs op een telefoon.
   Gemeten op 390 breed: het paneel .zij begon op 11.073 pixels van een pagina
   van 11.796, dus op 93,9 procent, en er stond in het eerste scherm geen enkel
   bedrag. Deze balk staat meteen onder de inleiding en loopt mee. Op een breed
   scherm blijft hij uit, want daar doet .zij het werk al.
   De 70 pixels zijn de hoogte van de vaste kop: 18 boven, 34 logo, 18 onder. */
.rvdz-prijsbalk{display:none}
@media(max-width:960px){
  .rvdz-prijsbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:70px;z-index:60;background:var(--ink);color:#EDEBE7;
  padding:11px var(--gut);border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 26px -20px rgba(21,23,28,.95)}
  .rvdz-pb-vak{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .rvdz-pb-vak b{font-size:23px;font-weight:800;color:var(--sunburst);white-space:nowrap;
  letter-spacing:-.02em}
  .rvdz-pb-vak span{font-size:13px;color:#9A958C;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
  .rvdz-pb-tot{align-items:flex-end;text-align:right}
  .rvdz-pb-tot b{font-size:18px;color:#EDEBE7}
}

/* Raakvlakken van 44 bij 44 pixels.
   Gemeten op 390 breed: plus en min waren 30 bij 30, de aankruisvakjes en
   keuzerondjes 13 bij 13, en de knop Wat houdt het in 146 bij 26. */
.tel button{width:44px;height:44px;font-size:20px}
.tel input{height:44px;width:48px}
.keuze .info{min-height:44px;padding-top:4px;padding-bottom:4px}
.knop.klein{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Het vakje zelf blijft 24 pixels in beeld, het raakvlak eromheen is 44. */
.rij-add input[type=checkbox],.rij-add input[type=radio]{
appearance:none;-webkit-appearance:none;width:44px;height:44px;flex:0 0 44px;
margin:0;padding:0;border:0;background-color:transparent;cursor:pointer;
background-repeat:no-repeat;background-position:center;background-size:24px 24px}
.rij-add input[type=checkbox]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='6' fill='%23ffffff' stroke='%23857E74' stroke-width='2'/%3E%3C/svg%3E")}
.rij-add input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='6' fill='%23EA650D' stroke='%23EA650D' stroke-width='2'/%3E%3Cpath d='M6.5 12.4l3.6 3.6 7-7' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rij-add input[type=radio]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23857E74' stroke-width='2'/%3E%3C/svg%3E")}
.rij-add input[type=radio]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23EA650D' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='5.6' fill='%23EA650D'/%3E%3C/svg%3E")}
.rij-add input[type=checkbox]:focus-visible,.rij-add input[type=radio]:focus-visible{
outline:2px solid var(--orange);outline-offset:-7px;border-radius:14px}
.rij-add label{min-height:44px}
.rij-add.janee .jn label{min-height:44px;gap:2px}

/* De meeneemmuur, binnen het donkere blok Dit zit er altijd in */
.rvdz-muur{margin-top:20px;padding:14px 16px;border-radius:14px;background:var(--slate2);
border-left:4px solid var(--orange)}
.rvdz-muur b{display:block;font-size:16px;color:#EDEBE7;margin-bottom:4px}
.rvdz-muur p{color:#B6B0A6;font-size:15px;line-height:1.5;max-width:66ch}

/* Zoeken zonder resultaat liet een leeg vlak achter */
.rvdz-nietsgevonden{background:#fff;border:1px dashed var(--line);border-radius:14px;
padding:16px 18px;margin-bottom:12px;display:grid;gap:9px;justify-items:start}
.rvdz-nietsgevonden b{font-size:16.5px}
.rvdz-nietsgevonden span{color:var(--muted);font-size:14.5px;line-height:1.5;max-width:66ch}

/* De balk bovenaan, nadat er een reactie is achtergelaten */
.rvdz-gedeeld-klaar{background:rgba(47,125,79,.20);border-color:rgba(158,217,180,.45)}

/* Twee dingen die meekomen met de balk en de grotere raakvlakken.
   Een sprong naar een blok, bijvoorbeeld naar de datum die nog leeg is, kwam
   onder de vaste kop plus de prijsbalk terecht: 70 plus 66 pixels. */
@media(max-width:960px){
  section.blok{scroll-margin-top:150px}
  .veld input,.veld select{scroll-margin-top:170px}
}
/* Een regel bij de extra's paste niet meer op één rij toen de teller 44 hoog
   werd. Nu staat de naam boven, en daaronder de teller en het bedrag. */
@media(max-width:640px){
  .rij-add{row-gap:6px}
  .rij-add .naam{order:1;flex:1 1 100%}
  .rij-add .tel{order:2}
  .rij-add .pr{order:3;margin-left:auto}
  .rij-add .op{order:3;margin-left:auto}
  .rij-add label{order:4}
  .rij-add.janee .jn{order:2;margin-left:auto}
}

/* ============================================================
   20 september 2026, de route van de eventmanager
   Alles hieronder is toegevoegd, er is niets gewijzigd. Nieuwe klassen dragen
   het voorvoegsel mw-, van medewerker, zodat ze niet botsen met wat er al
   staat zoals .stap, en ook niet met de rvdz- regels hierboven.
   ============================================================ */

/* De inhoudsopgave van de instructie, meelopend.
   Gemeten op 390 breed: de pagina is 7.422 pixels hoog, bijna negen schermen,
   en de acht chips stonden vast op 336 tot 524 pixels. Vanaf 525 pixels waren
   ze weg, dus over 6.898 van de 7.422 pixels was er geen inhoudsopgave meer.
   De 70 pixels zijn de hoogte van .top, die zelf al sticky is: 18 boven,
   34 logo, 18 onder. z-index 60 zodat die kopbalk er altijd overheen valt.
   Eén rij die zijwaarts schuift, want negen chips die afbreken maken de balk
   vier rijen hoog en dat eet het halve scherm op. */
.mw-inh{position:sticky;top:var(--mw-kop,70px);z-index:60;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.14)}
.mw-inh .wrap{display:flex;gap:8px;padding-top:8px;padding-bottom:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.mw-inh .wrap::-webkit-scrollbar{display:none}
.mw-inh a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
  color:#EDEBE7;text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.mw-inh a:hover{background:rgba(255,255,255,.12)}
.mw-inh a:focus-visible{outline:2px solid var(--sunburst);outline-offset:2px}
.mw-inh a.mw-hier{background:var(--orange);border-color:var(--orange);color:#fff}

/* Een woord dat we intern gebruiken en dat nergens werd uitgelegd. */
.mw-woord{margin:18px 0 4px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--slate3);border-radius:0 12px 12px 0;padding:14px 18px;max-width:70ch}
.mw-woord b{display:block;font-size:15px;margin-bottom:4px;color:var(--ink)}
.mw-woord span{color:var(--muted);font-size:14.5px;line-height:1.55}

/* Verwijzing binnen een lopende zin. */
.mw-verw{color:var(--ember);font-weight:600}

/* Raakvlakken onder 44 bij 44 op een telefoon.
   Gemeten voor: de chips waren 39,6 hoog, de knoppen in .knoprij 40,0 en de
   knop Openen op de medewerkerspagina 40,0. */
.mw-raak{min-height:44px;display:inline-flex;align-items:center}

/* De uitweg op het inlogscherm. Stond er niet: het scherm had nul links, dus
   wie hier zonder toegang kwam kon alleen de terugknop gebruiken. Hij staat er
   altijd, en licht op zodra er iets verstuurd is of de toegang wordt geweigerd. */
.mw-uitweg{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.mw-uitweg b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.mw-uitweg ul{margin:0 0 14px;padding-left:18px}
.mw-uitweg li{color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:6px}
.mw-uitweg-links{display:flex;gap:8px;flex-wrap:wrap}
.mw-uitweg-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;
  font-weight:600;font-size:13.5px;background:#fff}
.mw-uitweg-links a:hover{border-color:var(--ink)}
.mw-uitweg-links a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mw-uitweg.mw-open{background:var(--spark);border-radius:12px;padding:16px 18px;border-top:0;margin-top:18px}

/* Gemeten op 390 breed: het invoerveld was 43 hoog en de knop 42, allebei net
   onder de norm van 44. Dit zijn de twee dingen die je op dit scherm aanraakt. */
.mw-veld-hoog{min-height:44px}
.mw-knop-groot{min-height:44px;display:flex;align-items:center;justify-content:center}

/* Een adrespatroon met code=... erin is geen link. Stond er als een anker
   zonder adres, en dat leest als een kapotte link. */
.mw-patroon{color:var(--muted)!important;font-weight:600!important}

/* ================================================================
   20 september, het merk over de hele keten.
   Alles hieronder is toegevoegd. Er is niets veranderd aan de regels
   erboven, dus de klasse `stap` van de samensteller blijft met rust.
   Eigen prefix: mk-.

   Het logo was op negen pagina's vijf verschillende maten, en geen
   enkele was groter dan het bronbestand van 164 bij 40:
   hoe-het-werkt 156x38, klantpagina kop 156x38, klantpagina voet
   156x38 op dekking 0,8, index 139x34, intern 139x34, instructie
   139x34, mails 139x34, genodigden 139x34, voor-het-team 123x30,
   start 107x26, offerte 98x24 en 131x32, meeneemmuur 90x22 op
   dekking 0,9. Arie heeft vier reviewrondes achter elkaar gevraagd
   of het logo groter kon.

   Nu overal 46 hoog, dus 189 bij 46, en dat is groter dan de bron.
   De dekking staat overal op 1; dat kan, want het logo is wit met
   oranje en staat op elke pagina op een donkere ondergrond.
   ================================================================ */
:root{ --mk-logo:46px; }

/* De kopbalk blijft precies 70 hoog: 12 boven, 46 logo, 12 onder,
   in plaats van 18 + 34 + 18. Dat is geen toeval maar noodzaak:
   .rvdz-prijsbalk hangt op top:70px en .mw-inh op var(--mw-kop,70px).
   Wordt de balk hoger, dan schuiven die er half onder. */
.top{padding:12px 0}
.top .logo{height:var(--mk-logo)}

/* De invoervelden van de samensteller waren 43 hoog gemeten, een pixel onder
   de 44 die we aanhouden. Dit zet alleen de ondergrens; de opvulling en de
   rand erboven blijven zoals ze waren. */
.veld input,.veld select{min-height:44px}
.zoekbalk input{min-height:44px}

/* 6 okt: i-knop en pop-up bij de hapjesschalen (Arie) */
.hap-i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:8px;border-radius:50%;
  border:1.5px solid var(--orange);background:#fff;color:var(--orange);font:700 15px/1 Georgia,serif;font-style:italic;cursor:pointer;vertical-align:middle}
.hap-i:hover,.hap-i:focus-visible{background:var(--orange);color:#fff;outline:none}
.hap-pop{margin:auto;padding:0;border:0;max-height:calc(100dvh - 32px);overflow-y:auto;border-radius:var(--radius);width:min(460px,calc(100vw - 32px));overflow:hidden;box-shadow:0 24px 60px rgba(21,23,28,.35)}
.hap-pop::backdrop{background:rgba(21,23,28,.55)}
.hap-pop img{display:block;width:100%;height:auto;aspect-ratio:900/654;object-fit:cover}
.hap-pop-tekst{padding:20px 24px 22px}
.hap-pop h3{margin:0 0 10px;font-size:20px;color:var(--ink)}
.hap-pop ul{margin:0 0 18px;padding-left:20px;font-size:16px;line-height:1.55;color:var(--ink)}
.hap-sluit{font:600 15px/1 inherit;padding:11px 18px;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer}