/* ==========================================================================
   Verhuren123 — de vormtaal

   ⭐ BRON VAN DE KLEUREN (David, 31/07/2026): de eigen landingspagina
   `portal.adminwest.be/verhuren`, niet het marktonderzoek. Dat is de juiste keuze:
   die pagina is de voordeur van dit product, en een applicatie die er anders uitziet
   dan de pagina waarlangs de klant binnenkwam, breekt het merk op het slechtste
   moment — precies wanneer hij net beslist heeft je te vertrouwen.

   De tokens hieronder zijn letterlijk uitgelezen uit die pagina (`--zee`, `--navy`,
   `--zand`, `--oranje`, `--ink`, `--lucht`, `--paneel`).
   ⚠️ Daarmee vervangen ze de blauwe tokens uit `docs/07` §1; die blijven daar staan
   als verslag van het marktonderzoek, niet meer als voorschrift.

   WAT WEL UIT HET MARKTONDERZOEK BLIJFT — de vorm, niet de kleur:
     1. vlak · 2. één accentkleur · 3. document naast het formulier ·
     4. één beslissing per stap · 5. bevestigen in lopende zinnen ·
     6. vaktaal achter een schakelaar · 7. uitgeschakelde knoppen blijven staan
        en leggen uit waarom

   ⛔ Wie hier een `box-shadow` toevoegt, herbouwt een gewoon dashboard. Ook de
   knoppen op de landingspagina zijn vlak — daar is geen tegenspraak.
   ========================================================================== */

:root {
  /* -- kleur: uitgelezen uit portal.adminwest.be/verhuren ---------------- */
  --primair: #0FBFA0;              /* --zee — de knopkleur van de landingspagina */
  --primair-donker: #0A8F7A;       /* --zee-d, voor :hover en :active */
  --primair-vlak: #E2F8F3;         /* --zee-tint */
  --primair-tekst: #06312A;        /* ⭐ donkerteal op teal: leesbaarder dan wit */

  --navy: #1E3A5C;                 /* de tweede merkkleur: koppen en secundaire knop */
  --navy-donker: #152B43;
  --navy-vlak: #E7EEF6;

  --grond: #F4F7FC;                /* --lucht: de achtergrond van de applicatie */
  --oppervlak: #FFFFFF;            /* --papier: kaarten, zijbalk, topbar */
  --secundair-vlak: #EEF3FA;       /* --paneel */
  --lijn: #E6ECF3;                 /* enkel tussen tabelrijen — nooit rond een kaart */

  --tekst-kop: #152238;            /* --ink */
  --tekst: #2E3F57;
  --tekst-zacht: #5B6B82;          /* --ink2 */
  --icoon: #5B6B82;

  /* Semantische kleuren — binnen hetzelfde palet, maar met een eigen taak.
     ⚠️ Ze zeggen iets over een TOESTAND, nooit over belangrijkheid. */
  --succes: #0FBFA0;
  --succes-vlak: #E2F8F3;
  --succes-tekst: #0A6E5E;         /* --zee haalt op wit geen leesbaar contrast */
  --fout: #C24A1E;                 /* --oranje */
  --fout-donker: #A33D17;          /* --oranje-d */
  --fout-vlak: #FDEDE5;            /* --oranje-tint */
  --waarschuwing: #E8B872;         /* --zand */
  --waarschuwing-vlak: #FDF4E7;    /* --zand-tint */
  --waarschuwing-tekst: #8A6320;

  /* -- vorm ------------------------------------------------------------- */
  /* De landingspagina werkt met 14 / 20 / 28 px en met pilvormige knoppen. */
  --radius: 14px;                  /* --r-s */
  --radius-groot: 20px;            /* --r-m */
  --radius-pil: 999px;             /* knoppen en pillen */
  --radius-tabel: 8px;
  --radius-klein: 8px;

  /* -- ruimte ----------------------------------------------------------- */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;

  /* ⭐ David 31/07: de zijbalk mag minstens de helft breder. 232 → 348 px.
     Daarna nog naar 380 px, omdat de tekst 20 % groter werd en een lang item als
     "Herzieningsbewaking" anders tegen zijn eigen werf-label aanloopt. */
  --zijbalk-breed: 380px;
  --topbar-hoog: 66px;
  --inhoud-max: 1180px;

  /* -- typografie ------------------------------------------------------- */
  /* ⚠️ De CSP staat enkel `font-src 'self' data:` toe, dus een eigen bestand komt
     later in static/lettertypes/ en nooit van een CDN. */
  --lettertype: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ⭐ David 31/07: alles 20 % groter. *"Veel mensen werken tegenwoordig ook op
     tablets."* Dat is de juiste reden: een tablet houd je verder van je af dan een
     telefoon en je bedient hem met een duim, dus zowel de leesafstand als het
     aanraakvlak vragen meer. De hoogtes hieronder schalen mee — grotere letters in
     een knop die even hoog blijft, is geen grotere knop maar een vollere. */
  --tekst-h1: 38px;                /* was 32 */
  --tekst-h2: 31px;                /* was 25,6 */
  --tekst-body: 19px;              /* was 16 */
  --tekst-klein: 17px;             /* was 14 */
  --tekst-knop: 18.5px;            /* was 15,5 */
  --tekst-mini: 14.5px;            /* de kleinste maat die nog mag — was 12 */
}

/* ==========================================================================
   Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--lettertype);
  font-size: var(--tekst-body);
  line-height: 1.55;
}

h1, h2, h3 { color: var(--tekst-kop); margin: 0 0 var(--ruimte-3); font-weight: 700; }
h1 { font-size: var(--tekst-h1); line-height: 1.2; }
h2 { font-size: var(--tekst-h2); letter-spacing: 0.15px; line-height: 1.25; }
h3 { font-size: 23px; }

p { margin: 0 0 var(--ruimte-3); }
a { color: var(--primair); text-decoration: none; }
a:hover { text-decoration: underline; }

.zacht { color: var(--tekst-zacht); }
.klein { font-size: var(--tekst-klein); }
.getal { font-variant-numeric: tabular-nums; }   /* bedragen onder elkaar uitlijnen */

/* Toegankelijkheid: zichtbare focus, want die is voor toetsenbordgebruik het enige
   houvast. Vlak ontwerp mag nooit betekenen: onzichtbare focus. */
