/* ==========================================================================
   LiberForte klantportaal — MOBIELE PORT (klantzijde)
   Bron: design_handoff_mobiele_port/ (README + "Klantenportaal mobiel.dc.html")
   met klantenportaal_mobiele_port_inventarisatie.md als leidende bron voor
   exacte waarden.

   Geladen NA lf-klant.css, dus als laatste in de keten:
     main.css -> klantportaal.css -> lf-fonts.css -> lf-klant.css -> DIT
   Alles staat in media queries; op desktop verandert er per constructie NIETS.

   ── Breakpoint ──────────────────────────────────────────────────────────
   `max-width: 720px` OF een lage liggende viewport. Die tweede tak is nodig
   omdat een iPhone 16 Pro liggend 852x393 is: op breedte alleen zou de
   telefoon in liggende stand terugvallen op de desktoplayout, precies bij het
   kantelen dat het ontwerp juist vraagt voor de vergelijkingstabellen.
   Desktop (1280x800, 1440x900) raakt geen van beide takken.

   ── Schil ───────────────────────────────────────────────────────────────
   Basis 393px, vloeiend, max-width 460px gecentreerd (README "Vaste
   uitgangspunten"). 20px zijmarge, 36px boven de paginatitel.

   ── Niet doen ───────────────────────────────────────────────────────────
   Geen schaduwen; radius 0 behalve het tan infovlak (8px); raakvlakken
   >= 44x44; tekst nooit verkleinen om iets passend te maken (de enige
   uitzondering is het adres in het woningdossier, dat via JS krimpt).
   ========================================================================== */

/* ── Basisregels (GEEN media query) ──────────────────────────────────────
   Deze drie elementen bestaan alleen voor mobiel maar staan wél in de HTML
   van elke pagina. Ze zijn hier standaard verborgen en worden in de media
   query hieronder aangezet. Dit is het enige stuk van dit bestand dat op
   desktop iets doet — en het doet daar precies niets zichtbaars. */

.lfk-mobiel-burger { display: none; }
.lfk-menu-backdrop,
.lfk-menu-paneel { display: none; }

/* Het headerlogo wordt sinds de mobiele port ALTIJD gerenderd, ook op de
   documentenpagina die `header_zonder_logo` zet (daar staat het logo in de
   content op 52px = 443px breed, wat op 393px niet past). Op desktop blijft
   dat logo verborgen, zodat de desktopweergave onveranderd is. */
.lfk-header-logo.is-verborgen-desktop { display: none; }

/* Rekenmodule: de −/+ stapknoppen en de min/max-schaal zijn mobiel-only.
   `display: contents` laat de slider op desktop een direct flex-kind van
   `.lfk-rm-sliderrij` blijven, zodat die rij daar letterlijk ongewijzigd is. */
.lfk-rm-schuifrij { display: contents; }
.lfk-rm-stap,
.lfk-rm-schaal { display: none; }

/* De vaste vergelijkbalk bestaat alleen op mobiel; op desktop staat de
   vergelijkknop in elke sectiekop. */
.lfk-vgl-balk { display: none; }

/* De kantelkaart hoort alleen op een telefoon in staande stand. Op desktop
   is hij altijd verborgen en staat de tabel er gewoon. */
.lfk-kantelkaart { display: none; }

/* ── O1: laadmelding bij het inladen van een handtekening ────────────────
   Geldt op alle breedtes: het verkleinen, uploaden en filteren duurt overal
   even lang. Drie puntjes die om beurten oplichten — geen spinner, dat past
   niet bij een merk dat verder animatie-arm is. */
.lfk-htladen { position: fixed; inset: 0; z-index: 50; }
.lfk-htladen[hidden] { display: none; }
.lfk-htladen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 22, 0.65);
}
.lfk-htladen-kaart {
  position: relative;
  max-width: 300px;
  margin: 38vh auto 0;
  background: var(--lf-paper);
  border: 1px solid var(--lf-card-border);
  padding: 26px 24px;
  text-align: center;
}
.lfk-htladen-tekst {
  margin: 14px 0 0;
  font-size: var(--lfk-fs-13-5);
  color: var(--lf-body);
}
.lfk-htladen-punten { display: inline-flex; gap: 7px; }
.lfk-htladen-punten i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-brass);
  opacity: 0.25;
  animation: lfk-punt 1.2s ease-in-out infinite;
}
.lfk-htladen-punten i:nth-child(2) { animation-delay: 0.15s; }
.lfk-htladen-punten i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lfk-punt {
  0%, 70%, 100% { opacity: 0.25; }
  35%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lfk-htladen-punten i { animation: none; opacity: 0.6; }
}

/* ── Zichtbaarheidsschakelaars mobiel/desktop ────────────────────────────
   Een handvol bevindingen uit de iPhone-ronde vraagt om ándere HTML, niet
   om andere opmaak — een compacte documentenlijst i.p.v. een tabel met vier
   kolommen, een kort adres i.p.v. een lang. Die staan dubbel in het
   sjabloon; deze twee klassen bepalen welke van de twee je ziet. De regel
   van de hele port blijft daarmee overeind: op desktop verandert er niets.

   `[hidden]` telt hier expliciet mee: een `display`-waarde wint anders van
   het hidden-attribuut, en dat heeft in deze port al een paar keer een
   verborgen blok zichtbaar gemaakt. */
/* De tekstinvoer-stand bestaat alleen op mobiel. */
.ot-typbalk { display: none; }

/* ── Punt 3 · iOS mag tekst niet zelf opblazen (Ross, 19-08-2026) ──────
   iOS Safari past "text autosizing" toe: het schat per blok een leesbare
   lettergrootte en herberekent die bij elke layoutwijziging. Verdwijnt een
   balk en komt hij terug, dan kan diezelfde balk daarna groter staan — de
   knoppen "komen terug in de vergrote maat", zonder dat er iets geschaald
   is. `100%` zet die schatting uit en laat de opgegeven grootte staan.
   Desktopbrowsers doen niet aan autosizing; daar verandert dit niets. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.lfk-alleen-mobiel { display: none; }
.lfk-alleen-mobiel[hidden] { display: none; }
/* Inline-variant: voor stukjes tekst midden in een regel (een adres met of
   zonder postcode, een datum met of zonder tijd). `display: inline` in
   plaats van `block`, anders breekt de regel op de wisselplek. */
.lfk-alleen-mobiel-inline { display: none; }
/* PDF-knop in het woningdossier: desktop downloadt rechtstreeks, mobiel
   opent de kijkpagina met terug- en downloadknop (aankoop.bekijk_pdf). */
.lfk-btn.lfk-pdf-bekijk { display: none; }

/* ── A1: tegel "Abonnement activeren" ────────────────────────────────────
   Verschijnt op het woningoverzicht als de klant nog geen lopend
   abonnement heeft, op de plek waar eerst de knop "Mijn abonnement" stond.
   Op desktop blijft die knop gewoon staan (daar is het hamburgermenu er
   niet, dus zonder die knop was de abonnementspagina onbereikbaar).
   Hergebruikt de bestaande puls van de vergelijkknop (`lfk-vergelijk-puls`
   uit lf-klant.css) — geen nieuwe animatie, en die respecteert daar al
   prefers-reduced-motion. */
.lfk-main .lfk-abo-tegel {
  display: none;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 8px;
  color: var(--lf-body);
}
.lfk-main .lfk-abo-tegel:hover { color: var(--lf-body); }
.lfk-main .lfk-abo-tegel-titel {
  display: block;
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
.lfk-main .lfk-abo-tegel-uitleg {
  display: block;
  margin-top: 8px;
  font-size: var(--lfk-fs-13-5);
  line-height: 1.5;
}
.lfk-main .lfk-abo-tegel.is-pulserend {
  animation: lfk-vergelijk-puls 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lfk-main .lfk-abo-tegel.is-pulserend { animation: none; }
}

/* Voorcheck-variant van dezelfde tegel: zelfde vlak en dezelfde typografie,
   met een pijltje rechts dat verticaal gecentreerd staat. Het pijltje krijgt
   een eigen kolom zodat een lange uitlegtekst er niet achter doorloopt; de
   titel spant beide kolommen zodat hij op de volle breedte begint. Niet
   pulserend — dit is een uitnodiging, geen alarm. */
.lfk-main .lfk-voorcheck-tegel {
  display: none;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  align-items: center;
}
.lfk-main .lfk-voorcheck-tegel .lfk-abo-tegel-titel { grid-column: 1 / -1; }
/* De rasterplaatsing hangt aan de voorcheck-tegel en niet aan het pijltje
   zelf: een pijltje in een andere (niet-grid) tegel zou anders losse
   grid-eigenschappen erven. */
.lfk-main .lfk-voorcheck-tegel .lfk-abo-tegel-pijl {
  grid-row: 2;
  grid-column: 2;
}
.lfk-main .lfk-abo-tegel-pijl {
  font-size: var(--lfk-fs-18, 18px);
  line-height: 1;
  color: var(--lf-brass);
}

/* ── B1: documentenlijst "Uploads van <adviseur>" ────────────────────────
   De opmaak van de lijst zelf staat buiten de media query — hij is toch
   alleen zichtbaar zolang `.lfk-alleen-mobiel` aan staat, en zo hoeft deze
   hele blok niet gedupliceerd te worden voor de landscape-tak. De pop-up
   staat óók buiten de media query: die kan alleen opengaan vanuit deze
   lijst. */

.lfk-main .lfk-ber-uploadskop { margin: 0 0 4px; }
.lfk-main .lfk-ber-cat { margin-top: 18px; }
.lfk-main .lfk-ber-cat-titel {
  margin: 0;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-main .lfk-ber-lijst {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--lf-rule);
}
.lfk-main .lfk-ber-lijst li { border-bottom: 1px solid var(--lf-rule); }
.lfk-main .lfk-ber-doc {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 0;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-15);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lf-brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lfk-main .lfk-ber-doc:hover { color: var(--lf-brown); }

/* Pop-up: op desktop een gecentreerde kaart. */
.lfk-docpop { position: fixed; inset: 0; z-index: 40; }
.lfk-docpop[hidden] { display: none; }
.lfk-docpop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 22, 0.65);
}
.lfk-docpop-kaart {
  position: relative;
  max-width: 460px;
  margin: 10vh auto 0;
  background: var(--lf-paper);
  border: 1px solid var(--lf-card-border);
  padding: 22px 20px;
  box-sizing: border-box;
}
.lfk-docpop-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.lfk-docpop-titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-18);
  color: var(--lf-ink);
}
.lfk-docpop-sluit {
  width: 44px;
  height: 44px;
  flex: none;
  margin: -10px -10px 0 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--lf-taupe);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
}
.lfk-docpop-datum {
  margin: 10px 0 0;
  font-size: var(--lfk-fs-12);
  color: var(--lf-taupe);
  font-variant-numeric: tabular-nums;
}
.lfk-docpop-status { margin: 6px 0 0; }
.lfk-docpop-opmerking { margin-top: 12px; }
.lfk-docpop-acties {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.lfk-docpop-acties .lfk-btn { width: 100%; }
/* A3 (14-08-2026): stond er geen ondertekenknop, dan bleef er een lege
   zwarte balk staan. Oorzaak: `.lfk-main .lfk-btn { display: flex }` (verderop
   in dit bestand) overstemt het `hidden`-attribuut — exact de val die in
   TODO.md staat en die hier voor de vierde keer toesloeg. Vandaar de
   tegenhanger, hier én als vangnet binnen de media query. */
.lfk-docpop-acties .lfk-btn[hidden] { display: none; }

/* ── Bijsnijden van de handtekening (punt 8, 14-08-2026) ─────────────────
   Geldt op ALLE breedtes: deze pagina bestaat alleen in deze vorm, en een
   te krap bijgesneden handtekening is op desktop even hinderlijk. De maten
   zijn wel op een vinger gekozen (grepen met 44px raakvlak); met een muis
   werkt dat net zo goed. */

.lfk-bijsnij-vlak {
  position: relative;
  margin-top: 18px;
  background: #F2EDE3;      /* zelfde ondergrond als de ondertekenpagina */
  border: 1px solid var(--lf-rule);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  overflow: hidden;
  /* De hele bediening is slepen; laat de browser er geen scroll van maken. */
  touch-action: none;
}
.lfk-bijsnij-beeld {
  display: block;
  max-width: 100%;
  max-height: 46vh;
  height: auto;
  /* Een handtekening op wit papier wordt na het filteren transparant; op de
     tan ondergrond blijft hij daardoor goed leesbaar. */
  user-select: none;
  -webkit-user-drag: none;
}
.lfk-bijsnij-donker {
  position: absolute;
  background: rgba(28, 26, 22, 0.45);
  pointer-events: none;
}
.lfk-bijsnij-kader {
  position: absolute;
  border: 1.5px solid var(--lf-brass);
  box-sizing: border-box;
  cursor: move;
  touch-action: none;
}
.lfk-bijsnij-greep {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--lf-paper);
  border: 1.5px solid var(--lf-brass);
  box-sizing: border-box;
  touch-action: none;
}
/* Raakvlak van 44px met een onzichtbaar ::after-vlak — niet met padding, dat
   zou de greep zelf groter maken en het kader vertekenen. */
.lfk-bijsnij-greep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
/* Grepen aan de BINNENkant: loopt het kader tot aan de beeldrand, dan zijn
   ze nog steeds te pakken. */
.lfk-bijsnij-greep[data-hoek="lb"] { left: -1px; top: -1px; }
.lfk-bijsnij-greep[data-hoek="rb"] { right: -1px; top: -1px; }
.lfk-bijsnij-greep[data-hoek="lo"] { left: -1px; bottom: -1px; }
.lfk-bijsnij-greep[data-hoek="ro"] { right: -1px; bottom: -1px; }

/* Is het kader laag of smal — en dat is het juist bij een strak voorstel om
   een dunne handtekening — dan liggen de grepen zó dicht op elkaar dat hun
   44px-vlakken overlappen en de onderste de bovenste afvangt. Gemeten bij
   een kader van 25px hoog: de bovenste twee grepen hadden nog 1px over.
   Ze wijken dan naar BUITEN, zodat alle vier apart te pakken blijven; het
   kader zelf en dus de snede verandert er niet van. De JS zet de klassen
   (zie handtekening_bijsnijden.js). */
.lfk-bijsnij-kader.is-krap-hoog .lfk-bijsnij-greep[data-hoek="lb"],
.lfk-bijsnij-kader.is-krap-hoog .lfk-bijsnij-greep[data-hoek="rb"] { top: -25px; }
.lfk-bijsnij-kader.is-krap-hoog .lfk-bijsnij-greep[data-hoek="lo"],
.lfk-bijsnij-kader.is-krap-hoog .lfk-bijsnij-greep[data-hoek="ro"] { bottom: -25px; }
.lfk-bijsnij-kader.is-krap-breed .lfk-bijsnij-greep[data-hoek="lb"],
.lfk-bijsnij-kader.is-krap-breed .lfk-bijsnij-greep[data-hoek="lo"] { left: -25px; }
.lfk-bijsnij-kader.is-krap-breed .lfk-bijsnij-greep[data-hoek="rb"],
.lfk-bijsnij-kader.is-krap-breed .lfk-bijsnij-greep[data-hoek="ro"] { right: -25px; }

.lfk-bijsnij-hint {
  margin: 14px 0 0;
  font-size: var(--lfk-fs-12);
  line-height: 1.5;
  color: var(--lf-taupe);
}
.lfk-bijsnij-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.lfk-bijsnij-acties .lfk-btn { flex: 1 1 auto; min-width: max-content; }

/* Verwijderen-met-bevestiging in het woningdossier is mobiel-only; op
   desktop doet het kruisje in de woningenlijst dat werk. */
.lfk-wd-verwijderblok { display: none; }

/* O3: de TWEEDE verplaatsgreep (rechtsonder) is een mobiele toevoeging —
   met een muis is één greep genoeg, en op desktop stond de knop zonder de
   positionering uit de media query pal naast de eerste (gemeten: 13px
   ernaast in plaats van in de andere hoek). ondertekenen.js maakt hem op
   alle breedtes aan; hier staat hij buiten mobiel uit. */
.ot-el .ot-el-verplaats-ro { display: none; }

/* De sluitknop van de kantelweergave (K2) hoort bij de mobiele
   volledig-schermlaag. Op desktop is er geen kantelweergave, dus staat de
   knop daar uit — zonder deze basisregel verscheen hij onder de
   analysetabel in het woningdossier. */
.lfk-kantelweergave-sluit { display: none; }

/* De wrapper om "Annuleren" + "Ondertekenen bevestigen" bestaat alleen om
   er op mobiel een vaste onderbalk van te maken. `display: contents` laat
   beide knoppen op desktop gewone kinderen van .ot-toolbar blijven, zodat
   die werkbalk daar letterlijk ongewijzigd is. */
.ot-afronden { display: contents; }

