/* DEMCA Service — de huisstijl van demca.nl: antraciet en amber. Elke kleur staat
   hier, één keer; een regel hieronder noemt alleen een naam. */
/* Open Sans (latin), zoals demca.nl, als bestand naast deze stijl: niets van internet (R5). */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("lettertypen/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("lettertypen/open-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("lettertypen/open-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("lettertypen/open-sans-800.woff2") format("woff2"); }
:root {
  /* de zijbalk */
  --zij: #191919; --zij-tekst: #f1f0ec; --zij-stil: #a8a59c;
  --zij-veld: #262626; --zij-veld2: #3a3a3a; --zij-lijn: #3a3a3a; --zij-actief: rgba(255, 255, 255, 0.07);
  /* het merk: amber met donkere tekst erop, en amber als tekst op wit */
  --accent: #f8b60c; --op-accent: #191919;
  /* een link is antraciet, onderstreept bij aanwijzen (stap 85); amber is het merk en de hoofdknop */
  --link: #2b2a26;
  /* het werkvlak */
  --grond: #f6f5f2; --vlak: #ffffff; --vlak-zacht: #faf9f6;
  --tekst: #191919; --stil: #64615a; --lijn: #e5e3dc; --dof: #eeece6;
  /* kleur = betekenis (stap 85): vier namen, elk één vraag — moet ik hier iets? */
  --wacht: #7a5000; --wacht-grond: #fdf1cf; --wacht-lijn: #ecd08a;   /* ja, er moet iets van jou */
  --klaar: #2f6b3a; --klaar-grond: #e6f0e7;                           /* nee, het is gedaan */
  --rust: #5c5952; --rust-grond: #eeece6;                             /* nee, er hoeft niets */
  --gevaar: #9b2c1f; --gevaar-grond: #fbeae7; --gevaar-lijn: #e2b4ad; /* ja, er is iets mis */
  /* de proef op de server (stap 71) */
  --proef: #c0392b; --op-proef: #ffffff;
  /* vier lettermaten naast de gewone tekst (1rem) en de paginakop */
  --letter-klein: 0.75rem; --letter-smal: 0.875rem; --letter-kop: 1.1rem; --letter-groot: 1.5rem;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* de enige curve (stap 76): snel weg, zacht aan, voor een knop die ingedrukt wordt */
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
  /* ruimte in stappen van 8 px (stap 85); de halve stap alleen binnen een label of knop */
  --r-half: 4px; --r1: 8px; --r2: 16px; --r3: 24px; --r4: 32px; --r6: 48px; --r8: 64px;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Verdana, sans-serif;
  /* de hoogte van een staafje op het manageroverzicht (stap 99); elk staafje zet zijn eigen */
  --hoogte: 0%;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grond); color: var(--tekst);
  font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
/* De zijbalk (stap 45): merk, zoeken, het menu van de ingang, en onderaan de wisselaar (stap 96). */
.schil { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rechts { min-width: 0; }
.balk {
  display: flex; flex-direction: column; gap: var(--r2); position: sticky; top: 0; height: 100vh;
  overflow-y: auto; padding: var(--r2) var(--r2); background: var(--zij); color: var(--zij-tekst);
  height: 100dvh;
}
.merk { display: block; padding: 0 var(--r1); line-height: 1.1; text-transform: uppercase;
        color: inherit; text-decoration: none; }
.merk img { display: block; width: 8.5rem; height: auto; }
.merk span { display: block; margin-top: var(--r-half); font-size: var(--letter-klein); font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent); }
.balk nav { display: flex; flex-direction: column; gap: 0; }
.balk nav a { display: flex; align-items: center; gap: var(--r1);
  color: var(--zij-stil); text-decoration: none; padding: var(--r1) var(--r1); white-space: nowrap;
  border-left: 4px solid transparent; border-radius: 0 6px 6px 0; }
.balk nav a.actief { color: var(--vlak); font-weight: 600; background: var(--zij-actief);
  border-left-color: var(--accent); }
.teller { font: 600 var(--letter-klein) var(--mono); background: var(--zij-veld2); color: var(--zij-tekst);
  border-radius: 999px; padding: 0 var(--r1); }
.teller.werk { background: var(--accent); color: var(--op-accent); }
/* Stap 96: de wisselaar tussen de vier ingangen, klein onderaan; de huidige is wit. */
.balk .wisselaar { margin: auto 0 0; padding: var(--r-half) var(--r1); font-size: var(--letter-smal); color: var(--zij-stil); }
.balk .wisselaar a { color: var(--zij-stil); text-decoration: none; }
.balk .wisselaar a.gekozen { color: var(--vlak); font-weight: 600; }
/* Stap 102: uitloggen is een POST; het knopje ziet eruit als de links ernaast. */
form.uitloggen { display: inline; margin: 0; }
form.uitloggen button { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* Stap 84: een icoon per knop, in de tekstkleur; de teller rechts; een kopje per groep. */
.icoon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.balk nav .teller { margin-left: auto; }
.balk nav .groep { margin: var(--r2) 0 var(--r-half) var(--r2); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--zij-stil); }
.balk nav .groep:first-child { margin-top: 0; }
.kopzoek { margin: 0; }
.kopzoek input { font: inherit; font-size: 1rem; width: 100%; padding: var(--r1) var(--r1);
  border: 1px solid var(--zij-lijn); border-radius: 6px; background: var(--zij-veld); color: var(--vlak); }
.kopzoek input::placeholder { color: var(--zij-stil); }
.kopzoek input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* Smaller dan een laptop: de zijbalk wordt een balk bovenaan. Hoe die eruitziet staat
   bij stap 78 onderaan (één regel met Menu, sinds stap 81 tot 900 px). */
@media (max-width: 899px) {
  .schil { display: block; }
  .balk { position: static; height: auto; flex-direction: row; }
}
main { max-width: 1180px; margin: 0 auto; padding: var(--r4) var(--r4) var(--r8); }
main a { color: var(--link); text-underline-offset: 3px; }
/* Stap 76: in een lijst is de hele rij de link naar wat in de eerste cel staat; andere
   links en knoppen in de rij liggen erboven en blijven te klikken. */
.lijst tbody tr { position: relative; }
.lijst tbody td:first-child > a:first-of-type::after { content: ""; position: absolute; inset: 0; }
.lijst tbody td:not(:first-child) :is(a, button, form, input, select, label) { position: relative; z-index: 1; }
h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--r2); }
.stil { color: var(--stil); }
.mono { font-family: var(--mono); font-size: 0.92em; }

.kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 0 var(--r4); flex-wrap: wrap; }
.tellers { display: flex; gap: var(--r4); margin: 0 0 var(--r2); }
.tellers div { text-align: right; }
.tellers dt { font-size: var(--letter-klein); color: var(--stil); }
.tellers dd { margin: 0; font-size: var(--letter-groot); font-weight: 600; font-variant-numeric: tabular-nums; }
.zoek { display: flex; align-items: center; gap: var(--r2); margin: var(--r1) 0 var(--r2); }
.zoek input {
  flex: 1; font: inherit; font-size: 1rem; padding: var(--r1) var(--r2);
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak);
}
.zoek input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.aantal { color: var(--stil); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Stap 77: de kop van een lijst — de tellers als één regel die filtert; wat gekozen
   is amber onderstreept, een nul grijs. Beheer onderaan. */
.telregel { display: flex; flex-wrap: wrap; gap: 0 var(--r2); list-style: none; margin: 0 0 var(--r1); padding: 0; }
.telregel a { display: inline-block; padding: var(--r-half) 0; color: var(--stil); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.telregel a b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.telregel a.gekozen { color: var(--tekst); font-weight: 600; border-bottom-color: var(--accent); }
.telregel a.nul { opacity: 0.55; }
.beheer { margin: var(--r3) 0 0; font-size: var(--letter-smal); }
.beheer a { color: var(--stil); }
/* Stap 83: te factureren per klant op Werkbonnen. */
.sectie-kop { font-size: var(--letter-klein); letter-spacing: .08em; text-transform: uppercase; color: var(--stil); font-weight: 700; margin: var(--r2) 0 var(--r1); }
.zonder-stapel { list-style: none; margin: 0; padding: 0; }
.zonder-stapel li { padding: var(--r1) 0; border-top: 1px solid var(--lijn); }
.lijst.perklant td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 600px) {
  /* Op de telefoon één regel die binnen zijn eigen strook schuift, zoals een brede tabel. */
  .telregel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
.tabelvak { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 12px; }
.tabelvak + .blok { margin-top: var(--r3); }
.lijst { width: 100%; border-collapse: collapse; background: var(--vlak); }
.lijst th { position: sticky; top: 0; background: var(--vlak-zacht); text-align: left;
            font-size: var(--letter-klein); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--stil);
            padding: var(--r1) var(--r2); border-bottom: 1px solid var(--lijn); }
.lijst td { padding: var(--r1) var(--r2); border-bottom: 1px solid var(--lijn); vertical-align: top; }
/* Stap 88: cijfers met een vaste breedte in elke tabel en elk gegeven; mono alleen voor codes. */
.lijst td, .gegevens dd { font-variant-numeric: tabular-nums; }
.lijst td { line-height: 1.4; }
.lijst td.datum, .lijst td.getal { white-space: nowrap; }
.lijst tbody tr:last-child td { border-bottom: 0; }
.lijst a { color: var(--link); text-decoration: none; }
.getal { text-align: right; font-variant-numeric: tabular-nums; }
.leeg { text-align: center; color: var(--stil); padding: var(--r4); }
.leeg .verder { white-space: nowrap; }
/* Stap 94: het klaarzetformulier. */
.klaarzetten .keuze-regel { display: block; margin: var(--r-half) 0; }
.klaarzetten .machine-kies { display: flex; flex-wrap: wrap; gap: var(--r1); align-items: center; margin: var(--r1) 0; }
.klaarzetten .machine-kies input[name^="melding_"] { flex: 1 1 14rem; }
.klaarzetten textarea { width: 100%; }
.klaarzetten :is(input:not([type=radio]):not([type=checkbox]), select, textarea) { font: inherit; padding: var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); }
.klaarzetten .gegevens label { display: flex; flex-direction: column; gap: var(--r-half); font-size: var(--letter-smal); color: var(--stil); }
/* Stap 120: een invulformulier onder elkaar — label boven het veld, alles even breed. */
.invulvorm { display: flex; flex-direction: column; gap: var(--r2); max-width: 32rem; }
.invulvorm label { display: flex; flex-direction: column; gap: var(--r-half); font-size: var(--letter-smal); color: var(--stil); }
.invulvorm :is(input:not([type=checkbox]):not([type=file]), select) { font: inherit; font-size: 16px; padding: var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); width: 100%; box-sizing: border-box; }
.invulvorm label.vinkje { flex-direction: row; align-items: center; gap: var(--r1); color: var(--tekst); }
.invulvorm .zipkeuze { font-weight: 600; color: var(--tekst); }
.invulvorm input[type=file] { font: inherit; }
.invulvorm input[type=file]::file-selector-button { font: inherit; padding: var(--r1) var(--r2); margin-right: var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); cursor: pointer; }
.invulvorm > p { margin: 0; }
.invulvorm .meer { display: flex; flex-direction: column; gap: var(--r2); }
.invulvorm .meer[open] > summary { margin-bottom: var(--r1); }
.invulvorm button[type=submit] { align-self: flex-start; }
.invulvorm .bezig-uitleg { display: none; }
.invulvorm:has(button[aria-busy="true"]) .bezig-uitleg { display: block; }
/* Stap 69: de handtekening van de klant op de bonpagina. */
.handtekening { max-width: 100%; height: auto; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; }
/* Stap 85: twee soorten label. Een *staat* is gevuld in zijn betekenis (kaal = rust);
   een *kenmerk* zegt wat iets is, en is alleen omlijnd. */