:focus-visible {
  outline: 2px solid var(--primair);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

.enkel-voor-schermlezers {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Raamwerk — zijbalk, topbar, inhoud (07 §2)
   ========================================================================== */

.raam { display: grid; grid-template-columns: var(--zijbalk-breed) 1fr; min-height: 100vh; }

.zijbalk {
  background: var(--oppervlak);
  border: 0;                        /* ⭐ geen rand: het contrast met --grond volstaat */
  padding: var(--ruimte-4) var(--ruimte-3);
  display: flex; flex-direction: column; gap: var(--ruimte-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.merk { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); }
.merk-naam { font-weight: 700; font-size: 25px; color: var(--navy); letter-spacing: -0.3px; }
/* Het merkteken — het huis met het vinkje en de aangifte, als vector.
   ⚠️ `logo.svg` is de volledige versie; de favicon is bewust een ánder, simpeler
   teken. Een favicon is geen verkleind logo: op 16 px blijft van vier elementen
   niets over. Zie de commentaar in beide bestanden. */
.merk-teken { width: 40px; height: 40px; flex: 0 0 auto; display: block; }

.zijbalk nav { display: flex; flex-direction: column; gap: 2px; }

/* ⭐ David 31/07: de zijbalkknoppen mogen ruim de helft groter. Ze zijn nu geen
   tekstregeltjes meer maar echte knoppen — de navigatie is het meest aangeraakte
   onderdeel van de hele applicatie, en op een tablet wordt ze met een duim bediend. */
.zijbalk-item {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: 15px var(--ruimte-4);
  border-radius: var(--radius);
  color: var(--navy); font-size: 20px; font-weight: 500; text-decoration: none;
  min-height: 58px;
}
.zijbalk-item:hover { background: var(--navy-vlak); text-decoration: none; }
.zijbalk-item[aria-current="page"] {
  background: var(--primair-vlak);
  color: var(--primair-tekst); font-weight: 700;
}
/* Een streepje links bij het actieve item: de toestand blijft zichtbaar voor wie
   kleuren niet onderscheidt. */
.zijbalk-item[aria-current="page"] .icoon { color: var(--primair-donker); }
/* ⭐ Regel 7 in de navigatie: wat er nog niet is, verdwijnt niet. */
.zijbalk-item.nog-niet { color: var(--tekst-zacht); cursor: default; font-weight: 400; }
.zijbalk-item.nog-niet:hover { background: transparent; }
.zijbalk-item .icoon {
  width: 25px; height: 25px; flex: 0 0 auto; color: var(--icoon);
  display: inline-flex; align-items: center; justify-content: center;
}
.zijbalk-item .icoon svg { width: 25px; height: 25px; display: block; }
.zijbalk-item .wanneer { margin-left: auto; font-size: var(--tekst-mini); color: var(--tekst-zacht); }

.topbar {
  height: var(--topbar-hoog);
  background: var(--oppervlak);
  display: flex; align-items: center; gap: var(--ruimte-4);
  padding: 0 var(--ruimte-5);
  position: sticky; top: 0; z-index: 5;
}
.topbar .context { font-weight: 600; color: var(--tekst-kop); }
.topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--ruimte-4); }

.inhoud { padding: var(--ruimte-6) var(--ruimte-5) var(--ruimte-7); }
.inhoud > * { max-width: var(--inhoud-max); }

.paginakop { display: flex; align-items: flex-start; gap: var(--ruimte-3); margin-bottom: var(--ruimte-2); }
.paginakop .knoppen { margin-left: auto; display: flex; gap: var(--ruimte-2); }
.ondertitel { color: var(--tekst-zacht); margin-bottom: var(--ruimte-5); }

/* De ⓘ naast de titel: de uitleg hangt aan de titel, niet in een handleiding. */
.uitleg-knop {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy-vlak); color: var(--navy);
  border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; margin-top: 4px;
}
.uitleg-knop:hover { background: var(--primair-vlak); color: var(--primair-tekst); }
.uitleg-knop svg { width: 21px; height: 21px; }

/* ==========================================================================
   Kaarten
   ========================================================================== */

.kaart {
  background: var(--oppervlak);
  border-radius: var(--radius);
  padding: var(--ruimte-4);
  /* ⛔ geen box-shadow, geen border — dat is de kern van de vormtaal */
}
.kaart + .kaart { margin-top: var(--ruimte-4); }
.kaart h3 { margin-bottom: var(--ruimte-2); font-size: 19px; }

.rooster { display: grid; gap: var(--ruimte-4); }
.rooster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ⭐ Regel 6: een lege staat is een instructie, geen mededeling. */
.leeg { color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.leeg-groot { padding: var(--ruimte-6) var(--ruimte-4); text-align: center; }

/* ==========================================================================
   Knoppen
   ========================================================================== */

/* ⭐ Onze eigen knop, niet die van het referentieplatform.
   Het verschil is bewust: dat platform gebruikt een blokkige knop met een kleine
   radius en dunne tekst. Wij nemen de **pilvorm** van de eigen landingspagina over —
   dezelfde knop die de klant aanklikte om hier te komen — en zetten hem zwaarder:
   15,5 px in vetgewicht 700, met ruime aanraakvlakken. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2);
  font-family: inherit; font-size: var(--tekst-knop); font-weight: 700;
  line-height: 1.2;
  padding: 15px 28px;
  min-height: 54px;                 /* ruim genoeg voor een duim */
  border-radius: var(--radius-pil);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;                 /* ⛔ vlak */
}
.knop:hover { text-decoration: none; }
.knop svg { width: 21px; height: 21px; flex: 0 0 auto; }

/* ⚠️ Donkerteal op teal, geen wit: dat haalt een veel hoger contrast en het is wat
   de landingspagina zelf doet. */
