/* Load.Live 1.0 — stap 4: aanvragen, offertes en facturatie. Overgenomen uit mockups/stap4/stap4.css (goedgekeurd) + aanvullingen onderaan.
   Enkel tokens uit ll.css; uitzondering --huis / --huis-staal: de huisstijlkleur van de account (voor documenten). */

.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.groot { width: 20px; height: 20px; }
.rechts { text-align: right; }
.zacht { color: var(--zacht); }
.tussen { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mt0 { margin-top: 0; }
.kengetallen.vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kengetal b.mono-getal { font: 500 26px/1.2 var(--mono); letter-spacing: 0; padding-top: 8px; }
.kengetal b.tally { color: var(--tally-tekst); }
.kengetal em { font-style: normal; font-size: 13px; color: var(--zacht); }

/* stip + tekst: kleur nooit alleen */
.vstip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.vstip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--zacht); flex: none; }
.vstip.ok::before { background: var(--ok); }
.vstip.let::before { background: var(--let); }
.vstip.rood::before { background: var(--tally); }
.status.rood { color: var(--tally-tekst); border-color: var(--tally); }
.status.vol { background: var(--rack-2); color: var(--tekst); }

/* ---------- 01 pijplijn ---------- */
.pijplijn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kolom { background: color-mix(in srgb, var(--rack) 55%, transparent); border: 1px solid var(--lijn); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; min-width: 0; }
.kolom > header { padding: 4px 4px 8px; border-bottom: 1px solid var(--lijn); display: grid; gap: 2px; }
.kolom > header h2 { margin: 0; font: 600 15px/1.3 var(--body); display: flex; justify-content: space-between; align-items: baseline; }
.kolom > header h2 .mono { font-size: 13px; color: var(--zacht); font-weight: 500; }
.kolom > header .sub { font-family: var(--mono); font-size: 12.5px; }
.kolom.verloren { opacity: .8; }
.akaart { background: var(--rack); border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 10px 11px; display: grid; gap: 5px; text-decoration: none; color: inherit; font-size: 13.5px; }
.akaart:hover { border-color: var(--lijn-sterk); }
.akaart.let { border-left-color: var(--let); }
.akaart.ok { border-left-color: var(--ok); }
.akaart.tally { border-left-color: var(--tally); }
.akaart.uit { border-left-color: var(--lijn); }
.akaart .klant { color: var(--zacht); font-size: 12.5px; display: flex; justify-content: space-between; gap: 6px; }
.akaart .klant .mono { font-size: 11.5px; }
.akaart b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.akaart .regel { display: flex; gap: 6px; align-items: center; color: var(--zacht); font-size: 12.5px; min-width: 0; }
.akaart .regel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akaart .voet { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--lijn); }
.akaart .waarde { font: 500 13.5px/1 var(--mono); }
.akaart .leeftijd { font: 500 11.5px/1 var(--mono); color: var(--zacht); }
.akaart .leeftijd.let { color: var(--let); }
.bron { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 3px 5px; }
.bron .ic { width: 12px; height: 12px; vertical-align: 0; }
.akaart .signaal { font-size: 12.5px; color: var(--let); display: flex; gap: 5px; align-items: center; }
.akaart .signaal.rood { color: var(--tally-tekst); }
.akaart .signaal.ok { color: var(--ok); }
.kolom .meer { font-size: 13px; color: var(--zacht); text-align: center; padding: 4px; }
.balk .rechts-in { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vsegment { display: inline-flex; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); overflow: hidden; }
.vsegment button { border: 0; background: transparent; padding: 0 12px; min-height: 36px; font-size: 13.5px; color: var(--zacht); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.vsegment button[aria-pressed="true"] { background: var(--rack-2); color: var(--tekst); font-weight: 600; }

/* ---------- 02 aanvraag detail ---------- */
.kopregel { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--zacht); font-size: 14.5px; }
.mail { border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.mail header { padding: 14px 18px; border-bottom: 1px solid var(--lijn); display: grid; gap: 3px; font-size: 14px; }
.mail header .onderwerp { font-weight: 600; font-size: 15.5px; }
.mail header dl { margin: 0; display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; color: var(--zacht); font-size: 13.5px; }
.mail header dd { margin: 0; }
.mailtekst { padding: 16px 18px 18px; font-size: 15px; line-height: 1.6; max-width: 72ch; }
.mailtekst p { margin: 0 0 10px; }
.mailtekst ul { margin: 0 0 10px; padding-left: 18px; }
.mailtekst mark { background: var(--let-zacht); color: inherit; padding: 0 2px; border-radius: 2px; }
.mail footer { padding: 10px 18px; border-top: 1px solid var(--lijn); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--zacht); }
.gegevens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.gegevens > div { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.gegevens > div + div { border-left: 1px solid var(--lijn); }
.gegevens dd, .gegevens dt { margin: 0; }
.gegevens .waarde { font-size: 15px; }
.gegevens .mono { font-size: 14px; }
.dagenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.dagenlijst li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.check { display: grid; gap: 0; }
.check h3 { margin: 16px 0 6px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); display: flex; justify-content: space-between; }
.check h3:first-child { margin-top: 0; }
.check ul { list-style: none; margin: 0; padding: 0; }
.check li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--lijn); align-items: center; }
.check li .vstip { font-weight: 500; }
.check li .sub { grid-column: 1; padding-left: 17px; font-size: 13px; }
.check li .mono { font-size: 13px; text-align: right; }
.check li .status { grid-row: 1; grid-column: 2; justify-self: end; }
.check li .mono.aantal { grid-column: 2; grid-row: 2; color: var(--zacht); }
.checksamen { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-klein); background: var(--rack-2); margin-bottom: 14px; font-size: 14px; }
.checksamen b { font-family: var(--mono); }
:is(.vk, .publiek) .paneel h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }   /* niet globaal: lekte in andere modules (Updates: titel rechts) */
.paneel h2 .sub { font-weight: 400; }
.paneel .knop.breed { width: 100%; }
.stapel { display: grid; gap: 16px; align-content: start; }
.kaart dl.info, dl.info { margin: 0; display: grid; grid-template-columns: 118px 1fr; gap: 6px 12px; font-size: 14px; }
dl.info dt { color: var(--zacht); }
dl.info dd { margin: 0; overflow-wrap: anywhere; }
.chips.statisch .tag { font-size: 13px; min-height: 28px; padding: 0 10px; }
.tag.ok { background: var(--ok-zacht); color: var(--ok); }
.tag.let { background: var(--let-zacht); color: var(--let); }
.notitie { border-left: 2px solid var(--lijn-sterk); padding: 2px 0 2px 12px; font-size: 14px; color: var(--zacht); margin: 0; }
.notitie b { color: var(--tekst); font-weight: 600; }

