/* ═══════════════════════════════════════════════════════════════════════
   Energie Depot, één stijl voor de hele app.

   DE HUISSTIJL
   Uit de computed styles van energie-depot.nl gelezen (03-09-2026), niet op
   het oog nagemaakt:

     koppen        Bricolage Grotesque 700
     tekst         Open Sans 500, 16 px, regelhoogte 1,7
     donkerblauw   #02152C
     accentblauw   #379CE2
     achtergrond   #F5FBFF
     knoppen       pilvorm, radius 50 px

   Geen diagonalen en geen schuine gradients: die komen op de site nergens
   voor. Rechte vlakken, effen kleuren, ronde hoeken.

   DE RUIMTEMAAT
   Ruimte is een schaal, geen los getal per plek. Alles is een veelvoud van 4:
   4, 8, 12, 16, 20, 24, 32, 40, 56. Wie een tussenmaat nodig heeft, heeft
   meestal de verkeerde maat te pakken. Daardoor staat gelijksoortige inhoud
   overal even ver uit elkaar, en dát is wat je ziet als spacing klopt.

   MOBIEL EERST
   Niels maakt offertes ook op locatie, op een telefoon. Vandaar één stap per
   scherm, tikdoelen van 56 px, keuzelijsten in plaats van tekstvelden, en de
   veilige zones van iOS (env(safe-area-inset-*)) in de kop én de voetbalk.
   Het bureaublad krijgt daar een bredere kolom bij, niet een andere app.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans app';
  src: url('/assets/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Open Sans app';
  src: url('/assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 500 600; font-display: swap;
}
@font-face {
  font-family: 'Open Sans app';
  src: url('/assets/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  /* De app is licht, en dat is een keuze en geen verzuim.
   *
   * Zonder deze regel mag de browser hem zelf omkeren: Chrome heeft een
   * automatische donkere modus die dat doet zodra het toestel op donker staat,
   * en dan gaat hij raden. Bij die gok werden de donkerblauwe vlakken bijna
   * zwart, de zachtblauwe kaarten grijs en het accentblauw dof, en dat is niet
   * meer de huisstijl van Energie Depot. Ook het logo, dat donkerblauwe letters
   * heeft, verdween dan half in zijn achtergrond.
   *
   * Een echte donkere variant kan later, met eigen kleuren uit de huisstijl.
   * Wat niet kan is de browser hem laten verzinnen. */
  color-scheme: light;

  --kop: 'Bricolage Grotesque', 'Open Sans app', system-ui, sans-serif;
  --tekst: 'Open Sans app', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --grond: #F5FBFF;
  --vlak: #FFFFFF;
  --donker: #02152C;
  --donker-zacht: #192838;

  --vul: rgba(2, 21, 44, .045);
  --vul-2: rgba(2, 21, 44, .085);
  --lijn: rgba(2, 21, 44, .13);
  --lijn-zacht: rgba(2, 21, 44, .07);

  --ink: #02152C;
  --ink-2: #3D5165;
  --ink-3: #6B8095;

  --blauw: #379CE2;
  --blauw-diep: #1B60A3;
  --blauw-tint: rgba(55, 156, 226, .10);
  --goed: #1F8A50;
  --goed-diep: #14603A;
  --goed-tint: rgba(31, 138, 80, .12);
  --let: #B4690E;
  --let-diep: #6D4009;
  --let-tint: rgba(180, 105, 14, .12);
  --mis: #C0392B;
  --mis-diep: #7E2620;
  --mis-tint: rgba(192, 57, 43, .10);

  --glas: rgba(245, 251, 255, .78);
  --schaduw-s: 0 1px 2px rgba(2, 21, 44, .05);
  --schaduw-m: 0 1px 2px rgba(2, 21, 44, .05), 0 10px 30px -18px rgba(2, 21, 44, .35);
  --schaduw-l: 0 1px 3px rgba(2, 21, 44, .07), 0 22px 48px -26px rgba(2, 21, 44, .45);

  --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --pil: 50px;
  --soepel: cubic-bezier(.32, .72, 0, 1);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* Zijmarge van een scherm, één plek, geen @media-regel per pagina. */
  --kant: 20px;
  /* Hoogte van een tikdoel. */
  --raak: 56px;
  /* Breedte van de leeskolom: alles wat je leest is even breed. */
  --kolom: 620px;
  /* Breder op een bureaublad, want tabellen willen ruimte. */
  --kolom-breed: 1080px;
  /* Het startscherm: breed genoeg voor twee tegels naast elkaar, smal genoeg
     om nog één ding te zijn en niet een dashboard. */
  --kolom-start: 780px;
}

@media (max-width: 420px) { :root { --kant: 16px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema='licht']) {
    --grond: #061020; --vlak: #0E1F35;
    --vul: rgba(255, 255, 255, .06); --vul-2: rgba(255, 255, 255, .10);
    --lijn: rgba(255, 255, 255, .12); --lijn-zacht: rgba(255, 255, 255, .07);
    --ink: #E8F2FB; --ink-2: #AFC4D8; --ink-3: #7B92A8;
    --blauw: #5CB4EE; --blauw-diep: #93CFF5; --blauw-tint: rgba(92, 180, 238, .16);
    --goed: #57BC84; --goed-diep: #8FD8AE; --goed-tint: rgba(87, 188, 132, .16);
    --let: #E2A54F; --let-diep: #F0C489; --let-tint: rgba(226, 165, 79, .16);
    --mis: #E4796E; --mis-diep: #F2A79E; --mis-tint: rgba(228, 121, 110, .16);
    --glas: rgba(6, 16, 32, .76);
    --schaduw-s: 0 1px 2px rgba(0, 0, 0, .4);
    --schaduw-m: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
    --schaduw-l: 0 1px 3px rgba(0, 0, 0, .5), 0 22px 48px -26px rgba(0, 0, 0, .9);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s2);
  font-family: var(--kop);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
}
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