.knop-primair { background: var(--primair); color: var(--primair-tekst); }
.knop-primair:hover { background: var(--primair-donker); color: #fff; }

.knop-secundair { background: var(--oppervlak); color: var(--navy); border-color: var(--navy); }
.knop-secundair:hover { background: var(--navy-vlak); }

.knop-stil { background: transparent; color: var(--navy); }
.knop-stil:hover { background: var(--secundair-vlak); }

.knop-klein { font-size: 17px; padding: 11px 20px; min-height: 44px; }

/* ⭐ Regel 7: een uitgeschakelde knop verdwijnt niet, hij legt uit waarom.
   De reden staat als aparte regel onder de knop — niet als tooltip, want een tooltip
   bestaat niet op een telefoon. */
.knop[disabled], .knop.uit {
  background: var(--secundair-vlak); color: var(--tekst-zacht);
  border-color: transparent; cursor: not-allowed;
}
.knop-met-reden { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--ruimte-1); }
.knop-met-reden .reden { font-size: var(--tekst-mini); color: var(--tekst-zacht); max-width: 320px; }

/* ==========================================================================
   Pillen en stippen
   ========================================================================== */

.pil {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--tekst-mini); font-weight: 600;
  background: var(--secundair-vlak); color: var(--tekst);
}
.pil-succes { background: var(--succes-vlak); color: var(--succes-tekst); }
.pil-fout { background: var(--fout-vlak); color: var(--fout-donker); }
.pil-waarschuwing { background: var(--waarschuwing-vlak); color: var(--waarschuwing-tekst); }
.pil-info { background: var(--navy-vlak); color: var(--navy); }

.stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stip-groen { background: var(--succes); }
.stip-oranje { background: var(--waarschuwing); }
.stip-rood { background: var(--fout); }
.stip-grijs { background: #CBD5E1; }

/* ==========================================================================
   Meldingen
   ========================================================================== */

.melding {
  border-radius: var(--radius); padding: var(--ruimte-3) var(--ruimte-4);
  font-size: var(--tekst-klein); margin-bottom: var(--ruimte-4);
}
.melding { display: flex; gap: var(--ruimte-3); align-items: flex-start; }
.melding svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 1px; }

/* 🐛 Een icoon in een kopregel had géén maat, en een SVG zonder maat vult de hele
   breedte van zijn kaart. `{{ icoon("waarschuwing") }}` in een `<h3>` gaf daardoor een
   waarschuwingsdriehoek van duizend pixels hoog.

   ⚠️ Dit stond al in `btw/aangifte.html` (bij de afwijking na goedkeuring) en werd nooit
   gezien: die kaart verschijnt alleen wanneer de onderbouw ná de goedkeuring wijzigt, en
   tot nu keek geen enkele test naar de *maat* van iets — alleen naar de aanwezigheid.
   Gevonden in de rooktest van de herzieningsfiche. */
h2 svg, h3 svg { width: 23px; height: 23px; vertical-align: -3px; flex: 0 0 auto; }
.melding-info { background: var(--navy-vlak); color: var(--navy-donker); }
.melding-succes { background: var(--succes-vlak); color: var(--succes-tekst); }
.melding-waarschuwing { background: var(--waarschuwing-vlak); color: var(--waarschuwing-tekst); }
.melding-fout { background: var(--fout-vlak); color: var(--fout-donker); }

/* ⚠️ Blokkerend versus signalerend: een blokkerend controlepunt krijgt een streep
   links, zodat het verschil ook zonder kleur zichtbaar is (kleurenblindheid). */
.melding-blokkerend { border-left: 4px solid var(--fout); }
.melding-signalerend { border-left: 4px solid var(--waarschuwing); }

/* ==========================================================================
   Tabellen — radius 4 px, lijnen tussen de rijen, niet eromheen
   ========================================================================== */

.tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-klein); }
.tabel th {
  text-align: left; font-weight: 600; color: var(--tekst-zacht);
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--secundair-vlak);
  white-space: nowrap;
}
.tabel th:first-child { border-top-left-radius: var(--radius-tabel); border-bottom-left-radius: var(--radius-tabel); }
.tabel th:last-child { border-top-right-radius: var(--radius-tabel); border-bottom-right-radius: var(--radius-tabel); }
.tabel td { padding: var(--ruimte-3); border-bottom: 1px solid var(--lijn); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .rechts, .tabel th.rechts { text-align: right; }

.tabelvoet {
  display: flex; align-items: center; gap: var(--ruimte-4);
  padding-top: var(--ruimte-3); font-size: var(--tekst-klein); color: var(--tekst-zacht);
}
.tabelvoet .totaal { font-weight: 600; color: var(--tekst-kop); }
.tabelvoet .paginatie { margin-left: auto; display: flex; align-items: center; gap: var(--ruimte-2); }

/* ==========================================================================
   Formulieren
   ========================================================================== */

.veld { margin-bottom: var(--ruimte-4); }
.veld label { display: block; font-size: var(--tekst-klein); font-weight: 600; color: var(--tekst-kop); margin-bottom: var(--ruimte-1); }
.veld .hulp { font-size: var(--tekst-mini); color: var(--tekst-zacht); margin-top: var(--ruimte-1); }

/* ⚠️ `input:not([type])` hoort erbij: een veld zonder type-attribuut is gewoon een
   tekstveld, maar het matcht `input[type="text"]` niet. Zonder deze regel staat er
   een ongestyled smal vakje tussen twee nette velden — precies wat er gebeurde bij de
   eerste rooktest van het registratiescherm. */
input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], input[type="search"],
select, textarea {
  width: 100%; font-family: inherit; font-size: 18px; color: var(--tekst);
  padding: 9px var(--ruimte-3);
  background: var(--oppervlak);
  border: 1px solid var(--lijn); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { border-color: var(--primair); outline: none; }

/* ⚠️ Een foutmelding is een zin onder het veld, geen popup en geen code. */
.veld.fout input, .veld.fout select { border-color: var(--fout); }
.veld .foutzin { font-size: var(--tekst-mini); color: var(--fout-donker); margin-top: var(--ruimte-1); }

/* ==========================================================================
   Stappenbalk — regel 4: één beslissing per stap
   ========================================================================== */

.stappen { display: flex; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-5); }
.stap { display: flex; align-items: center; gap: var(--ruimte-2); color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.stap .bol {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--secundair-vlak); color: var(--tekst-zacht);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.stap .bol svg { width: 21px; height: 21px; }
.stap.klaar .bol { background: var(--primair-vlak); color: var(--primair); }
.stap.actief .bol { background: var(--primair); color: #fff; }
.stap.actief { color: var(--tekst-kop); font-weight: 600; }
.stappen .streep { flex: 1 1 auto; height: 2px; background: var(--lijn); border-radius: 2px; }

/* ==========================================================================
   Drieluik — regel 3: het document blijft altijd zichtbaar naast het formulier
   ========================================================================== */

.drieluik { display: grid; grid-template-columns: 240px minmax(0, 1fr) 380px; gap: var(--ruimte-4); align-items: start; }
.drieluik .lijst { background: var(--secundair-vlak); border-radius: var(--radius); padding: var(--ruimte-3); }
.drieluik .stuk { background: var(--oppervlak); border-radius: var(--radius); padding: var(--ruimte-3); min-height: 60vh; }
.drieluik .formulier { background: var(--oppervlak); border-radius: var(--radius); padding: var(--ruimte-4); position: sticky; top: calc(var(--topbar-hoog) + var(--ruimte-4)); }

/* ==========================================================================
   Vaktaal achter een schakelaar — regel 6
   De roosterweergave is een volwaardige weergave, geen voetnoot.
   ========================================================================== */

.schakelaar { display: inline-flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-klein); cursor: pointer; }
.schakelaar .spoor { width: 40px; height: 22px; border-radius: 999px; background: var(--lijn); position: relative; transition: background .15s; }
.schakelaar .knopje { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.schakelaar input { position: absolute; opacity: 0; }
.schakelaar input:checked + .spoor { background: var(--primair); }
.schakelaar input:checked + .spoor .knopje { transform: translateX(18px); }

/* ⭐ Regel 5: bevestigen in lopende zinnen, met de percentages tussen haakjes.
   Geen samenvattingstabel — zinnen. */
.zinnen { font-size: 18px; line-height: 1.7; }
.zinnen strong { color: var(--tekst-kop); }
.zinnen li { margin-bottom: var(--ruimte-2); }

/* ==========================================================================
   Het icoonrek — enkel op de vormtaalpagina
   ========================================================================== */

.icoonrek { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); }
.icoonvak {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 106px; padding: var(--ruimte-3) var(--ruimte-2);
  background: var(--secundair-vlak); border-radius: var(--radius);
  color: var(--navy); text-align: center;
}
.icoonvak svg { width: 28px; height: 28px; }

/* ==========================================================================
   Foutpagina
   ========================================================================== */

.fout-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ruimte-5); }
.fout-pagina .kaart { max-width: 520px; padding: var(--ruimte-6); }
.fout-pagina .code { font-size: 15.5px; color: var(--tekst-zacht); letter-spacing: 1px; }
.fout-pagina pre {
  background: var(--secundair-vlak); border-radius: var(--radius);
  padding: var(--ruimte-3); font-size: var(--tekst-mini); overflow-x: auto; color: var(--tekst);
}