/* ---------- 03 offerte-editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.editor .zijpaneel { position: sticky; top: 16px; display: grid; gap: 16px; }
.docvelden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.docvelden .veld > span { font-size: 13px; }
.docvelden input, .docvelden select { min-height: 40px; font-size: 14px; }
.lijnen { font-size: 14px; }
.lijnen th { padding: 10px 8px; }
.lijnen td { padding: 5px 8px; vertical-align: middle; }
.lijnen th:first-child, .lijnen td:first-child { padding-left: 10px; width: 22px; }
.lijnen input[type=text], .lijnen input[type=number], .lijnen select { min-height: 34px; padding: 4px 8px; font-size: 14px; border-color: var(--lijn-sterk); background: var(--ground); }
.lijnen input.num { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.lijnen td.oms { min-width: 280px; }
.lijnen td.oms .sub { font-size: 12px; padding: 2px 0 0 2px; display: block; }
.lijnen .w-aantal { width: 74px; }
.lijnen .w-eenh { width: 88px; }
.lijnen .w-dagen { width: 62px; }
.lijnen .w-prijs { width: 96px; }
.lijnen .w-kort { width: 70px; }
.lijnen .w-btw { width: 76px; }
.lijnen td.totaal { font: 500 14px/1 var(--mono); text-align: right; white-space: nowrap; width: 104px; }
.lijnen td.actie { width: 40px; padding: 0 4px; }
.lijnen .greep { color: var(--zacht); display: inline-grid; place-items: center; cursor: grab; }
.lijnen .greep .ic { width: 14px; height: 14px; }
.lijnen tr.groep th { padding: 9px 10px; }
.lijnen tr.groep th .groepsom { float: right; font: 500 12.5px/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tekst); }
.lijnen tr.voeg td { padding: 6px 10px 10px; }
.lijnen tr.voeg .link { font-size: 13.5px; text-decoration: none; color: var(--zacht); display: inline-flex; gap: 6px; align-items: center; }
.lijnen tr.voeg .link + .link { margin-left: 16px; }
.lijnen .dash { color: var(--zacht); text-align: center; display: block; font-family: var(--mono); }
.lijnen tr.markeer td { background: color-mix(in srgb, var(--let) 7%, transparent); }
.lijnen .kort-aan { color: var(--ok); }
.totalen { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14.5px; }
.totalen dt { color: var(--zacht); }
.totalen dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.totalen .sep { grid-column: 1 / -1; border-top: 1px solid var(--lijn); margin: 4px 0; }
.totalen .groot { font-weight: 600; color: var(--tekst); font-size: 16px; }
.totalen dd.groot { font: 500 22px/1.1 var(--mono); }
.intern { border: 1px dashed var(--lijn-sterk); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.intern .label { display: flex; align-items: center; gap: 6px; }
.margebalk { height: 8px; border-radius: 999px; background: var(--rack-2); overflow: hidden; display: flex; }
.margebalk i { display: block; height: 100%; }
.margebalk .kost { background: var(--lijn-sterk); width: 40.5%; }
.margebalk .winst { background: var(--ok); width: 59.5%; }
.marges { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; }
.marges li { display: grid; grid-template-columns: 1fr auto 52px; gap: 10px; }
.marges .mono { text-align: right; }
.marges .let { font-family: var(--mono); }
.acties.kolomknoppen { display: grid; gap: 8px; }
.acties.kolomknoppen .knop { width: 100%; }
.voorwaarden textarea { min-height: 120px; font-size: 14px; line-height: 1.5; }
.opslaan { font-size: 13px; color: var(--zacht); display: inline-flex; gap: 6px; align-items: center; }
.opslaan::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---------- 04 offerte-PDF (licht, huisstijl van de account) ---------- */
.pdfvoorbeeld { min-height: 100vh; padding: 0 16px 48px; background: var(--rack-2); }
.pdfbalk { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 0 -16px 28px; padding: 10px 24px; background: var(--rack); border-bottom: 1px solid var(--lijn); font-size: 14px; }
.pdfbalk .bestand { font-family: var(--mono); font-size: 13.5px; }
.pdfbalk .knoppen { margin-left: auto; display: flex; gap: 8px; }
.a4 { --huis: #1F3A5F; width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto 24px; background: var(--rack); color: var(--tekst); box-shadow: var(--schaduw); padding: 56px 60px 44px; font: 400 12.5px/1.5 var(--body); display: flex; flex-direction: column; }
.a4 .dockop { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 18px; border-bottom: 3px solid var(--huis); }
.logoplaats { width: 176px; height: 64px; border: 1.5px dashed color-mix(in srgb, var(--huis) 60%, transparent); border-radius: var(--r); display: grid; place-items: center; color: var(--huis); font: 600 13px/1.2 var(--body); letter-spacing: .02em; text-align: center; }
.logoplaats small { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.a4 .afzender { text-align: right; font-size: 11.5px; color: var(--zacht); line-height: 1.55; }
.a4 .afzender b { color: var(--tekst); font-size: 13px; }
.a4 .doctitel { display: flex; justify-content: space-between; align-items: flex-end; margin: 26px 0 18px; gap: 20px; }
.a4 h1 { margin: 0; font: 600 30px/1 var(--body); letter-spacing: .01em; color: var(--huis); }
.a4 .doctitel .nr { font: 500 14px/1.3 var(--mono); color: var(--tekst); margin-top: 6px; display: block; }
.a4 .adresblok { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.a4 .adresblok .label { font-size: 9.5px; color: var(--huis); margin: 0 0 4px; }
.a4 .adresblok p { margin: 0; }
.a4 dl.meta { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 1px 10px; }
.a4 dl.meta dt { color: var(--zacht); }
.a4 dl.meta dd { margin: 0; }
.a4 .intro { margin: 0 0 16px; }
.a4 table { font-size: 11.5px; }
.a4 th { font-size: 9.5px; padding: 7px 6px; color: var(--huis); border-bottom: 1.5px solid var(--huis); background: transparent; }
.a4 td { padding: 5px 6px; border-bottom: 1px solid var(--lijn); }
.a4 td.num, .a4 th.num { font-size: 11px; }
.a4 tr.groep th { background: color-mix(in srgb, var(--huis) 8%, transparent); color: var(--huis); padding: 6px; border-bottom: 0; }
.a4 tr.groep th .groepsom { float: right; font-family: var(--mono); letter-spacing: 0; }
.a4 td .sub { font-size: 10.5px; }
.a4 .doctotalen { display: grid; grid-template-columns: 1fr 290px; gap: 28px; margin-top: 16px; align-items: start; }
.a4 .doctotalen dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; }
.a4 .doctotalen dd { margin: 0; text-align: right; font-family: var(--mono); }
.a4 .doctotalen .eind { border-top: 2px solid var(--huis); padding-top: 6px; margin-top: 4px; font-weight: 600; font-size: 14px; color: var(--huis); }
.a4 .doctotalen dd.eind { font-size: 14px; }
.a4 .blokje-klein { font-size: 11px; color: var(--zacht); }
.a4 h2 { font: 600 13px/1.3 var(--body); color: var(--huis); margin: 18px 0 6px; }
.a4 ol.voorw { margin: 0; padding-left: 16px; font-size: 11px; display: grid; gap: 3px; }
.a4 .akkoord { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.a4 .tekenvak { border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; min-height: 120px; align-content: start; }
.a4 .tekenvak .lijn { border-bottom: 1px solid var(--lijn-sterk); height: 34px; }
.a4 .akkoordknop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--huis); color: var(--rack); font-weight: 600; font-size: 13px; padding: 10px 16px; border-radius: var(--r-klein); text-decoration: none; }
.a4 .akkoordknop .ic { width: 15px; height: 15px; }
.a4 .docvoet { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 14px; font-size: 9.5px; color: var(--zacht); line-height: 1.5; }
.a4 .docvoet .gemaakt { font-family: var(--mono); letter-spacing: .04em; white-space: nowrap; align-self: flex-end; }
.a4 .pagnr { font-family: var(--mono); white-space: nowrap; align-self: flex-end; }
.a4 .vervolgkop { display: flex; justify-content: space-between; font-size: 11px; color: var(--zacht); padding-bottom: 10px; border-bottom: 1px solid var(--lijn); margin-bottom: 8px; }
.a4 .betaalinfo { background: color-mix(in srgb, var(--huis) 6%, transparent); border-radius: var(--r); padding: 10px 12px; font-size: 11px; display: grid; gap: 2px; }
.a4 .betaalinfo b { font-family: var(--mono); font-weight: 500; }

/* ---------- 05 facturen ---------- */
.facturen td { vertical-align: middle; }
.facturen td .sub { font-size: 12.5px; }
.facturen .nr { font: 500 14px/1.3 var(--mono); }
.facturen .nr.concept { color: var(--zacht); font-style: italic; font-family: var(--body); }
.facturen td.num b { font-weight: 500; }
.facturen td.num .sub { display: block; font-family: var(--mono); }
.kanaal { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--zacht); white-space: nowrap; }
.kanaal .ic { width: 14px; height: 14px; vertical-align: 0; }
.vervalt.te-laat { color: var(--tally-tekst); }
.vervalt.bijna { color: var(--let); }
.facturen tr.credit .nr, .facturen tr.credit td.num b { color: var(--zacht); }
.voetsom { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--zacht); }
.voetsom b { font-family: var(--mono); color: var(--tekst); font-weight: 500; }
.balk select { width: auto; min-height: 36px; padding: 4px 10px; font-size: 13.5px; }
.balk .periode-kies { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--zacht); }
.status.info { color: var(--tekst); border-color: var(--lijn-sterk); }

