/* ==========================================================================
   LiberForte klantportaal — klantkant-restyling (editorial/private-bank).
   Bron van waarheid: _design_handoff/design_handoff_klantenportaal/
   (README + inline-styles .dc.html). Geladen NÁ main.css + klantportaal.css;
   nieuwe schil gebruikt .lfk-*-classes, JS-gebonden legacy-classes (.docrij,
   .upload-form, .btn …) worden hier binnen .lfk-main opnieuw gestyled.
   Kleuren: uitsluitend het LiberForte-token-palet — geen andere kleuren,
   geen gradients, geen schaduwen. Vormen vierkant; enige radius (8px) is de
   tan info-/waarschuwingskaart. Geen animaties/transities.
   ========================================================================== */

:root {
  --lf-paper:       #FBF9F5;
  --lf-ink:         #000814;
  --lf-body:        #2B2118;
  --lf-brown:       #473127;
  --lf-brass:       #A0784A;
  /* De primaire kleur uit het Liberforte-ontwerpsysteem. Stond op vijf plekken
     los in de stijlbladen (de BSN-hoofdknop, de spraakmodule) en nergens als
     token — één kleur met vijf spellingen is hetzelfde patroon als een lijst
     met twee kopieën. Gemeten contrast tegen het papier (#FBF9F5): 4,01 : 1.
     Zie de groepskop in lf-mobiel.css voor wat dat betekent. */
  --lf-primair:     #8a7a50;
  --lf-taupe:       #6B6156;
  --lf-rule:        #E2D9CB;
  --lf-card:        #F0E9DC;
  --lf-card-border: #CBB68C;
  /* --- Typografieschaal (Variant F, 27-07-2026): basistekst 15px -> 17px
     (11,25pt -> 12,75pt), alle stappen x1,1333 zodat de onderlinge
     verhoudingen exact gelijk blijven. Namen = oorspronkelijke designstap
     (px voor de vergroting); "alles groter/kleiner" is hier een centrale
     wijziging. -------------------------------------------------------- */
  --lfk-fs-9:    10.2px;    /* status-stepper in tabelrijen */
  --lfk-fs-9-5:  10.77px;   /* stap-badges */
  --lfk-fs-10:   11.33px;   /* kleinkapitaal-labels, tabelkoppen */
  --lfk-fs-10-5: 11.9px;    /* nav-tabs, knoppen, eyebrows, terug-links */
  --lfk-fs-11:   12.47px;   /* rekenmodule-disclaimer */
  --lfk-fs-11-5: 13.03px;   /* adviseur-wijzigingsnoot */
  --lfk-fs-12:   13.6px;    /* footer, tellers, hints, kleine meta */
  --lfk-fs-12-5: 14.17px;   /* tegel-status, stap-labels, deadlines */
  --lfk-fs-13:   14.73px;   /* datums, selects, leegteksten */
  --lfk-fs-13-5: 15.3px;    /* kaart- en tabeltekst, kenmerken */
  --lfk-fs-14:   15.87px;   /* invoervelden, tegel-tekst, uitlegregels */
  --lfk-fs-14-5: 16.43px;   /* grote-tegel-tekst */
  --lfk-fs-15:   17px;      /* basistekst (body) */
  --lfk-fs-16:   18.13px;   /* wacht-popup-kop (legacy-naschaling) */
  --lfk-fs-17:   19.27px;   /* vergelijktabel-adres */
  --lfk-fs-18:   20.4px;    /* stappenplan-titels */
  --lfk-fs-19:   21.53px;   /* voortgang-nummers, doc-adviseur-naam */
  --lfk-fs-20:   22.67px;   /* adviseur-naam, tegel-titels */
  --lfk-fs-22:   24.93px;   /* sectiekoppen (h2) */
  --lfk-fs-24:   27.2px;    /* grote-tegel-titels */
  --lfk-fs-26:   29.47px;   /* tegel-/stap-nummers, maandlastbedrag */
  --lfk-fs-30:   34px;      /* woningdossier-prijs, grote-tegel-nummer */
  --lfk-fs-34:   38.53px;   /* woningdossier-adres */
  --lfk-fs-36:   40.8px;    /* paginakop (h1) */
  --lfk-fs-40:   45.33px;   /* grote paginakop (dashboard) */
  --font-display: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Century Gothic", "Segoe UI", sans-serif;

  /* --- Knopmaat in de documentenlijst (Berekeningen & offertes) --------
     Eén bron voor drie dingen die op elkaar moeten passen: de knopbreedte
     zelf, de actiekolom van de tabel (2 x knop + gap) en de knop "Digitale
     handtekening" eronder (idem). Hier wijzigen = alles blijft uitlijnen. */
  --lfk-ber-knop:     150px;
  --lfk-ber-knop-gap: 10px;
}

/* --- Basis / schil ------------------------------------------------------ */

body.lfk-body {
  margin: 0;
  background: var(--lf-paper);
  font-family: var(--font-body);
  color: var(--lf-body);
  font-size: var(--lfk-fs-15);
  line-height: 1.62;
}
/* main.css geeft <main> een max-width van 1100px + padding; de nieuwe schil
   beheert zijn eigen breedtes (header/footer volle breedte, content 1140). */
.lfk-main {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.lfk-body a { color: var(--lf-brass); text-decoration: none; }
.lfk-body a:hover { color: var(--lf-brown); }

/* --- Reset van generieke main.css-element-regels binnen de nieuwe schil ---
   main.css stylet kale elementen (input[type=…], select, textarea, table,
   thead) met witte kaarten en afgeronde hoeken; binnen .lfk-main geldt de
   LiberForte-basis: underline-inputs, vierkant, geen kaartachtergronden. */
.lfk-main input[type="text"], .lfk-main input[type="email"],
.lfk-main input[type="password"], .lfk-main input[type="tel"],
.lfk-main input[type="number"], .lfk-main input[type="url"],
.lfk-main input[type="date"], .lfk-main input[type="time"],
.lfk-main select, .lfk-main textarea {
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lf-card-border);
  border-radius: 0;
  padding: 6px 0;
  width: 100%;
  box-sizing: border-box;
  transition: none;
  outline: none;
}
.lfk-main input:focus, .lfk-main select:focus, .lfk-main textarea:focus {
  outline: none;
  border-color: var(--lf-brass);
}
.lfk-main input::placeholder, .lfk-main textarea::placeholder {
  color: var(--lf-taupe);
  opacity: 0.7;
}
/* main.css dwingt elk formulier in een kolom van max 480px; binnen de
   nieuwe schil bepalen componenten zelf hun lay-out. */
.lfk-main form {
  display: block;
  flex-direction: row;
  max-width: none;
  gap: normal;
}
.lfk-main label {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--lf-body);
}
.lfk-main table {
  font-family: var(--font-body);
  background: none;
  border: none;
  border-radius: 0;
  margin-top: 0;
  overflow: visible;
}
.lfk-main thead { background: none; }
.lfk-main thead th {
  border-bottom: none;
  text-transform: none;
  letter-spacing: normal;
  color: var(--lf-body);
  font-size: inherit;
  font-weight: 400;
  padding: 0;
}
/* Omkaderde invoervelden (rekenmodule, bedragen): 110px, rechts uitgelijnd. */
.lfk-main input.lfk-invoer {
  width: 110px;
  flex: none;
  border: 1px solid var(--lf-card-border);
  background: var(--lf-paper);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
}
.lfk-main input.lfk-invoer:focus { border-color: var(--lf-brass); }
.lfk-main input.lfk-invoer-breed { width: 100%; display: block; margin-top: 6px; }
.lfk-main select.lfk-select {
  border: 1px solid var(--lf-card-border);
  background: var(--lf-paper);
  font-size: var(--lfk-fs-13);
  padding: 8px 10px;
  width: auto;
  max-width: 380px;   /* 320 -> 380: uitgangspunt-select blijft op één regel */
}
.lfk-main select.lfk-select.lfk-rm-basistekst { border: none; padding-left: 0; }
.lfk-main textarea.lfk-textarea {
  border: 1px solid var(--lf-rule);
  padding: 14px 16px;
  line-height: 1.6;
}
.lfk-main textarea.lfk-textarea:focus { border-color: var(--lf-brass); }

.lfk-header { border-bottom: 1px solid var(--lf-rule); background: var(--lf-paper); }
/* Variant F (27-07-2026): logo op kaphoogte-G (45,62px, −2,7px optische
   correctie), nav/taal/uitloggen top-uitgelijnd en 20px naar beneden —
   plaatsing 1-op-1 uit de goedgekeurde mockup
   (_design_handoff/mockups/dashboard_variant_F.html). */
.lfk-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px 16px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  box-sizing: border-box;
}
.lfk-header-logo { height: 45.62px; margin-top: -2.7px; flex: none; display: block; }
.lfk-nav {
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
  margin-top: 20px;   /* Variant F: tabs zakken tot onder de kap van het logo */
}
.lfk-navtab {
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
  white-space: nowrap;
}
.lfk-navtab:hover { color: var(--lf-brown); }
.lfk-navtab.is-actief {
  color: var(--lf-ink);
  border-bottom: 1px solid var(--lf-brass);
  padding-bottom: 3px;
}
.lfk-navtab.is-actief:hover { color: var(--lf-ink); }
.lfk-taal {
  flex: none;
  white-space: nowrap;
  margin-top: 20px;   /* Variant F */
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-taal a { color: var(--lf-taupe); }
.lfk-taal a.is-inactief { color: var(--lf-rule); }
.lfk-taal a.is-inactief:hover { color: var(--lf-brass); }
.lfk-uitloggen {
  flex: none;
  white-space: nowrap;
  margin-top: 20px;   /* Variant F */
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-brass);
}

/* Variant F: content benut meer van de ~1280px-viewport (1140 -> 1200). */
.lfk-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 0;
  box-sizing: border-box;
}
.lfk-content-dashboard { padding-top: 64px; }
.lfk-content-terug { padding-top: 40px; }   /* pagina's die met een terug-link beginnen */
/* Smalle pagina's (bezichtiging + checklist): de SCHIL blijft 1200 breed —
   `margin: 0 auto` hierboven zou een smallere schil in het midden van het
   scherm zetten, en dan begint de hele pagina rechts van het logo in plaats
   van eronder (gemeten 2026-08-03). Alleen de KOLOM binnenin is smal, en die
   staat links. Zelfde aanpak als .lfk-kaal-kolom hieronder.
   `.lfk-main` staat er bewust voor: regel 117 hierboven zet
   `.lfk-main form { max-width: none }`, en die selector (0,1,1) wint van een
   kale class-selector (0,1,0) — zonder deze extra specificiteit bleef het
   bezichtigingsformulier gewoon 1120px breed (gemeten 2026-08-03). */
.lfk-main .lfk-content-smal > * { max-width: 760px; margin-right: auto; }
/* Kale-header-pagina's (auth/fout): volle 1200-schil zodat de content links
   exact onder de "L" van het headerlogo begint; de kolom zelf blijft smal. */
.lfk-kaal-kolom { max-width: 640px; }

.lfk-footer {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 24px 40px 44px;
  border-top: 1px solid var(--lf-rule);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--lfk-fs-12);
  color: var(--lf-taupe);
  box-sizing: border-box;
}
.lfk-footer-dashboard { margin-top: 72px; }

/* --- Typografische bouwstenen ------------------------------------------- */

.lfk-eyebrow {
  margin: 0;
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
.lfk-h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-36);
  line-height: 1.15;
  color: var(--lf-ink);
}
.lfk-h1-groot { font-size: var(--lfk-fs-40); }
.lfk-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-22);
  color: var(--lf-ink);
}
/* Kop binnen een blok of dialoog (Funda-koppelen / "Niet op Funda"). Werd
   in de templates al gebruikt maar bestond in geen enkel CSS-bestand, dus
   die twee dialoogkoppen vielen terug op de browserstandaard: vet,
   schreefloos, met een eigen marge — precies wat de rest van de klantkant
   niet doet. Zelfde trap als .lfk-stap-titel. */