a { color: var(--blauw-diep); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

/* ── de kop: waar ben ik, hoe kom ik terug ────────────────────────────────
   Drie dingen op één regel, altijd op dezelfde plek: links terug, in het
   midden de stap, rechts het menu. De inzet hoort BOVEN, als derde waarde in
   een driewaardige padding komt hij aan de onderkant terecht en loopt de klok
   van de telefoon dwars door de titel. */
.appkop {
  position: sticky; top: 0; z-index: 20;
  background: var(--glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--lijn-zacht);
  /* De veilige zone van iOS, met een ondergrens.
   *
   * Mex, 03-09-2026: "kijk uit dat op mobiel alle knoppen bereikbaar zijn, want
   * je hebt iphone daarboven natuurlijk die camera op het scherm en je kan niet
   * alles klikken."
   *
   * env(safe-area-inset-top) is precies daarvoor, maar hij geeft 0 terug als de
   * pagina niet in het bovenste document staat, in een ingebedde weergave dus.
   * Met max() is er altijd minstens s5 ruimte, en met de inzet erbij schuift de
   * balk onder de Dynamic Island vandaan zodra iOS het wél doorgeeft. */
  padding: max(var(--s5), calc(var(--s3) + env(safe-area-inset-top))) var(--kant) var(--s2);
}
.appkop-in {
  max-width: var(--kolom); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3); min-height: 40px;
}
.appkop.breed .appkop-in, .appkop.breed .stappenbalk { max-width: var(--kolom-breed); }
.waar {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--kop); font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.waar small {
  display: block; font-family: var(--tekst); font-size: 12px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 0; line-height: 1.3;
}

/* 44×44 is het kleinste tikdoel dat Apple aanhoudt, en met een duim op een
   telefoon is dat geen luxe. Het bolletje eromheen mag optisch kleiner lijken;
   het rááktbare vlak is 44. */
.rond {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--vul); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s var(--soepel), transform .16s var(--soepel);
}
.rond:hover { background: var(--vul-2); }
.rond:active { transform: scale(.93); }
.rond svg { width: 18px; height: 18px; }
.rond[hidden] { display: none; }

/* De voortgangsbalk is ook een knoppenrij: op een stap die je hebt gehad kun
   je tikken. Segmenten en geen stipjes met cijfers, want op een telefoon van
   360 px passen er geen twaalf cijfers naast elkaar. */
.stappenbalk {
  max-width: var(--kolom); margin: var(--s2) auto 0;
  display: flex; gap: var(--s1);
}

/* De stip is 5 px hoog om te zien en 24 px hoog om te raken: de balk zelf is
   doorzichtig en het streepje is een ::before. Anders mik je op vijf pixels. */
.stip {
  flex: 1; height: 24px; border: 0; padding: 0; background: transparent;
  position: relative; cursor: default;
}
.stip::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 5px;
  border-radius: 3px; background: var(--vul-2);
  transition: background .3s var(--soepel), transform .16s var(--soepel);
}
.stip.klaar { cursor: pointer; }
.stip.klaar::before { background: var(--goed); }
.stip.nu::before { background: var(--blauw); }
.stip.klaar:active::before { transform: scaleY(2); }

/* Het bewaarlampje: de app slaat tussentijds op, en dat mag je zien. */
.bewaard {
  flex: none; display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-3);
  opacity: 0; transition: opacity .3s var(--soepel);
}
.bewaard.zicht { opacity: 1; }
.bewaard i { width: 6px; height: 6px; border-radius: 50%; background: var(--goed); display: block; }

/* ── het werkblad ─────────────────────────────────────────────────────── */
/* Het werkblad vult de hoogte die de kop en de voetbalk overlaten. Dat is
   nodig voor het startscherm, waar Account tegen de bodem hoort te staan, en
   het verandert niets voor de andere schermen: die vullen dezelfde ruimte en
   hun inhoud begint gewoon bovenaan. */
main { flex: 1; width: 100%; display: flex; flex-direction: column; }
.blad-in { flex: 1; }
.blad-in {
  max-width: var(--kolom); width: 100%; margin: 0 auto;
  /* Onderaan ruimte voor de vaste voetbalk: 54 px knop + 2× s3 padding +
     de veilige zone van de telefoon, plus s7 lucht. Geen rond getal maar de
     som van wat er staat, zodat het blijft kloppen als de knop verandert. */
  padding: var(--s6) var(--kant)
           calc(54px + 2 * var(--s3) + var(--s7) + max(0px, env(safe-area-inset-bottom)));
}
.blad-in.breed { max-width: var(--kolom-breed); }
/* Zonder voetbalk hoeft er onderaan geen ruimte voor te worden vrijgehouden.
   Anders staat er 110 px lucht onder de laatste rij en komt Account op het
   startscherm niet tegen de bodem. */
.blad-in.geenvoet { padding-bottom: var(--s6); }

.hulp { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.sectiekop {
  font-family: var(--kop); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s3);
}