.label { display: inline-block; font-size: var(--letter-klein); line-height: 1rem; padding: var(--r-half) var(--r1);
         border-radius: 999px; border: 1px solid transparent; color: var(--rust); background: var(--rust-grond); }
.lijst .label { white-space: nowrap; }
.label.wacht { color: var(--wacht); background: var(--wacht-grond); }
.label.klaar { color: var(--klaar); background: var(--klaar-grond); }
.label.gevaar { color: var(--gevaar); background: var(--gevaar-grond); }
.label.kenmerk { color: var(--stil); background: none; border-color: var(--lijn); }
.zoek { flex-wrap: wrap; }
.filters { display: flex; gap: var(--r1); flex-wrap: wrap; }
.filters select {
  font: inherit; padding: var(--r1) var(--r1); border: 1px solid var(--lijn);
  border-radius: 8px; background: var(--vlak); max-width: 16rem;
}
.lijst th a.sorteer { color: inherit; text-decoration: none; white-space: nowrap; }
.lijst th.gesorteerd { color: var(--tekst); }

.terug { margin: 0 0 var(--r1); }
.terug a, .blok h2 a { color: var(--stil); text-decoration: none; }
.klantkop { display: flex; justify-content: space-between; gap: var(--r4); flex-wrap: wrap;
            background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
            padding: var(--r2) var(--r3); margin-bottom: var(--r3); }
.klantkop h1 { margin: 0 0 var(--r-half); }
.klantkop p { margin: 0; }
/* Stap 86: de kop van een pagina over één ding — de naam, rechts de handeling, en de drie
   feiten die tellen, groot. */
.paginakop { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
  padding: var(--r3); margin: 0 0 var(--r3); }
.kopregel { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r2); flex-wrap: wrap; }
.kopregel h1 { margin: 0; }
.kopregel p { margin: var(--r-half) 0 0; }
.kophandeling { display: flex; gap: var(--r1); flex-wrap: wrap; align-items: center; }
.kophandeling form { margin: 0; }
.kophandeling .knop.hoofd { display: inline-block; padding: var(--r1) var(--r2); border-radius: 6px;
  text-decoration: none; font-weight: 700; }
.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r3);
  margin: var(--r3) 0 0; padding: var(--r3) 0 0; border-top: 1px solid var(--lijn); }
.feit { min-width: 0; }
.feit dt { font-size: var(--letter-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stil); margin: 0 0 var(--r1); }
.feit dd { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; }
.feit dd a { color: var(--link); text-decoration: none; }
.feit dd .stil { display: block; font-size: var(--letter-smal); font-weight: 400; margin: var(--r-half) 0 0; }
/* Stap 129: het contactblok van het klantoverzicht — naam, het nummer groot, het e-mailadres
   klein, elk op een eigen regel (het staat niet in een `.feit dd`). */
[data-contact] a.groot { display: block; margin: var(--r-half) 0 0; font-size: 1.25rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--link); text-decoration: none; }
[data-contact] a.klein { display: block; margin: var(--r-half) 0 0; font-size: var(--letter-smal); color: var(--link); text-decoration: none; }
.feit dd .fasebalk { margin: 0; font-size: var(--letter-smal); }
/* Stap 127: de machinepagina — onder het type serienummer, fabrikant en bouwjaar; zonder
   klant het koppelformulier in de kop, in gewone letter. */
.paginakop .machinesub { margin: var(--r-half) 0; }
.feit dd form.regel { font-size: var(--letter-smal); font-weight: 400; margin: var(--r1) 0 0; }
.paginakop > .gegevens { max-width: none; margin: var(--r3) 0 0; }
.paginakop > .meer { margin: var(--r2) 0 0; }
.paginakop > .meer summary { cursor: pointer; color: var(--stil); }
.gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
            gap: var(--r1) var(--r4); margin: 0; flex: 1 1 18rem; min-width: 0; max-width: 46rem; }
.gegevens dt { font-size: var(--letter-klein); color: var(--stil); }
.gegevens dd { margin: 0; }
.gegevens a, .contacten a { color: var(--link); text-decoration: none; }
.blok { margin: 0 0 var(--r3); }
.blok h2 { font-size: var(--letter-kop); margin: 0 0 var(--r1); display: flex; gap: var(--r2); align-items: baseline; }
.contacten { list-style: none; margin: 0; padding: 0; display: grid;
             grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--r1); }
.contacten li { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r2); }
.contactnaam { font-weight: 600; display: flex; gap: var(--r1); align-items: center; flex-wrap: wrap; }
.contacten details { margin-top: var(--r-half); font-size: var(--letter-smal); }
.notitie { white-space: pre-line; margin: var(--r-half) 0 0; }
.blok .leeg { background: var(--vlak); border: 1px dashed var(--lijn); border-radius: 8px;
              padding: var(--r2); margin: 0; text-align: left; }

/* Stap 46: de documentatie bovenaan de machinepagina als knoppen. */
.documentknoppen { display: flex; gap: var(--r1); flex-wrap: wrap; margin: 0; }
.documentknoppen .knop { padding: var(--r1) var(--r2); border-radius: 6px; text-decoration: none;
  background: var(--accent); color: var(--op-accent); border: 1px solid var(--accent); }
.documentknoppen .knop .stil { color: inherit; opacity: 0.75; }
.documentknoppen .knop.licht { background: var(--vlak); color: var(--link); }
.knop.icoonknop { display: inline-flex; align-items: center; gap: var(--r-half); }
.knop.icoonknop .icoon { width: 1.25em; height: 1.25em; }
.knop.uit { opacity: .45; cursor: default; }
.oudenamen { margin: 0; padding-left: var(--r2); }

.tabbladen { display: flex; gap: var(--r-half); border-bottom: 1px solid var(--lijn); margin: 0 0 var(--r2);
             overflow-x: auto; }
.tabbladen a { white-space: nowrap; }
.tabbladen a { color: var(--stil); text-decoration: none; padding: var(--r1) var(--r2);
               border-bottom: 2px solid transparent; margin-bottom: 0; }
.tabbladen a.actief { color: var(--tekst); font-weight: 600; border-bottom-color: var(--link); }
.waarschuwing { background: var(--wacht-grond); color: var(--wacht);
                border: 1px solid var(--wacht-lijn); border-radius: 8px; padding: var(--r1) var(--r2); margin: 0 0 var(--r2); }
.toestanden { list-style: none; margin: 0; padding: 0; display: grid;
              grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--r1); }
.toestanden a { display: flex; gap: var(--r1); align-items: baseline; background: var(--vlak);
                border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r2);
                color: var(--tekst); text-decoration: none; }