/* ---------- 06 factuur detail ---------- */
.ptijdlijn { list-style: none; margin: 0; padding: 0; display: grid; }
.ptijdlijn li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; position: relative; padding-bottom: 14px; }
.ptijdlijn li::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: -2px; width: 2px; background: var(--ok); opacity: .5; }
.ptijdlijn li:last-child { padding-bottom: 0; }
.ptijdlijn li:last-child::before { display: none; }
.ptijdlijn .punt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ok); display: grid; place-items: center; color: var(--ok); background: var(--rack); }
.ptijdlijn .punt .ic { width: 12px; height: 12px; stroke-width: 2.4; vertical-align: 0; }
.ptijdlijn li.wacht .punt { border-color: var(--lijn-sterk); color: var(--zacht); }
.ptijdlijn li.wacht::before { background: var(--lijn-sterk); }
.ptijdlijn b { font-weight: 600; font-size: 14.5px; }
.ptijdlijn .wanneer { font: 500 12px/1.4 var(--mono); color: var(--zacht); margin-left: 8px; }
.ptijdlijn .sub { font-size: 13px; overflow-wrap: anywhere; }
.ptijdlijn .sub .mono { font-size: 12.5px; }
.betalingen { list-style: none; margin: 0; padding: 0; display: grid; }
.betalingen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.betalingen li:first-child { border-top: 0; padding-top: 0; }
.betalingen .bedrag { font: 500 15px/1.3 var(--mono); text-align: right; }
.betalingen .sub { font-size: 13px; }
.betalingen .bron { justify-self: end; }
.saldo { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; background: var(--let-zacht); border-radius: var(--r-klein); margin-top: 12px; }
.saldo b { font: 500 20px/1 var(--mono); color: var(--let); }
.saldo span { font-size: 14px; }
.fact-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); margin-bottom: 20px; }
.fact-meta > div { padding: 12px 16px; display: grid; gap: 3px; }
.fact-meta > div + div { border-left: 1px solid var(--lijn); }
.fact-meta .mono { font-size: 14px; }
.fact-meta .klein { color: var(--zacht); }
.tabelvoet { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 16px 14px; border-top: 1px solid var(--lijn); }
.tabelvoet .ogm { font: 500 15px/1.3 var(--mono); }
.lijnen-ro td { padding: 8px 12px; }
.lijnen-ro tr.verrekend td { color: var(--zacht); }
.lijnen-ro .herkomst { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 3px 5px; margin-left: 6px; white-space: nowrap; }
.lijnen-ro .herkomst.werkelijk { color: var(--let); border-color: color-mix(in srgb, var(--let) 45%, transparent); }

/* ---------- 07 factuur maken (dialoog) ---------- */
.fstappen { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r-klein); overflow: hidden; }
.fstappen li { flex: 1; padding: 9px 12px; font-size: 13.5px; color: var(--zacht); display: flex; gap: 8px; align-items: center; }
.fstappen li + li { border-left: 1px solid var(--lijn); }
.fstappen li .n { font: 500 12px/1 var(--mono); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--lijn-sterk); display: grid; place-items: center; flex: none; }
.fstappen li.klaar .n { background: var(--ok-zacht); color: var(--ok); border-color: var(--ok); }
.fstappen li.nu { background: var(--rack-2); color: var(--tekst); font-weight: 600; }
.fstappen li.nu .n { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.dlg-twee { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.afrond { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.afrond li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 14px; }
.afrond li + li { border-top: 1px solid var(--lijn); }
.keuzekaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keuzekaart { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 42px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); cursor: pointer; font-size: 14px; }
.keuzekaart input { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--tally); }
.keuzekaart:has(input:checked) { border-color: var(--tekst); background: var(--rack-2); }
.keuzekaart b { font-weight: 600; }
.keuzekaart .mono { font-size: 13px; color: var(--zacht); }
.verschillen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.verschillen li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 12px; align-items: start; font-size: 14px; }
.verschillen li + li { border-top: 1px solid var(--lijn); }
.verschillen input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tally); }
.verschillen .sub { grid-column: 2; font-size: 12.5px; }
.verschillen .mono { text-align: right; font-size: 13.5px; white-space: nowrap; }
.verschillen li.uit b, .verschillen li.uit .mono { color: var(--zacht); }
.verschillen li.uit .mono { text-decoration: line-through; }
.verschillen li.aandacht { background: var(--let-zacht); }
.dlg .groepkop { margin: 4px 0 -6px; display: flex; justify-content: space-between; align-items: baseline; }
.dlg h3 { margin: 0; font: 600 15px/1.3 var(--body); }
.fsamenvatting { background: var(--ground); border: 1px solid var(--lijn); border-radius: var(--r-klein); padding: 14px; display: grid; gap: 12px; position: sticky; top: 0; }
.fsamenvatting .totalen { font-size: 13.5px; }
.fsamenvatting .totalen dd.groot { font-size: 19px; }
.projectachter { opacity: 1; }