/* ==========================================================================
   Klein scherm — de doelgroep kijkt vaak op een telefoon
   ========================================================================== */

@media (max-width: 900px) {
  .raam { grid-template-columns: 1fr; }
  .zijbalk {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    gap: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3);
  }
  .zijbalk .merk { display: none; }
  .zijbalk nav { flex-direction: row; gap: var(--ruimte-1); }
  .zijbalk-item .wanneer { display: none; }
  .rooster-2, .rooster-3 { grid-template-columns: 1fr; }
  .drieluik { grid-template-columns: 1fr; }
  .drieluik .formulier { position: static; }
  .inhoud { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-6); }
  h1 { font-size: 31px; }
}

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

/* ==========================================================================
   Merkproef — enkel in ontwikkelmodus
   ========================================================================== */

.merkproef {
  display: flex; align-items: flex-end; gap: var(--ruimte-5); flex-wrap: wrap;
  padding: var(--ruimte-4); border-radius: var(--radius);
  background: var(--oppervlak);
}
.merkproef.donker { background: var(--navy); margin-top: var(--ruimte-3); }
.merkproef.donker .klein { color: #C9D6E6; }
.merkproef-vak { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.merkproef-vak img { display: block; }

/* ==========================================================================
   Schermen vóór de aanmelding — werf 2
   ========================================================================== */

.kaal {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--ruimte-5);
}
.kaal-kaart {
  background: var(--oppervlak); border-radius: var(--radius-groot);
  padding: var(--ruimte-6); width: 100%; max-width: 520px;
}
.kaal-kaart h1 { font-size: 30px; margin-bottom: var(--ruimte-2); }

/* Een leesblad: contracttekst, geen formulier. Bewust breder dan `.kaal-kaart`
   (520 px) maar smaller dan het scherm — een regel van meer dan ~75 tekens leest
   niemand nog. Gebruikt door /voorwaarden. */
.blad {
  max-width: 74ch; margin: 0 auto;
  padding: var(--ruimte-6) var(--ruimte-5) var(--ruimte-7);
}
.blad h1 { font-size: 32px; margin-bottom: var(--ruimte-2); }
.blad h2 { font-size: 19px; margin-bottom: var(--ruimte-2); }
.blad-versie { margin-bottom: var(--ruimte-6); }
.blad-artikel { margin-bottom: var(--ruimte-5); }
.blad-artikel p { margin-bottom: var(--ruimte-3); line-height: 1.7; }
.blad-lijn { border: 0; border-top: 1px solid var(--lijn); margin: var(--ruimte-6) 0 var(--ruimte-4); }

/* ==========================================================================
   Zone kantoor — hier telt dichtheid, niet rust (06 §9)
   ========================================================================== */

/* Een brede tabel mag horizontaal schuiven in zijn eigen kader. ⛔ Nooit de pagina
   zelf: een blad dat naar links schuift, neemt de zijbalk mee. */
.tabel-schuif { overflow-x: auto; }
.tabel-dicht td, .tabel-dicht th { padding: var(--ruimte-2) var(--ruimte-3); }
.tabel-dicht td { white-space: nowrap; }
/* De eerste kolom mag wél afbreken: een dossiernaam is soms lang. */
.tabel-dicht td:first-child { white-space: normal; }

/* Het stoplicht van de werklijst. ⛔ Een stip met een woord ernaast, geen emoji:
   die ziet er op elk toestel anders uit en kleurt niet mee met de tekst. */
.stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
  background: var(--tekst-zacht);
}
.stip-niets { background: #C9D2DB; }
.stip-onvolledig { background: var(--waarschuwing); }
.stip-klaar { background: var(--succes); }
.stip-goedgekeurd { background: var(--primair); }
.stip-ingediend { background: var(--succes-tekst); }

/* A4 · de herzieningsbewaking. ⚠️ Maar twee kleuren, en dat is opzet: dit scherm heeft
   geen levensloop met vijf standen maar één vraag — vraagt dit om een handeling, ja of
   nee. Een derde kleur zou een rangorde suggereren die er niet is. */
.stip-dringend { background: var(--waarschuwing); }
.stip-rustig   { background: #C9D2DB; }

/* ⛔ De kolom "wat nu" mag afbreken, niet afkappen. In `.tabel-dicht` staat elke cel
   op één regel — dat houdt een werklijst leesbaar, maar hier draagt die kolom de hele
   instructie. De rooktest toonde "Er is een pand met btw" en dan niets meer: doctrine-
   regel 6 zegt dat elke stand vertelt wat er nu moet gebeuren, en een halve zin doet
   dat niet. */
.tabel-dicht td.wat-nu { white-space: normal; min-width: 22ch; max-width: 34ch; }
.tabel-dicht td.speelt { white-space: normal; min-width: 16ch; }
.tabel-dicht td.speelt .vlag { display: block; }

.werklijst-filters {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: center;
}
.werklijst-filters select, .werklijst-filters input[type="search"] { min-width: 160px; }

.fiche-kolommen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ruimte-4);
}