/* Stap 74: het tabblad dat je ziet — ook als de pagina het zelf koos. */
.toestanden a.gekozen { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--accent); color: var(--tekst); font-weight: 600; }
.toestanden .getal { font-weight: 600; min-width: 3rem; }
/* Op Vandaag is de hele regel de tegel: de hoofdlink en eronder de stapel (stap 39). */
/* Stap 87: Vandaag in tegels — het getal groot, de hele tegel klikbaar; de link naar de
   oudste ligt erboven. Wacht in zijn betekenis, Na te lopen in rust. */
.tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2);
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.tegel { position: relative; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
  padding: var(--r2); }
.tegel.wacht { border-color: var(--wacht-lijn); box-shadow: inset 4px 0 0 var(--wacht-lijn); }
.tegel .tegelnaam { display: block; color: var(--tekst); text-decoration: none; }
.tegel .tegelnaam::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.tegel .tegelgetal { display: block; font-size: 2.5rem; line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; margin: 0 0 var(--r1); }
.tegel .tegelnaam span { display: block; font-weight: 600; }
.tegel.rust .tegelgetal { color: var(--rust); }
.tegel small { display: block; margin: var(--r-half) 0 0; font-size: var(--letter-smal); }
.tegel small a { position: relative; z-index: 1; color: var(--link); }
/* Stap 99: gefactureerd per maand als twaalf staafjes, zonder bibliotheek. De hoogte staat
   per staafje in --hoogte (procent van de hoogste maand); het bedrag in de title. */
.staven { list-style: none; margin: 0 0 var(--r1); padding: 0; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--r-half); height: 10rem; align-items: end; }
.staaf { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.staafbalk { display: block; height: var(--hoogte); min-height: 1px; background: var(--accent); border-radius: 3px 3px 0 0; }
.staafnaam { display: block; text-align: center; font-size: var(--letter-smal); color: var(--stil); padding-top: var(--r-half); }
/* Stap 100: Blijft liggen is oranje als er iets in staat (kleur = betekenis: er moet iets). */
.blok.wacht { border-left: 4px solid var(--wacht-lijn); padding-left: var(--r2); }
.blok h3, .blok h4 { font-size: 1rem; margin: var(--r2) 0 var(--r-half); }
.blok h4 { font-size: var(--letter-smal); }
@media (max-width: 600px) {
  /* Uren per monteur als kaartjes, zoals Gefactureerd (stap 81): per monteur de naam en
     dan per week "W42 1,5". */
  .lijst.uren thead { display: none; }
  .lijst.uren, .lijst.uren tbody { display: block; }
  .lijst.uren tr { display: flex; flex-wrap: wrap; gap: var(--r-half) var(--r2); padding: var(--r1) var(--r2);
    border-top: 1px solid var(--lijn); }
  .lijst.uren tbody tr:first-child { border-top: 0; }
  .lijst.uren td { display: block; padding: 0; border: 0; text-align: left; }
  .lijst.uren td:first-child { flex-basis: 100%; font-weight: 600; }
  .lijst.uren td[data-kop]::before { content: attr(data-kop) " "; color: var(--stil); font-size: var(--letter-smal); }
}
.toestand.in_orde, .toestand.niet_in_outsmart, .toestand.uitgezet, .toestand.verborgen { color: var(--klaar); }
.toestand.dubbel_nummer, .toestand.dubbel_in_outsmart, .toestand.btw_onbekend,
.toestand.adres_onvolledig, .toestand.extra_met_werkbonnen, .toestand.zonder_nummer { color: var(--wacht); }
.verslag pre { white-space: pre-wrap; font-family: var(--mono); font-size: var(--letter-smal);
               background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r2); }
.verschil, .waarde { font-size: var(--letter-smal); }
.waarde div { overflow-wrap: anywhere; }
.onzeker { color: var(--gevaar); font-weight: 600; }

.takenvak .bezig, .takenvak .handeling { background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 8px; padding: var(--r1) var(--r2); margin: 0 0 var(--r2); }
.takenvak .bezig { border-color: var(--link); }
.takenvak .mislukt { border-color: var(--gevaar-lijn); }
.takenvak p { margin: var(--r-half) 0; }
.takenvak pre, .handelingvak pre { white-space: pre-wrap; font-family: var(--mono); font-size: var(--letter-smal);
  max-height: 18rem; overflow: auto; margin: var(--r1) 0 0; }
.knoppen { display: flex; gap: var(--r1); align-items: center; flex-wrap: wrap; margin-top: var(--r2); }
.knoppen form, .lijst td form { margin: 0; }
/* Stap 76: vier soorten knop, elk met één taak. Gewoon (zonder klasse) is de rest;
   hoofd is de knop waarvoor je hier bent, hoogstens één per formulier; stil is wat kan
   maar waar je meestal niet voor komt; gevaar maakt iets los, zet iets uit of draait
   iets terug. Ingedrukt wordt een knop 3 % kleiner: je voelt dat hij gehoord is. Niets
   anders beweegt — Kantoor gebruik je tientallen keren per dag. */
button { font: inherit; padding: var(--r1) var(--r2); border: 1px solid var(--lijn); border-radius: 6px;
  background: var(--vlak); color: var(--link); cursor: pointer; white-space: nowrap;
  transition: transform 120ms var(--uit), background-color 150ms ease, border-color 150ms ease; }
button.hoofd, .knop.hoofd { background: var(--accent); border-color: var(--accent); color: var(--op-accent); font-weight: 700; }
button.stil { background: none; border-color: transparent; color: var(--link); text-decoration: underline;
  text-underline-offset: 3px; padding-inline: var(--r-half); }
button.gevaar { border-color: var(--gevaar-lijn); color: var(--gevaar); }
button:active:not(:disabled), .knop:active { transform: scale(0.97); }
button:disabled { color: var(--stil); background: var(--vlak); border-color: var(--lijn); cursor: default; }
button[aria-busy="true"] { cursor: progress; }
.handelingvak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
  padding: var(--r2) var(--r3); max-width: 52rem; }
.handelingvak .bevestig { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; margin-top: var(--r2); }
.handelingvak .bevestig input[name=klant_nummer] { font: inherit; padding: var(--r1) var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; margin-left: var(--r1); }
.overschrijven { color: var(--wacht); }

/* Werkbonnen (stap 10): de fase als kleur, tegels die filteren. */
.fase { display: inline-block; font-size: var(--letter-klein); font-weight: 600; line-height: 1rem;
        padding: var(--r-half) var(--r1); border-radius: 999px; white-space: nowrap; }
/* Stap 74: de staat van een bon is het tabblad; stap 85: in zijn betekenis. */
.fase.open, .fase.archief { color: var(--rust); background: var(--rust-grond); }
.fase.afgerond, .fase.te_factureren { color: var(--wacht); background: var(--wacht-grond); }
.fase.gefactureerd { color: var(--klaar); background: var(--klaar-grond); }
/* Stap 50: in OutSmart gearchiveerd — niet meer relevant, vaak een verkeerde bon. De regel
   verbleekt; het label is rust. */
tr.gearchiveerd > td { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--dof) 8px 16px); }
tr.gearchiveerd > td, tr.gearchiveerd > td a { color: var(--stil); }
.bonnen li.gearchiveerd, .bonnen li.gearchiveerd a { color: var(--stil); }
.bonkop h1 { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }
/* Stap 48: de fase als één balk; wat klaar is gedempt, wat nu is in de kleur. */
.fasebalk { display: flex; flex-wrap: wrap; gap: var(--r-half); list-style: none; margin: var(--r1) 0 var(--r1); padding: 0; }
.fasebalk li { padding: var(--r-half) var(--r2); font-size: var(--letter-smal); background: var(--dof); color: var(--stil);
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%, 0.5rem 50%); }
.fasebalk li:first-child { clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%); }
.fasebalk li.klaar { background: var(--klaar-grond); color: var(--klaar); }
.fasebalk li.nu { background: var(--tekst); color: var(--vlak); font-weight: 600; }
@media (max-width: 600px) {
  .fasebalk { flex-wrap: nowrap; gap: var(--r-half); }
  .fasebalk li { padding: var(--r-half) var(--r1) var(--r-half) var(--r1); font-size: var(--letter-klein); white-space: nowrap; }
}
.reden { margin: var(--r-half) 0 var(--r1); max-width: 34rem; }
.werk h3 { font-size: var(--letter-klein); font-weight: 600; color: var(--stil); margin: var(--r2) 0 var(--r-half); }
.bontekst { white-space: pre-line; margin: 0; background: var(--vlak); border: 1px solid var(--lijn);
            border-radius: 8px; padding: var(--r2) var(--r2); max-width: 52rem; }
/* Een lange tekst op de bonpagina: vier regels, en 'hele tekst' om uit te klappen (stap 40). */
.bontekst-lang > summary { list-style: none; cursor: pointer; }
.bontekst-lang > summary::-webkit-details-marker { display: none; }
.bontekst.ingeklapt > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bontekst-lang .meer { display: inline-block; margin: var(--r-half) 0 0; color: var(--link); font-size: var(--letter-smal); }
.bontekst-lang[open] > summary .ingeklapt { display: none; }
.bontekst-lang .meer .open, .bontekst-lang[open] .meer .dicht { display: none; }
.bontekst-lang[open] .meer .open { display: inline; }
.bontekst-lang[open] > summary { order: 2; }
.bontekst-lang[open] { display: flex; flex-direction: column; }
.fotos { display: flex; gap: var(--r1); flex-wrap: wrap; }
.fotos img { height: 150px; width: auto; border-radius: 6px; border: 1px solid var(--lijn); }
.verloop { margin: 0; padding-left: var(--r2); }
.verloop li { margin: var(--r-half) 0; }
.werkbonnen td.mono { white-space: nowrap; }