/* ── HET RITME ────────────────────────────────────────────────────────────
   Eén regel voor de afstand tussen alles wat op een scherm onder elkaar staat.
   Mex, 03-09-2026: "zorg dat de spacing op mobiel ook helemaal goed is zoals we
   altijd hebben."

   Wat er eerst gebeurde: elk blok had zijn eigen marge, de een via CSS, de
   ander via een inline style in de JS, en dan staat gelijksoortige inhoud op
   het ene scherm 12 px en op het andere 20 px uit elkaar. Dat is precies wat je
   ziet als spacing "niet klopt", ook als je niet kunt aanwijzen waarom.

   Nu: de blokken zelf hebben geen marge, en de afstand ertússen staat hier.
   Een sectiekop krijgt meer lucht boven zich, want die begint iets nieuws. */
.blad-in > * + * { margin-top: var(--s4); }
.blad-in > .sectiekop + * { margin-top: 0; }
.blad-in > * + .sectiekop { margin-top: var(--s6); }
.blad-in > .titelblok + * { margin-top: var(--s6); }
.titelblok h1 { margin-bottom: var(--s2); }
.titelblok h1:only-child { margin-bottom: 0; }
.stil { color: var(--ink-3); font-size: 14px; }
.hint { font-size: 13px; color: var(--ink-3); font-weight: 400; line-height: 1.45; }
.verborgen { display: none !important; }

/* ── keuzes: volle regels met een vinkje, geen tegels ─────────────────────
   Een rij die de hele breedte pakt is op een telefoon met één duim te raken;
   een raster van tegels is dat niet. */