/* ---------- 08 instellingen ---------- */
.inst { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.inst-nav { position: sticky; top: 16px; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.inst-nav a { display: block; padding: 8px 12px; border-radius: var(--r-klein); text-decoration: none; color: var(--zacht); border-left: 2px solid transparent; }
.inst-nav a[aria-current="true"] { color: var(--tekst); background: var(--rack); border-left-color: var(--tally); font-weight: 600; }
.inst-nav .label { padding: 12px 12px 4px; display: block; }
.inst-sectie { background: var(--rack); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px 22px; margin-bottom: 16px; }
.inst-sectie > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.inst-sectie > header h2 { margin: 0; }
.inst-sectie > header p { margin: 2px 0 0; color: var(--zacht); font-size: 14px; max-width: 64ch; }
.rij.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rij.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inst .veld input, .inst .veld select { min-height: 40px; font-size: 14.5px; }
.voorbeeldnr { font: 500 13px/1.3 var(--mono); color: var(--zacht); }
.voorbeeldnr b { color: var(--tekst); font-weight: 500; }
.peppolkaart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-zacht); border-radius: var(--r-klein); }
.peppolkaart .groot-ic { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ok); display: grid; place-items: center; color: var(--ok); }
.peppolkaart .groot-ic .ic { width: 20px; height: 20px; vertical-align: 0; stroke-width: 2; }
.peppolkaart b { font-size: 15.5px; }
.peppolkaart .mono { font-size: 14px; }
.peppolrijen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 14px; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.peppolrijen > div { padding: 12px 14px; display: grid; gap: 3px; font-size: 14px; }
.peppolrijen > div + div { border-left: 1px solid var(--lijn); }
.tarieven td { padding: 8px 12px; vertical-align: middle; }
.tarieven .sub { font-size: 12.5px; }
.schema { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.schema > div { padding: 30px 12px 0 0; position: relative; display: grid; gap: 4px; font-size: 13.5px; }
.schema > div::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--lijn-sterk); }
.schema > div::after { content: ''; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--rack); border: 2px solid var(--let); }
.schema > div:first-child::after { border-color: var(--zacht); }
.schema > div.zwaar::after { border-color: var(--tally); background: var(--tally); }
.schema .dag { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.schema b { font-weight: 600; }
.sjablonen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.sjablonen li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; padding: 10px 14px; align-items: center; font-size: 14px; }
.sjablonen li + li { border-top: 1px solid var(--lijn); }
.sjablonen .sub { grid-column: 1; font-size: 12.5px; }
.sjablonen .tag { grid-row: 1 / span 2; grid-column: 2; }
.sjablonen .knop { grid-row: 1 / span 2; grid-column: 3; }
.huisstijl { display: grid; grid-template-columns: 220px 1fr 240px; gap: 20px; align-items: start; }
.logodrop { border: 1.5px dashed var(--lijn-sterk); border-radius: var(--r); min-height: 116px; display: grid; place-items: center; text-align: center; padding: 12px; color: var(--zacht); font-size: 13.5px; gap: 4px; }
.logodrop b { color: var(--tekst); }
.kleurstaal { display: flex; gap: 10px; align-items: center; }
.kleurstaal .staal { width: 44px; height: 44px; border-radius: var(--r-klein); background: var(--huis-staal); border: 1px solid var(--lijn-sterk); flex: none; }
.kleurstaal input { max-width: 140px; font-family: var(--mono); }
.inst { --huis-staal: #1F3A5F; }
.minidoc { border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--ground); padding: 12px; display: grid; gap: 6px; }
.minidoc .balkje { height: 4px; background: var(--huis-staal); border-radius: 2px; }
.minidoc .lijntje { height: 6px; border-radius: 2px; background: var(--lijn); }
.minidoc .lijntje.kort { width: 55%; }
.minidoc .lijntje.half { width: 75%; }
.minidoc .tt { font: 600 13px/1 var(--body); color: var(--huis-staal); }
.opslagbalk { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; background: var(--ground); border-top: 1px solid var(--lijn); align-items: center; }
.opslagbalk .opslaan { margin-right: auto; }

/* ---------- 09/10 gsm ---------- */
.gsmlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fkaart { background: var(--rack); border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; }
.fkaart.te-laat { border-left-color: var(--tally); }
.fkaart.let { border-left-color: var(--let); }
.fkaart .boven { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fkaart .boven .mono { font-size: 13.5px; }
.fkaart b.klantnaam { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.fkaart .bedragrij { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fkaart .bedrag { font: 500 18px/1 var(--mono); }
.fkaart .knoppen { display: flex; gap: 8px; }
.fkaart .knoppen .knop { flex: 1; }
.gsm-samen { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lijn); border-radius: var(--r); margin-bottom: 16px; }
.gsm-samen > div { padding: 12px 14px; display: grid; gap: 2px; }
.gsm-samen > div + div { border-left: 1px solid var(--lijn); }
.gsm-samen b { font: 500 19px/1.2 var(--mono); }
.gsm-samen b.tally { color: var(--tally-tekst); }
.gsm-samen span { font-size: 13px; color: var(--zacht); }
.vblad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--rack); border-top: 1px solid var(--lijn-sterk); border-radius: 14px 14px 0 0; box-shadow: var(--schaduw); padding: 8px 16px 20px; display: grid; gap: 14px; }
.vblad .greepje { width: 40px; height: 4px; border-radius: 2px; background: var(--lijn-sterk); justify-self: center; }
.vblad h2 { margin: 0; font: 400 28px/1 var(--display); letter-spacing: .03em; }
.vblad .factinfo { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-klein); background: var(--ground); font-size: 14px; }
.vblad .factinfo b { font-family: var(--mono); font-weight: 500; }
.bedraginvoer input { font: 500 26px/1 var(--mono); min-height: 56px; text-align: right; }
.snelknoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.vblad .knop.hoofd { width: 100%; min-height: 50px; }
.scherm-dim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ground) 72%, transparent); z-index: 45; }