/* De machinepagina (stap 13): de bonnen als lijst, zodat hij op een telefoon leesbaar blijft. */
.labels { display: flex; gap: var(--r1); flex-wrap: wrap; margin: var(--r1) 0 0; }
mark { background: var(--wacht-grond); color: inherit; border-radius: 3px; padding: 0 var(--r-half); }   /* stap 112: de zoekwoorden */
.bonnen { list-style: none; margin: 0; padding: 0; background: var(--vlak);
          border: 1px solid var(--lijn); border-radius: 8px; }
.bonnen li { padding: var(--r1) var(--r2); border-bottom: 1px solid var(--lijn); }
.bonnen li:last-child { border-bottom: 0; }
.bonregel { display: flex; gap: var(--r1); align-items: center; flex-wrap: wrap; }
.bonnen a { color: var(--link); text-decoration: none; }
.bonnen details { margin-top: var(--r-half); font-size: var(--letter-smal); }

/* Een telefoon: minder rand, zodat de monteur onderweg niet zijwaarts hoeft te schuiven. */
@media (max-width: 600px) {
  h1 { font-size: 1.35rem; }
  .lijst { font-size: var(--letter-smal); }
  .lijst th { padding: var(--r1) var(--r1); letter-spacing: 0.03em; }
  .lijst td { padding: var(--r1) var(--r1); }
  .tabbladen { flex-wrap: wrap; overflow-x: visible; }
  .tabbladen a { padding: var(--r1) var(--r1); }
  .filters { flex-basis: 100%; }
  .filters select { flex: 1 1 100%; max-width: none; }
  .tellers { gap: var(--r2); }
  .tellers div { text-align: left; }
  .rondebalk { padding: var(--r1) var(--r2); }
  main { padding: var(--r2) var(--r2) var(--r6); }
  .klantkop { padding: var(--r2); gap: var(--r2); }
  .paginakop { padding: var(--r2); }
  .feiten { grid-template-columns: minmax(0, 1fr); gap: var(--r2); }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r1); }
  .tegel .tegelgetal { font-size: 2rem; }
  .gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r1) var(--r2); }
  .gegevens dd { overflow-wrap: anywhere; }
}

.taal { font-family: var(--mono); font-weight: 600; }

/* Koppelingen (stap 15): per bon een kaart met de kandidaat-factuur en twee knoppen. */
.koppelingen .uitleg { max-width: 52rem; margin: 0 0 var(--r2); }
.gedaan { background: var(--klaar-grond); color: var(--klaar); border-radius: 8px; padding: var(--r1) var(--r2); }
.jaren { display: flex; gap: var(--r1); flex-wrap: wrap; margin: 0 0 var(--r2); }
.jaren a { color: var(--tekst); text-decoration: none; background: var(--vlak); border: 1px solid var(--lijn);
           border-radius: 999px; padding: var(--r-half) var(--r2); }
.jaren a.actief { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--accent); }
.paren { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r1); }
.paar { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r2) var(--r2); }
.paar a { color: var(--link); text-decoration: none; }
.paarkop { display: flex; gap: var(--r1); align-items: baseline; flex-wrap: wrap; }
.paar p { margin: var(--r-half) 0; }
.bewijs { margin: var(--r-half) 0 var(--r1); padding-left: var(--r2); font-size: var(--letter-smal); color: var(--stil); }
.paar details, .zonder { margin: var(--r1) 0; }
.paar summary, .zonder summary { cursor: pointer; display: flex; gap: var(--r1); flex-wrap: wrap; align-items: center; }
.kanten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--r2); margin-top: var(--r1); }
.kanten h3 { font-size: var(--letter-klein); font-weight: 600; color: var(--stil); margin: 0 0 var(--r-half); }
table.mini { width: 100%; border-collapse: collapse; font-size: var(--letter-smal); }
table.mini td { padding: var(--r-half) var(--r1); border-bottom: 1px solid var(--lijn); }
table.mini tr.gelijk td { background: var(--klaar-grond); color: var(--klaar); }

/* Plaatsen (stap 18): machines aanvinken en aan een klant koppelen. De vakjes
   staan in de tabel maar horen via `form=` bij het plaatsingsformulier. */
.plaatsen { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap;
            background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
            padding: var(--r1) var(--r2); margin: 0 0 var(--r2); }
.plaatsen label { font-size: var(--letter-smal); color: var(--stil); }
.plaatsen input[type=text], .plaatsen input[type=date], .plaatsen select {
  font: inherit; font-size: var(--letter-smal); padding: var(--r-half) var(--r1); margin-left: var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); }
.plaatsen input[type=text] { min-width: 14rem; }
.aangevinkt { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: auto; }
.lijst th.vink, .lijst td.vink { width: 2.2rem; padding-right: 0; }
.opsomming { margin: var(--r1) 0 0; padding-left: var(--r2); }
.opsomming li { margin: var(--r-half) 0; }
.plaatsing .plaatsen { max-width: none; }

/* Machines toewijzen: de inhaalslag. Een eigen pagina omdat het tijdelijk werk
   is — als de stapel leeg is kan hij weg, en blijft toewijzen over op de
   pagina van één machine. */
.toewijs-klant { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap;
                 background: var(--vlak); border: 1px solid var(--lijn);
                 border-radius: 8px; padding: var(--r1) var(--r2); margin: 0 0 var(--r2); }
.toewijs-klant label { font-size: var(--letter-smal); color: var(--stil); }
.toewijs-klant input[type=text] {
  font: inherit; font-size: 1rem; padding: var(--r-half) var(--r1); margin-left: var(--r1);
  min-width: 18rem; border: 1px solid var(--lijn); border-radius: 6px;
  background: var(--vlak); color: var(--tekst); }
/* Boven de tabel en meegescrold: met honderden rijen is een knop onderaan
   onbereikbaar, en je hebt hem na elke groep opnieuw nodig. */
.toewijs-balk { position: sticky; top: 0; z-index: 2;
                display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap;
                background: var(--grond); border-bottom: 1px solid var(--lijn);
                padding: var(--r1) 0; margin-bottom: var(--r-half); }
.toewijs-balk button { font-size: 1rem; padding: var(--r1) var(--r2); }
.aanwijzing { margin: 0 0 var(--r2); display: flex; gap: var(--r2); align-items: center; }

/* Waar staat hij: twee regels, elk één uitspraak. Klein gehouden — dit is
   dagelijks werk en geen formulier om in te wonen. */
.plaatsing .regel { display: flex; gap: var(--r1); align-items: center; flex-wrap: wrap;
                    margin: 0 0 var(--r1); }
.plaatsing .regel label { font-size: var(--letter-smal); color: var(--stil); }
.plaatsing .regel input[type=text] {
  font: inherit; font-size: var(--letter-smal); padding: var(--r-half) var(--r1); min-width: 16rem;
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); }
.plaatsing .regel input[type=month], .plaatsing .regel select {
  font: inherit; font-size: var(--letter-smal); padding: var(--r-half) var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst); }
/* Eén regel per plaatsing in plaats van een tabel met vijf kolommen. */
ul.plaatsingen { list-style: none; margin: var(--r2) 0 0; padding: 0; }
ul.plaatsingen li { padding: var(--r-half) 0; border-top: 1px solid var(--lijn); }
ul.plaatsingen li:first-child { border-top: none; }


/* Het werkbord (stap 0.10, stap 38): de ronde-balk, en /systeem/ronden. */
/* De ronde-balk (stap 38): één regel. Rood op elke pagina, geel alleen op Vandaag. */
.rondebalk { padding: var(--r1) var(--r4); font-size: var(--letter-smal); display: flex; gap: var(--r1); align-items: baseline;
  white-space: nowrap; border-bottom: 1px solid; }
.rondebalk span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rondebalk a { font-weight: 600; flex: none; }
.rondebalk.rood { background: var(--gevaar-grond); border-color: var(--gevaar-lijn); color: var(--gevaar); }
.rondebalk.rood a { color: var(--gevaar); }
.rondebalk.geel { background: var(--wacht-grond); border-color: var(--wacht-lijn); color: var(--wacht); }
.rondebalk.geel a { color: var(--wacht); }
.stip { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-left: var(--r-half);
  vertical-align: 0.1em; }
.stip.rood { background: var(--gevaar); }
.stip.geel, .stip.werk { background: var(--accent); }
/* Stap 79: er loopt iets (een ronde of een handeling) — geen probleem, alleen bezig. */
.stip.loopt { background: var(--zij-stil); }
.rondetaak details, .rondeuitvoer details { margin: var(--r-half) 0 0; }
.rondetaak summary, .rondeuitvoer summary { cursor: pointer; font-family: var(--mono); font-size: var(--letter-smal);
  overflow-wrap: anywhere; }