@media (max-width: 720px), (orientation: landscape) and (max-height: 520px) {

  /* ── Punt 4 · geen horizontale speling in staande stand (16-08-2026) ───
     De klant kon de weergave op elke pagina een stukje naar links en rechts
     trekken, waarna hij terugveerde. Onderzocht met een meting per element
     op 320, 360, 393, 402 en 430px breed: op GEEN van die breedtes steekt
     er iets buiten de viewport — `scrollWidth` is overal gelijk aan
     `clientWidth`. Er is dus geen te breed element; wat je voelt is de
     rubber-band van iOS zelf op het document.

     Daar is `overscroll-behavior-x` het juiste gereedschap voor; `overflow`
     doet niets tegen overscroll van iets dat niet overloopt. `clip` op de
     body erbij als vangnet voor een toekomstig element dat wél te breed is:
     `hidden` zou van de body een scrollcontainer maken en de sticky
     werkbalk in de ondertekenmodule breken, `clip` niet.

     Alleen STAAND: liggend is de kantelweergave aan het woord, en die heeft
     zijn eigen afspraken. De PDF in de ondertekenmodule houdt zijn
     horizontale beweging sowieso — die zit in een eigen scrollvenster
     (punt 1) en wordt hier niet geraakt. */
  @media (orientation: portrait) {
    html { overscroll-behavior-x: none; }
    .lfk-body { overflow-x: clip; }
  }

  .lfk-mobiel-burger { display: flex; }

  /* ── Wisselen tussen de twee weergaven ──────────────────────────────
     Zie de toelichting bovenaan. `!important` op de desktopkant omdat het
     tegenover regels staat die zelf een display meegeven (.lfk-tabelkader
     is een grid, .lfk-wd-stepper een flexrij). */

  .lfk-alleen-mobiel        { display: block; }
  .lfk-alleen-mobiel[hidden]{ display: none; }
  .lfk-alleen-desktop       { display: none !important; }
  .lfk-alleen-mobiel-inline { display: inline; }
  .lfk-alleen-desktop-inline{ display: none !important; }
  /* 0,3,0: moet winnen van `.lfk-main .lfk-btn { display: flex }` verderop.
     De kijkknop krijgt op mobiel gewoon die flex-regel. */
  .lfk-main .lfk-btn.lfk-pdf-download { display: none; }

  /* A1: de knop "Mijn abonnement" staat op mobiel in het hamburgermenu;
     op deze plek komt de activatietegel (of niets, bij een lopend
     abonnement). */
  .lfk-main .lfk-aank-kop-acties { display: none; }
  .lfk-main .lfk-abo-tegel { display: block; }
  .lfk-main .lfk-abo-tegel[hidden] { display: none; }
  /* Voorcheck-variant: grid, want die heeft een pijltje in een eigen kolom. */
  .lfk-main .lfk-voorcheck-tegel { display: grid; }
  .lfk-main .lfk-voorcheck-tegel[hidden] { display: none; }

  /* ── Funda-knop met statuskleur (Ross, 14-08-2026) ──────────────────
     Zwart zei niets over de status; nu leest de klant de stand van zaken af
     aan de knop zelf. Zachte vlakken in de lijn van de bestaande
     statuskleuren (--lf-goedgekeurd / --lf-afwijzing): een lichte tint als
     vlak, dezelfde kleur donkerder voor rand en tekst. Geen verzadigd groen
     of rood — dat zou naast het brass en tan van de huisstijl schreeuwen.
     Zonder status blijft de knop zoals hij was: dat is de koppelflow, en
     daar valt nog niets te melden. */

  .lfk-main .lfk-funda-knop.is-gekoppeld {
    background: #E9F0E6;
    border: 1px solid #A8C0A1;
    color: #2E5A2E;          /* gemeten contrast 6,9:1 op dit vlak */
  }
  .lfk-main .lfk-funda-knop.is-niet {
    background: #F7E9E5;
    border: 1px solid #D6AA9E;
    color: #8A3324;          /* gemeten contrast 6,9:1 op dit vlak */
  }
  /* De uitleg onder de melding: rustiger dan de gewone tekst, want het is
     een voorbehoud en geen oproep. */
  .lfk-main .lfk-funda-opnieuw-uitleg,
  .lfk-funda-dialoog .lfk-funda-opnieuw-uitleg {
    margin: 10px 0 0;
    font-size: var(--lfk-fs-12);
    line-height: 1.5;
    color: var(--lf-taupe);
  }

  /* W1: de statusbalk onder de vraagprijs. Het stadium blijkt in het
     dossier al uit het stappenplan verderop. */
  .lfk-main .lfk-wd-stepper { display: none; }

  /* W2: "Vergelijken" vanuit één dossier leverde een vergelijking met
     zichzelf op; vergelijken hoort op het overzicht, waar je meerdere
     woningen kunt aanvinken.
     Drie klassen diep, want `.lfk-main .lfk-btn { display: flex }` staat
     verderop in dit bestand en won bij gelijke specificiteit — gemeten:
     de knop bleef zichtbaar op 393px. */
  .lfk-main .lfk-wd-knoppen .lfk-wd-vergelijk { display: none; }

  /* ── Schil ─────────────────────────────────────────────────────────── */

  .lfk-header-inner,
  .lfk-content,
  .lfk-footer,
  .flash-messages {
    max-width: 460px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .lfk-content { padding-top: 36px; padding-bottom: 48px; }
  .lfk-content-dashboard { padding-top: 36px; }
  .lfk-content-terug { padding-top: 24px; }

  /* .lfk-content-smal houdt op desktop een 760px-kolom binnen een 1200px
     schil; op mobiel is de schil zelf al de kolom, dus de extra beperking
     vervalt (anders zou hij binnen 460px nog eens inspringen). */
  .lfk-main .lfk-content-smal > * { max-width: none; }

  /* ── Header ────────────────────────────────────────────────────────────
     Van één flexrij (logo · nav · taal · uitloggen) naar drie regels:
       regel 1  logo links, hamburger rechts
       regel 2  taalwissel (10px onder het logo, links onder de "L")
       regel 3  navigatieraster 2x2 (26px eronder)
     Uitloggen verdwijnt hier en staat alleen nog in het menu — bewuste keuze
     uit de README: voorkomt per ongeluk uitloggen. */

  .lfk-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo   burger"
      "taal   taal"
      "nav    nav";
    align-items: start;
    gap: 0;
    padding-top: 16px;
    padding-bottom: 0;
  }

  .lfk-header-logo {
    grid-area: logo;
    height: 30px;
    margin-top: 0;
    width: auto;
  }

  /* De inlogschermen zetten `header_kaal`: geen hamburger, geen taalwissel,
     geen navigatie — alleen het logo. Dan is de `border-bottom` van
     `.lfk-header` de eerstvolgende regel ONDER de letters, en met
     `padding-bottom: 0` hierboven raakte hij ze bijna.

     Gemeten op 320/375/430 px: 0,0 px tussen de onderkant van het logo en
     die lijn; op desktop is dat 16 px (de padding uit lf-klant.css) en daar
     verandert niets. Op de pagina's MET navigatie zit er 39,3 px tussen —
     die hebben dit niet nodig en krijgen het daarom ook niet.

     16 px, gelijk aan de padding-top erboven: het logo staat dan midden in
     zijn eigen balk in plaats van tegen de onderrand. */
  .lfk-header-kaal .lfk-header-inner { padding-bottom: 16px; }

  /* De documentenpagina zet `header_zonder_logo`; daar staat het logo in de
     content op 52px (443px breed) en dat past niet op 393px. Op mobiel tonen
     we juist het headerlogo en verbergen we dat in de content. */
  .lfk-header-logo.is-verborgen-desktop { display: block; }
  .lfk-doc-logo { display: none; }

  .lfk-mobiel-burger {
    grid-area: burger;
    width: 44px;
    height: 44px;
    margin-top: -7px;
    margin-right: -10px;   /* optisch uitlijnen op de zijmarge */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .lfk-mobiel-burger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--lf-ink);
  }

  .lfk-taal {
    grid-area: taal;
    margin-top: 10px;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.24em;
  }
  /* Actieve taal: ink met brass onderstreping; inactief taupe (README). */
  .lfk-taal a[aria-current="true"] {
    color: var(--lf-ink);
    border-bottom: 1px solid var(--lf-brass);
    padding-bottom: 2px;
  }
  .lfk-taal a.is-inactief { color: var(--lf-taupe); }

  /* De tabbenbalk verdwijnt op mobiel (Ross, blok 6 punt 6). Hij kostte
     114px boven ELKE pagina, en alle vier zijn items — Dashboard,
     Berekeningen, Aankoop, Documenten — staan ook in het hamburgermenu.
     Twee menu's naast elkaar voor dezelfde vier bestemmingen.

     De taalwissel NL·EN blijft wél staan: die zit in `.lfk-taal`, een eigen
     element naast de nav, en staat NIET in het menu. Nagemeten voor en na.

     Alleen de balk gaat weg; de opmaak van `.lfk-navtab` hieronder blijft
     staan, zodat een pagina die de tabs ooit ergens anders toont er niet
     kaal uitziet. */
  .lfk-nav { display: none; }
  /* Tabs worden knoppen: inactief = lichte knop, actief = donkere knop. */
  .lfk-navtab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 6px;
    font-weight: 500;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.16em;
    background: transparent;
    border: 1px solid var(--lf-brass);
    color: var(--lf-brass);
    white-space: nowrap;
  }
  .lfk-navtab.is-actief,
  .lfk-navtab.is-actief:hover {
    background: var(--lf-ink);
    border: 1px solid var(--lf-ink);
    color: var(--lf-paper);
    padding-bottom: 0;   /* desktop zet hier 3px voor de onderstreping */
  }
  .lfk-uitloggen { display: none; }

  /* ── Hamburgermenu ─────────────────────────────────────────────────── */

  /* LET OP: `display` moet hier expliciet terug. De basisregel bovenin dit
     bestand zet beide op `display: none` zodat ze op desktop nooit
     verschijnen; zonder deze twee regels bleef het menu ook op mobiel
     onzichtbaar — de hamburger werkte dan wel (aria-expanded ging om), maar
     er gebeurde niets zichtbaars. De `[hidden]`-regels erna zijn nodig omdat
     een expliciete `display` het `hidden`-attribuut overstemt. */
  .lfk-menu-backdrop,
  .lfk-menu-paneel { display: block; }
  .lfk-menu-backdrop[hidden],
  .lfk-menu-paneel[hidden] { display: none; }

  .lfk-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 22, 0.65);
    z-index: 30;
  }
  .lfk-menu-paneel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 460px;
    background: var(--lf-paper);
    border-bottom: 1px solid var(--lf-card-border);
    z-index: 31;
    padding: 16px 20px 24px;
    box-sizing: border-box;
  }
  .lfk-menu-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lfk-menu-kop img { height: 30px; width: auto; display: block; }
  /* main.css stylet ELKE <button> (platinum rand, radius 6px) en heeft ook
     een :hover met een gevulde achtergrond. Die hover blijft op touch na een
     tik hangen — het sluitkruis werd dan een goudgevuld blokje. Vandaar hier
     expliciet de kale huisstijlvorm, mét hover/focus. */
  .lfk-menu-sluit,
  .lfk-menu-sluit:hover,
  .lfk-menu-sluit:focus,
  .lfk-mobiel-burger,
  .lfk-mobiel-burger:hover,
  .lfk-mobiel-burger:focus {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .lfk-menu-sluit {
    width: 44px;
    height: 44px;
    color: var(--lf-taupe);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-right: -10px;
  }
  .lfk-menu-sluit:hover { color: var(--lf-brown); }
  .lfk-menu-items { display: flex; flex-direction: column; margin-top: 16px; }
  .lfk-menu-item {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-top: 1px solid var(--lf-rule);
    font-weight: 600;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lf-ink);
    text-align: left;
  }
  .lfk-menu-item:hover { color: var(--lf-ink); }
  /* Uitloggen: brass, dikkere hairline, 8px extra ruimte erboven. */
  .lfk-menu-uitloggen {
    border-top: 1px solid var(--lf-card-border);
    color: var(--lf-brass);
    margin-top: 8px;
  }
  .lfk-menu-uitloggen:hover { color: var(--lf-brass); }

  /* ── Footer ────────────────────────────────────────────────────────── */

  .lfk-footer {
    border-top: 1px solid var(--lf-rule);
    padding: 24px 20px 32px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: var(--lfk-fs-12);
    color: var(--lf-taupe);
    margin-top: 40px;
  }
  .lfk-footer-dashboard { margin-top: 40px; }

  /* ── Knoppen ───────────────────────────────────────────────────────────
     De vaste breedteklassen van desktop (120-220px) vervallen; een solo-knop
     is containerbreed, een paar staat in een 1fr/1fr-raster met gap 10.
     Labels blijven op één regel en worden niet verkleind (11,9px blijft). */

  /* Vangnet: elke knop die het `hidden`-attribuut draagt blijft weg. Zonder
     deze regel wint de `display: flex` hieronder van `hidden`. */
  .lfk-main .lfk-btn[hidden],
  .lfk-main .btn[hidden] { display: none; }

  .lfk-main .lfk-btn,
  .lfk-main .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 6px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .lfk-main .lfk-btn-120,
  .lfk-main .lfk-btn-150,
  .lfk-main .lfk-btn-160,
  .lfk-main .lfk-btn-170,
  .lfk-main .lfk-btn-220,
  .lfk-main .lfk-ber-knop,
  .lfk-main .lfk-ht-knop {
    width: 100%;
  }
  .lfk-main .lfk-btn-ruim { padding: 0 6px; }
  /* Knoppenparen: twee gelijke kolommen. */
  .lfk-main .lfk-ber-acties,
  .lfk-main .lfk-docdl-acties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Een tekstknop (Verwijderen e.d.) blijft een tekstlink, geen blokknop. */
  .lfk-main .lfk-ht-verwijder,
  .lfk-main .lfk-funda-tekstknop,
  .lfk-main .lfk-status-knop {
    display: inline-block;
    width: auto;
    min-height: 0;
    white-space: normal;
  }

  /* ── Raakvlakken >= 44px ───────────────────────────────────────────────
     Kleine tekstlinks (taalwissel, terug-links) houden hun lettergrootte —
     tekst verkleinen of vergroten mag niet — maar krijgen via padding een
     raakvlak van 44px. De negatieve marge haalt die padding weer uit de
     layout, zodat de plaatsing exact blijft zoals ontworpen. */

  /* De taalwissel krijgt zijn raakvlak via een onzichtbaar ::after-vlak en
     NIET via padding: de actieve taal heeft een `padding-bottom: 2px` voor de
     brass onderstreping, en die zou een padding-shorthand hier overschrijven
     (gemeten: het raakvlak bleef 35px). Met ::after blijft de onderstreping
     strak onder de letters staan terwijl het tikgebied 44px hoog is. */
  .lfk-taal a {
    display: inline-block;
    position: relative;
  }
  .lfk-taal a::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  /* Zelfde ::after-patroon als de taalwissel. GEEN padding met negatieve
     marge: dat vergroot de doos naar buiten toe en die ging op een smal
     scherm (320px) over de tekst erboven heen liggen — de terug-link ving
     dan tikken af die voor het label boven hem bedoeld waren. */
  .lfk-main .lfk-terug,
  .lfk-main .lfk-aank-handmatig,
  .lfk-main .lfk-stap-openklap-link {
    display: inline-block;
    /* Een inline-block is standaard zo breed als zijn tekst; met een adres
       zonder spaties ("← Terug — …") liep hij dan buiten het scherm. */
    max-width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
  }
  .lfk-main .lfk-terug::after,
  .lfk-main .lfk-aank-handmatig::after,
  .lfk-main .lfk-stap-openklap-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  /* Stap 4: twee keuzes onder elkaar, elk met een tikvlak van 44px. Met
     minder dan ~28px tussen de twee regels overlappen die tikvlakken. */
  .lfk-main .lfk-stap-geenbod { margin-top: 28px; }

  /* ── Typografie / algemene blokken ─────────────────────────────────── */

  /* T1: paginakoppen op dezelfde maat als de begroeting op het dashboard
     (24,93px). 40,8px was op een telefoon te dominant — "Jouw bewaarde
     woningen" besloeg drie regels voordat de klant iets inhoudelijks zag.
     Uniform op álle klantpagina's, dus hier op .lfk-h1 zelf. */
  .lfk-main .lfk-h1 { font-size: var(--lfk-fs-22); margin: 12px 0 0; }
  /* B1-B4 (Ross, 14-08-2026 — derde melding op dit punt).
     De bovenmarge van een kop hoort er alleen te zijn als er ook ECHT iets
     boven staat. Stond hij er onvoorwaardelijk op, dan telde hij bij de
     kaderpadding op zodra de kop het eerste ding in een kader was.

     Dat werd tot nu toe per kader teruggedraaid (de lijst hieronder), en
     precies daar liep het mis:
       - "Zelf scenario's doorrekenen" en "Bod op deze woning doorrekenen":
         de kop zit DRIE niveaus diep (kader > .lfk-rm-grid > div > h2) en de
         correctie ging maar twee niveaus diep. Gemeten 59 boven / 23 onder.
       - "Mijn notities" en "Overige uploads": hun container staat niet in de
         kaderlijst, dus er werd daar niets teruggedraaid. Gemeten 63/31
         respectievelijk 36/0.
     Een vierde uitzondering toevoegen zou hetzelfde weer verplaatsen. De
     regel staat nu op de kop zelf: geen marge, tenzij er een element aan
     voorafgaat. Diepte en containerklasse doen er dan niet meer toe. */
  .lfk-main .lfk-h2 { font-size: var(--lfk-fs-22); margin: 0; }
  .lfk-main * + .lfk-h2 { margin-top: 36px; }
  /* Een verborgen veld is geen inhoud: csrf-tokens en `hidden` elementen
     staan zo vaak vóór een kop dat ze anders de marge terugbrengen zonder
     dat er iets te zien is. */
  .lfk-main input[type="hidden"] + .lfk-h2,
  .lfk-main [hidden] + .lfk-h2 { margin-top: 0; }
  .lfk-main .lfk-intro { margin: 14px 0 0; max-width: none; font-size: var(--lfk-fs-15); }
  .lfk-main .lfk-sectie-uitleg { max-width: none; }

  /* ── S2: gelijke boven- en ondermarge in ELK kader ─────────────────────
     Gemeten vóór deze regel (393px, ruimte tussen kaderrand en eerste/
     laatste kind):

       "Digitaal ondertekenen"  boven 59  onder 23
       woningdossier-blok (h2)  boven 59  onder 25
       rekenmodule              boven 23  onder 31
       "Mijn abonnement"        boven 30  onder 23
       checklist                boven 11  onder 35
       omgekeerd rekenen        boven 21  onder 25

     Twee oorzaken, allebei hier opgelost in plaats van per template:
     1. De koppen hebben een eigen bovenmarge (`.lfk-h2 { margin: 36px 0 0 }`
        voor de ruimte TUSSEN secties). Als zo'n kop het eerste kind van een
        kader is, telt die marge bij de padding op — vandaar de 59px.
        Het eerste kind krijgt daarom geen bovenmarge, het laatste geen
        ondermarge.
     2. De paddings zelf waren asymmetrisch (22/30, 10/34, 20/24). Ze staan
        nu gelijk via één variabele. */

  .lfk-main .lfk-box,
  .lfk-main .lfk-box-pad,
  .lfk-main .lfk-wd-blok,
  .lfk-main .lfk-formkader,
  .lfk-main .lfk-checklist-kader,
  .lfk-main .lfk-rm-sectie,
  .lfk-main .lfk-rm-omgekeerd,
  .lfk-main .lfk-rm-infocard,
  .lfk-main .lfk-aank-invoer,
  .lfk-main .lfk-doc-statusbalk,
  .lfk-main .lfk-voortgang,
  .lfk-main .lfk-adviseur,
  /* B3 (14-08-2026): "Makelaar" en "Mijn notities" zijn allebei omrande
     kaarten met eigen padding (26/30), maar stonden niet in deze lijst — de
     symmetrie sloeg daar dus nooit aan. Ze delen geen klasse, vandaar de
     structurele selector op hun raster. */
  .lfk-main .lfk-wd-2kol > section,
  .lfk-main .lfk-tan-kaart {
    padding-top: var(--lfk-kader-pad, 22px);
    padding-bottom: var(--lfk-kader-pad, 22px);
  }
  .lfk-main .lfk-box > :first-child,
  .lfk-main .lfk-box-pad > :first-child,
  .lfk-main .lfk-wd-blok > :first-child,
  .lfk-main .lfk-formkader > :first-child,
  .lfk-main .lfk-checklist-kader > :first-child,
  .lfk-main .lfk-rm-sectie > :first-child,
  .lfk-main .lfk-rm-omgekeerd > :first-child,
  .lfk-main .lfk-rm-infocard > :first-child,
  .lfk-main .lfk-aank-invoer > :first-child,
  .lfk-main .lfk-doc-statusbalk > :first-child,
  .lfk-main .lfk-voortgang > :first-child,
  .lfk-main .lfk-adviseur > :first-child,
  .lfk-main .lfk-tan-kaart > :first-child { margin-top: 0; }

  /* Eén laag dieper. Staat er een <form> of <div> als enige kind in het
     kader, dan collapst de bovenmarge van DIENS eerste kind er dwars
     doorheen naar buiten: gemeten op "woning handmatig invoeren" 41px boven
     tegen 23px onder, terwijl het kader zelf 22/22 had. */
  .lfk-main .lfk-box > :first-child > :first-child,
  .lfk-main .lfk-box-pad > :first-child > :first-child,
  .lfk-main .lfk-wd-blok > :first-child > :first-child,
  .lfk-main .lfk-formkader > :first-child > :first-child,
  .lfk-main .lfk-checklist-kader > :first-child > :first-child,
  .lfk-main .lfk-rm-sectie > :first-child > :first-child,
  .lfk-main .lfk-rm-omgekeerd > :first-child > :first-child,
  .lfk-main .lfk-rm-infocard > :first-child > :first-child,
  .lfk-main .lfk-aank-invoer > :first-child > :first-child,
  .lfk-main .lfk-tan-kaart > :first-child > :first-child { margin-top: 0; }

  /* Formulieren beginnen met een VERBORGEN csrf-input. Die is `:first-child`,
     dus de regels hierboven neutraliseerden de marge van een onzichtbaar
     element terwijl de eerste ZICHTBARE regel zijn bovenmarge hield — die
     collapste vervolgens uit het kader (gemeten op "woning handmatig
     invoeren": 41px boven tegen 23px onder). Vandaar ook het element dat
     direct volgt op zo'n verborgen input. */
  .lfk-main .lfk-box > input[type=hidden]:first-child + *,
  .lfk-main .lfk-box-pad > input[type=hidden]:first-child + *,
  .lfk-main .lfk-wd-blok > input[type=hidden]:first-child + *,
  .lfk-main .lfk-formkader > input[type=hidden]:first-child + *,
  .lfk-main .lfk-checklist-kader > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-sectie > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-omgekeerd > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-infocard > input[type=hidden]:first-child + *,
  .lfk-main .lfk-aank-invoer > input[type=hidden]:first-child + *,
  .lfk-main .lfk-tan-kaart > input[type=hidden]:first-child + *,
  .lfk-main .lfk-box > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-box-pad > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-wd-blok > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-formkader > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-checklist-kader > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-sectie > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-omgekeerd > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-rm-infocard > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-aank-invoer > :first-child > input[type=hidden]:first-child + *,
  .lfk-main .lfk-tan-kaart > :first-child > input[type=hidden]:first-child + * { margin-top: 0; }

  .lfk-main .lfk-box > :last-child,
  .lfk-main .lfk-box-pad > :last-child,
  .lfk-main .lfk-wd-blok > :last-child,
  .lfk-main .lfk-formkader > :last-child,
  .lfk-main .lfk-checklist-kader > :last-child,
  .lfk-main .lfk-rm-sectie > :last-child,
  .lfk-main .lfk-rm-omgekeerd > :last-child,
  .lfk-main .lfk-rm-infocard > :last-child,
  .lfk-main .lfk-aank-invoer > :last-child,
  .lfk-main .lfk-doc-statusbalk > :last-child,
  .lfk-main .lfk-voortgang > :last-child,
  .lfk-main .lfk-adviseur > :last-child,
  .lfk-main .lfk-tan-kaart > :last-child { margin-bottom: 0; }

  /* Kaders en formulieren vullen de kolom. */
  .lfk-main .lfk-box,
  .lfk-main .lfk-formkader,
  .lfk-main .lfk-tabelkader,
  .lfk-main .lfk-vgl-kader,
  .lfk-main .lfk-checklist-kader {
    max-width: none;
    box-sizing: border-box;
  }
  .lfk-main .lfk-box-pad { padding-left: 20px; padding-right: 20px; }
  .lfk-main .lfk-formkader { padding-left: 20px; padding-right: 20px; }
  .lfk-main .lfk-tabelkader { padding: 0; border: none; }

  /* Meerkoloms formulierrasters stapelen. */
  .lfk-main .lfk-formgrid,
  .lfk-main .lfk-formgrid-3,
  .lfk-main .lfk-form-2kol,
  .lfk-main .lfk-wd-2kol,
  .lfk-main .lfk-ht-grid,
  .lfk-main .lfk-rm-grid,
  .lfk-main .lfk-rm-omgekeerd-velden,
  .lfk-main .stat-grid-klant,
  .lfk-main .klant-info-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* ── Dashboard ─────────────────────────────────────────────────────── */

  /* De begroeting staat op mobiel bewust KLEIN (24,93px i.p.v. 45,33px):
     ongeveer de hoogte van de logoletters. Dat is een ontwerpkeuze uit de
     README, geen ruimtebesparing. */
  .lfk-main .lfk-h1-groot { font-size: var(--lfk-fs-22); }

  .lfk-main .lfk-dash-grid,
  .lfk-main .lfk-dash-grid-2,
  .lfk-main .lfk-dash-rij2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }
  .lfk-main .lfk-dash-rij2 { margin-top: 16px; }

  .lfk-main .lfk-tegel,
  .lfk-main .lfk-tegel-groot {
    border: 1px solid var(--lf-rule);
    padding: 24px 20px;
    min-height: 0;
    display: block;
  }
  .lfk-main .lfk-tegel-kop {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .lfk-main .lfk-tegel-nr { font-size: var(--lfk-fs-26); color: var(--lf-brass); }
  .lfk-main .lfk-tegel-titel { font-size: var(--lfk-fs-20); color: var(--lf-ink); }
  .lfk-main .lfk-tegel-tekst {
    display: block;
    font-size: var(--lfk-fs-14);
    line-height: 1.55;
    margin-top: 10px;
  }
  .lfk-main .lfk-tegel-status {
    display: block;
    font-size: var(--lfk-fs-12-5);
    color: var(--lf-brown);
    margin-top: 10px;
  }
  .lfk-main .lfk-tegel-open {
    display: block;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.24em;
    color: var(--lf-brass);
    margin-top: 16px;
  }

  /* Adviseurkaart: tan vlak met 8px radius (het enige ronde element). */
  .lfk-main .lfk-adviseur,
  .lfk-main .lfk-adviseur-tegel,
  .lfk-main .lfk-adviseur-tegel-groot,
  .lfk-main .lfk-doc-adviseur {
    border-radius: 8px;
    padding: 22px 20px;
    display: block;
  }
  .lfk-main .lfk-adviseur-naam { font-size: var(--lfk-fs-20); margin-top: 8px; }

  /* Voortgangskaart: vier stappen naast elkaar. */
  .lfk-main .lfk-voortgang,
  .lfk-main .lfk-voortgang-span2,
  .lfk-main .lfk-doc-statusbalk {
    border: 1px solid var(--lf-rule);
    padding: 22px 20px;
    margin-top: 0;
  }
  .lfk-main .lfk-voortgang-stappen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
  }
  /* Punt 3 (Ross, 17-08-2026): tussen het onderste stap-label en de regel
     "Laatste wijziging" zat een gat ter grootte van ruim een tekstregel. Op
     desktop is die 22px goed — daar staat het blok naast andere tegels en
     heeft het de lucht nodig; op een telefoon staat alles onder elkaar en
     leest het als een losse alinea. Eén regel eraf: 22 -> 8px. */
  .lfk-main .lfk-voortgang-wijziging { margin-top: 8px; }
  /* Onder ~360px passen vier stappen niet meer naast elkaar: labels als
     "Aangeboden bij bank" liepen 16px buiten het scherm. Twee rijen van
     twee in plaats van kleinere letters. */
  @media (max-width: 360px) {
    .lfk-main .lfk-voortgang-stappen {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 18px;
    }
  }
  /* De brede variant zet `white-space: nowrap` per stap; dat breekt op 393px
     de kolommen open. Op mobiel gebruiken we overal de smalle opbouw. */
  .lfk-main .lfk-voortgang-breed .lfk-vstap {
    display: block;
    white-space: normal;
  }
  /* Punt 7 (Ross, 14-08-2026): in de BREDE variant (dashboard met twee
     modules) stonden de cijfers trapsgewijs: gemeten 1252 / 1250 / 1260 /
     1270 — 20px verschil. Oorzaak: lf-klant.css zet op dit raster
     `align-items: center` voor de desktopopbouw met verbindingslijnen. De
     stappen zijn door hun labels verschillend hoog (110 / 114 / 93 / 72),
     en gecentreerd begint elke stap dus op een andere hoogte. Op mobiel
     hangen ze aan de bovenkant, en de kolommen zijn gelijk verdeeld —
     drie klassen diep, zodat de volgorde in de bestanden niet uitmaakt. */
  .lfk-main .lfk-voortgang-breed .lfk-voortgang-stappen {
    align-items: start;
    grid-template-columns: repeat(4, 1fr);
  }
  .lfk-main .lfk-voortgang-breed .lfk-vstap-tussenlijn { display: none; }
  .lfk-main .lfk-voortgang-breed .lfk-vstap-label { margin: 8px 0 0; }

  /* ── Voorcheckfase: twee stadia, elk de halve breedte en gecentreerd ────
     STAAT HIER BEWUST, NA de regels die vier kolommen zetten. Zowel de
     algemene regel bovenaan dit blok als die van de brede variant hierboven
     is even specifiek als deze (0,2,0 respectievelijk 0,3,0); bij gelijke
     specificiteit wint de laatste in het bestand. Stond dit boven die twee,
     dan hield het dashboard van een klant met één of twee modules — dat is
     de BREDE variant — in de voorcheckfase vier kolommen met twee stappen:
     samengedrukt links, gat rechts. */
  .lfk-main .lfk-voortgang-stappen-2,
  .lfk-main .lfk-voortgang-breed .lfk-voortgang-stappen-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lfk-main .lfk-voortgang-stappen-2 .lfk-vstap { text-align: center; }
  .lfk-main .lfk-vstap-label { font-size: var(--lfk-fs-12-5); line-height: 1.45; }
  /* Cijfer boven, lijn eronder, label daaronder (prototype). Op desktop
     staan cijfer en lijn juist naast elkaar in een flexrij. */
  .lfk-main .lfk-vstap-kop,
  .lfk-main .lfk-voortgang-breed .lfk-vstap-kop { display: block; }
  .lfk-main .lfk-vstap-lijn,
  .lfk-main .lfk-voortgang-breed .lfk-vstap-lijn {
    display: block;
    height: 1px;
    margin: 8px 0;
  }
  /* ── D2 · voortgangsindicator: waar sta ik? ────────────────────────────
     Alle vier de stadia zagen er vrijwel gelijk uit; alleen de kleur van het
     cijfer verschilde subtiel. Nu draagt het ACTIEVE stadium het gewicht:
     een groter serif-cijfer (29,47 i.p.v. 21,53), in brass, met een dikkere
     brass lijn en een donker label. De andere stadia zakken naar taupe met
     een hairline. Geen nieuwe kleuren, geen badge of bolletje — het blijft
     de bestaande typografische opbouw, alleen met meer verschil. */
  /* Het actieve cijfer is groter (29,47 tegen 21,53). Zonder een vaste
     regelhoogte duwt dat zijn eigen streepje omlaag: gemeten 1547 tegen
     1552 bij de andere drie. Een vast hoog vak met de cijfers ONDERAAN
     uitgelijnd zet alle grondlijnen — en dus alle streepjes — op één
     hoogte, ongeacht welke stap actief is. */
  .lfk-main .lfk-vstap-nr {
    display: flex;
    align-items: flex-end;
    height: 30px;
    font-size: var(--lfk-fs-19);
    line-height: 1;
    color: var(--lf-taupe);
  }
  .lfk-main .lfk-vstap-label { color: var(--lf-taupe); }
  .lfk-main .lfk-vstap-lijn { background: var(--lf-rule); }

  .lfk-main .lfk-vstap.is-actief .lfk-vstap-nr {
    font-size: var(--lfk-fs-26);
    color: var(--lf-brass);
    line-height: 1;
  }
  .lfk-main .lfk-vstap.is-actief .lfk-vstap-lijn {
    background: var(--lf-brass);
    height: 2px;
  }
  .lfk-main .lfk-vstap.is-actief .lfk-vstap-label {
    color: var(--lf-ink);
    font-weight: 500;
  }
  /* De cijfers verschillen in maat maar de lijnen eronder moeten op één
     hoogte blijven; vandaar een vaste hoogte op het cijferblok in plaats
     van uitlijnen (de kop is `display: block`, zodat de lijn ONDER het
     cijfer valt — zie de regel verderop). */
  .lfk-main .lfk-vstap-nr {
    display: block;
    min-height: 30px;
  }

  /* ── Documenten ────────────────────────────────────────────────────── */

  .lfk-main .lfk-doc-top { display: block; }
  .lfk-main .lfk-doc-top-kop { margin-top: 0; }
  .lfk-main .lfk-doc-adviseur { margin-top: 24px; padding: 18px 20px; }
  .lfk-main .lfk-doc-adviseur .lfk-adviseur-naam { font-size: var(--lfk-fs-19); margin-top: 6px; }
  .lfk-main .lfk-doc-statusbalk { margin-top: 16px; }

  /* Documentrijen worden kaarten: het 4-koloms raster vervalt.
     De classes blijven staan — klantportaal.js leest en schrijft ze. */
  .lfk-main .docrij-kop { display: none; }
  .lfk-main .docrijen { display: flex; flex-direction: column; gap: 14px; }
  .lfk-main .docrij {
    display: block;
    border: 1px solid var(--lf-rule);
    padding: 18px;
    gap: 0;
  }
  .lfk-main .docrijen .docrij:last-child { border-bottom: 1px solid var(--lf-rule); }

  /* ── De documentgroepen (blok 8, punt 3) ────────────────────────────
     Wat nog moet komen en wat al binnen is stonden onder elkaar zonder
     scheiding. De slanke tegel uit blok 7 helpt, maar er was geen kop.

     De kop is een slag groter dan een documentnaam (20,4 tegen 17 px) en
     staat in het displaylettertype, zoals elke andere kop in dit ontwerp.
     De rijen houden binnen een groep hun eigen ritme van 14 px; tussen twee
     groepen komt er lucht bij, zodat de kop bij zijn eigen groep hoort en
     niet tussen twee stapels in zweeft. */
  .lfk-main .docgroep {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* De kop krijgt de stijl van "Jouw adviseur" (blok 9, punt 3).
     Ross heeft de drie voorgestelde varianten bekeken en koos er geen van;
     hij wil de stijl die al op het dashboard staat bij "Jouw adviseur".

     Die stijl is niet uit het stijlblad overgeschreven maar met
     getComputedStyle van het draaiende portaal gehaald — dat is wat de
     browser er werkelijk van maakt. Gemeten op /portaal en /dashboard, 375
     en 1280 px:

         lettertype  Jost              (var(--font-body))
         gewicht     600
         kleur       rgb(160,120,74)   (#A0784A, var(--lf-brass))

     OVERGENOMEN: die drie, en alleen die drie — het is wat Ross noemde.
     NIET overgenomen, met reden:
       * de GROOTTE (15,3 px). Die is kleiner dan een documentnaam (17 px),
         en de kop hoort daar juist bovenuit te steken (blok 8, punt 3). De
         kop houdt zijn 20,4 px.
       * HOOFDLETTERS met 0,3em spatiering. Dat maakt van "Jouw adviseur"
         een klein bovenschrift van 15 px; dezelfde behandeling op een kop
         van 20,4 px levert "NOG AAN TE LEVEREN" in wijd uiteen staande
         kapitalen op. Ross noemde lettertype, gewicht en kleur.

     CONTRAST — gemeten, niet zelf bijgesteld (WCAG 2.1, tegen het papier
     #FBF9F5):

         #A0784A  brass, deze kop        3,78 : 1
         #8a7a50  primair, de vorige     4,01 : 1
         #000814  inkt, die daarvoor    19,11 : 1

     De norm voor tekst is 4,50 : 1; 20,4 px met gewicht 600 telt niet als
     "grote tekst" (dat begint bij 18,66 px vet of 24 px). Deze kop haalt de
     norm dus niet, en de vorige kleur haalde hem ook niet. Ter vergelijking:
     "Jouw adviseur" zelf staat op de zandkleurige kaart (#F0E9DC) en komt
     daar op 3,29 : 1 uit — de stijl die Ross koos zit van zichzelf al onder
     de norm. Aanpassen is aan hem, niet aan mij. */
  .lfk-main .docgroep-kop {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--lfk-fs-18);
    line-height: 1.25;
    color: var(--lf-brass);
  }
  .lfk-main .docgroep + .docgroep { margin-top: 10px; }
  .lfk-main .docrij-cel-naam { margin: 0; }
  .lfk-main .docrij-titel { font-size: var(--lfk-fs-15); line-height: 1.45; margin: 0; }
  /* Status en datum op één regel: status links, datum rechts. */
  .lfk-main .docrij-cel-status {
    display: inline-block;
    margin-top: 6px;
  }
  .lfk-main .docrij-cel-datum {
    display: inline-block;
    float: right;
    margin-top: 6px;
    font-size: var(--lfk-fs-12);
    color: var(--lf-taupe);
    font-variant-numeric: tabular-nums;
  }
  /* De sectiekaders eromheen vervallen: elke documentrij is zelf al een
     omkaderde kaart, en twee kaders in elkaar leest als een fout. */
  .lfk-main .lfk-doc-tabel {
    border: none;
    padding: 0;
    margin-top: 18px;
  }
  /* M2 / B4: de ruimte vóór "Overige uploads".
     Gemeten op 393px, van blokrand tot blokrand: statusbalk 44, tabel 46,
     "Overige uploads" 52. Dat ene blok stak er dus uit — de eigen 24px kwam
     bovenop de ruimte die de tabel erboven al afgeeft. Nu 16px, waarmee de
     drie gaten 44/46/44 worden en de kolom één ritme houdt. Verder verlagen
     kan niet zonder de kop tegen de laatste documentregel te duwen. */
  .lfk-main .lfk-overig {
    border: none;
    padding: 0;
    margin-top: 16px;
  }

  /* M1: uploadknoppen niet zwart maar in de kleur van de adviseurkaart
     (tan vlak `--lf-card`) met de lettertint van het label "wacht op
     upload" (`--lf-taupe`). De rand houdt de knop herkenbaar als vlak;
     zonder rand valt hij op de papierachtergrond uit elkaar. */
  .lfk-main .docrij-acties .upload-knop,
  .lfk-main .lfk-overig-actie .upload-knop,
  .lfk-main .docrij-acties .btn-primary {
    background: var(--lf-card);
    border: 1px solid var(--lf-card-border);
    color: var(--lf-taupe);
  }

  /* Knoppen onder elkaar, allemaal even breed en met dezelfde tussenruimte.
     Stond hier `display: block`. Zolang een rij maar één knop had viel dat
     niet op, maar bij een gekoppeld ondertekendocument staan er drie
     (Downloaden · Ondertekenen · Uploaden) en die plakten dan tegen elkaar:
     een blok-container heeft geen `gap`. Als flexkolom geldt de gap wél, en
     `stretch` maakt elke knop even breed als de kaart. */
  .lfk-main .docrij-acties {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    clear: both;
    margin-top: 14px;
  }
  /* De 32px-spacer uit lf-klant.css is een DESKTOP-truc (hij houdt de
     upload-knop op één lijn met de download-knop náást het kruisje). Op
     mobiel is er geen kolom om mee uit te lijnen en maakte hij de
     upload-knop simpelweg 32px smaller dan de knoppen erboven. */
  .lfk-main .docrij-acties .upload-form { margin-right: 0; }
  /* Idem voor de verticale stapel van een gekoppeld ondertekendocument: die
     regel lijnt op desktop rechts uit binnen een kolom van 220px en springt
     32px in. Hier is de kaart zelf al de volle breedte, dus knoppen
     containerbreed en geen inspringing. Expliciet terugzetten is nodig omdat
     die selector drie classes diep is en dus specifieker dan de algemene
     regel hierboven — zelfde reden als bij de 170px-breedte verderop. */
  .lfk-main .docrij-ondertekendoc .docrij-acties {
    align-items: stretch;
    padding-right: 0;
  }
  /* Idem voor een rij met de knop "niet van toepassing" (belastingaangifte in
     de voorcheck): lf-klant.css zet daar op DESKTOP een kolom met 32px
     inspringing neer, en die selector is een class specifieker dan de
     algemene mobiele regel hierboven. Op de telefoon is de kaart zelf de
     volle breedte, dus geen inspringing en knoppen containerbreed. */
  .lfk-main .docrij-acties:has(.nvt-form) {
    align-items: stretch;
    padding-right: 0;
  }
  /* lf-klant.css zet hier `width: 170px` met een specifiekere selector
     (.lfk-main .docrij-acties .btn) dan de algemene knopregel hierboven;
     die moet expliciet worden teruggezet naar containerbreed. */
  .lfk-main .docrij-acties .btn,
  .lfk-main .docrij-acties .upload-knop,
  .lfk-main .lfk-overig-actie .upload-knop {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
  }
  .lfk-main .lfk-overig-actie {
    display: block;
    margin-top: 16px;
  }
  .lfk-main .docrij-acties .upload-form,
  .lfk-main .docrij-acties .delete-form { display: block; }
  /* Downloaden + kruisje naast elkaar: knop vult, kruisje 44px ernaast. */
  .lfk-main .docrij-acties:has(.delete-form) {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 10px;
    align-items: center;
  }
  .lfk-main .btn-kruisje {
    width: 44px;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* i-knop bij een afgewezen document: 18px cirkel in een 28px raakvlak. */
  .lfk-main .docrij-afkeur-info {
    width: 28px;
    height: 28px;
    min-height: 0;
  }

  /* ── De tegel van een GEÜPLOAD document (blok 7, punt 7) ─────────────
     Gemeten op 320 px: een geüploade tegel was 179 px en een tegel die nog
     open staat 156 px. Wat af is nam dus MEER ruimte dan wat nog moet
     gebeuren, en juist dat laatste is waar de klant naar zoekt.

     Drie dingen weg of anders:
       * de brede "Bekijken"-knop onderaan wordt een oogknopje naast de
         statuspil (de tekst blijft in de boom staan, visueel verborgen,
         zodat de knop zijn naam houdt voor een schermlezer);
       * de uploaddatum verdwijnt aan klantzijde — dat is beheersinfo, en
         in beheer blijft hij gewoon staan;
       * daarmee past alles op twee regels: naam boven, statuspil met de
         twee knopjes eronder.
     Alleen `.docrij-klaar`: een OPEN rij houdt zijn brede uploadknop. */
  /* ALLEEN de tegel van een aangeleverd document. `:has(.docrij-bekijk)`
     sluit twee andere `docrij-klaar`-rijen uit die er anders in vallen:

       * "niet van toepassing" (de belastingaangifte die de klant zelf opzij
         zet) — die heeft één brede knop "Toch aanleveren";
       * een gekoppeld ondertekendocument — dat heeft er twee of drie, en
         lf-mobiel.css zet daar met opzet een kolom neer.

     Gemeten op de n.v.t.-rij zonder deze afbakening: de knop kromp van 297
     naar 155 px en schoof naar rechts. Dat liep niet buiten de tegel, maar
     het is een tegel die Ross niet heeft aangewezen en die ik voor het
     ondertekendocument niet kan nameten — er staat er geen in de database.
     Wat niet is gevraagd en niet is te meten, blijft zoals het was. */
  .lfk-main .docrij-klaar:has(.docrij-bekijk) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "naam   naam"
      "status acties";
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    /* Minder ruimte rondom dan een open tegel (18px). Dat is geen slordige
       uitzondering maar het verschil zelf: een afgehandelde regel is een
       compacte regel. Gemeten scheelt het 12 px per tegel, en dat is het
       verschil tussen "een derde korter" en "ongeveer half". */
    padding: 12px 18px;
  }
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-cel-naam { grid-area: naam; }
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-cel-status {
    grid-area: status;
    display: flex;
    margin-top: 0;
    min-width: 0;
  }
  /* De datum en de tijd zijn beheersinfo. */
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-cel-datum { display: none; }
  /* Twee knopjes naast elkaar in plaats van een kolom over de volle
     breedte. `justify-self: end` zet ze tegen de rechterrand van de tegel.
     De regels hierboven zetten `.docrij-acties` op een kolom van 100%; die
     moeten hier alle drie expliciet terug. */
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-acties {
    grid-area: acties;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-self: end;
    gap: 4px;
    margin-top: 0;
    /* De 44px-raakvlakken mogen in de padding van de tegel steken. Zonder
       deze marge duwen ze de tegel 44px hoog open terwijl de tekst ernaast
       maar 18px is. Het RAAKVLAK blijft 44x44 — alleen de ruimte die de
       knop in de indeling opeist wordt kleiner. */
    margin-top: -8px;
    margin-bottom: -8px;
  }
  /* De grid-regel `.docrij-acties:has(.delete-form)` hierboven maakt er een
     twee-koloms raster van (1fr 44px) met de knop over de volle breedte.
     Op deze tegel is dat precies wat weg moet. */
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-acties:has(.delete-form) {
    display: flex;
    grid-template-columns: none;
  }
  /* Het oogknopje: 44x44 raakvlak, geen kader, alleen het icoon. De
     tekstregel eronder blijft in de boom staan maar wordt visueel
     verborgen — `display:none` zou de knop naamloos maken. */
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-acties .docrij-bekijk {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--lf-taupe);
  }
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-icoon { display: block; }
  .lfk-main .docrij-klaar:has(.docrij-bekijk) .docrij-knoptekst {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .lfk-main .lfk-overig .docrij,
  .lfk-main .overige-upload-rij {
    display: block;
    border: 1px solid var(--lf-rule);
    padding: 18px;
  }

  /* ── Overige uploads (blok 7, punt 2) ───────────────────────────────
     De regel hierboven staat op twee klassen; lf-klant.css zet
     `ul.overige-uploads-lijst .overige-upload-rij` op een raster van
     `1fr 120px 220px` met DRIE klassen en een elementnaam, en wint dus.
     Gemeten gevolg op 320 en 375 px: 120 + 220 + 2x16 gap = 372 px vaste
     kolommen in een tegel van 280 px, waardoor de naamkolom op 0 px
     uitkwam. De klant zag alleen een datum en een brede knop, en bij
     meerdere uploads was niet te zien wat wat was.

     Nu: naam links, twee icoonknoppen rechts, datum weg (die is
     beheersinfo, net als bij de documenttegel). Deze selector is één
     klasse specifieker dan die uit lf-klant.css, dus hij wint zonder
     `!important`. */
  .lfk-main ul.overige-uploads-lijst li.overige-upload-rij {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    padding: 12px 18px;
  }
  .lfk-main .overige-upload-datum { display: none; }
  .lfk-main .overige-upload-naam {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lfk-main .overige-upload-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    /* Zelfde afspraak als bij de documenttegel: het 44px-raakvlak mag in de
       padding steken zodat het de regel niet 44 px hoog openduwt. */
    margin: -8px 0;
  }
  /* Vierkant icoonknopje met een pijl omlaag, in plaats van de brede
     tekstknop van 170 px. De tekst blijft in de boom staan (clip-path, geen
     display:none) zodat de knop zijn naam houdt voor een schermlezer. */
  .lfk-main .overige-upload-meta .overige-upload-bekijk {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--lf-taupe);
  }
  .lfk-main .overige-upload-meta .docrij-icoon { display: block; }
  .lfk-main .overige-upload-meta .docrij-knoptekst {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .lfk-main .overige-uploads-teller,
  .lfk-main .overige-uploads-limiet {
    display: block;
    font-size: var(--lfk-fs-12);
    color: var(--lf-taupe);
    margin-top: 8px;
  }

  /* ── Berekeningen & offertes ───────────────────────────────────────── */

  /* Documentenlijst: van 130px/1fr/230px/310px-raster naar kaarten. */
  .lfk-main .lfk-ber-tabel { display: flex; flex-direction: column; gap: 14px; }
  .lfk-main .lfk-tabel-kop { display: none; }
  /* Elke documentregel wordt een kaart; het 4-koloms raster vervalt. */
  .lfk-main .lfk-ber-tabel .lfk-tabel-rij {
    display: block;
    border: 1px solid var(--lf-rule);
    padding: 18px;
    gap: 0;
  }
  .lfk-main .lfk-ber-tabel .lfk-tabel-rij:last-child {
    border-bottom: 1px solid var(--lf-rule);
  }
  /* De lege plaatshouder die op desktop de knopkolommen uitlijnt heeft
     mobiel geen functie meer en zou een gat in de kaart laten. */
  .lfk-main .lfk-ber-knop-leeg { display: none; }
  .lfk-main .lfk-ber-afwijzing { margin-top: 12px; }
  .lfk-main .lfk-ber-datum {
    display: block;
    font-size: var(--lfk-fs-12);
    color: var(--lf-taupe);
    font-variant-numeric: tabular-nums;
  }
  .lfk-main .lfk-ber-naam {
    display: block;
    font-size: var(--lfk-fs-15);
    line-height: 1.45;
    margin-top: 4px;
  }
  .lfk-main .lfk-ber-status { display: block; margin-top: 6px; }
  .lfk-main .lfk-ber-acties { margin-top: 14px; }

  /* Handtekeningblok. */
  .lfk-main .lfk-ht-blok { padding: 22px 20px; }

  /* A2: dezelfde slots, nu als eigen pagina vanuit het hamburgermenu. Het
     kader eromheen erft de kadermarges (.lfk-box-pad); alleen de kop van de
     instructietekst moet hier niet nóg een keer bovenmarge krijgen, want de
     paginatitel staat er al boven. */
  .lfk-main .lfk-ht-paginablok .lfk-ht-fotohint { margin-top: 0; }
  .lfk-main .lfk-ht-herkomst { margin-top: 20px; }
  .lfk-main .lfk-ht-herkomst p { margin: 0; }
  .lfk-main .lfk-ht-kop { max-width: none; }
  .lfk-main .lfk-ht-inklaprij { display: block; }
  .lfk-main .lfk-ht-knop { margin-top: 16px; }
  .lfk-main .lfk-ht-vak { height: 120px; }
  /* De knoppenrij onder elk handtekeningslot.
     `.lfk-ht-acties` is een flexrij, maar de twee knoppen zitten in een
     <form> daarbinnen — die is dus het flexitem, niet de knoppen. `flex: 1`
     op .lfk-btn deed daardoor niets: het formulier kromp tot zijn inhoud en
     de knoppen (breedte 100%) stapelden in een kolom van 107px. Gemeten op
     393px: 'Foto maken' en 'Vervangen' onder elkaar in een strook links,
     met 'Verwijderen' ernaast. Zat er al vóór deze ronde, maar viel pas op
     nu de module een eigen pagina heeft (A2).
     Het formulier wordt nu zelf een rij over de volle breedte; de twee
     knoppen delen die en 'Verwijderen' zakt naar de regel eronder. */
  .lfk-main .lfk-ht-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 10px;
  }
  .lfk-main .lfk-ht-upload {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Zonder deze twee kan het slot niet meer krimpen dan de twee labels
       naast elkaar: die staan op `white-space: nowrap`, en een rasteritem
       houdt standaard zijn min-content-breedte. Gemeten gaf dat 333px in een
       kolom van 238 — 75px overloop op 320px. Passen ze niet, dan zakt de
       tweede knop nu naar een eigen regel. */
    min-width: 0;
  }
  /* `min-width: max-content` is hier de kern: knoppen staan op
     `white-space: nowrap` en met de standaard flex-krimp werden ze smaller
     dan hun eigen label (gemeten 114px voor "Handtekening 2 opslaan", die
     ~213px nodig heeft). Met deze ondergrens kán de regel niet te smal
     worden en breekt hij af: past de tweede knop niet, dan zakt hij naar een
     eigen regel over de volle breedte. */
  .lfk-main .lfk-ht-upload .lfk-btn { flex: 1 1 auto; min-width: max-content; }
  .lfk-main .lfk-ht-acties .lfk-btn { flex: 1; }
  /* 44px, net als de knoppen ernaast — gemeten haalde deze link er 41
     (10px padding op een regel van 20). Een tikdoel dat 3px tekortkomt
     staat er op de eigen handtekeningpagina prominenter bij dan voorheen
     in het uitklapkader. */
  .lfk-main .lfk-ht-verwijder {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  /* ── Rekenmodule ───────────────────────────────────────────────────────
     Leesvolgorde uit de README: sliders -> financieringsopzet ->
     maandlastvlak -> omgekeerd rekenen. De twee kolommen worden met
     `display: contents` opgeheven zodat hun kinderen één verticale reeks
     vormen; de disclaimer schuift met `order` naar het eind. */

  .lfk-main .lfk-rm-sectie { padding-left: 20px; padding-right: 20px; }
  .lfk-main .lfk-rm-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* lf-klant.css zet hier `align-items: start` voor de tweekoloms
       desktopopzet. In een flexKOLOM betekent dat: kinderen krimpen tot hun
       inhoud in plaats van de breedte te vullen. De sliderrij werd zo 241px
       breed tegen 311px voor de financieringsopzet, en de bedragen konden
       dus per definitie niet uitlijnen. */
    align-items: stretch;
  }
  .lfk-main .lfk-rm-grid > div:first-child,
  .lfk-main .lfk-rm-rechts { display: contents; }
  .lfk-main .lfk-rm-disclaimer { order: 10; margin-top: 24px; padding-top: 0; }

  /* Sliderrij: label + bedrag op regel 1, slider met −/+ op regel 2,
     min/max-schaal op regel 3. */
  /* Dezelfde kolomindeling als .lfk-rm-opzetrij (label | bedrag | 26px
     tekenkolom), zodat het bedrag boven de slider exact in dezelfde kolom
     staat als de bedragen in de financieringsopzet eronder. Zonder die
     derde kolom eindigde de invoer 36px links van de opzet-bedragen. */
  .lfk-main .lfk-rm-sliderrij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 26px;
    align-items: baseline;
    /* 8px kolomtussenruimte: exact wat .lfk-rm-opzetrij gebruikt (gap: 0 8px).
       Zonder dat eindigde het invoerveld 8px rechts van de opzet-bedragen. */
    column-gap: 8px;
    row-gap: 0;
    margin-top: 24px;
  }
  .lfk-main .lfk-rm-sliderrij:first-of-type { margin-top: 28px; }
  .lfk-main .lfk-rm-sliderlabel {
    grid-row: 1;
    grid-column: 1;
    width: auto;
    font-weight: 600;
    font-size: var(--lfk-fs-10);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lf-taupe);
  }
  .lfk-main .lfk-rm-sliderrij .lfk-invoer {
    grid-row: 1;
    grid-column: 2;
    width: 140px;
    border: none;
    border-bottom: 1px solid var(--lf-card-border);
    background: transparent;
    text-align: right;
    font-size: var(--lfk-fs-15);
    font-variant-numeric: tabular-nums;
    padding: 4px 0;
    /* Raakvlak: het veld was 33 px hoog (gemeten 15-09-2026). */
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Onder 360 px hield het label 56 px over naast een veld van 140 px, en
     "KOOPSOM" (74 px met letterspatiëring) liep over de rand van het veld.
     Het langste bedrag ("€ 1.150.000") is 91 px; 108 px laat het label 88. */
  @media (max-width: 360px) {
    .lfk-main .lfk-rm-sliderrij .lfk-invoer { width: 108px; }
  }
  /* Vangnet: een slider die (nog) niet in een `.lfk-rm-schuifrij` zit, valt
     anders in de smalle derde kolom van dit raster en houdt 26px over —
     alleen het handvat, rechts naast het bedrag. Zo gebeurde het in het
     woningdossier, en zo zou het bij een volgende slider weer gaan. Met deze
     regel pakt élke slider de volle tweede regel, wikkel of niet. */
  .lfk-main .lfk-rm-sliderrij > input[type="range"] {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 14px;
  }

  .lfk-main .lfk-rm-schuifrij {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
  }
  .lfk-main .lfk-rm-stap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    /* Snel achter elkaar tikken is precies waar deze knoppen voor zijn, maar
       Safari op de iPhone las twee tikken als dubbeltik en zoomde het scherm
       in (Ross, 16-09-2026). `manipulation` zet alleen het dubbeltikzoomen
       uit; scrollen en knijpen om te zoomen blijven gewoon werken — dat is
       een toegankelijkheidsfunctie. Bewust NIET `none` (dat haalt ook het
       knijpen weg) en niets in de viewport-meta. */
    touch-action: manipulation;
    background: transparent;
    border: 1px solid var(--lf-brass);
    color: var(--lf-brass);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .lfk-main .lfk-rm-sliderrij input[type=range] {
    flex: 1;
    height: 44px;
    min-width: 0;
  }
  .lfk-main .lfk-rm-schaal {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: var(--lfk-fs-11);
    color: var(--lf-taupe);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }

  /* Financieringsopzet. De bedragkolom stond op `auto` en werd bij een lang
     label tot min-content samengedrukt; het bedrag brak dan af op de spatie
     (euroteken boven, getal eronder — gemeten op 320px bij
     "Financieringsbehoefte" en "Gewenst hypotheekbedrag"). Desktop heeft
     daar een vaste 120px. `min-content` op de labelkolom + `nowrap` op het
     bedrag geeft het bedrag nu voorrang; het lange LABEL breekt af, en dat
     leest prima over twee regels. */
  .lfk-main .lfk-rm-opzetrij {
    grid-template-columns: minmax(0, 1fr) auto 26px;
    font-size: var(--lfk-fs-13-5);
  }
  .lfk-main .lfk-rm-bedrag,
  .lfk-main .lfk-rm-maandlastbedrag,
  .lfk-main .lfk-rm-schaal span,
  .lfk-main .lfk-num,
  .lfk-main .lfk-wd-prijs,
  /* .lfk-kenmerk-waarde stond hier tot 17-09-2026: een eigendomsregel van
     zeventig tekens liep daardoor tot 993 px op een scherm van 393 px (Ross,
     iPhone). Een korte waarde ("118 m²") staat met normale witruimte net zo
     goed op één regel (gemeten: 0 elementen anders). */
  .lfk-main .lfk-ab-regel-waarde,
  .lfk-main .lfk-ab-fact-bedrag {
    white-space: nowrap;
  }
  /* Dubbele lijn onder de totaalregel als ECHTE dubbele border — het
     prototype tekent hem met een box-shadow, en schaduwen zijn hier
     verboden. Twee 1,6px-lijnen met 2px ertussen geeft hetzelfde beeld. */
  .lfk-main .lfk-rm-totaal {
    border-top: 1.6px solid var(--lf-ink);
    box-shadow: none;
    position: relative;
    padding-top: 11px;
  }
  .lfk-main .lfk-rm-totaal::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    border-top: 1.6px solid var(--lf-ink);
  }

  .lfk-main .lfk-rm-infocard {
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 24px;
  }
  /* Het bedrag (29,47px serif) moet naast het label op één regel passen.
     Zonder nowrap brak "€ 1.463 p/m" af op de "p/m"; het label krijgt daarom
     de kleinkapitaal-maat en het bedrag mag niet afbreken. Verkleinen van
     het bedrag is geen optie — dat is precies het getal waar de klant voor
     komt. */
  /* flex-wrap: op 393px staan label en bedrag naast elkaar; op een smaller
     toestel (320px) zou het nowrap-bedrag de kaart 30px buiten de module
     duwen. Dan zakt het bedrag netjes naar de volgende regel in plaats van
     dat er iets uitsteekt — en zonder dat het getal kleiner wordt. */
  .lfk-main .lfk-rm-maandlastrij { gap: 4px 12px; flex-wrap: wrap; }
  .lfk-main .lfk-rm-maandlastrij span:first-child {
    min-width: 0;
    font-weight: 600;
    font-size: var(--lfk-fs-10);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lf-taupe);
  }
  .lfk-main .lfk-rm-maandlastbedrag {
    white-space: nowrap;
    text-align: right;
  }

  /* De resetknop hoort onderaan de module (README), niet boven bij de
     basiskeuze waar hij in de desktop-DOM staat. */
  .lfk-main #rm-reset { order: 11; margin-top: 24px; }
  .lfk-main .lfk-rm-omgekeerd { margin-top: 32px; }
  .lfk-main .lfk-rm-omgekeerd-velden { gap: 18px; }
  .lfk-main .lfk-invoer-breed { width: 100%; box-sizing: border-box; }
  /* `display: contents` heft de rij op zodat label, keuzeveld én de
     resetknop directe kinderen van de modulekolom worden — alleen dán werkt
     de `order` hieronder op die knop. De gap van de rij vervalt daarmee, dus
     de marges staan hier expliciet. */
  .lfk-main .lfk-rm-basisrij { display: contents; }
  .lfk-main .lfk-rm-basislabel { margin-top: 18px; }
  .lfk-main .lfk-rm-basisrij .lfk-select,
  .lfk-main .lfk-rm-basisrij .lfk-rm-basistekst,
  .lfk-main .lfk-rm-basisvorm {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
  }

  /* ── Ondertekenmodule ──────────────────────────────────────────────────
     Hover bestaat niet op een telefoon. De grepen hingen uitsluitend aan
     `.ot-el:hover` / `:focus-within`; een handtekening heeft geen focusbaar
     kind, dus ×, ⧉ en de schaalgreep waren daar onbereikbaar. Ze horen nu
     bij de SELECTIE (klasse `is-geselecteerd`, gezet door ondertekenen.js).

     Vier grepen om één element, op 393px. Plaatsing (element-rand = 0):
       verplaats  linksboven    x -14..14
       kopieer    rechtsboven   x  W-50..W-22
       verwijder  rechtsboven   x  W-14..W+14
       schalen    rechtsonder   x  W-14..W+14, onderaan
     Ze raken elkaar niet zolang het element breder is dan 64px; de
     standaardhandtekening is ~134px op een 353px-brede pagina. */

  .ot-el.is-geselecteerd {
    outline: 1.5px dashed var(--lf-brass);
    outline-offset: 2px;
  }
  .ot-el.is-geselecteerd .ot-el-verwijder,
  .ot-el.is-geselecteerd .ot-el-kopieer { display: flex; }
  .ot-el.is-geselecteerd .ot-el-greep,
  .ot-el.is-geselecteerd .ot-el-verplaats { display: flex; }
  /* Drie klassen, dus specifieker dan de basisregel die -ro buiten mobiel
     uitzet. */
  .ot-el.is-geselecteerd .ot-el-verplaats-ro { display: flex; }
  /* O4: bij een TEKSTVELD lagen de grepen met hun offset van -14px voor de
     helft ÓVER het invoerveld — precies over de eerste letters. Een
     handtekening is een plaatje en heeft daar geen last van, een tekstveld
     wel. Bij tekstvelden staan de grepen daarom volledig buiten het
     element (-34px: 28px greep + 6px lucht), dus ernaast in plaats van
     eroverheen. Gemeten: greep loopt van -34 tot -6, het veld begint op 0. */
  .ot-el-tekst .ot-el-verplaats-lb,
  .ot-el-tekst .ot-el-greep { left: -34px; }
  .ot-el-tekst .ot-el-verplaats-ro { right: -34px; }
  /* Niet-geselecteerd: niets tonen, ook niet bij hover (die blijft op
     sommige touch-browsers na een tik hangen). */
  .ot-el:not(.is-geselecteerd) .ot-el-verwijder,
  .ot-el:not(.is-geselecteerd) .ot-el-kopieer,
  .ot-el:not(.is-geselecteerd) .ot-el-greep,
  .ot-el:not(.is-geselecteerd) .ot-el-verplaats { display: none; }

  .ot-el-verwijder,
  .ot-el-kopieer,
  .ot-el-greep,
  .ot-el-verplaats {
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: var(--lf-paper);
    border: 1px solid var(--lf-brass);
    border-radius: 0;
    color: var(--lf-brass);
    padding: 0;
    position: absolute;
  }
  /* Onzichtbaar raakvlak van 44px rond elke greep van 28px. */
  .ot-el-verwijder::after,
  .ot-el-kopieer::after,
  .ot-el-greep::after,
  .ot-el-verplaats::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .ot-el-verwijder { top: -14px; right: -14px; font-size: 15px; }
  .ot-el-kopieer   { top: -14px; right: 22px; font-size: 13px; }
  /* O3/O4: schalen verhuist naar LINKSONDER; rechtsonder komt de tweede
     verplaatsgreep. Zo staat er in elke hoek precies één greep en zijn de
     twee verplaatsgrepen diagonaal tegenover elkaar — altijd één in beeld,
     of het element nu bovenaan of onderaan de pagina staat. */
  .ot-el-greep     { left: -14px; bottom: -14px; cursor: nesw-resize; }
  /* Schaalgreep krijgt een pijlteken zodat hij niet als leeg vlak leest. */
  /* `touch-action` erft NIET: het element zelf staat op `none` (main.css),
     maar deze greep is een eigen kind en stond daardoor op `auto`. Een
     schaalveeg met de vinger werd dan door de browser als scrollen
     opgevat, en het element bleef halverwege steken. De verplaatsgrepen
     hadden dit al. */
  .ot-el-greep { touch-action: none; }

  .ot-el-greep::before {
    content: "⤡";
    font-size: 13px;
    line-height: 1;
  }
  /* Verplaatsgrepen: linksboven én rechtsonder (zie ondertekenen.js). */
  .ot-el-verplaats {
    font-size: 14px;
    line-height: 1;
    cursor: move;
    touch-action: none;
    user-select: none;
  }
  .ot-el-verplaats-lb { top: -14px; left: -14px; }
  .ot-el-verplaats-ro { bottom: -14px; right: -14px; }

  /* ── Punt 3 · grepen uit elkaar bij een KLEIN element (16-08-2026) ─────
     De grepen zitten in de vier hoeken, dus hun onderlinge afstand is de
     maat van het element zelf. Bij een handtekening (99x57) gaat dat goed;
     bij een tekstveld is het element maar 18px hoog en vallen de bovenste
     en onderste rij vrijwel samen. Gemeten op 393px: `verwijder` en
     `verplaats-ro` 18px uit elkaar, `greep` en `verplaats-lb` óók 18px, en
     twee van de vier vingen hun eigen tik niet meer — je raakte steeds de
     buurman.

     Is het element lager (of smaller) dan 56px, dan wijken de rijen naar
     BUITEN: 20px extra per kant maakt de afstand 18 + 40 = 58px en dus
     ruim boven de 44px die een vinger nodig heeft. De klassen worden door
     ondertekenen.js gezet, want CSS kan de maat van een element niet
     bevragen. Het element zelf verschuift niet; alleen de grepen. */
  .ot-el.is-laag .ot-el-verwijder,
  .ot-el.is-laag .ot-el-kopieer,
  .ot-el.is-laag .ot-el-verplaats-lb { top: -34px; }
  .ot-el.is-laag .ot-el-greep,
  .ot-el.is-laag .ot-el-verplaats-ro { bottom: -34px; }

  .ot-el.is-smal .ot-el-verplaats-lb,
  .ot-el.is-smal .ot-el-greep { left: -34px; }
  .ot-el.is-smal .ot-el-verwijder,
  .ot-el.is-smal .ot-el-verplaats-ro { right: -34px; }
  /* 12 en niet 2: samen met `verwijder` op -34 geeft dat 46px hart-op-hart,
     net boven de 44px die twee vingerdoelen nodig hebben. */
  .ot-el.is-smal .ot-el-kopieer { right: 12px; }

  /* ── Punt 5 · de grepen groeien NIET mee met de eigen zoom (18-08-2026) ──
     Gemeten op 393px met eigen zoom 3x: een greep van 28px werd 84px, en
     zijn ankerpunt schoof mee naar 42px buiten het element — bij een
     handtekening links op de pagina stond de verplaatsgreep op x = -58, dus
     buiten het scherm en niet meer aan te raken. Het DOCUMENT hoort te
     schalen, de bediening niet (dezelfde regel als voor de werkbalken,
     punt 8): een vingerdoel blijft een vingerdoel.

     `--ot-tegen` is 1/zoom en wordt door ondertekenen.js op #ot-paginas
     gezet; zonder zoomlaag (desktop) bestaat de variabele niet en valt
     alles terug op 1, dus daar verandert er niets.

     Elke greep krimpt naar de hoek die NAAR het element wijst. Zo blijft
     hij aan zijn eigen hoek plakken in plaats van weg te drijven, en
     houden de vier grepen onderling hun afstand. */
  .ot-el-verwijder,
  .ot-el-kopieer,
  .ot-el-greep,
  .ot-el-verplaats { transform: scale(var(--ot-tegen, 1)); }
  .ot-el-verwijder    { transform-origin: 0 100%; }    /* rechtsboven  → linksonder */
  .ot-el-kopieer      { transform-origin: 50% 100%; }  /* boven de rand → omlaag */
  .ot-el-greep        { transform-origin: 100% 0; }    /* linksonder   → rechtsboven */
  .ot-el-verplaats-lb { transform-origin: 100% 100%; } /* linksboven   → rechtsonder */
  .ot-el-verplaats-ro { transform-origin: 0 0; }       /* rechtsonder  → linksboven */

  /* Verwijderen en kopiëren staan naast elkaar rechtsboven; 36px ertussen
     is te weinig voor twee raakvlakken van 44px. 46px maakt ze los, en dat
     past nog steeds naast een element van 99px breed. */
  .ot-el-kopieer { right: 32px; }
  /* De inline "✥" in een tekstveld vervalt: met de zwevende greep zouden er
     anders twee sleepgrepen op één element zitten. */
  .ot-el-sleep { display: none; }

  /* Eigen scherm: geen header, geen navigatie, geen footer. De terug-link
     bovenaan de content is de weg terug. Scheelt 240px verticaal — het
     document begon anders pas op y=1003 op een scherm van 852px. */
  .lfk-body-ondertekenen .lfk-header,
  .lfk-body-ondertekenen .lfk-footer { display: none; }
  .lfk-body-ondertekenen .lfk-content { padding-top: 16px; }
  /* Documenttitel op 20,4px (hand-off) i.p.v. de paginakop van 40,8px: op
     dit scherm is het document de hoofdzaak, niet de titel. Scheelt ~90px
     voordat de eerste pagina in beeld komt. */
  .lfk-body-ondertekenen .lfk-h1 { font-size: var(--lfk-fs-18); }
  .lfk-body-ondertekenen .lfk-mt-36 { margin-top: 16px; }

  /* Werkbalk. Het ontwerp tekent een 2x2-raster, maar dat gaat uit van korte
     labels ("Handtekening 1"). Deze codebase gebruikt "Handtekening
     plaatsen" en "Handtekening 2 plaatsen"; die passen op 393px niet in een
     halve kolom en liepen buiten hun knop. Volgens knopregel 1F ("paren in
     een 1fr-1fr-rij zolang het langste label past, anders gestapeld") wordt
     het hier dus één kolom — de labels blijven op één regel en worden niet
     verkleind. */
  /* ── Punt 2 · de werkbalk blijft staan als het toetsenbord opengaat ───
     (Ross, 19-08-2026)

     Hij plakt `sticky` aan de bovenkant. Dat is de bovenkant van het
     LAYOUT-viewport, en dat is op iOS niet wat je ziet: zodra het
     toetsenbord opengaat krimpt het VISUELE viewport en schuift het bínnen
     dat layout-viewport omlaag. De balk plakt dan keurig aan de bovenkant
     van iets wat je niet meer ziet — precies wat Ross meemaakt: hij typt in
     een tekstveld en de drie plaatsknoppen zijn weg, terwijl hij er voor
     het volgende veld (naam, datum, telefoon, e-mail) meteen weer bij moet.

     ondertekenen.js zet daarom `top` gelijk aan `visualViewport.offsetTop`,
     zodat de balk aan de bovenkant van het ZICHTBARE deel blijft plakken.
     Zonder toetsenbord is dat nul en verandert er niets.

     Bewust `top` en niet een transform: `.ot-afronden` staat in de DOM
     BINNEN deze balk (op desktop zijn het gewoon knoppen in dezelfde
     werkbalk), en een transform hier zou die vaste onderbalk aan de
     werkbalk verankeren in plaats van aan het scherm — gemeten sprong die
     dan van y=749 naar y=77.

     `sticky` en niet `fixed`: de balk hoort in de tekststroom te blijven
     staan, ná de uitleg. Vast bovenaan zou hem boven de uitleg zetten, en
     die volgorde is vorige ronde juist met opzet zo gemaakt (punt 9). */
  .lfk-main .ot-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 0;
    background: var(--lf-paper);
    border-bottom: 1px solid var(--lf-rule);
  }
  .lfk-main .ot-toolbar .lfk-btn,
  .lfk-main .ot-toolbar .btn { width: 100%; }

  /* ── Punt 2 · in plaatsmodus vangen geplaatste elementen de tik niet ──
     (Ross, 19-08-2026)

     De plaatsroutine reageert alleen op een tik op de pagina-AFBEELDING.
     Ligt er al een element op die plek, dan vangt dat de tik op en gebeurt
     er niets — de modus blijft aan en het lijkt of de knop kapot is.

     Bij Ross is dat geen randgeval: op een offerte vult hij naam, datum,
     telefoonnummer en e-mail in, vier regels vlak onder elkaar. Een
     tekstveld is ongeveer een halve pagina breed, dus het tweede veld komt
     bijna altijd bovenop het eerste terecht. Gemeten: tik 60px onder een
     ingevuld veld -> eronder ligt de <input>, aantal elementen 4 -> 4.

     Zolang er een gereedschap aanstaat laten de elementen de tik dus door.
     Daarbuiten blijft alles zoals het was: slepen, schalen en typen werken
     ongewijzigd. */
  body.ot-plaatsen .lfk-main .ot-el { pointer-events: none; }


  /* ══ Tekstinvoer-stand (Ross, 20-08-2026) ═══════════════════════════════
   *
   * Het toetsenbord van iOS neemt ongeveer de helft van het scherm. Wat
   * overblijft ging op aan de uitleg, de drie grote knoppen en de onderbalk:
   * gemeten bleef er 0px PDF over — op 402x874, 393x852 én 360x800. Je kon
   * dus niet zien waar je tekst landde.
   *
   * In deze stand verdwijnt alles wat niet met typen te maken heeft en
   * neemt het PDF-venster het hele zichtbare deel in. De drie icoontjes
   * liggen ERBOVEN (transparant), zodat ze geen hoogte kosten.
   *
   * De stand gaat alleen aan als er echt in een tekstveld getypt wordt, en
   * weer uit via het vinkje of het kruisje. */

  .lfk-body-typen .lfk-main .lfk-terug,
  .lfk-body-typen .lfk-main .lfk-eyebrow,
  .lfk-body-typen .lfk-main .lfk-h1,
  .lfk-body-typen .lfk-main .ber-titel,
  .lfk-body-typen .lfk-main .ber-uitleg,
  .lfk-body-typen .lfk-main .ber-uitleg-apparaat,
  .lfk-body-typen .lfk-main .ot-toolbar,
  .lfk-body-typen .lfk-main .lfk-content-terug > .lfk-mt-36 { display: none; }

  /* Het PDF-venster vult het zichtbare deel. Vast gepositioneerd, want de
     scrollstand van de PAGINA mag hier niets meer uitmaken: het toetsenbord
     laat iOS naar het invoerveld scrollen en dan zou de weergave verspringen
     (punt 2). `--ot-typ-top` en `--ot-typ-hoogte` komen uit ondertekenen.js
     en volgen `visualViewport`. */
  .lfk-body-typen .lfk-main .ot-zoomvenster {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--ot-typ-top, 0px);
    height: var(--ot-typ-hoogte, 60vh);
    max-height: none;
    margin: 0;
    z-index: 4;
  }
  /* Geen enkele marge of rand meer om het venster; elke pixel telt hier. */
  .lfk-body-typen .lfk-main .ot-editor {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
  }
  .lfk-body-typen .lfk-main .lfk-content { padding: 0; margin: 0; }
  .lfk-body-typen .lfk-main .ot-zoomvenster .ot-paginas { padding-bottom: 0; }

  /* De rij icoontjes: OVER het document, transparant, en zelf niet
     aanraakbaar — alleen de knoppen erin vangen een tik. Zo blijft de PDF
     eronder gewoon te scrollen. */
  /* ── Eén pil om de drie icoontjes (Ross, 22-08-2026) ──────────────────
     Ze stonden elk in een eigen rondje; dat viel nog te weinig op tegen de
     PDF. Nu één doorlopende balk met afgeronde zijkanten, waarin de drie
     samen staan. De balk is niet breder dan zijn inhoud (ongeveer 190px) en
     staat linksboven — knijpt de klant de pagina zelf groter, dan begint het
     zichtbare deel daar, dus dat is de enige plek die bij elke zoomstand
     meteen bereikbaar is.

     DEKKING: van 85% naar 92%. Bij 85% liep de tekst van de PDF er nog
     duidelijk doorheen en ging de vorm van de balk verloren juist op een
     drukke plek in het document — precies waar hij moest opvallen. Bij 92%
     leest de balk als één ding, terwijl de PDF eronder nog zichtbaar blijft.
     Verder dan dat (volledig dekkend) zou hem tot een blok maken dat een
     strook document wegneemt; dat is niet nodig om op te vallen, de rand en
     de schaduw doen dat werk. */
  .lfk-body-typen .ot-typbalk {
    display: inline-flex;
    position: fixed;
    left: 14px;
    right: auto;
    top: var(--ot-typ-top, 0px);
    margin-top: 6px;
    width: max-content;
    max-width: calc(100% - 28px);
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 8px;
    height: 60px;
    background: rgba(253, 251, 246, 0.92);
    border: 1px solid rgba(160, 120, 74, 0.35);
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(71, 49, 39, 0.22);
    pointer-events: auto;
    z-index: 8;
  }
  /* Punt 5 (Ross, 21-08-2026): twee keer zo groot en met een lichte,
     doorschijnende pil erachter. Ze waren te makkelijk over het hoofd te
     zien — wie niet wist dat ze er stonden, keek eroverheen. De pil laat de
     PDF er nog doorheen zien (85% dekking) maar zet het icoon wel duidelijk
     apart van het document eronder. */
  /* De knoppen zelf hebben geen eigen vlak meer — dat doet de pil om hen
     heen. Ze houden wel hun maat: 52px is het vingerdoel. */
  .lfk-body-typen .ot-typknop {
    pointer-events: auto;
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 26px;
    background: none;
    box-shadow: none;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lfk-body-typen .ot-typknop svg { width: 26px; height: 26px; display: block; }
  /* De knop is met 52px zelf al ruimer dan de 44px die een vinger nodig
     heeft; het onzichtbare vlak houdt die ondergrens hard vast, ook als de
     maat later ooit kleiner wordt gezet. */
  .lfk-body-typen .ot-typknop::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
  }
  .lfk-body-typen .ot-typ-klaar     { color: #2e7d32; }
  .lfk-body-typen .ot-typ-nieuw     { color: var(--lf-brass); font-weight: 600; }
  .lfk-body-typen .ot-typ-annuleer  { color: #c62828; }

  /* ── Punt 9 · de slotzin staat los, in de accentkleur (19-08-2026) ────
     Hij liep eerst gewoon door achter de uitleg en viel daardoor niet op.
     Nu een eigen alinea met witruimte erboven en eronder, in hetzelfde
     bruingoud als de andere gekleurde tekst in het portaal, en met de
     werkbalk pas daaronder. Alleen op mobiel (`lfk-alleen-mobiel`): wie al
     op een laptop zit heeft niets aan de mededeling dat het op een laptop
     ruimer werkt, en zo blijft dit scherm op desktop ongewijzigd. */
  .lfk-main .ot-editor .ber-uitleg-apparaat {
    margin: 16px 0 18px;
    color: var(--lf-brass);
    font-size: var(--lfk-fs-13-5);
    line-height: 1.5;
  }

  /* Vaste onderbalk met de afrondknoppen. */
  .lfk-main .ot-afronden {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 460px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;   /* CTA onderaan, annuleren erboven */
    align-items: stretch;
    gap: 4px;
    /* 2c: de onderbalk was 131px hoog; de ruimte onder "Annuleren" leverde
       niets op en ging ten koste van de PDF. De veilige zone van de iPhone
       (de streep onderaan) blijft gerespecteerd via env(safe-area-inset). */
    padding: 8px 20px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--lf-paper);
    border-top: 1px solid var(--lf-rule);
    z-index: 6;
  }
  .lfk-main .ot-afronden #ot-bevestig { width: 100%; min-height: 48px; }
  /* Annuleren als tekstlink, niet als tweede blokknop naast de CTA. */
  .lfk-main .ot-afronden .btn-secondary {
    width: 100%;
    min-height: 36px;
    background: none;
    border: none;
    color: var(--lf-taupe);
  }
  /* ── Punt 1 · eigen zoomvenster voor de PDF (16-08-2026) ───────────────
     De PDF krijgt een eigen scrollvak tussen de werkbalk en de knoppenbalk.
     Die twee staan in de DOM BUITEN dit vak, dus ze kunnen niet meeschalen —
     dat was met de browser-eigen pinch onmogelijk, want die vergroot het
     visuele viewport en daarmee ook alles wat sticky of fixed staat.

     `touch-action: pan-x pan-y` laat het gewone scrollen intact maar haalt
     de pinch weg bij de browser; ondertekenen.js doet die zelf op deze laag.

     De hoogte is het scherm min de werkbalk (sticky bovenaan) en min de
     vaste onderbalk. Bij benadering met vaste getallen zou de balk soms een
     stukje document afdekken; --ot-balken wordt daarom door de JS gevuld met
     de gemeten hoogtes. */
  /* Scrollruimte onder de editor. Zonder deze ruimte houdt het document
     precies op waar het scherm ophoudt, kan de sticky werkbalk niet tot
     bovenaan komen en blijft de regel "Betreft · Ondertekenen" 32px in
     beeld staan. Die 90px valt achter de vaste onderbalk en is dus
     onzichtbaar; hij levert alleen scrollruimte op. Gemeten: de werkbalk
     komt daarmee van y=55 naar y=0 en de zichtbare PDF groeit van 463 naar
     526px. 200px omdat álles boven de werkbalk (terugknop, "Betreft"-regel
     en hun marges, samen ~146px) moet kunnen wegscrollen. */
  .lfk-main .ot-zoomvenster {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    /* ── Punt 5 · de browser mag de scrollstand niet zelf bijstellen ──────
       (Ross, 19-08-2026)
       Bij elke zoomstap verandert de maat van de wikkel hierbinnen. De
       browser ziet dan inhoud van maat veranderen en corrigeert de
       scrollpositie "behulpzaam" mee (scroll anchoring). Die correctie komt
       bovenop de stand die wij zelf net hebben gezet om het punt tussen de
       vingers vast te houden — en dus loopt het document alsnog onder je
       vingers weg. Gemeten bij knijpen rechtsonder: gevraagd 28px, geworden
       35px, en dat stapelt op tot 50px verschuiving aan het eind van het
       gebaar. `overflow-anchor: none` zet die hulp uit; wij bepalen zelf
       waar het venster staat. */
    overflow-anchor: none;
    /* `--ot-zicht` is de hoogte van het ZICHTBARE viewport (gezet door
       ondertekenen.js). Met een open toetsenbord is dat kleiner dan
       100vh; zonder toetsenbord is het precies 100vh. */
    max-height: calc(var(--ot-zicht, 100vh) - var(--ot-balken, 230px));
    background: #F2EDE3;
  }
  /* Wikkel met de GESCHAALDE maat: een transform verandert de layoutmaat
     niet, dus zonder deze wikkel weet het scrollvak niet hoe ver het mag. */
  .lfk-main .ot-zoominhoud { position: relative; }

  /* Punt 1 (Ross, 18-08-2026): de uitleg staat weer gewoon bovenaan en
     leesbaar. Het "Hoe werkt het?"-knopje van de vorige ronde is weg; het
     wegscrollen doet het werk al — de werkbalk plakt bovenaan en de uitleg
     schuift eronderdoor weg zodra de klant naar de PDF gaat. */
  .lfk-main .ot-editor .ber-uitleg {
    margin: 0 0 14px;
    font-size: var(--lfk-fs-13-5);
    line-height: 1.5;
  }

  /* Punt 8: op de werkbalk en de knoppenbalk mag geen enkel browsergebaar
     landen. `touch-action: none` haalt daar ook de pinch weg, zodat een
     vinger die per ongeluk op een knop start het viewport niet meer kan
     opblazen. */
  .lfk-main .ot-toolbar,
  .lfk-main .ot-afronden { touch-action: none; }

  /* Ruimte onder het document zodat de balk niets afdekt. */
  .lfk-main .ot-paginas { padding-bottom: 130px; }
  /* Binnen het zoomvenster is die ruimte niet nodig — de onderbalk staat
     buiten het vak. Blijft hij staan, dan scrollt er 130px leegte mee. */
  .lfk-main .ot-zoomvenster .ot-paginas { padding-bottom: 16px; }
  /* ── De hint mag de werkbalk niet hoger maken (Ross, 21-08-2026) ───────
     Hij stond in de stroom en maakte de balk 27px hoger zodra je een
     gereedschap koos (gemeten 181 -> 208px). Daardoor kromp het PDF-venster,
     verschoof het document een stukje, en tikte je net naast de plek die je
     op het oog had — precies op het moment dat je gaat plaatsen.

     Nu hangt hij als strook ONDER de werkbalk, over de bovenkant van het
     document heen. De balk houdt zijn maat, het document blijft staan, en de
     hint is even goed te lezen. Doorschijnende achtergrond, zodat je ziet
     wat eronder zit. */
  .lfk-main .ot-toolbar-hint {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 20px;
    background: rgba(253, 251, 246, 0.94);
    border-bottom: 1px solid var(--lf-rule);
    font-size: var(--lfk-fs-11);
    line-height: 1.4;
    color: var(--lf-taupe);
    z-index: 5;
  }
  /* MOET erbij: de hint draagt het `hidden`-attribuut en verschijnt pas in
     plaatsmodus. Een expliciete `display` overstemt dat attribuut, waardoor
     de hint permanent zichtbaar was en het aanzetten van een plaatsknop
     visueel niets deed. Zelfde valkuil als bij het menupaneel. */
  .lfk-main .ot-toolbar-hint[hidden] { display: none; }

  /* Actieve plaatsknop donker (hand-off: "actief = donker, inactief =
     licht"). Zonder dit gaf het kiezen van een gereedschap geen enkele
     zichtbare terugkoppeling. */
  .lfk-main .ot-toolbar .btn.is-actief,
  .lfk-main .ot-toolbar .btn.is-actief:hover {
    background: var(--lf-ink);
    border: 1px solid var(--lf-ink);
    color: var(--lf-paper);
  }
  .lfk-main .ot-toolbar-vulling { display: none; }
  /* padding-bottom is hier de SCROLLRUIMTE (zie de toelichting hierboven bij
     het zoomvenster): zonder die ruimte houdt het document precies op waar
     het scherm ophoudt, kan de sticky werkbalk niet tot bovenaan komen en
     blijft de regel "Betreft · Ondertekenen" in beeld. Die 200px valt achter
     de vaste onderbalk en is dus onzichtbaar. Precies genoeg om alles boven
     de werkbalk (~146px) weg te kunnen scrollen: méér ruimte laat het
     venster onder de werkbalk doorschuiven en levert niets op.
     LET OP: deze regel staat later in het bestand dan de rest van de
     ondertekenopmaak en overschrijft bij gelijke specificiteit — de eerdere
     poging om de ruimte bovenin te zetten werd hier stilletjes ongedaan
     gemaakt. */
  .lfk-main .ot-editor { padding: 0 0 55px; border: none; }
  .lfk-main .ot-paginas { background: #F2EDE3; padding: 16px 0 24px; }

  /* ── B2 · bedragen boven de sliders rechts uitlijnen ───────────────────
     Ze stonden links van de kolom waarin de financieringsopzet eronder zijn
     bedragen zet. Door het invoerveld even breed te maken als de bedrag-
     kolom (en de tekst rechts uit te lijnen) staat alles in één kolom. */

  /* ── B3 · "Indicatie maandlast" centreren ──────────────────────────── */
  .lfk-main .lfk-rm-infocard { text-align: center; }
  .lfk-main .lfk-rm-infocard .lfk-eyebrow { text-align: center; }
  .lfk-main .lfk-rm-maandlastrij {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .lfk-main .lfk-rm-maandlastbedrag { text-align: center; }

  /* ── Aankoop — woningoverzicht ─────────────────────────────────────── */

  .lfk-main .lfk-aank-kop { display: block; }
  .lfk-main .lfk-aank-kop-acties { margin-top: 16px; }
  .lfk-main .lfk-aank-kop-acties .lfk-btn { width: 100%; }
  .lfk-main .lfk-aank-invoer {
    display: block;
    border: 1px solid var(--lf-rule);
    padding: 20px;
    margin-top: 24px;
  }
  /* Het formulier is op desktop een flexRIJ (veld naast knop); mobiel wordt
     het een kolom, met het url-veld op volle breedte. Zonder `flex: none`
     kromp het veld tot een streepje omdat `flex: 1` in een kolomrichting
     op de HOOGTE slaat, niet op de breedte. */
  .lfk-main .lfk-aank-invoer .funda-form {
    display: block;
    min-width: 0;
  }
  .lfk-main .lfk-aank-invoer .lfk-invoer-lijn {
    display: block;
    width: 100%;
    flex: none;
    box-sizing: border-box;
  }
  .lfk-main .lfk-aank-invoer .lfk-btn { width: 100%; margin-top: 16px; }
  .lfk-main .lfk-aank-handmatig {
    display: block;
    text-align: center;
    margin-top: 12px;
    white-space: normal;
  }
  .lfk-main .lfk-aank-sectiekop { display: block; }
  /* De knop per sectiekop vervalt; er komt één vaste balk onderaan. */
  .lfk-main .lfk-aank-sectiekop .lfk-vergelijk-knop { display: none; }

  /* Het sectiekader eromheen vervalt: elke woning is zelf al een omkaderde
     kaart. Het scheelt bovendien 2x30px binnenwerk — precies de ruimte die
     de adreskolom naast de 92px-foto nodig heeft. */
  .lfk-main .lfk-aank-tabelkader {
    border: none;
    padding: 0;
  }
  .lfk-main .lfk-aank-sectie + .lfk-aank-sectie { margin-top: 36px; }

  /* Woningentabel wordt kaarten. De <table> blijft in de HTML staan (de
     checkbox hoort via `form=` bij het vergelijkformulier, en de cellen
     dragen de onclick-navigatie), maar krijgt hier een kaartlayout. */
  .lfk-main .woningen-table,
  .lfk-main .woningen-table tbody {
    display: block;
    width: auto;
  }
  .lfk-main .woningen-table thead,
  .lfk-main .woningen-table colgroup { display: none; }
  .lfk-main .woningen-table .woningen-row {
    display: grid;
    grid-template-columns: 92px auto 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    position: relative;
    border: 1px solid var(--lf-rule);
    padding: 18px;
    margin-bottom: 14px;
  }
  .lfk-main .woningen-table .woningen-row > td {
    border: none;
    padding: 0;
    display: block;
  }
  /* 1 checkbox · 2 foto · 3 adres · 4 plaats · 5 prijs · 6 m² ·
     7 fasebalk · 8 datum · 9 acties */
  .lfk-main .woningen-row > td:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Het <label> is het raakvlak (44x44), het vakje zelf blijft 22px. */
  .lfk-main .woningen-row .woning-checkbox-vak {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .lfk-main .woningen-row > td:nth-child(1) input[type=checkbox] {
    width: 22px;
    height: 22px;
    accent-color: var(--lf-brass);
    margin: 0;
  }
  /* Het adres is de titel van de kaart; geef die link een raakvlak van 44px
     zonder de tekst te verplaatsen (zelfde ::after-truc als de taalwissel). */
  .lfk-main .woningen-row .woning-adres-link {
    position: relative;
    display: inline-block;
    /* Een adres zonder spaties werd stil afgekapt onder het selectievakje
       (de cel heeft overflow: hidden). `anywhere`: dit inline-block telt
       anders met zijn hele woordbreedte mee (lange waarden, 17-09-2026). */
    overflow-wrap: anywhere;
  }
  .lfk-main .woningen-row .woning-adres-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  .lfk-main .woningen-row > td:nth-child(2) {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .lfk-main .woningen-row .woning-thumb,
  .lfk-main .woningen-row .woning-thumb-leeg {
    display: block;
    width: 92px;
    height: 64px;
    object-fit: cover;
    background: #E9E2D4;
  }
  .lfk-main .woningen-row > td:nth-child(3) {
    grid-column: 2 / -1;
    grid-row: 1;
    padding-right: 36px;   /* ruimte voor het selectievakje */
  }
  .lfk-main .woningen-row .woning-adres-link {
    font-family: var(--font-display);
    font-size: var(--lfk-fs-18);
    line-height: 1.25;
    color: var(--lf-ink);
  }
  .lfk-main .woningen-row > td:nth-child(4) {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: var(--lfk-fs-12);
    color: var(--lf-taupe);
    margin-top: 2px;
  }
  /* Prijs en oppervlakte staan op één regel. `min-width: 0` laat de
     prijskolom krimpen op een smal toestel; zonder dat duwde de combinatie
     de kaart een paar pixels op. */
  .lfk-main .woningen-row > td:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    font-size: var(--lfk-fs-15);
    color: var(--lf-brass);
    margin-top: 6px;
  }
  .lfk-main .woningen-row > td:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
    font-size: var(--lfk-fs-15);
    color: var(--lf-body);
    margin-top: 6px;
    justify-self: start;
    white-space: nowrap;   /* "· 118 m²" hoort op één regel bij de prijs */
  }
  /* "· 118 m²" — scheidingsteken en eenheid staan niet in de cel zelf. */
  .lfk-main .woningen-row > td:nth-child(6):not(:empty)::before { content: "· "; }
  .lfk-main .woningen-row > td:nth-child(6):not(:empty)::after { content: " m²"; }
  .lfk-main .woningen-row > td:nth-child(7) {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 16px;
  }
  /* Onder ~360px passen prijs en oppervlakte niet meer naast elkaar zonder
     dat de kaart een paar pixels opzij wordt geduwd; dan gaat de
     oppervlakte naar een eigen regel. De lettergrootte blijft gelijk.

     LET OP DE PLAATS. Dit blok stond hierboven, VOOR de twee regels die het
     wil overschrijven. Een media query verhoogt de specificiteit niet, dus
     won `td:nth-child(7) { grid-row: 4 }` daarna alsnog — op elke breedte.
     Gevolg: op 320px stonden de oppervlakte en de statusbalk in dezelfde
     rasterrij en lag de m²-waarde over "BEZICHTIGING" heen, gemeten 44x14
     px in alle zes de tegels (blok 5, deel C punt 4). */
  @media (max-width: 360px) {
    .lfk-main .woningen-row > td:nth-child(6) {
      grid-column: 2 / -1;
      grid-row: 4;
      margin-top: 2px;
    }
    /* De adrestitel: op 20,4 px paste "Burgemeester" (118 px) niet in de
       100 px naast het selectievakje en stond het adres woord voor woord
       op vijf regels. Staat na de basisregel (.woning-adres-link). */
    .lfk-main .woningen-row .woning-adres-link { font-size: var(--lfk-fs-15); }
    .lfk-main .woningen-row > td:nth-child(6):not(:empty)::before { content: ""; }
    .lfk-main .woningen-row > td:nth-child(7) { grid-row: 5; }
    .lfk-main .woningen-row > td:nth-child(8) { grid-row: 6; }
  }
  .lfk-main .woningen-row .status-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    /* --lfk-fs-10 (11,33 px) in plaats van --lfk-fs-9 (10,2 px): onder de
       11 px op een telefoon. Desktop houdt zijn eigen maat (lf-klant.css). */
    font-size: var(--lfk-fs-10);
    letter-spacing: 0.06em;
  }
  /* Met de grotere letters is de balk 224 px tekst + 20 px tussenruimte;
     op 320 px is er 242. Na de basisregel, anders wint die (zie de les
     bij het 360px-blok hierboven). */
  @media (max-width: 360px) {
    .lfk-main .woningen-row .status-steps { gap: 8px; }
  }
  /* Stapbadges ("✓ Afgerond", "Loopt") stonden op 10,77 px. */
  .lfk-main .lfk-stap-badge { font-size: var(--lfk-fs-10); }
  /* A3: alleen het HUIDIGE stadium in de accentkleur; de rest gedimd.
     `step-done` kleurt op desktop alles t/m het huidige stadium brass —
     alle drie tegelijk dus, zodra de woning bij "bod" staat. */
  .lfk-main .woningen-row .status-step,
  .lfk-main .woningen-row .status-step.step-done { color: var(--lf-taupe); }
  .lfk-main .woningen-row .status-step.is-actief {
    color: var(--lf-brass);
    font-weight: 600;
  }

  /* A4: aangevinkte woning krijgt de beige kaartvulling en een brass rand.
     `:has()` leest de checkbox-stand rechtstreeks uit; dat werkt zonder JS
     en dus ook meteen bij het laden van de pagina (bijvoorbeeld na een
     terugnavigatie waarbij de browser de vinkjes herstelt). */
  .lfk-main .woningen-table .woningen-row:has(.woning-checkbox:checked) {
    background: #F6F1E7;
    border-color: var(--lf-brass);
  }

  /* A2: datum van de bezichtiging/deadline weg van de tegel — het
     statusbalkje komt zo dichter op de rest en de tegel wordt slanker.
     De datum staat op het woningdossier en in het stappenplan. */
  .lfk-main .woningen-row > td:nth-child(8) { display: none; }

  .lfk-main .woningen-row .status-arrow {
    flex: 1;
    height: 1px;
    background: var(--lf-rule);
    color: transparent;   /* de pijl zelf wordt een verbindingslijn */
    overflow: hidden;
    font-size: 0;
  }
  .lfk-main .woningen-row > td:nth-child(8) {
    grid-column: 1 / -1;
    grid-row: 5;
    font-size: var(--lfk-fs-11);
    color: var(--lf-brown);
    font-variant-numeric: tabular-nums;
  }
  .lfk-main .woningen-row > td:nth-child(8):not(:empty) { margin-top: 14px; }
  /* Verwijderen — terug op de tegel (Ross, blok 6 punt 5).
     Het stond op `display: none` met als reden: "op een telefoon staat een
     kruisje te dicht bij het vinkje". Die zorg is terecht, dus het kruisje
     komt niet terug náást de checkbox maar op een EIGEN REGEL onderaan de
     tegel, rechts uitgelijnd, met het raakvlak van 44x44 dat
     `.lfk-main .btn-kruisje` hierboven al geeft. De afstand tot de checkbox
     is daarmee de hele hoogte van de tegel in plaats van een paar pixels.

     De biedingsdeadline (kolom 8) blijft wél verborgen: die staat bewust op
     het woningdossier en in het stappenplan. */
  .lfk-main .woningen-row > td:nth-child(9) {
    display: block;
    grid-column: 1 / -1;
    grid-row: 7;
    justify-self: end;
    margin-top: 4px;
  }
  .lfk-main .woningen-row > td:nth-child(9) .row-actions {
    display: flex;
    justify-content: flex-end;
  }

  /* Vaste vergelijkbalk onderaan. */
  .lfk-vgl-balk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 460px;
    background: var(--lf-paper);
    border-top: 1px solid var(--lf-card-border);
    padding: 12px 20px 18px;
    z-index: 15;
    box-sizing: border-box;
  }
  .lfk-vgl-balk { display: block; }
  .lfk-vgl-balk[hidden] { display: none; }
  .lfk-vgl-balk .lfk-btn { min-height: 48px; }
  /* Ruimte onder de laatste sectie zodat de balk niets afdekt. */
  .lfk-main .lfk-terug-rij { padding-bottom: 84px; }

  /* ── Woningdossier ─────────────────────────────────────────────────────
     De foto gaat over de volle breedte van de kolom (220px hoog), daaronder
     de gegevens. De hero-grid van 1.35fr/1fr vervalt. */

  .lfk-main .lfk-wd-hero {
    display: block;
    margin-top: 16px;
  }
  /* De foto breekt uit de 20px zijmarge zodat hij schermbreed staat. */
  .lfk-main .lfk-wd-foto {
    min-height: 0;
    height: 220px;
    border-left: none;
    border-right: none;
    margin-left: -20px;
    margin-right: -20px;
  }
  .lfk-main .lfk-wd-info {
    border: none;
    padding: 24px 0 0;
  }
  /* Adres op 24,93px; mobiel.js krimpt het verder tot het op één regel past
     (het enige element dat automatisch mag krimpen). */
  .lfk-main .lfk-wd-adres {
    font-size: var(--lfk-fs-22);
    line-height: 1.2;
    margin: 10px 0 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .lfk-main .lfk-wd-prijs { font-size: var(--lfk-fs-30); margin-top: 14px; }
  .lfk-main .lfk-wd-knoppen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  .lfk-main .lfk-wd-blok { margin-top: 40px; }
  /* Kenmerken: van 3 kolommen naar één lijst met hairlines. */
  .lfk-main .lfk-wd-kenmerken {
    display: block;
    column-gap: 0;
  }
  .lfk-main .lfk-kenmerk {
    border-bottom: 1px solid var(--lf-rule);
    font-size: var(--lfk-fs-13-5);
  }
  .lfk-main .lfk-kenmerk:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--lf-rule);
  }
  .lfk-main .lfk-kenmerk:last-child { border-bottom: none; }

  /* Makelaarkaart: "Bel" naast het telefoonveld houdt 44px raakvlak. */
  .lfk-main .lfk-veld-mettel {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .lfk-main .lfk-veld-mettel .lfk-invoer,
  .lfk-main .lfk-veld-mettel input { flex: 1; min-width: 0; }
  /* "Bel" naast het telefoonveld. Het raakvlak komt uit een ::after-vlak en
     NIET uit padding met een negatieve marge: die trok het klikvlak 13px
     omhoog, tot over het label "TELEFOON KANTOOR" erboven (gemeten: 6px
     overlap). Zichtbaar was daar niets van, maar een tik op het label kwam
     wel op de bel-link terecht. */
  .lfk-main .link-tel {
    flex: none;
    white-space: nowrap;
    position: relative;
    display: inline-block;
  }
  .lfk-main .link-tel::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* Stappenplan: cijferkolom 56px. */
  .lfk-main .lfk-stap {
    grid-template-columns: 56px 1fr;
    gap: 20px;
  }
  /* BESTAANDE FOUT, hier mobiel afgedekt: `.lfk-main form { display: block }`
     (lf-klant.css 117) overstemt de browserregel die de inhoud van een
     gesloten <details> verbergt. Het bieddeadline-formulier stond daardoor
     ALTIJD open — de <summary> was een sierlink zonder werking. Gemeten:
     286px altijd zichtbare inhoud op 393px, en de tekst erin liep over de
     rekenmodule eronder heen.
     Dit gebeurt op DESKTOP net zo goed (daar 201px); dat is bewust niet
     hier meegenomen omdat desktop buiten scope valt — zie TODO. */
  .lfk-main details.lfk-stap-openklap:not([open]) > form { display: none; }

  .lfk-main .lfk-stap-bodrij {
    display: block;
  }
  .lfk-main .lfk-stap-bodrij > * { width: 100%; box-sizing: border-box; }

  /* Bieddeadline-rij: op desktop staat de knop "Lever documenten aan" naast
     de twee tan-blokjes; op een telefoon is daar geen ruimte voor, dus
     eronder en over de volle breedte — 44px hoog, zoals elke raakknop hier. */
  .lfk-main .lfk-stap-deadlinerij {
    display: block;
  }
  .lfk-main .lfk-stap-deadlinekaarten { flex: none; }
  /* Punt 6 (Ross, 17-08-2026): hier stond `display: block`, en dat sloeg de
     `display: flex` met `align-items/justify-content: center` van
     `.lfk-main .lfk-btn` uit. Gevolg: de tekst plakte tegen de bovenkant van
     een 44px hoog vak, met daaronder een gat — de knop leek daardoor te hoog.
     Zonder die regel geldt de flexcentrering van elke andere mobiele knop weer
     en is dit een gewone knop van 44px met de tekst in het midden. De
     minimumhoogte hoeft hier ook niet: die staat al op `.lfk-btn`. */
  .lfk-main .lfk-stap-docknop {
    width: 100%;
    margin-top: 14px;
    white-space: normal;
  }
  /* Radio's (verbouwplannen): het vakje blijft 20px, maar het LABEL eromheen
     wordt het raakvlak van 44px — tikken op het woord "Ja" moet werken. */
  .lfk-main .lfk-radio-rij { display: flex; gap: 28px; flex-wrap: wrap; }
  .lfk-main .lfk-radio-optie {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: var(--lfk-fs-13-5);
  }
  .lfk-main .lfk-radio-optie input[type=radio] {
    width: 20px;
    height: 20px;
    accent-color: var(--lf-brass);
    margin: 0;
  }

  /* Verwijderen onderaan het dossier, na een hairline. */
  .lfk-wd-verwijderblok {
    display: block;
    border-top: 1px solid var(--lf-rule);
    margin-top: 40px;
    padding-top: 16px;
  }
  .lfk-main .lfk-wd-verwijder {
    display: inline-block;
    width: auto;
    min-height: 44px;
    background: none;
    border: none;
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: var(--lfk-fs-13);
    letter-spacing: normal;
    text-transform: none;
    color: #a23d2e;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: normal;
  }
  .lfk-main .lfk-wd-verwijder-bevestig .lfk-btn { margin-top: 16px; }
  .lfk-main .lfk-wd-verwijder-bevestig .lfk-btn-secundair { margin-top: 10px; }

  /* Blokken op het woningdossier: 30px binnenwerk kost te veel op 393px. */
  .lfk-main .lfk-wd-blok { padding-left: 20px; padding-right: 20px; }

  /* W3-gevolg: zonder de badge "meest recent" zakte de <summary> van de
     analyse naar 33px hoog — onder de 44px-ondergrens. Raakvlak vergroot
     met het gebruikelijke onzichtbare ::after-vlak, zodat de tekst zelf
     niet verspringt. */
  .lfk-main .analyse-history-summary {
    position: relative;
    display: block;
  }
  .lfk-main .analyse-history-summary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* ── W4 · referentiepanden ("soortgelijke woningen die verkocht zijn")
     Was een flexrij: adres links, knoppen rechts — de knoppen liepen over
     het adres heen zodra dat langer was dan de halve breedte. Nu: adres op
     een eigen regel over de volle breedte, knoppen eronder in een
     1fr/1fr-raster. De statusindicator blijft bij de knoppen staan. */
  .lfk-main .lfk-refrij {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--lf-rule);
  }
  .lfk-main .lfk-refrij:last-child { border-bottom: none; }
  /* Punt 3 (Ross, 15-08-2026): de adresregels vet, zodat je in één oogopslag
     ziet waar de ene woning ophoudt en de volgende begint. Het blok bestaat
     uit vier vrijwel identieke rijen met dezelfde twee knoppen eronder; het
     adres is het enige dat ze onderscheidt en verdient dus het gewicht.
     600 en niet 700: de huisstijl gebruikt nergens zwaarder dan halfvet. */
  .lfk-main .lfk-refrij-adres {
    display: block;
    font-size: var(--lfk-fs-13-5);
    font-weight: 600;
    line-height: 1.45;
    color: var(--lf-body);
  }
  .lfk-main .lfk-refrij .lfk-docdl-acties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .lfk-main .lfk-refrij .lfk-docdl-acties .lfk-btn { width: 100%; }
  /* Punt 2 (Ross, 15-08-2026): het groene vinkje en het rode verbodsteken
     boven de Funda-knop zijn weg. Sinds de knop zelf groen of rood kleurt
     (vorige ronde) stond dezelfde melding er twee keer, en het vinkje kostte
     een eigen regel in het raster. Op desktop blijven ze staan: daar is de
     knop nog zwart en is de indicator de enige aanwijzing. */
  .lfk-main .lfk-refrij .lfk-funda-status { display: none; }

  /* ── K3 · foto's in de vergelijktabel op één lijn ──────────────────────
     De kolomkop is foto + adres + plaats. Bij een adres van één regel zakte
     de foto lager dan bij een adres over twee regels, omdat de cel zijn
     inhoud verticaal centreerde. Alles bovenaan uitlijnen plus een vaste
     fotohoogte zet ze onderling gelijk. */
  .lfk-liggend .lfk-main .vergelijk-table th { vertical-align: top; }
  .lfk-liggend .lfk-main .vergelijk-thumb,
  .lfk-liggend .lfk-main .lfk-vgl-thumb-leeg {
    display: block;
    width: 100%;
    height: 64px;
    object-fit: cover;
    background: #E9E2D4;
  }

  /* ── K1 · geen verticale lijnen in de gekantelde tabellen ───────────── */
  .lfk-liggend .lfk-main .vergelijk-table th,
  .lfk-liggend .lfk-main .vergelijk-table td,
  .lfk-liggend .lfk-main .analyse-table th,
  .lfk-liggend .lfk-main .analyse-table td {
    border-left: none;
    border-right: none;
  }


  /* ── Bezichtigingschecklist ────────────────────────────────────────────
     Vijf knoppen van 44x44 met 8px gap = 268px; past ruim binnen 393px.
     De letters blijven op hun eigen grootte staan. */

  .lfk-main .score-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .lfk-main .score-label {
    width: 44px;
    height: 44px;
    border-color: var(--lf-card-border);
    font-size: var(--lfk-fs-13-5);
    font-variant-numeric: tabular-nums;
  }
  /* Op 320 px is de groep 210 px breed: vijf van 44 (220) passen niet en de
     vijfde viel naar een tweede regel. 40 px blijft ruim boven de 36. */
  @media (max-width: 360px) {
    .lfk-main .score-group { gap: 0; justify-content: space-between; }
    .lfk-main .score-label { width: 40px; height: 40px; }
  }
  .lfk-main .lfk-cl-vraag + .lfk-cl-vraag { margin-top: 28px; }
  .lfk-main .lfk-cl-vraagtekst { font-size: var(--lfk-fs-15); }

  /* ── Vergelijkingstabellen — kantelgedrag ──────────────────────────────
     Beide brede tabellen bestaan alleen liggend. Staand toont het portaal
     een tan kantelkaart. `.lfk-liggend` / `.lfk-staand` worden door
     mobiel.js op <html> gezet (klasse, geen losse media query, omdat het
     kruisje de weergave ook liggend moet kunnen sluiten). De toets daar is
     het liggende deel van de media query boven dit blok —
     `(orientation: landscape) and (max-height: 520px)` — en moet daaraan
     gelijk blijven. Tot 15-09-2026 stond er `innerWidth >= 600`, waardoor
     een telefoon van 320 px breed (liggend 568) de tabel nooit kreeg. */

  .lfk-staand .lfk-kantelkaart { display: block; }
  .lfk-liggend .lfk-kantelkaart { display: none; }
  .lfk-staand .lfk-kantelbaar { display: none; }

  /* ── K2 · kantelen opent een APARTE weergave ───────────────────────────
     Voorheen verscheen de tabel gewoon in de pagina, waardoor je liggend
     langs de tabel heen naar de rest van het woningdossier kon scrollen.
     Nu neemt de weergave het hele scherm over: alleen de
     referentievergelijking en daaronder de visuele inspectie. Scrollen
     blijft binnen deze laag (`position: fixed` + eigen overflow), en
     sluiten kan met het kruisje onderin of door de telefoon rechtop te
     draaien — dan haalt mobiel.js `lfk-liggend` weg en verdwijnt de laag
     vanzelf. */
  .lfk-staand .lfk-kantelweergave { display: contents; }

  /* Achtergrond vastzetten zolang de kantelweergave openstaat. De overlay
     dekt het scherm al af, maar zonder deze regel bleef de pagina eronder
     meescrollen (gemeten: window.scrollY liep door tot 400) — op iOS geeft
     dat bovendien rubber-banding zodra je de tabel voorbij scrollt. Alleen
     op pagina's die zo'n weergave hebben, vandaar de `:has()`. */
  html.lfk-liggend:has(.lfk-kantelweergave),
  html.lfk-liggend:has(.lfk-kantelweergave) body {
    overflow: hidden;
    /* Ook op <html>: met alleen `body { overflow: hidden }` blijft het
       documentelement scrollbaar en liep window.scrollY gewoon door. */
    height: 100%;
  }

  .lfk-liggend .lfk-kantelweergave {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--lf-paper);
    display: flex;
    flex-direction: column;
  }
  .lfk-liggend .lfk-kantelweergave-inhoud {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* C1 (Ross, 14-08-2026): hier viel 20px horizontaal te scrollen zonder
       dat daar iets stond. De tabel breekt met `width: 100vw` uit deze laag
       (zie verderop); zijn rechterrand valt daardoor 20px voorbij de
       CONTENT-box van deze laag, en die padding-rechts komt er in de
       scrollbreedte nog eens achteraan — gemeten scrollWidth 872 bij een
       clientWidth van 852. Verticaal scrollen blijft; de tabel zelf houdt
       zijn eigen horizontale scroll, dus brede kolommen blijven bereikbaar. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 0;
  }
  .lfk-liggend .lfk-kantelweergave-sluit {
    /* Expliciet, want de basisregel buiten deze media query zet hem uit. */
    display: block;
    flex: none;
    width: 100%;
    min-height: 48px;
    background: var(--lf-paper);
    border: none;
    border-top: 1px solid var(--lf-rule);
    border-radius: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lf-brass);
    cursor: pointer;
  }
  /* Staand is de sluitknop niet nodig: er is dan geen aparte weergave. */
  .lfk-staand .lfk-kantelweergave-sluit { display: none; }

  .lfk-kantelkaart {
    background: var(--lf-card);
    border: 1px solid var(--lf-card-border);
    border-radius: 8px;
    padding: 24px 20px;
    margin-top: 20px;
    text-align: center;
  }
  .lfk-kantelkaart-titel {
    font-family: var(--font-display);
    font-size: var(--lfk-fs-18);
    color: var(--lf-ink);
    margin: 10px 0 0;
  }
  .lfk-kantelkaart-tekst {
    font-size: var(--lfk-fs-13-5);
    line-height: 1.55;
    color: var(--lf-body);
    margin: 10px 0 0;
  }
  .lfk-kantelkaart-hint {
    font-size: var(--lfk-fs-12);
    line-height: 1.55;
    color: var(--lf-taupe);
    margin: 12px 0 0;
  }

  /* Liggend: horizontaal scrollen met een vastgezette labelkolom. De tabel
     mag daarbij uit de 460px-kolom breken naar de volle schermbreedte —
     anders levert kantelen niets op, en dát is juist het hele doel. */
  .lfk-liggend .lfk-kantelbaar,
  .lfk-liggend .vergelijk-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 20px;
    box-sizing: border-box;
  }
  .lfk-liggend .lfk-main .vergelijk-table,
  .lfk-liggend .lfk-main .analyse-table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
  }
  .lfk-liggend .lfk-main .vergelijk-table th,
  .lfk-liggend .lfk-main .vergelijk-table td {
    min-width: 150px;
  }
  .lfk-liggend .lfk-main .analyse-table th,
  .lfk-liggend .lfk-main .analyse-table td {
    min-width: 118px;
  }
  .lfk-liggend .lfk-main .analyse-table th:first-child,
  .lfk-liggend .lfk-main .analyse-table td:first-child {
    min-width: 150px;
    width: 150px;
    position: sticky;
    left: 0;
    background: var(--lf-paper);
    z-index: 1;
  }
  .lfk-liggend .lfk-main .vergelijk-table th:first-child,
  .lfk-liggend .lfk-main .vergelijk-table td:first-child {
    min-width: 140px;
    width: 140px;
    position: sticky;
    left: 0;
    background: var(--lf-paper);
    z-index: 1;
  }

  /* ── Upload-popup als bottom sheet ─────────────────────────────────────
     Het echte probleem was niet de vorm maar de VOLGORDE: "Foto maken" zat
     midden in de scrollende inhoud, onder de hele checklist. Gemeten in de
     oude opzet: de knop stond op y=1099 in een scrollvak van 595px, dus de
     klant moest eerst door de checklist scrollen voor hij de primaire actie
     zag. De sheet lost dat op door de kaart in drie te delen: kop vast,
     alleen de uitleg/checklist scrollt, en de keuzeknoppen + CTA staan vast
     onderaan.

     De legacy-popup hangt onder <body>, niet onder .lfk-main, dus deze
     selectors zijn ongescopet. Op desktop geldt hier niets van. */

  .kp-upload-popup-overlay {
    align-items: flex-end;      /* kaart plakt aan de onderkant */
    padding: 0;
  }
  .kp-upload-popup-kaart {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    margin: 0 auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    /* Omhoog schuiven bij openen. Eén eenvoudige toestandswissel — de
       huisstijl is verder animatie-arm. */
    animation: kp-sheet-omhoog 0.22s ease-out;
  }
  @keyframes kp-sheet-omhoog {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .kp-upload-popup-kaart { animation: none; }
  }

  /* Greepje om aan te geven dat de sheet naar beneden geveegd kan worden. */
  .kp-upload-popup-kaart::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    flex: none;
    margin: 8px auto 0;
    background: var(--lf-card-border);
    border-radius: 999px;
  }

  .kp-upload-popup-kop { flex: none; }
  .kp-upload-popup-body {
    flex: 1;
    min-height: 0;              /* zonder dit scrollt het kind niet */
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  /* Alleen de uitleg + checklist scrollen. */
  .kp-upload-popup-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Past de uitleg niet in dat vak, dan zet mobiel.js deze klasse (zie
     pasSheetAan): de hele body scrollt en het uitlegvak krimpt niet meer.
     Zonder deze stand was het vak op een lage telefoon 0 px hoog. */
  .kp-sheet-een-scrollvlak .kp-upload-popup-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kp-sheet-een-scrollvlak .kp-upload-popup-scroll {
    flex: none;
    overflow-y: visible;
  }
  /* Keuzeknoppen en formaatregel blijven staan. */
  .kp-upload-popup-dropzone,
  .kp-upload-popup-velden,
  .kp-upload-popup-formaten,
  .kp-upload-popup-fout { flex: none; }
  /* De sheet erft de legacy-popupstijl uit klantportaal.css/main.css:
     afgeronde pillen in goudtinten. Binnen de klantschil hoort de
     huisstijl: vierkant, donkere CTA / lichte knop, kleinkapitaal label. */
  .kp-upload-popup-titel {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--lfk-fs-18);
    color: var(--lf-ink);
  }
  .kp-upload-popup-dropzone {
    margin-top: 14px;
    border: 1px dashed var(--lf-card-border);
    border-radius: 0;
    background: none;
    padding: 18px 16px;
  }
  .kp-upload-popup-camera,
  .kp-upload-popup-selecteer,
  .kp-upload-popup-bevestig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 10px 0 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
  }
  /* Camera = de bedoelde weg op een telefoon, dus de donkere CTA. */
  .kp-upload-popup-camera,
  .kp-upload-popup-camera:hover,
  .kp-upload-popup-bevestig,
  .kp-upload-popup-bevestig:hover {
    background: var(--lf-ink);
    border: none;
    color: var(--lf-paper);
  }
  .kp-upload-popup-selecteer,
  .kp-upload-popup-selecteer:hover {
    background: transparent;
    border: 1px solid var(--lf-brass);
    color: var(--lf-brass);
  }
  .kp-upload-popup-bevestig[disabled] {
    background: var(--lf-rule);
    color: var(--lf-taupe);
    cursor: not-allowed;
  }
  .kp-upload-popup-annuleer,
  .kp-upload-popup-annuleer:hover {
    display: block;
    width: 100%;
    min-height: 44px;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--lfk-fs-10-5);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lf-taupe);
  }
  .kp-upload-popup-formaten {
    font-size: var(--lfk-fs-11);
    color: var(--lf-taupe);
  }
  /* De legacy-CSS zet `display: inline-block` op dit vakje, en dat overstemt
     het `hidden`-attribuut: zolang er geen bestand gekozen is stond er een
     leeg grijs blokje van 24x6px onder de knoppen. Zelfde soort fout als bij
     het menupaneel. (Bestaat ook op desktop — zie TODO.) */
  .kp-upload-popup-bestandsnaam[hidden] { display: none; }
  .kp-upload-popup-bestandsnaam {
    font-size: var(--lfk-fs-12);
    color: var(--lf-body);
    margin-top: 10px;
  }
  .kp-upload-popup-velden {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kp-upload-popup-voet { flex: none; }

  /* ── De drie uploadschermen (blok 7 punt 1; blok 8 punt 2) ───────────
     BSN-afdekken, "Controleer rotatie" (foto) en "Controleer rotatie" (PDF)
     delen één opbouw. Blok 7 heeft alleen het BSN-scherm ingedeeld; de twee
     rotatieschermen bleven achter met drie knoppen zonder tussenruimte en
     een documentkader dat onderaan open bleef staan. De regels hieronder
     hangen daarom aan de ROLLEN (gereedschap / afsluiten, en binnen
     afsluiten aan btn-primary / btn-secondary / btn-tekst) en niet aan de
     naam van een knop — anders wijkt het vierde scherm opnieuw af.
     Gemeten op 320 px vóór deze wijziging: vijf knoppen, VIER verschillende
     linkerranden (1, 41, 64, 139) en VIJF verschillende breedtes (140, 191,
     215, 218, 278). Ze wikkelden elk naar een eigen regel omdat de rij een
     `flex-wrap` is met twee `margin-right: auto`, wat op een telefoon vijf
     losse, ongelijk uitgelijnde knoppen oplevert.

     Nu twee groepen:
       GEREEDSCHAP  draaien en het laatste blok terugnemen. Dat hoort bij het
                    DOCUMENT, dus het zit vast onder het documentvlak: één
                    doorlopend kader, geen tussenruimte, gelijke helften.
       AFSLUITEN    de drie knoppen waarmee de klant dit scherm verlaat, op
                    volle breedte onder elkaar. De hoofdactie ("Bevestig en
                    maak PDF") staat bovenaan en is als enige gevuld; de
                    andere twee zijn een omlijnde en een tekstknop.

     Eén linkerrand, gelijke breedtes per groep, raakvlakken van 48 en 44 px.
     Liberforte: papier #FBF9F5, primair --lf-primair, 14px radius, 1,5px rand,
     geen schaduw. */
  .lfk-body .bsn-modal-kaart { padding: 20px 18px 18px; }

  /* Het documentvlak en zijn gereedschap zijn één blok. */
  /* Heeft dit scherm geen gereedschap, dan sluit het documentkader zichzelf
     af: anders staat de onderrand open en oogt het document afgekapt. Dat is
     precies wat Ross op het rotatiescherm zag. */
  .lfk-body .bsn-modal-gereedschap:empty { display: none; }
  .lfk-body .bsn-modal-kaart:has(.bsn-modal-gereedschap:empty)
  .bsn-modal-canvas-wrap {
    border-bottom: 1.5px solid var(--lf-card-border);
    border-radius: 14px;
    margin-bottom: 18px;
  }
  .lfk-body .bsn-modal-canvas-wrap {
    border: 1.5px solid var(--lf-card-border);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    background: var(--lf-paper);
    margin-bottom: 0;
    /* De lege onderkant van de pagina weg. De waarde komt uit
       `meldInhoudshoogte` in klantportaal.js, dat meet tot waar er inkt
       staat; ontbreekt hij (meting mislukt of de pagina is tot onderaan
       bedrukt), dan gebeurt er niets. Zie daar voor de drie grendels. */
    max-height: var(--bsn-inhoudhoogte, none);
    overflow: hidden;
  }
  .lfk-body .bsn-modal-knoppen {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Zo veel gelijke kolommen als er gereedschap is: het BSN-scherm heeft er
     twee, de twee rotatieschermen één. `grid-auto-flow: column` met
     `grid-auto-columns: 1fr` doet dat zonder een getal te noemen.

     Twee wegen die hier eerst stonden en die het NIET zijn, allebei gemeten
     in een kaart van 250 px (320 px scherm):
       * `1fr 1fr` — dan krijgt "Draai 90°" op het rotatiescherm de halve
         breedte en blijft de andere helft leeg;
       * `repeat(auto-fit, minmax(0, 1fr))` — auto-fit legt dan zo veel
         kolommen aan als er passen, en bij een ondergrens van nul zijn dat er
         onbeperkt veel: gemeten 26 kolommen, waarna de twee BSN-knoppen
         elkaar overlapten (44-184 tegen 164-304). Met een ECHTE ondergrens
         (120px) valt het BSN-scherm op 320 px juist terug naar één kolom en
         staan die twee knoppen daar onder elkaar in plaats van naast elkaar
         — ook een verandering aan een scherm dat niet mocht veranderen. */
  .lfk-body .bsn-modal-gereedschap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    padding: 8px;
    border: 1.5px solid var(--lf-card-border);
    border-radius: 0 0 14px 14px;
    background: var(--lf-paper);
    margin-bottom: 18px;
  }
  .lfk-body .bsn-modal-afsluiten {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* De hoofdactie bovenaan, direct onder het document. "Annuleren en
     opnieuw aanleveren" — de enige knop die iets weggooit — komt daardoor
     onderaan te staan, het verst van de duim. */
  .lfk-body .bsn-modal-afsluiten .btn-primary { order: -1; }

  .lfk-body .bsn-modal-knoppen .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--lfk-fs-12-5);
    letter-spacing: 0.06em;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }
  /* Gereedschap: rustig, want het is geen afsluitende keuze. */
  .lfk-body .bsn-modal-gereedschap .btn {
    min-height: 44px;
    border: 1.5px solid var(--lf-card-border);
    background: var(--lf-card);
    color: var(--lf-brown);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  /* Hoofdactie: als enige gevuld, en een slag hoger dan de rest. */
  .lfk-body .bsn-modal-afsluiten .btn-primary {
    min-height: 48px;
    background: var(--lf-primair);
    border: 1.5px solid var(--lf-primair);
    color: var(--lf-paper);
  }
  .lfk-body .bsn-modal-afsluiten .btn-primary[disabled] {
    background: var(--lf-rule);
    border-color: var(--lf-rule);
    color: var(--lf-taupe);
    cursor: not-allowed;
  }
  .lfk-body .bsn-modal-afsluiten .btn-secondary {
    background: none;
    border: 1.5px solid var(--lf-card-border);
    color: var(--lf-brown);
  }
  .lfk-body .bsn-modal-afsluiten .btn-tekst,
  .lfk-body .bsn-modal-afsluiten .btn-tekst:hover {
    background: none;
    border: 1.5px solid transparent;
    color: var(--lf-taupe);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* De pagina-tabs (voorkant/achterkant) horen ook bij het document en
     krijgen dezelfde twee gelijke helften. GEEN `display` hier: dat staat
     als inline-stijl op het element en wordt door de JS van `none` op
     `flex` gezet zodra béide pagina's relevant zijn. Een `!important`
     hierop zou de tabs áltijd tonen. `flex: 1` op de knoppen doet het werk
     zodra de rij zichtbaar is. */
  .lfk-body .bsn-modal-pagina-tabs .btn {
    flex: 1;
    min-height: 44px;
    border-radius: 14px;
  }

  /* ── Abonnement ────────────────────────────────────────────────────── */

  /* Het statuslabel is een <span> (inline). De halve regelafstand erboven
     telt visueel bij de padding op: gemeten 30px boven tegen 23px onder,
     terwijl de padding gelijk is. `display: block` met een strakke
     regelhoogte haalt die extra lucht weg. */
  .lfk-main .lfk-box-pad > .lfk-status-label {
    display: block;
    line-height: 1;
  }

  /* Status "ACTIEF" in het groen (#3f7a3f), zoals het prototype voorschrijft.
     Alleen déze status en alleen hier: de modifier staat los van
     lfk-status-ink, die gedeeld wordt met "✓ goedgekeurd" op de
     berekeningenpagina. Buiten deze media query bestaat de modifier niet,
     dus de desktopweergave blijft ink. */
  .lfk-main .lfk-status-abo-actief { color: var(--lf-goedgekeurd); }

  .lfk-main .lfk-ab-regels { margin-top: 14px; }
  .lfk-main .lfk-ab-regel {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lf-rule);
    font-size: var(--lfk-fs-13-5);
  }
  .lfk-main .lfk-ab-facturen {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .lfk-main .lfk-ab-facturen .lfk-tabel-kop { display: none; }
  .lfk-main .lfk-ab-factuurrij {
    display: block;
    border: 1px solid var(--lf-rule);
    padding: 18px;
  }
  .lfk-main .lfk-ab-specificatie { max-width: none; }
  /* Opzegbevestiging: knoppen gestapeld en containerbreed (hand-off), niet
     naast elkaar en ingesprongen zoals op desktop. */
  .lfk-main .lfk-ab-opzeg-acties {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }
  .lfk-main .lfk-ab-opzeg-acties form { width: 100%; }
  .lfk-main .lfk-ab-opzeg-acties .lfk-btn { width: 100%; }

  /* ── Blok 6 punt 9 · tijd- en datumveld naar 44px ────────────────────
     De keuzelijst "Kies een tijd" was 31px hoog — het enige formulierveld
     onder de 36px, op elke breedte. Het datumveld ernaast was 38px. Ze
     staan naast elkaar in hetzelfde formulier, dus ze gaan samen omhoog;
     een verschil van 6px valt op.

     BEWUST alleen op mobiel. Een raakvlak van 44px is een eis voor een
     vinger, niet voor een muis, en op desktop is dit formulier bewust
     slank. Nagemeten: op 1280 en 1440px blijven de velden 31 en 38px. */
  .lfk-main .lfk-veld select.lfk-veld-select,
  .lfk-main .lfk-veld input,
  .lfk-main .lfk-invoer-onder {
    min-height: 44px;
  }

  /* ======================================================================
     BLOK 5, DEEL C — drie plekken waar tekst buiten zijn kader viel.

     Alle drie gemeten op 320 / 375 / 393 / 430 px. Ze doen op 375px en
     hoger niets: daar past de tekst al, en `white-space: normal` verandert
     niets aan een regel die niet hoeft te breken. Op desktop raken deze
     regels niets — ze staan in de mobiele media query, en de eerste
     (`.lfk-ber-doc`) is daar sowieso 0x0.
     ====================================================================== */

  /* C1 + C2 · De documentknoppen op Berekeningen erfden `white-space:
     nowrap` van de algemene button-regel in main.css. De langste
     documentnaam had 333px nodig in een kader van 280px en duwde de pagina
     naar scrollWidth 356. Body staat op `overflow-x: clip`, dus die laatste
     36px was onbereikbaar — en de sluitknop van de pop-up, die op x 301
     begint, stond dan buiten beeld.
     De naam mag over twee regels; de knop houdt zijn 44px raakvlak. */
  .lfk-main .lfk-ber-doc {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* C3 · "Financieringsbehoefte" is één woord van 159px in een kolom van
     125px. `white-space: normal` hielp niet — er zit geen spatie in om op
     te breken — dus liep het label letterlijk over het bedrag heen:
     "Financieringsbehoeft€ 566.585". In beide rekenmodules.
     Eerst de bedragkolom laten krimpen tot wat hij nodig heeft; blijft er
     dan nog te weinig over, dan mag het woord breken. */
  @media (max-width: 360px) {
    .lfk-main .lfk-rm-opzetrij {
      grid-template-columns: 1fr auto 26px;
    }
    .lfk-main .lfk-rm-opzetrij > span:first-child,
    .lfk-main .lfk-rm-opzetrij > strong:first-child {
      overflow-wrap: anywhere;
      hyphens: auto;
    }
  }

  /* C5 · "BEKIJK OP FUNDA" (119px tekst) en "DOWNLOAD PDF" (115px) stonden
     met nowrap in kaders van 114px en liepen over de knop ernaast. Vanaf
     375px is het kader 142px en past het; onder 360px mag de knoptekst
     over twee regels. */
  @media (max-width: 360px) {
    .lfk-main .lfk-btn-primair,
    .lfk-main .lfk-btn-secundair {
      white-space: normal;
      line-height: 1.25;
    }
  }
}