@media (max-width: 720px) {
  .pijplijn { grid-template-columns: 1fr; }
  .kop-pagina h1 { font-size: 40px; }
}
.pijplijn { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .85fr); }
.akaart .klant span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akaart .klant .mono, .akaart .klant .leeftijd { flex: none; }
.akaart .waarde, .akaart .bron { white-space: nowrap; }
.akaart, .akaart .klant span:first-child, .akaart .signaal { min-width: 0; }
.akaart .signaal { align-items: flex-start; }
.akaart .signaal .ic { margin-top: 1px; }
.kolom, .akaart { grid-template-columns: minmax(0, 1fr); }
.akaart .voet { flex-wrap: wrap; row-gap: 6px; }
.gegevens { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
.dagenlijst li { grid-template-columns: 76px minmax(0, 1fr); }
h2 .sub { font-weight: 400; }
.vstip.let { color: inherit; }
/* offerte-editor: lijnen op volle breedte, totalen rechts eronder */
.editor { grid-template-columns: minmax(0, 1fr); }
.editor .zijpaneel { position: static; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.lijnen td.oms { min-width: 0; width: auto; }
.lijnen td.oms { width: 34%; }
.totalen dt .sub { display: block; font-size: 12.5px; }
.a4 table { table-layout: fixed; }
.a4 th:nth-child(2) { width: 84px; } .a4 th:nth-child(3) { width: 50px; } .a4 th:nth-child(4) { width: 70px; }
.a4 th:nth-child(5) { width: 64px; } .a4 th:nth-child(6) { width: 48px; } .a4 th:nth-child(7) { width: 80px; }
.a4 tr.groep th { width: auto; }
.facturen .nr, .facturen td.num, .facturen .mono { white-space: nowrap; }
.facturen td:nth-child(2) { min-width: 150px; }
.facturen td:nth-child(7) { width: 250px; }
.facturen td:nth-child(8) { width: 44px; padding: 6px 8px; }
.stregel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.facturen .kanaal { white-space: nowrap; }
.facturen td:nth-child(3) { min-width: 210px; }
.twee.factuurgrid { grid-template-columns: minmax(0, 1fr) 390px; }
.lijnen-ro td.num { white-space: nowrap; }
.lijnen-ro td:first-child { min-width: 0; }
.tabelvoet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tabelvoet dl.info { grid-template-columns: 96px minmax(0, 1fr); font-size: 13.5px; }
.tabelvoet .ogm { font-size: 13.5px; white-space: nowrap; }
.paneel h2 .knop { font-size: 13px; }
.betalingen .bedrag { white-space: nowrap; }
.fsamenvatting dl.info { grid-template-columns: 84px minmax(0, 1fr); font-size: 13.5px; }
.opslagbalk { position: static; }
.huisstijl { grid-template-columns: 200px minmax(0, 1fr) 190px; }
.minidoc { background: var(--tekst); border-color: var(--lijn-sterk); }
.minidoc .lijntje { background: color-mix(in srgb, var(--ground) 20%, transparent); }
.minidoc .sub { color: color-mix(in srgb, var(--ground) 65%, transparent); }
.fkaart.bijna { border-left-color: var(--let); }
.fkaart .bedragrij .mono { font-size: 13px; }
.fkaart .vervalt { color: var(--zacht); }
.fkaart .vervalt.te-laat { color: var(--tally-tekst); }
.fkaart .vervalt.bijna { color: var(--let); }
.vblad .rij { grid-template-columns: 1fr 1fr; }
.akaart .waarde { margin-left: auto; }

/* ================= aanvullingen voor de gebouwde schermen (stap 4) ================= */
.kengetallen.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.akaart.sleept, .lijnen tr.sleept { opacity: .45; }
.kolom.doel { outline: 2px dashed var(--lijn-sterk); outline-offset: 2px; background: var(--rack); }
.akaart .signaal span { white-space: normal; }
.akaart:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tag .tagweg { border: 0; background: none; color: var(--zacht); cursor: pointer; padding: 0 0 0 4px; font-size: 15px; line-height: 1; }
.tag .tagweg:hover { color: var(--tally-tekst); }
.lijnen input.detailveld { display: block; width: 100%; min-height: 22px; margin-top: 2px; padding: 0 4px; border-color: transparent; background: transparent; font-size: 12px; color: var(--zacht); }
.lijnen input.detailveld:hover, .lijnen input.detailveld:focus { border-color: var(--lijn-sterk); background: var(--ground); }
.lijnen td.oms .sub { font-size: 12px; }
.lijnen select { width: 100%; }
.lijnen [aria-invalid="true"] { border-color: var(--tally) !important; }
.periodeveld { display: grid; gap: 6px; }
.periodeveld legend { font-weight: 600; font-size: 13px; padding: 0; margin: 0 0 6px; }
.tweeveld { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tweeveld input { min-width: 0; width: 100%; padding-left: 6px; padding-right: 4px; font-size: 13px; }
.docvelden input[type=date] { min-height: 40px; font-size: 14px; }
.knoppenrij2 { display: flex; gap: 8px; flex-wrap: wrap; }
.knoppenrij2 .knop { flex: 1; }
.totalen dt.grens, .totalen dd.grens { border-top: 1px solid var(--lijn); padding-top: 8px; margin-top: 4px; }
.intern .label .ic { width: 13px; height: 13px; vertical-align: -2px; }
.voorwaarden .rij.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voorwaarden .rij.drie > :nth-child(3) { grid-column: 1 / -1; }
.opslaan:empty::before { display: none; }
/* documentvoorbeeld: altijd als papier (licht), ook in het donkere thema */
.papier { --ground: #F2F1EC; --rack: #FBFAF7; --rack-2: #E8E7E1; --lijn: rgba(12,24,22,.13); --lijn-sterk: rgba(12,24,22,.26); --veld-rand: rgba(12,24,22,.52);
  --tekst: #0C1816; --zacht: #4F6964; --knop: #0C1816; --knop-tekst: #F5F3EF; --focus: #0C1816; --ok: #177F71; --let: #8A5A08; --tally-tekst: #B8261B; --schaduw: 0 18px 50px rgba(12,24,22,.18);
  color-scheme: light; background: var(--rack-2); color: var(--tekst); }
main .pdfvoorbeeld { margin: -32px clamp(-48px, -4vw, -16px) -72px; padding-bottom: 48px; }
.pdfbalk .knop, .papier .knop { color: var(--tekst); }
.a4 .doclogo { max-width: 176px; max-height: 64px; object-fit: contain; object-position: left center; display: block; }
.a4 .akkoordknop { color: #fff; }
.a4 td .sub { display: block; }
.artlijst { max-height: 320px; overflow: auto; border: 1px solid var(--lijn); border-radius: var(--r); }
.artkeuze { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--lijn); align-items: center; cursor: pointer; font-size: 14px; }
.artkeuze:first-child { border-top: 0; }
.artkeuze:hover { background: var(--rack-2); }
.artkeuze input { accent-color: var(--tally); width: 18px; height: 18px; margin: 0; }
.knopstatus { background: none; border: 0; padding: 0; cursor: pointer; }
.knopstatus:hover .status { border-color: var(--tekst); }
.schema .dagveld { width: 58px; min-height: 26px; padding: 1px 6px; font: 500 12px/1 var(--mono); border: 1px solid var(--veld-rand); border-radius: var(--r-klein); background: var(--ground); color: var(--tekst); }
.logovoorbeeld { max-width: 170px; max-height: 60px; object-fit: contain; }
.logodrop .ic { width: 20px; height: 20px; }
.mt-sectie { margin: 20px 0 8px; }
.inst-sectie > header .vink { min-height: 0; padding-top: 0; }
.inst-nav a:hover { color: var(--tekst); }
.peppolrijen .kort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.docacties { margin: 0 0 8px; }
.stregel .status { margin-right: 2px; }
.lijnen-ro td .herkomst { vertical-align: 1px; }
.tabelvoet dl.totalen { margin: 0; }
.fact-meta .klein.tally { color: var(--tally-tekst); }
.betalingen li .link { grid-column: 2; justify-self: end; font-size: 12.5px; min-height: 0; }
.paneel h2 .status { font-size: 10.5px; }
.melding.zacht p + p, .melding.zacht ul { margin-top: 6px; }
/* bezig met slepen tussen kolommen */
.pijplijn .kolom { min-height: 120px; }
/* onderblad (gsm) en dialoog (groot scherm) voor betaling registreren */
.vblad-wrap .scherm-dim { z-index: 45; }
.vblad { max-height: calc(100vh - 32px); overflow-y: auto; }
.vblad .rij { display: grid; gap: 12px; }
.vblad .snelknoppen .chip { min-height: 40px; font-size: 14.5px; }
@media (min-width: 721px) {
  .vblad { left: 50%; right: auto; bottom: 24px; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); border: 1px solid var(--lijn-sterk); border-radius: 14px; padding: 16px 22px 22px; }
  .vblad .greepje { display: none; }
}
.gsm-chips { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.gsm-chips .chip { white-space: nowrap; }
/* publieke pagina's (webformulier en online akkoord) */
body.publiek { padding: 24px 16px 48px; min-height: 100vh; }
.publiek-vak { max-width: 760px; margin: 0 auto; }
.publiek-titel { font: 400 clamp(36px, 6vw, 48px)/1 var(--display); letter-spacing: .03em; margin: 6px 0 10px; }
.publiek .formulier .voet { display: flex; gap: 8px; justify-content: flex-start; margin-top: 16px; }
.honing { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.publiekdoc { padding: 24px 16px 48px; margin: -24px -16px -48px; min-height: 100vh; }
.akkoordvak { width: 794px; max-width: 100%; margin: 0 auto 32px; display: grid; gap: 12px; }
.akkoordvak h2 { font: 600 18px/1.3 var(--body); margin: 0; }
@media (max-width: 960px) {
  .pijplijn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor .zijpaneel { grid-template-columns: 1fr; }
  .docvelden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-meta > div + div { border-left: 0; }
  .twee.factuurgrid { grid-template-columns: 1fr; }
  .inst { grid-template-columns: 1fr; }
  .inst-nav { position: static; display: flex; flex-wrap: wrap; }
  .huisstijl { grid-template-columns: 1fr; }
  .dlg-twee { grid-template-columns: 1fr; }
  .gegevens { grid-template-columns: 1fr; }
  .gegevens > div + div { border-left: 0; border-top: 1px solid var(--lijn); }
  .kengetallen.vijf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pijplijn { grid-template-columns: 1fr; }
  .kengetallen.vijf, .kengetallen.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docvelden, .rij.drie, .rij.vier, .voorwaarden .rij.drie, .peppolrijen, .schema, .keuzekaarten { grid-template-columns: 1fr; }
  .peppolrijen > div + div { border-left: 0; border-top: 1px solid var(--lijn); }
  .fstappen { flex-direction: column; }
  .fstappen li + li { border-left: 0; border-top: 1px solid var(--lijn); }
  .a4 { padding: 28px 20px; min-height: 0; }
  .a4 .dockop, .a4 .doctitel, .a4 .adresblok, .a4 .doctotalen, .a4 .akkoord { display: grid; grid-template-columns: 1fr; }
  .a4 table { table-layout: auto; }
  .gsm-facturen .kop-pagina { margin-bottom: 18px; }
  .fkaart .knoppen .knop { min-height: 44px; }
}
@media print {
  .pdfbalk, .akkoordvak { display: none !important; }
  .a4 { box-shadow: none; margin: 0; page-break-after: always; }
}
/* interne notitie per lijn (klant ziet dit nooit) en korting met eenheid */
.lijnen .internveld { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding-left: 4px; color: var(--let); }
.lijnen .internveld .ic { width: 12px; height: 12px; flex: none; }
.lijnen .internveld input[type=text] { flex: 1; min-height: 22px; padding: 0 4px; font-size: 12px; border: 1px dashed transparent; background: transparent; color: var(--let); }
.lijnen .internveld input[type=text]:hover, .lijnen .internveld input[type=text]:focus { border-color: var(--lijn-sterk); background: var(--ground); }
.lijnen .internveld input::placeholder { color: var(--zacht); }
.lijnen .internnoot { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--let); padding: 2px 0 0 2px; }
.lijnen .internnoot .ic { width: 12px; height: 12px; }
.lijnen td.actie { width: 72px; white-space: nowrap; text-align: right; }
.lijnen td.actie .icoonknop { width: 32px; height: 32px; }
.lijnen td.actie .icoonknop.zacht { color: var(--zacht); opacity: 0; }
.lijnen tr:hover td.actie .icoonknop.zacht, .lijnen td.actie .icoonknop.zacht:focus-visible { opacity: 1; }
@media (hover: none) { .lijnen td.actie .icoonknop.zacht { opacity: 1; } }
.lijnen .pctveld { position: relative; display: inline-block; }
.lijnen .pctveld > span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 13px/1 var(--mono); color: var(--zacht); pointer-events: none; }
.lijnen .pctveld input.w-kort { padding-right: 22px; }
.lijnen .pctveld input.kort-aan + span { color: var(--ok); }
/* facturenlijst: ⋯-menu per rij (vast gepositioneerd, zodat de tabelwrap het niet afknipt) */
.facturen td.actie { width: 48px; padding: 0 6px; text-align: right; }
.facturen td.actie .icoonknop { width: 36px; height: 36px; }
.rijmenu { position: fixed; z-index: 60; min-width: 230px; display: grid; padding: 6px 0; background: var(--rack); border: 1px solid var(--lijn-sterk); border-radius: var(--r); box-shadow: var(--schaduw, 0 8px 24px rgba(0, 0, 0, .35)); }
.rijmenu [role=menuitem] { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border: 0; background: none; color: var(--tekst); font: 500 14px/1.2 var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.rijmenu [role=menuitem]:hover, .rijmenu [role=menuitem]:focus-visible { background: var(--rack-2); outline: none; }
.rijmenu [role=menuitem] svg { width: 16px; height: 16px; flex: none; color: var(--zacht); }
.rijmenu [role=menuitem].gevaar, .rijmenu [role=menuitem].gevaar svg { color: var(--tally-tekst, var(--tally)); }
.rijmenu [data-a=weg] { border-top: 1px solid var(--lijn); margin-top: 4px; }

/* ================================================================ >>> verkoop 2 (Load.Live 1.1.1, beslissingen 7–14) */
/* documenten: SEPA-QR naast de betaalgegevens, slottekst */
.a4 .betaalinfo { display: grid; gap: 2px; align-content: start; }
.a4 .betaalinfo.met-qr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
.a4 .betaalinfo.met-qr > span { grid-column: 1; }
.a4 .epcqr { grid-column: 2; grid-row: 1 / span 6; margin: 0; display: grid; justify-items: center; gap: 2px; }
.a4 .epcqr svg { width: 104px; height: 104px; background: #fff; }
.a4 .epcqr figcaption { font-size: 9px; color: var(--zacht); }
.a4 .slottekst { margin: 14px 0 0; font-size: 11.5px; }

/* klantportaal (publieke offertepagina): tekenen, weigeren, vragen */
.portaalvakken { width: 794px; max-width: 100%; margin: 0 auto 32px; display: grid; gap: 16px; }
.portaalvakken .akkoordvak { width: auto; margin: 0; }
.akkoordvak, .vragenvak { border-top: 3px solid var(--huis, var(--lijn-sterk)); }
.tekenveld { border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.tekenveld legend { font: 600 14px/1.3 var(--body); padding: 0 4px; }
.tekenveld .sub { margin: 0; }
canvas.tekenvlak { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; display: block; background: #fff; border: 1px dashed var(--veld-rand); border-radius: var(--r-klein); touch-action: none; cursor: crosshair; }
canvas.tekenvlak:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; }
.akkoordvak details.weigeren { border-top: 1px solid var(--lijn); padding-top: 10px; }
.akkoordvak details.weigeren summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.akkoordvak details.weigeren summary::before { content: '▸'; margin-right: 8px; color: var(--zacht); }
.akkoordvak details.weigeren[open] summary::before { content: '▾'; }
.papier .akkoordvak .knop.hoofd, .akkoordvak .knop.hoofd { background: var(--huis, var(--knop)); border-color: var(--huis, var(--knop)); color: #fff; }
.akkoordvak details.weigeren summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vingerafdruk { font-size: 12px; letter-spacing: .02em; }
.vragenvak { display: grid; gap: 10px; padding: 16px 18px; }
.vragenvak h2 { font: 600 18px/1.3 var(--body); margin: 0; }
ol.draad { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.draad .bericht { max-width: 86%; padding: 8px 12px; border-radius: var(--r); background: var(--rack-2); border: 1px solid var(--lijn); }
.draad .bericht.wij { justify-self: end; background: color-mix(in srgb, var(--huis, var(--ok)) 10%, var(--rack)); }
.draad .bericht p { margin: 0; white-space: pre-line; }
.draad .bericht .wie { font-size: 12.5px; color: var(--zacht); margin-bottom: 2px; }
blockquote.reden { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--lijn-sterk); background: var(--rack-2); white-space: pre-line; }

/* aanvraagformulier (ook ingesloten op de website van de klant) */
.formulierkader .formkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.formulierkader .formlogo { max-height: 48px; max-width: 200px; object-fit: contain; }
.taalkeuze { display: flex; gap: 10px; font: 500 13px/1 var(--mono); }
.taalkeuze a { color: var(--zacht); text-decoration: none; padding: 6px 2px; }
.taalkeuze a:hover, .taalkeuze a:focus-visible { color: var(--tekst); text-decoration: underline; }
.taalkeuze b { color: var(--huis, var(--tekst)); padding: 6px 2px; border-bottom: 2px solid currentColor; }
body.aanvraagform.ingesloten { padding: 0; min-height: 0; background: transparent; }
body.aanvraagform.ingesloten .publiek-vak { max-width: none; }

/* offerte-editor: beschikbaarheid per lijn, sjabloon, klantportaal */
.beschik { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; margin: 2px 0 0 6px; border-radius: 999px; font: 500 11.5px/1.2 var(--body); white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.beschik::before { content: ''; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: currentColor; }
.beschik.vrij { background: var(--ok-zacht); color: var(--ok); }
.beschik.krap { background: var(--let-zacht); color: var(--let); }
.beschik.tekort { background: var(--tally-zacht); color: var(--tally-tekst); border-color: var(--tally); }
.beschik.onbekend { background: var(--rack-2); color: var(--zacht); }
.lijnen td.oms .beschik { margin-left: 0; margin-top: 3px; }
.artkeuze .beschik { margin: 0; }
.beschiksamen { margin: 0 0 8px; }
.beschiklijn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13.5px; }
.beschiklijn .beschik { margin: 0; }
.sjabloonrij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.sjabloonrij .veld { flex: 1 1 220px; }
.portaal .portaalgrid { gap: 16px; margin-bottom: 16px; }
.portaal h3 { font: 600 15px/1.3 var(--body); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.portaal .verzendingen { margin: 0 0 6px; }
figure.handtekening { margin: 6px 0; display: inline-grid; gap: 2px; padding: 6px 10px; background: #fff; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); }
figure.handtekening img { width: 280px; max-width: 100%; height: auto; }
figure.handtekening figcaption { font-size: 12px; color: #4F6964; border-top: 1px solid #d6d9d4; padding-top: 2px; }

/* transportofferte, bankbewegingen, export */
.veld.inline { display: inline-grid; gap: 2px; min-width: 150px; }
.ritkost td input.w-prijs, .wagenkost td input { width: 96px; }
.ritkost td input.w-aantal, .wagenkost td input.w-aantal { width: 72px; }
.transportbalk { flex-wrap: wrap; gap: 10px; }
.transportbalk select { min-width: 200px; max-width: 100%; }
table.bank b.uitgaand { color: var(--tally-tekst); }
table.bank .notitie { margin: 0; font-size: 13px; }
table.bank .notitie.let { color: var(--let); }
table.bank td.acties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.verdeel td input { width: 110px; }
.verdeel tr.markeer td { background: var(--ok-zacht); }
.verdeelsom { font: 500 14px/1.4 var(--mono); margin: 8px 0 0; }
.verdeelsom.ok { color: var(--ok); } .verdeelsom.let { color: var(--let); }
.exportkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.exportkaart { border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.exportkaart h3 { margin: 0; font: 600 16px/1.3 var(--body); }
.exportkaart p { margin: 0; }
.exportkaart .knop { justify-self: start; }
textarea.codeblok { font-size: 12.5px; white-space: pre; }
ul.herinneringen li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 720px) {
  .portaalvakken { margin-bottom: 20px; }
  .draad .bericht { max-width: 100%; }
  .ritkost td input.w-prijs { width: 72px; }
  table.bank td.acties { justify-content: flex-start; }
  .transportbalk { position: sticky; bottom: 0; }
  /* gsm: bankbewegingen en ritten als kaartjes in plaats van een brede tabel */
  table.bank thead, table.ritkost thead { display: none; }
  table.bank, table.bank tbody, table.bank tr, table.bank td, table.ritkost, table.ritkost tbody, table.ritkost tr, table.ritkost td { display: block; width: auto; }
  table.bank tr, table.ritkost tr { padding: 10px 12px; border-bottom: 1px solid var(--lijn); position: relative; }
  table.bank td, table.ritkost td { border: 0; padding: 2px 0; text-align: left; }
  table.bank td.verberg-gsm, table.ritkost td.verberg-gsm { display: none; }
  table.ritkost td:first-child { position: absolute; right: 12px; top: 10px; }
  table.ritkost td.num { display: inline-block; margin-right: 12px; }
  .inst { grid-template-columns: minmax(0, 1fr); }   /* brede tabellen (nummering) scrollen in hun tabelwrap i.p.v. de pagina te verbreden */
  table.wagenkost thead { display: none; }
  table.wagenkost, table.wagenkost tbody, table.wagenkost tr { display: block; width: auto; }
  table.wagenkost tr { padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
  table.wagenkost td { display: block; border: 0; padding: 2px 0; text-align: left; }
  table.wagenkost td[data-k] { display: inline-block; vertical-align: top; margin: 4px 14px 0 0; }
  table.wagenkost td[data-k]::before { content: attr(data-k); display: block; font-size: 12px; color: var(--zacht); }
}
.transportbalk select { flex: 0 1 300px; }
/* <<< verkoop 2 */

/* ================================================================ >>> 1.1.2 fixB (audit 1.1.1: layout gsm, toegankelijkheid, verkoop) */
/* audit 2 nr. 1 + A11Y-02: het aanvraagformulier is altijd licht (zoals .papier), ook op een donkere telefoon en ingesloten op een lichte site */
body.aanvraagform { --ground: #F2F1EC; --rack: #FBFAF7; --rack-2: #E8E7E1; --lijn: rgba(12,24,22,.13); --lijn-sterk: rgba(12,24,22,.26); --veld-rand: rgba(12,24,22,.52);
  --tekst: #0C1816; --zacht: #4F6964; --knop: #0C1816; --knop-tekst: #F5F3EF; --focus: #0C1816; --ok: #146A5E; --let: #8A5A08; --tally-tekst: #B8261B; --schaduw: 0 18px 50px rgba(12,24,22,.18);
  color-scheme: light; background: var(--ground); color: var(--tekst); }
body.aanvraagform.ingesloten { background: transparent; }
body.aanvraagform.ingesloten .paneel { box-shadow: none; }
.aanvraagform .fout:focus-visible, .akkoordvak .fout:focus-visible, .vragenvak .fout:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* audit 2 nr. 2 + A11Y-03: klantportaal op de gsm — de lijnentabel scrolt in haar eigen kader, het papier en het akkoordvak blijven 100 % breed */
.a4 .doctabel { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.publiekdoc { overflow-x: hidden; }
body.publiek { overflow-x: hidden; }
@media (max-width: 600px) {
  .a4 { padding: 20px 14px; font-size: 12px; }
  .a4 .doctabel { margin: 0 -14px; padding: 0 14px; }
  .a4 table { min-width: 0; width: 100%; font-size: 10.5px; }
  .a4 th, .a4 td { padding: 4px 3px; }
  .a4 th:nth-child(5), .a4 td:nth-child(5), .a4 th:nth-child(6), .a4 td:nth-child(6) { display: none; }   /* korting en btw-kolom: verrekend in het totaal en in de totalen eronder; de pdf toont ze wel */
  .a4 td.num, .a4 th.num { font-size: 10px; white-space: nowrap; }
  .a4 td:first-child { overflow-wrap: anywhere; }
  .a4 .doctotalen { grid-template-columns: 1fr; }
  .a4 h1 { font-size: 24px; }
  .akkoordvak, .vragenvak { padding: 14px; }
}
/* audit 2 nr. 21: geen tweede akkoordknop in het documentvoorbeeld van het portaal (het echte akkoordvak staat eronder); groter tekenvlak op smalle schermen */
.publiekdoc .a4 .akkoord .akkoordknop { display: none; }
@media (max-width: 720px) { canvas.tekenvlak { aspect-ratio: 2 / 1; max-width: none; } }
/* audit 2 nr. 6: factuurdetail op de gsm — totalen onder elkaar, mededeling mag afbreken */
@media (max-width: 720px) {
  .tabelvoet { grid-template-columns: 1fr; gap: 16px; }
  .tabelvoet .ogm { white-space: normal; overflow-wrap: anywhere; }
  .tabelvoet dl.info { grid-template-columns: 84px minmax(0, 1fr); }
  .tabelvoet dl.info dd { overflow-wrap: anywhere; }
  .totalen dd { white-space: nowrap; }
  .fact-meta > div .mono { overflow-wrap: anywhere; }
}
/* audit 2 nr. 7 + A11Y-05 + A11Y-18: offerte-editor — knoppen hoger/lager naast de greep, zichtbare veldranden (≥ 3:1), op de gsm elke lijn als kaartje */
.lijnen input[type=text], .lijnen input[type=number], .lijnen select { border-color: var(--veld-rand); }
.lijnen input.detailveld { border-color: transparent; border-bottom-color: var(--lijn-sterk); border-radius: 0; }
.lijnen input.detailveld:hover, .lijnen input.detailveld:focus { border-color: var(--veld-rand); }
.lijnen .internveld input[type=text] { border-color: transparent; border-bottom-color: var(--lijn-sterk); border-radius: 0; }
.lijnen td.volgorde { white-space: nowrap; width: auto; padding-right: 0; }
.lijnen th:first-child { width: auto; }
.lijnen .rangknoppen { display: inline-flex; flex-direction: column; gap: 0; vertical-align: middle; }
.lijnen .rangknoppen .icoonknop { width: 24px; height: 24px; min-height: 24px; padding: 0; }
.lijnen .rangknoppen .icoonknop .ic { width: 13px; height: 13px; }
.lijnen .rangknoppen .icoonknop[disabled] { opacity: .3; cursor: default; }
.lijnen td.volgorde .greep { vertical-align: middle; margin-right: 2px; }
@media (max-width: 720px) {
  .editor .tabelwrap { overflow: visible; }
  .lijnen thead { display: none; }
  .lijnen, .lijnen tbody { display: block; width: 100%; }
  .lijnen tr.groep, .lijnen tr.groep th, .lijnen tr.voeg, .lijnen tr.voeg td { display: block; width: 100%; }
  .lijnen tr.groep th { padding: 10px 12px; }
  .lijnen tr.voeg td { padding: 8px 12px 12px; }
  .lijnen tr.voeg .link { min-height: 32px; }
  .lijnen tr.voeg .link + .link { margin-left: 12px; }
  .lijnen tr[data-id] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 12px 14px; border-top: 1px solid var(--lijn); align-items: end; }
  .lijnen tr[data-id] td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0; }
  .lijnen tr[data-id] td.oms { grid-column: 1 / -1; grid-row: 1; }
  .lijnen tr[data-id] td.volgorde { grid-column: 1 / 3; grid-row: 6; display: flex; align-items: center; gap: 6px; }
  .lijnen tr[data-id] td.actie { grid-column: 3; grid-row: 6; text-align: right; }
  .lijnen tr[data-id] td.totaal { grid-column: 1 / -1; text-align: right; font-size: 15px; padding-top: 4px !important; border-top: 1px dashed var(--lijn) !important; }
  .lijnen tr[data-id] td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); margin-bottom: 2px; }
  .lijnen tr[data-id] td.totaal::before { display: inline; margin-right: 8px; }
  .lijnen .w-aantal, .lijnen .w-eenh, .lijnen .w-dagen, .lijnen .w-prijs, .lijnen .w-btw, .lijnen .pctveld, .lijnen .pctveld input.w-kort { width: 100%; }
  .lijnen .rangknoppen { flex-direction: row; gap: 4px; }
  .lijnen .rangknoppen .icoonknop { width: 32px; height: 32px; min-height: 32px; }
  .lijnen td.volgorde .greep { display: none; }   /* op de gsm: knoppen i.p.v. slepen */
  .lijnen td.actie .icoonknop.zacht { opacity: 1; }
  .lijnen tr[data-id]:not(:has(input)) { grid-template-columns: 1fr 1fr; }   /* alleen-lezen (verstuurde offerte) */
  .lijnen tr[data-id]:not(:has(input)) td { font-size: 13.5px; }
}
/* audit 2 nr. 8: verdelen-dialoog — eigen klant eerst, andere klanten ingeklapt; op de gsm kaartjes met nummer en klant */
.verdeel-andere { border-top: 1px solid var(--lijn); padding-top: 8px; margin-top: 4px; }
.verdeel-andere summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; gap: 8px; }
.verdeel-andere summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.verdeel-andere .veld { margin: 8px 0; }
.verdeel td.mono.nw { white-space: nowrap; }
@media (max-width: 720px) {
  .verdeel { overflow: visible; }
  .verdeel thead { display: none; }
  .verdeel table, .verdeel tbody { display: block; width: 100%; }
  .verdeel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--lijn); align-items: center; }
  .verdeel tr[hidden] { display: none; }
  .verdeel td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; background: transparent; }
  .verdeel tr.markeer { background: var(--ok-zacht); padding-left: 8px; padding-right: 8px; border-radius: var(--r-klein); }
  .verdeel td[data-l="Factuur"] { grid-column: 1; grid-row: 1; }
  .verdeel td[data-l="Klant"] { grid-column: 1; grid-row: 2; }
  .verdeel td[data-l="Open"] { grid-column: 2; grid-row: 1; text-align: right !important; }
  .verdeel td[data-l="Deel (€)"] { grid-column: 2; grid-row: 2; }
  .verdeel td[data-l="Open"]::before, .verdeel td[data-l="Deel (€)"]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
  .verdeel td input { width: 110px; }
}
/* audit 2 nr. 10 + A11Y-19: transportofferte — keuzevakje 24 px in een klikbaar label, labels bij tol/overnachting/kost/prijs op de gsm */
.kiesvak { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.kiesvak input { width: 24px; height: 24px; margin: 0; accent-color: var(--tally); cursor: pointer; }
.ritkost th.kies, .ritkost td.kies { width: 40px; padding-left: 6px; padding-right: 6px; }
@media (max-width: 720px) {
  table.ritkost td:first-child { position: absolute; right: 8px; top: 8px; }
  table.ritkost tr { padding-right: 52px; }
  table.ritkost td.num { display: inline-block; vertical-align: top; margin: 6px 14px 0 0; }
  table.ritkost td.num[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
  table.ritkost td.num input.w-prijs { width: 84px; }
  table.ritkost td.num .sub { white-space: nowrap; }
  .transportbalk .knop.hoofd { min-height: 44px; }
}
/* audit 2 nr. 9: lijsten op de gsm als kaartjes met labels (sjablonen, openstaande posten); nummers breken niet meer */
@media (max-width: 720px) {
  table.sjablonen-lijst thead, table.openstaand-lijst thead { display: none; }
  table.sjablonen-lijst, table.sjablonen-lijst tbody, table.openstaand-lijst, table.openstaand-lijst tbody { display: block; width: 100%; }
  table.sjablonen-lijst tr, table.openstaand-lijst tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--lijn); align-items: center; }
  table.sjablonen-lijst tr:first-child, table.openstaand-lijst tr:first-child { border-top: 0; }
  table.sjablonen-lijst td, table.openstaand-lijst td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
  table.sjablonen-lijst td.verberg-gsm { display: none; }
  table.sjablonen-lijst td[data-l="Sjabloon"] { grid-column: 1 / -1; }
  table.sjablonen-lijst td.acties { grid-column: 1 / -1; }
  table.sjablonen-lijst td.acties .knop { width: 100%; min-height: 40px; }
  table.sjablonen-lijst td[data-l]:not([data-l="Sjabloon"])::before, table.openstaand-lijst td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
}
.openstaand-lijst td.nw, .sjablonen-lijst td.nw { white-space: nowrap; }
/* audit 2 nr. 14/23 + A11Y-14: instellingen — velden in een rij onderaan uitgelijnd, knoppen in één rij even hoog, Peppol-chip breekt op 320 px */
.inst .rij.vier, .inst .rij.drie { align-items: end; }
.inst .knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inst .knoppenrij .knop { min-height: 36px; }
@media (max-width: 400px) {
  .inst-sectie > header { flex-wrap: wrap; }   /* "Automatisch versturen" naast de kop stak 2 px uit op 320 px */
  .inst-sectie > header .vink { min-width: 0; }
  .inst-sectie > header .vink > span { overflow-wrap: anywhere; }
  .peppolkaart { grid-template-columns: auto minmax(0, 1fr); }
  .peppolkaart .status { grid-column: 1 / -1; white-space: normal; justify-self: start; }
}
.inst .veld input.num { text-align: right; font-family: var(--mono); }
/* A11Y-08: zichtbare focus in het ⋯-menu (≥ 3:1, niet enkel een vlakverandering) */
.rijmenu [role=menuitem]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* A11Y-13: kop van de exportkaarten is een h2 */
.exportkaart h2 { margin: 0; font: 600 16px/1.3 var(--body); display: block; }
/* <<< 1.1.2 fixB */