/* Een knop die de volle breedte neemt: op een formulier met één handeling is er
   geen reden om hem klein te houden. */
.knop.breed { width: 100%; }

/* De tweefactorcode: groot en met ruimte tussen de tekens, want zes cijfers
   overtypen van een telefoon is foutgevoelig. */
.code-veld {
  font-size: 26px; letter-spacing: 6px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.qr {
  display: flex; justify-content: center;
  background: var(--oppervlak); padding: var(--ruimte-3);
  border-radius: var(--radius); margin-bottom: var(--ruimte-4);
}
.qr svg { width: 200px; height: 200px; }

.sleutel {
  display: inline-block; margin-top: var(--ruimte-1);
  background: var(--secundair-vlak); border-radius: var(--radius-klein);
  padding: 6px 10px; letter-spacing: 1px; font-size: var(--tekst-klein);
}

/* De dossierkiezer: elke keuze is een knop over de volle breedte, want op een
   telefoon mik je niet op een regel tekst. */
.dossierknop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--secundair-vlak); border: 2px solid transparent;
  border-radius: var(--radius); padding: var(--ruimte-4);
  margin-bottom: var(--ruimte-3); font-family: inherit;
}
.dossierknop:hover { border-color: var(--primair); background: var(--primair-vlak); }
.dossiernaam { font-weight: 700; font-size: 19px; color: var(--navy); }

/* ==========================================================================
   Panden — werf 3
   ========================================================================== */

.pandkaart { display: block; color: inherit; text-decoration: none; }
.pandkaart:hover { text-decoration: none; background: var(--primair-vlak); }
.pandkop { display: flex; align-items: center; gap: var(--ruimte-3); }
.pandkop h3 { margin: 0; }
.pandkop .stip { width: 12px; height: 12px; margin-left: auto; }

.tabbladen { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; margin-bottom: var(--ruimte-5); }
.tabblad {
  padding: 10px var(--ruimte-4); border-radius: var(--radius-pil);
  background: var(--secundair-vlak); color: var(--navy);
  font-size: var(--tekst-klein); font-weight: 600; text-decoration: none;
}
.tabblad:hover { background: var(--navy-vlak); text-decoration: none; }
.tabblad.actief { background: var(--primair); color: var(--primair-tekst); }

/* ⭐ De keuze met uitleg: bij een beslissing met fiscale gevolgen hoort de reden
   naast de knop te staan, niet in een handleiding. */
.keuzes { display: grid; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.keuze {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--ruimte-3);
  align-items: start; padding: var(--ruimte-4);
  background: var(--secundair-vlak); border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
}
.keuze:hover { border-color: var(--primair); }
.keuze input { grid-row: span 2; margin-top: 4px; width: 20px; height: 20px; accent-color: var(--primair); }
.keuze-kop { font-weight: 700; color: var(--navy); }
.keuze-uitleg { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.keuze:has(input:checked) { border-color: var(--primair); background: var(--primair-vlak); }

/* De herzieningsklok: één balk, met links de start en rechts het einde. */
.klok { margin-bottom: var(--ruimte-4); }
.klokbalk {
  height: 14px; border-radius: var(--radius-pil);
  background: var(--secundair-vlak); overflow: hidden;
}
.klokbalk span { display: block; height: 100%; background: var(--primair); }
.klokrand { display: flex; justify-content: space-between; margin-top: 6px; }

/* ==========================================================================
   Werf 3 — verhuur en kosten
   ========================================================================== */

/* De filterbalk staat bóven de lijst, niet achter een knop: wie een kwartaal
   nakijkt, filtert bij elke handeling opnieuw. Eén rij, hij mag omlopen. */
.filterbalk {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ruimte-3);
  background: var(--oppervlak); border-radius: var(--radius);
  padding: var(--ruimte-3) var(--ruimte-4); margin-bottom: var(--ruimte-4);
}
.filterbalk .veld { margin-bottom: 0; min-width: 150px; }
.filterbalk select { min-height: 44px; padding: 8px 12px; }

/* Een waarde die vaststaat en dus geen keuzeveld verdient. */
.stille-waarde {
  margin: 0; padding: 12px 0; font-weight: 600; color: var(--tekst-kop);
}

/* ⭐ Het slotje op het btw-tarief. Dicht = de tarieventabel beslist. */
.slotveld { position: relative; }
.slotveld input[readonly] { background: var(--secundair-vlak); color: var(--tekst-zacht); }
.slotteken {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tekst-zacht); pointer-events: none;
}
.slotteken svg { width: 21px; height: 21px; display: block; }

/* ⚠️ Het redenveld staat standaard ZICHTBAAR en wordt door de JavaScript verborgen
   zolang het slotje dicht is — niet omgekeerd. Wie het andersom doet, verbergt het
   veld ook voor wie zonder JavaScript werkt, en dan is het slotje niet meer te
   openen. Verbergen mag alleen wat je zelf weer kan tonen. */