.rondestand { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--r2); margin: 0 0 var(--r3); }
.rondetaak, .rondeuitvoer { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r2) var(--r2); }
.rondetaak.mislukt, .rondeuitvoer.mislukt { border-color: var(--gevaar-lijn); }
.rondetaak.geel { border-color: var(--wacht-lijn); }
.rondetaak h2, .rondeuitvoer h2 { font-size: 1rem; margin: 0 0 var(--r1); }
.rondetaak p { margin: var(--r-half) 0; }
.rondetaak a { color: var(--link); }
.rondetaak pre, .rondeuitvoer pre { white-space: pre-wrap; font-family: var(--mono); font-size: var(--letter-smal);
  max-height: 18rem; overflow: auto; margin: var(--r1) 0 0; }
.rondeuitvoer { margin: var(--r2) 0 0; }

.nalopen-leeg { margin: var(--r2) 0 0; }
.nalopen-leeg a { color: var(--stil); }
/* Stap 75: Na te lopen op Vandaag — één grijze regel onder wat wacht. */
[data-groep] h2 .stil { font-weight: 400; font-size: var(--letter-smal); }
.treffers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
            gap: var(--r2); margin: 0 0 var(--r3); }
.treffergroep { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r2); }
.treffergroep h2 { font-size: 1rem; margin: 0 0 var(--r1); }
.treffergroep a, .blok h2 + p a { color: var(--link); text-decoration: none; }
.opsomming-los { list-style: none; margin: 0; padding: 0; }
.opsomming-los li { padding: var(--r-half) 0; overflow-wrap: anywhere; }
.nalopen a { align-items: center; }
.watnu { background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--lijn);
         border-radius: 8px; padding: var(--r1) var(--r2); margin: 0 0 var(--r3); }
.watnu.doen { border-left-color: var(--link); }
.watnu h2 { font-size: 1rem; margin: 0 0 var(--r-half); }
.watnu p { margin: var(--r-half) 0; }
.naast { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 0 var(--r3); }
.naast > .blok { min-width: 0; }
.outsmartvak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r2); }
.outsmartvak summary { cursor: pointer; color: var(--link); }
.outsmartvak h3 { font-size: 1rem; margin: var(--r2) 0 var(--r1); }
.meer-facturen { margin-top: var(--r1); }
.meer-facturen summary { cursor: pointer; color: var(--link); }

.staatbij { margin: var(--r1) 0 0; font-size: 1rem; }
.staatbij a { color: var(--link); text-decoration: none; }
.plaatsing .wijzigen { margin-top: var(--r2); }
.plaatsing .wijzigen summary { cursor: pointer; color: var(--link); margin-bottom: var(--r1); }

/* Stap 28: documentatie in mappen, zoals SmyZone. */
.documentvak { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--r3); }
.mappen { display: flex; flex-direction: column; gap: var(--r-half); }
.mappen a { color: var(--tekst); text-decoration: none; padding: var(--r-half) var(--r1); border-radius: 6px; }
.mappen a[aria-current] { background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); font-weight: 600; }
.weergavekeuze { display: flex; gap: var(--r-half); justify-content: flex-end; margin: 0 0 var(--r1); }
.weergavekeuze [aria-pressed="true"] { border-color: var(--link); }
/* Machines (stap 42): de filters achter één knop, de keuzes als chips, en Kaarten/Tabel
   als schakelaar. Het zoekveld krijgt de hele eerste regel. */
.zoek:has(.filterpaneel) input[type=search] { flex-basis: 100%; }
.filterpaneel { flex-basis: 100%; }
/* Dicht neemt de knop alleen zijn eigen breedte: het aantal staat ernaast (stap 77). */
.filterpaneel:not([open]) { flex-basis: auto; }
.filterpaneel > summary { display: inline-block; cursor: pointer; list-style: none; padding: var(--r1) var(--r2);
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); }
.filterpaneel > summary::-webkit-details-marker { display: none; }
.filterpaneel[open] > summary { border-color: var(--link); margin-bottom: var(--r1); }
.lijststand { display: flex; flex-wrap: wrap; gap: var(--r1); margin: 0 0 var(--r1); }
.lijststand:empty { display: none; }
.chip { display: inline-flex; gap: var(--r-half); align-items: baseline; padding: var(--r-half) var(--r1); border-radius: 999px;
  background: var(--vlak); border: 1px solid var(--accent); color: var(--link); text-decoration: none; font-size: var(--letter-smal); }
.chip span { font-size: 1.05em; }
.schakelaar { display: inline-flex; gap: 0; margin: 0 0 0 auto; border: 1px solid var(--lijn); border-radius: 8px;
  overflow: hidden; background: var(--vlak); }
.schakelaar a { padding: var(--r1) var(--r2); color: var(--stil); text-decoration: none; border: 0; }
.schakelaar a[aria-pressed="true"] { background: var(--accent); color: var(--op-accent); }
.documentkaarten { list-style: none; margin: 0 0 var(--r2); padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--r2); }
.documentkaarten li { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px;
  padding: var(--r2) var(--r2); display: flex; flex-direction: column; gap: var(--r-half); }
.documentkaarten .naam { color: var(--link); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.documentkaarten .talen { display: flex; gap: var(--r1); flex-wrap: wrap; font-size: var(--letter-smal); }
.documentkaarten .talen a { color: var(--link); text-decoration: none; }
[data-weergave="lijst"] .documentkaarten { grid-template-columns: 1fr; gap: 0; }
[data-weergave="lijst"] .documentkaarten li { flex-direction: row; flex-wrap: wrap; gap: var(--r-half) var(--r2);
  border-radius: 0; border-bottom-width: 0; }
[data-weergave="lijst"] .documentkaarten li:last-child { border-bottom-width: 1px; }
@media (max-width: 600px) {
  .documentvak { grid-template-columns: 1fr; }
  .mappen { flex-direction: row; flex-wrap: wrap; }
}

/* Stap 31: de facturatie — stapels, werkbank en de proefrun. */
.uitleg { max-width: 52rem; margin: 0 0 var(--r2); }
.uitleg a { color: var(--link); text-decoration: none; }
.lijst td.mono a { white-space: nowrap; }
.werkbank li.aan { border-left: 4px solid var(--accent); }
.werkbank .bonregel b.getal { margin-left: auto; }
.werkbank details { margin-top: var(--r1); }
.werkbank details summary { cursor: pointer; color: var(--link); }
.werkbank .plaatsen { margin: var(--r1) 0 0; }
.werkbank .tabelvak { margin: var(--r1) 0; }
button.vinkknop { min-width: 8.5rem; }
.werkbank li.aan button.vinkknop { background: var(--accent); color: var(--op-accent); }
.handelingvak pre.payload { max-height: 32rem; overflow: auto; background: var(--grond);
  border: 1px solid var(--lijn); border-radius: 6px; padding: var(--r1) var(--r2); font-size: var(--letter-smal); }

/* Stap 33: het blok Factuur op de bonpagina — zelf koppelen of loskoppelen. */
.koppelvak { margin-top: var(--r2); }
.koppelvak summary { cursor: pointer; color: var(--link); }
.koppelvorm { display: flex; gap: var(--r1) var(--r2); align-items: end; flex-wrap: wrap; margin-top: var(--r1); }
.koppelvorm label { display: flex; flex-direction: column; gap: var(--r-half); font-size: var(--letter-smal);
  color: var(--stil); min-width: 0; max-width: 100%; }
.koppelvorm select, .koppelvorm input { font: inherit; font-size: var(--letter-smal); padding: var(--r-half) var(--r1);
  border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); color: var(--tekst);
  max-width: 100%; }
.koppelvorm select { width: 34rem; }
.koppelvorm input { width: 10rem; }
.koppel-link { font-size: var(--letter-klein); white-space: nowrap; }

/* ── De eigen bon op de telefoon (stap 66) ─────────────────────────────────
   16px in velden, anders zoomt iOS in; knoppen minstens 44px hoog. Kleur later. */
body.telefoon { max-width: 40rem; margin: 0 auto; padding: 0 var(--r2) var(--r8); font-size: 16px; }
.telefoon input, .telefoon select, .telefoon textarea, .telefoon button { font-size: 16px; font-family: var(--sans); }
.telefoon label { display: block; margin: var(--r1) 0; }
.telefoon input:not([type=radio]):not([type=checkbox]):not([type=file]), .telefoon select, .telefoon textarea { display: block; width: 100%; box-sizing: border-box; padding: var(--r1); }
.telefoon input[type=file][hidden] { display: none; }
.telefoon button, .telefoon .knop { display: inline-block; min-height: 44px; padding: var(--r1) var(--r2); }
.telefoon button.hoofd { width: 100%; font-weight: 600; margin: var(--r1) 0; }
.telefoon button.klein { min-height: 32px; font-size: 14px; }
.telefoon .keuze button { width: 100%; text-align: left; margin: var(--r-half) 0; }
.telefoon .blok { display: block; padding: var(--r2); margin: var(--r1) 0; border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); text-decoration: none; color: inherit; }
.telefoon .blok span { display: block; color: var(--stil); }
.telefoon .intern textarea { background: var(--wacht-grond); }
.telefoon .nog-open { background: var(--gevaar-grond); color: var(--gevaar); padding: var(--r1) var(--r2); border-radius: 6px; }
.telefoon .melding { background: var(--vlak-zacht); border: 1px solid var(--lijn); padding: var(--r1) var(--r2); }
.telefoon .radio { display: inline-block; margin-right: var(--r2); }
.telefoon form.inline { display: inline; }

