/* Rekenaar Norvo · opmaak uit mockup D (ontwerp/D), 7 oktober 2026; Norvo-huisstijl sinds 7 oktober 2026.
   Huisstijl uit de bron (getnorvo.com src/styles/tokens.css en de Norvo-werfapp norvo.online): warm papier #fbfaf8, inkt #211f1a,
   dennengroen #1e5b3a (op donker #4ec27e), donkere vlakken #0b141a; koppen Switzer, tekst Inter; knoppen en velden 10 px rond.
   Drie zones: rail (links), berekening (midden: opdrachtkaart, stappen, toelichting, verder vragen), resultaatpaneel (rechts).
   De instellingen zijn een vaste weergave die de berekening en het paneel vervangt. */
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --g1:#fbfaf8;--g2:#f5f3ef;--g3:#f0ede7;--g4:#e5e1d8;--g5:#cdc7ba;--g6:#b3aca0;--g7:#8a8378;--g8:#6a645b;--g9:#56514a;--g10:#211f1a;
  --kaart:#ffffff;--merk:#1e5b3a;--merk-hover:#17492e;--merk-zacht:#e6efe6;--op-merk:#ffffff;--ai:#7c5716;--ai-zacht:#faefda;--fout:#a3271b;--donker:#0c2b1b;--op-donker:#fbfaf8;
  --n-vlak:#211f1a;--n-blok:#1e5b3a;
  --glans:rgba(251,250,248,.75);
  --kop:'Switzer','Inter',system-ui,sans-serif;--lees:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-knop:10px;
  --rail:56px;--midden:480px;
}
@media (prefers-color-scheme:dark){:root:not(.licht){--g1:#0b141a;--g2:#060b0f;--g3:#101c23;--g4:#1e2f38;--g5:#2c414c;--g6:#56646d;--g7:#7d8893;--g8:#a0a7b1;--g9:#c9ced4;--g10:#fbfaf8;--kaart:#101c23;--merk:#4ec27e;--merk-hover:#74d69b;--merk-zacht:#123d26;--op-merk:#0c2b1b;--ai:#e8bd62;--ai-zacht:#3a2e10;--fout:#ff8f82;--donker:#fbfaf8;--op-donker:#0b141a;--n-vlak:#fbfaf8;--n-blok:#4ec27e;--glans:rgba(251,250,248,.10);color-scheme:dark}}
:root.donker{--g1:#0b141a;--g2:#060b0f;--g3:#101c23;--g4:#1e2f38;--g5:#2c414c;--g6:#56646d;--g7:#7d8893;--g8:#a0a7b1;--g9:#c9ced4;--g10:#fbfaf8;--kaart:#101c23;--merk:#4ec27e;--merk-hover:#74d69b;--merk-zacht:#123d26;--op-merk:#0c2b1b;--ai:#e8bd62;--ai-zacht:#3a2e10;--fout:#ff8f82;--donker:#fbfaf8;--op-donker:#0b141a;--n-vlak:#fbfaf8;--n-blok:#4ec27e;--glans:rgba(251,250,248,.10);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{margin:0;background:var(--g1);color:var(--g9);font:400 14px/20px var(--lees);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:disabled{cursor:default}
a{color:var(--merk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,p,ul,ol,dl{margin:0}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-3px}
.ic.vol{fill:currentColor;stroke:none}
.ic.klein-ic{width:12px;height:12px}
.sr,#status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
:focus-visible{outline:2px solid var(--merk);outline-offset:2px}
.klein{font-size:13px;line-height:18px;color:var(--g8)}
.inkt{color:var(--g10)}
.foutregel{font-size:13px;line-height:18px;color:var(--fout)}

/* ---------- chips, knoppen ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:6px;font-size:12px;line-height:18px;font-weight:600;background:var(--g3);color:var(--g9);white-space:nowrap;vertical-align:middle}
.chip--merk{background:var(--merk-zacht);color:var(--merk)}
.chip--ai{background:var(--ai-zacht);color:var(--ai)}
.chip .x{margin:0 -2px 0 2px;color:var(--g8);display:inline-flex;cursor:pointer}
.chip .x:hover{color:var(--g10)}
.knop{height:40px;padding:0 16px;border-radius:var(--r-knop);background:var(--merk);color:var(--op-merk);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.knop:not(.knop--stil):not(.knop--rood):not(:disabled):hover{background:var(--merk-hover)}
.knop--36{height:36px}
.knop--stil{background:var(--g1);border:1px solid var(--g4);color:var(--g10)}
.knop--stil:hover{border-color:var(--g5)}
.knop--rood{background:var(--g1);border:1px solid var(--g4);color:var(--fout)}
.knop:disabled{background:var(--g3);color:var(--g6);border-color:var(--g3)}
.tekstknop{display:inline-flex;align-items:center;gap:4px;color:var(--g9);white-space:nowrap}
.tekstknop:hover{color:var(--g10)}
.tekstknop:disabled{color:var(--g6)}
.link{color:var(--merk);font-size:13px;line-height:18px;background:none;border:0;padding:0;cursor:pointer}
.link:hover{text-decoration:underline}
.link:disabled{color:var(--g6);cursor:default;text-decoration:none}
button.chip{cursor:pointer}
button.chip:hover{text-decoration:underline}

/* ---------- werkruimte ---------- */
.werk{display:grid;grid-template-columns:var(--rail) var(--midden) minmax(0,1fr);height:100vh;overflow:hidden;background:var(--g1)}
.werk > *{min-height:0;min-width:0}
body.rail-open{--rail:260px;--midden:440px}
@media (min-width:1400px){body{--midden:560px}body.rail-open{--midden:480px}}
body:not(.paneel-open) .werk,body.instellingen-open .werk,body.offerte-open .werk{grid-template-columns:var(--rail) minmax(0,1fr)}
body:not(.paneel-open) .paneel{display:none}
body.instellingen-open .midden,body.instellingen-open .paneel,body.offerte-open .midden,body.offerte-open .paneel,body.offerte-open .instellingen{display:none}
body:not(.instellingen-open) .instellingen{display:none}
body:not(.offerte-open) .offerte-weergave{display:none}
.topbalk,.segment{display:none}

/* ---------- rail ---------- */
.rail{background:var(--g2);border-right:1px solid var(--g4);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.rail-open-inhoud,.rail-dicht-inhoud{display:flex;flex-direction:column;flex:1;min-height:0}
body:not(.rail-open) .rail-open-inhoud{display:none}
body.rail-open .rail-dicht-inhoud{display:none}
.rail-kop{height:56px;display:flex;align-items:center;gap:8px;padding:0 8px 0 16px;flex:none}
/* Het Norvo-merk: lockup (merkteken + woord) van 18 px hoog, met de productnaam ernaast achter een dunne lijn. */
.merkregel{display:flex;align-items:center;gap:10px;min-width:0}
.n-lockup{height:18px;width:82px;flex:none;display:block}
.n-merk{width:22px;height:22px;flex:none;display:block}
.merkregel .product{font:500 15px/20px var(--kop);color:var(--g9);white-space:nowrap;padding-left:10px;border-left:1px solid var(--g4);letter-spacing:-.005em}
.rail-titel{flex:1}
.ikoonknop{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--g8);flex:none}
.ikoonknop:hover{background:var(--g3);color:var(--g10)}
.rail .nieuw{margin:0 12px;height:36px;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--kaart);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--g10);font-weight:600;flex:none}
.rail-zoek{margin:8px 12px 0;max-width:none}
.rail-lijst{flex:1;overflow:auto;padding:16px 12px;display:flex;flex-direction:column;gap:2px;min-height:0}
.rail-groep{font-size:12px;line-height:16px;color:var(--g8);padding:0 12px;margin:0 0 4px}
.rail-groep:not(:first-child){margin-top:16px}
.rail-rij{display:flex;align-items:center;gap:4px;width:100%;padding:0 4px 0 12px;border-radius:6px;min-height:48px;position:relative}
.rail-rij:hover,.rail-rij:focus-within{background:var(--g3)}
.rail-rij.is-actief{background:var(--g3)}
.rail-rij > button.laad{flex:1;min-width:0;padding:8px 0;display:block}
.rail-rij b{display:block;font-weight:400;color:var(--g10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-rij span.sub{display:block;font-size:13px;line-height:18px;color:var(--g8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-rij .rail-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;min-width:0}
.rail-rij .rail-chips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip--grijs{background:var(--g3);color:var(--g8);font-weight:400}
.rail-rij .meer{opacity:0}
.rail-rij:hover .meer,.rail-rij:focus-within .meer,.rail-rij.is-actief .meer{opacity:1}
.rail-leeg{padding:8px 12px}
.rail-leeg b{display:block;font-weight:400;color:var(--g10)}
.rail-voet{padding:8px 12px 16px;border-top:1px solid var(--g4);display:flex;flex-direction:column;gap:2px;flex:none}
.rail-voet button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:6px;color:var(--g9);line-height:20px}
.rail-voet button:hover{background:var(--g3);color:var(--g10)}
.rail-voet button span{min-width:0}
.rail-dicht-inhoud{align-items:center;padding:0 0 16px}
.rail-dicht-inhoud .rail-kop{padding:0;justify-content:center;width:100%}
.rail-dicht-inhoud .ikoonknop{margin-top:8px}
.rail-dicht-inhoud .onder{margin-top:auto}

/* ---------- middenkolom: berekening ---------- */
.midden{display:flex;flex-direction:column;min-width:0;background:var(--g1);position:relative}
.naar-laatste{position:absolute;right:24px;bottom:24px;z-index:2;box-shadow:0 4px 16px rgba(33,31,26,.12)}
.midden-kop{height:48px;display:flex;align-items:center;gap:8px;padding:0 24px;border-bottom:1px solid var(--g4);flex:none}
.midden-titel{font-weight:600;color:var(--g10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.leeg .midden-kop{border-bottom:0}
.stroom{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:24px;min-height:0}

.banner{border:1px solid var(--g4);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.banner b{display:block;font-weight:600;color:var(--g10)}
.banner .knop{align-self:flex-start}
.banner-knoppen{display:flex;flex-wrap:wrap;gap:8px}

/* leeg blok: kop + opdrachtkaart gecentreerd; na de klik wordt het blok de volle kolom en blijft alleen de kaart over */
.leeg-blok{width:100%;display:flex;flex-direction:column}
body.leeg .leeg-blok{width:720px;max-width:100%;margin:0 auto;padding-top:calc(30vh - 24px)}
.leeg-blok h1{font:600 30px/36px var(--kop);letter-spacing:-.02em;color:var(--g10)}
.leeg-blok .regel16{font-size:16px;line-height:24px;color:var(--g8);margin:8px 0 24px}
body:not(.leeg) .leeg-blok > :not(.opdracht){display:none}
.voorbeelden{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.voorbeelden button{height:36px;max-width:100%;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--kaart);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;color:var(--g9);min-width:0}
.voorbeelden button:hover{border-color:var(--g5);color:var(--g10)}
.voorbeelden button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voorbeelden button .x{color:var(--g7);display:inline-flex}
.leeg-uitleg{margin-top:24px;display:flex;flex-direction:column;gap:2px}

/* opdrachtkaart */
.opdracht{border:1px solid var(--g4);border-radius:16px;background:var(--kaart);box-shadow:0 1px 2px rgba(33,31,26,.04)}
.opdracht:focus-within{border-color:var(--g5)}
.opdracht-open{padding:16px;display:flex;flex-direction:column}
.opdracht .adresrij{display:flex;align-items:center;gap:8px;height:40px;border-bottom:1px solid var(--g4);color:var(--g8)}
.opdracht .adresrij input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:16px;color:var(--g10)}
.opdracht input::placeholder,.opdracht textarea::placeholder{color:var(--g7)}
.opdracht textarea{display:block;width:100%;min-height:72px;max-height:288px;border:0;background:none;padding:12px 0 0;font-size:16px;line-height:24px;color:var(--g10);resize:none}
.opdracht .adresrij input:focus-visible,.opdracht textarea:focus-visible{outline:none}
.opdracht .asbest{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0 0;border-top:1px solid var(--g4);margin-top:12px}
.opdracht .asbest .vraag{color:var(--g9)}
.keuze{display:inline-flex;gap:2px;padding:2px;background:var(--g2);border-radius:6px}
.keuze label{position:relative;display:inline-flex}
.keuze input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:4px;color:var(--g9);cursor:pointer;white-space:nowrap}
.keuze input:checked + span{background:var(--kaart);color:var(--g10);font-weight:600;box-shadow:0 0 0 1px var(--g4)}
.keuze input:focus-visible + span{outline:2px solid var(--merk);outline-offset:2px}
.opdracht .voet{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}
.opdracht .voet .status-rust{font-size:13px;line-height:18px;color:var(--g8);min-height:18px;flex:1;min-width:0}
.opdracht-dicht{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 8px 8px 16px}
.opdracht-dicht .samenvatting{flex:1;min-width:0;color:var(--g10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opdracht-dicht .samenvatting .stil{color:var(--g8)}
.opdracht.is-dicht .opdracht-open{display:none}
.opdracht:not(.is-dicht) .opdracht-dicht{display:none}
/* De dichte kaart (samenvatting, Wijzig of Stop) blijft bovenaan staan terwijl de kolom scrolt: Stop is tijdens stap 3 altijd in beeld.
   Het blok rond de kaart plakt (de kaart zelf heeft geen ruimte binnen haar blok) en dekt de bovenrand van de kolom af. */
/* top -24px: de plakgrens telt de 24 px padding van de kolom mee; zo dekt het blok (met zijn eigen 24 px) de bovenrand volledig af. */
body:not(.leeg) .leeg-blok{position:sticky;top:-24px;z-index:3;background:var(--g1);margin-top:-24px;padding-top:24px;padding-bottom:12px;margin-bottom:-12px}

/* stappen (trail) */
.trail{display:flex;flex-direction:column;gap:8px}
.trail-kop{display:flex;align-items:center;gap:8px;min-height:32px;color:var(--g10);width:100%}
.trail-kop .duur{margin-left:auto;font-size:13px;color:var(--g8)}
.trail.is-dicht .stap,.trail.is-dicht .trail-beeld{display:none}
.trail-stappen{display:flex;flex-direction:column;gap:8px}
/* meetbeeld in de stappen: groot op de volle kolombreedte zodra de meting binnen is; ingeklapt een miniatuur van 96 px in de kop */
.trail-beeld{margin:4px 0}
.trail-beeld-groot{width:100%}
.trail-mini{width:96px;flex:none;border-radius:6px;overflow:hidden}
.trail-mini.meetbeeld{width:96px;height:96px;border-radius:6px} /* wint van .meetbeeld{width:100%} uit meetbeeld.css */
.trail-mini .mb-maten,.trail-mini .mb-ander,.trail-mini .mb-pin{display:none}
.trail-mini .mb-contour{stroke-width:2}
.trail-kop .trail-mini-slot{display:inline-flex;flex:none}
.stap{display:grid;grid-template-columns:24px minmax(0,1fr) auto;row-gap:2px;min-height:32px;align-items:start;padding-top:6px}
.stap .ic{margin-top:2px}
.stap .label{color:var(--g10)}
.stap .detail{grid-column:2;font-size:13px;line-height:18px;color:var(--g8)}
.stap .detail .link{margin-left:8px}
.stap .duur{font-size:13px;line-height:20px;color:var(--g8);padding-left:16px;white-space:nowrap}
.stap.is-klaar .ic{color:var(--merk)}
.stap.is-wacht .ic,.stap.is-over .ic{color:var(--g7)}
.stap.is-fout .ic{color:var(--fout)}
.stap.is-waarschuwing .ic{color:var(--g10)}
.stap.is-wacht .label{color:var(--g8)}
.stap.is-fout .label{color:var(--fout)}
.stap.is-actief .label{background:linear-gradient(90deg,var(--g10) 0 35%,var(--g6) 50%,var(--g10) 65% 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glans 2s linear infinite}
.spinner{animation:draai 1s linear infinite;color:var(--merk)}
.posten{grid-column:2;font-size:13px;line-height:18px;color:var(--g9);display:flex;flex-direction:column;gap:2px;margin-top:4px}
.posten .eerder{margin-top:2px;font-size:13px}

/* toelichting */
.toelichting{display:flex;flex-direction:column;gap:8px}
.toelichting-kop{font-size:12px;line-height:16px;color:var(--g8);font-weight:400}
.bronnen{display:flex;flex-wrap:wrap;gap:8px}
.strook{background:var(--g2);border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--g9)}
.strook .tekstknop{color:var(--merk)}
.toelichting .punten{margin:8px 0 0;padding-left:20px;font-size:16px;line-height:24px;color:var(--g10);display:flex;flex-direction:column;gap:16px}
.toelichting .punten:empty{display:none}
.caret{display:inline-block;width:8px;height:14px;background:var(--g10);vertical-align:-2px;margin-left:2px;animation:knipper 1s steps(1) infinite}
.lijstje h4{font-size:13px;line-height:18px;font-weight:600;color:var(--g10);margin:16px 0 8px}
.lijstje ul{padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--g9)}
.acties{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.uitleg-staat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* verder vragen: het gesprek onder de toelichting en het invoerveld onderaan de kolom (het patroon van elke AI-app) */
.gesprek{display:flex;flex-direction:column;gap:24px;padding-top:24px;border-top:1px solid var(--g4)}
.beurt{display:flex;flex-direction:column;gap:12px}
.beurt-vraag{align-self:flex-end;max-width:88%;background:var(--g3);color:var(--g10);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:15px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere}
.beurt-antwoord{display:flex;flex-direction:column;gap:12px;min-width:0}
.beurt-tekst{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px;color:var(--g10)}
.beurt-tekst:empty{display:none}
.beurt-staat{display:flex;align-items:center;gap:8px;min-height:24px;color:var(--g8);font-size:13px;line-height:18px}
.beurt-staat .label{color:var(--g10);font-size:14px}
.beurt-staat.is-actief .label{background:linear-gradient(90deg,var(--g10) 0 35%,var(--g6) 50%,var(--g10) 65% 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glans 2s linear infinite}
.beurt-staat.is-fout,.beurt-staat.is-fout .label{color:var(--fout)}
.beurt-staat .ic{color:var(--g7)}
.beurt-staat.is-actief .ic{color:var(--merk)}
.wijziging{border:1px solid var(--g4);border-radius:12px;background:var(--kaart);padding:16px;display:flex;flex-direction:column;gap:12px}
.wijziging-kop{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.wijziging-kop .chip{align-self:center}
.wijziging-kop b{font:600 22px/28px var(--kop);letter-spacing:-.01em;color:var(--g10)}
.wijziging-kop .klein{color:var(--g8)}
.wijziging-kop .verschil{margin-left:auto;font-weight:600;white-space:nowrap;color:var(--g10)}
.wijziging-rijen{display:flex;flex-direction:column}
.wijziging-rijen .r{display:flex;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--g4)}
.wijziging-rijen .r:first-child{border-top:0;padding-top:0}
.wijziging-rijen .l{flex:1;min-width:0;color:var(--g10)}
.wijziging-rijen .l small{display:block;font-size:13px;line-height:18px;color:var(--g8)}
.wijziging-rijen .v{white-space:nowrap;color:var(--g10)}
.wijziging-rijen .som .l,.wijziging-rijen .som .v{font-weight:600}
.wijziging .info{font-size:13px;line-height:18px;color:var(--g8)}
.wijziging .info.fout{color:var(--fout)}
.wijziging .knoppen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vervolg{flex:none;padding:12px 24px 16px;background:var(--g1);position:relative;z-index:2}
.vervolg::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;background:linear-gradient(to bottom,transparent,var(--g1));pointer-events:none}
.vervolg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vervolg-chips:empty{display:none}
.vervolg-chips button{height:32px;max-width:100%;border:1px solid var(--g4);border-radius:999px;background:var(--kaart);padding:0 12px;color:var(--g9);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vervolg-chips button:hover{border-color:var(--g5);color:var(--g10)}
.vervolg-veld{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--g4);border-radius:16px;background:var(--kaart);padding:8px 8px 8px 16px;box-shadow:0 1px 2px rgba(33,31,26,.04),0 6px 16px -8px rgba(33,31,26,.10)}
.vervolg-veld:focus-within{border-color:var(--g5)}
.vervolg-veld textarea{flex:1;min-width:0;border:0;background:none;padding:6px 0;font-size:16px;line-height:24px;color:var(--g10);resize:none;max-height:168px;min-height:36px}
.vervolg-veld textarea::placeholder{color:var(--g7)}
.vervolg-veld textarea:focus-visible{outline:none}
.stuur{width:36px;height:36px;border-radius:10px;background:var(--merk);color:var(--op-merk);display:inline-flex;align-items:center;justify-content:center;flex:none}
.stuur:not(:disabled):hover{background:var(--merk-hover)}
.stuur:disabled{background:var(--g3);color:var(--g6)}
.stuur .ic{stroke-width:2}
.stuur.is-stop{background:var(--g10);color:var(--g1)}
.vervolg-hint{margin-top:6px;font-size:12px;line-height:16px;color:var(--g8);padding-left:4px}
body.met-vervolg .naar-laatste{bottom:112px}

.prijs-compact{display:none}

/* ---------- paneel ---------- */
.paneel{border-left:1px solid var(--g4);display:flex;flex-direction:column;min-width:0;background:var(--g1);container-type:inline-size;container-name:paneel}
.acties-meer{display:none}
.acties-breed{display:contents}
.paneel-kop{height:48px;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--g4);flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.paneel-kop::-webkit-scrollbar{display:none}
.acties-midden{display:contents}
.tabs{display:flex;gap:12px;height:48px;flex:none}
.tabs button{height:48px;color:var(--g8);border-bottom:2px solid transparent;padding:2px 0 0;white-space:nowrap}
.tabs button:hover{color:var(--g10)}
.paneel[data-tab=overzicht] [data-tab-knop=overzicht],.paneel[data-tab=werkblad] [data-tab-knop=werkblad],.paneel[data-tab=materiaal] [data-tab-knop=materiaal],.paneel[data-tab=kenmerken] [data-tab-knop=kenmerken]{color:var(--g10);font-weight:600;border-color:var(--merk)}
.paneel-acties{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.paneel-inhoud{flex:1;overflow:auto;padding:0 24px 24px;min-height:0}
.tab{display:none}
.paneel[data-tab=overzicht] .tab--overzicht,.paneel[data-tab=werkblad] .tab--werkblad,.paneel[data-tab=materiaal] .tab--materiaal,.paneel[data-tab=kenmerken] .tab--kenmerken{display:block}
.sectie{padding:32px 0;border-top:1px solid var(--g4)}
.sectie:first-child{border-top:0;padding-top:24px}
.sectie:empty{display:none}
.sectie-kop{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.sectie-kop h3{font-size:14px;line-height:20px;font-weight:600;color:var(--g10);white-space:nowrap}
.sectie-kop .rechts{margin-left:auto;font-size:13px;line-height:18px;color:var(--g8);text-align:right}
.sectie-kop + .klein{margin:-4px 0 16px}

.prijskaart{display:flex;flex-direction:column;gap:8px}
.prijskaart .titel{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--g10);flex-wrap:wrap}
.prijs{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.prijs b{font:700 48px/52px var(--kop);letter-spacing:-.02em;color:var(--g10)}
.prijs span{color:var(--g8)}
.prijs .oud{text-decoration:line-through;font-size:14px;color:var(--g8)}
.prijs-onder{color:var(--g9)}
.caveat{font-size:13px;line-height:18px;color:var(--g8)}
.tariefchips{display:flex;flex-wrap:wrap;gap:8px}

.tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--g4);margin-top:24px}
.tegel{min-width:0}
.tegel small{display:block;font-size:12px;line-height:16px;color:var(--g8)}
.tegel b{display:block;font:600 20px/24px var(--kop);color:var(--g10);margin-top:4px}
.tegel span{display:block;font-size:13px;line-height:18px;color:var(--g8)}
.balk{height:6px;border-radius:3px;background:var(--g3);display:flex;overflow:hidden;margin-top:24px}
.balk i{display:block;height:100%}
.balk .d{background:var(--merk)}
.balk .a{background:var(--ai)}
.legende{font-size:13px;line-height:18px;color:var(--g8);margin-top:8px}

.geld{display:flex;flex-direction:column;gap:8px}
.geld .r{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(96px,1fr) 84px 40px;gap:16px;align-items:center;min-height:24px}
.geld .n{color:var(--g10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;min-width:0}
.geld .n em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.geld .b{height:8px;border-radius:4px;background:var(--g3);overflow:hidden}
.geld .b i{display:block;height:100%;background:var(--merk);border-radius:4px}
.geld .b i.ai{background:var(--ai)}
.geld .b i.rest{background:var(--g5)}
.geld .g{text-align:right;color:var(--g10);white-space:nowrap}
.geld .p{text-align:right;font-size:13px;color:var(--g8)}

.watals{display:flex;flex-direction:column}
.watals .r{display:flex;align-items:center;gap:16px;min-height:36px;padding:8px 0;border-top:1px solid var(--g4)}
.watals .r:first-child{border-top:0}
.watals .l{flex:1;min-width:0;color:var(--g9)}
.watals .v{font-weight:600;color:var(--g10);white-space:nowrap;margin-left:auto}

.kosten{display:flex;flex-direction:column;max-width:560px}
.kosten .r{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--g4)}
.kosten .r:first-child{border-top:0}
.kosten .l{color:var(--g9)}
.kosten .v{color:var(--g10);white-space:nowrap}
.kosten .som{border-top:1px solid var(--g4)}
.kosten .som .l,.kosten .som .v{font-weight:600;color:var(--g10)}

/* ---------- tabellen ---------- */
.tabel{font-variant-numeric:tabular-nums}
.tabel-kop{display:grid;grid-template-columns:var(--kol);gap:8px;font-size:12px;line-height:16px;color:var(--g8);padding:0 0 8px;border-bottom:1px solid var(--g4)}
.tabel-kop .g{text-align:right}
.fase{display:flex;align-items:center;gap:16px;height:36px;padding-top:4px;color:var(--g10);font-weight:600;width:100%}
.fase span{font-weight:400;font-size:13px;color:var(--g8);white-space:nowrap}
.fase span.som{margin-left:auto}
.fase .ic{display:inline-block;color:var(--g7);flex:none;margin-left:-8px}
.fase.is-dicht .ic{transform:rotate(-90deg)}
.fase.is-dicht + .fase-rijen{display:none}
.rij{display:grid;grid-template-columns:var(--kol);gap:8px;padding:8px 0;border-bottom:1px solid var(--g4);align-items:start}
.rij:hover{background:var(--g2)}
.rij .n{color:var(--g10);min-width:0}
.rij .n .naam{display:flex;align-items:flex-start;gap:8px}
.rij .n .naam .naamtekst{flex:1 1 auto;min-width:0}
.rij .n .naam .naamtekst .chip{margin-left:2px}
.rij .n .naam > .ic{flex:none;margin-top:2px}
.rij .n .naam-knop{display:block;width:100%;color:inherit}
.rij .n .naam-knop .ic{color:var(--g7)}
.rij .n small{display:block;font-size:13px;line-height:18px;color:var(--g8)}
.rij .g{text-align:right;white-space:nowrap;color:var(--g10)}
.rij .g .chip{vertical-align:top}
.rekenpad{grid-column:1/-1;font-size:13px;line-height:18px;color:var(--g9);display:flex;flex-direction:column;gap:2px;padding:4px 0 0 20px}
.kol-werk{--kol:minmax(150px,1fr) 76px 76px 76px 76px 76px 96px}
.kol-mat{--kol:minmax(150px,1fr) 88px 76px 76px 76px 96px}
.kol-eq{--kol:minmax(150px,1fr) 88px 76px 76px}
.afval{display:flex;flex-direction:column;gap:8px;margin-top:16px;color:var(--g10)}
.afval h4{font-size:13px;line-height:18px;font-weight:600;color:var(--g10)}
.skelet-rij{display:grid;grid-template-columns:var(--kol);gap:8px;padding:12px 0;border-bottom:1px solid var(--g4)}

/* ---------- kenmerken en meting ---------- */
.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.veld label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--g8);margin-bottom:4px}
.veld .in{height:36px;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);display:flex;align-items:center;padding:0 12px;color:var(--g10)}
.veld .in:focus-within{border-color:var(--g5)}
.veld .in.is-fout,.veld .in.is-fout:focus-within{border-color:var(--fout)}
.veld .in input,.veld .in select{border:0;background:none;width:100%;min-width:0;padding:0;color:var(--g10);height:34px}
.veld .in:has(input:disabled){background:var(--g2)}
.veld .in input:disabled{color:var(--g7)}
.veld .in input:focus-visible,.veld .in select:focus-visible{outline:none}
.veld .in .eenheid{color:var(--g8);flex:none;padding-left:8px}
.veld .terug,.veld .veld-hint{display:block;margin-top:4px}
.plakbalk{position:sticky;bottom:0;margin:24px -24px -24px;padding:16px 24px;background:var(--g1);border-top:1px solid var(--g4);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plakbalk .tekst{color:var(--g10);flex:1}
.versie-balk{position:static;margin:0;padding:12px 24px;border-top:0;border-bottom:1px solid var(--g4);background:var(--g2);flex:none}
@media (max-width:899px){.versie-balk{padding:12px 16px}}
.meetbeeld-wrap{max-width:640px;margin:16px 0 24px}
.meting{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.meting .f small{display:block;font-size:12px;line-height:16px;color:var(--g8)}
.meting .f b{display:block;font:600 20px/24px var(--kop);color:var(--g10);margin-top:4px}
.meting .f span{display:block;font-size:13px;line-height:18px;color:var(--g8)}

/* ---------- skelet ---------- */
.skelet{background:var(--g3);border-radius:6px;position:relative;overflow:hidden;display:block}
.skelet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--glans),transparent);transform:translateX(-100%);animation:schuif 2s linear infinite}
.skelet-prijs{display:flex;flex-direction:column;gap:8px}
.skelet-tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--g4);margin-top:24px}
.skelet-geld{display:flex;flex-direction:column;gap:16px}
.skelet-geld .r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(96px,1fr) 84px 40px;gap:16px;align-items:center}