.slotblok { margin-top: var(--ruimte-4); }
.slotblok.dicht .veld { display: none; }
.slotblok.open { background: var(--waarschuwing-vlak); border-radius: var(--radius);
  padding: var(--ruimte-4); }

.merkje svg { width: 17px; height: 17px; vertical-align: -3px; }

/* ⭐ De rekenstrook: netto voor jou en btw af te dragen, meelopend terwijl je typt.
   Hij plakt onderaan het scherm zodat het antwoord in beeld blijft terwijl je in het
   formulier scrolt — dat is de hele reden waarom hij bestaat. */
.rekenstrook {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-5);
  background: var(--navy); color: #fff;
  border-radius: var(--radius); padding: var(--ruimte-4) var(--ruimte-5);
  margin-top: var(--ruimte-4);
}
.rekenstrook .klein { color: #C9D6E6; }
.rekenpost { display: flex; flex-direction: column; gap: 2px; }
.rekenpost strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.rekenstrook .knop { margin-left: auto; }

/* De jaarkalender voor eigen gebruik: twaalf blokjes, elk een maand. */
.jaarkalender {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ruimte-4);
}
.maand h4 { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-klein); color: var(--navy); }
.dagkoppen, .dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dagkoppen span {
  text-align: center; font-size: var(--tekst-mini); color: var(--tekst-zacht);
  padding-bottom: 2px;
}
.dag {
  border: 0; padding: 0; font: inherit; font-size: var(--tekst-mini);
  aspect-ratio: 1; border-radius: var(--radius-klein);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dag.leegplek { visibility: hidden; }
.dag-vrij { background: var(--secundair-vlak); color: var(--tekst-zacht); }
.dag-verhuurd { background: var(--primair-vlak); color: var(--primair-tekst); font-weight: 600; }
.dag-eigen { background: var(--waarschuwing-vlak); color: var(--waarschuwing-tekst); font-weight: 600; }
/* ⭐ Onderhoud/leegstand: wél op de kalender, géén aftrekbeperking — neutraal grijs,
   bewust niet de waarschuwingskleur van eigen gebruik. */
.dag-onderhoud { background: var(--secundair-vlak); color: var(--tekst); font-weight: 600; text-decoration: underline dotted; }
/* ⚠️ Een dag die tegelijk verhuurd én privé is, is geen mengkleur maar een fout. */
.dag-botst { background: var(--fout-vlak); color: var(--fout-donker); font-weight: 700; }
.dag.gekozen { outline: 2px solid var(--primair); }

/* ⭐ De rit van een reservatie — de tijdslijn die logisch vervolgt (werf 17). */
.tijdslijn { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-4); }
.tijdslijn .halte { display: flex; flex-direction: column; align-items: flex-start; min-width: 130px; flex: 1;
  position: relative; padding-top: 18px; }
.tijdslijn .halte::before { content: ""; position: absolute; top: 6px; left: 14px; right: -16px; height: 2px;
  background: var(--rand); }
.tijdslijn .halte:last-child::before { display: none; }
.tijdslijn .halte-bol { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--rand); background: var(--vlak); }
.tijdslijn .halte-klaar .halte-bol { background: var(--primair); border-color: var(--primair); }
.tijdslijn .halte-te_doen .halte-bol { border-color: var(--waarschuwing-tekst); background: var(--waarschuwing-vlak); }
.tijdslijn .halte-dringend .halte-bol { border-color: var(--fout-donker); background: var(--fout-vlak); }
.tijdslijn .halte-titel { font-weight: 600; }
.tijdslijn .halte-te_doen .halte-titel a { text-decoration: underline; }

.legende { display: flex; flex-wrap: wrap; gap: var(--ruimte-4); margin-top: var(--ruimte-4); }
.legende span { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.legende i { width: 16px; height: 16px; aspect-ratio: auto; display: inline-block; }

/* De wachtrij-teller op het kostenscherm. Geen restpost in een rapport maar een
   kwaliteitsmeter: hij hoort te dalen. */
.wachtrij { display: flex; align-items: center; gap: var(--ruimte-3); }
.wachtrij .knop { margin-left: auto; }

/* De verdeelsleutel: per pand een percentage, met een som die 100 moet zijn. */
.verdeling { display: grid; gap: var(--ruimte-2); }
.verdeelregel {
  display: grid; grid-template-columns: 1fr 120px; gap: var(--ruimte-3);
  align-items: center; background: var(--secundair-vlak);
  border-radius: var(--radius); padding: var(--ruimte-3) var(--ruimte-4);
}
.verdeelregel input { min-height: 44px; }
.verdeelsom { font-weight: 700; color: var(--navy); }
.verdeelsom.klopt-niet { color: var(--fout-donker); }

/* Snel toewijzen in de lijst: keuzeveld en knop op één regel. */
.snel-toewijzen { display: flex; gap: var(--ruimte-2); align-items: center; }
.snel-toewijzen select { min-height: 40px; padding: 6px 10px; font-size: var(--tekst-mini); }

/* De bevestiging in lopende zinnen na het bewaren (07 §3.4). */
.bevestiging { border-left: 4px solid var(--primair); }

/* ==========================================================================
   De inbox — document naast het formulier (07 §3.1)
   ========================================================================== */

/* ⭐ Het document blijft naast het formulier staan, niet erboven en niet in een
   apart tabblad. Wie een bedrag overtypt, moet het stuk zien terwijl hij typt. */
.tweeluik {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--ruimte-4); align-items: start;
}
.tweeluik .stuk {
  background: var(--oppervlak); border-radius: var(--radius);
  padding: var(--ruimte-4);
  position: sticky; top: calc(var(--topbar-hoog) + var(--ruimte-4));
  max-height: calc(100vh - var(--topbar-hoog) - var(--ruimte-6));
  overflow-y: auto;
}
.tweeluik .stuk h3 { color: var(--tekst-zacht); text-transform: uppercase;
  letter-spacing: 0.6px; font-size: var(--tekst-mini); }
.stukbeeld { max-width: 100%; border-radius: var(--radius-klein); display: block; }
.stukkader { width: 100%; height: 60vh; border: 0; border-radius: var(--radius-klein);
  background: var(--secundair-vlak); }