/* ── De bon op de telefoon, ingedeeld (stap 66b) ──────────────────────────── */
.telefoon .label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--stil); margin: var(--r2) 0 var(--r-half); }
.telefoon a.knop.hoofd { display: block; text-align: center; font-weight: 700; background: var(--accent); color: var(--op-accent); border-radius: 8px; padding: var(--r2); margin: var(--r1) 0; text-decoration: none; }
.telefoon .blok strong { color: var(--tekst); }
.telefoon .blok em, .telefoon p em { font-style: normal; font-size: 14px; margin-left: var(--r-half); }
.telefoon .goed { color: var(--klaar); }
.telefoon .mist { color: var(--gevaar); }
.telefoon .advies { background: var(--wacht-grond); color: var(--wacht); border-radius: 6px; padding: var(--r-half) var(--r1); margin: var(--r1) 0 0; font-size: 14px; }
.telefoon .later { border: 1px dashed var(--lijn); border-radius: 6px; padding: var(--r1); color: var(--stil); font-size: 14px; }
.telefoon input.groot { font-size: 24px; font-weight: 700; }
.telefoon .keuzes { display: flex; flex-wrap: wrap; gap: var(--r1); margin: var(--r1) 0; }
.telefoon .keuzes label { display: inline-block; margin: 0; }
.telefoon .keuzes input { position: absolute; opacity: 0; }
.telefoon .keuzes span { display: inline-block; min-height: 40px; line-height: 40px; padding: 0 var(--r2); border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); }
.telefoon .keuzes input:checked + span { background: var(--tekst); color: var(--vlak); border-color: var(--tekst); }
.telefoon .keuzes input:focus-visible + span { outline: 2px solid var(--accent); }
.telefoon .snel { display: flex; flex-wrap: wrap; gap: var(--r-half); margin: var(--r-half) 0; }
.telefoon .snel button { min-height: 36px; border-radius: 18px; background: var(--dof); border: 0; padding: var(--r-half) var(--r2); font-size: 14px; }
.telefoon details.vak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r2); margin: var(--r1) 0; }
.telefoon details.vak summary { display: flex; justify-content: space-between; gap: var(--r1); cursor: pointer; font-weight: 600; }
.telefoon details.vak summary small { font-weight: 400; color: var(--stil); }
/* Stap 104: het logo is wit; op het klantscherm dus op de donkere grond van de zijbalk. */
.klantscherm .klantkop { display: flex; justify-content: space-between; align-items: center; padding: var(--r2) var(--r3);
  background: var(--zij); color: var(--zij-tekst); border: 0; border-bottom: 3px solid var(--accent);
  flex-wrap: nowrap; gap: var(--r2); }
.klantscherm .klantkop img { width: 6.5rem; height: auto; flex: none; }
.klantscherm .klantkop span { text-align: right; }
.telefoon button.hoofd { background: var(--accent); color: var(--op-accent); border: 0; border-radius: 8px; }
.telefoon .label { background: none; padding: 0; border: 0; border-radius: 0; display: block; line-height: 1.5; }

/* ── Onderdelen op de bon (stap 67) ─────────────────────────────────────────── */
.telefoon .regel { margin: var(--r-half) 0; }
.telefoon .let { color: var(--wacht); background: var(--wacht-grond); border-radius: 6px; padding: 0 var(--r1); font-size: 13px; }
.telefoon form.kies { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1) var(--r1); margin: var(--r-half) 0; display: flex; flex-wrap: wrap; gap: var(--r1); align-items: center; justify-content: space-between; }
.telefoon form.kies .aantal { display: flex; gap: var(--r-half); align-items: center; }
.telefoon form.kies .aantal input { width: 4.5rem; display: inline-block; }
.telefoon form.kies details { flex-basis: 100%; }
.telefoon .badge { display: inline-block; margin: var(--r1) 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--stil); }

/* ── Eén route door de bon (stap 105) ──────────────────────────────────────────
   Een machine is één tik: de hele kaart is de knop. Eerder gebruikt als korte regels. */
.telefoon .kiesmachine { position: relative; margin: var(--r1) 0; }
.telefoon .kiesmachine form { margin: 0; }
.telefoon button.blokknop { display: block; width: 100%; text-align: left; padding: var(--r2); border: 1px solid var(--lijn);
  border-radius: 6px; background: var(--vlak); color: inherit; cursor: pointer; }
.telefoon button.blokknop span { display: block; color: var(--stil); font-size: 14px; }
.telefoon button.blokknop { white-space: normal; }
.telefoon button.blokknop .advies { color: var(--wacht); }
.telefoon .blok.kiesmachine { padding: 0; border: 0; background: none; }
.telefoon .blok.kiesmachine { display: flex; gap: var(--r1); align-items: center; }
.telefoon .blok.kiesmachine form { flex: 1; min-width: 0; }
.telefoon .kiesmachine > a[data-machinekaart] { font-size: 14px; flex: none; }
.telefoon .naast-elkaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r1); }
.telefoon details.klein summary, .telefoon details.meer summary { color: var(--stil); font-size: 14px; cursor: pointer; margin: var(--r-half) 0; }
.telefoon .zoekregel { display: flex; gap: var(--r1); margin: var(--r1) 0; }
.telefoon .zoekregel input { flex: 1; }
.telefoon .kort form.kies { flex-wrap: nowrap; padding: var(--r-half) var(--r1); border-width: 0 0 1px; border-radius: 0; background: none; margin: 0; }
.telefoon .kort form.kies > span:first-of-type { min-width: 0; overflow: hidden; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.telefoon .kort form.kies .aantal input { width: 3rem; padding: var(--r-half); }
.telefoon .kort form.kies .aantal button { min-height: 36px; }
/* Stap 106: de keuze van de handleiding past in zijn kolom. */
.gegevens dd select { max-width: 100%; }
.telefoon .onderaan { margin-top: var(--r4); }
.telefoon a.knop:not(.hoofd) { display: block; text-align: center; border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak); color: var(--tekst); text-decoration: none; margin: var(--r1) 0; line-height: 26px; }
.telefoon a.knop.klein:not(.hoofd) { display: inline-block; min-height: 32px; line-height: 14px; font-size: 14px; }
.telefoon [data-bewaard] { font-size: 13px; min-height: 1.2em; margin: var(--r2) 0 0; }

/* ── Foto's en de wachtrij op de bon (stap 68) ──────────────────────────────── */
.telefoon .wachtrij { position: sticky; top: 0; z-index: 2; background: var(--wacht-grond); color: var(--wacht); border: 1px solid var(--wacht-lijn); border-radius: 8px; padding: var(--r1) var(--r2); margin: var(--r1) 0; font-weight: 600; }
.telefoon .fotos, .fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--r1); margin: var(--r1) 0; }
.telefoon .foto { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: var(--r1); }
.fotos img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.fotos figure { margin: 0; }
.fotos figcaption { font-size: var(--letter-klein); color: var(--stil); }
.telefoon .vinkje { display: inline-flex; gap: var(--r-half); align-items: center; margin: var(--r-half) 0; }
/* Stap 94: wat kantoor klaarzette, bovenaan de bon op de telefoon. */
.telefoon .opdracht { background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: var(--r1) var(--r2); margin: var(--r1) 0; }
.telefoon .opdracht p { margin: var(--r-half) 0; }
/* Stap 69: het tekenvlak voor de handtekening. Vingerbewegingen zijn hier tekenen, geen scrollen. */
.telefoon .tekenvlak { display: block; width: 100%; height: 10rem; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 8px; touch-action: none; }
.telefoon label.knop { display: inline-block; border: 1px solid var(--accent); border-radius: 8px; padding: var(--r1) var(--r2); cursor: pointer; }
.telefoon label.knop.hoofd { display: block; text-align: center; background: var(--accent); color: var(--op-accent); font-weight: 700; border: 0; }

/* Stap 71: de proef op de server is van productie te onderscheiden. */
.proef{background:var(--proef);color:var(--op-proef);font-weight:700;letter-spacing:.08em;padding:var(--r-half) var(--r1);border-radius:4px;margin-left:var(--r1)}

/* Stap 76: hover alleen met een muis — op een telefoon blijft een hoverkleur na een tik
   hangen. */