/* ---------- instellingen ---------- */
/* Ook een container "paneel": de gestapelde tabelrijen (< 640 px) gelden zo ook voor de datatabel op de telefoon. */
.instellingen{display:flex;flex-direction:column;min-width:0;overflow:auto;background:var(--g1);container-type:inline-size;container-name:paneel}
.inst-kop{height:48px;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--g4);flex:none}
.inst-kop h2{font-size:14px;line-height:20px;font-weight:600;color:var(--g10)}
.inst-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:24px;align-items:start}
.inst-lijst{display:flex;flex-direction:column;gap:2px;position:sticky;top:24px}
.inst-lijst a{display:block;padding:8px 12px;border-radius:6px;color:var(--g9)}
.inst-lijst a:hover{background:var(--g2);text-decoration:none;color:var(--g10)}
.inst-lijst a.is-actief{background:var(--g3);color:var(--g10);font-weight:600}
.inst-inhoud{display:flex;flex-direction:column;gap:48px;min-width:0}
.inst-sectie{max-width:720px;scroll-margin-top:24px}
.inst-sectie--breed{max-width:none}
/* Op je andere toestellen: QR-code links (altijd zwart op wit, ook in donker), de link en de kopieerknop rechts. */
.koppel{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:12px}
.koppel-qr{background:#fff;padding:8px;border:1px solid var(--g4);border-radius:8px;line-height:0}
.koppel-qr img,.koppel-qr canvas{width:168px;height:168px;display:block}
.koppel-rechts{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.koppel-link{max-width:100%;padding:8px 10px;border:1px solid var(--g4);border-radius:8px;background:var(--g2);color:var(--g9);font:13px/18px ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.inst-sectie > .sectie-kop{margin-bottom:4px}
.inst-sectie .groep{margin-top:24px}
.inst-sectie .groep h4{font-size:14px;line-height:20px;font-weight:600;color:var(--g10);margin-bottom:8px}
.vakken{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.vakken button{height:36px;padding:0 12px;border-radius:var(--r-knop);border:1px solid var(--g4);background:var(--g1);color:var(--g9);white-space:nowrap}
.vakken button.is-actief{background:var(--g3);border-color:var(--g3);color:var(--g10);font-weight:600}
.zoek{height:36px;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--g8);max-width:360px}
.zoek input{border:0;background:none;flex:1;min-width:0;color:var(--g10);padding:0}
.zoek input:focus-visible{outline:none}
.post{border-bottom:1px solid var(--g4);padding:8px 0}
.post .kop{display:flex;align-items:center;gap:16px;width:100%}
.post .kop > span{min-width:0;flex:1}
.post .kop b{display:block;font-weight:400;color:var(--g10)}
.post .kop small{display:block;font-size:13px;line-height:18px;color:var(--g8)}
.post .kop .ic{margin-left:auto;color:var(--g7)}
.post .open{padding:16px 0 8px 24px;display:flex;flex-direction:column;gap:16px}
.post .norm{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.post .norm .in{height:36px;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);display:inline-flex;align-items:center;padding:0 12px;color:var(--g10);width:96px}
.post .norm .in input{border:0;background:none;width:100%;padding:0;text-align:right}
.kol-data{--kol:minmax(150px,1fr) 64px 64px 96px 64px 180px}
.kol-data .rij{border-bottom:0;padding:4px 0}
.kol-data .in{height:32px;border:1px solid var(--g4);border-radius:8px;background:var(--g1);display:inline-flex;align-items:center;padding:0 8px;color:var(--g10);width:76px}
.kol-data .in input{border:0;background:none;width:100%;padding:0;text-align:right}
.kol-data .g .link{margin-left:8px}
.post-leeg{padding:16px 0;display:flex;flex-direction:column;gap:4px}

/* ---------- offerte: formulier links, document rechts ---------- */
.offerte-weergave{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--g2)}
.off-kop{background:var(--g1)}
.off-kop h2{white-space:nowrap}
.off-kop #off-staat{white-space:nowrap}
.off-nog{margin-left:auto;font-size:13px;line-height:18px;color:var(--fout);font-weight:600;white-space:nowrap}
.off-nog.is-klaar{color:var(--merk)}
.off-segment{display:none}
.off-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(380px,520px) minmax(0,1fr)}
body.off-bevroren .off-body{grid-template-columns:minmax(0,1fr)}
.off-form{overflow:auto;padding:24px;background:var(--g1);border-right:1px solid var(--g4);min-width:0}
.off-stappen{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding:4px;background:var(--g2);border-radius:6px;margin-bottom:24px}
.off-stappen a{padding:6px 10px;font-size:13px;line-height:18px}
.off-stappen a.is-actief{background:var(--g1)}
.off-nog-lijst{border:1px solid var(--fout);border-radius:12px;padding:12px 16px;margin-bottom:24px;display:flex;flex-direction:column;gap:4px}
.off-nog-lijst b{color:var(--fout);font-weight:600;display:block;margin-bottom:4px}
.off-nog-lijst button{color:var(--g10);text-align:left;font-size:13px;line-height:18px;padding:2px 0}
.off-nog-lijst button:hover{color:var(--fout)}
.off-nog-lijst button::before{content:"· ";color:var(--fout)}
.off-velden{display:flex;flex-direction:column;gap:40px}
.off-velden .inst-sectie{max-width:none}
.off-velden .velden{grid-template-columns:repeat(2,minmax(0,1fr))}
.off-velden .veld--breed{grid-column:1/-1}
.off-velden textarea{display:block;width:100%;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);padding:8px 12px;color:var(--g10);resize:vertical;min-height:72px;line-height:20px}
.off-velden textarea:focus-visible{outline:none;border-color:var(--g5)}
.off-velden textarea.lang{min-height:320px;font-size:13px;line-height:18px}
.off-vink{display:flex;align-items:flex-start;gap:8px;color:var(--g10);padding:4px 0;cursor:pointer}
/* Een vinkje in een .veld is geen veldlabel: vakje en tekst links naast elkaar (de regel .veld label zet ze anders uit elkaar). */
.veld .off-vink{justify-content:flex-start;align-items:flex-start;font-size:14px;line-height:20px;color:var(--g10);margin-bottom:0}
.off-vink input{margin:3px 0 0;accent-color:var(--merk);flex:none}
.off-vink small{display:block;font-size:13px;line-height:18px;color:var(--g8)}
.off-vinken{display:flex;flex-direction:column;gap:2px}
.off-groep{margin-top:24px}
.off-groep h4{font-size:14px;line-height:20px;font-weight:600;color:var(--g10);margin-bottom:8px}
.off-vast{font-size:12px;line-height:16px;color:var(--g8);margin-left:8px;font-weight:400}
.off-regels{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.off-regels .hs{display:flex;justify-content:space-between;gap:16px;font-weight:600;color:var(--g10);padding:16px 0 4px;border-bottom:1px solid var(--g4)}
.off-regels .hs:first-child{padding-top:0}
.off-regels .hs span{font-weight:400;font-size:13px;color:var(--g8);white-space:nowrap}
.off-regel{display:grid;grid-template-columns:36px minmax(0,1fr) 72px;gap:4px 8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--g4)}
.off-regel .nr{font-size:13px;color:var(--g8)}
.off-regel .in{height:36px;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);display:flex;align-items:center;padding:0 12px;color:var(--g10);min-width:0}
.off-regel .in:focus-within{border-color:var(--g5)}
.off-regel .in input{border:0;background:none;width:100%;min-width:0;padding:0;color:var(--g10)}
.off-regel .in input:focus-visible{outline:none}
.off-regel .ai-punt{width:8px;height:8px;border-radius:50%;background:var(--ai);display:inline-block;margin-left:8px;flex:none}
.off-regel .tot{text-align:right;color:var(--g10);white-space:nowrap}
.off-regel .onder{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;line-height:18px;color:var(--g8)}
.off-regel .onder select{height:28px;border:1px solid var(--g4);border-radius:6px;background:var(--g1);color:var(--g10);padding:0 8px}
.off-regel .onder select:disabled{color:var(--g7);background:var(--g2)}
.off-regel .onder .off-vink{padding:0;font-size:13px}
.off-regel.is-optie{background:var(--g2);border-radius:6px;padding-left:8px;padding-right:8px;margin:0 -8px}
.off-afronding{margin-top:12px}
.off-lijst{display:flex;flex-direction:column;gap:4px}
.off-lijst .r{display:flex;gap:8px;align-items:flex-start}
.off-lijst .r .in{flex:1;min-width:0;border:1px solid var(--g4);border-radius:var(--r-knop);background:var(--g1);padding:0 12px;display:flex;align-items:center;min-height:36px}
.off-lijst .r .in input{border:0;background:none;width:100%;padding:0;color:var(--g10)}
.off-lijst .r .in input:focus-visible{outline:none}
.off-lijst .r .in:focus-within{border-color:var(--g5)}
.off-lijst .r .ikoonknop{margin-top:2px}
.off-lijst .link{align-self:flex-start;margin-top:4px}
.off-doc-wrap{overflow:auto;padding:24px;min-width:0;min-height:0}
.off-doc-zoom{transform-origin:0 0;width:210mm}
/* Het document: A4 met marges van 15 mm (spec deel 3); op het scherm één doorlopend blad, bij afdrukken de @page-regel uit #off-page-css.
   Maten (opdracht 7 okt): tabel 9,5 pt, voorwaarden 8,5 pt in twee kolommen, 6 mm wit tussen de blokken. */