.logboek { margin-top: var(--ruimte-4); }
.logboek summary { cursor: pointer; }

/* ⚠️ De herkomst van elk voorgesteld veld. Wat uit het stuk komt is iets anders dan
   wat wij afleidden — en juist in dat verschil zitten de fouten. Daarom een kleur,
   niet alleen een zin: kleur zie je zonder te lezen. */
.hulp.herkomst-stuk { color: var(--succes-tekst); }
.hulp.herkomst-afgeleid { color: var(--waarschuwing-tekst); font-weight: 600; }
.hulp.herkomst-telefoonboek { color: var(--navy); }
.hulp.herkomst-onbekend { color: var(--tekst-zacht); }

/* De sleepzone voor drag & drop uit de Verkenner. */
.sleepzone {
  border: 2px dashed var(--lijn); text-align: center;
  padding: var(--ruimte-7) var(--ruimte-4);
}
.sleepzone.erboven { border-color: var(--primair); background: var(--primair-vlak); }
.sleepkop { color: var(--primair); margin-bottom: var(--ruimte-3); }
.sleepkop svg { width: 44px; height: 44px; }
.sleepzone label.knop { cursor: pointer; }

@media (max-width: 1100px) {
  .tweeluik { grid-template-columns: minmax(0, 1fr); }
  .tweeluik .stuk { position: static; max-height: none; }
}

/* ==========================================================================
   Inzendpunt — werf 5
   ========================================================================== */

/* ⭐ Deze kaart draagt het enige geheim dat dit product ooit op een scherm zet. Ze
   mag er dus uit springen — niet met een schaduw (die bestaan hier niet), maar met
   een gevuld vlak en een lijn links. Wie ze wegklikt zonder te kopiëren, moet achteraf
   kunnen zeggen dat hij ze gezien heeft. */
.kaart-nadruk {
  background: var(--primair-vlak);
  border-left: 3px solid var(--primair);
}

/* De sleutel zelf: breekbaar over regels, want 55 tekens passen niet op een telefoon,
   en selecteerbaar in één beweging. */
.sleutel-vol {
  display: block; letter-spacing: 0; font-size: var(--tekst-klein);
  word-break: break-all; user-select: all; padding: var(--ruimte-3);
  background: var(--oppervlak);
}

/* Het recept eronder — hetzelfde als de foutpagina doet met haar detail. */
pre.recept {
  background: var(--oppervlak); border-radius: var(--radius);
  padding: var(--ruimte-3); font-size: var(--tekst-mini);
  overflow-x: auto; color: var(--tekst); white-space: pre-wrap; word-break: break-all;
}

/* Een kant-en-klare tekst die de klant overneemt en doorstuurt — de vraag om vrijgave
   van zijn Peppol-registratie. ⚠️ Géén `word-break: break-all` zoals het recept
   hierboven: dat is goed voor een sleutel van 55 tekens, maar het hakt gewone woorden
   doormidden — en dit is een mail die iemand aan zijn boekhouder stuurt. Wel het
   gewone lettertype: een zin in monospace leest als een foutmelding. */
pre.mailtekst {
  background: var(--oppervlak); border-radius: var(--radius);
  padding: var(--ruimte-3); font-size: var(--tekst-klein);
  font-family: inherit; color: var(--tekst);
  white-space: pre-wrap; overflow-wrap: break-word;
  user-select: all; margin-bottom: var(--ruimte-3);
}

/* ==========================================================================
   Btw — werf 4
   ========================================================================== */

/* ⭐ Laag 1 van de aangifte (06 §C7): één zin en één bedrag. Het bedrag is het
   grootste ding op het scherm, want het is het enige waarvoor de klant kwam. */
.bedrag-reus {
  font-size: 44px; font-weight: 700; color: var(--navy);
  line-height: 1.1; margin: var(--ruimte-2) 0;
  font-variant-numeric: tabular-nums;
}
.bedrag-groot {
  font-size: 22px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* De tijdlijn van kwartalen: per periode één kaart, nieuwste bovenaan. */
.periodekop { display: flex; align-items: flex-start; gap: var(--ruimte-3); }
.periodekop > .rechts { margin-left: auto; display: flex; gap: var(--ruimte-2); }
.periodekop h3 { margin-bottom: 2px; }
.periodevoet {
  display: flex; align-items: center; gap: var(--ruimte-3);
  margin-top: var(--ruimte-3); padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn);
}
.periodevoet > *:last-child { margin-left: auto; }

/* ⚠️ Rood houdt de aangifte tegen, oranje niet. Dat verschil moet je zien zonder te
   lezen — daarom een stip, en niet alleen een woord. */
.controlepunten { list-style: none; }
.controlepunten li {
  display: flex; gap: var(--ruimte-2); align-items: flex-start;
  padding: var(--ruimte-2) 0;
}
.controlepunten li + li { border-top: 1px solid var(--lijn); }
.controlepunten .stip { margin-top: 7px; flex: 0 0 auto; }
.controlepunten a { margin-left: 6px; white-space: nowrap; }

/* Het roosternummer: smal, uitgelijnd, en herkenbaar als vaknummer. */
.vaknummer {
  font-weight: 700; color: var(--navy); width: 48px;
  font-variant-numeric: tabular-nums;
}

/* ⭐ De lijst met uitgevoerde controles. Bewust rustiger dan de controlepunten zelf:
   dit is geruststelling, geen alarm — het merkteken is klein en de tekst draagt. */
.controlelijst { list-style: none; font-size: var(--tekst-klein); }
.controlelijst li {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: 5px 0;
}
.controlelijst .merkteken { display: inline-flex; flex: 0 0 auto; }
.controlelijst .merkteken svg { width: 16px; height: 16px; }
.controlelijst .in-orde .merkteken { color: var(--succes-tekst); }
.controlelijst .let-op { color: var(--tekst-kop); font-weight: 600; }
.controlelijst .let-op .merkteken { color: var(--waarschuwing-tekst); }
.controlelijst .pil { margin-left: auto; }

/* ==========================================================================
   Rendement — werf 4
   ========================================================================== */

/* ⭐ De waterval leest van boven naar beneden: elke regel neemt iets weg van de regel
   erboven. Daarom geen kolommen met kopjes maar één doorlopende lijst, met de
   totaalregels als rustpunt. */