@media (hover: hover) and (pointer: fine) {
  .balk nav a:hover { color: var(--vlak); }
  .balk .wisselaar a:hover { color: var(--vlak); }
  .lijst tbody tr:hover { background: var(--vlak-zacht); }
  .lijst a:hover, main a:not(.knop):hover { text-decoration: underline; }
  .lijst th a.sorteer:hover { color: var(--tekst); }
  .documentknoppen .knop:hover { box-shadow: inset 0 0 0 1px var(--accent); }
  .toestanden a:hover { border-color: var(--link); }
  .tegel:hover { border-color: var(--link); }
  .tegel:hover .tegelnaam { text-decoration: none; }
  button:not(:disabled):hover { border-color: var(--link); }
  button.hoofd:not(:disabled):hover { border-color: var(--link); }
  button.stil:not(:disabled):hover { border-color: transparent; color: var(--tekst); }
  button.gevaar:not(:disabled):hover { border-color: var(--gevaar); background: var(--gevaar-grond); }
}
/* Stap 76: met Tab zie je waar je staat; bij een muisklik niet. */
:where(a, button, summary, select, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Stap 78: de telefoon. De balk is één regel — logo · zoeken · Menu — en het menu klapt
   uit als lijst met rijen van 44 px, zonder animatie: het moet er meteen zijn. Sinds
   stap 81 geldt de balk tot 900 px, ook op een tablet (daar was hij 213 px); breder is
   er geen menuknop. De kaartjes en de rest blijven onder 600 px. */
.menuschakelaar { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menuknop { display: none; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
@media (max-width: 899px) {
  .balk { flex-wrap: wrap; align-items: center; gap: var(--r1) var(--r1); padding: var(--r1) var(--r2); }
  .merk { order: 0; padding: 0; }
  .merk img { width: 4.2rem; }
  .merk span { display: none; }
  .proef { order: 0; }
  .kopzoek { order: 1; flex: 1 1 0; min-width: 0; }
  .kopzoek input { padding: var(--r1) var(--r1); font-size: 16px; }
  .menuknop { order: 2; display: inline-flex; align-items: center; gap: var(--r-half); min-height: 44px;
    padding: 0 var(--r1); color: var(--zij-tekst); border: 1px solid var(--zij-lijn); border-radius: 6px;
    cursor: pointer; user-select: none; }
  .menuknop .stip { margin: 0; }
  .menuschakelaar:focus-visible + .menuknop { outline: 2px solid var(--accent); outline-offset: 2px; }
  .menuschakelaar:checked + .menuknop { background: var(--zij-veld2); }
  .balk nav, .balk .wisselaar { display: none; }
  .menuschakelaar:checked ~ nav { order: 3; display: flex; flex-direction: column; flex-basis: 100%; gap: 0; }
  .menuschakelaar:checked ~ .wisselaar { order: 4; display: block; flex-basis: 100%; margin: 0; padding: var(--r1) var(--r-half); border-top: 1px solid var(--zij-lijn); }
  .balk nav a { min-height: 44px; align-items: center; padding: var(--r1) var(--r-half);
    font-size: 1rem; border: 0; border-top: 1px solid var(--zij-lijn); border-radius: 0; }
  .balk nav a.actief { background: none; color: var(--vlak); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--r1); }
}
@media (max-width: 600px) {
  /* tikvlakken minimaal 44 px */
  .telregel a, .filterpaneel > summary { min-height: 44px; display: inline-flex; align-items: center; gap: var(--r-half); }
  /* invoervelden op 16 px: kleiner en iOS zoomt in */
  input, select, textarea { font-size: 16px; }

  /* De brede tabellen van Werkbonnen en Klanten als kaartjes: geen kolomkoppen, geen
     zijwaarts schuiven. De hele kaart is de link (stap 76). Sorteren gaat op de telefoon
     niet; dat kan op de laptop. */
  .lijst.werkbonnen thead, .lijst.klanten thead { display: none; }
  .lijst.werkbonnen, .lijst.klanten, .lijst.werkbonnen tbody, .lijst.klanten tbody { display: block; }
  .lijst.werkbonnen tr, .lijst.klanten tr { display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0 var(--r1); padding: var(--r1) var(--r2); border-bottom: 1px solid var(--lijn); }
  .lijst.werkbonnen tbody tr:last-child, .lijst.klanten tbody tr:last-child { border-bottom: 0; }
  .lijst.werkbonnen td, .lijst.klanten td { display: block; padding: 0; border: 0; }
  .lijst.werkbonnen td:nth-child(1) { flex: 1 1 auto; font-weight: 600; }
  .lijst.werkbonnen td:nth-child(7) { flex: 0 0 auto; }
  .lijst.werkbonnen td:nth-child(3) { order: 1; flex-basis: 100%; }
  .lijst.werkbonnen td:nth-child(3) div { display: inline; }
  .lijst.werkbonnen td:nth-child(3) div::before { content: " · "; }
  .lijst.werkbonnen td:nth-child(2), .lijst.werkbonnen td:nth-child(4), .lijst.werkbonnen td:nth-child(5) {
    order: 2; color: var(--stil); font-size: var(--letter-smal); }
  .lijst.werkbonnen td:nth-child(5) div { display: inline; }
  .lijst.werkbonnen td:nth-child(5) div + div::before { content: " · "; }
  .lijst.werkbonnen td:nth-child(6) { display: none; }
  .lijst.klanten td:nth-child(1) { flex: 1 1 100%; font-weight: 600; }
  .lijst.klanten td:nth-child(7) { order: 2; margin-left: auto; font-weight: 600; }
  .lijst.klanten td:nth-child(n+2):nth-child(-n+6) { order: 1; color: var(--stil); font-size: var(--letter-smal); }
  .lijst.klanten td:empty { display: none; }
  .lijst.klanten td[data-kop]:not(:empty)::after { content: " " attr(data-kop); }
  .lijst.klanten td[data-kop="laatst"]:not(:empty)::before { content: "laatst "; }
  .lijst.klanten td[data-kop="laatst"]:not(:empty)::after { content: none; }
  .lijst.werkbonnen tr, .lijst.klanten tr { text-align: left; }
  .lijst.klanten .getal { text-align: left; }

  /* Stap 81: Gefactureerd ook als kaartjes. Een conceptfactuur: klant en bedrag, wanneer
     gemaakt, dan per bon nummer · factuur · OutSmart-status en de knop. Een tweede bon op
     dezelfde factuur is een ingesprongen regel zonder eigen rand. */
  .lijst.concepten thead, .lijst.genegeerd thead { display: none; }
  .lijst.concepten, .lijst.genegeerd, .lijst.concepten tbody, .lijst.genegeerd tbody { display: block; }
  .lijst.concepten tr, .lijst.genegeerd tr { display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--r-half) var(--r1); padding: var(--r1) var(--r2); border-top: 1px solid var(--lijn); }
  .lijst.concepten tbody tr:first-child, .lijst.genegeerd tbody tr:first-child { border-top: 0; }
  .lijst.concepten td, .lijst.genegeerd td { display: block; padding: 0; border: 0; text-align: left; }
  .lijst.concepten .klant { order: 0; flex: 1 1 auto; font-weight: 600; }
  .lijst.concepten .bedrag { order: 1; font-weight: 600; }
  .lijst.concepten .gemaakt { order: 2; flex-basis: 100%; color: var(--stil); font-size: var(--letter-smal); }
  .lijst.concepten .bon, .lijst.concepten .factuur, .lijst.concepten .outsmart { order: 3; }
  .lijst.concepten .outsmart::before { content: attr(data-kop) " "; color: var(--stil); }
  .lijst.concepten .actie { order: 4; flex-basis: 100%; }
  .lijst.concepten .actie:empty { display: none; }
  .lijst.concepten tr.vervolg { border-top: 0; padding-top: 0; padding-left: var(--r3); }
  .lijst.genegeerd .bon { flex: 1 1 auto; font-weight: 600; }
  .lijst.genegeerd .klant { flex-basis: 100%; }
  .lijst.genegeerd .reden { flex-basis: 100%; font-size: var(--letter-smal); }
  .lijst.genegeerd .actie { flex-basis: 100%; }
}

/* ── De ingang Monteur (stap 98; stap 109 het portaal): de balk, de tegels en de machinekaart ─── */
.monteurbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center;
  gap: 0; padding: 0;
  /* onder de rand voor de iPhone-streep: een rand, want ruimte komt uit de schaal.
     Komt er ooit `viewport-fit=cover`, dan moet de padding onderaan van body.telefoon meegroeien. */
  background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: env(safe-area-inset-bottom, 0) solid var(--vlak); }
/* Stap 110: per knop een lijnicoon boven het label; de huidige knop een amberen streep
   bovenaan en vette tekst. Vijf knoppen van 64 px op 320 px: "Storingen" vet op 12 px is
   58 px breed (nagemeten in Open Sans), dus geen zijrand en geen tussenruimte. */
.monteurbalk a { flex: 1 1 0; min-width: 0; max-width: 6rem; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--r-half); padding: var(--r-half) 0;
  border-top: 3px solid transparent; color: var(--stil); text-decoration: none; font-size: var(--letter-klein);
  line-height: 1.2; white-space: nowrap; overflow: hidden; }
.monteurbalk a .icoon { width: 22px; height: 22px; }
.monteurbalk a[aria-current] { color: var(--tekst); font-weight: 700; border-top-color: var(--accent); }
/* Stap 110: de tegels op Start in een raster van 2×2: icoon, naam, één regel; Bonnen met
   het aantal bezig groot, in de kleur wacht als er een bon bezig is (stap 85). */
.telefoon .monteurtegels { list-style: none; margin: var(--r2) 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r1); }
.telefoon .monteurtegel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-half);
  height: 100%; padding: var(--r2); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px;
  color: var(--tekst); text-decoration: none; }
.telefoon .monteurtegels li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* drie tegels: de laatste over de volle breedte */
.telefoon .monteurtegel.wacht { background: var(--wacht-grond); border-color: var(--wacht-lijn); }
.telefoon .monteurtegel .icoon { width: 24px; height: 24px; }
.telefoon .monteurtegel .getal { font-size: var(--letter-groot); font-weight: 800; line-height: 1.1; }
.telefoon .monteurtegel span { color: var(--stil); font-size: var(--letter-smal); }
.telefoon a.knop.hoofd.licht { background: var(--vlak); color: var(--link); border: 1px solid var(--lijn); }
.telefoon .wachtlijst { margin: 0; padding-left: var(--r2); }
.telefoon .kaartfeiten div { display: flex; gap: var(--r2); }
.telefoon .kaartfeiten dt { min-width: 8rem; color: var(--stil); }
/* een lang woord (adres, e-mail) breekt af in plaats van de pagina breder te maken */
.telefoon .kaartfeiten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Stap 110: de machinekaart — het type groot, de twee knoppen naast elkaar (één knop neemt
   de hele breedte), en elk blok een witte kaart onder een klein grijs kopje (.label). */