.keuzes { display: flex; flex-direction: column; gap: var(--s2); }
.keuze {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: var(--raak); padding: var(--s3) var(--s4); text-align: left;
  background: var(--vlak); border: 1.5px solid var(--lijn-zacht); border-radius: 14px;
  color: var(--ink); cursor: pointer;
  transition: border-color .18s var(--soepel), background .18s var(--soepel), transform .16s var(--soepel);
}
.keuze:active { transform: scale(.985); background: var(--vul); }
.keuze.aan { border-color: var(--blauw); background: var(--blauw-tint); }
.keuze .titel-r {
  display: block; font-family: var(--kop); font-size: 16px; font-weight: 700;
  letter-spacing: -.015em; overflow-wrap: anywhere;
}
.keuze .bij { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.keuze .rechts { margin-left: auto; flex: none; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.keuze .vink {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--lijn); display: grid; place-items: center;
  font-size: 12px; color: transparent;
}
.keuze.aan .vink { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.keuze .wat { flex: 1; min-width: 0; }

.erbij {
  width: 100%; min-height: var(--raak);
  border: 1.5px dashed var(--lijn); border-radius: 14px;
  background: transparent; color: var(--blauw-diep);
  font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.erbij:active { transform: scale(.99); background: var(--vul); }

/* ── tellers: aantallen zonder toetsenbord ──────────────────────────────── */
.teller { display: flex; align-items: center; gap: var(--s2); flex: none; margin-left: auto; }
.teller button {
  width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--lijn);
  background: var(--vlak); color: var(--ink); font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.teller button:active { transform: scale(.92); }
.teller button:disabled { opacity: .3; cursor: default; }
.teller .n {
  min-width: 28px; text-align: center;
  font-family: var(--kop); font-size: 18px; font-weight: 700;
}
.teller .n.nul { color: var(--ink-3); font-weight: 500; }

/* ── segmenten: een handvol waarden naast elkaar ────────────────────────── */
.segmenten { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--s2); }
.segmenten.vier { grid-template-columns: repeat(4, 1fr); }
.seg {
  min-height: 64px; border: 1.5px solid var(--lijn-zacht); border-radius: 13px;
  background: var(--vlak); color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: all .16s var(--soepel);
}
.seg b { font-family: var(--kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.seg span { font-size: 11px; color: var(--ink-3); }
.seg:active { transform: scale(.96); }
.seg.aan { border-color: var(--blauw); background: var(--blauw-tint); }
.seg.aan span { color: var(--blauw-diep); }

/* ── kaarten ────────────────────────────────────────────────────────────── */
.kaart {
  background: var(--vlak); border: 1px solid var(--lijn-zacht); border-radius: var(--r-md);
  padding: var(--s4);
}
.kaart.ruim { padding: var(--s5) var(--s6); border-radius: var(--r-lg); }
/* Kaarten die in een .keuzes-lijst staan, houden afstand via de gap. */
.keuzes > .kaart + .kaart { margin-top: 0; }
.kaart-kop { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.kaart-kop b { font-family: var(--kop); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.kaart-kop .bij { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.onderkop { margin: 0 0 var(--s4); font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ── formulieren ────────────────────────────────────────────────────────── */
label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: var(--s1); color: var(--ink-2); }
.veld { margin-bottom: 0; }
.veldenrij + .veldenrij, .veldenrij + .keuzes, .keuzes + .veldenrij { margin-top: var(--s3); }
.veldenrij { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

input[type='text'], input[type='password'], input[type='number'], input[type='email'],
select, textarea {
  width: 100%; min-height: 48px; padding: 0 var(--s3);
  font-family: var(--tekst); font-size: 16px; font-weight: 500;
  color: var(--ink); background: var(--vul);
  border: 1px solid var(--lijn-zacht); border-radius: 10px;
}
textarea { padding: var(--s2) var(--s3); min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blauw); background: var(--vlak);
}
input[type='number'] { text-align: right; }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8095' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* ── knoppen ────────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  background: var(--blauw); color: #fff;
  border: 1.5px solid var(--blauw); border-radius: var(--pil);
  font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .16s var(--soepel), transform .16s var(--soepel);
}
.knop:hover { background: var(--blauw-diep); border-color: var(--blauw-diep); }
.knop:active { transform: scale(.985); }
.knop[disabled] { opacity: .42; cursor: default; }
.knop.stil { background: transparent; color: var(--blauw-diep); border-color: var(--lijn); }
.knop.stil:hover { background: var(--vul); border-color: var(--blauw); }
.knop.donker { background: var(--donker); border-color: var(--donker); color: #fff; }
.knop.donker:hover { background: var(--donker-zacht); border-color: var(--donker-zacht); }
.knop.klein { min-height: 38px; padding: 0 var(--s4); font-size: 14px; }

/* ── de balk onderaan: hier ga je verder ────────────────────────────────── */
footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
  background: var(--glas);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--lijn-zacht);
  /* Onderaan zit op een iPhone de home-indicator. Zelfde aanpak als boven: de
     inzet met een ondergrens, zodat de knop nooit half onder de streep valt. */
  padding: var(--s3) var(--kant) max(var(--s3), calc(var(--s2) + env(safe-area-inset-bottom)));
}
.footer-in {
  max-width: var(--kolom); margin: 0 auto;
  display: flex; gap: var(--s2); align-items: center;
}
.footer-in.breed { max-width: var(--kolom-breed); }
#verder {
  flex: 1; min-height: 54px; border: 0; border-radius: var(--pil); cursor: pointer;
  background: var(--blauw); color: #fff;
  font-family: var(--kop); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(20, 70, 120, .2), 0 8px 18px -13px rgba(27, 96, 163, .9);
  transition: transform .16s var(--soepel), opacity .2s var(--soepel);
}
#verder:active { transform: scale(.985); }
#verder:disabled { opacity: .42; cursor: default; box-shadow: none; }
.naast {
  flex: none; min-height: 54px; padding: 0 var(--s5);
  border: 0; border-radius: var(--pil); cursor: pointer;
  background: var(--vul); color: var(--ink); font-size: 15.5px; font-weight: 600;
  display: grid; place-items: center; text-decoration: none;
}
.naast:active { transform: scale(.98); }

/* ── meldingen ──────────────────────────────────────────────────────────── */
.melding {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: 12px;
  font-size: 14px; line-height: 1.5;
}
.melding .ic {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; margin-top: 1px;
}
.melding.let { background: var(--let-tint); color: var(--let-diep); }
.melding.let .ic { background: var(--let); }
.melding.goed { background: var(--goed-tint); color: var(--goed-diep); }
.melding.goed .ic { background: var(--goed); }
.melding.info { background: var(--blauw-tint); color: var(--blauw-diep); }
.melding.info .ic { background: var(--blauw); }
.melding.mis { background: var(--mis-tint); color: var(--mis-diep); }
.melding.mis .ic { background: var(--mis); }

/* ── tabellen ────────────────────────────────────────────────────────────
   Op een telefoon schuift een tabel horizontaal in zijn eigen bak; de pagina
   zelf schuift nooit zijwaarts. */
.tabelbak { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--s1)); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 600; color: var(--ink-3);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--lijn); white-space: nowrap;
}
td { padding: var(--s3); border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.getal, th.getal { text-align: right; white-space: nowrap; }

/* ── merktekens en cijfers ──────────────────────────────────────────────── */
.merk {
  display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.6;
  padding: 1px 9px; border-radius: var(--pil); white-space: nowrap;
}
.merk.geverifieerd { background: var(--goed-tint); color: var(--goed-diep); }
.merk.afgeleid { background: var(--blauw-tint); color: var(--blauw-diep); }
.merk.schatting { background: var(--let-tint); color: var(--let-diep); }
.merk.aangepast { background: var(--vul-2); color: var(--ink); }

.cijfers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.cijfers.drie { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cijfer { background: var(--vul); border-radius: 12px; padding: var(--s3) var(--s4); }
.cijfer dt, .cijfer .naam { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.cijfer dd, .cijfer .waarde {
  margin: 0; font-family: var(--kop); font-size: 19px; font-weight: 700; letter-spacing: -.02em;
}

/* ── het prijsblok ──────────────────────────────────────────────────────── */
.prijsblok {
  background: var(--blauw-tint);
  border: 1px solid var(--lijn-zacht); border-radius: 18px;
  padding: var(--s5); text-align: center;
}
.prijsblok .groot {
  font-family: var(--kop); font-size: 40px; font-weight: 700; letter-spacing: -.03em;
  color: var(--blauw-diep); line-height: 1.05;
}
.prijsblok .bij { font-size: 13.5px; color: var(--ink-2); margin-top: var(--s1); }
.prijsblok .was { font-size: 13px; color: var(--ink-3); margin-top: var(--s1); }

.totalen { display: grid; gap: var(--s1); margin-top: var(--s4); padding-top: var(--s2); }
.totalen div { display: flex; justify-content: space-between; gap: var(--s4); font-size: 15px; }
.totalen .groot {
  font-family: var(--kop); font-weight: 700; font-size: 20px;
  border-top: 2px solid var(--ink); margin-top: var(--s2); padding-top: var(--s2);
}

/* ── het menu: een paneel dat inschuift ─────────────────────────────────── */
/* Het menu.
 *
 * Dicht is dit `display:none` en niet "onzichtbaar met pointer-events:none".
 * Dat scheelt niet in wat je ziet maar wel in wat werkt: een vaste laag over
 * het hele scherm kan het scrollen van de pagina opeten, en dan lijkt de app
 * vastgelopen. Mex, 03-09-2026: "ik kan niet scrollen." Weg met die laag als
 * hij niet nodig is. */
.menuvel {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(2, 21, 44, .45);
  display: none; place-items: end stretch;
}
.menuvel.open { display: grid; }
.menuvel-in {
  background: var(--vlak);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s5) var(--kant) max(var(--s5), calc(var(--s4) + env(safe-area-inset-bottom)));
  max-height: 88vh; overflow-y: auto;
}
.menuvel nav { display: flex; flex-direction: column; gap: var(--s1); }
.menuvel nav button {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--raak); padding: 0 var(--s4);
  -webkit-tap-highlight-color: transparent;
  background: transparent; border: 0; border-radius: 14px;
  color: var(--ink); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.menuvel nav button:active { background: var(--vul); }
.menuvel nav button[aria-current='true'] { background: var(--blauw-tint); color: var(--blauw-diep); }
.menuvel .wie {
  margin-bottom: var(--s4); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--lijn-zacht);
}
.menuvel .wie b { font-family: var(--kop); font-size: 16px; font-weight: 700; display: block; }

/* Op een breed scherm hoeft het menu niet in te schuiven: dan staat het als
   paneel onder de knop. LINKS, niet rechts, Mex, 03-09-2026: "kunnen we dit
   niet op desktop aan de linkerkant zetten." Op een telefoon hoort de knop
   rechtsboven (duimbereik) en schuift het vel van onderen in; op een laptop
   werk je van linksboven naar rechtsonder en staat een navigatie links.

   De knop verhuist mee. Een paneel dat links uitklapt uit een knop rechtsboven
   is erger dan het probleem: dan komt het uit niets.

   Het paneel lijnt uit op de linkerrand van de kolom van het blad waar je bent
   (620, 780 of 1080 breed). Vandaar dezelfde klassen als op de kop. */
@media (min-width: 861px) {
  .appkop-in #menuknop { order: -1; }
  /* De naam mag dan niet meer tegen de knop aan plakken. */
  .appkop-in #menuknop + .waar, .appkop-in #menuknop + #terug { margin-left: var(--s1); }

  .menuvel {
    place-items: start start; background: rgba(2, 21, 44, .25);
    padding: max(84px, calc(72px + env(safe-area-inset-top)))
             var(--kant) 0
             max(var(--kant), calc(50vw - var(--kolom) / 2));
  }
  .menuvel.breed { padding-left: max(var(--kant), calc(50vw - var(--kolom-breed) / 2)); }
  .menuvel.startkop { padding-left: max(var(--kant), calc(50vw - var(--kolom-start) / 2)); }
  .menuvel.open { display: grid; }
  .menuvel-in { width: 300px; border-radius: var(--r-lg); box-shadow: var(--schaduw-l); }
}

/* ── inloggen ───────────────────────────────────────────────────────────── */
.inlogpagina {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--s6) var(--kant);
  background: var(--donker);
}
.inlogkaart {
  background: #fff; border-radius: var(--r-lg);
  padding: var(--s7) var(--s6) var(--s6);
  width: 100%; max-width: 400px; box-shadow: var(--schaduw-l);
  color: #02152C;
}
.inlogkaart img { width: 190px; height: auto; display: block; margin: 0 auto var(--s6); }
.inlogkaart label { color: #3D5165; }
.inlogkaart input { background: rgba(2, 21, 44, .045); }

.rij { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.rij.eind { justify-content: flex-end; }
.tussen { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }

.laden { display: grid; place-items: center; padding: var(--s9) 0; color: var(--ink-3); font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* "Meer instellen": de afgeleide keuzes, dichtgeklapt. */
.meer > summary { cursor: pointer; padding: var(--s2) 0; }
.meer > summary::marker { color: var(--ink-3); }
.meer > .kaart { margin-top: var(--s2); }

/* ── het startscherm ──────────────────────────────────────────────────────
   De werkzaken bovenaan, Account onderaan tegen de bodem. Mex, 03-09-2026:
   "account ook onderaan met een andere kleur" en "zou hem op de bodem zetten."

   Dat onderscheid is er ook echt: de bovenste rijen zijn wat je komt doen, en
   Account is waar je aan de app zelf zit. Vandaar de donkere variant, dezelfde
   kleur als de balk erboven, dus hij leest als deel van de schil en niet als
   een vijfde taak. */


/* Het lampje in de kop heeft twee toestanden. "bewaard" verdwijnt na anderhalve
   seconde; "alleen op dit toestel" blijft staan, want dat is geen bevestiging
   maar een waarschuwing die je moet kunnen zien. */
.bewaard.alleenhier { color: var(--let-diep); }
.bewaard.alleenhier i { background: var(--let); }

/* De hervat-rij: dit is geen taak maar een uitnodiging om door te gaan. */

/* ── de inlogkaart ────────────────────────────────────────────────────────
   De knop over de volle breedte en niet rechtsonder in een hoek. Mex,
   03-09-2026: "zet die login button in het midden, verhouding is off."

   Klopt: een pil van 120 px rechts onder twee velden van 340 px staat scheef,
   en er is niets anders op die regel waar hij zich naar verhoudt. Over de volle
   breedte is hij even breed als de velden erboven en staat het label in het
   midden, één kolom in plaats van twee dingen die om aandacht vragen.

   De velden krijgen hier ook hun onderlinge afstand; het ritme van .blad-in
   geldt niet op deze pagina, want die heeft geen werkblad. */
.inlogkaart .veld { margin-bottom: var(--s4); }
.inlogkaart .veld:last-of-type { margin-bottom: var(--s5); }
.knop.vol { width: 100%; min-height: 52px; font-size: 16.5px; }

/* ── de foutmelding op de inlogpagina ────────────────────────────────────
   `fout` is de klasse die login.html en wachtwoord.html gebruiken; bij het
   herschrijven van deze stijl heette hij `mis` geworden. Gevolg: de melding
   kwam wél op het scherm maar zonder enige opmaak, donkere tekst tussen twee
   velden, die je makkelijk over het hoofd ziet. Mex, 03-09-2026: "maak de error
   ook rood."

   Beide namen werken nu, en op de inlogkaart krijgt hij een eigen behandeling:
   die kaart staat op wit met eigen kleuren, dus de tinten uit de app zouden er
   niet uitkomen. */
.melding.fout {
  background: var(--mis-tint);
  color: var(--mis-diep);
}
.melding.fout .ic { background: var(--mis); }

.inlogkaart .melding.fout,
.inlogkaart .melding.mis {
  background: #FDECEA;
  border: 1px solid #E9A79F;
  color: #B3251A;
  font-weight: 600;
  margin-bottom: var(--s4);
}

/* ── het formulier "artikel toevoegen" ───────────────────────────────────
   De naam is het langste veld en hoort dus niet het smalste te zijn. Eerst
   stonden alle vier de velden naast elkaar in de gewone veldenrij: de
   placeholder van de naam werd afgekapt terwijl "per stuk" en een bedrag van
   drie tekens elk een kwart van de breedte kregen. En de knop hing links onder
   de naam, los van de rest.

   Nu: naam over de volle breedte, dan rubriek / eenheid / prijs in drie
   gelijke kolommen, dan de knop over de volle breedte. Onder 620 px vallen ze
   onder elkaar, want drie kolommen op een telefoon zijn drie te veel. */
.artikelvorm { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.artikelvorm .breed { grid-column: 1 / -1; }

@media (min-width: 620px) {
  .artikelvorm { grid-template-columns: repeat(3, 1fr); }
}

.artikelvorm-knop { margin-top: var(--s4); }

/* Een keuzelijst en een tekstveld horen op dezelfde plek hetzelfde aan te
   voelen. Zonder deze regel valt een select terug op de vulling van de
   browser en staat hij naast een tekstveld ineens wit, wat eruitziet alsof
   het een ander soort veld is. */
.artikelvorm select, .artikelvorm input { background: var(--vul); }
.artikelvorm select:focus, .artikelvorm input:focus { background: var(--vlak); }

/* Verwijderen is de enige knop in de app die iets weghaalt. Die hoort niet
   dezelfde kleur te hebben als de rest, niet fel, want het is geen
   hoofdactie, maar wel herkenbaar zodat je hem niet per ongeluk raakt. */
.knop.stil.weg { color: var(--mis-diep); border-color: rgba(192, 57, 43, .28); }
.knop.stil.weg:hover { background: var(--mis-tint); border-color: var(--mis); }

/* ── de offerteregels ────────────────────────────────────────────────────
   Een lijst en geen stapel kaarten. Er was hier een `.keuze` per regel, een
   blauw vlak met rand, precies de vorm van de knoppen waarmee je iets aanzet.
   Acht daarvan onder elkaar leest als acht dingen om aan te tikken, terwijl je
   er niets mee kunt.

   Drie kolommen: aantal, beschrijving, bedrag. De cijfers hebben gelijke
   breedte (font-variant-numeric staat op body), dus de bedragen staan onder
   elkaar. Haarlijnen in plaats van kaders: dat is wat een prijsoverzicht op
   papier ook doet. */
.offerteregels { display: grid; }

.oregel {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: 14.5px;
  line-height: 1.45;
}
.oregel:last-child { border-bottom: 0; }

.oaantal { color: var(--ink-3); text-align: right; }
.obeschrijving { font-weight: 500; overflow-wrap: anywhere; }
.obedrag { font-weight: 600; white-space: nowrap; text-align: right; }

/* De prijs per stuk hoort bij de beschrijving en niet bij het bedrag: hij legt
   uit waar dat bedrag uit volgt. */
.operstuk { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }

/* De samenvattingsregel van het pakket: de kop boven zijn onderdelen. */
.okop .obeschrijving {
  font-family: var(--kop); font-weight: 700; font-size: 15px; letter-spacing: -.015em;
}
.okop { padding-top: var(--s2); border-bottom-color: var(--lijn); }

/* Een parameter die bij de gekozen rekenmethode niets doet. Hij blijft staan, hij hoort bij de andere methode en je wilt zijn waarde kunnen zien, maar hij
   mag niet doen alsof hij meedoet. */
tr.doetniets { opacity: .55; }
tr.doetniets input { background: transparent; border-style: dashed; }

/* De subregel is bij de methodekeuze wél nodig: daar staat wát de methode doet,
   en dat is de hele reden om te kiezen. */
.keuze .bij { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; font-weight: 400; }

/* ── het startscherm ──────────────────────────────────────────────────────
   Tegels in plaats van tekstregels. Mex, 03-09-2026: "ik zou de layout van het
   home scherm ook even aanpassen, iets doen met zijn favicons, dat het op
   desktop er ook goed uit ziet."

   Het waren vier regels in de leeskolom van 620 px. Op een telefoon klopte dat,
   op een laptop was het een smalle streep in veel wit. Dus: een eigen, ruimere
   kolom, en een rooster dat vanaf 760 px in twee kolommen valt.

   Eén vorm voor beide maten. Een tegel is op een telefoon precies wat het eerst
   was, een rij met een pictogram ervoor, en wordt op een breed scherm een
   blok. Geen tweede opzet die apart onderhouden en apart stukgaan moet. */
.blad-in.startblad {
  display: flex; flex-direction: column;
  max-width: var(--kolom-start);
}

/* De groet. Eén regel eronder met wat er ligt, het antwoord op "moet ik iets
   doen?", niet versiering. */
.welkom h1 {
  font-family: var(--kop); font-weight: 700;
  font-size: 28px; line-height: 1.15; letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.welkom p { margin: var(--s1) 0 0; color: var(--ink-3); font-size: 14.5px; }

/* minmax(0, 1fr) en niet 1fr: een grid-kolom van `1fr` krimpt niet onder de
   min-content van wat erin staat, en de ondertitel staat op één regel. Daardoor
   liep het rooster op een telefoon een centimeter buiten het scherm. */
.starttegels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.blad-in > .starttegels + .starttegels { margin-top: var(--s2); }

.tegel {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; min-height: var(--raak);
  padding: var(--s3) var(--s4);
  background: var(--vlak); border: 1px solid var(--lijn-zacht);
  border-radius: var(--r-md); box-shadow: var(--schaduw-s);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: transform .16s var(--soepel), box-shadow .16s var(--soepel),
              border-color .16s var(--soepel);
}
.tegel:active { transform: scale(.985); }
.tegel-tekst { flex: 1; min-width: 0; }
.tegel-kop {
  display: block; font-family: var(--kop); font-weight: 700;
  font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em;
}
.tegel-bij {
  display: block; margin-top: 2px;
  font-size: 13px; line-height: 1.35; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tegel-pijl { flex: none; font-size: 20px; color: var(--ink-3); line-height: 1; }

/* Het pictogramblokje. De vormen komen uit PICTOGRAM in os.js: een raster van
   24, currentColor, dus scherp op elke pixeldichtheid en het neemt de kleur van
   de tegel over, ook op de donkere. */
.tegel-icoon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--blauw-tint); color: var(--blauw-diep);
}
.tegel-icoon svg { width: 21px; height: 21px; display: block; }
.tegel-icoon svg [class] { }
.tegel-icoon svg path, .tegel-icoon svg circle {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tegel-icoon svg .dun { opacity: .55; }
.tegel-icoon svg .uit { fill: currentColor; stroke: none; }

/* De hoofdtegel: waarom je hier bent. Donkerblauw, over de volle breedte zolang
   er niets te hervatten valt. */
.tegel.hoofd {
  background: var(--donker); border-color: var(--donker); color: #fff;
  box-shadow: var(--schaduw-m);
}
.tegel.hoofd .tegel-bij { color: rgba(255, 255, 255, .66); }
.tegel.hoofd .tegel-pijl { color: rgba(255, 255, 255, .6); }
.tegel.hoofd .tegel-icoon { background: rgba(255, 255, 255, .13); color: #fff; }

/* Hervatten. Accentblauw, want het is een uitzondering en geen vast onderdeel
   van het menu. */
.tegel.hervat { border-color: var(--blauw); background: var(--blauw-tint); }
.tegel.hervat .tegel-pijl { color: var(--blauw-diep); }
.tegel.hervat .tegel-icoon { background: var(--blauw); color: #fff; }


/* De kop volgt de kolom van het scherm eronder. Op het startscherm is dat 780
   en niet 1080: anders staat de naam links van de tegels. */
.appkop.startkop .appkop-in { max-width: var(--kolom-start); }

/* Vanaf hier is er ruimte voor twee kolommen. Onder deze breedte blijft het één
   kolom, en dan is een tegel gewoon een rij.

   Eén regel voor de vorm, zodat er niets uit te zoeken valt: een tegel die over
   de volle breedte staat is een RIJ (pictogram links, tekst ernaast, pijl aan
   het eind), een tegel in één kolom is een BLOK (pictogram boven, tekst tegen
   de onderkant). Dat volgt de vorm van het vak en niet de betekenis van de
   tegel, dus het klopt ook bij een tegel die er later bij komt. */
@media (min-width: 760px) {
  .welkom h1 { font-size: 34px; }
  .starttegels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
  .starttegels > .vol-breed { grid-column: 1 / -1; }

  /* Geen uitzondering voor een laatste tegel meer. Die was er even, een
     alleen overgebleven tegel werd een brede rij, en dat was juist het lelijke
     geval: Mex, 03-09-2026 over Rendement, "hoezo staat deze zo zielig
     eronder". De oorzaak zat een stap eerder: met een brede hoofdtegel bleven
     er drie over en drie past niet in twee kolommen. Nu staan de vier
     menu-tegels als 2×2 en is er niets meer over. Hervatten en Account staan
     buiten dit rooster en blijven dus rijen. */

  /* BLOK, de standaardvorm in een kolom van het rooster. */
  .tegel {
    flex-direction: column; align-items: flex-start;
    justify-content: space-between; gap: var(--s5);
    min-height: 128px; padding: var(--s5);
  }
  .tegel-icoon { width: 44px; height: 44px; }
  .tegel-icoon svg { width: 23px; height: 23px; }
  .tegel-kop { font-size: 18px; }
  .tegel-bij { white-space: normal; }
  .tegel-tekst { flex: none; }
  /* In een blok is de hele tegel de knop en staat er geen regel om af te
     sluiten; dan heeft een pijl geen functie. */
  .tegel-pijl { display: none; }

  /* RIJ, elke tegel die over de volle breedte staat. */
  .starttegels > .vol-breed {
    flex-direction: row; align-items: center;
    justify-content: flex-start; gap: var(--s4);
    min-height: 0; padding: var(--s4) var(--s5);
  }
  .starttegels > .vol-breed .tegel-tekst { flex: 1; }
  .starttegels > .vol-breed .tegel-pijl { display: block; }

  /* De hoofdtegel mag als rij wat meer gewicht hebben dan de rest. */
  .tegel.hoofd { padding: var(--s5); }
  .tegel.hoofd .tegel-kop { font-size: 20px; }
  .tegel.hoofd .tegel-icoon { width: 48px; height: 48px; }
  .tegel.hoofd .tegel-icoon svg { width: 25px; height: 25px; }

  /* Hover moet je ZIEN. Op de witte tegels doet een randje en een schaduw dat,
     op de donkerblauwe niet: daar was de rand al donkerblauw en een schaduw
     verdwijnt tegen het vlak. Mex, 03-09-2026: "als ik over nieuwe offerte ga
     met mijn muis dan zie ik niet die hover." Dus wordt het vlak zelf lichter,
     en dat is meteen dezelfde taal als de knoppen elders in de app. */
  .tegel:hover { border-color: var(--lijn); box-shadow: var(--schaduw-m); }
  .tegel.hoofd:hover {
    background: var(--donker-zacht); border-color: var(--donker-zacht);
    box-shadow: var(--schaduw-l);
  }
  .tegel.hoofd:hover .tegel-icoon { background: rgba(255, 255, 255, .2); }
  .tegel.hervat:hover { border-color: var(--blauw-diep); background: rgba(55, 156, 226, .16); }
}

/* De afsluitende rij van een kaart: de knop die bij het formulier erboven
   hoort. Ruimte erboven, en rechts uitgelijnd zoals overal in de app. */
.kaart > .kaartvoet { margin-top: var(--s4); }
.kaart > .melding { margin-top: var(--s3); }

/* Een formulier in een kaart wordt niet breder dan het leesbaar is, zonder dit
   staan twee wachtwoordvelden op een laptop over 1080 px uitgesmeerd. De knop
   krijgt dezelfde breedte mee, anders lijnt hij rechts uit op de kaartrand en
   staat hij een halve pagina naast het formulier waar hij bij hoort. */
.kaart > .veldenrij, .kaart > .kaartvoet, .kaart > .hint { max-width: var(--kolom); }
.kaart > .veldenrij + .hint { margin-top: var(--s2); }

/* Het logo in de kop, op het startscherm in plaats van de naam in letters.
   Hoogte vast, breedte volgt, het logo is breed en mag niet uitrekken. */
/* Het logo staat naast de naam van het blad, dus het duwt niets weg: `.waar`
   heeft flex:1 en vult de rest. Alleen op het startscherm staat het logo alleen,
   en dan moet het de ruimte wél opeisen zodat het lampje en de menuknop rechts
   blijven staan. */
.kopmerk { flex: none; height: 26px; width: auto; display: block; margin-right: var(--s3); }
.appkop.startkop .kopmerk { margin-right: auto; }
@media (min-width: 861px) { .kopmerk { height: 30px; } }

/* De pijltjes van een getalveld. Mex, 03-09-2026: "dit zijn ook een beetje die
   vervelende dingen." Ze horen bij de browser en niet bij deze app: twee grijze
   blokjes die op een donkere ondergrond als een fout ogen, een tikdoel van
   negen pixels hebben, en per browser anders staan. Waar een aantal geteld moet
   worden staat er al een teller met knoppen van 44 px. */
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* De marge op een offerte. Intern: hij staat in de app en niet in de PDF.
   Vandaar de afwijkende, donkere kaart: dit is het enige blok op dit scherm dat
   de klant nooit ziet, en dat mag je zien. */
.margekaart {
  background: var(--donker); border-color: var(--donker); color: #fff;
}
.margekaart .kaart-kop b { color: #fff; }
.margekaart .kaart-kop .bij { color: rgba(255, 255, 255, .6); }
.margecijfers {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  margin-top: var(--s3);
}
.margecijfer {
  padding: var(--s3); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
}
.margecijfer.nadruk { background: var(--blauw); }
.margecijfer .label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.margecijfer .waarde {
  font-family: var(--kop); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  margin-top: 2px; color: #fff;
}
.margecijfer .bij { font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 1px; }
.margekaart .knop.stil { color: #fff; border-color: rgba(255, 255, 255, .28); }
.margekaart .knop.stil:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.margekaart table { color: #fff; }
.margekaart th { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .16); }
.margekaart td { border-color: rgba(255, 255, 255, .1); }
.margekaart .hint { color: rgba(255, 255, 255, .55); }
.margekaart .melding { margin-top: var(--s3); }

/* De prijslijst heeft vijf kolommen plus een knop, en daarvan zijn er twee een
   invoerveld van 116 px. Zonder ondergrens wordt de omschrijvingskolom dan zo
   smal dat elke artikelnaam over vier regels valt en een rij 100 px hoog wordt.
   Met een ondergrens schuift de tabel liever horizontaal in zijn eigen bak, en
   dat is wat .tabelbak al kan. */
table.prijstabel { min-width: 760px; }
table.prijstabel td:first-child { min-width: 250px; }