.lfk-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-18);
  line-height: 1.25;
  color: var(--lf-ink);
}
.lfk-intro { margin: 16px 0 0; max-width: 560px; color: var(--lf-brown); }
.lfk-sectie-uitleg { margin: 10px 0 0; max-width: 620px; font-size: var(--lfk-fs-14); color: var(--lf-taupe); }
.lfk-terug {
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
.lfk-terug-rij { margin-top: 36px; }
.lfk-num { font-variant-numeric: tabular-nums; }

/* --- Knoppen ------------------------------------------------------------ */
/* Primair = ink gevuld; secundair = brass outline. Vaste breedtes per
   context via modifier-classes. Overschrijft .btn uit main.css. */

.lfk-main .btn,
.lfk-btn {
  display: inline-block;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: normal;
  min-width: 0;
  box-sizing: border-box;
  transition: none;
  transform: none;
}
.lfk-main .btn:hover { transform: none; box-shadow: none; }
.lfk-main .btn-primary,
.lfk-btn-primair {
  background: var(--lf-ink);
  color: #FBF9F5;
  padding: 9px 18px;
}
.lfk-main .btn-primary:hover,
.lfk-btn-primair:hover { background: var(--lf-brown); color: #FBF9F5; }
.lfk-main .btn-secondary,
.lfk-btn-secundair {
  border: 1px solid var(--lf-brass);
  color: var(--lf-brass);
  background: transparent;
  padding: 8px 16px;
}
.lfk-main .btn-secondary:hover,
.lfk-btn-secundair:hover { color: var(--lf-brown); border-color: var(--lf-brown); background: transparent; }
/* Knop die zijn eigen breedte bepaalt, met ruime lucht om de tekst. De vaste
   maten hieronder passen niet bij elk label: "DEADLINE REGISTREREN" is bij
   11,9px met 0,16em spatiëring al ~181px breed en stond in een 170px-knop
   krap tegen de randen. Selector met .lfk-main erbij zodat de padding het
   wint van .lfk-btn-secundair, ongeacht de volgorde in dit bestand. */
.lfk-main .lfk-btn-ruim,
.lfk-btn-ruim { width: auto; padding: 11px 30px; }
.lfk-btn-170 { width: 170px; padding-left: 0; padding-right: 0; }
.lfk-btn-160 { width: 160px; padding-left: 0; padding-right: 0; }
.lfk-btn-150 { width: 150px; padding-left: 0; padding-right: 0; }
.lfk-btn-120 { width: 120px; padding-left: 0; padding-right: 0; }
.lfk-btn-220 { width: 220px; padding-left: 0; padding-right: 0; }

/* Kruisje (verwijderen) — typografische ✕ in vaste 22px-kolom. */
.lfk-main .btn-kruisje {
  background: none;
  border: none;
  color: var(--lf-taupe);
  font-size: var(--lfk-fs-14);
  line-height: 1;
  padding: 4px 0;
  width: 22px;
  text-align: center;
  flex: none;
  cursor: pointer;
}
.lfk-main .btn-kruisje:hover { color: var(--lf-brown); }
/* Uitgeschakeld kruisje: het document is al beoordeeld. Geen `disabled` in
   de markup — die vangt geen tik op en dan hoort de klant de reden niet. */
.lfk-main .btn-kruisje-uit { color: var(--lf-rule); cursor: not-allowed; }
.lfk-main .btn-kruisje-uit:hover { color: var(--lf-rule); }

/* Icoon in een documentknop (nu alleen het oog bij "bekijken").
   Op DESKTOP staat er een tekstknop van 170px en verandert er niets; het
   icoon komt pas in de mobiele media query tevoorschijn. */
.lfk-main .docrij-icoon { display: none; }

/* --- Kaarten & omkaderingen -------------------------------------------- */

.lfk-box { border: 1px solid var(--lf-rule); background: var(--lf-paper); }
.lfk-box-pad { padding: 26px 30px 30px; }

/* Tan adviseur-/infokaart: vierkante hoeken. */
.lfk-tan {
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 0;
}
/* Tan info-/waarschuwingskaart: ENIGE afgeronde element (8px). */
.lfk-tan-kaart {
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 8px;
  padding: 14px 18px;
}
.lfk-tan-kaart-label {
  margin: 0;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
.lfk-tan-kaart p { margin: 6px 0 0; font-size: var(--lfk-fs-13-5); color: var(--lf-body); }

/* Flash-meldingen in tan-kaartstijl. */
.lfk-body .flash-messages { max-width: 1200px; margin: 24px auto 0; padding: 0 40px; box-sizing: border-box; }
.lfk-body .flash,
.lfk-body .flash.success, .lfk-body .flash.error,
.lfk-body .flash.warning, .lfk-body .flash.info {
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 8px;
  color: var(--lf-body);
  font-size: var(--lfk-fs-13-5);
  padding: 12px 16px;
  margin: 0 0 10px;
  box-shadow: none;
}

/* Adviseurblok. */
.lfk-adviseur {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.lfk-adviseur-label {
  margin: 0;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
.lfk-adviseur-naam {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: var(--lfk-fs-20);
  color: var(--lf-ink);
}
.lfk-adviseur p { margin: 4px 0 0; font-size: var(--lfk-fs-14); }
.lfk-adviseur p.lfk-adviseur-tel { margin-top: 10px; }
.lfk-adviseur-wijziging { margin-top: 12px !important; font-size: var(--lfk-fs-11-5) !important; color: var(--lf-taupe); }

/* --- Dashboard ---------------------------------------------------------- */

.lfk-dash-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.lfk-dash-grid-2 { grid-template-columns: 1fr 1fr; }
.lfk-dash-rij2 { margin-top: 28px; }
.lfk-tegel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lf-rule);
  padding: 26px 28px 22px;
  color: var(--lf-body);
  background: var(--lf-paper);
  box-sizing: border-box;
}
a.lfk-tegel:hover { border-color: var(--lf-card-border); color: var(--lf-body); }
.lfk-tegel-kop { display: flex; align-items: baseline; gap: 14px; }
.lfk-tegel-nr { font-family: var(--font-display); font-size: var(--lfk-fs-26); color: var(--lf-brass); }
.lfk-tegel-titel { font-family: var(--font-display); font-size: var(--lfk-fs-20); color: var(--lf-ink); }
.lfk-tegel-tekst { margin-top: 12px; font-size: var(--lfk-fs-14); color: var(--lf-taupe); line-height: 1.55; }
.lfk-tegel-status { margin-top: auto; padding-top: 18px; font-size: var(--lfk-fs-12-5); color: var(--lf-brown); }
.lfk-tegel-open {
  margin-top: 14px;
  font-weight: 600;
  font-size: var(--lfk-fs-10-5);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-brass);
}
/* Groot-formaat (scenario 'alleen berekeningen': 2 tegels van 50%). */
.lfk-tegel-groot { padding: 40px 38px 32px; min-height: 280px; }
.lfk-tegel-groot .lfk-tegel-kop { gap: 16px; }
.lfk-tegel-groot .lfk-tegel-nr { font-size: var(--lfk-fs-30); }
.lfk-tegel-groot .lfk-tegel-titel { font-size: var(--lfk-fs-24); }
.lfk-tegel-groot .lfk-tegel-tekst { font-size: var(--lfk-fs-14-5); line-height: 1.6; max-width: 400px; }
.lfk-tegel-groot .lfk-tegel-status { padding-top: 24px; }
.lfk-tegel-groot .lfk-tegel-open { margin-top: 18px; }
.lfk-adviseur-tegel { padding: 26px 28px; }
.lfk-adviseur-tegel-groot { padding: 40px 38px; min-height: 280px; }
.lfk-adviseur-tegel-groot .lfk-adviseur-naam { margin-top: 16px; font-size: var(--lfk-fs-24); }
.lfk-adviseur-tegel-groot p.lfk-adviseur-tel { margin-top: 12px; }

/* Voortgangsblok. */
.lfk-voortgang {
  border: 1px solid var(--lf-rule);
  padding: 26px 30px 30px;
  box-sizing: border-box;
}
.lfk-voortgang-span2 { grid-column: span 2; }
.lfk-voortgang-stappen {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* Voorcheckfase: twee stadia in plaats van vier. Elk de halve breedte, en de
   inhoud gecentreerd binnen die helft — met twee stappen is links uitlijnen in
   een halve kolom een scheve indeling, gecentreerd staat het in balans. Het
   raster hierboven staat vast op vier kolommen; zonder deze regel werden de
   twee stappen in de linkerhelft samengedrukt met rechts een leeg gat. */
.lfk-voortgang-stappen-2 { grid-template-columns: repeat(2, 1fr); }
.lfk-voortgang-stappen-2 .lfk-vstap { text-align: center; }
.lfk-vstap-kop { display: flex; align-items: center; gap: 12px; }
.lfk-vstap-nr { font-family: var(--font-display); font-size: var(--lfk-fs-19); color: var(--lf-taupe); }
.lfk-vstap-lijn { flex: 1; height: 1px; background: var(--lf-rule); }
.lfk-vstap-label { margin: 8px 0 0; font-size: var(--lfk-fs-12-5); line-height: 1.45; color: var(--lf-taupe); }
.lfk-vstap.is-actief .lfk-vstap-nr,
.lfk-vstap.is-actief .lfk-vstap-label { color: var(--lf-ink); }
.lfk-vstap.is-actief .lfk-vstap-lijn { background: var(--lf-brass); }
.lfk-voortgang-wijziging { margin: 22px 0 0; font-size: var(--lfk-fs-12); color: var(--lf-taupe); }
/* Volle-breedte-variant: stappen op één regel, labels naast de nummers. */
.lfk-voortgang-breed .lfk-voortgang-stappen {
  display: flex;
  gap: 18px;
  align-items: center;
}
.lfk-voortgang-breed .lfk-vstap {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.lfk-voortgang-breed .lfk-vstap-kop { display: contents; }
.lfk-voortgang-breed .lfk-vstap-label { margin: 0; }
.lfk-voortgang-breed .lfk-vstap-lijn { display: none; }
.lfk-voortgang-breed .lfk-vstap-tussenlijn { flex: 1; height: 1px; background: var(--lf-rule); }
.lfk-voortgang-breed .lfk-vstap-tussenlijn.is-actief { background: var(--lf-brass); }

/* --- Documentenpagina --------------------------------------------------- */

.lfk-doc-top {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
  align-items: stretch;
}
.lfk-doc-top-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.lfk-doc-logo { height: 52px; display: block; }
.lfk-doc-top-kop { margin-top: 24px; }
.lfk-doc-adviseur { padding: 22px 26px; }
.lfk-doc-adviseur .lfk-adviseur-naam { margin-top: 12px; font-size: var(--lfk-fs-19); }
.lfk-doc-adviseur p { margin: 3px 0 0; font-size: var(--lfk-fs-13-5); }
.lfk-doc-adviseur p.lfk-adviseur-tel { margin-top: 8px; }

.lfk-doc-statusbalk { margin-top: 28px; border: 1px solid var(--lf-rule); padding: 26px 30px 28px; }
.lfk-doc-statusbalk .lfk-voortgang-stappen { margin-top: 0; }

/* Documententabel (grid 1fr 190px 120px 220px). De .docrij-markup wordt óók
   door klantportaal.js gegenereerd — classnamen hier niet wijzigen. */
.lfk-doc-tabel { margin-top: 28px; border: 1px solid var(--lf-rule); padding: 8px 30px 10px; }
.lfk-main .docrij-kop {
  display: grid;
  grid-template-columns: 1fr 190px 120px 220px;
  gap: 16px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--lf-ink);
  margin: 0;
}
.lfk-main .docrij-kop span {
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-main .docrijen { display: block; border: none; background: none; }
.lfk-main .docrij {
  display: grid;
  grid-template-columns: 1fr 190px 120px 220px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--lf-rule);
  background: none;
  border-radius: 0;
  margin: 0;
}
.lfk-main .docrijen .docrij:last-child { border-bottom: none; }

/* ── De documentgroepen (blok 8, punt 3) ──────────────────────────────
   Op DESKTOP verandert er niets: de groep verdwijnt uit de indeling
   (`display: contents`), de kop is verborgen, en de lijst blijft één
   doorlopende reeks rijen. Alleen de mobiele stijl gebruikt de scheiding —
   daar vroeg Ross erom.

   Een groep zonder rijen is weg. Dat staat in CSS en niet in JavaScript: de
   groepen worden alle drie gerenderd zodat de JS een rij ergens heen kan
   verplaatsen, en zo is er niets bij te houden dat uit de pas kan lopen. */
.lfk-main .docgroep { display: contents; }
.lfk-main .docgroep-kop { display: none; }
.lfk-main .docgroep:not(:has(.docrij)) { display: none; }

/* `:last-child` telt binnen de GROEP, niet binnen de lijst. Zonder deze regel
   verliest de laatste rij van elke groep zijn scheidingslijn en valt er op
   desktop een streep weg op elke groepsgrens. Een groep met een latere groep
   die rijen bevat, houdt hem dus. */
.lfk-main .docgroep:has(~ .docgroep .docrij) .docrij:last-child {
  border-bottom: 1px solid var(--lf-rule);
}
.lfk-main .docrij-open, .lfk-main .docrij-klaar,
.lfk-main .docrij-status-wacht, .lfk-main .docrij-status-afgewezen,
.lfk-main .docrij-status-wacht-op-akkoord, .lfk-main .docrij-status-ontvangen {
  background: none;
}
.lfk-main .docrij-cel { min-width: 0; }
.lfk-main .docrij-titel {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--lfk-fs-15);
  color: var(--lf-ink);
  line-height: 1.45;
}
.lfk-main .docrij-vinkje { display: none; }  /* ✓ staat in de statuskolom */
.lfk-main .docrij-statuspill {
  display: inline;
  background: none;
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lfk-main .docrij-statuspill-ontvangen { color: var(--lf-ink); }
.lfk-main .docrij-statuspill-ontvangen::before { content: "✓ "; }
/* Eigen kleur, niet de taupe van "niet van toepassing" — zie --lf-wachtend
   onderaan dit bestand. De regel staat hier omdat de hele statuspil-lijst
   hier staat; de KLEUR staat maar op één plek, in dat blok. */
.lfk-main .docrij-statuspill-wacht-op-akkoord { color: var(--lf-wachtend); }
.lfk-main .docrij-statuspill-wacht { color: var(--lf-brass); }
.lfk-main .docrij-statuspill-afgewezen { color: var(--lf-brass); }
.lfk-main .docrij-cel-datum { font-size: var(--lfk-fs-13); color: var(--lf-taupe); font-variant-numeric: tabular-nums; }
.lfk-main .docrij-acties {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
/* Downloaden = brass outline 170px; Uploaden = ink gevuld 170px.
   Upload-rijen krijgen een 32px-spacer zodat alle knoppen exact
   onder elkaar uitlijnen (170+10+22 = 170+32). */
.lfk-main .docrij-acties .btn,
.lfk-main .docrij-acties .upload-knop {
  width: 170px;
  padding-left: 0;
  padding-right: 0;
}
.lfk-main .docrij-acties .btn-secondary { padding-top: 8px; padding-bottom: 8px; }
.lfk-main .docrij-acties .upload-knop { padding-top: 9px; padding-bottom: 9px; }
/* Spacer als margin (een ::after-flex-item bleek door de clearfix in
   main.css niet mee te doen in de breedte). */
.lfk-main .docrij-acties .upload-form {
  display: flex;
  align-items: center;
  margin-right: 32px;
}
.lfk-main .docrij-acties .delete-form { display: flex; }
/* Gekoppeld ondertekendocument: die rij heeft er twee acties bij
   (Ondertekenen en Uploaden naast Downloaden). Naast elkaar worden dat
   3 × 170 + 2 × 10 = 550px in een kolom van 220px — de knoppen liepen dan
   het scherm uit. Ze gaan daarom ONDER elkaar, rechts uitgelijnd.

   De 32px die de upload-vorm anders als spacer meedraagt zit hier op de cel
   zelf; zo staat de rechterrand van álle knoppen op dezelfde plek en houden
   ze de linkerlijn van de andere rijen (kolomrand − 202 = 170 + 32). */
.lfk-main .docrij-ondertekendoc .docrij-acties {
  flex-direction: column;
  align-items: flex-end;
  padding-right: 32px;
}
.lfk-main .docrij-ondertekendoc .docrij-acties .upload-form { margin-right: 0; }
.lfk-main .upload-icoon { display: none; }
.lfk-main .docrij .upload-progress { grid-column: 1 / -1; }

/* De afwijzingskaart onder de rij is vervallen: de reden zit nu achter
   het informatie-icoontje in de statuskolom (zie onderaan dit bestand). */

/* Stel-secties. */
.lfk-main .doc-sectie-titel {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-22);
  color: var(--lf-ink);
}

/* Overige uploads. */
.lfk-overig {
  margin-top: 28px;
  border: 1px solid var(--lf-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 26px 30px 30px;
}
.lfk-main .overige-upload-rij {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.lfk-main .overige-upload-naam { font-weight: 400; font-size: var(--lfk-fs-15); }
/* Lange waarden (17-09-2026): de naam stond op één regel en werd met "…"
   afgekapt (main.css), maar staat nergens anders voor de klant leesbaar
   (alleen als tabtitel en downloadnaam). Dus afbreken, ook midden in een
   woord zonder spaties. */
.lfk-main .overige-upload-naam { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.lfk-main .overige-upload-naam .docrij-vinkje {
  display: inline;
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  color: var(--lf-ink);
  font-size: var(--lfk-fs-14);
  margin-right: 4px;
}
.lfk-main .overige-uploads-lijst { list-style: none; margin: 20px 0 0; padding: 0; }
.lfk-main ul.overige-uploads-lijst .overige-upload-rij {
  display: grid;
  grid-template-columns: 1fr 120px 220px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border: none;
  border-top: 1px solid var(--lf-rule);
  background: none;
  border-radius: 0;
}
.lfk-main .overige-uploads-lijst .overige-upload-rij:last-child { border-bottom: 1px solid var(--lf-rule); }
.lfk-main .overige-upload-naam { color: var(--lf-ink); }
.lfk-main .overige-upload-naam .docrij-vinkje { display: inline; color: var(--lf-ink); }
.lfk-main .overige-upload-datum {
  font-size: var(--lfk-fs-13);
  color: var(--lf-taupe);
  font-variant-numeric: tabular-nums;
}
.lfk-main .overige-upload-meta {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.lfk-main .overige-upload-meta .btn { width: 170px; padding-left: 0; padding-right: 0; }
.lfk-overig-actie { margin-top: 20px; display: flex; align-items: center; gap: 18px; }
.lfk-overig-actie .upload-knop { padding: 10px 20px; }
.lfk-main .overige-uploads-teller { font-size: var(--lfk-fs-12); color: var(--lf-taupe); }
.lfk-main .overige-uploads-limiet { font-size: var(--lfk-fs-12); color: var(--lf-taupe); margin: 0; }

/* --- Tabellen-in-kader (berekeningen / documentrijen algemeen) ----------- */

.lfk-tabelkader { border: 1px solid var(--lf-rule); padding: 8px 30px 10px; }
.lfk-tabel-kop {
  display: grid;
  gap: 16px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--lf-ink);
}
.lfk-tabel-kop span {
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-tabel-rij {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--lf-rule);
}
.lfk-tabel-rij:last-child { border-bottom: none; }
.lfk-status-label {
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lfk-status-brass { color: var(--lf-brass); }
.lfk-status-taupe { color: var(--lf-taupe); }
.lfk-status-ink { color: var(--lf-ink); }

/* Sectiemarges. */
/* .lfk-mt-8 hoort bij deze reeks maar ontbrak; abonnement/activatie.html
   gebruikte hem al voor de witruimte tussen de alinea's van de
   activatie-uitleg, die daardoor zonder tussenruimte aan elkaar plakten. */
.lfk-mt-8  { margin-top: 8px; }
.lfk-mt-28 { margin-top: 28px; }
.lfk-mt-36 { margin-top: 36px; }

/* --- Berekeningen & offertes -------------------------------------------- */

.lfk-rm-sectie { padding: 26px 30px 34px; }
.lfk-rm-basistekst { border: none; padding-left: 0; }
.lfk-rm-uitleg { max-width: 480px; margin-top: 8px; }
.lfk-tabel-leeg { padding: 16px 0; }
.lfk-ht-eerst-slot1 { margin-top: 14px; }

/* Statuskolom 200 -> 230: het vergrote "Actie nodig — afgewezen"-label
   (Variant F) past anders niet meer; de extra ruimte komt uit de 1fr-kolom
   (content is met de verbreding naar 1200px ook 60px breder geworden).
   De actiekolom is 310px = 2 x --lfk-ber-knop + --lfk-ber-knop-gap. */
.lfk-ber-tabel .lfk-tabel-kop,
.lfk-ber-tabel .lfk-tabel-rij { grid-template-columns: 130px minmax(0, 1fr) 230px 310px; }   /* minmax: een lange documentnaam duwde de knoppen buiten beeld (+65 px op 1280, 17-09-2026); het tabletblok had het al */
.lfk-ber-datum { font-size: var(--lfk-fs-13); color: var(--lf-taupe); font-variant-numeric: tabular-nums; }
.lfk-ber-naam { color: var(--lf-ink); }
.lfk-ber-grootte { font-size: var(--lfk-fs-12); color: var(--lf-taupe); }

/* ─── Knoppen in de documentenlijst ───────────────────────────────────
   ALLE knoppen dezelfde stijl (.lfk-btn-secundair: lichte achtergrond met
   randje) en dezelfde breedte — 150px, ruim genoeg voor het langste label
   "ONDERTEKENEN" (~108px bij 11,9px + 0,16em letterspatiëring).

   VAST RASTER, geen flex-rij. Het aantal knoppen per rij varieert nu
   (twee, of één als ondertekenen voor dat document uitstaat), en met een
   flex-rij zou "Downloaden" per rij verspringen. Twee vaste kolommen — met
   een onzichtbare plaatshouder waar de knop ontbreekt — houden de kolommen
   op hun plek bij ELKE combinatie en bij elk aantal documenten. Dat is
   dezelfde oplossing als in beheer ("een lege .doc-cel houdt de kolom op
   zijn plek") en het maakt de breedte van .lfk-ht-knop hieronder een
   simpele, altijd-kloppende rekensom in plaats van een aanname over wat er
   toevallig in de bovenste rij staat. */
.lfk-ber-acties {
  display: grid;
  grid-template-columns: repeat(2, var(--lfk-ber-knop));
  gap: var(--lfk-ber-knop-gap);
  justify-content: end;
}
.lfk-ber-knop { width: 100%; padding-left: 0; padding-right: 0; }
.lfk-ber-knop-leeg { display: block; }
.lfk-ber-afwijzing { grid-column: 1 / -1; margin-top: -2px; }
button.lfk-status-knop {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

/* Handtekeningen. */
.lfk-ht-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lfk-ht-label {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-ht-kader {
  height: 120px;
  border: 1px solid var(--lf-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lfk-ht-kader-leeg { border: 1px dashed var(--lf-card-border); }
.lfk-ht-kader img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lfk-ht-leegtekst { font-size: var(--lfk-fs-13); color: var(--lf-taupe); }
.lfk-ht-acties { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* "Foto maken" — knop die `capture="environment"` op de file-input zet en
   daarmee op iOS direct de camera opent. Alleen zinvol op een apparaat mét
   camera; op desktop is `capture` een no-op en zou de knop simpelweg de
   gewone bestandskiezer openen — twee knoppen die hetzelfde doen. Vandaar
   standaard verborgen en alleen zichtbaar bij een grove aanwijzer (vinger).
   Zo blijft de desktopweergave per constructie ongewijzigd. */
.lfk-ht-camera { display: none; }
@media (pointer: coarse) {
  .lfk-ht-camera { display: inline-block; }
}
.lfk-ht-verwijder { font-size: var(--lfk-fs-12); color: var(--lf-taupe); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body); }
.lfk-ht-verwijder:hover { color: var(--lf-brown); }

/* Rekenmodule. */
/* Vierde testronde, deel D2/D3: beide kolommen even hoog (stretch), en in
   het linkerblok zakt de disclaimer naar de onderkant — zo eindigt links op
   dezelfde lijn als rechts ("Netto per maand" van het omgekeerd rekenen).
   De 26px boven de disclaimer blijft de minimale afstand. Gemeten: de overige
   onderdelen van het linkerblok staan op 1280 en 1024 px op dezelfde pixel. */
.lfk-rm-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: stretch; }
.lfk-rm-grid > div:first-child { display: flex; flex-direction: column; }
.lfk-rm-basisrij { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lfk-rm-basislabel {
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-select,
.lfk-main select.rekenmodule-input {
  border: 1px solid var(--lf-card-border);
  border-radius: 0;
  background: var(--lf-paper);
  font-family: var(--font-body);
  font-size: var(--lfk-fs-13);
  color: var(--lf-ink);
  padding: 8px 10px;
  outline: none;
  max-width: 380px;   /* 320 -> 380: uitgangspunt-select blijft op één regel */
}
.lfk-rm-sliderrij { margin-top: 18px; display: flex; gap: 16px; align-items: center; }
.lfk-rm-sliderrij:first-of-type { margin-top: 28px; }
.lfk-rm-sliderlabel { width: 130px; flex: none; font-size: var(--lfk-fs-13-5); color: var(--lf-brown); }
.lfk-rm-sliderrij input[type=range] { flex: 1; accent-color: var(--lf-brass); margin: 0; }
.lfk-invoer {
  width: 110px;
  flex: none;
  border: 1px solid var(--lf-card-border);
  border-radius: 0;
  background: var(--lf-paper);
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.lfk-invoer::-webkit-outer-spin-button,
.lfk-invoer::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lfk-invoer:focus { border-color: var(--lf-brass); }
.lfk-invoer-breed { width: 100%; display: block; margin-top: 6px; }

/* Financieringsopzet-tabel: 1fr 120px 26px, +/-/- buiten de bedragkolom. */
.lfk-rm-opzet { margin-top: 30px; }
.lfk-rm-opzetrij {
  display: grid;
  grid-template-columns: 1fr 120px 26px;
  gap: 0 8px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--lf-rule);
  font-size: var(--lfk-fs-13-5);
}
.lfk-rm-opzetrij:last-of-type { border-bottom: none; }
.lfk-rm-opzetrij .lfk-rm-bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.lfk-rm-opzetrij .lfk-rm-teken { color: var(--lf-taupe); text-align: right; }
.lfk-rm-totaal {
  border-top: 1.6px solid var(--lf-ink);
  border-bottom: none;
  padding: 10px 0 0;
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  /* dubbele rule: dunne lijn vlak boven de 1.6px-lijn */
  box-shadow: 0 -3px 0 -2px var(--lf-ink);
  margin-top: 2px;
}
.lfk-rm-disclaimer { margin: auto 0 0; padding-top: 26px; font-size: var(--lfk-fs-11); color: var(--lf-taupe); }

/* Rechterkolom: indicatie maandlast + omgekeerd rekenen. */
.lfk-rm-rechts { display: flex; flex-direction: column; gap: 22px; }
.lfk-rm-infocard { padding: 20px 22px 24px; }
.lfk-rm-infocard .lfk-eyebrow { letter-spacing: 0.3em; font-size: var(--lfk-fs-10); }
.lfk-rm-maandlastrij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lfk-rm-maandlastrij + .lfk-rm-maandlastrij {
  margin-top: 10px;
  border-top: 1px solid var(--lf-card-border);
  padding-top: 10px;
}
.lfk-rm-infocard .lfk-rm-maandlastrij:first-of-type { margin-top: 14px; }
.lfk-rm-maandlastrij span:first-child { font-size: var(--lfk-fs-13-5); color: var(--lf-brown); }
.lfk-rm-maandlastbedrag {
  font-family: var(--font-display);
  font-size: var(--lfk-fs-26);
  color: var(--lf-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.lfk-rm-maandlastbedrag.is-netto { color: var(--lf-brass); }
.lfk-rm-omgekeerd { border: 1px solid var(--lf-rule); padding: 20px 22px 24px; }
.lfk-rm-omgekeerd-uitleg { margin: 10px 0 0; font-size: var(--lfk-fs-13); color: var(--lf-taupe); }
/* align-items:end laat beide kolommen bodem-uitlijnen: breekt een langer
   label (bv. EN "Gross monthly payment") naar twee regels, dan zakt het
   invoerveld niet mee — de twee velden blijven in elke taal exact op één
   lijn. Het label zelf is de bodem van zijn cel, dus de inputs lijnen uit. */
.lfk-rm-omgekeerd-velden {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}
.lfk-veldlabel {
  display: block;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-rm-resultaten { margin-top: 16px; font-size: var(--lfk-fs-13-5); }
.lfk-rm-resultaatrij {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--lf-rule);
}
.lfk-rm-resultaatrij:last-child { border-bottom: none; }
.lfk-rm-resultaatrij .lfk-num { font-variant-numeric: tabular-nums; }
.lfk-rm-melding { margin-top: 14px; }

/* --- Aankoop: overzicht -------------------------------------------------- */

.lfk-aank-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.lfk-aank-invoer {
  margin-top: 32px;
  border: 1px solid var(--lf-rule);
  padding: 24px 30px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.lfk-aank-invoer .funda-form {
  flex: 1;
  display: flex;
  flex-direction: row;   /* main.css zet formulieren op column */
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.lfk-main input.lfk-invoer-lijn,
.lfk-invoer-lijn {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--lf-card-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  padding: 8px 2px;
  outline: none;
  box-sizing: border-box;
  min-width: 0;
}
.lfk-invoer-lijn::placeholder { color: var(--lf-taupe); opacity: 0.7; }
.lfk-invoer-lijn:focus { border-bottom-color: var(--lf-brass); }
.lfk-aank-handmatig {
  font-size: var(--lfk-fs-12-5);
  color: var(--lf-taupe);
  border-bottom: 1px solid var(--lf-rule);
  padding-bottom: 1px;
  white-space: nowrap;
}
.lfk-aank-handmatig:hover { color: var(--lf-brown); }
.lfk-aank-sectie { margin-top: 36px; }
.lfk-aank-sectie:first-of-type { margin-top: 44px; }
.lfk-aank-tabelkader { margin-top: 14px; border: 1px solid var(--lf-rule); padding: 8px 30px 10px; }

/* ─── Sectiekop met vergelijkknop rechts ──────────────────────────────
   De knop staat bij ELKE sectie, want de klant vinkt aan tijdens het
   scrollen en de enkele knop bovenaan was dan uit beeld. `align-items:
   baseline` legt de knoptekst op dezelfde lijn als de kop; `flex-end` zou
   hem laten zakken omdat de serif-kop hoger is dan de knop. */
.lfk-aank-sectiekop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.lfk-aank-sectiekop .lfk-h2 { margin: 0; }

/* Uit: gedimd en niet aanklikbaar. Aan: normale secundaire knop.
   Het pulseren is een rustige gloed op de rand — geen schaalsprong, die
   zou de sectiekop laten verspringen. */
.lfk-vergelijk-knop {
  flex: 0 0 auto;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lfk-vergelijk-knop[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--lf-taupe);
  border-color: var(--lf-rule);
}
.lfk-vergelijk-knop[disabled]:hover {
  color: var(--lf-taupe);
  border-color: var(--lf-rule);
}
.lfk-vergelijk-knop.is-actief { opacity: 1; }
.lfk-vergelijk-knop.is-pulserend { animation: lfk-vergelijk-puls 1.6s ease-out infinite; }
/* Uitdijende ring + warme vulling. De eerste versie (4px ring op 18%) was in
   de browser te subtiel om op te vallen; deze zet er een ring van 9px op 45%
   tegenover, plus een lichte brass-vulling en een donkerder rand op het
   hoogtepunt. Bewust GEEN schaalsprong: de knop staat in de sectiekop en
   mag die niet laten verspringen — de ring valt buiten de layout (box-shadow)
   en de vulling verandert alleen kleur, geen maat.
   Op 0% en 100% is de ring 0px breed en dus onzichtbaar, ongeacht de alfa;
   de lus sluit daardoor zonder zichtbare sprong. */
@keyframes lfk-vergelijk-puls {
  0% {
    box-shadow: 0 0 0 0 rgba(160, 120, 74, 0.45);
    background-color: rgba(160, 120, 74, 0.16);
    border-color: var(--lf-brown);
  }
  60% {
    box-shadow: 0 0 0 9px rgba(160, 120, 74, 0);
    background-color: rgba(160, 120, 74, 0);
    border-color: var(--lf-brass);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(160, 120, 74, 0);
    background-color: rgba(160, 120, 74, 0.16);
    border-color: var(--lf-brown);
  }
}
/* Systeemvoorkeur voor minder beweging: wel oplichten, niet pulseren. */
@media (prefers-reduced-motion: reduce) {
  .lfk-vergelijk-knop.is-pulserend { animation: none; }
  .lfk-vergelijk-knop { transition: none; }
}

@media (max-width: 720px) {
  .lfk-aank-sectiekop { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Woningen-tabel (herstijling van de bestaande <table>). */
.lfk-main .woningen-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: var(--lfk-fs-13-5);
}
.lfk-main .woningen-table th {
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
  text-align: left;
  background: none;
  padding: 12px 6px 10px 0;
  border-bottom: 1px solid var(--lf-ink);
}
.lfk-main .woningen-table td {
  padding: 14px 6px 14px 0;
  border-bottom: 1px solid var(--lf-rule);
  background: none;
  vertical-align: middle;
  color: var(--lf-body);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lfk-main .woningen-table tbody tr:last-child td { border-bottom: none; }
.lfk-main .woningen-table .clickable-cell { cursor: pointer; }
.lfk-main .woningen-table .clickable-cell:hover { background: none; }
.lfk-main .woning-adres-link { color: var(--lf-ink); font-size: var(--lfk-fs-15); }
.lfk-main .woning-adres-link:hover { color: var(--lf-brass); }
.lfk-main .woning-checkbox { accent-color: var(--lf-brass); margin: 0; }
.lfk-main .woning-thumb {
  width: 76px;
  height: 52px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.lfk-main .woning-thumb-leeg {
  width: 76px;
  height: 52px;
  border: 1px dashed var(--lf-rule);
  box-sizing: border-box;
  display: block;
}
.lfk-main .woning-plaats { color: var(--lf-brown); }
.lfk-main .woning-deadline {
  font-size: var(--lfk-fs-12-5);
  color: var(--lf-brown);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Kolombreedtes (design-grid 24/76/min155-1fr/90/95/44/205/110/56). */
.lfk-main .woningen-table .col-check  { width: 30px; }
.lfk-main .woningen-table .col-foto   { width: 88px; }
.lfk-main .woningen-table .col-adres  { width: auto; }
.lfk-main .woningen-table .col-plaats { width: 96px; }
.lfk-main .woningen-table .col-prijs  { width: 101px; }
.lfk-main .woningen-table .col-m2     { width: 50px; }
.lfk-main .woningen-table .col-status { width: 211px; }
/* 116 -> 134 (Variant F): de vergrote deadline "21-07-2026 12:00" werd
   anders op de tijd afgekapt; ruimte komt uit de auto-adreskolom. */
.lfk-main .woningen-table .col-extra  { width: 134px; }
.lfk-main .woningen-table .col-acties { width: 56px; }
.lfk-inline-form { display: inline; }

/* Status-stepper in tabelrijen. */
.lfk-main .status-steps {
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: 600;
  font-size: var(--lfk-fs-9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lfk-main .status-step { color: var(--lf-taupe); background: none; border: none; padding: 0; }
.lfk-main .status-step.step-done { color: var(--lf-brass); background: none; }
.lfk-main .status-arrow { color: var(--lf-rule); }

/* Rij-acties: ↗ (brass outline vierkantje 26px) + ✕. */
/* Alleen nog het kruisje: het doorschuif-pijltje (.btn-doorschuif) is per
   2026-08-03 uit het woningoverzicht verdwenen — de status verandert
   uitsluitend via het stappenplan op de woningpagina. */
.lfk-main .row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* --- Aankoop: woningdossier (detail) ------------------------------------ */

.lfk-wd-hero {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.lfk-wd-foto {
  border: 1px solid var(--lf-rule);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lfk-wd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lfk-wd-foto-leeg { font-size: var(--lfk-fs-13-5); color: var(--lf-taupe); }
.lfk-wd-info {
  border: 1px solid var(--lf-rule);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.lfk-wd-adres {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-34);
  line-height: 1.12;
  color: var(--lf-ink);
}
.lfk-wd-plaats { margin: 8px 0 0; font-size: var(--lfk-fs-14); color: var(--lf-taupe); }
/* Lange waarden (17-09-2026): een adres of plaats zonder spaties breekt midden
   in het woord af. `anywhere` alleen op deze twee: de kolommen van de hero
   rekenen op wat de knoppen en de stappenbalk minimaal nodig hebben (op 768 px
   gemeten), en een `minmax(0, …)` op de hele hero veranderde dat al bij
   gewone adressen. Zo telt alleen de adrestekst niet meer mee. */
.lfk-wd-adres, .lfk-wd-plaats { overflow-wrap: anywhere; }
.lfk-wd-prijs {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--lfk-fs-30);
  color: var(--lf-brass);
  font-variant-numeric: tabular-nums;
}
.lfk-wd-prijs .lfk-wd-kk { font-family: var(--font-body); font-size: var(--lfk-fs-13); color: var(--lf-taupe); }
.lfk-wd-stepper {
  margin-top: auto;
  padding-top: 24px;
}
.lfk-wd-stepper .status-steps { font-size: var(--lfk-fs-10); letter-spacing: 0.16em; gap: 10px; }
.lfk-wd-knoppen { margin-top: 18px; display: flex; gap: 12px; }

.lfk-wd-blok { margin-top: 28px; border: 1px solid var(--lf-rule); padding: 26px 30px 30px; }
.lfk-wd-kenmerken {
  margin-top: 20px;
  display: grid;
  /* minmax(0, …): een lange waarde breekt af binnen zijn kolom in plaats van
     de kolom en de pagina breder te maken (lange waarden, 17-09-2026;
     gemeten: bij gewone waarden 0 elementen anders). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.lfk-kenmerk {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lf-rule);
  font-size: var(--lfk-fs-13-5);
}
.lfk-kenmerk:nth-last-child(-n+3) { border-bottom: none; }
.lfk-kenmerk .lfk-kenmerk-label { color: var(--lf-taupe); }
/* min-width: 0: een lange waarde breekt af binnen de rij in plaats van de rij
   (en de pagina) breder te maken; het label houdt zijn breedte. */
.lfk-kenmerk .lfk-kenmerk-label { flex: 0 0 auto; }
.lfk-kenmerk .lfk-kenmerk-waarde { font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }

/* minmax(0,1fr): zonder de 0-ondergrens rekt de intrinsieke breedte van het
   makelaarformulier zijn kolom op en wordt het notitieblok smaller.
   Geen align-items:start — de blokken rekken tot gelijke HOOGTE en de
   Opslaan-knoppen lijnen onderaan uit (flex-kolom + margin-top:auto). */
.lfk-wd-2kol { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.lfk-wd-2kol > section { display: flex; flex-direction: column; }
.lfk-main .lfk-wd-2kol form { display: flex; flex-direction: column; flex: 1; }
.lfk-main .lfk-wd-2kol .lfk-form-actie { margin-top: auto; padding-top: 22px; }
.lfk-wd-2kol > section { border: 1px solid var(--lf-rule); padding: 26px 30px 30px; box-sizing: border-box; }
.lfk-wd-2kol > section.lfk-wd-notities { display: flex; flex-direction: column; }

/* Formulieren: underline-inputs met kleinkapitaal labels. */
/* align-items:end — zelfde principe als .lfk-rm-omgekeerd-velden: breekt een
   vergroot label (bv. "Naam makelaar rondleiding") naar twee regels, dan
   blijven de invoerlijnen van beide kolommen toch exact op één hoogte. */
.lfk-formgrid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: end; }
.lfk-veld { display: block; min-width: 0; }
.lfk-veld .lfk-veldlabel { letter-spacing: 0.2em; }
.lfk-veld input,
.lfk-invoer-onder {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--lf-card-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  padding: 6px 0;
  outline: none;
}
.lfk-veld input::placeholder { color: var(--lf-taupe); opacity: 0.7; }
.lfk-veld input:focus { border-bottom-color: var(--lf-brass); }
/* Keuzelijst in een veld (tijd per half uur): exact dezelfde onderlijn en
   maatvoering als een invoerveld, zodat hij naast een datumveld niet
   opvalt. `appearance:none` haalt de systeemopmaak weg; het pijltje komt
   uit een inline achtergrond-SVG (geen extern bestand — CSP-vriendelijk en
   het portaal laadt geen icoonset). */
.lfk-veld select.lfk-veld-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--lf-card-border);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236B6156' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 9px 6px;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
  padding: 6px 18px 6px 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.lfk-veld select.lfk-veld-select:focus { border-bottom-color: var(--lf-brass); }
.lfk-veld-mettel { display: flex; gap: 10px; align-items: flex-end; }
.lfk-veld-mettel input { flex: 1; }
.lfk-veld-mettel .link-tel { font-size: var(--lfk-fs-12); white-space: nowrap; padding-bottom: 6px; }
.lfk-form-actie { margin-top: 22px; }

.lfk-textarea {
  margin-top: 18px;
  flex: 1;
  min-height: 150px;
  width: 100%;
  border: 1px solid var(--lf-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  line-height: 1.6;
  color: var(--lf-ink);
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.lfk-textarea::placeholder { color: var(--lf-taupe); opacity: 0.7; }
.lfk-textarea:focus { border-color: var(--lf-brass); }

/* Stappenplan. */
/* Toelichting onder de kop: iets breder dan de standaard-sectieuitleg
   (620px) omdat het een lopende alinea is en geen korte hint, en met wat
   meer lucht naar de eerste stap. */
.lfk-stappen-uitleg { max-width: 780px; }
.lfk-stappen { margin-top: 24px; }
.lfk-stap {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lf-rule);
}
.lfk-stap:last-child { border-bottom: none; }
.lfk-stap-nr { font-family: var(--font-display); font-size: var(--lfk-fs-26); color: var(--lf-brass); }
.lfk-stap-titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lfk-fs-18);
  color: var(--lf-ink);
}
.lfk-stap-badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--lfk-fs-9-5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-brass);
  margin-left: 10px;
  /* Past de badge niet meer achter de titel, dan gaat hij als geheel naar
     de volgende regel — niet "✓" hier en "AFGEROND" daaronder (gemeten op
     320–375 px, 16-09-2026). */
  white-space: nowrap;
}
/* De actieve stap (Woning.actieve_stap, Ross 17-09-2026): waar de klant nu
   iets moet doen. Groter — nummer en naam één trede omhoog in de bestaande
   schaal — en onder de naam een streepje in brass dat rustig ademt: van
   gedimd en korter naar vol, in bijna drie seconden. Geen knipperen. Met
   "minder beweging" staat het streepje stil en vol. */
.lfk-stap-naam { position: relative; display: inline-block; }
.lfk-stap.is-actief .lfk-stap-nr { font-size: var(--lfk-fs-34); line-height: 1.1; }
.lfk-stap.is-actief .lfk-stap-titel { font-size: var(--lfk-fs-24); }
.lfk-stap.is-actief .lfk-stap-naam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--lf-brass);
  transform-origin: left center;
  animation: lfk-stap-streep 2.8s ease-in-out infinite;
}
@keyframes lfk-stap-streep {
  0%, 100% { opacity: 0.35; transform: scaleX(0.6); }
  50%      { opacity: 1;    transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lfk-stap.is-actief .lfk-stap-naam::after { animation: none; opacity: 1; transform: none; }
}
.lfk-stap-tekst { margin: 6px 0 0; font-size: var(--lfk-fs-13-5); color: var(--lf-taupe); }
/* Uitleg binnen een stap (waar let je op bij de bezichtiging): iets kleiner
   en rustiger dan de steptekst, met lucht erboven zodat het niet aan de
   actielink vastplakt. */
.lfk-stap-uitleg {
  margin: 12px 0 0;
  max-width: 660px;
  font-size: var(--lfk-fs-13);
  line-height: 1.7;
  color: var(--lf-taupe);
}
/* Openklap binnen een stap (<details>): de samenvatting ziet eruit als de
   actielink in stap 2, zodat beide stappen dezelfde methodiek uitstralen. */
.lfk-stap-openklap { margin-top: 8px; }
.lfk-stap-openklap-link {
  display: inline-block;
  cursor: pointer;
  font-size: var(--lfk-fs-13-5);
  color: var(--lf-brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.lfk-stap-openklap-link::-webkit-details-marker { display: none; }
.lfk-stap-openklap-link::marker { content: ""; }
.lfk-stap-openklap-link:hover { color: var(--lf-brown); }
.lfk-stap-openklap[open] .lfk-stap-openklap-link { margin-bottom: 4px; }
.lfk-stap-openklap-actie { margin-top: 20px; }
/* Stap 4, tweede keuze "Ik wil geen bod uitbrengen": een <button> in een
   eigen POST-formulier, opgemaakt als dezelfde link als de openklapregel
   erboven — twee gelijkwaardige keuzes onder elkaar. */
.lfk-stap-geenbod { margin: 10px 0 0; }
.lfk-stap-geenbod-knop {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
}
.lfk-stap-bodrij { margin-top: 14px; display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.lfk-stap-bodrij .lfk-veld input,
.lfk-stap-bodrij .lfk-veld select { width: auto; min-width: 130px; }
.lfk-stap-waarschuwing { margin-top: 16px; max-width: 560px; padding: 12px 16px; }
.lfk-stap-waarschuwing p { margin: 0; font-size: var(--lfk-fs-13); color: var(--lf-body); }

/* Documentrijen (woningdossier + berekeningen-documenten). */
.lfk-docdl-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--lf-rule);
}
.lfk-docdl-rij:first-of-type { margin-top: 16px; border-top: 1px solid var(--lf-rule); }
.lfk-docdl-rij span { color: var(--lf-ink); }
.lfk-docdl-rij .btn { justify-self: end; }

/* --- Aankoop: vergelijken ------------------------------------------------ */

.lfk-vgl-kader { margin-top: 32px; border: 1px solid var(--lf-rule); padding: 8px 30px 18px; }
.lfk-main .vergelijk-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: none;
  font-size: var(--lfk-fs-13-5);
}
.lfk-main .vergelijk-table th,
.lfk-main .vergelijk-table td {
  background: none;
  text-align: left;
  vertical-align: bottom;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--lf-rule);
  color: var(--lf-body);
  font-weight: 400;
}
.lfk-main .vergelijk-table thead tr:last-child th { border-bottom: 1px solid var(--lf-ink); padding-bottom: 14px; }
.lfk-main .vergelijk-table thead tr:first-child th { border-bottom: none; padding: 18px 16px 0 0; }
.lfk-main .vergelijk-table tbody tr:last-child td { border-bottom: none; }
.lfk-main .vergelijk-table td:first-child { color: var(--lf-taupe); }
.lfk-main .vergelijk-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.lfk-vgl-adres { font-family: var(--font-display); font-size: var(--lfk-fs-17); color: var(--lf-ink); font-weight: 400; }
.lfk-vgl-plaats { margin: 2px 0 0; font-size: var(--lfk-fs-12); color: var(--lf-taupe); font-weight: 400; }
.lfk-main .vergelijk-thumb {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--lf-rule);
  box-sizing: border-box;
  margin-bottom: 12px;
  border-radius: 0;
}
.lfk-vgl-thumb-leeg {
  display: block;
  width: 100%;
  height: 96px;
  border: 1px dashed var(--lf-rule);
  box-sizing: border-box;
  margin-bottom: 12px;
}
.lfk-main .vergelijk-table a.lfk-vgl-adres { color: var(--lf-ink); }
.lfk-main .vergelijk-table a.lfk-vgl-adres:hover { color: var(--lf-brass); }

/* --- Bezichtiging + checklist (smalle pagina's) -------------------------- */

.lfk-formkader { margin-top: 32px; border: 1px solid var(--lf-rule); padding: 30px 34px 34px; }
/* Uitleg bovenin een formulierkader (waar let je op bij de bezichtiging):
   rustige lopende alinea, met een scheidslijn naar de velden eronder. */
.lfk-formkader-uitleg {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--lf-rule);
  max-width: 640px;
  font-size: var(--lfk-fs-13);
  line-height: 1.7;
  color: var(--lf-taupe);
}
.lfk-form-2kol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lfk-radiovraag { margin-top: 28px; }
.lfk-radiovraag .lfk-veldlabel { margin: 0; }
.lfk-radio-rij { margin-top: 12px; display: flex; gap: 28px; }
.lfk-radio-optie { display: flex; gap: 8px; align-items: center; font-size: var(--lfk-fs-14); color: var(--lf-ink); }
.lfk-radio-optie input[type=radio] { accent-color: var(--lf-brass); margin: 0; }
.lfk-verbouw { margin-top: 26px; border-top: 1px solid var(--lf-rule); padding-top: 24px; }
.lfk-verbouw .lfk-textarea { margin-top: 10px; min-height: 0; flex: none; }
.lfk-budgetrij { margin-top: 20px; display: flex; gap: 16px; align-items: flex-end; }
.lfk-budgetrij .lfk-veld { flex: 1; }
.lfk-budgetrij .lfk-hint { font-size: var(--lfk-fs-12); color: var(--lf-taupe); padding-bottom: 8px; white-space: nowrap; }
.lfk-form-cta { margin-top: 30px; }

/* Checklist. */
.lfk-checklist-kader { margin-top: 32px; border: 1px solid var(--lf-rule); padding: 10px 34px 34px; }
.lfk-cl-vraag { padding: 24px 0; border-bottom: 1px solid var(--lf-rule); }
.lfk-cl-vraagtekst { margin: 0; font-size: var(--lfk-fs-15); color: var(--lf-ink); }
.lfk-cl-vraagnr { font-family: var(--font-display); color: var(--lf-brass); margin-right: 10px; }
.lfk-main .score-group { margin-top: 14px; display: flex; gap: 8px; }
.lfk-main .score-option { display: inline-flex; cursor: pointer; }
.lfk-main .score-option input { position: absolute; opacity: 0; pointer-events: none; }
.lfk-main .score-label {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-rule);
  font-size: var(--lfk-fs-13);
  color: var(--lf-brown);
  box-sizing: border-box;
  background: none;
  border-radius: 0;
}
.lfk-main .score-option:hover .score-label { border-color: var(--lf-card-border); }
.lfk-main .score-option input:checked + .score-label {
  background: var(--lf-ink);
  border-color: var(--lf-ink);
  color: #FBF9F5;
}
.lfk-main .score-option input:focus-visible + .score-label { border-color: var(--lf-brass); }
.lfk-cl-cta { margin-top: 24px; }
/* Stap 3 "Review": de vragen links, "Mijn notities" rechts in een kader van
   dezelfde stijl (Ross, 17-09-2026). De vragen hadden 760 px terwijl de
   knoppen er een derde van gebruikten; het raster neemt nu de volle kolom van
   de pagina en het vragenkader wordt smaller. `.lfk-main .lfk-content-smal >`
   ervoor: die regel zet elk kind op 760 px (zie boven). Tot 960 px staan ze
   onder elkaar — daar is naast elkaar te krap (gemeten op 768). */
.lfk-main .lfk-content-smal > .lfk-review-form { max-width: none; }
.lfk-review-raster {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.lfk-review-raster > .lfk-checklist-kader { margin-top: 0; }
/* De opslaanknop staat nu onder beide kaders; de streep onder de laatste vraag
   en de extra ondermarge waren er voor die knop. */
.lfk-review-raster > .lfk-checklist-kader:first-child { padding-bottom: 10px; }
.lfk-review-raster .lfk-cl-vraag:last-child { border-bottom: none; }
.lfk-review-notitie { display: flex; flex-direction: column; padding-top: 34px; }
.lfk-review-notitie .lfk-h2 { margin: 0; }
.lfk-review-notitie .lfk-textarea { flex: 1; min-height: 220px; }
.lfk-notitie-zelfde { margin: 10px 0 0; font-size: var(--lfk-fs-12); color: var(--lf-taupe); }
/* De opgeslagen versie na een conflict (reviewronde deel A): de klant ziet
   zijn eigen tekst in het veld en daaronder wat er nu staat. */
.lfk-notitie-conflict { margin-top: 14px; border-left: 2px solid var(--lf-brass); padding: 4px 0 4px 14px; }
.lfk-notitie-conflict-kop { margin: 0 0 4px; font-size: var(--lfk-fs-12); color: var(--lf-taupe); }
.lfk-notitie-conflict-tekst { white-space: pre-wrap; font-size: var(--lfk-fs-14); color: var(--lf-ink); }
@media (max-width: 960px) {
  .lfk-review-raster { grid-template-columns: minmax(0, 1fr); }
}

/* --- Woninganalyse-blok (bestaande functie, in-stijl) -------------------- */

.lfk-main .analyse-blok { border-top: 1px solid var(--lf-rule); margin-top: 16px; padding-top: 16px; }

/* Analyse-partial (_analyses.html — woningdossier + woninganalyses-pagina).
   De oude .klant-main-styling grijpt binnen de lfk-schil niet; hier de
   LiberForte-uitwerking: monochroom palet, vierkant, kleinkapitaal-labels. */
.lfk-main .stat-grid-klant {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.lfk-main .stat-card-klant {
  border: 1px solid var(--lf-rule);
  background: var(--lf-paper);
  padding: 22px 24px 20px;
  text-align: center;
}
.lfk-main .stat-value-klant {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-26);
  color: var(--lf-ink);
  font-variant-numeric: tabular-nums;
}
.lfk-main .stat-label-klant {
  margin-top: 8px;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-main .analyse-history-item {
  border: 1px solid var(--lf-rule);
  background: var(--lf-paper);
  padding: 20px 28px 26px;
  margin-top: 24px;
}
.lfk-main .analyse-history-summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--lfk-fs-18);
  color: var(--lf-ink);
  list-style: none;
  outline: none;
}
.lfk-main .analyse-history-summary::-webkit-details-marker { display: none; }
.lfk-main .analyse-history-summary::before {
  content: "\25B8";
  font-size: var(--lfk-fs-12);
  color: var(--lf-taupe);
}
.lfk-main .analyse-history-item[open] .analyse-history-summary::before { content: "\25BE"; }
.lfk-main .analyse-history-datum { flex: 1; }
.lfk-main .analyse-history-badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-brass);
  border: 1px solid var(--lf-brass);
  padding: 3px 10px;
}
.lfk-main .doelwoning-label {
  display: inline-block;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-brass);
  margin-bottom: 4px;
}
.lfk-main .analyse-section { margin-top: 28px; }
.lfk-main .analyse-section h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-18);
  color: var(--lf-ink);
}
.lfk-main .vergelijk-scroll { overflow-x: auto; }
/* Datawaarden gecentreerd; de eerste (label)kolom blijft links en houdt een
   vaste breedte zodat "Herberekening naar NN m2" op één regel blijft. */
.lfk-main .analyse-table th:not(:first-child),
.lfk-main .analyse-table td:not(:first-child) { text-align: center; }
.lfk-main .analyse-table th:first-child { width: 210px; }
.lfk-main .analyse-row-herberekening td:first-child { white-space: nowrap; }
.lfk-main .analyse-adres-sub {
  display: block;
  font-weight: 400;
  font-size: var(--lfk-fs-12);
  color: var(--lf-taupe);
  margin-top: 2px;
}
.lfk-main .analyse-table td.analyse-col-doelwoning { background: var(--lf-card); }
/* Halve regel lucht tussen het adresblok (thead) en de eerste datarij. */
.lfk-main .analyse-table tbody tr:first-child td { padding-top: 22px; }
/* Visuele-inspectie-kwalificaties (klantweergave): statische gekleurde
   buttons in de lichte tinten van het origineel (klantportaal.css/
   aankoop_beheer.css) — geen dropdown. Vaste breedte op de breedste tekst
   ("Vergelijkbaar"), tekst gecentreerd. */
.lfk-main .vi-badge {
  display: inline-block;
  width: 132px;
  box-sizing: border-box;
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--lfk-fs-12);
}
.lfk-main .vi-beter         { background: rgba(106, 171, 106, 0.15); color: #3f7a3f; }
.lfk-main .vi-vergelijkbaar { background: rgba(212, 164, 56, 0.18);  color: #8a6a18; }
.lfk-main .vi-minder        { background: rgba(194, 90, 74, 0.15);   color: #a23d2e; }
.lfk-main .vi-nvt           { background: rgba(160, 152, 128, 0.15); color: var(--lf-taupe); }
.lfk-main .form-hint-text { font-size: var(--lfk-fs-13); color: var(--lf-taupe); }

/* --- Onderteken-editor: pagina-chrome in lfk-stijl ------------------------
   De functionele veld-UI (.ot-el*, slepen/vergroten/inline font-sizes uit
   ondertekenen.js) blijft exact op de main.css-uitwerking — alleen de
   schil eromheen (kader, koppen, toolbar, meldingen) kleurt mee. */
.lfk-main .ot-editor {
  display: block;
  border: 1px solid var(--lf-rule);
  background: var(--lf-paper);
  padding: 26px 30px 30px;
  margin-top: 32px;
}
.lfk-main .ber-titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lfk-fs-22);
  color: var(--lf-ink);
}
.lfk-main .ber-uitleg { margin: 12px 0 0; max-width: 720px; color: var(--lf-brown); }
.lfk-main .ot-toolbar {
  background: var(--lf-paper);
  border-bottom: 1px solid var(--lf-rule);
  padding: 14px 0;
}
.lfk-main .ot-toolbar-hint {
  font-weight: 600;
  font-size: var(--lfk-fs-13);
  color: var(--lf-brass);
}
.lfk-main .ot-t { font-family: var(--font-display); }
.lfk-main .ot-fout {
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 8px;
  color: var(--lf-body);
  font-size: var(--lfk-fs-13-5);
}
.lfk-main .ot-pagina-nr { font-size: var(--lfk-fs-11-5); }
/* Herstel van de functionele tekstveld-input: de generieke
   .lfk-main-inputreset (underline, padding, width 100%) zou anders de
   veldgeometrie op de PDF veranderen. Waarden = main.css .ot-el-tekst input;
   de font-size komt inline uit ondertekenen.js en blijft daar. */
.lfk-main .ot-el-tekst input,
.lfk-main .ot-el-tekst input[type="text"] {
  font-family: Helvetica, Arial, sans-serif;
  color: #000;
  background: transparent;
  border: none;
  outline: 0;
  padding: 0;
  width: auto;
  min-width: 160px;
}

/* --- Formulier-varianten -------------------------------------------------- */

.lfk-formgrid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Naschaling legacy-modals/popups (Variant F, 27-07-2026) --------------
   De upload-popup, upload-voortgang en de BSN-/PDF-rotatiemodal worden
   gestyled vanuit main.css/klantportaal.css (gedeeld met de beheerkant,
   dus daar niet aan te passen) en hangen als overlay direct onder <body>,
   buiten .lfk-main. Hier gescoped op .lfk-body dezelfde x1,1333-vergroting.

   GEEN BREAKPOINT MEER (11-08-2026). Dit stond in een
   `@media (min-width: 601px)`, waardoor de teksten in deze popups op een
   telefoon juist TERUGVIELEN op de kleinere legacy-maten — precies daar
   waar leesbaarheid het meest telt, en op de schermen die 95-99% van de
   klanten gebruikt. Uitgangspunt is dat lettertypes niet worden verkleind
   om iets passend te maken; past een popup niet, dan is dat een
   lay-outprobleem en geen reden om de tekst te laten krimpen. De maten
   gelden nu op élke schermbreedte.

   LET OP: klantportaal.css heeft nog een eigen `@media (max-width: 600px)`
   die `.kp-upload-popup-titel` op 20px zet. Die staat in een bestand dat
   VÓÓR lf-klant.css wordt geladen en heeft dezelfde specificiteit als de
   kale regel daar, maar de regels hieronder zijn met `.lfk-body` gescoped
   (0,2,0) en winnen dus alsnog. Op de klantpagina's is dat blok daarmee
   uitgeschakeld; de beheerkant laadt lf-klant.css niet en houdt zijn
   bestaande gedrag. */
.lfk-body .upload-progress { font-size: var(--lfk-fs-13); }
.lfk-body .bsn-modal-kaart h2 { font-size: 25.39px; }   /* was 1.4rem = 22.4px */
.lfk-body .bsn-modal-instructie { font-size: var(--lfk-fs-14); }
.lfk-body .bsn-modal-uitleg,
.lfk-body .bsn-modal-status { font-size: var(--lfk-fs-13); }
.lfk-body .bsn-modal-overlay .btn { font-size: var(--lfk-fs-14); }
.lfk-body .kp-upload-popup-titel { font-size: var(--lfk-fs-24); }
.lfk-body .kp-upload-popup-sluit { font-size: var(--lfk-fs-22); }
.lfk-body .kp-upload-popup-body,
.lfk-body .kp-upload-popup-intro,
.lfk-body .kp-upload-popup-checklist-titel { font-size: var(--lfk-fs-15); }
.lfk-body .kp-upload-popup-tip,
.lfk-body .kp-upload-popup-dropzone-tekst,
.lfk-body .kp-upload-popup-selecteer,
.lfk-body .kp-upload-popup-camera,
.lfk-body .kp-upload-popup-veld-label,
.lfk-body .kp-upload-popup-bevestig,
.lfk-body .kp-upload-popup-annuleer { font-size: var(--lfk-fs-14); }
.lfk-body .kp-upload-popup-veld-meta,
.lfk-body .kp-upload-popup-bestandsnaam,
.lfk-body .kp-upload-popup-formaten,
.lfk-body .kp-upload-popup-fout { font-size: var(--lfk-fs-13); }
.lfk-body .kp-upload-wacht-popup-kaart strong { font-size: var(--lfk-fs-16); }
.lfk-body .kp-upload-wacht-popup-kaart p { font-size: var(--lfk-fs-14); }

/* --- Adviseur-meekijkbalk boven de schil --------------------------------- */

.lfk-body .adviseur-meekijk-balk {
  background: var(--lf-ink);
  color: #FBF9F5;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-12-5);
  padding: 8px 40px;
  text-align: center;
}
.lfk-body .adviseur-meekijk-balk a { color: var(--lf-card-border); margin-left: 10px; }

/* ─── Digitaal ondertekenen: inklapbaar blok (Berekeningen) ───────────
   Ingeklapt is de standaardstand, ook zonder opgeslagen handtekening. De
   knop is exact zo breed als de twee knoppen in de documentrij samen
   (2 x .lfk-btn-120 + 10px gap) en lijnt uit op de UITLEGTEKST, niet op de
   kop — daarom staat de kop op een eigen regel en de uitleg naast de knop.
   De kop is smaller begrensd dan de uitleg, zodat de uitleg iets verder
   doorloopt richting de knop. Openen/sluiten gaat via een max-height- en
   max-width-overgang: vloeiend, en zonder de sprong die `hidden` geeft. */
/* Volle kolombreedte in BEIDE standen — gelijk aan de documentenlijst
   erboven en de rekenmodule eronder. Alleen de HOOGTE verandert bij
   uitklappen; de breedte staat vast (browsertest 2026-08-02: een smaller
   ingeklapt blok viel visueel uit de kolom). */
.lfk-ht-kop { max-width: 22ch; }
.lfk-ht-inklaprij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 10px;
}
.lfk-ht-inklapuitleg { margin: 0; flex: 1 1 auto; }
.lfk-ht-knop {
  flex: 0 0 auto;
  /* Exact de volle actiekolom van de documentrij: 2 knoppen + de tussen-
     ruimte. Omdat die kolom een VAST raster is (zie .lfk-ber-acties) klopt
     deze breedte bij elk aantal documenten en bij elke combinatie van
     wel/niet-ondertekenbare rijen — ook als er nergens een
     Ondertekenen-knop staat. */
  width: calc(2 * var(--lfk-ber-knop) + var(--lfk-ber-knop-gap));
  padding-left: 0;
  padding-right: 0;
}
/* Open/dicht via het `hidden`-attribuut, niet via een max-height-truc.
   Die truc bleek in de browser niet te pakken (het paneel bleef 0px, zelfs
   met !important) en is sowieso fragiel: hij vraagt een max-height die
   groter is dan de inhoud ooit wordt. `hidden` is voorspelbaar; de
   vloeiendheid komt van een korte fade-in van de inhoud. */
.lfk-ht-paneel[hidden] { display: none; }
.lfk-ht-paneel { animation: lfk-ht-openen 0.28s ease both; }
@keyframes lfk-ht-openen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
/* Eén regel wit tussen de korte uitleg boven het blok en de instructie —
   was twee (browsertest 2026-08-02). */
.lfk-ht-paneel-inhoud { padding-top: 11px; }
.lfk-ht-fotohint { margin-top: 0; }

@media (max-width: 720px) {
  .lfk-ht-kop { max-width: 100%; }
  .lfk-ht-inklaprij { flex-direction: column; gap: 16px; }
  .lfk-ht-knop { width: 100%; }
}

/* Respecteer de systeemvoorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
  .lfk-ht-paneel { animation: none; }
}

/* ─── Funda-koppeling bij referentiepanden ────────────────────────────
   De klant koppelt de advertentie zelf; zie portaal_app/funda_link.py. */
/* Twee knoppen naast elkaar, allebei op de volle 170px van .lfk-btn-170.
   De rij is een grid met een VASTE tweede kolom van 170px; met twee knoppen
   erin kromp elke knop naar ~80px en brak de tekst buiten de knop
   (browsertest 2026-08-02). `auto` laat de kolom meegroeien en
   `flex: 0 0 170px` houdt beide knoppen exact even breed. */
.lfk-docdl-acties { display: flex; gap: 10px; align-items: center;
  justify-content: flex-end; }
.lfk-docdl-acties .lfk-btn { flex: 0 0 170px; }
.lfk-funda-beheerrij {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: -6px 0 14px;
  padding-left: 2px;
}
.lfk-funda-verwijderform { display: inline; }
.lfk-funda-tekstknop {
  font-size: var(--lfk-fs-12);
  color: var(--lf-taupe);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.lfk-funda-tekstknop:hover { color: var(--lf-brown); }

.lfk-funda-dialoog {
  /* De globale margin-reset overschrijft de `margin: auto` die de browser
     zelf aan een <dialog> geeft, waardoor de pop-up linksboven bleef
     plakken (browsertest 2026-08-02). Expliciet terugzetten. */
  margin: auto;
  /* Breder dan de oorspronkelijke 520px: er staan nu drie knoppen op één
     regel (Koppelen · Niet op Funda · Sluiten). */
  max-width: 620px;
  width: calc(100% - 40px);
  border: 1.5px solid var(--lf-card-border);
  border-radius: 14px;
  background: var(--lf-paper);
  padding: 30px 32px 26px;
  color: var(--lf-ink);
}
.lfk-funda-dialoog::backdrop { background: rgba(31, 28, 22, 0.38); }
.lfk-funda-dialoog .lfk-sectie-uitleg { margin: 14px 0 0; }
.lfk-funda-dialoog .lfk-btn-primair { margin-top: 16px; }
.lfk-funda-label {
  display: block;
  margin: 18px 0 6px;
  font-weight: 600;
  font-size: var(--lfk-fs-10);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lfk-funda-veld {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--lf-card-border);
  border-radius: 14px;
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--lfk-fs-14);
  color: var(--lf-ink);
}
.lfk-funda-dialoogacties {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* Alle drie de knoppen even breed en met de tekst ruim binnen de knop:
   geen vaste breedteklasse, maar padding + nowrap. */
.lfk-funda-dialoogacties .lfk-btn {
  flex: 0 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
}

/* Derde stand: "Niet op Funda". Zachte terracotta die bij de LiberForte-
   tinten past — het is een feitelijke constatering, geen foutmelding, dus
   bewust geen schreeuwend rood. */
/* Erft de maatvoering van .lfk-btn-secundair (zelfde hoogte en padding als
   de andere twee knoppen); alleen de kleuren wijken af. */
.lfk-btn-niet {
  background: #F6EAE6;
  border-color: #C9A79B;
  color: #8C4A38;
}
.lfk-btn-niet:hover { background: #F0DDD7; border-color: #B8907F; color: #6E3628; }

/* Statusindicator links van de Funda-knop. */
.lfk-funda-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
/* Specificiteit moet boven `.lfk-docdl-rij span { color: var(--lf-ink) }`
   uitkomen, anders worden de indicatoren gewoon zwart (browsertest
   2026-08-02). */
.lfk-docdl-rij .lfk-funda-status-ok { color: #4A8A4A; }
.lfk-docdl-rij .lfk-funda-status-niet { color: #B4503C; }
.lfk-funda-dialoogacties .lfk-btn-primair { margin-top: 0; }
.lfk-funda-nietmeer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--lf-rule);
  font-size: var(--lfk-fs-12);
}

@media (max-width: 620px) {
  .lfk-docdl-acties { flex-direction: column; align-items: stretch; }
}

/* ----------------------------------------------------------------
   STATUSKLEUREN + AFWIJZINGSREDEN  (klantkant)
   Rood en groen zijn overgenomen uit de vergelijk-indicatoren die al in dit
   bestand staan: `.vi-minder` (#a23d2e) en `.vi-beter` (#3f7a3f). Geen
   nieuwe kleuren. Alleen goedgekeurd en afgewezen krijgen kleur; de overige
   statussen blijven neutraal zodat de kleur betekenis houdt.
   ---------------------------------------------------------------- */
.lfk-main {
  --lf-afwijzing:   #a23d2e;   /* = .vi-minder */
  --lf-goedgekeurd: #3f7a3f;   /* = .vi-beter  */
  /* "Wacht op akkoord" had dezelfde taupe als "niet van toepassing"
     (#6B6156, gemeten 31-08-2026 op het scherm). Twee statussen die niets
     met elkaar te maken hebben in één kleur: de klant kan niet zien welke
     rij bij de adviseur ligt en welke hij zelf opzij heeft gezet.

     Waarom blauw en niet nóg een goudtint: de enige goudtint die vrij was
     ligt te dicht op --lf-brass (#A0784A) van "wacht op upload" — twee
     statussen naast elkaar in bijna dezelfde kleur is geen onderscheid.
     Blauw is bovendien wat dit product al bedoelt met deze status: zowel de
     beheerbadge (main.css) als de oude klantstijl (klantportaal.css) zetten
     hem blauw. Deze tint is naar het warme palet toe gehaald (gedempt,
     zelfde verzadigings- en lichtheidsregister als het groen en het rood
     hierboven) zodat hij naast #f4f2ed / #8a7a50 / #c8b870 rustig blijft.

     Contrast op het papier (#FBF9F5), gemeten:
       #3d5a7a  6,79 : 1   <- deze
       #a23d2e  6,16 : 1       afgewezen
       #6B6156  5,76 : 1       n.v.t.
       #3f7a3f  4,91 : 1       goedgekeurd
       #A0784A  3,78 : 1       wacht op upload
     Het hoogste van de vijf; ruim boven de 4,5 die voor tekst geldt. */
  --lf-wachtend:    #3d5a7a;
}

.lfk-main .docrij-status-afgewezen .docrij-titel-tekst,
.lfk-main .docrij-statuspill-afgewezen {
  color: var(--lf-afwijzing);
}

/* Staat ná `.docrij-statuspill-ontvangen { color: var(--lf-ink) }` hierboven
   en heeft dezelfde specificiteit, dus deze wint. */
.lfk-main .docrij-status-ontvangen .docrij-titel-tekst,
.lfk-main .docrij-statuspill-ontvangen {
  color: var(--lf-goedgekeurd);
}

.lfk-main .docrij-cel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Informatie-icoontje achter "Afgewezen": i in een rondje. */
.lfk-main .docrij-afkeur-info {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--lf-afwijzing);
  border-radius: 50%;
  background: transparent;
  color: var(--lf-afwijzing);
  font-family: var(--lf-font-body, inherit);
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Rustige pulsering: 3s, alleen een zachte ring eromheen. */
  animation: lfk-afkeur-puls 3s ease-in-out infinite;
}

.lfk-main .docrij-afkeur-info:hover,
.lfk-main .docrij-afkeur-info:focus-visible {
  background: var(--lf-afwijzing);
  color: var(--lf-paper);
  animation: none;
}

@keyframes lfk-afkeur-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(162, 61, 46, 0.30); }
  50%      { box-shadow: 0 0 0 4px rgba(162, 61, 46, 0); }
}

/* Systeeminstelling "verminderde beweging": geen pulsering, wel het icoon. */
@media (prefers-reduced-motion: reduce) {
  .lfk-main .docrij-afkeur-info { animation: none; }
}

/* De reden zelf staat in de knop maar is alleen voor schermlezers/JS. */
.lfk-main .docrij-afkeur-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pop-up met de volledige reden: zwarte letters op karton-crème, dezelfde
   rand en radius als de kaarten elders op de klantkant. Geen harde schaduw.
   `position: fixed` + klemmen in JS houdt hem altijd volledig in beeld. */
.docrij-afkeur-pop {
  position: fixed;
  z-index: 2000;
  max-width: 320px;
  padding: 10px 14px;
  background: var(--lf-card);
  border: 1px solid var(--lf-card-border);
  border-radius: 8px;
  color: var(--lf-ink);
  font-family: var(--lf-font-body, inherit);
  font-size: var(--lfk-fs-13-5);
  line-height: 1.45;
  /* Geen slagschaduw; alleen een minimale lift zodat hij loskomt van de rij. */
  box-shadow: 0 2px 6px rgba(43, 33, 24, 0.10);
  /* Lange reden: volledig tonen, nooit afkappen. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.docrij-afkeur-pop[hidden] { display: none; }

/* === Voorcheck: status "niet van toepassing" en de bijbehorende knop ======
   De klant kan bij de belastingaangifte zelf aangeven dat die niet van
   toepassing is (veel starters doen geen aangifte). De rij blijft staan — de
   adviseur moet kunnen zien dát het bewust is aangegeven — en krijgt daarom
   een eigen, rustige status: taupe met een streepje ervoor, dus zichtbaar
   ánders dan het groene vinkje van een goedgekeurd document en zonder de
   urgentie van brass/rood. */
.lfk-main .docrij-statuspill-nvt { color: var(--lf-taupe); }
.lfk-main .docrij-statuspill-nvt::before { content: "– "; }
.lfk-main .docrij-status-nvt .docrij-titel-tekst { color: var(--lf-taupe); }

/* Een open rij mét de n.v.t.-knop heeft twee knoppen. Naast elkaar worden dat
   2 × 170 + 32 = 372px in een kolom van 220px, precies het probleem dat de
   ondertekenrij hierboven ook had; dus dezelfde oplossing: onder elkaar,
   rechts uitgelijnd, met de 32px-spacer op de cel in plaats van op het
   formulier. */
.lfk-main .docrij-acties:has(.nvt-form) {
  flex-direction: column;
  align-items: flex-end;
  padding-right: 32px;
}
.lfk-main .docrij-acties:has(.nvt-form) .upload-form { margin-right: 0; }
.lfk-main .docrij-acties .nvt-form { display: flex; }

/* === Stap 3 woningdossier: knop "Lever documenten aan" ====================
   De twee tan-blokjes bij een bieddeadline stonden onder elkaar met lege
   ruimte ernaast (de blokjes zijn max 560px breed, de kolom is breder). Die
   ruimte is nu de plek van de knop naar Documenten: rechthoekig, bovenaan
   uitgelijnd met het eerste blokje, zodat hij op dezelfde hoogte staat en niet
   onder de tekst wegzakt.

   `align-items: flex-start` en niet `stretch`: een knop die net zo hoog wordt
   als twee tekstblokjes samen is geen knop meer maar een vlak. */
.lfk-main .lfk-stap-deadlinerij {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}
.lfk-main .lfk-stap-deadlinekaarten { flex: 0 1 560px; min-width: 0; }
/* De blokjes dragen zelf hun margin-top (lfk-stap-waarschuwing); die van het
   eerste blokje moet eraf, anders staat de knop hoger dan het blokje ernaast. */
.lfk-main .lfk-stap-deadlinekaarten > .lfk-stap-waarschuwing:first-child {
  margin-top: 0;
}
.lfk-main .lfk-stap-docknop {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ── Meekijken als klant: waarschuwing bij een verlegde sessie ────────────
   Alleen zichtbaar voor de adviseur (het merkteken staat er alleen tijdens
   een meekijksessie). Bewust hard en niet subtiel: dit gaat erover dat je
   naar het dossier van een ándere klant kijkt dan je denkt. */
.meekijk-waarschuwing {
  display: block;
  background: #7A2E2E;
  color: #FBF9F5;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 2px solid #4E1D1D;
}
.meekijk-waarschuwing strong { display: block; margin-bottom: 4px; }
.meekijk-waarschuwing span { display: block; }
.meekijk-waarschuwing b { font-weight: 600; }
.meekijk-waarschuwing .meekijk-terug {
  display: inline-block;
  margin-top: 10px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 18px;
  background: #FBF9F5;
  color: #7A2E2E;
  text-decoration: none;
  font-weight: 600;
}
.meekijk-waarschuwing .meekijk-terug:hover { background: #fff; }

/* Een korte datum (dd-mm-jjjj) breekt niet na een koppelteken. Gezet door het
   Jinja-filter `datum_heel` (time_filters.py); op mobiel stond er anders
   "15-" met "09-2026" op de regel eronder. */
.lfk-datum { white-space: nowrap; }

/* ── Tabletbreedte: 721–960 px (deel H, 16/17-09-2026) ──────────────────
   Tussen de mobiele weergave (tot 720 px) en ~920 px liep de desktopopmaak
   horizontaal over: vaste kolommen die samen breder zijn dan de pagina.
   Gemeten op 768 px: rekenmodule (401 + 360 px in 626 px) 120 px, de
   documententabel op /berekeningen/ 148 px, het woningoverzicht 69 px, de
   documentenpagina 73 px en het dashboard 58 px. Hier alleen die onderdelen
   smaller; boven 960 px en onder 721 px verandert er niets.
   `min-height: 521px` houdt een liggende telefoon (die de mobiele weergave
   heeft, zie lf-mobiel.css) er buiten. */
@media (min-width: 721px) and (max-width: 960px) and (min-height: 521px) {
  /* Kop: de tabbladen kregen naast logo, taal en uitloggen maar ~60 px en
     vielen onder elkaar, met "Dashboard" over "NL · EN" heen. Hier gaan ze
     naar een eigen regel onder het logo. */
  .lfk-header-inner { flex-wrap: wrap; row-gap: 14px; }
  .lfk-taal { margin-left: auto; }
  .lfk-nav { order: 3; flex: 1 0 100%; margin-top: 0; }

  /* Rekenmodule: de twee kolommen onder elkaar. */
  .lfk-rm-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Dashboard: twee tegels per rij in plaats van drie. */
  .lfk-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Documentenpagina: de adviseurkaart onder de kop. */
  .lfk-doc-top { grid-template-columns: minmax(0, 1fr); }
  /* Berekeningen: de twee knoppen per document onder elkaar, zodat de
     actiekolom één knop breed is. De onzichtbare plaatshouder is dan niet
     nodig en zou een lege regel geven. */
  .lfk-ber-tabel .lfk-tabel-kop,
  .lfk-ber-tabel .lfk-tabel-rij {
    grid-template-columns: 110px minmax(0, 1fr) 170px var(--lfk-ber-knop);
  }
  /* "Digitale handtekening": de actiekolom is hier te smal voor het label,
     dus een eigen breedte. */
  .lfk-ht-knop { width: auto; padding-left: 16px; padding-right: 16px; }
  /* Documentenpagina: smallere vaste kolommen, de naam houdt ruimte. */
  .lfk-doc-tabel { padding-left: 16px; padding-right: 16px; }
  .lfk-main .docrij-kop,
  .lfk-main .docrij { grid-template-columns: minmax(0, 1fr) 150px 100px 180px; }
  .lfk-ber-acties { grid-template-columns: var(--lfk-ber-knop); }
  .lfk-ber-knop-leeg { display: none; }
  /* Woningoverzicht: foto, plaats en m² vallen weg (die staan op de
     woningpagina), zodat het adres ruimte krijgt. */
  .lfk-aank-tabelkader { padding-left: 16px; padding-right: 16px; }
  /* Vaste tabelindeling via <colgroup>: de kolom op 0 zetten en de cellen
     leegmaken (een cel met display:none zou de rest laten opschuiven). */
  .lfk-main .woningen-table col.col-foto,
  .lfk-main .woningen-table col.col-plaats,
  .lfk-main .woningen-table col.col-m2 { width: 0; }
  .lfk-main .woningen-table tr > :nth-child(2),
  .lfk-main .woningen-table tr > :nth-child(4),
  .lfk-main .woningen-table tr > :nth-child(6) {
    padding-left: 0; padding-right: 0; font-size: 0; overflow: hidden;
  }
  .lfk-main .woningen-table tr > :nth-child(2) > * { display: none; }
}