.telefoon h1.machinetype { margin: var(--r1) 0 0; font-size: var(--letter-groot); line-height: 1.2; }
.telefoon .machinesub { margin: var(--r-half) 0 var(--r2); color: var(--stil); }
.telefoon .machinesub strong { color: var(--tekst); }
.telefoon .kaartknoppen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--r1);
  margin: 0 0 var(--r1); }
.telefoon .kaartknoppen form, .telefoon .kaartknoppen p { margin: 0; }
.telefoon .kaartknoppen button.hoofd { margin: 0; min-height: 48px; }
.telefoon .kaartknoppen a.knop { display: flex; align-items: center; justify-content: center; gap: var(--r1);
  min-height: 48px; margin: 0; }
.telefoon .kaart { margin: 0; padding: var(--r-half) var(--r2); background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 12px; }
.telefoon .kaart > * { margin: 0; padding: var(--r1) 0; }
.telefoon .kaart > * + * { border-top: 1px solid var(--dof); }
.telefoon .kaartregel { display: block; color: inherit; text-decoration: none; }
.telefoon .kaartregel span { display: block; color: var(--stil); }

/* ── Stap 110: het uiterlijk van het monteurportaal ─────────────────────────────
   De kop zwart met het logo, zoals de zijbalk van Kantoor, over de hele breedte: de
   negatieve marge heft de rand van body.telefoon op. Links de weg terug of de naam van het
   scherm, rechts DEMCA met MONTEUR in amber; op Start alleen het grote logo. */
.telefoon .telefoonkop { display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
  margin: 0 calc(-1 * var(--r2)); padding: var(--r1) var(--r2); min-height: 56px;
  background: var(--zij); color: var(--zij-tekst); }
.telefoon .telefoonkop.groot { padding: var(--r3) var(--r2); }
.telefoon .kopweg { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--r2); min-width: 0; }
.telefoon .kopweg:empty { display: none; }
.telefoon .telefoonkop a { display: inline-flex; align-items: center; min-height: 44px; color: var(--zij-tekst);
  text-decoration: none; }
.telefoon .monteurmerk { flex: none; margin-left: auto; line-height: 1; text-transform: uppercase; }
.telefoon .monteurmerk img { display: block; width: 4.2rem; height: auto; }
.telefoon .monteurmerk span { display: block; margin-top: var(--r-half); font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; color: var(--accent); }
.telefoon .telefoonkop.groot .monteurmerk { margin-left: 0; }
.telefoon .telefoonkop.groot .monteurmerk img { width: 8.5rem; }
.telefoon .telefoonkop.groot .monteurmerk span { font-size: var(--letter-klein); }
/* De inhoud recht onder de kop: geen tweede rand binnen body.telefoon (tot stap 110 stond de
   inhoud 32 px van de kant en de kop 16 px). Onderaan ruimte voor de balk. Niet op het
   tekenscherm van de klant (`.klantscherm`): dat heeft geen monteurkop en houdt zijn oude opmaak. */
.telefoon:not(.klantscherm) main { padding: var(--r2) 0 var(--r6); }
/* Het zoekveld van de monteur (_monteurzoek.html): één veld van volle breedte met het
   vergrootglas erin. Deze regel staat ná de veldregel van stap 66 en weegt even zwaar
   (0,4,1), dus hij wint. `appearance: none` en `min-width: 0`: WebKit (iPhone) geeft een
   type=search anders zijn eigen vorm en een eigen minimale breedte. */
.telefoon .monteurzoek { position: relative; margin: var(--r2) 0; }
.telefoon .monteurzoek input.zoekinvoer[type=search] { -webkit-appearance: none; appearance: none; display: block;
  width: 100%; min-width: 0; max-width: 100%; padding: var(--r2) var(--r6) var(--r2) var(--r2);
  border: 2px solid var(--tekst); border-radius: 12px; background: var(--vlak); color: var(--tekst); }
.telefoon .monteurzoek input.zoekinvoer::-webkit-search-decoration,
.telefoon .monteurzoek input.zoekinvoer::-webkit-search-cancel-button { -webkit-appearance: none; }
.telefoon .monteurzoek .zoekicoon { position: absolute; top: 0; right: 0; bottom: 0; width: var(--r6); min-height: 0;
  padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: none;
  color: var(--tekst); }
.telefoon .monteurzoek .zoekicoon .icoon { width: 22px; height: 22px; }

/* Stap 110: een uitklapblok van de monteur (Storingen, Documenten per type): een pijl die
   meedraait in plaats van het kale driehoekje, en lijsten zonder opsommingstekens. */
.telefoon details.uitklap > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--r1); min-height: 44px; }
.telefoon details.uitklap > summary::-webkit-details-marker { display: none; }
.telefoon details.uitklap > summary::before { content: ""; flex: none; width: 8px; height: 8px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg);
  transition: transform 150ms var(--uit); }
.telefoon details.uitklap[open] > summary::before { transform: rotate(45deg); }
.telefoon details.uitklap ul { list-style: none; margin: 0; padding: 0; }
.telefoon details.uitklap li { padding: var(--r-half) 0; border-top: 1px solid var(--dof); }

/* Stap 111: de serieknoppen — compacte pillen die doorlopen op een volgende regel; Meer
   klapt een tweede rij open. De gekozen knop donker met lichte tekst. */
.telefoon .seriekeuze { display: flex; flex-wrap: wrap; gap: var(--r1); margin: 0 0 var(--r2); }
.telefoon .seriekeuze a, .telefoon .seriemeer summary { display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 var(--r2); border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); color: var(--tekst); text-decoration: none; font-weight: 700;
  font-size: var(--letter-smal); cursor: pointer; }
.telefoon .seriekeuze a[aria-current="page"] { background: var(--zij); border-color: var(--zij); color: var(--zij-tekst); }
.telefoon .seriemeer summary { list-style: none; }
.telefoon .seriemeer summary::-webkit-details-marker { display: none; }
.telefoon .seriemeer summary::after { content: "▾"; margin-left: var(--r-half); }
.telefoon .seriemeer[open] summary::after { content: "▴"; }
.telefoon .seriemeer > div { display: flex; flex-wrap: wrap; gap: var(--r1); margin-top: var(--r1); }
.telefoon .seriemeer a .stil { margin-left: var(--r-half); }

/* Stap 121: Offertes — het sleepvak, de review en een melding die niet lukte. */
p.fout { color: var(--gevaar); }
.sleepvak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); margin: 0 0 var(--r3);
  padding: var(--r3); border: 2px dashed var(--lijn); border-radius: 8px; background: var(--vlak); }
.sleepvak label { display: flex; flex-direction: column; gap: var(--r-half); flex: 1 1 18rem; cursor: pointer; }
.sleepvak input[type=file] { font: inherit; }
.sleepvak.erboven { border-color: var(--accent); background: var(--wacht-grond); }
.lijst.review input { font: inherit; width: 100%; min-width: 6rem; padding: var(--r-half) var(--r1);
  border: 1px solid var(--lijn); border-radius: 4px; background: var(--vlak); }
.lijst.review input.getal { min-width: 5rem; text-align: right; }
.lijst.review input.aanvullen { border-color: var(--wacht-lijn); }
.lijst.review tr.gewijzigd td { background: var(--wacht-grond); }
.lijst.review small { display: block; }
.offerte-kies { display: flex; flex-wrap: wrap; gap: var(--r1); align-items: center; margin: 0; }
.offerte-kies input { font: inherit; width: 11rem; padding: var(--r-half) var(--r1);
  border: 1px solid var(--lijn); border-radius: 4px; background: var(--vlak); }
@media (max-width: 600px) {
  .lijst.review thead { display: none; }
  .lijst.review, .lijst.review tbody, .lijst.review tr, .lijst.review td { display: block; width: 100%; }
  .lijst.review tr { padding: var(--r1) 0; border-bottom: 1px solid var(--lijn); }
  .lijst.review td { border: 0; padding: var(--r-half) var(--r1); text-align: left; }
  .lijst.review td[data-label]::before { content: attr(data-label); display: block;
    font-size: var(--letter-klein); color: var(--stil); }
  .lijst.review input.getal { text-align: left; }
}
.onzeker-vak { margin: 0 0 var(--r3); padding: var(--r3); border: 1px solid var(--gevaar-lijn);
  border-radius: 8px; background: var(--gevaar-grond); }
.onzeker-vak h2 { margin-top: 0; color: var(--gevaar); }

/* Stap 128: het overzicht van een machine — drie blokken naast elkaar, op de telefoon onder elkaar. */
.overzicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--r2); }
.overzicht > .blok { margin: 0; }

/* Stap 154: een fieldset die alleen velden uitzet voor wie mag lezen, zonder rand. */
fieldset.kaal { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Stap 155: de QR-code van de tweede stap, segno tekent hem zelf met een witte rand, zodat elke app hem leest. */
.qr { margin: var(--r1) 0; } .qr svg { max-width: 100%; height: auto; }