.doc{width:210mm;min-height:297mm;padding:15mm;margin:0;background:#fff;color:#000;font:10pt/1.32 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 4px 24px rgba(33,31,26,.14);-webkit-font-smoothing:auto}
.doc *{box-sizing:border-box}
.doc h1{font:700 15pt/1.2 Arial,Helvetica,sans-serif;margin:0 0 1.5mm;color:#000}
.doc h2{font:700 10.5pt/1.3 Arial,Helvetica,sans-serif;margin:0 0 1.2mm;color:#000;break-after:avoid}
.doc p{margin:0 0 1.2mm}
.doc p:last-child{margin-bottom:0}
.doc ul,.doc ol{margin:0;padding-left:5mm}
.doc li{margin:0 0 0.3mm}
.doc .kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10mm;margin-bottom:6mm}
.doc .logo{height:18mm;width:auto;max-width:80mm;display:block;object-fit:contain}
.doc .naamgroot{font:700 14pt/1.2 Arial,Helvetica,sans-serif}
.doc .bedrijf{text-align:right;font-size:8.5pt;line-height:1.4;color:#222}
.doc .bedrijf b{font-size:10.5pt;color:#000}
.doc .partijen{display:flex;justify-content:space-between;align-items:flex-start;gap:10mm;margin-bottom:6mm}
.doc .klant{min-width:60mm;line-height:1.4}
.doc .label{font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;color:#555;margin-bottom:1mm}
.doc table.meta{border-collapse:collapse;font-size:9.5pt}
.doc table.meta td{padding:0.5mm 0 0.5mm 6mm;vertical-align:top;border-bottom:0.5pt solid #ddd}
.doc table.meta td:first-child{color:#444;padding-left:0}
.doc .titel{font-weight:700}
.doc .omschrijving{margin:0}
.doc table.posttabel{width:100%;table-layout:fixed;border-collapse:collapse;font-size:9.5pt;line-height:1.28;margin:4mm 0 0}
.doc .posttabel th{text-align:left;font-weight:700;border-bottom:0.5pt solid #000;padding:0.8mm 1mm;vertical-align:bottom;font-size:8pt;line-height:1.2;white-space:normal}
.doc .posttabel td{padding:0.8mm 1mm;vertical-align:top;border-bottom:0.5pt solid #d0d0d0;overflow-wrap:anywhere}
.doc .posttabel .g{text-align:right;white-space:nowrap}
.doc .posttabel th.g{text-align:right;white-space:normal}
.doc .posttabel .nr{white-space:nowrap;color:#333}
/* Eenheid staat links naast de rechts uitgelijnde hoeveelheid: wat meer lucht ertussen. */
.doc .posttabel th:nth-child(4),.doc .posttabel td:nth-child(4){padding-left:2.2mm}
.doc .posttabel tr.hoofdstuk td{font-weight:700;border-top:0.5pt solid #000;border-bottom:0;padding-top:1.8mm}
.doc .posttabel tr.sub td{font-weight:700;border-bottom:0.5pt solid #000;padding-bottom:1.2mm}
.doc .posttabel tr.optie td{color:#333;font-style:italic}
.doc .posttabel tr{break-inside:avoid}
.doc .posttabel thead{display:table-header-group}
.doc table.totalen{margin-left:auto;width:88mm;border-collapse:collapse;margin-top:2mm;break-inside:avoid}
.doc .totalen td{padding:1mm 1.5mm;border-bottom:0.5pt solid #d0d0d0}
.doc .totalen td.g{text-align:right;white-space:nowrap}
.doc .totalen tr.eind td{font-weight:700;font-size:12pt;border-top:0.5pt solid #000;border-bottom:1pt solid #000;padding:1.6mm 1.5mm}
.doc .onder-tabel{margin-top:3mm}
.doc .klein{font-size:8.5pt;line-height:1.3;color:#333}
/* Witruimte tussen de blokken: 6 mm. Een blok breekt niet over twee pagina's, behalve de lange opsomming. */
.doc .blok{margin-top:6mm;break-inside:avoid}
.doc .blok--lang{break-inside:auto}
/* Opmerkingen en uitsluitingen als doorlopende opsomming: één alinea, de punten genummerd achter elkaar. */
.doc .doorlopend{orphans:2;widows:2}
.doc .doorlopend b{font-weight:700}
/* Voorwaarden (op de offerte en de algemene voorwaarden): 8,5 pt in twee kolommen. */
.doc .kolommen{column-count:2;column-gap:6mm;font-size:8.5pt;line-height:1.3;orphans:2;widows:2}
.doc .kolommen p{margin:0 0 1.2mm}
.doc table.schijven{border-collapse:collapse;margin:0 0 1.2mm}
.doc .schijven td{padding:0.4mm 6mm 0.4mm 0}
.doc .schijven td.g{text-align:right;padding-right:0;white-space:nowrap}
.doc .vak{margin-top:1.2mm}
.doc .hand{display:flex;gap:8mm;margin-top:3mm;break-inside:avoid}
.doc .hand > div{flex:1;border:0.5pt solid #000;padding:2.5mm 3mm;min-height:30mm}
.doc .hand b{display:block;margin-bottom:2.5mm}
.doc .hand p{margin:0 0 4mm;color:#333}
/* Algemene voorwaarden op een eigen pagina; de bijlage herroeping (alleen bij ondertekening bij de klant thuis) ook. */
.doc .av{break-before:page;margin-top:12mm}
.doc .av .paraaf{margin-top:4mm;font-size:8.5pt}
/* De bijlage staat onder een knipstreep; past ze niet meer op de pagina van de voorwaarden, dan schuift ze in haar geheel door. */
.doc .bijlage{break-inside:avoid;margin-top:8mm;padding-top:6mm;border-top:0.5pt dashed #000}
.doc .bijlage .lijn{margin:0 0 4mm;border-bottom:0.5pt solid #000;padding-bottom:1mm}
.doc .leeg{color:#999}
.doc .doc-leeg{padding:40mm 0;text-align:center;color:#666}

/* ---------- toast, bevestiging, menu ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--donker);color:var(--op-donker);border-radius:6px;padding:8px 16px;z-index:9;white-space:nowrap}
.bevestig{border:1px solid var(--g4);border-radius:14px;padding:24px;width:360px;max-width:calc(100% - 32px);background:var(--kaart);color:var(--g9)}
.bevestig::backdrop{background:rgba(33,31,26,.3)}
.bevestig h3{font-size:16px;line-height:24px;font-weight:600;color:var(--g10);margin-bottom:8px}
.bevestig .knoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.menu{position:fixed;top:48px;right:8px;z-index:8;background:var(--kaart);border:1px solid var(--g4);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:200px;box-shadow:0 4px 16px rgba(33,31,26,.12)}
.menu button{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;color:var(--g9);width:100%}
.menu button:hover{background:var(--g2);color:var(--g10)}
.menu button.rood{color:var(--fout)}
.menu button:disabled,.menu button.rood:disabled{color:var(--g6);background:none}

/* ---------- beweging ---------- */
@keyframes draai{to{transform:rotate(360deg)}}
@keyframes glans{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes schuif{to{transform:translateX(100%)}}
@keyframes knipper{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.stap.is-actief .label,.beurt-staat.is-actief .label{animation:none;background:none;color:var(--g10);-webkit-text-fill-color:initial}.skelet::after{animation:none}.caret{display:none}}

.menuknop{display:none}
/* ---------- 900-1099: rail als lade ---------- */
@media (max-width:1099px) and (min-width:900px){
  body{--rail:0px;--midden:400px}
  .werk{grid-template-columns:var(--midden) minmax(0,1fr)}
  body:not(.paneel-open) .werk,body.instellingen-open .werk{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  body.lade .rail{display:flex;position:fixed;inset:0 auto 0 0;width:260px;z-index:5;box-shadow:0 4px 16px rgba(33,31,26,.12)}
  body.lade .rail-open-inhoud{display:flex}
  body.lade .rail-dicht-inhoud{display:none}
  .menuknop{display:inline-flex}
}

/* ---------- telefoon ---------- */
@media (max-width:899px){
  body{--rail:0px}
  .werk{display:block;height:auto;overflow:visible}
  .rail{display:none}
  body.lade .rail{display:flex;position:fixed;inset:0 auto 0 0;width:260px;z-index:5;box-shadow:0 4px 16px rgba(33,31,26,.12)}
  body.lade .rail-open-inhoud{display:flex}
  body.lade .rail-dicht-inhoud{display:none}
  .topbalk{display:flex;align-items:center;gap:8px;height:48px;padding:0 8px 0 16px;border-bottom:1px solid var(--g4);position:sticky;top:0;background:var(--g1);z-index:3}
  .topbalk .midden-titel{flex:1}
  .topbalk-merk{flex:1}
  body:not(.leeg) .topbalk-merk,body.leeg .topbalk .midden-titel{display:none}
  .vervolg{position:sticky;bottom:0;padding:8px 16px 12px}
  .vervolg-hint{display:none}
  body.met-vervolg .naar-laatste{bottom:96px}
  .segment{display:grid;grid-template-columns:1fr 1fr;height:44px;padding:4px 16px;gap:4px;position:sticky;top:48px;background:var(--g1);z-index:3;border-bottom:1px solid var(--g4)}
  body.leeg .segment,body.instellingen-open .segment,body.offerte-open .segment:not(.off-segment){display:none}
  .segment button{border-radius:6px;color:var(--g8);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
  body.seg-resultaat .segment [data-seg=resultaat],body:not(.seg-resultaat) .segment [data-seg=berekening]{background:var(--g3);color:var(--g10);font-weight:600}
  .midden-kop{display:none}
  body.seg-resultaat:not(.instellingen-open):not(.offerte-open) .midden{display:none}
  body.paneel-open.seg-resultaat:not(.instellingen-open):not(.offerte-open) .paneel{display:flex;border-left:0}
  body.paneel-open:not(.seg-resultaat) .paneel{display:none}
  body:not(.leeg) .leeg-blok{top:92px;margin-top:-16px;padding-top:16px;padding-bottom:8px;margin-bottom:-8px}
  .stroom{overflow:visible;padding:16px;gap:16px}
  body.leeg .leeg-blok{padding:96px 0 0}
  .knop{height:44px}
  .knop--36{height:44px}
  .opdracht .voet{flex-direction:column;align-items:stretch}
  .opdracht .voet .knop{width:100%}
  .opdracht .voet .status-rust:empty{display:none}
  .opdracht .asbest{flex-direction:column;align-items:flex-start}
  .keuze{width:100%}
  .keuze label{flex:1}
  .keuze span{width:100%;justify-content:center}
  .opdracht-dicht{gap:8px}
  .prijs-compact{display:flex;flex-direction:column;gap:8px}
  .prijs-compact:empty{display:none}
  .prijs-compact .prijs b{font-size:40px;line-height:44px}
  .prijs-compact .mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:8px}
  .prijs-compact .mini small{display:block;font-size:12px;line-height:16px;color:var(--g8)}
  .prijs-compact .mini b{display:block;font:600 20px/24px var(--kop);color:var(--g10)}
  .prijs-compact .knop{width:100%;margin-top:8px}
  .paneel-kop{height:44px;padding:0 16px;gap:8px;overflow:auto;position:sticky;top:92px;background:var(--g1);z-index:2}
  .tabs{height:44px}
  .tabs button{height:44px}
  .paneel-acties{display:none}
  .paneel-inhoud{padding:0 16px 16px;overflow:visible}
  .sectie{padding:24px 0}
  .sectie:first-child{padding-top:16px}
  .prijs b{font-size:40px;line-height:44px}
  .plakbalk{margin:16px -16px -16px;padding:16px}
  .inst-body{display:block;padding:16px}
  .inst-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:static;padding:4px;background:var(--g2);border-radius:6px;margin-bottom:24px}
  .inst-lijst a{text-align:center;padding:6px 8px}
  .inst-lijst a.is-actief{background:var(--g1)}
  .inst-kop{padding:0 16px}
  .zoek{max-width:none}
  .vakken{flex-wrap:nowrap;overflow:auto;margin:16px -16px;padding:0 16px}
  .kosten{max-width:none}
  .toast{bottom:16px;max-width:calc(100% - 32px);white-space:normal;text-align:center}
  .naar-laatste{position:fixed;right:16px;bottom:16px}
  /* offerte op de telefoon: formulier en document als twee segmenten */
  body.offerte-open .topbalk{display:none}
  .off-kop{height:auto;flex-wrap:wrap;gap:8px;padding:8px 16px}
  .off-kop h2{flex:1}
  .off-kop #off-staat{white-space:normal;flex-basis:100%}
  .off-nog{margin-left:0;flex-basis:100%}
  .off-segment{display:grid;position:static}
  body.offerte-open .off-segment{display:grid}
  body.offseg-document .off-segment [data-offseg=document],body:not(.offseg-document) .off-segment [data-offseg=formulier]{background:var(--g3);color:var(--g10);font-weight:600}
  .off-body{display:block}
  .off-form{overflow:visible;padding:16px;border-right:0}
  body.offseg-document .off-form{display:none}
  body:not(.offseg-document) .off-doc-wrap{display:none}
  .off-doc-wrap{overflow:visible;padding:16px}
  .off-velden .velden{grid-template-columns:1fr}
  .off-regel{grid-template-columns:28px minmax(0,1fr) 72px}
}

/* ---------- paneel onder 800 px: Opslaan en Kopieer achter de knop "Meer acties"; onder 640 px ook Afdrukken en Offerte ---------- */
@container paneel (max-width:800px){
  .acties-breed{display:none}
  .acties-meer{display:inline-flex}
}
@container paneel (max-width:640px){
  .acties-midden{display:none}
}
/* smaller dan 480 px (1100 px met open rail): de versiechip staat al in de kop van de berekening */
@container paneel (max-width:480px){
  #versie-paneel{display:none}
}
/* ---------- smal paneel (< 640 px): gestapelde rijen, tegels 3 + 2 ---------- */
@container paneel (max-width:640px){
  .tabel-kop{display:none}
  .rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
  .rij .n{grid-column:1/-1}
  .rij .g{text-align:left;white-space:normal}
  .rij .g::before{content:attr(data-l);display:block;font-size:12px;line-height:16px;color:var(--g8)}
  .rekenpad{padding-left:0}
  .skelet-rij{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tegels,.skelet-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .velden{grid-template-columns:1fr}
  .meting{grid-template-columns:repeat(2,minmax(0,1fr))}
  .geld .r{grid-template-columns:minmax(0,1fr) 84px 40px}
  .geld .n{grid-column:1/-1}
  .skelet-geld .r{grid-template-columns:minmax(0,1fr) 84px 40px}
  .skelet-geld .r .skelet:first-child{grid-column:1/-1}
  .fase{height:auto;flex-wrap:wrap;align-items:center;gap:0 16px;padding:12px 0 8px}
  .fase .ic{margin-left:auto}
  .fase span.som{flex-basis:100%;margin-left:0}
  .kol-data .rij{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- print ---------- */
@media print{
  /* Afdrukken van de richtprijs (knop Afdrukken): prijskaart, kerncijfers, Waar het geld zit, Kostenopbouw, het werkblad als
     compacte tabel (naam, hoeveelheid, manuren, materiaal €, bron), aannames en plaatsbezoek; hoogstens 2 pagina's A4 voor het
     voorbeeld. Let op: op papier is de pagina smaller dan 900 px, dus de telefoonregels gelden ook; deze regels zetten ze recht. */
  @page{size:A4;margin:14mm}
  .rail,.topbalk,.segment,.midden-kop,.leeg-blok,#stop,.trail,.prijs-compact,.banner,.naar-laatste,.toast,.menu,.bevestig,#status,.gesprek,.vervolg,
  .paneel-kop,.versie-balk,.plakbalk,.instellingen,.watals-sectie,.tab--materiaal,.tab--kenmerken,
  .tariefchips,.balk,.legende,.rekenpad,.fase .ic,.naam-knop .ic,.rij .n small,.rij .naamtekst .chip,.meetbeeld-wrap,
  .toelichting-kop,.toelichting .strook,.toelichting .bronnen,.toelichting .punten,.toelichting .uitleg-staat,.toelichting .acties{display:none!important}
  html,body,.werk,.midden,.stroom,.paneel,.paneel-inhoud{background:#fff;color:#000}
  body{font-size:10pt;line-height:1.3}
  /* Volgorde op papier: het paneel (overzicht, werkblad) eerst, daarna aannames en plaatsbezoek uit de middenkolom. */
  .werk{display:flex;flex-direction:column;height:auto;overflow:visible}
  .midden,.paneel{display:block!important;border:0;position:static}
  .paneel{order:1}
  .midden{order:2}
  .stroom{display:block;overflow:visible;padding:0}
  .paneel-inhoud{overflow:visible;padding:0}
  .tab--overzicht,.tab--werkblad{display:block!important}
  .sectie,.sectie:first-child{padding:8pt 0}
  .sectie-kop{margin-bottom:4pt}
  .prijskaart{gap:3pt}
  .prijs b{font-size:24pt;line-height:28pt}
  .tegels{margin-top:8pt;padding-top:6pt;grid-template-columns:repeat(5,minmax(0,1fr))}
  .tegel b{font-size:13pt;line-height:16pt;margin-top:1pt}
  .geld{gap:3pt}
  .geld .r{grid-template-columns:minmax(0,1.7fr) minmax(30mm,1fr) 24mm 12mm;min-height:0}
  .geld .n{grid-column:auto}
  .geld .b,.geld .b i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kosten{max-width:none}
  .kosten .r{padding:2pt 0}
  /* Werkblad als compacte tabel: Werk · Hoeveelheid · Manuren · Materiaal, huur € · Bron (Naar boven en Afval weg). */
  .tab--werkblad .sectie::before{content:"Werkblad";display:block;font-weight:600;color:#000;margin-bottom:4pt}
  .kol-werk{--kol:minmax(0,1fr) 24mm 17mm 26mm 24mm}
  .paneel .tabel .tabel-kop,.paneel .tabel .rij{display:grid;grid-template-columns:var(--kol);gap:6pt}
  .paneel .tabel .tabel-kop > :nth-child(5),.paneel .tabel .tabel-kop > :nth-child(6),.kol-werk .rij > :nth-child(5),.kol-werk .rij > :nth-child(6){display:none}
  .paneel .tabel .rij .n{grid-column:auto}
  .paneel .tabel .rij .g{text-align:right;white-space:nowrap}
  .paneel .tabel .rij .g::before{content:none}
  .tabel-kop{font-size:8pt;padding-bottom:3pt}
  .rij{padding:2pt 0;font-size:9pt;line-height:12pt}
  .rij .chip{font-size:8pt;height:auto;line-height:12pt;padding:0;background:none}
  .fase{height:auto;padding:5pt 0 2pt;font-size:9pt;flex-wrap:nowrap}
  .fase span.som{margin-left:auto;flex-basis:auto}
  .fase.is-dicht + .fase-rijen{display:block}
  .fase,.rij{break-inside:avoid}
  .toelichting{gap:0}
  .lijstje h4{margin:8pt 0 3pt}
  .lijstje ul{gap:2pt}
  /* Offerte: alleen het document, op A4 met de marges uit @page (18 mm); de voettekst komt uit de @page-regel in #off-page-css. */
  body.offerte-open .rail,body.offerte-open .midden,body.offerte-open .paneel,body.offerte-open .instellingen,body.offerte-open .off-kop,body.offerte-open .off-segment,body.offerte-open .off-form,body.offerte-open #status{display:none!important}
  body.offerte-open .werk{display:block;height:auto;overflow:visible}
  body.offerte-open .offerte-weergave{display:block!important;overflow:visible;height:auto;background:#fff}
  body.offerte-open .off-body{display:block;height:auto;overflow:visible}
  body.offerte-open .off-doc-wrap{display:block!important;overflow:visible;padding:0;background:#fff}
  body.offerte-open .off-doc-zoom{transform:none!important;height:auto!important;width:auto!important}
  body.offerte-open .doc{width:auto;min-height:0;padding:0;box-shadow:none;margin:0}
  /* Op papier begint de pagina van de voorwaarden zonder extra wit bovenaan (de 12 mm scheiden op het scherm de pagina's). */
  body.offerte-open .doc .av{margin-top:0}
}