.waterval td { padding: var(--ruimte-2) 0; }
.waterval .bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.waterval .wr-begin td { font-weight: 600; }
.waterval .wr-aftrek .bedrag { color: var(--tekst-zacht); }
.waterval .wr-neutraal td { color: var(--tekst-zacht); }
.waterval .wr-tussentotaal td {
  border-top: 1px solid var(--lijn); font-weight: 600; color: var(--tekst-kop);
}
.waterval .wr-totaal td {
  border-top: 2px solid var(--navy); font-weight: 700;
  font-size: 19px; color: var(--navy);
}

/* De bezetting per maand. ⚠️ Eigen gebruik in een eigen kleur: leegstand en privé zijn
   niet hetzelfde, en het verschil raakt de aftrek. */
.balkjes { display: flex; gap: 6px; align-items: flex-end; margin: var(--ruimte-4) 0; }
.balkje-kolom { flex: 1; text-align: center; }
.balkje-schacht {
  height: 110px; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--secundair-vlak); border-radius: var(--radius-klein);
  overflow: hidden;
}
.balkje { width: 100%; }
.balkje-verhuurd { background: var(--primair); }
.balkje-eigen { background: var(--waarschuwing-tekst); opacity: .55; }
.balkje-label { font-size: var(--tekst-mini); color: var(--tekst-zacht); margin-top: 4px; }
.balkje-getal { font-size: var(--tekst-mini); font-weight: 600; color: var(--navy); }
.legende {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin: 0 4px 0 12px;
}
.legende-verhuurd { background: var(--primair); }
.legende-eigen { background: var(--waarschuwing-tekst); opacity: .55; }

/* Kengetallen: het getal groot, de naam eronder, de uitleg klein. */
.kengetal { padding: var(--ruimte-3) 0; }
.kengetal-waarde {
  font-size: 26px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.kengetal-naam { font-weight: 600; color: var(--tekst-kop); margin-bottom: 2px; }

.scenario-uitkomst {
  font-size: 18px; line-height: 1.6; color: var(--tekst-kop);
  margin: var(--ruimte-3) 0 var(--ruimte-2);
}

/* ===========================================================================
   Bladen: het btw-controleblad en de herzieningsfiche (06 §7)
   ===========================================================================
   ⭐ Geen pdf-bibliotheek. De browser maakt het pdf, wij leveren de opmaak. Dat houdt
   het scherm en het afgedrukte blad per definitie gelijk — een aparte pdf-generator is
   een tweede weergave die stilletjes uit elkaar loopt met de eerste. */

.tabel-vak { margin-bottom: var(--ruimte-4); }
.tabel-vak + .tabel-vak { margin-top: var(--ruimte-4); }
.vak-totaal td { background: var(--navy-vlak); }
.vak-post td { font-size: var(--tekst-klein); }
.vak-post td:first-child { width: 90px; }

/* ⛔ Er stond hier een `.verschil-op` in waarschuwingsoranje. Weg: oranje betekent in
   deze vormtaal *let op*, en een omzet die stijgt is geen waarschuwing. Het teken van
   het getal draagt de richting al — kleur zou er betekenis bij verzinnen. */

.blad-voet { background: var(--oppervlak); }

/* ⭐ De grond onder een aftrekpercentage (aftrekberekening, 02.08.2026).
   Een definitielijst en geen tabel: het is tekst die uitlegt, geen kolom die telt.
   ⚠️ Leesbaar op papier hoort hier de eis te zijn, niet compact op het scherm — de
   afdruk is het product. */
.gronden { margin: var(--ruimte-2) 0 var(--ruimte-3); }
.gronden dt {
  font-weight: 600; color: var(--tekst-kop);
  margin-top: var(--ruimte-3);
}
.gronden dt:first-child { margin-top: 0; }
.gronden dt .klein { font-weight: 400; }
/* ⛔ Geen kleur om plafond en vertrekpunt te onderscheiden: het verschil is juridisch,
   niet gradueel. Kleur zou er een ernst-schaal van maken die er niet is — het woord
   zelf draagt het onderscheid. Zelfde reden als de geschrapte `.verschil-op`. */
.gronden dd {
  margin: 2px 0 0; max-width: 68ch;
  color: var(--tekst); line-height: 1.55;
  font-size: var(--tekst-klein);
}

@media print {
  /* Wat op papier niets doet, gaat weg: navigatie, knoppen, de topbar. */
  .zijbalk, .topbar, .knoppen, .paginakop .knoppen,
  .enkel-voor-schermlezers { display: none !important; }

  .raam { display: block; }
  .inhoud { padding: 0; max-width: none; }
  body { background: #fff; }

  /* ⚠️ Een kaart die over een paginarand valt, scheurt een vak in twee. Een controleblad
     waarop vak 82 op twee bladzijden staat, is precies het blad waarover iemand later
     een vraag krijgt die hij niet kan beantwoorden. */
  /* ⛔ Geen `box-shadow: none` hier: de vormtaal ís vlak, er valt niets uit te zetten.
     Een overbodige reset laat een lezer denken dat er op het scherm wél schaduw staat. */
  .kaart {
    break-inside: avoid; page-break-inside: avoid;
    border: 1px solid #ccc;
  }
  .tabel-vak { break-inside: avoid; page-break-inside: avoid; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  /* ⛔ Alles openvouwen. Een <details> die dichtstaat, drukt af als een dichte details —
     en dan mist het blad juist het stuk dat bewijst wat er nagekeken is. */
  details { display: block; }
  details > summary { display: block; font-weight: 600; }
  details > *:not(summary) { display: revert; }

  a { text-decoration: none; color: inherit; }
  .blad-kop { border: none; }
}

/* -- de dropzone op het kostformulier (werf 15) ---------------------------- */
.dropzone {
  width: 140px; height: 140px;
  border: 2px dashed var(--rand, #CBD5E1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
  color: var(--tekst-zacht); font-size: var(--tekst-mini);
  padding: 8px; overflow: hidden;
}
.dropzone:hover, .dropzone-actief { border-color: var(--primair); color: var(--primair); }
.dropzone-vol { border-style: solid; border-color: var(--succes); color: var(--tekst); }