/*
 * Looijmans van Leeuwen — opmaak.
 *
 * Vormtaal, vastgelegd in CLAUDE.md sectie 6 en op 05-09-2026 omgezet.
 *
 * Tot die datum was het dragende motief het DOSSIERBLAD: een margelijn
 * links van elk blok, liniatuur en perforaties in de achtergrond,
 * tabbladen, bladvormen en getekende symbolen. Dat is er integraal uit,
 * met inc/decor.php en inc/iconen.php mee. Wat de site nu draagt is
 * KLEUR, BEELD, SCHAAL en BEWEGING:
 *
 *   - kleur. Vijf gronden, van wit tot het diepste blauw. Een sectie
 *     onderscheidt zich van zijn buren door de grond waarop hij staat,
 *     niet door een vorm erachter. Twee gelijke gronden staan nooit
 *     achter elkaar;
 *   - beeld. Foto's, ruim bemeten, in de fasen, de diensten en de
 *     locatie. De bestanden zijn maximaal 1000px breed, dus een foto
 *     staat altijd in een begrensde kolom en nooit als volvlak achter
 *     tekst;
 *   - schaal. Grote koppen, ruime banden, duidelijke knoppen. De
 *     nadruk komt van maatverschil;
 *   - beweging. Secties komen in beeld met 22px en 480ms — tot
 *     10-09-2026 was dat 8px en 240ms, te weinig om op te merken — de
 *     tijdlijn vult zich mee met de scrollpositie, een uitklapper
 *     opent vloeiend, hover reageert. Niets zweeft en niets drijft. Alles
 *     staat stil bij prefers-reduced-motion, en de pagina werkt
 *     volledig zonder JavaScript.
 *
 * Wat verder blijft gelden:
 *   - GOUD staat op precies één plek: het vlak van de knop "Vordering
 *     indienen", zonder gloed eronder. Geen gouden haarlijn, kader,
 *     sectiescheiding of accentwoord. Structurele lijnen zijn blauw of
 *     grijs; zie --lvl-lijn-sterk;
 *   - geen sterren, reviews, klantlogo's, prijzen of percentages;
 *   - geen externe request en geen iconenfont;
 *   - radius 10px, gelijk aan de knop; schaduw markeert wat je kunt
 *     aanraken of wat werkelijk zweeft, en dat zijn er drie: het
 *     kernfeitenblok, een aanklikbare kaart en een knop. Een foto krijgt
 *     nooit schaduw, en een sectie, band, tekstblok of uitklapper
 *     evenmin. Tot 07-09-2026 stond hier dat alleen het kernfeitenblok
 *     schaduw mocht; dat zette de knop onder dezelfde regel.
 *
 * Inhoud
 *   1. Tokens
 *   2. Basis en typografie
 *   3. Layout, banden en kaarten
 *   4. Knoppen en links
 *   5. Koptekst en navigatie
 *   6. Homepage
 *   7. Informatiepagina's
 *   8. Documentpagina's
 *   8a. Het intakeformulier
 *   9. Colofon
 *  10. Toegankelijkheid en beweging
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Huisstijl. */
  --lvl-papier:  #FFFFFF;
  --lvl-inkt:    #313131;
  --lvl-grijs:   #6B6B6B;
  --lvl-drager:  #154273;

  /* Goud is sinds 05-09-2026 geen structuurkleur meer. Het staat nog op
     precies één plek: het vlak van de knop "Vordering indienen", en daar
     zonder gloed eronder. Zie --lvl-knop-goud-* verderop.

     Wat goud vroeger deed — kaderlijn, sectiescheiding, onderstreping,
     accentwoord — doet nu de drager zelf. Een lijn is blauw of grijs, en
     de nadruk op een sectie komt van de grond waarop hij staat, van de
     maat van de kop en van het beeld ernaast.

     --lvl-lijn-sterk is de dragende lijn: de baan van de tijdlijn, de
     bovenrand van het kernfeitenblok, de markering bij een open vraag.
     Op de blauwe gronden keert hij om via .lvl-omkeer.

     --lvl-accent-op-blauw is het accentwoord in een kop op blauw.
     #9DC0E8 haalt op #154273 5,41:1 en op #0E2E52 7,27:1 — ruim boven de
     4,5:1, waar goud daar 3,42:1 haalde en alleen in een kop mocht. */
  --lvl-lijn-sterk:      #154273;
  --lvl-accent-op-blauw: #9DC0E8;

  /* De vijf gronden, van licht naar diep. Elke sectie kiest er één, en
     twee gelijke gronden staan nooit achter elkaar.

     Contrast van de lopende tekst per grond. In elke band op lichte
     grond staat de lopende tekst op #4A5563; #6B6B6B is alleen nog de
     waarde buiten een band.
       grond            #6B6B6B   #4A5563   in een band
       papier  #FFFFFF   5,33:1    7,58:1   #4A5563
       licht   #EAF0F7   4,65:1    6,61:1   #4A5563
       mid     #D8E3F0   4,10:1    5,83:1   #4A5563
     Op de twee donkere gronden keert alles om via .lvl-omkeer:
       diep    #154273  wit 10,20:1, accent #9DC0E8 5,41:1
       dieper  #0E2E52  wit 13,71:1, accent #9DC0E8 7,27:1 */
  --lvl-vlak-licht:  #EAF0F7;
  --lvl-vlak-mid:    #D8E3F0;
  --lvl-vlak-diep:   #154273;
  --lvl-vlak-dieper: #0E2E52;

  /* Lopende tekst op de middentint. Grijs haalt daar 4,10:1 en valt af. */
  --lvl-grijs-mid: #4A5563;

  /* De verticale lijn. Dit was de MARGELIJN, het dragende motief van de
     oude vormtaal; als motief is hij op 05-09-2026 vervallen. Wat
     overblijft is functioneel: de baan van de tijdlijn, de markering bij
     een open vraag, de kantlijn van een kruimelpad. Geen blok hangt er
     nog aan, en er staat nergens meer een lijn puur om er te staan.

     De tint is berekend en niet gekozen. Op de drie lichte gronden haalt
     #5F7391 4,83:1, 4,21:1 en 3,72:1 — overal boven de 3,0 van WCAG
     1.4.11. Bij hover verkleurt hij naar de drager. */
  --lvl-marge:       #5F7391;
  --lvl-marge-hover: #154273;
  --lvl-marge-dik:   3px;

  /* Afgeleiden. Geen paletkleuren; alleen toestanden en lijnen. */
  --lvl-drager-licht: rgba(21, 66, 115, 0.08);
  --lvl-regel:       rgba(21, 66, 115, 0.14);
  --lvl-regel-sterk: rgba(21, 66, 115, 0.28);

  /* Focus. Nooit goud: #B29146 haalt op wit 2,99:1 en blijft daarmee
     onder de 3,0 die WCAG 2.4.11 voor een focusindicator eist. */
  --lvl-focus: var(--lvl-drager);

  /* Knopkleuren als tokens, zodat een knop op de blauwe grond omkeert
     zonder dat een sjabloon een tweede knopklasse hoeft te kennen. */
  --lvl-knop-vlak:        #154273;
  --lvl-knop-tekst:       #FFFFFF;
  --lvl-knop-vlak-hover:  #123862;
  --lvl-knop-tekst-hover: #FFFFFF;

  /* De gouden knop. Zie de toelichting bij .lvl-knop-goud: de tekst is
     niet het merkblauw maar een donkerder blauw uit dezelfde familie,
     omdat het merkblauw op goud onder de 4,5:1 zakt. */
  --lvl-knop-goud-vlak:       #B29146;
  --lvl-knop-goud-vlak-hover: #C9A455;
  --lvl-knop-goud-tekst:      #0E2E52;
  --lvl-knop-goud-rand:       #B29146;

  --lvl-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, Helvetica, Arial, sans-serif;

  /* Vorm. Radius gelijk aan die van de knop: 10px. De 18px van de
     eerste opzet is vervallen met CLAUDE.md sectie 6 (01-09-2026). */
  --lvl-rond-kaart: 10px;
  --lvl-rond-knop:  10px;
  --lvl-rond-klein: 10px;
  --lvl-schaduw:      0 1px 2px rgba(21, 66, 115, 0.05),
                      0 10px 30px rgba(21, 66, 115, 0.08);
  --lvl-schaduw-diep: 0 2px 4px rgba(21, 66, 115, 0.06),
                      0 20px 50px rgba(21, 66, 115, 0.14);

  /* Maten. */
  --lvl-max:    1200px;
  --lvl-smal:   780px;
  --lvl-rand:   40px;

  /* Beweging. Kort en zonder zweefeffect; alles staat stil bij
     prefers-reduced-motion, zie hoofdstuk 10.

     --lvl-verschuif en --lvl-duur-inbeeld gelden voor het in beeld
     schuiven. Tot 10-09-2026 was dat 8px in 240ms: te weinig om op te
     merken, en de opdracht was dat je het moet zien gebeuren. Het staat
     nu op 22px in 480ms — genoeg verplaatsing om het te merken, kort
     genoeg om de pagina niet op te houden.

     --lvl-trap is de vertraging tussen twee elementen binnen dezelfde
     sectie, zodat ze na elkaar inschuiven en niet tegelijk. Zie
     .lvl-reeks in hoofdstuk 10. Vier stappen van 90ms zijn samen 270ms;
     daarboven wordt het wachten. */
  --lvl-duur-kort:    160ms;
  --lvl-duur-lang:    240ms;
  --lvl-duur-inbeeld: 480ms;
  --lvl-verschuif:    22px;
  --lvl-trap:         90ms;
  --lvl-soepel:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Verticale ritmiek. */
  --lvl-ruimte-1: 8px;
  --lvl-ruimte-2: 16px;
  --lvl-ruimte-3: 24px;
  --lvl-ruimte-4: 40px;
  --lvl-ruimte-5: 64px;
  --lvl-ruimte-6: 96px;
  --lvl-ruimte-7: 128px;
}

/* ------------------------------------------------------------------ *
 * 2. Basis en typografie
 * ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--lvl-papier);
  color: var(--lvl-inkt);
  font-family: var(--lvl-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--lvl-regel);
  margin: var(--lvl-ruimte-4) 0;
}

/* Koppen. Eén familie, het onderscheid komt uit gewicht en grootte. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--lvl-drager);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  /* Nederlands maakt woorden als "incassodienstverlening": 22 letters
     zonder plek om te breken. In een kop van 40px past dat op 390px niet
     in de kolom, en dan schuift de hele pagina opzij. Break-word grijpt
     alleen in als er werkelijk geen andere afbreekplek is; een kop die
     wel past merkt er niets van. Gemeten op 12-09-2026: de h1 van
     /kennisbank/wat-de-wki-voor-u-betekent duwde de pagina 33px breder
     dan het scherm. */
  overflow-wrap: break-word;
}

/* De schaal is op 05-09-2026 opgetrokken. De oude h1 liep tot 56px en
   de h2 tot 40px; op een breed scherm las dat als een document en niet
   als een pagina. Nu 72 en 52. Het maatverschil is wat de secties uit
   elkaar houdt sinds er geen getekende scheiding meer tussen staat. */
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);  font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.25rem);  line-height: 1.08; }
h3 { font-size: 1.3125rem; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

p, ul, ol, dl, figure, table {
  margin: 0;
}

/* De bedrijfsgegevens staan in dezelfde letter als de rest. Alleen de
   cijferuitlijning is anders, zodat een IBAN en een KvK-nummer onder
   elkaar netjes staan. */
.lvl-gegeven {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.lvl-kenmerk {
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.5;
}

.lvl-groot {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * 3. Layout, banden en kaarten
 * ------------------------------------------------------------------ */

.lvl-container {
  max-width: var(--lvl-max);
  margin: 0 auto;
  padding-left: var(--lvl-rand);
  padding-right: var(--lvl-rand);
}

.lvl-smal {
  max-width: var(--lvl-smal);
}

/* Leesbreedte voor de informatiepagina's: ruim genoeg voor twee kaarten
   naast elkaar, smal genoeg om een alinea in één blik te lezen. */
.lvl-midden {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.lvl-sectie {
  padding-top: var(--lvl-ruimte-5);
  padding-bottom: var(--lvl-ruimte-6);
}

/* Lopende tekst: alinea's die elkaar opvolgen, met een leesbreedte. */
.lvl-tekst {
  max-width: 68ch;
}

/* Een tekstblok met een foto ernaast. Dit is sinds 07-09-2026 de manier
   waarop beeld op de gewone pagina s binnenkomt: één rij, tekst in de
   ene kolom en de foto in de andere.

   De verdeling staat in twee variabelen en niet los in elke regel, want
   ze wordt op twee plekken gebruikt: één keer met de tekst voorop en één
   keer met het beeld voorop. Welke kant de foto op staat bepaalt de data
   met 'beeldkant'. De foto staat in de HTML vóór de tekst, zodat hij op
   één kolom bovenaan komt.

   Tot 12-09-2026 stond hier één vaste verdeling — 1,15 tekst en 0,85
   beeld — met order:2 om de foto naar rechts te zetten. Dat deed iets
   anders dan de regel eronder beweerde: order verplaatst het element
   maar niet de kolombreedte, dus stond de foto rechts op 0,85 en links
   op 1,15. Gemeten op 1440px: 435px rechts, 589px links. De maat hing
   dus aan de kant, en niemand had hem gekozen. Nu volgen de breedtes de
   rol en kiest de data de maat.

   De bestanden zijn 900px en de foto mag nergens boven de 700px CSS
   uitkomen; dat staat als max-width op .lvl-beeld zelf. */
.lvl-tekstbeeld {
  --lvl-kolom-tekst: 1.15fr;
  --lvl-kolom-beeld: 0.85fr;

  /* De tekstkolom heeft een bodem. Een verhouding alleen weet niet
     hoeveel ruimte er te verdelen valt: op 1280px geeft de ruime maat de
     tekst 435px, maar op 901px — net boven de grens waar de rij in één
     kolom valt — nog maar 308px, en dat is een regel van 36 tekens.
     Met 38ch (414px in deze letter) blijft de tekst op elke breedte op
     ongeveer 48 tekens staan en geeft het beeld terug wat er tekort is.
     De verhouding doet dus het werk zodra er ruimte is, en de bodem
     zodra die er niet is. */
  --lvl-kolom-min: 38ch;

  display: grid;
  grid-template-columns: minmax(var(--lvl-kolom-min), var(--lvl-kolom-tekst)) minmax(0, var(--lvl-kolom-beeld));
  gap: var(--lvl-ruimte-6);
  align-items: center;
}

.lvl-tekstbeeld-links {
  grid-template-columns: minmax(0, var(--lvl-kolom-beeld)) minmax(var(--lvl-kolom-min), var(--lvl-kolom-tekst));
}

.lvl-tekstbeeld-rechts .lvl-beeld {
  order: 2;
}

/* Twee maten, zodat twee tekst-met-beeldblokken op dezelfde pagina niet
   dezelfde rij zijn met de foto aan de andere kant. Gemeten op 1440px:
   ruim geeft een foto van 589px, smal van 384px, en de verdeling zonder
   maat blijft op 435px staan. Dat verschil is groot genoeg om als
   afwisseling te lezen en klein genoeg om binnen dezelfde kolommaat te
   blijven.

   Ruim is de kant van het onderwerp zelf; smal is de kant van een
   nuancering of een afbakening. De data kiest, want alleen daar is te
   zien wat het vorige blok deed. */
.lvl-tekstbeeld-ruim {
  --lvl-kolom-tekst: 0.85fr;
  --lvl-kolom-beeld: 1.15fr;
}

.lvl-tekstbeeld-smal {
  --lvl-kolom-tekst: 1.25fr;
  --lvl-kolom-beeld: 0.75fr;
}

.lvl-tekstbeeld .lvl-tekst {
  max-width: 56ch;
}

/* De smalle variant geeft de tekst een bredere kolom dan de leesmaat van
   56ch, en dan houdt de tekst rechts ruimte over waar de foto begint. Op
   1440px gemeten is dat 30px: de kolom is 640 en 56ch komt uit op 610.
   Weinig, maar het is precies de plek waar het oog de rand van de kolom
   zoekt. Met 64ch loopt de tekst door tot de kolom vol is.

   .lvl-sectie-intro staat erbij omdat /over-ons zijn tekst daarin zet en
   niet in .lvl-tekst. Daar bindt de maat op deze breedte niet — 58ch is
   al breder dan de kolom — maar de regel hoort er voor het geval de
   container ooit ruimer wordt.

   De regel geldt alleen zolang er twee kolommen zijn. In één kolom is de
   tekst geen smalle variant meer maar gewoon een alinea over de volle
   breedte, en dan maakt 64ch er 697px van: 82 tekens op een regel. Deze
   901 hoort bij de 900 verderop; verschuift de een, dan de ander. */
@media (min-width: 901px) {
  .lvl-tekstbeeld-smal .lvl-tekst,
  .lvl-tekstbeeld-smal .lvl-sectie-intro {
    max-width: 64ch;
  }
}

/* Op een blauwe grond mist de schaduw zijn werking; een lichte haarlijn
   maakt de foto daar los van het vlak. .lvl-omkeer is de klasse die elke
   omgekeerde band draagt: de hero, de kernzinband en de CTA. */
.lvl-omkeer .lvl-beeld-foto {
  box-shadow: none;
  outline: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: -1px;
}

@media (max-width: 900px) {
  .lvl-tekstbeeld {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lvl-ruimte-4);
  }

  .lvl-tekstbeeld-rechts .lvl-beeld {
    order: 0;
  }

  /* Hier stond tot 12-09-2026 max-width: 100% op .lvl-beeld, zodat de
     foto in één kolom de volle breedte pakte. Dat hief de enige harde
     bovengrens van het thema op: gemeten op een venster van 900px werd
     de foto 820px breed, en op 768px werd hij 728px. CLAUDE.md sectie 6
     zegt dat de kolom nooit breder is dan 700px CSS en dat die grens één
     keer staat, op .lvl-beeld. De regel is eruit; boven de 700px houdt
     de foto nu op en staat de rest van de kolom leeg, links uitgelijnd
     met de tekst eronder. */
}
.lvl-tekst > p {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-tekst > p:first-child {
  margin-top: 0;
}

/* Een opsomming die op een alinea volgt kreeg niets: .lvl-tekst > p regelt
   alleen de ruimte tussen alinea's, en .lvl-punten heeft zelf enkel gap
   tussen zijn items. De eerste bolletjesregel plakte daardoor tegen de
   laatste zin. Gezien op 12-09-2026 op /over-ons en /incasso. */
.lvl-tekst > p + .lvl-punten {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-tekst h2,
.lvl-tekst h3 {
  margin-top: var(--lvl-ruimte-4);
}

.lvl-tekst > :first-child {
  margin-top: 0;
}

/* Ruimer dan voorheen: 96 → 128px. Witruimte is sinds 05-09-2026 het
   middel waarmee twee secties uit elkaar liggen. */
.lvl-band {
  padding-top: var(--lvl-ruimte-7);
  padding-bottom: var(--lvl-ruimte-7);
}

/* De gronden. Elke sectie kiest er één; twee gelijke gronden staan nooit
   achter elkaar.

   Tot 01-09-2026 was elke grond één egale kleur met een haarlijn erboven
   en eronder. Dat gaf de pagina een stapel gesloten stroken: je zag
   steeds de rand van een blok en niet de overgang van het ene onderwerp
   naar het volgende. De tint zit nu in het midden van de band en dooft
   naar boven en beneden uit naar wit, zodat twee lichte secties in
   elkaar overlopen en de kleur van de band zelf pas achter de tekst op
   volle sterkte staat. De haarlijnen zijn daarmee overbodig geworden en
   vervallen.

   Contrast: het verloop maakt de grond alleen lichter dan de bandkleur,
   nooit donkerder, en de tabel bij :root rekent met de bandkleur. Elk
   getal daar blijft dus de ondergrens. */
/* Een band is een vlak en geen verloop meer. Tot 07-09-2026 liep elke
   band aan de boven- en onderkant uit naar wit; twee secties gingen
   daardoor in elkaar over en het onderscheid dat de grond moet maken,
   was op de naad juist weg. De opdracht was sterker contrast tussen
   secties, en dat begint bij een grens die er is. */
.lvl-band-licht {
  background: var(--lvl-vlak-licht);
}

/* De middentint draagt geen grijze lopende tekst: #6B6B6B haalt daar
   4,10:1. Op deze grond schakelt het grijstoken naar #4A5563 (5,83:1).
   Dat is dezelfde ingreep als bij .lvl-omkeer: één token om, en elke
   regel die het gebruikt klopt vanzelf mee. */
.lvl-band-mid {
  background: var(--lvl-vlak-mid);

  --lvl-grijs: var(--lvl-grijs-mid);
}

/* De omkering op de blauwe grond gebeurt op de tokens, niet op de
   losse regels. Elke regel die --lvl-grijs of --lvl-regel gebruikt
   klopt daarmee vanzelf ook op blauw, en de contrastafweging staat op
   één plek. Wit op #154273 haalt 10,2:1, wit op 76% haalt 6,7:1. */
.lvl-omkeer {
  background: var(--lvl-vlak-diep);
  color: var(--lvl-papier);

  --lvl-inkt:        #FFFFFF;
  --lvl-grijs:       rgba(255, 255, 255, 0.76);
  --lvl-regel:       rgba(255, 255, 255, 0.22);
  --lvl-regel-sterk: rgba(255, 255, 255, 0.42);
  --lvl-lijn-sterk:  rgba(255, 255, 255, 0.62);
  --lvl-marge:       rgba(255, 255, 255, 0.42);
  --lvl-marge-hover: #FFFFFF;
  --lvl-drager-licht: rgba(255, 255, 255, 0.12);
  --lvl-focus:       #FFFFFF;

  /* De blauwe knop op blauw wordt wit met blauwe tekst: 10,2:1. De
     hover is een lichtblauwe tint met het diepste blauw erop: 10,95:1.
     Tot 05-09-2026 was die hover goud; goud staat nu alleen nog op de
     knop "Vordering indienen". */
  --lvl-knop-vlak:        #FFFFFF;
  --lvl-knop-tekst:       #154273;
  --lvl-knop-vlak-hover:  #DCE7F3;
  --lvl-knop-tekst-hover: #0E2E52;

}

.lvl-omkeer h1,
.lvl-omkeer h2,
.lvl-omkeer h3,
.lvl-omkeer h4 {
  color: var(--lvl-papier);
}

/* Het accent in een kop, op de blauwe grond. Het was goud (3,42:1) en is
   sinds 05-09-2026 lichtblauw: 5,41:1 op #154273 en 7,27:1 op #0E2E52,
   waarmee het ook in een alinea zou mogen. Het blijft niettemin voor
   koppen: één geaccentueerd woord per band, anders accentueert het
   niets. */
.lvl-omkeer .lvl-accent {
  color: var(--lvl-accent-op-blauw);
}

/* --- Sectiekop met label ---------------------------------------- */

/* Het kleine label boven de sectiekop. Het stond tot 05-09-2026 met een
   gouden lijn die tot de rechterrand doorliep. Goud is weg en de lijn
   met hem: het label draagt zichzelf nu met kapitalen en spatiëring, en
   de sectie springt eruit door zijn grond en de maat van zijn kop.

   Links uitgelijnd, nooit gecentreerd. */
.lvl-sectielabel {
  margin-bottom: var(--lvl-ruimte-2);
  color: var(--lvl-drager);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lvl-omkeer .lvl-sectielabel {
  color: var(--lvl-accent-op-blauw);
}

/* Groter dan voorheen: 30 → 52px op een breed scherm. De kop is het
   sterkste maatverschil op de pagina en doet het werk dat de
   sectiescheiding vroeger deed. */
.lvl-sectiekop {
  max-width: 18ch;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.lvl-sectie-intro {
  margin-top: var(--lvl-ruimte-3);
  max-width: 58ch;
  color: var(--lvl-grijs);
  font-size: 1.125rem;
  line-height: 1.6;
}

.lvl-sectie-intro p + p {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-sectiehoofd {
  margin-bottom: var(--lvl-ruimte-5);
}

/* --- Kaarten ----------------------------------------------------- */

/* Sinds 05-09-2026 is de kaart weer de gewone vorm. Onder de oude
   vormtaal was hij dat niet: wat aan de margelijn hing was een blok
   tussen haarlijnen, en een kaart mocht alleen wat werkelijk los stond.
   Die regel is met de margelijn vervallen. */
.lvl-kaart {
  background: var(--lvl-papier);
  border: 1px solid var(--lvl-regel);
  border-radius: var(--lvl-rond-kaart);
  box-shadow: var(--lvl-schaduw);
  padding: var(--lvl-ruimte-4);
  transition: box-shadow 160ms ease, transform 160ms ease,
              border-color 160ms ease;
}

.lvl-kaart h3 {
  margin-bottom: var(--lvl-ruimte-2);
  font-size: 1.3125rem;
}

.lvl-kaart p {
  color: var(--lvl-grijs);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Een kaart die zelf een link bevat, komt bij hover omhoog en zet zijn
   rand aan. Eén beweging, en die is groter dan voorheen: hover moet
   merkbaar zijn. */
.lvl-kaart-actief:hover {
  box-shadow: var(--lvl-schaduw-diep);
  border-color: var(--lvl-regel-sterk);
  transform: translateY(-4px);
}


/* --- Opsommingen -------------------------------------------------- */

/* Elk opsommingsitem hing tot 05-09-2026 aan een margelijn: een
   verticale streep links van de regel. Dat motief is vervallen.

   Wat ervoor in de plaats komt is géén vinkje. Een vinkje leest als een
   score, en bij een ontkenning leest het ronduit verkeerd; dat was de
   reden dat de margelijn er destijds voor in de plaats kwam. Het is nu
   een kleine vierkante stip in de drager: een markering die geen
   uitspraak doet. */
.lvl-punten {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--lvl-ruimte-2);
}

.lvl-punten li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}

.lvl-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lvl-drager);
}

.lvl-omkeer .lvl-punten li::before {
  background: var(--lvl-accent-op-blauw);
}

/* In de hero staan de drie punten niet onder maar naast elkaar. Op één
   regel lezen ze als een korte opsomming van wat de dienst is; onder
   elkaar lazen ze als een lijstje dat je moet doornemen, en dat is de
   toon die op 05-09-2026 van de pagina af moest. Onder de 900 valt de
   rij vanzelf terug op één kolom; dat staat bij de smalle schermen. */
.lvl-punten-rij {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--lvl-ruimte-4);
}

/* Tot 10-09-2026 stond boven elk punt een streep van 2px over de volle
   kolombreedte. Drie van die strepen naast elkaar in de hero lazen als
   opvulling en niet als markering; ze zijn eruit, en de stip die er toen
   voor moest wijken is terug. Eén markering per item, en die is klein. */
.lvl-punten-rij li {
  padding-left: 22px;
  font-size: 0.9375rem;
}

.lvl-punten-rij li::before {
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lvl-accent-op-blauw);
}

/* --- Beeldplaatsen ----------------------------------------------- */

/* Een beeldplaats is óf een foto, óf — zolang die er niet is — een met CSS
   getekend vlak met het bijschrift eronder. Beide hangen aan dezelfde
   vormklassen, dus de opmaak verspringt niet als er een foto bij komt. */
.lvl-beeld {
  position: relative;
  margin: 0;
  /* De harde bovengrens. De bestanden in de beeldbank zijn 1000px
     breed en het thema snijdt ze naar 800 of 900. Boven de 700px CSS
     wordt zo n foto opgeschaald en zichtbaar zacht, dus staat hier de
     grens en niet in elke sectie apart. Wie een beeld breder wil, moet
     eerst een breder bestand hebben. */
  max-width: 700px;
}

/* Geen schaduw. CLAUDE.md sectie 6 houdt schaduw bij wat je kunt aanraken
   of wat werkelijk zweeft: het kernfeitenblok, een aanklikbare kaart en een
   knop. Een foto is geen van drieën. Tot 07-09-2026 stond hij hier wel; met
   vijf foto's op de site viel dat nauwelijks op, met 22 werd het een halo
   om elk beeld. */
.lvl-beeld-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lvl-rond-kaart);
}

.lvl-beeld-vlak {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lvl-rond-kaart);
  background-color: #E7EBF1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(21, 66, 115, 0.09) 0,
    rgba(21, 66, 115, 0.09) 1px,
    transparent 1px,
    transparent 12px
  );
  box-shadow: var(--lvl-schaduw);
}

.lvl-beeld-vlak span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lvl-papier);
  color: var(--lvl-drager);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lvl-beeld-breed .lvl-beeld-vlak   { aspect-ratio: 16 / 9; }
.lvl-beeld-liggend .lvl-beeld-vlak { aspect-ratio: 4 / 3; }
.lvl-beeld-staand .lvl-beeld-vlak  { aspect-ratio: 3 / 4; }

.lvl-beeld figcaption {
  margin-top: var(--lvl-ruimte-2);
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* De hoekmarkering: een kort feitelijk label dat op de foto valt. Het
   benoemt het onderwerp en nooit een resultaat — een badge met een
   score of een doorlooptijd erin valt onder de harde grenzen in
   CLAUDE.md sectie 2. Sinds 05-09-2026 is het een vol blauw plaatje op
   de foto in plaats van een blokje aan een margelijn. */
.lvl-beeld-markering {
  position: absolute;
  left: var(--lvl-ruimte-3);
  bottom: var(--lvl-ruimte-3);
  margin-top: 0;
  padding: 10px var(--lvl-ruimte-3);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-diep);
  color: var(--lvl-papier);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * 4. Knoppen en links
 * ------------------------------------------------------------------ */

a {
  color: var(--lvl-drager);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms linear, background-color 120ms linear,
              border-color 120ms linear, text-decoration-color 120ms linear;
}

a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lvl-lijn-sterk);
}

.lvl-omkeer a {
  color: var(--lvl-papier);
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.lvl-omkeer a:hover {
  text-decoration-color: var(--lvl-lijn-sterk);
}

.lvl-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lvl-knop-vlak);
  color: var(--lvl-knop-tekst);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--lvl-rond-knop);
  box-shadow: var(--lvl-schaduw);
  text-decoration: none;
  cursor: pointer;
}

.lvl-knop:hover {
  background: var(--lvl-knop-vlak-hover);
  color: var(--lvl-knop-tekst-hover);
  text-decoration: none;
  box-shadow: var(--lvl-schaduw-diep);
}

/* Knoppen houden hun eigen kleur: .lvl-omkeer a is een a-selector met
   een klasse ervoor en zou anders van .lvl-knop winnen. */
.lvl-omkeer .lvl-knop {
  color: var(--lvl-knop-tekst);
  text-decoration: none;
}

.lvl-omkeer .lvl-knop:hover {
  color: var(--lvl-knop-tekst-hover);
}

/* De gouden knop. Sinds 05-09-2026 is dit de ENIGE plek op de hele site
   waar goud voorkomt, en hij hangt altijd aan dezelfde actie: een
   vordering indienen. Staat er goud op een lijn, een kader, een
   scheiding of een woord, dan is dat een fout.

   Gevraagd was #B29146 met donkerblauwe tekst. Met het merkblauw
   #154273 haalt dat 3,42:1 en dat zakt onder de 4,5:1 die WCAG voor
   knoptekst van deze grootte vraagt. De tekst is daarom #0E2E52, een
   donkerder blauw uit dezelfde familie: 4,59:1.

   Bij hover wordt het goud lichter in plaats van donkerder. Donkerder
   zou het contrast met de blauwe tekst juist verlagen; lichter haalt
   5,83:1.

   Geen gloed eronder. Tot 05-09-2026 lag er een gouden box-shadow onder
   de knop, op de blauwe gronden een sterkere. Die is eruit: hij maakte
   van de knop een zwevend object en verspreidde het goud over een vlak
   dat drie keer zo groot was als de knop zelf.

   De derde selector is er voor de knop in de navigatie: die verliest
   anders van .lvl-navigatie .lvl-knop, dat verderop staat. */
.lvl-knop-goud,
.lvl-omkeer .lvl-knop-goud,
.lvl-navigatie .lvl-knop.lvl-knop-goud {
  background: var(--lvl-knop-goud-vlak);
  color: var(--lvl-knop-goud-tekst);
  border: 2px solid var(--lvl-knop-goud-rand);
  box-shadow: none;
}

.lvl-knop-goud:hover,
.lvl-omkeer .lvl-knop-goud:hover,
.lvl-navigatie .lvl-knop.lvl-knop-goud:hover {
  background: var(--lvl-knop-goud-vlak-hover);
  color: var(--lvl-knop-goud-tekst);
  border-color: var(--lvl-knop-goud-vlak-hover);
}

/* De tweede knop: open, met een lijn eromheen. De hover was tot
   05-09-2026 goud; hij is nu de drager zelf. */
.lvl-knop-open {
  background: transparent;
  color: var(--lvl-drager);
  border: 2px solid var(--lvl-regel-sterk);
  box-shadow: none;
}

.lvl-knop-open:hover {
  background: var(--lvl-drager);
  color: var(--lvl-papier);
  border-color: var(--lvl-drager);
  box-shadow: none;
}

.lvl-omkeer .lvl-knop-open {
  background: transparent;
  color: var(--lvl-papier);
  border-color: rgba(255, 255, 255, 0.78);
}

/* Wit vlak met de drager erop: 10,2:1. */
.lvl-omkeer .lvl-knop-open:hover {
  background: var(--lvl-papier);
  color: var(--lvl-drager);
  border-color: var(--lvl-papier);
}

.lvl-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-2);
  margin-top: var(--lvl-ruimte-4);
}

/* Een link die als actie leest, zonder knopvorm. */
.lvl-actie {
  font-weight: 600;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ *
 * 5. Koptekst en navigatie
 * ------------------------------------------------------------------ */

/* De dunne balk bovenaan met de kernpunten. Twee korte uitspraken die
   allebei na te gaan zijn — geen beloftes over tijd of uitkomst.

   Alleen deze balk staat op blauw, en op het diepste blauw uit het
   palet: #0E2E52. Hij is een strip en geen vlak — 10px boven en onder de
   tekst — en hij markeert de bovenrand van de pagina.

   De koptekst eronder is wit. Balk en koptekst zijn op 01-09-2026 een
   halve dag allebei blauw geweest, in de gedachte dat ze dan met de hero
   één veld zouden vormen; het resultaat was dat de bovenste 200px van
   elke pagina blauw was voordat er ook maar iets stond. Teruggedraaid.
   De volgorde is nu blauwe strip, witte koptekst, blauwe hero. */
.lvl-topbalk {
  background: var(--lvl-vlak-dieper);
  font-size: 0.8125rem;
}

.lvl-topbalk .lvl-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lvl-ruimte-3);
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.lvl-topbalk ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-1) var(--lvl-ruimte-4);
  list-style: none;
  padding: 0;
  font-weight: 500;
}

.lvl-topbalk li {
  position: relative;
  padding-left: 20px;
}

.lvl-topbalk li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lvl-accent-op-blauw);
}

/* De twee links rechts in de balk: de debiteur en het portaal. Ze staan
   naast elkaar in één blok, zodat het uitvullen van de balk de
   kernpunten links en deze twee rechts houdt en niet de drie los van
   elkaar uit elkaar trekt. */
.lvl-topbalk-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lvl-ruimte-1) var(--lvl-ruimte-3);
}

.lvl-topbalk-debiteur,
.lvl-topbalk-portaal {
  font-weight: 600;
}

/* Het portaal is een inlog en geen uitnodiging: iets minder nadruk dan
   de regel ernaast, met de scheiding als lijntje ervoor. Wit op 76%
   haalt op #0E2E52 ruim boven 4,5:1. */
.lvl-topbalk-portaal {
  position: relative;
  padding-left: var(--lvl-ruimte-3);
  color: var(--lvl-grijs);
}

.lvl-topbalk-portaal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: var(--lvl-regel-sterk);
}

.lvl-topbalk-portaal:hover {
  color: var(--lvl-papier);
}

/* De koptekst is wit en draagt het blauwe woordmerk. De haarlijn onderaan
   scheidt hem van de lichte pagina eronder; op de homepage is die grens
   het blauw van de hero en valt de lijn weg in het contrast. */
.lvl-kop {
  background: var(--lvl-papier);
  border-bottom: 1px solid var(--lvl-regel);
}

.lvl-kop .lvl-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lvl-ruimte-4);
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

.lvl-woordmerk {
  display: block;
  line-height: 1.15;
  color: var(--lvl-inkt);
  text-decoration: none;
}

/* Het beeldmerk is 800x150; de breedte krimpt mee zodat het naast het menu
   blijft passen zonder dat er een breekpunt aan te pas komt. De hoogte volgt
   uit de verhouding, dus width en height op de <img> voorkomen dat de
   koptekst verspringt terwijl het beeld nog laadt. */
.lvl-woordmerk-beeld {
  display: block;
  width: clamp(180px, 20vw, 236px);
  height: auto;
}

.lvl-colofon .lvl-woordmerk-beeld {
  width: 210px;
}

/* De regel 'incassobureau b.v.' onder het woordmerk is vervallen
   (31-08-2026, homepagetekst v2). De statutaire naam staat nog voluit in
   het colofon van elke pagina; zie de toelichting bij looijmans_woordmerk()
   in inc/template-tags.php. */

.lvl-navigatie {
  display: flex;
  align-items: center;
  gap: var(--lvl-ruimte-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lvl-navigatie ul {
  display: flex;
  align-items: center;
  gap: var(--lvl-ruimte-3);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.lvl-navigatie a {
  color: var(--lvl-inkt);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.lvl-navigatie a:hover {
  border-bottom-color: var(--lvl-regel-sterk);
}

/* Het actieve item krijgt de blauwe onderlijn. De vetgang doet het werk;
   de lijn markeert. Kleur is nooit de enige aanwijzing. */
.lvl-navigatie .current-menu-item > a,
.lvl-navigatie .current_page_item > a,
.lvl-navigatie a[aria-current='page'] {
  border-bottom-color: var(--lvl-lijn-sterk);
  color: var(--lvl-drager);
}

/* De knop in de navigatie. Zonder deze regel wint .lvl-navigatie a van
   .lvl-knop en krijgt de knop inktkleurige tekst op een blauwe vulling. */
.lvl-navigatie .lvl-knop {
  color: var(--lvl-knop-tekst);
  border-bottom: 0;
  padding: 12px 20px;
  font-size: 0.9375rem;
}

.lvl-navigatie .lvl-knop:hover {
  color: var(--lvl-knop-tekst-hover);
  border-bottom: 0;
}

/* --- De menuknop op smalle schermen ------------------------------ */

/* Tot 12-09-2026 was er geen. De navigatie was één rij die netjes
   afbrak, en dat werkte ook — er viel niets buiten beeld — maar het
   kostte ruimte: op 390px was de koptekst 265px hoog en stond er samen
   met de bovenbalk 381px chroom boven de eerste letter van de pagina.
   Op een telefoon is dat het hele scherm.

   De knop is geen tekening maar een bediening: drie streepjes met het
   woord "Menu" ernaast. Het woord staat er los bij, zodat de betekenis
   niet alleen in de vorm zit. Bij openen draaien de twee buitenste
   streepjes tot een kruis en verdwijnt het middelste.

   Hij is verborgen tot de CSS hem onder 940px zichtbaar maakt, en dan
   alleen achter .lvl-js. Zonder JavaScript is er niets dat hem laat
   werken en blijft het menu staan zoals het stond. */
.lvl-menuknop {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-knop);
  background: var(--lvl-papier);
  color: var(--lvl-inkt);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lvl-menuknop:hover {
  background: var(--lvl-vlak-licht);
}

/* Het middelste streepje is de span zelf; de twee andere zijn zijn
   pseudo-elementen. Ze staan op 2px, want een haarlijn van 1px is op een
   telefoon nauwelijks te zien. */
.lvl-menuknop-strepen,
.lvl-menuknop-strepen::before,
.lvl-menuknop-strepen::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--lvl-drager);
  transition: transform var(--lvl-duur-kort) var(--lvl-soepel),
              background-color var(--lvl-duur-kort) ease;
}

.lvl-menuknop-strepen {
  position: relative;
}

.lvl-menuknop-strepen::before {
  content: "";
  position: absolute;
  top: -6px;
}

.lvl-menuknop-strepen::after {
  content: "";
  position: absolute;
  top: 6px;
}

.lvl-menuknop[aria-expanded="true"] .lvl-menuknop-strepen {
  background: transparent;
}

.lvl-menuknop[aria-expanded="true"] .lvl-menuknop-strepen::before {
  transform: translateY(6px) rotate(45deg);
}

.lvl-menuknop[aria-expanded="true"] .lvl-menuknop-strepen::after {
  transform: translateY(-6px) rotate(-45deg);
}

@keyframes lvl-menu-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* 940px: de koptekst past gemeten tot 911px op één regel. De grens ligt
   er met marge boven, want die 911 hangt aan de breedte van het
   woordmerk en de vijf menuwoorden in deze letter. Dezelfde 940 staat in
   assets/js/looijmans.js en de twee horen gelijk te blijven.

   Alles hieronder staat achter .lvl-js. Draait er geen JavaScript, dan
   verandert er onder deze grens niets en blijft het menu zichtbaar. */
@media (max-width: 940px) {

  /* De twee kernpunten vervallen hier, en deze regel staat met opzet
     niet achter .lvl-js: hij hangt niet aan de menuknop maar aan de
     breedte. Gemeten op 12-09-2026 was de balk op 390px 116px hoog —
     hoger dan de koptekst eronder — en dat kwam vrijwel geheel door de
     twee opsommingsregels. Wat overblijft zijn de twee ingangen voor de
     bezoeker die niet voor de dienst komt; die horen hier omdat ze
     nergens anders bovenaan staan. De kernpunten staan wel elders: op de
     homepage en op /over-ons. Het registratienummer, dat de Wki wél
     verlangt, staat in de voettekst van elke pagina en niet hier. */
  .lvl-topbalk ul {
    display: none;
  }

  .lvl-js .lvl-menuknop {
    display: inline-flex;
  }

  .lvl-js .lvl-navigatie {
    display: none;
  }

  /* De rijafstand van de koptekst is op deze breedte de afstand tussen
     het woordmerk en het uitgeklapte menu. Veertig pixels is daar te
     veel; de scheidingslijn doet het werk al. */
  .lvl-js .lvl-kop .lvl-container {
    gap: var(--lvl-ruimte-2);
  }

  .lvl-js .lvl-navigatie.is-open {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--lvl-ruimte-1);
    border-top: 1px solid var(--lvl-regel);
    animation: lvl-menu-open var(--lvl-duur-lang) var(--lvl-soepel);
  }

  .lvl-js .lvl-navigatie.is-open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .lvl-js .lvl-navigatie.is-open li {
    border-bottom: 1px solid var(--lvl-regel);
  }

  /* Vijftien pixels boven en onder een regel van 17px maakt het
     aanraakvlak 47px hoog, over de volle breedte van het scherm. */
  .lvl-js .lvl-navigatie.is-open a {
    display: block;
    padding: 15px 0;
    border-bottom: 0;
    font-size: 1.0625rem;
  }

  /* De onderlijn die op de brede koptekst het actieve item markeert kan
     hier niet: die valt samen met de scheiding tussen twee regels. De
     markering gaat daarom onder het woord zelf zitten. Kleur blijft ook
     hier niet de enige aanwijzing. */
  .lvl-js .lvl-navigatie.is-open .current-menu-item > a,
  .lvl-js .lvl-navigatie.is-open .current_page_item > a,
  .lvl-js .lvl-navigatie.is-open a[aria-current='page'] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .lvl-js .lvl-navigatie.is-open .lvl-knop {
    margin-top: var(--lvl-ruimte-3);
    padding: 15px 20px;
    text-align: center;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------ *
 * 6. Homepage
 * ------------------------------------------------------------------ */

/* --- Hero -------------------------------------------------------- */

/* De hero is een vol blauw vlak met de tekst links en een foto rechts.

   Overwogen en verworpen op 05-09-2026, en dat blijft verworpen: een
   paginabrede foto met een blauw vlak van 70% eroverheen. De beeldbank
   gaat niet boven 1000px breed, dus zo'n hero is een opgeschaalde foto
   die je achter een waas niet ziet.

   Wat er op 07-09-2026 wél terugkomt is het beeld naast de tekst. Het
   bestand is 800x600 en de kolom haalt op het breedste scherm 520px,
   dus het wordt verkleind en nooit opgerekt. Onder de 900px valt het
   beeld onder de tekst; onder de 640px verdwijnt het helemaal, want
   daar kost het alleen laadtijd en duwt het de knoppen buiten beeld.

   Het diepteverloop loopt van #0E2E52 naar #154273 en maakt de grond
   alleen donkerder dan #154273, dus de contrastgetallen bij :root
   blijven de ondergrens. */
.lvl-hero {
  padding-top: var(--lvl-ruimte-7);
  padding-bottom: calc(var(--lvl-ruimte-7) + var(--lvl-ruimte-4));
  background: radial-gradient(
      120% 140% at 15% 0%,
      #1B5089 0%,
      var(--lvl-vlak-diep) 45%,
      var(--lvl-vlak-dieper) 100%
    );
}

.lvl-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: var(--lvl-ruimte-6);
}

.lvl-hero-tekst {
  display: grid;
  gap: var(--lvl-ruimte-4);
  max-width: 36rem;
}

.lvl-hero h1 {
  max-width: 16ch;
}

.lvl-hero .lvl-groot {
  margin-top: var(--lvl-ruimte-3);
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
}

/* De kop op de homepage mag groter dan waar ook op de site: dit is de
   regel die moet vertellen wat wij doen aan iemand die dat nog niet
   weet. De maat staat op .lvl-hero-tekst en niet op .lvl-hero, want de
   intakepagina deelt de hero en heeft daar een langere kop staan. */
.lvl-hero-tekst h1 {
  max-width: 17ch;
  font-size: clamp(2.375rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.lvl-hero-tekst .lvl-groot {
  max-width: 44ch;
}

/* De knoppen staan groter dan elders op de site: dit is de plek waar de
   bezoeker kiest. */
.lvl-hero .lvl-acties {
  margin-top: var(--lvl-ruimte-4);
}

.lvl-hero .lvl-knop {
  padding: 16px 28px;
  font-size: 1.0625rem;
}

/* Op de homepage is de kop twee woordgroepen: "Uw facturen." en "Ons
   probleem." De tweede hoort op een eigen regel te beginnen, anders
   lopen ze in elkaar over en leest de accentkleur als nadruk midden in
   een zin. Eigen klasse, want de intakepagina deelt .lvl-hero-tekst en
   heeft daar één doorlopende kop staan. */
.lvl-accent-blok {
  display: block;
}

/* De herofoto. De opdracht van 10-09-2026 was dat hij meer moet
   springen. Wat er niet mag: schaduw onder een foto (CLAUDE.md sectie
   6), en opschalen boven de 800px die het bestand breed is.

   Wat er wél kan is een kleurvlak dat onder de foto uit steekt. Dat is
   een vlak en geen schaduw: het heeft een eigen kleur uit het palet,
   staat op een eigen plek en leest als tweede laag, niet als diepte
   onder het beeld. Het vlak is lichtblauw op 22% — donker genoeg om op
   #154273 te zien, licht genoeg om de foto niet te beconcurreren.

   Daar komt één beweging bij: de foto komt binnen op 106% en zakt naar
   100% terug, achter een figure die overloop afsnijdt. Er zweeft niets
   en er draait niets; het beeld zet zich vast in plaats van te
   verschijnen. Bij prefers-reduced-motion staat het meteen goed. */
.lvl-hero-beeld {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 700px;
}

.lvl-hero-beeld::before {
  content: "";
  position: absolute;
  right: calc(var(--lvl-ruimte-3) * -1);
  bottom: calc(var(--lvl-ruimte-3) * -1);
  width: 72%;
  height: 72%;
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-accent-op-blauw);
  opacity: 0.26;
}

.lvl-hero-beeld .lvl-beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--lvl-rond-kaart);
}

/* Op 13-09-2026 kreeg het kader de verhouding 4:5. Reden: de foto stond
   op 474 bij 355 in een hero van bijna 800 hoog, en dan blijft er
   rechtsonder een groot leeg blauw vlak over. De opdracht van 10-09-2026
   was dat de foto meer aanwezigheid moet hebben, en die zit hier in
   schaal en niet in nog een effect.

   Hoger en niet breder, met opzet: het bestand is 800 bij 600 en boven
   de 500px CSS wordt het op een scherm met dubbele pixeldichtheid
   zichtbaar zacht. Bij 474 breed en 592 hoog dekt de bron 787 bij 590 af
   en snijdt object-fit er horizontaal 60% uit; dat is nog altijd 1,7
   keer de weergavemaat. Wie hem breder wil, heeft eerst een breder
   bestand nodig — zie de grens van 700px op .lvl-beeld. */
.lvl-hero-beeld .lvl-beeld {
  aspect-ratio: 4 / 5;
}

.lvl-hero-beeld .lvl-beeld-foto {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* De drie punten staan op de homepage onder elkaar en niet naast elkaar.
   Naast elkaar was juist toen de kop over de volle breedte liep; nu deelt
   de tekst de band met een foto en is de kolom 34rem, en daar breekt een
   punt van zes woorden in vier regels. */
.lvl-hero-tekst .lvl-punten-rij {
  grid-auto-flow: row;
  gap: var(--lvl-ruimte-3);
}

/* De responsieve regels van de hero staan hier en niet in hoofdstuk 10,
   om dezelfde reden als bij de intakepagina: wie de hero verandert moet
   niet driehonderd regels verderop hoeven kijken wat dat op mobiel doet.

   Onder de 900px past de tekst niet meer naast een foto van 800px zonder
   dat er één van beide in de knel komt; dan valt het beeld eronder.
   Onder de 640px verdwijnt het: daar staat het tussen de kop en de
   knoppen in en duwt het de hoofdactie buiten het scherm. */
@media (max-width: 900px) {
  .lvl-hero-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lvl-ruimte-5);
  }

  .lvl-hero-tekst {
    max-width: none;
  }

  /* De foto staat hier onder de tekst over de volle kolom. Een
     verhouding van 4:5 is daar 700 bij 875 en duwt de knoppen van het
     scherm; terug naar de verhouding van het bestand zelf. */
  .lvl-hero-beeld .lvl-beeld {
    aspect-ratio: auto;
  }

  .lvl-hero-beeld .lvl-beeld-foto {
    height: auto;
  }
}

@media (max-width: 640px) {
  /* Het hele omhulsel eruit, niet alleen de figure: anders blijft het
     kleurvlak van ::before als los blok in de hero staan. */
  .lvl-hero-beeld {
    display: none;
  }
}
/* --- Kernfeiten -------------------------------------------------- */

/* Het enige element op de pagina dat over een sectiegrens valt en het
   enige met een schaduw. Dat is de afspraak uit CLAUDE.md sectie 6:
   een schaduw betekent dat iets echt op het blad ligt, en als alles
   een schaduw heeft betekent hij niets meer.

   Hier stond tot 01-09-2026 een lopende band met de kernpunten uit de
   dunne balk bovenaan. Die herhaalde zichzelf en is vervallen.

   Wat er in dit blok mag staan, staat als harde grens in CLAUDE.md
   sectie 2: uitsluitend feiten over de procedure. De getallen tellen
   bij binnenkomst op, en dat is exact het idioom waarin de oude site
   "93% slagingskans" zette. */
.lvl-kernfeiten-band {
  position: relative;
  z-index: 2;
  padding-bottom: var(--lvl-ruimte-5);
}

/* De bovenrand was tot 05-09-2026 3px goud. Goud staat nu alleen nog op
   de knop; de rand is de drager zelf. */
.lvl-kernfeiten {
  margin-top: calc(var(--lvl-ruimte-5) * -1);
  padding: var(--lvl-ruimte-5) var(--lvl-ruimte-4);
  border-top: 4px solid var(--lvl-drager);
  border-radius: 0 0 var(--lvl-rond-kaart) var(--lvl-rond-kaart);
  background: var(--lvl-papier);
  box-shadow: var(--lvl-schaduw-diep);
}

.lvl-kernfeiten ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lvl-ruimte-4);
}

.lvl-kernfeiten li {
  padding-left: var(--lvl-ruimte-3);
  border-left: 1px solid var(--lvl-regel);
}

.lvl-kernfeiten li p:last-child {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

/* Het getal in tabellarische cijfers, zodat het tijdens het optellen
   niet van breedte verspringt. */
.lvl-kernfeit-getal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--lvl-drager);
  font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.lvl-kernfeit-eenheid {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- De kernzin -------------------------------------------------- */

/* Eén uitspraak op de diepste grond, met de vindplaats eronder. De
   bronregel is geen sierlijn: wie wil nagaan of dit klopt, kan het
   nagaan. Dat is het verschil tussen deze zin en een slogan.

   De margelijn ervoor is op 05-09-2026 vervallen. De zin draagt zichzelf
   met zijn maat en met de donkerste grond van de site. */
/* Deze band is krapper dan de rest, en dat is sinds 13-09-2026 het enige
   ritme dat de site kent: hoe kort de inhoud is, bepaalt hoe diep de band
   staat. Elke band stond op ruimte-7. Gemeten op /over-ons en /uw-dossier
   droeg deze 109px inhoud in een band van 365px — bijna driekwart leeg
   vlak, en dan op de donkerste grond van de site, waar leegte het zwaarst
   weegt. Met ruimte-5 wordt hij 237px. Onder 780px schaalt het token zelf
   mee naar 48px, dus hier staat geen tweede regel voor mobiel. */
.lvl-kernzin-band {
  padding-top: var(--lvl-ruimte-5);
  padding-bottom: var(--lvl-ruimte-5);
  background: var(--lvl-vlak-dieper);
}

.lvl-kernzin {
  margin: 0;
}

.lvl-kernzin p {
  max-width: 26ch;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lvl-kernzin footer {
  margin-top: var(--lvl-ruimte-3);
  font-size: 0.9375rem;
}

.lvl-kernzin footer a {
  color: var(--lvl-accent-op-blauw);
}

/* --- Wat wij doen ------------------------------------------------ */

/* Eén brede tekstkolom in plaats van twee. De afbakening die hier
   rechts stond, "Wat wij niet doen", is op 01-09-2026 vervallen: dat
   wij alleen zakelijke opdrachtgevers bedienen stond op vier plekken
   en staat nu één keer, in de vragen. De regel over kosten bij de
   debiteur is meeverhuisd naar het antwoord over kosten.

   De margelijn ervoor is op 05-09-2026 vervallen; de tekst staat nu
   gewoon in de kolom, en groter dan de rest van de lopende tekst. */
.lvl-watwedoen-tekst {
  max-width: 58ch;
  color: var(--lvl-grijs);
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* De opsomming eronder staat in dezelfde regel en niet bij .lvl-tekst:
   dit blok heeft een eigen, ruimere alineamaat (24px in plaats van 16px)
   omdat de letter hier groter is. */
.lvl-watwedoen-tekst p + p,
.lvl-watwedoen-tekst p + .lvl-punten {
  margin-top: var(--lvl-ruimte-3);
}

/* --- Vier redenen ------------------------------------------------ */

/* Velden in een raster, elk met zijn eigen vlak. De lijnen zijn de gap
   zelf — het raster heeft de lijnkleur als achtergrond en elk veld dekt
   zijn eigen vlak af. Zo staat er geen dubbele rand tussen twee velden.

   Tot 05-09-2026 hing elk veld aan een margelijn met een icoon erop.
   Beide zijn weg. Wat overblijft is kleur: het veld staat op wit en
   schuift bij hover naar de lichte tint, met een blauwe bovenrand die
   verschijnt. Dat is één beweging en hij is groter dan wat het icoon
   deed.

   :focus-within staat erbij omdat een toetsenbordbezoeker anders het
   verschil niet ziet. */
.lvl-redenen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--lvl-regel);
  border-radius: var(--lvl-rond-kaart);
}

/* De streep boven en onder het raster is op 10-09-2026 vervallen. Hij
   liep over de volle sectiebreedte, stond direct onder de sectiekop en
   deed niets wat de scheiding tússen de velden niet al doet. */

/* Staan er drie velden, dan drie kolommen. Met de vaste twee kolommen
   bleef het derde veld alleen op een halve rij achter. :has kijkt of het
   derde kind meteen ook het laatste is; kent de browser het niet, dan
   blijft het bij twee kolommen en klopt de opmaak nog steeds. */
.lvl-redenen:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* De grond van een veld komt van de band waarop het raster staat, en
   niet uit het veld zelf. Tot 12-09-2026 was een veld altijd wit. Op een
   lichte band klopte dat, maar op een witte band stond wit op wit en was
   het raster alleen aan zijn twee haarlijnen te zien — precies de vier
   plekken waar het de sectie moet dragen. Nu keert het om: op wit staan
   de velden licht, op licht en op mid staan ze wit. De hover schuift in
   beide gevallen één tint verder, dus de beweging gaat dezelfde kant op.

   De twee tokens staan hier en niet bij de banden bovenin, omdat
   .lvl-reden de enige is die ze leest. De fallback houdt het veld wit
   waar geen band omheen staat. */
.lvl-band {
  --lvl-veldvlak:       var(--lvl-vlak-licht);
  --lvl-veldvlak-hover: var(--lvl-vlak-mid);
}

.lvl-band.lvl-band-licht,
.lvl-band.lvl-band-mid {
  --lvl-veldvlak:       var(--lvl-papier);
  --lvl-veldvlak-hover: var(--lvl-vlak-licht);
}

.lvl-reden {
  --lvl-veldgrond: var(--lvl-veldvlak, var(--lvl-papier));

  position: relative;
  padding: var(--lvl-ruimte-5) var(--lvl-ruimte-4);
  background: var(--lvl-veldgrond);
  transition: background-color var(--lvl-duur-kort) ease;
}

.lvl-reden:hover,
.lvl-reden:focus-within {
  --lvl-veldgrond: var(--lvl-veldvlak-hover, var(--lvl-vlak-licht));
}

/* De bovenrand die bij hover verschijnt. Als pseudo-element en niet als
   border, anders verspringt de tekst twee pixels. */
.lvl-reden::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--lvl-drager);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lvl-duur-lang) var(--lvl-soepel);
}

.lvl-reden:hover::before,
.lvl-reden:focus-within::before {
  transform: scaleX(1);
}

.lvl-reden h3 {
  margin-bottom: var(--lvl-ruimte-2);
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
}

.lvl-reden p {
  color: var(--lvl-grijs);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- Uitgelicht: beeld naast tekst ------------------------------- */

/* Twee rijen die van kant wisselen: de eerste met het beeld links, de
   tweede met het beeld rechts. Het beeld staat in beide gevallen vooraan
   in de HTML; alleen de plaatsing verschilt. Op mobiel vervalt het
   raster en staat het beeld boven de tekst.

   Dit stond eerst als drie kaarten onder elkaar met het beeld erboven.
   De derde kaart, over kosten, is vervallen. */
.lvl-uitgelicht {
  display: grid;
  gap: var(--lvl-ruimte-6);
}

.lvl-uitgelicht-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lvl-ruimte-6);
  align-items: center;
}

.lvl-uitgelicht-rij:nth-child(even) .lvl-beeld {
  order: 2;
}

.lvl-uitgelicht-tekst {
  display: grid;
  gap: var(--lvl-ruimte-2);
}

.lvl-uitgelicht-tekst h3 {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
}

/* Op de homepage staat het uitgelichte blok binnen een sectie die al een
   eigen h2 draagt, en is de kop daar een h3. Op /incasso en /werkwijze
   is het blok zelf de sectie: daar is de kop een h2 met
   .lvl-sectiekop, anders slaat de koppenboom een niveau over. Alleen de
   maatvoering gaat mee terug — .lvl-sectiekop is gemaakt voor een kop
   over de volle breedte en staat hier in de smalle kolom naast het
   beeld. */
.lvl-uitgelicht-tekst .lvl-sectiekop {
  max-width: none;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
}

.lvl-uitgelicht-tekst p {
  color: var(--lvl-grijs);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lvl-uitgelicht-tekst .lvl-actie {
  color: var(--lvl-drager);
}

/* --- Zo loopt een dossier ---------------------------------------- */

/* Eén band op blauw, met de foto links en vier regels rechts. Dit is
   wat er op 10-09-2026 over is van het fasenblok: vier banden met een
   schakelaar tussen het particuliere en het zakelijke spoor, samen zes
   schermhoogten. Die uitleg hoort op /werkwijze; hier staat alleen de
   volgorde, en een knop daarheen.

   Het beslispunt is de vierde regel en geen vierde fase. Dat het in
   dezelfde reeks staat is de bedoeling: een bezoeker moet zien dat het
   traject daar eindigt en niet doorloopt naar de rechter.

   De nummering komt uit een CSS-teller. Het getal is vorm en geen
   inhoud — de template zet het daarom op aria-hidden en een
   schermlezer krijgt de <ol> zelf, die de volgorde al aankondigt. */
.lvl-verloop {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  gap: var(--lvl-ruimte-6);
  align-items: center;
}

.lvl-verloop .lvl-beeld {
  border-radius: var(--lvl-rond-kaart);
  overflow: hidden;
}

.lvl-verloop-tekst .lvl-sectiehoofd {
  margin-bottom: var(--lvl-ruimte-4);
}

.lvl-verloop-tekst .lvl-sectiekop {
  max-width: none;
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);
}

.lvl-verloop-reeks {
  counter-reset: lvl-verloop;
  display: grid;
  gap: var(--lvl-ruimte-4);
  margin: 0 0 var(--lvl-ruimte-4);
  padding: 0;
  list-style: none;
}

/* De baan is functioneel en geen motief: hij verbindt de vier regels tot
   één reeks. Hij loopt daarom niet door onder de laatste regel, want na
   het beslispunt komt er niets meer. */
.lvl-verloop-reeks > li {
  position: relative;
  padding-left: 52px;
}

.lvl-verloop-reeks > li::before {
  counter-increment: lvl-verloop;
  content: counter(lvl-verloop);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  color: var(--lvl-accent-op-blauw);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.lvl-verloop-reeks > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 2em;
  bottom: calc(var(--lvl-ruimte-4) * -1);
  width: 1px;
  background: var(--lvl-regel);
}

.lvl-verloop-reeks h3 {
  font-size: 1.0625rem;
}

.lvl-verloop-reeks p {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .lvl-verloop {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lvl-ruimte-5);
  }
}

/* --- Twee ingangen ----------------------------------------------- */

/* De opdrachtgever en de debiteur, naast elkaar en even groot. Tot
   10-09-2026 stonden hier twee uitgelichte rijen die allebei naar de
   opdrachtgever wezen en kwam de debiteur pas in de afsluitende band in
   beeld. Dit zijn twee bezoekers met tegengestelde belangen; ze moeten
   zich allebei correct behandeld voelen, en dat begint ermee dat ze
   dezelfde maat krijgen.

   Dit is een aanklikbare kaart en mag daarom diepte hebben: CLAUDE.md
   sectie 6 houdt schaduw bij wat je kunt aanraken, en de hover mag die
   diepte vergroten. De foto erin houdt zich aan de andere kant van die
   regel — hij krijgt geen eigen schaduw, hij zit in de kaart.

   Het hele vlak is aanklikbaar doordat de link zich met een ::after
   over de kaart uitstrekt. Er staat dus één link in de HTML en geen <a>
   om de hele kaart heen; een schermlezer krijgt de kop niet als deel
   van de linktekst voorgelezen. */
.lvl-ingangen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lvl-ruimte-4);
}

/* Deze twee regels staan sinds 12-09-2026 achter .lvl-ingangen. De twee
   ingangen op /contact heten ook .lvl-ingang maar zijn velden in een
   .lvl-redenen-raster, en ze pakten hier de schaduw, de eigen radius en
   de sprong van drie pixels mee. Dat leverde twee dingen op die er niet
   hoorden: een schaduw onder een veld dat niet aanklikbaar is, en een
   gat onder de kop, want grid-template-rows rekte daar de tweede rij op.
   Zie ook de sectie /contact verderop, waar al stond dat een ingang een
   .lvl-reden is en niet een kaart. */
.lvl-ingangen .lvl-ingang {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--lvl-papier);
  border-radius: var(--lvl-rond-kaart);
  box-shadow: var(--lvl-schaduw);
  transition: box-shadow var(--lvl-duur-kort) ease,
              transform var(--lvl-duur-kort) var(--lvl-soepel);
}

.lvl-ingangen .lvl-ingang:hover,
.lvl-ingangen .lvl-ingang:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--lvl-schaduw-diep);
}

/* De foto vult de volle kaartbreedte. De bovengrens van 700px op
   .lvl-beeld geldt voor een foto die los in een kolom staat; hier is de
   kaart de kolom en die blijft er onder. */
.lvl-ingang .lvl-beeld {
  max-width: none;
  aspect-ratio: 3 / 2;
}

/* Het hoeklabel staat hier bovenin en niet onderin: onder de foto begint
   meteen de tekst van de kaart, en daar viel het label samen met de naad. */
.lvl-ingang .lvl-beeld-markering {
  top: var(--lvl-ruimte-3);
  bottom: auto;
}

.lvl-ingang .lvl-beeld-foto {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.lvl-ingang-tekst {
  display: grid;
  align-content: start;
  gap: var(--lvl-ruimte-2);
  padding: var(--lvl-ruimte-4);
}

.lvl-ingang-tekst h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
}

.lvl-ingang-tekst p {
  color: var(--lvl-grijs-mid);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lvl-ingang-actie {
  align-self: end;
  margin-top: var(--lvl-ruimte-1);
}

.lvl-ingang-actie .lvl-actie {
  color: var(--lvl-drager);
}

/* Het uitgestrekte vlak. De link houdt zijn eigen focusomlijning; de
   ::after ligt erachter en is alleen het treffervlak. */
.lvl-ingang-actie .lvl-actie::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--lvl-rond-kaart);
}

@media (max-width: 760px) {
  .lvl-ingangen {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --- De tijdlijn met de drie fasen ------------------------------- */

/* Drie fasen en het beslispunt, aan één doorlopende lijn in plaats van
   in drie losse kaarten. De lijn is de vorm van de dienst: een vaste
   volgorde met een eindpunt, en dat eindpunt is waar onze taak ophoudt.

   De lijn vult zich naarmate je hem passeert. De vulling is
   een custom property die assets/js/looijmans.js zet; staat er geen
   JavaScript of vraagt de bezoeker om minder beweging, dan is de
   beginwaarde 100% en staat de lijn meteen vol.

   De regels staan onder .lvl-tijdlijn omdat .lvl-fasen en .lvl-fase
   ook op de informatiepagina's bestaan, in de oudere kaartvorm. */
.lvl-tijdlijn {
  position: relative;
}

/* De radioknoppen van de schakelaar. Niet display:none — dan zijn ze
   niet meer met het toetsenbord te bereiken. Ze staan onzichtbaar op
   hun plek en hun focus wordt op het bijbehorende label getekend. */
.lvl-spoorkeuze {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* De schakelaar tussen een particuliere en een zakelijke debiteur.
   Geen vormtruc: fase 2 verloopt echt anders, omdat de wettelijke
   termijn van veertien dagen alleen voor een natuurlijk persoon geldt.
   Beide teksten staan altijd in de HTML; alleen de weergave wisselt,
   en dat gaat volledig zonder JavaScript. */
.lvl-schakelaar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-1) var(--lvl-ruimte-2);
  margin-bottom: var(--lvl-ruimte-2);
}

.lvl-schakelaar-label {
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

.lvl-schakelaar-knop {
  padding: 8px 16px;
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-knop);
  background: var(--lvl-papier);
  color: var(--lvl-drager);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--lvl-duur-kort) ease,
              color var(--lvl-duur-kort) ease,
              border-color var(--lvl-duur-kort) ease;
}

#lvl-spoor-particulier:checked ~ .lvl-schakelaar .lvl-schakelaar-particulier,
#lvl-spoor-zakelijk:checked ~ .lvl-schakelaar .lvl-schakelaar-zakelijk {
  border-color: var(--lvl-drager);
  background: var(--lvl-drager);
  color: var(--lvl-papier);
}

#lvl-spoor-particulier:focus-visible ~ .lvl-schakelaar .lvl-schakelaar-particulier,
#lvl-spoor-zakelijk:focus-visible ~ .lvl-schakelaar .lvl-schakelaar-zakelijk {
  outline: 2px solid var(--lvl-focus);
  outline-offset: 3px;
}

/* De toelichting onder de schakelaar: één zin over wat er in dit spoor
   anders gaat. Hier stond dat verschil tot 01-09-2026 als een fase in de
   tijdlijn met de kop "Deze fase vervalt". Een fase die vervalt bestaat
   niet, en de rij stond er dus als een lege plek in. Het verschil staat
   nu als tekst boven de tijdlijn en de tijdlijn zelf toont alleen wat er
   werkelijk gebeurt. */
/* Twee klassen in de selector, niet één. .lvl-tijdlijn .lvl-fase-spoor
   weegt precies even zwaar als .lvl-tijdlijn .lvl-fase verderop, en die
   staat later in het bestand met display:grid — dan wint grid en blijft
   de ingebrekestelling in het zakelijke spoor gewoon staan. Dat was op
   01-09-2026 ook precies wat er gebeurde. Met .lvl-fase.lvl-fase-spoor
   ligt het gewicht een klasse hoger en klopt de volgorde niet meer mee.
   De regels die een spoor weer aanzetten beginnen met een id en winnen
   daar hoe dan ook van. */
.lvl-spoortekst,
.lvl-tijdlijn .lvl-fase.lvl-fase-spoor {
  display: none;
}

#lvl-spoor-particulier:checked ~ .lvl-spoortekst-particulier,
#lvl-spoor-zakelijk:checked ~ .lvl-spoortekst-zakelijk {
  display: block;
  max-width: 68ch;
  margin-bottom: var(--lvl-ruimte-5);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

#lvl-spoor-particulier:checked ~ .lvl-fasen .lvl-fase-spoor-particulier,
#lvl-spoor-zakelijk:checked ~ .lvl-fasen .lvl-fase-spoor-zakelijk {
  display: grid;
}

/* De nummering komt uit een teller en niet uit de PHP-lus. Een fase die
   in het gekozen spoor niet bestaat staat op display:none, en zo'n
   element telt niet mee in een CSS-teller: in het zakelijke spoor wordt
   de sommatie dus vanzelf fase 2. Het beslispunt telt niet mee — dat is
   geen fase maar het einde ervan, en het staat daarom ook buiten deze
   lijst. */
.lvl-tijdlijn .lvl-fasen {
  counter-reset: lvl-fase;
  position: relative;
  display: grid;
  gap: var(--lvl-ruimte-5);
  list-style: none;
  padding: 0;
}

/* De baan. Tot 01-09-2026 was dit één lijn over de hele lijst met een
   gouden vulling erover die de scrollpositie volgde. Dat las als een
   breuk: de baan zelf was nauwelijks zichtbaar (--lvl-regel-sterk op de
   middengrond) en de gouden vulling hield ergens tussen fase 2 en 3 op,
   midden in de leegte.

   De baan loopt per fase, in de blauwgrijze lijnkleur, en eindigt op de
   laatste fase precies op het beslispuntteken. Zo is de lijn altijd
   doorlopend en hangt er niets onder het eindpunt.

   De segmenten die je gepasseerd bent kleuren bij: tot 05-09-2026 goud,
   nu de drager zelf. Die overgang valt altijd op een fasepunt en nooit
   halverwege. Zet het JavaScript geen klasse — geen JavaScript, of
   prefers-reduced-motion — dan is de lijn gewoon in zijn geheel
   blauwgrijs, en dat is een afgemaakte toestand.

   De baan is functioneel en geen motief: hij toont een vaste volgorde
   met een eindpunt. Dat is de reden dat hij de opruiming van 05-09-2026
   heeft overleefd terwijl de margelijn eronder is vervallen. */
.lvl-tijdlijn .lvl-fase {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--lvl-ruimte-3);
  align-items: start;
}

.lvl-tijdlijn .lvl-fase::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  bottom: calc(var(--lvl-ruimte-5) * -1); /* door de gap heen, naar de volgende fase. */
  width: 2px;
  background: var(--lvl-marge);
}

/* Het beslispunt staat buiten de <ol> en is dus geen lijstitem meer.
   Daarmee vervalt ook de gap van het raster, en die zetten we hier met
   de hand terug: even groot, zodat de baan uit de laatste fase er
   ononderbroken in doorloopt. */
.lvl-tijdlijn > .lvl-fase-eind {
  margin-top: var(--lvl-ruimte-5);
}

/* Het beslispunt is het eind van de baan: de lijn stopt in het midden
   van het teken, en dat ligt op 12px. */
.lvl-tijdlijn .lvl-fase-eind::before {
  bottom: auto;
  height: 12px;
}

.lvl-tijdlijn .lvl-fase.is-bereikt::before {
  background: var(--lvl-drager);
}

/* Het punt op de baan. Tot 05-09-2026 stond hier een lijnicoon uit
   inc/iconen.php; die zijn allemaal weg. Wat overblijft is de eenvoudige
   vorm die de baan zelf al vroeg om: een gevulde stip op de lijn, met
   een witte ring eromheen zodat de baan er niet doorheen loopt. */
.lvl-tijdlijn .lvl-fase::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lvl-marge);
  box-shadow: 0 0 0 5px var(--lvl-vlak-licht);
  transition: background-color var(--lvl-duur-kort) ease;
}

.lvl-tijdlijn .lvl-fase.is-bereikt::after {
  background: var(--lvl-drager);
}

/* Het beslispunt is geen fase: het teken is open in plaats van gevuld. */
.lvl-tijdlijn .lvl-fase-eind::after {
  background: var(--lvl-vlak-licht);
  border: 3px solid var(--lvl-drager);
}

.lvl-fase-nummer {
  grid-column: 2;
  grid-row: 1;
  color: var(--lvl-grijs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.lvl-tijdlijn .lvl-fase:not(.lvl-fase-eind) {
  counter-increment: lvl-fase;
}

.lvl-tijdlijn .lvl-fase-nummer::before {
  content: "Fase " counter(lvl-fase);
}

.lvl-tijdlijn .lvl-fase-tekst {
  grid-column: 2;
  margin-top: var(--lvl-ruimte-1);
}

.lvl-tijdlijn .lvl-fase-tekst p {
  margin-top: var(--lvl-ruimte-2);
  max-width: 68ch;
  color: var(--lvl-grijs);
}

/* Op /werkwijze staat onder elke fase wat er uitgaat en wat de debiteur
   op dat moment kan doen. Twee lijstjes, elk met een kopregel erboven.
   De kopregel is geen h4: hij benoemt de kolom en niet een nieuw
   onderwerp, en een extra kopniveau in de tijdlijn zou de koppenboom van
   de pagina onnodig diep maken. Op de homepage staan deze lijstjes niet;
   daar blijft het bij de alinea's.

   De opsomming zelf erft de vorm van .lvl-punten. */
.lvl-tijdlijn .lvl-fase-tekst p.lvl-fase-kopje {
  margin-top: var(--lvl-ruimte-3);
  color: var(--lvl-inkt);
  font-size: 0.9375rem;
  font-weight: 700;
}

.lvl-tijdlijn .lvl-fase-tekst .lvl-punten {
  margin-top: var(--lvl-ruimte-2);
  max-width: 68ch;
}

.lvl-tijdlijn .lvl-fase-tekst .lvl-punten li {
  color: var(--lvl-grijs);
}

/* Het beslispunt is geen vierde fase en krijgt daarom geen nummer. De
   kantlijn die hier stond is weg: die liep parallel aan de baan en
   maakte er op deze hoogte twee verticale lijnen naast elkaar van.
   De nadruk komt nu van het eindpunt van de baan zelf. */
.lvl-fase-eind .lvl-fase-tekst {
  padding-left: 0;
}

/* --- De drie fasen op de homepage -------------------------------- */

/* Hier stond tot 10-09-2026 de opmaak van .lvl-fasenblok: vier banden
   met een eigen foto, een schakelaar tussen het particuliere en het
   zakelijke spoor, een CSS-teller voor de nummering en een beslispunt op
   de diepste grond. Samen zes schermhoogten op de homepage.

   Dat blok is van de homepage af. De opdracht was minder procesuitleg:
   een bezoeker hoeft de volledige werkwijze niet in één keer te zien.
   Wat ervoor in de plaats staat is .lvl-verloop hierboven — vier regels
   naast een foto, met een knop naar /werkwijze.

   De opmaak is hier weggehaald en niet alleen ongebruikt gelaten: geen
   enkele template zet nog .lvl-fasenblok, .lvl-faseband, .lvl-fasenummer
   of .lvl-beslispunt. De tijdlijnvorm hierboven (.lvl-tijdlijn) en de
   schakelaar (.lvl-spoorkeuze, .lvl-schakelaar, .lvl-spoortekst) blijven
   wél staan: /werkwijze gebruikt ze, en daar is de volgorde het
   onderwerp. */

/* --- Locatie ----------------------------------------------------- */

/* De tekst staat vooraan in de HTML en het beeld erachter; op brede
   schermen wisselt de foto naar links, zodat de kanten over de pagina
   heen blijven wisselen: hero rechts, uitgelicht links, dan rechts, hier
   weer links. De volgorde in de HTML verandert daar niet van, en er valt
   niets te missen: de foto heeft een leeg alt en draagt geen informatie. */
.lvl-locatie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lvl-ruimte-6);
  align-items: center;
}

.lvl-locatie .lvl-beeld {
  order: -1;
}

.lvl-locatie dl {
  display: grid;
  gap: var(--lvl-ruimte-2);
  margin-top: var(--lvl-ruimte-3);
}

.lvl-locatie dt {
  color: var(--lvl-grijs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lvl-locatie dd {
  margin: 0;
  font-weight: 600;
}

/* --- Veelgestelde vragen ----------------------------------------- */

/* Rijen tussen haarlijnen. De margelijn links van elke vraag is op
   05-09-2026 vervallen; wat de rij nu aanzet is zijn grond, die bij
   hover en bij openen naar wit schuift.

   Het openen en sluiten loopt vloeiend via ::details-content. Kent de
   browser dat niet, dan valt de hele regel weg en klapt de uitklapper
   gewoon direct open — de <details> zelf werkt overal, met of zonder
   JavaScript, en is met het toetsenbord te bedienen. */
/* De streep boven de eerste vraag is op 10-09-2026 vervallen: hij stond
   direct onder de sectiekop over de volle breedte en markeerde niets wat
   de rij zelf niet al aangeeft. */
.lvl-vragen {
  display: grid;
}

.lvl-vraag {
  --lvl-veldgrond: transparent;

  position: relative;
  border-bottom: 1px solid var(--lvl-regel-sterk);
  background: var(--lvl-veldgrond);
  transition: background-color var(--lvl-duur-kort) ease;
}

.lvl-vraag:hover,
.lvl-vraag:focus-within,
.lvl-vraag[open] {
  --lvl-veldgrond: var(--lvl-papier);
}

.lvl-vraag summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: var(--lvl-ruimte-3) var(--lvl-ruimte-3);
  color: var(--lvl-drager);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
}

.lvl-vraag summary::-webkit-details-marker {
  display: none;
}

.lvl-vraag-tekst {
  position: relative;
  flex: 1 1 auto;
  padding-right: 44px;
}

/* Het plusteken is met CSS getekend: twee streepjes, waarvan er één
   verdwijnt zodra de uitklapper open staat. Het hangt aan de tekst en
   niet aan de rij, zodat het ook bij een vraag over twee regels op de
   hoogte van de tekst blijft staan. */
.lvl-vraag-tekst::before,
.lvl-vraag-tekst::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px; /* top:50% zet de bovenrand op het midden, niet het streepje zelf. */
  background: var(--lvl-marge);
  transition: transform var(--lvl-duur-kort) ease, opacity var(--lvl-duur-kort) ease;
}

.lvl-vraag-tekst::after {
  transform: rotate(90deg);
}

.lvl-vraag[open] .lvl-vraag-tekst::after {
  transform: rotate(0deg);
  opacity: 0;
}

.lvl-vraag-antwoord {
  padding: 0 var(--lvl-ruimte-3) var(--lvl-ruimte-4);
}

.lvl-vraag-antwoord p {
  max-width: 68ch;
  color: var(--lvl-grijs);
  font-size: 1.0625rem;
}

.lvl-vraag-antwoord p + p {
  margin-top: var(--lvl-ruimte-2);
}

/* De link onder de vragen. De vijf vragen hier zijn een selectie; de
   rest staat op /incasso. Zonder deze regel zou het inkorten van elf
   naar vijf vragen een doodlopende weg zijn. */
.lvl-vragen-meer {
  margin-top: var(--lvl-ruimte-4);
}

.lvl-vragen-meer .lvl-actie {
  color: var(--lvl-drager);
}

/* --- Afsluitende CTA --------------------------------------------- */

/* De onderkant van de pagina, in twee stappen.

   Eerst waren het twee blauwe vlakken van dezelfde kleur met een gouden
   streep ertussen: twee losse blokken met een naad. Toen één doorlopend
   blauw dat naar beneden dieper werd — de naad was weg, maar de laatste
   anderhalve schermhoogte van de pagina was daarmee één groot blauw vlak
   waarin de CTA en het colofon niet meer uit elkaar te houden waren.

   Nu draagt het verschil in materiaal de scheiding en niet een lijn. De
   CTA is de diepste plek van de pagina en licht naar onderen toe op naar
   het merkblauw; daaronder begint het colofon op de lichte grond. Blauw
   dat opengaat en dan de lichte grond.

   Het verloop loopt van #0E2E52 naar #154273. Dat is de omgekeerde
   richting van hiervoor, maar de rekensom verandert niet: #154273 is
   ook nu de lichtste plek in de band en dus de ondergrens waar de tabel
   bij :root mee rekent. */
/* Ook deze band staat dichter dan de standaard: hij draagt op elke pagina
   dezelfde kop, twee regels en twee knoppen — 278 tot 310px inhoud in een
   band van ruim 530px. Ruimte-6 in plaats van ruimte-7. Niet zo krap als
   de kernzin, want hier staat een knop die ruimte om zich heen nodig heeft
   om als hoofdactie te lezen. */
.lvl-cta {
  padding-top: var(--lvl-ruimte-6);
  padding-bottom: var(--lvl-ruimte-6);
  background: linear-gradient(
    to bottom,
    var(--lvl-vlak-dieper) 0,
    var(--lvl-vlak-diep) 100%
  );
}

.lvl-cta .lvl-container {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--lvl-ruimte-5);
  align-items: center;
}

.lvl-cta p {
  margin-top: var(--lvl-ruimte-3);
  max-width: 52ch;
  color: var(--lvl-grijs);
}

.lvl-cta .lvl-acties {
  margin-top: 0;
}

/* Het blok voor de debiteur staat als enige echt op de band en niet erin.
   Een dunne vulling van 4,5% wit maakt daar een paneel van in plaats van
   een omlijnd stuk lucht; de rand blijft de vorm dragen. Alles in dit
   blok is wit op blauw en zakt daarmee van 10,2:1 naar 9,4:1 — ruim
   binnen de norm. */
.lvl-cta-contact {
  display: grid;
  gap: var(--lvl-ruimte-2);
  justify-items: start;
  padding: var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: rgba(255, 255, 255, 0.045);
}

.lvl-cta-contact p {
  margin-top: 0;
  color: var(--lvl-grijs);
}

.lvl-cta-contact a {
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 7. Informatiepagina's
 * ------------------------------------------------------------------ */

/* De paginakop staat op de blauwe grond, net als de hero. Daaronder
   volgt de pagina in dezelfde kaartentaal als de homepage. */
.lvl-paginakop {
  padding-top: var(--lvl-ruimte-5);
  padding-bottom: var(--lvl-ruimte-5);
}

.lvl-paginakop .lvl-groot {
  margin-top: var(--lvl-ruimte-3);
  max-width: 60ch;
  color: var(--lvl-grijs);
}

/* De paginakop met foto. Sinds 12-09-2026: tot die dag stond op elke
   binnenpagina alleen tekst in een gecentreerde kolom van 920px, en op
   een breed scherm bleef de rechterhelft van de blauwe band leeg terwijl
   de homepage daar een foto heeft.

   De verhouding is iets tekstiger dan de hero (1 : 0,78 tegen 1 : 0,86):
   een binnenpagina opent met een langere inleiding en een kortere kop.
   De foto haalt de 700px uit CLAUDE.md sectie 6 daarmee nooit — bij een
   container van 1200px is de kolom 505px — en krijgt geen schaduw.

   Het kleurvlak achter de foto is dat van de hero, maar kleiner en op
   de andere hoek. Zelfde taal, niet dezelfde plaat. */
.lvl-paginakop-met-beeld {
  padding-top: var(--lvl-ruimte-6);
  padding-bottom: var(--lvl-ruimte-6);
}

.lvl-paginakop-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: center;
  gap: var(--lvl-ruimte-6);
}

.lvl-paginakop-raster .lvl-paginakop-tekst {
  max-width: 34rem;
}

.lvl-paginakop-raster h1 {
  max-width: 15ch;
}

.lvl-paginakop-beeld {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 700px;
}

.lvl-paginakop-beeld::before {
  content: "";
  position: absolute;
  top: calc(var(--lvl-ruimte-3) * -1);
  left: calc(var(--lvl-ruimte-3) * -1);
  width: 58%;
  height: 58%;
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-accent-op-blauw);
  opacity: 0.2;
}

.lvl-paginakop-beeld .lvl-beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--lvl-rond-kaart);
}

/* Dezelfde twee grenzen als de hero, en om dezelfde reden. Onder 900px
   past de tekst niet meer naast een foto; onder 640px duwt het beeld de
   knoppen buiten beeld, en op de debiteurpagina's is dat het
   telefoonnummer. */
@media (max-width: 900px) {
  .lvl-paginakop-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lvl-ruimte-5);
  }

  .lvl-paginakop-raster .lvl-paginakop-tekst {
    max-width: none;
  }
}

@media (max-width: 640px) {
  /* Het hele omhulsel eruit, niet alleen de figure: anders blijft het
     kleurvlak van ::before als los blok in de kop staan. */
  .lvl-paginakop-beeld {
    display: none;
  }

  .lvl-paginakop-met-beeld {
    padding-top: var(--lvl-ruimte-5);
    padding-bottom: var(--lvl-ruimte-5);
  }
}

.lvl-blok + .lvl-blok {
  margin-top: var(--lvl-ruimte-6);
}

/* Rij met een label links en de tekst rechts, binnen een kaart. */
.lvl-rijen {
  display: grid;
}

.lvl-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--lvl-ruimte-3);
  padding: var(--lvl-ruimte-3) 0;
  border-bottom: 1px solid var(--lvl-regel);
}

.lvl-rij:first-child { padding-top: 0; }
.lvl-rij:last-child  { padding-bottom: 0; border-bottom: 0; }

.lvl-rij > :first-child {
  color: var(--lvl-drager);
  font-weight: 700;
}

.lvl-rij > :last-child {
  color: var(--lvl-grijs);
}

/* Het genummerde schijfje. Dit stond in hoofdstuk 6 als .lvl-stap
   .lvl-stapnummer; de homepage gebruikt sinds 01-09-2026 een tijdlijn
   zonder schijfjes, en de informatiepagina's zijn nu de enige plek waar
   deze vorm nog voorkomt. Zij verhuizen mee zodra /werkwijze aan de
   beurt is. */
.lvl-stapnummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--lvl-ruimte-3);
  border-radius: 50%;
  background: var(--lvl-drager);
  color: var(--lvl-papier);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* De fasen op een informatiepagina: nog de oude kaartvorm, onder
   elkaar omdat de tekst hier langer is. */
.lvl-fasen {
  display: grid;
  gap: var(--lvl-ruimte-3);
  list-style: none;
  padding: 0;
}

.lvl-fase {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--lvl-ruimte-3);
  align-items: start;
}

.lvl-fase .lvl-stapnummer {
  margin-bottom: 0;
}

/* De vier verplichte debiteuronderdelen: het recht om te betwisten, de
   klachtenprocedure, Kifid en de gemeentelijke schuldhulpverlening.
   Ze staan in één blok zodat een debiteurpagina ze niet kan overslaan. */
.lvl-rechten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lvl-ruimte-3);
}

.lvl-recht p {
  margin-top: var(--lvl-ruimte-1);
}

.lvl-recht p + p {
  margin-top: var(--lvl-ruimte-2);
}

/* De afsluitende kaart van een informatiepagina: de uitnodiging staat
   in dezelfde vorm als de kaarten erboven, niet in een eigen band. */
.lvl-actiekaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lvl-ruimte-4);
  align-items: center;
  padding: var(--lvl-ruimte-4);
}

/* De blauwe bovenrand van 3px is op 10-09-2026 vervallen. De kaart heeft
   zijn eigen rand en schaduw van .lvl-kaart al; de streep erbovenop was
   een tweede markering op hetzelfde blok. */

.lvl-actiekaart h2 {
  font-size: 1.5rem;
}

.lvl-actiekaart p:last-of-type {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
}


/* --- Ingangen --------------------------------------------------
   Het bloktype 'ingangen': vier ingangen naast elkaar, elk één zin en één
   knop. Staat sinds 10-09-2026 boven aan /uw-dossier. Wie net een brief
   heeft opengemaakt hoort niet te hoeven lezen wat hij kan doen.

   De hele kaart is de link, dus de kaart draagt de diepte en de knop
   erin is de open variant zonder eigen schaduw. Dat is precies wat
   CLAUDE.md sectie 6 toestaat: een aanklikbare kaart mag diepte hebben
   en zijn hover mag die diepte vergroten.

   De naam is met zorg gekozen. .lvl-keuze bestaat verderop al voor de
   keuzerondjes van het intakeformulier, en .lvl-ingang hierboven voor de
   twee ingangen op de homepage. Beide botsten; de laatste definitie in
   dit bestand wint en dan breekt het andere blok. */
.lvl-wegwijzer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--lvl-ruimte-3);
  margin-top: var(--lvl-ruimte-5);
}

.lvl-wegwijzer-kaart {
  display: flex;
  flex-direction: column;
  gap: var(--lvl-ruimte-2);
  color: inherit;
  text-decoration: none;
}

.lvl-wegwijzer-kaart:hover {
  box-shadow: var(--lvl-schaduw-diep);
  border-color: var(--lvl-regel-sterk);
  transform: translateY(-4px);
}

.lvl-wegwijzer-kaart:focus-visible {
  outline: 2px solid var(--lvl-focus);
  outline-offset: 3px;
}

.lvl-wegwijzer-kaart h3 {
  margin-bottom: 0;
  color: var(--lvl-drager);
  font-size: 1.1875rem;
}

/* De zin duwt de knop naar de onderrand, zodat de knoppen van vier
   kaarten met ongelijke tekst toch op één lijn staan. */
.lvl-wegwijzer-kaart p {
  flex: 1 1 auto;
  font-size: 1rem;
}

.lvl-wegwijzer-knop {
  align-self: start;
  padding: 11px 20px;
  font-size: 1rem;
}

/* De kaart is de link; de knop erin reageert mee. */
.lvl-wegwijzer-kaart:hover .lvl-wegwijzer-knop {
  background: var(--lvl-drager);
  color: var(--lvl-papier);
  border-color: var(--lvl-drager);
}

.lvl-actiekaart .lvl-acties {
  margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * 8. Documentpagina's — klachtenregeling, privacyverklaring,
 *    algemene voorwaarden, tarievenreglement.
 *
 * Lange, precieze tekst die iemand onder stress moet kunnen lezen:
 * ruime regelafstand, artikelen gescheiden door een haarlijn, en geen
 * kaarten die de leesregel onderbreken.
 * ------------------------------------------------------------------ */

.lvl-spoor {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--lvl-ruimte-5);
  align-items: start;
}

.lvl-spoor > .lvl-kant {
  position: sticky;
  top: var(--lvl-ruimte-3);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

.lvl-spoor > .lvl-kant p {
  margin: 0;
}

.lvl-spoor > .lvl-kant p:first-child {
  color: var(--lvl-drager);
  font-weight: 700;
}

.lvl-spoor > .lvl-hoofd {
  max-width: 68ch;
}

.lvl-document {
  line-height: 1.7;
}

.lvl-document h1 {
  margin-bottom: var(--lvl-ruimte-3);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
}

/* De downloadband boven het document. Diep blauw, zodat hij zich van de
   lichte identificatiekop eronder onderscheidt: twee lichte vlakken op
   elkaar zouden één blok worden.

   De knop is wit op blauw en niet goud. Goud hangt op deze site aan
   precies één actie — een vordering indienen — en een regeling
   downloaden is die actie niet. */
.lvl-documentdownload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lvl-ruimte-3);
  margin-bottom: var(--lvl-ruimte-3);
  padding: var(--lvl-ruimte-3) var(--lvl-ruimte-4);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-drager);
  color: var(--lvl-papier);
}

.lvl-documentdownload-kop {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.lvl-documentdownload-kenmerk {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}

.lvl-documentdownload .lvl-knop {
  flex: 0 0 auto;
  background: var(--lvl-papier);
  color: var(--lvl-drager);
  box-shadow: none;
}

.lvl-documentdownload .lvl-knop:hover {
  background: var(--lvl-vlak-licht);
  color: var(--lvl-drager);
  box-shadow: none;
}

/* Identificatiekop van het document: welke regeling dit is, welke
   versie en sinds wanneer. Het blok stond tot 05-09-2026 aan een
   margelijn; nu doet het lichte vlak zelf het werk. */
.lvl-documentkop {
  margin-bottom: var(--lvl-ruimte-4);
  padding: var(--lvl-ruimte-3) var(--lvl-ruimte-4);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-licht);
}

.lvl-documentkop p {
  margin: 0;
}

.lvl-documentkop p:first-child {
  font-weight: 700;
  color: var(--lvl-drager);
}

.lvl-artikelen h2 {
  padding-top: var(--lvl-ruimte-4);
  margin-top: var(--lvl-ruimte-4);
  border-top: 1px solid var(--lvl-regel);
  font-size: 1.375rem;
}

.lvl-artikelen h2:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.lvl-artikelen h3 {
  margin-top: var(--lvl-ruimte-3);
  font-size: 1.0625rem;
}

.lvl-artikelen > p {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-artikelen ol,
.lvl-artikelen ul {
  margin: var(--lvl-ruimte-2) 0 0;
  padding-left: 0;
}

.lvl-leden {
  list-style: decimal outside;
  padding-left: 32px;
}

.lvl-leden > li {
  padding-left: 6px;
  margin-top: var(--lvl-ruimte-2);
}

.lvl-leden > li::marker {
  color: var(--lvl-drager);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lvl-letters {
  list-style: lower-alpha outside;
  padding-left: 30px;
}

.lvl-letters > li,
.lvl-opsomming > li {
  margin-top: var(--lvl-ruimte-1);
}

.lvl-letters > li::marker {
  color: var(--lvl-drager);
  font-weight: 700;
}

/* Geen bolletje: een streepje in de kantlijn, zoals in de bron. */
.lvl-opsomming {
  list-style: none;
  padding-left: 24px;
}

.lvl-opsomming > li {
  position: relative;
}

.lvl-opsomming > li::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0.72em;
  width: 10px;
  border-top: 2px solid var(--lvl-marge);
}

.lvl-artikelen li > p {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-artikelen table {
  margin-top: var(--lvl-ruimte-3);
  min-width: 520px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--lvl-drager);
  padding: 12px 16px 12px 0;
  border-bottom: 2px solid var(--lvl-regel-sterk);
}

td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--lvl-regel);
  font-size: 0.9375rem;
  vertical-align: baseline;
}

/* Brede inhoud schuift in zijn eigen kader, nooit de pagina. */
.lvl-schuif {
  overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 8a. Het intakeformulier — /vordering-indienen
 * ------------------------------------------------------------------ */

/* De enige pagina met een werkend formulier erop. Wat dat formulier wel
   en niet mag, staat in CLAUDE.md sectie 2 en bovenaan inc/formulier.php;
   hier gaat het alleen over hoe het eruitziet.

   Twee dingen sturen de vormgeving van dit hoofdstuk.

   Ten eerste: dit is de pagina waarop iemand die drie bureaus vergelijkt
   zijn gegevens afstaat. Een formulier dat er onaf uitziet leest als een
   bureau dat er onaf uitziet. Elk veld staat daarom in dezelfde
   maatvoering als de rest van de site, de foutmeldingen staan onder het
   veld waar zij horen en niet in een blok bovenaan, en de knop die
   verzendt zegt wat er verzonden wordt.

   Ten tweede: de toestand van een veld. Elk invoerveld heeft één rand
   rondom die bij focus naar blauw kleurt en bij een fout naar rood, zodat
   de aanwijzing waar de cursor staat niet aan één zijde hangt. De
   voortgangslijst is de baan uit hoofdstuk 6, blauw voor wat achter de
   rug is.

   Wat hier NIET gebeurt: geen schaduw. Het kaartje in de hero ligt op de
   blauwe grond maar valt niet over een sectiegrens, en dan geldt de
   afspraak uit CLAUDE.md sectie 6 — schaduw uitsluitend op wat werkelijk
   zweeft. Het onderscheid komt hier van het materiaal: wit papier op
   blauw is verschil genoeg. */

/* --- Zonder JavaScript geen formulier ---------------------------- */

/* Het formulier verzendt met één fetch(). Zonder JavaScript verzendt het
   dus niets, en een formulier dat niets doet is erger dan geen formulier:
   iemand vult het in, drukt op verzenden en denkt dat het aankomt.

   Daarom staat het formulier standaard uit en zet .lvl-js — die in
   inc/assets.php op de <html> komt — het aan. Zonder JavaScript blijft
   .lvl-intake-geenjs staan, met het portaal en het telefoonnummer.
   Alle informatie op de pagina blijft in beide gevallen leesbaar. */
.lvl-intake,
.lvl-intake-meter {
  display: none;
}

.lvl-js .lvl-intake {
  display: block;
}

.lvl-js .lvl-intake-meter {
  display: block;
}

.lvl-js .lvl-intake-geenjs {
  display: none;
}

.lvl-intake-geenjs {
  padding: var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-papier);
}

.lvl-intake-geenjs p {
  margin-top: var(--lvl-ruimte-2);
  max-width: 62ch;
  color: var(--lvl-grijs);
}

/* --- De hero ------------------------------------------------------ */

/* Boven uitlijnen en niet centreren: de linkerkolom is hier langer dan
   het kaartje, en bij centreren zakt het kaartje naar het midden van een
   kolom waar de kop bovenaan begint. */
/* Een lagere hero dan elders, en dat is met opzet. Deze pagina heeft één
   taak: het formulier invullen. Sinds 10-09-2026 staat het formulier direct
   onder de hero, en dan hoort de eerste vraag bij 1440x1100 in beeld te
   staan zonder te scrollen — anders kost "Vordering indienen" alsnog twee
   handelingen. De band en de kop zijn daarvoor kleiner gemaakt; de hero op
   de andere pagina's blijft ongewijzigd. */
.lvl-intake-hero {
  padding-top: var(--lvl-ruimte-5);
  padding-bottom: var(--lvl-ruimte-6);
}

.lvl-intake-hero .lvl-hero-raster {
  align-items: start;
}

/* De opsomming in deze hero staat in een kale div en niet in .lvl-tekst,
   dus de algemene regel raakt hem niet. Zonder deze regel plakt het
   eerste bolletje tegen de alinea erboven. */
.lvl-intake-hero p + .lvl-punten {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-intake-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
}

/* De regel naar het portaal. In de brief stond hier een derde knop. Drie
   knoppen naast elkaar hebben geen hoofdactie meer, en het portaal is op
   deze pagina de ingang voor wie er al klant is — niet voor wie nog aan
   het vergelijken is. Dus een regel, en niet een knop.

   De regel staat onderin het kaartje, onder de voetregel, en volgt die
   dus in vorm: dezelfde haarlijn erboven en hetzelfde formaat. */
.lvl-intake-portaal {
  margin-top: var(--lvl-ruimte-2);
  padding-top: var(--lvl-ruimte-2);
  border-top: 1px solid var(--lvl-regel);
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Twee klassen in de selector, om dezelfde reden als bij de kop van het
   kaartje: .lvl-omkeer a weegt 0,1,1 en zet de link op wit. Binnen het
   kaartje is de grond weer papier, dus moet de link weer blauw worden en
   moet de selector zwaarder wegen. Wit op wit is hier de fout die je
   niet ziet tot je het kaartje opent. */
.lvl-omkeer .lvl-intake-portaal a {
  color: var(--lvl-drager);
  font-weight: 600;
  text-decoration-color: var(--lvl-regel-sterk);
}

/* --- Het kaartje in de hero --------------------------------------- */

/* Wit papier op de blauwe grond. De hero keert de tokens om via
   .lvl-omkeer; binnen het kaartje moeten ze weer terug, want de grond is
   hier weer papier. Dat gebeurt op dezelfde manier als de omkering zelf:
   op de tokens, niet op de losse regels.

   De bovenrand markeert het kaartje en draagt geen tekst. */
.lvl-intake-kaart {
  padding: var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-top: var(--lvl-marge-dik) solid var(--lvl-lijn-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-papier);
  color: var(--lvl-inkt);

  --lvl-inkt:        #313131;
  --lvl-grijs:       #6B6B6B;
  --lvl-regel:       rgba(21, 66, 115, 0.14);
  --lvl-regel-sterk: rgba(21, 66, 115, 0.28);
  --lvl-marge:       #5F7391;
  --lvl-marge-hover: #154273;
  --lvl-drager-licht: rgba(21, 66, 115, 0.08);
  --lvl-focus:       #154273;
}

/* Twee klassen in de selector. .lvl-omkeer h2 en .lvl-omkeer
   .lvl-sectielabel wegen allebei 0,2,0; een selector met alleen
   .lvl-intake-kaart ervoor weegt minder en verliest. */
.lvl-omkeer .lvl-intake-kaart h2 {
  color: var(--lvl-drager);
  font-size: 1.375rem;
}

.lvl-omkeer .lvl-intake-kaart .lvl-sectielabel {
  color: var(--lvl-drager);
}

.lvl-intake-kaartvoet {
  margin-top: var(--lvl-ruimte-3);
  padding-top: var(--lvl-ruimte-3);
  border-top: 1px solid var(--lvl-regel);
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --- De meter ----------------------------------------------------- */

/* De stand staat als tekst en niet als ring met een percentage erin. Dat
   was de vorm in de referentiescreenshot; hier is het de baan uit
   hoofdstuk 6, en de cijfers staan ernaast.

   Het percentage is het aandeel ingevulde verplichte velden en niet
   "stap twee van vier": dat beweegt terwijl iemand typt en geeft dus
   antwoord op de vraag die hij stelt — hoeveel werk is dit nog. */
.lvl-intake-meter {
  margin-top: var(--lvl-ruimte-3);
}

.lvl-intake-stand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lvl-ruimte-2);
  color: var(--lvl-drager);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lvl-intake-percent {
  font-variant-numeric: tabular-nums;
}

.lvl-intake-balk {
  overflow: hidden;
  margin-top: var(--lvl-ruimte-1);
  height: 4px;
  border-radius: 2px;
  background: var(--lvl-drager-licht);
}

/* De vulling is decoratie en geen tekst. De breedte wordt door
   formulier.js gezet; staat er geen JavaScript, dan staat de hele meter
   uit en is deze regel er niet. */
.lvl-intake-balk > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--lvl-lijn-sterk);
  transition: width var(--lvl-duur-lang) var(--lvl-soepel);
}

/* --- De stappenlijst ---------------------------------------------- */

/* Twee keer dezelfde lijst: in het kaartje in de hero en boven het
   formulier zelf. Beide hangen aan één doorlopende baan, en het stuk dat
   achter de rug is kleurt blauw — precies zoals de tijdlijn bij de
   fasen. De overgang valt altijd op een stap en nooit halverwege.

   Dit is geen margelijnmotief maar een voortgangsbalk: de lijn zegt hoe
   ver u bent. Ze staat er alleen hier en bij de fasen.

   Geen schijfjes met nummers erin: dat is de kaartentaal die er bij de
   fasen uit is gegaan, en die komt hier niet terug. Het nummer staat als
   teller in de tekst. */
.lvl-intake-kaartstappen,
.lvl-intake-kruimels {
  counter-reset: lvl-intakestap;
  position: relative;
  display: grid;
  gap: var(--lvl-ruimte-2);
  margin-top: var(--lvl-ruimte-3);
  padding: 0 0 0 var(--lvl-ruimte-3);
  list-style: none;
}

.lvl-intake-kaartstappen li,
.lvl-intake-kruimels li {
  counter-increment: lvl-intakestap;
  position: relative;
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* De baan staat op ::after en het nummer op ::before, zodat het nummer
   voor het label uitkomt. De baan is absoluut gepositioneerd, dus de
   volgorde in het document doet er voor hem niet toe.

   De baan loopt per stap door de gap heen naar de volgende. De laatste
   stap eindigt op de hoogte van zijn eigen tekst, zodat er niets onder
   het eindpunt uit hangt. */
.lvl-intake-kaartstappen li::after,
.lvl-intake-kruimels li::after {
  content: "";
  position: absolute;
  left: calc(var(--lvl-ruimte-3) * -1);
  top: 0;
  bottom: calc(var(--lvl-ruimte-2) * -1);
  width: 2px;
  background: var(--lvl-marge);
}

.lvl-intake-kaartstappen li:last-child::after,
.lvl-intake-kruimels li:last-child::after {
  bottom: auto;
  height: 100%;
}

.lvl-intake-kaartstappen li.is-gehad::after,
.lvl-intake-kruimels li.is-gehad::after {
  background: var(--lvl-lijn-sterk);
}

.lvl-intake-kaartstappen li::before,
.lvl-intake-kruimels li::before {
  content: counter(lvl-intakestap) ".";
  margin-right: 0.4em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Waar iemand nu staat. De stap die open staat is blauw en vet; wat
   geweest is blijft leesbaar maar treedt terug. Kleur alleen zou hier te
   weinig zijn — WCAG 1.4.1 — maar de stand staat er ook in letters
   boven ("Stap 2 van 4") en die regel is de eigenlijke aanwijzing. */
.lvl-intake-kaartstappen li.is-hier,
.lvl-intake-kruimels li.is-hier {
  color: var(--lvl-drager);
  font-weight: 700;
}

.lvl-intake-kruimels li.is-hier::after {
  background: var(--lvl-marge-hover);
}

/* --- Wat u nodig heeft -------------------------------------------- */

.lvl-nodig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lvl-ruimte-3) var(--lvl-ruimte-5);
  margin-top: var(--lvl-ruimte-5);
  list-style: none;
  padding: 0;
}

/* Rijen tussen haarlijnen. Er stond hier tot 05-09-2026 een icoon op een
   verticale lijn; beide zijn vervallen, en de rij houdt alleen de
   onderrand over die haar van de volgende scheidt. */
.lvl-nodig-rij {
  padding-bottom: var(--lvl-ruimte-3);
  border-bottom: 1px solid var(--lvl-regel);
}

.lvl-nodig-rij h3 {
  font-size: 1.0625rem;
}

.lvl-nodig-rij p {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
}

.lvl-nodig-bron {
  margin-top: var(--lvl-ruimte-4);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

/* --- Het formulier ------------------------------------------------ */

.lvl-intake {
  margin-top: var(--lvl-ruimte-5);
  padding: var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-papier);
}

.lvl-intake-voortgang {
  padding-bottom: var(--lvl-ruimte-3);
  border-bottom: 1px solid var(--lvl-regel);
}

.lvl-intake-voortgang .lvl-intake-kruimels {
  grid-auto-flow: row;
}

/* De statusregel voor de schermlezer. Zij staat niet buiten beeld: wie
   met de tab door het formulier loopt heeft er evenveel aan als wie hem
   voorgelezen krijgt, en een lege <p> neemt geen ruimte in. */
.lvl-intake-live {
  margin-top: var(--lvl-ruimte-2);
  color: var(--lvl-grijs);
  font-size: 0.875rem;
}

.lvl-intake-live:empty {
  display: none;
}

/* Een <fieldset> heeft een eigen rand, marge en padding van de browser,
   en een <legend> hangt standaard in die rand. Hier is de fieldset alleen
   de groepering die een schermlezer nodig heeft; de vorm komt van het
   blok eromheen. */
/* De ruimte boven een stap staat op de marge en niet op de padding.
   Een <legend> hangt op de rand van de fieldset, dus padding-top duwt de
   inhoud bij de kop vandaan en laat de stapkop los boven zijn eigen
   tekst zweven. Marge verplaatst het hele blok en houdt kop en intro
   bij elkaar. */
.lvl-intake-stap {
  margin: var(--lvl-ruimte-4) 0 0;
  padding: 0;
  border: 0;
  min-width: 0; /* anders krimpt een fieldset niet mee in een grid. */
}

/* [hidden] moet hier hard staan. De UA-regel [hidden] { display: none }
   heeft specificiteit 0,1,0 en verliest het van .lvl-knop met zijn
   display: inline-flex — dan blijven de knoppen 'vorige' en 'verzenden'
   op elke stap zichtbaar terwijl het script ze verborgen heeft. Dit
   geldt net zo voor de voorwaardelijke velden. */
.lvl-intake [hidden] {
  display: none;
}

.lvl-intake-stapkop {
  padding: 0;
  color: var(--lvl-drager);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.lvl-intake-stapintro {
  margin-top: var(--lvl-ruimte-2);
  max-width: 62ch;
  color: var(--lvl-grijs);
}

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

.lvl-veld {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lvl-veld-breed,
.lvl-veld-textarea,
.lvl-veld-checkbox,
.lvl-veld-radio,
.lvl-veld-bestand {
  grid-column: 1 / -1;
}

.lvl-veld-label {
  display: block;
  padding: 0;
  color: var(--lvl-inkt);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

/* "optioneel" achter het label en niet als sterretje bij het verplichte
   veld. Verreweg de meeste velden zijn verplicht; het uitzonderlijke
   krijgt de markering, niet de regel. */
.lvl-veld-vrij {
  color: var(--lvl-grijs);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Het veld zelf. Eén rand rondom: blauwgrijs in rust, blauw zodra de
   cursor er staat, rood zodra er iets fout is. De dikke linkerrand die
   hier tot 05-09-2026 stond is vervallen met het margelijnmotief; de
   toestand zit nu in de hele rand en is daardoor ook zichtbaar voor wie
   het veld van rechts nadert. */
.lvl-invoer {
  display: block;
  width: 100%;
  margin-top: var(--lvl-ruimte-1);
  padding: 11px 13px;
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-papier);
  color: var(--lvl-inkt);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--lvl-duur-kort) ease;
}

.lvl-invoer:hover {
  border-color: var(--lvl-marge);
}

/* De keuzelijst. Eigen pijl in plaats van die van het besturingssysteem,
   zodat het veld er op elke machine hetzelfde uitziet als de invoervelden
   ernaast. De pijl is een inline SVG in de achtergrond en dus geen extern
   bestand; hij staat in de margelijnkleur en heeft aria-hidden nodig noch
   mogelijk — het is een achtergrond en geen element.

   padding-right houdt de tekst van de pijl af, ook bij een lange optie. */
.lvl-invoer-keuze {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235F7391' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Zolang er niets gekozen is staat er grijze tekst, net als een
   placeholder bij een invoerveld. Zodra er wel iets staat is het gewone
   inkt; anders leest een gemaakte keuze als een lege prompt.

   Met :has() en niet met :invalid — die laatste hangt aan het required-
   attribuut, en dat staat er niet op: het formulier valideert zelf. Een
   browser zonder :has() laat de tekst gewoon donker staan en dat is geen
   verlies. */
.lvl-invoer-keuze:has( option[value=""]:checked ) {
  color: var(--lvl-grijs);
}

.lvl-invoer:focus {
  border-color: var(--lvl-drager);
  outline: none;
}

.lvl-invoer:focus-visible {
  outline: 2px solid var(--lvl-focus);
  outline-offset: 2px;
  border-radius: var(--lvl-rond-klein);
}

.lvl-invoer::placeholder {
  color: var(--lvl-grijs);
}

textarea.lvl-invoer {
  resize: vertical;
  min-height: 7em;
}

/* Het bestandsveld. De knop die de browser hier tekent is per browser
   anders en valt niet volledig te vormen; wat hier gebeurt is het veld
   eromheen in dezelfde vorm zetten als de rest. */
.lvl-invoer-bestand {
  padding: 10px 12px;
  font-size: 0.9375rem;
}

.lvl-invoer-bestand::file-selector-button {
  margin-right: var(--lvl-ruimte-2);
  padding: 6px 12px;
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-knop);
  background: var(--lvl-vlak-licht);
  color: var(--lvl-drager);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.lvl-veld-hulp {
  margin-top: var(--lvl-ruimte-1);
  max-width: 62ch;
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.5;
}

.lvl-veld-hulp p + p,
.lvl-veld-hulp ul {
  margin-top: var(--lvl-ruimte-2);
}

/* De foutmelding staat onder het veld waar zij hoort en niet in een
   verzamelblok bovenaan. Rood #B3261E haalt op wit 5,90:1; de kleur is
   niet de enige aanwijzing, want er staat tekst en het veld krijgt
   aria-invalid. */
.lvl-veld-fout {
  margin-top: var(--lvl-ruimte-1);
  color: #B3261E;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.lvl-veld.is-fout .lvl-invoer {
  border-color: #B3261E;
}

/* --- Keuzes en vinkjes -------------------------------------------- */

.lvl-keuzes {
  display: grid;
  gap: var(--lvl-ruimte-1);
  margin-top: var(--lvl-ruimte-2);
}

.lvl-keuze,
.lvl-aanvink {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--lvl-ruimte-2);
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-klein);
  cursor: pointer;
  line-height: 1.45;
  transition: border-color var(--lvl-duur-kort) ease,
              background-color var(--lvl-duur-kort) ease;
}

.lvl-keuze:hover,
.lvl-aanvink:hover {
  border-color: var(--lvl-marge);
  background: var(--lvl-vlak-licht);
}

.lvl-keuze:has(input:checked),
.lvl-aanvink:has(input:checked) {
  border-color: var(--lvl-drager);
  box-shadow: inset 0 0 0 1px var(--lvl-drager);
  background: var(--lvl-vlak-licht);
}

/* De twee documenten staan als link in de regel van het vinkje zelf. Dat
   mag: de HTML-specificatie laat de activatie van een <label> achterwege
   zodra de klik op interactieve inhoud binnen dat label valt, dus wie op
   "algemene voorwaarden" klikt opent de pagina en zet niet ongemerkt het
   vinkje aan. Wel zwaarder onderstrepen dan een link in lopende tekst,
   want hier ligt hij tussen tekst die zelf al klikbaar is. */
.lvl-aanvink a {
  color: var(--lvl-drager);
  font-weight: 600;
  text-decoration-color: var(--lvl-lijn-sterk);
  text-decoration-thickness: 2px;
}

.lvl-keuze input,
.lvl-aanvink input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lvl-drager);
}

.lvl-veld-checkbox .lvl-veld-hulp,
.lvl-veld-radio .lvl-veld-hulp {
  margin-top: var(--lvl-ruimte-2);
}

/* De privacyalinea staat op de middentint zodat zij niet wegvalt tussen
   de twee vinkjes erboven. Grijs haalt daar 4,10:1 en valt af; op deze
   grond schakelt het token, net als bij .lvl-band-mid. */
.lvl-intake-privacy {
  padding: var(--lvl-ruimte-3);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-vlak-licht);

  --lvl-grijs: var(--lvl-grijs-mid);
}

.lvl-intake-privacy h3 {
  font-size: 1.0625rem;
}

.lvl-intake-privacy p {
  margin-top: var(--lvl-ruimte-2);
  max-width: 68ch;
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

/* Een veld dat wegvalt omdat de webhook geen bestanden aanneemt. Dan
   staat hier wat er in plaats daarvan gebeurt, en niet een gat. */
.lvl-veld-notitie {
  padding: var(--lvl-ruimte-3);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-licht);
}

.lvl-veld-notitie p + p {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

/* --- Het overzicht bij stap 4 ------------------------------------- */

/* Wat er verzonden gaat worden, in de woorden van de labels waaronder
   het is ingevuld. Per blok een knop terug naar de stap waar het
   vandaan komt: wie hier iets ziet staan dat niet klopt, moet het kunnen
   wijzigen zonder drie keer op "vorige" te drukken. */
.lvl-overzicht {
  display: grid;
  gap: var(--lvl-ruimte-3);
  margin-top: var(--lvl-ruimte-4);
}

.lvl-overzicht-blok {
  padding: var(--lvl-ruimte-3) var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-licht);
}

.lvl-overzicht-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lvl-ruimte-2);
}

.lvl-overzicht-kop h3 {
  font-size: 1.0625rem;
}

.lvl-overzicht-wijzig {
  border: 0;
  background: none;
  padding: 0;
  color: var(--lvl-drager);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lvl-overzicht-wijzig:hover {
  text-decoration-color: var(--lvl-lijn-sterk);
  text-decoration-thickness: 2px;
}

.lvl-overzicht dl {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  margin-top: var(--lvl-ruimte-2);
}

.lvl-overzicht dl > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--lvl-ruimte-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--lvl-regel);
}

.lvl-overzicht dt {
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

.lvl-overzicht dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- Navigatie, meldingen en de bevestiging ----------------------- */

.lvl-intake-navigatie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-2);
  margin-top: var(--lvl-ruimte-4);
  padding-top: var(--lvl-ruimte-3);
  border-top: 1px solid var(--lvl-regel);
}

/* De knop "vorige stap" staat links van de knop die verder gaat, maar
   trekt niet: hij is de open knop en niet de gouden. */
.lvl-intake-navigatie [data-verder],
.lvl-intake-navigatie [data-verzend] {
  margin-left: auto;
}

.lvl-intake-navigatie button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Deze drie klassen staan ook op het contactformulier op /contact. De naam
   draagt 'intake' omdat zij daar is ontstaan; de vorm is dezelfde, en een
   tweede set regels die er identiek uitziet loopt na de eerste wijziging
   uit de pas. Hernoemen raakt formulier.js en het intakesjabloon en is
   uitgesteld tot er een reden voor is.

   Drie soorten melding, en alle drie zeggen zij wat er met de gegevens
   is gebeurd. Dat is de kern: stil mislukken mag hier niet. Wie denkt
   dat hij een vordering heeft ingediend terwijl er niets is aangekomen,
   is slechter af dan wie leest dat het formulier nog niet werkt. */
.lvl-intake-melding {
  margin-top: var(--lvl-ruimte-3);
  padding: var(--lvl-ruimte-3);
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-licht);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.lvl-intake-melding-fout {
  border-color: #B3261E;
  color: #B3261E;
  background: rgba(179, 38, 30, 0.06);
}

.lvl-intake-melding-wacht {
  border-color: var(--lvl-lijn-sterk);
}

.lvl-intake-bevestiging {
  margin-top: var(--lvl-ruimte-5);
  padding: var(--lvl-ruimte-5) var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-top: var(--lvl-marge-dik) solid var(--lvl-lijn-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-papier);
}

.lvl-intake-bevestiging:focus {
  outline: none;
}

.lvl-intake-bevestiging h3 {
  color: var(--lvl-drager);
  font-size: 1.5rem;
}

.lvl-intake-bevestiging p {
  margin-top: var(--lvl-ruimte-2);
  max-width: 62ch;
  color: var(--lvl-grijs);
}

/* --- Het contactformulier op /contact ----------------------------- */

/* Dit formulier verzendt met één fetch(), net als de intake. Zonder
   JavaScript verzendt het dus niets, en een knop die niets doet is hier
   erger dan geen knop: bij een incassobureau is een bericht dat niet
   aankomt een gemiste melding. Daarom staat het formulier standaard uit en
   zet .lvl-js — die in inc/assets.php op de <html> komt — het aan. Zonder
   JavaScript blijft .lvl-contactform-geenjs staan, met het telefoonnummer
   en het e-mailadres.

   De velden zelf krijgen geen eigen regels: .lvl-velden, .lvl-veld en
   .lvl-invoer hierboven zijn niet aan .lvl-intake gebonden en tekenen dit
   formulier mee. */
.lvl-contactform {
  display: none;
}

.lvl-js .lvl-contactform {
  display: block;
}

.lvl-js .lvl-contactform-geenjs {
  display: none;
}

.lvl-contactform,
.lvl-contactform-geenjs,
.lvl-contactform-bevestiging {
  margin-top: var(--lvl-ruimte-4);
  padding: var(--lvl-ruimte-4);
  border: 1px solid var(--lvl-regel-sterk);
  border-radius: var(--lvl-rond-kaart);
  background: var(--lvl-papier);
}

.lvl-contactform-geenjs h3,
.lvl-contactform-bevestiging h3 {
  color: var(--lvl-drager);
  font-size: 1.375rem;
}

.lvl-contactform-geenjs p,
.lvl-contactform-bevestiging p {
  margin-top: var(--lvl-ruimte-2);
  max-width: 62ch;
  color: var(--lvl-grijs);
}

/* Het blok krijgt de focus zodra het in de plaats van het formulier komt,
   zodat een schermlezer de bevestiging hoort. Een zichtbare omlijning
   hoort daar niet bij: de bezoeker heeft niet getabd. */
.lvl-contactform-bevestiging:focus {
  outline: none;
}

/* [hidden] moet hier hard staan, om dezelfde reden als bij .lvl-intake:
   de UA-regel [hidden] { display: none } heeft specificiteit 0,1,0 en
   verliest het van een klasse die zelf een display zet. */
.lvl-contactform [hidden] {
  display: none;
}

/* De privacyregel staat boven de knop en niet onder het formulier. Dit is
   het laatste dat de bezoeker leest voordat hij verstuurt, en dat is de
   plek waar de garantie hoort te staan: wat hij invult komt niet in deze
   website te staan. */
.lvl-contactform-privacy {
  margin-top: var(--lvl-ruimte-3);
  max-width: 68ch;
  color: var(--lvl-grijs);
  font-size: 0.875rem;
  line-height: 1.6;
}

.lvl-contactform-navigatie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-2);
  margin-top: var(--lvl-ruimte-3);
  padding-top: var(--lvl-ruimte-3);
  border-top: 1px solid var(--lvl-regel);
}

/* --- De honingpot ------------------------------------------------- */

/* Een veld dat een mens nooit ziet en een robot wel invult. Het staat
   buiten beeld en niet op display:none, want een deel van de robots
   slaat velden over die verborgen zijn; op deze manier staat het er voor
   hen gewoon. Geen reCAPTCHA: dat is een externe request, en die gaat op
   deze site niet (CLAUDE.md sectie 7). */
.lvl-honingpot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Waarop wij toetsen ------------------------------------------- */

/* Een lijst en geen genummerde reeks. Dit gebeurt niet in deze volgorde,
   en een volgorde met stappen erin zou een doorlooptijd suggereren. Wat
   hier staat is waarop wij controleren en op welke gronden een dossier
   niet wordt aanvaard — artikel 6 van de algemene voorwaarden — en geen
   enkele belofte over wanneer. */
.lvl-intake-toets .lvl-toets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lvl-ruimte-4);
  margin-top: var(--lvl-ruimte-5);
  list-style: none;
  padding: 0;
}

/* De blauwe streep van 3px boven elk punt is op 10-09-2026 vervallen.
   Wat het punt nu aanzet is de kop zelf, in de drager. */
.lvl-toets > li {
  padding-left: 22px;
  border-left: 2px solid var(--lvl-regel);
}

.lvl-toets h3 {
  color: var(--lvl-drager);
  font-size: 1.0625rem;
}

.lvl-toets p {
  margin-top: var(--lvl-ruimte-2);
  color: var(--lvl-grijs);
}

.lvl-toets-link {
  margin-top: var(--lvl-ruimte-5);
}

/* --- Smaller dan 900 ---------------------------------------------- */

/* De responsieve regels van deze pagina staan bij de pagina en niet in
   hoofdstuk 10: wie hier iets verandert, moet niet driehonderd regels
   verderop hoeven kijken wat dat op mobiel doet. */
@media (max-width: 900px) {
  .lvl-intake-hero .lvl-hero-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .lvl-intake-hero h1 {
    max-width: none;
  }

  .lvl-nodig,
  .lvl-intake-toets .lvl-toets {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .lvl-intake,
  .lvl-contactform,
  .lvl-contactform-geenjs,
  .lvl-contactform-bevestiging {
    padding: var(--lvl-ruimte-3);
  }

  .lvl-contactform-navigatie .lvl-knop {
    flex: 1 1 100%;
  }

  /* Eén kolom. Een tweekoloms formulier op een telefoon geeft velden van
     nog geen tien tekens breed, en dan is een IBAN niet meer te lezen
     terwijl je hem intikt. */
  .lvl-velden {
    grid-template-columns: minmax(0, 1fr);
  }

  /* iOS zoomt in op een veld met een letter kleiner dan 16px en zoomt
     daarna niet terug. Vandaar 1rem en niet kleiner. */
  .lvl-invoer {
    font-size: 1rem;
  }

  .lvl-overzicht dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .lvl-overzicht dl > div {
    gap: 2px;
  }

  .lvl-intake-navigatie [data-terug],
  .lvl-intake-navigatie [data-verder],
  .lvl-intake-navigatie [data-verzend] {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ *
 * 8b. /contact en /over-ons
 * ------------------------------------------------------------------ */

/* Deze twee pagina's lenen bijna alles van de homepage: de blauwe
   paginakop, de velden in een raster, de locatiestrook, de kernzin en de
   afsluitende band. Wat hieronder staat is alleen wat er niet al was. */

/* --- De twee ingangen op /contact -------------------------------- */

/* Een ingang is een .lvl-reden met drie dingen erbij: het kantlabel
   erboven, de eigen contactregels, en de doorverwijzingen eronder. De
   opdrachtgever en de debiteur staan naast elkaar en niet onder elkaar:
   dan is meteen te zien dat het er twee zijn en dat er gekozen moet
   worden. */
.lvl-ingang-kant {
  margin-bottom: var(--lvl-ruimte-1);
  color: var(--lvl-drager);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* De kop blijft hier op de oude maat. Een reden-cel draagt een kop en
   één alinea en kan de 1,5rem hebben; deze ingang draagt daarnaast het
   kantlabel, twee alinea's, de contactregels en drie doorverwijzingen, en
   dan gaat de kop overheersen. Bovendien past "U heeft een brief of
   e-mail van ons ontvangen" op 1,5rem net niet op één regel en breekt hij
   binnen "e-mail". */
.lvl-redenen .lvl-ingang h3 {
  font-size: 1.375rem;
}

.lvl-ingang p + p {
  margin-top: var(--lvl-ruimte-2);
}

/* De contactregels binnen de ingang. Dezelfde vorm als de gegevenslijst
   in de locatiestrook, een maat kleiner, met een haarlijn erboven zodat
   ze niet als nog een alinea meelezen. */
.lvl-ingang-contact {
  display: grid;
  gap: var(--lvl-ruimte-1);
  margin-top: var(--lvl-ruimte-3);
  padding-top: var(--lvl-ruimte-3);
  border-top: 1px solid var(--lvl-regel);
}

.lvl-ingang-contact > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-2);
}

.lvl-ingang-contact dt {
  min-width: 5.5em;
  color: var(--lvl-grijs);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}

.lvl-ingang-contact dd {
  margin: 0;
  font-weight: 600;
}

.lvl-ingang-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lvl-ruimte-2) var(--lvl-ruimte-3);
  margin-top: var(--lvl-ruimte-3);
  padding: 0;
  list-style: none;
}

/* --- Een gegeven in een rij -------------------------------------- */

/* In de rijenkaart op /over-ons staat het nummer zelf boven de uitleg en
   niet ervoor: het is het antwoord, de zin eronder is de toelichting. */
.lvl-rij .lvl-gegeven {
  display: block;
  margin-bottom: var(--lvl-ruimte-1);
}

/* --- De vier regelingen op /over-ons ----------------------------- */

/* Vier documenten, elk als één aanklikbaar veld. Geen kaarten: de
   regelingen staan niet los van de site, ze zijn er de onderlegger van.
   De hele rechthoek is de link, zodat er niets te mikken valt; de kop is
   dus geen aparte link binnen het veld.

   Wat de rechthoek aanwijsbaar maakt is de grond die bij hover oplicht,
   plus de onderstreping onder de kop. De verticale streep links die hier
   tot 05-09-2026 stond is met het margelijnmotief vervallen. */
.lvl-regelingen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--lvl-ruimte-5);
  background: var(--lvl-regel);
}

/* De streep boven en onder het raster is op 10-09-2026 vervallen, om
   dezelfde reden als bij .lvl-redenen: hij liep over de volle breedte en
   deed niets wat de scheiding tussen de vlakken niet al doet. */

.lvl-regeling {
  --lvl-veldgrond: var(--lvl-papier);

  position: relative;
  display: block;
  padding: var(--lvl-ruimte-4);
  background: var(--lvl-veldgrond);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--lvl-duur-kort) ease;
}

.lvl-regeling:hover,
.lvl-regeling:focus-visible {
  --lvl-veldgrond: var(--lvl-vlak-licht);
}

/* De kop is de eigenlijke link en krijgt daarom de onderstreping, niet
   het hele veld. */
.lvl-regeling h3 {
  margin-bottom: var(--lvl-ruimte-2);
  color: var(--lvl-drager);
  text-decoration: underline;
  text-decoration-color: var(--lvl-lijn-sterk);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lvl-regeling p {
  color: var(--lvl-grijs);
  font-size: 1rem;
}


/* ------------------------------------------------------------------ *
 * 9. Colofon
 * ------------------------------------------------------------------ */

/* Wettelijk verplicht op elke pagina: KvK, registratiekenmerk,
   vestigingsadres, telefoon en e-mail, plus /klachten en /privacy.

   Het colofon staat op de lichte grond. Zie de toelichting bij .lvl-cta
   voor de reden: op blauw was het de onderste helft van één groot blauw
   vlak dat bij de CTA begon.

   Contrast op de donkerste plek, #D8E3F0 onderaan: de tekst #313131
   haalt 10,01:1 en de links #154273 7,85:1 (in de browser gemeten op de
   gerenderde pagina, niet geschat); het scheidingsteken tussen de nummers
   is decoratie. Met de schrijflijn van de liniatuur eroverheen (4,5% blauw)
   blijft dat ruim boven de 7:1. Ruim binnen de norm, en dat moet ook: dit
   is het enige blok op de site dat er wettelijk moet staan.

   Er komt geen lijn tussen de CTA en het colofon. De overgang is blauw
   naar licht, en dat is geen nuance die een streep nodig heeft. */
.lvl-colofon {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--lvl-vlak-licht) 0,
    var(--lvl-vlak-mid) 100%
  );
}

/* .lvl-colofon is geen .lvl-band en valt niet onder de regel die de
   stapeling voor de secties doet, dus zet hij die zelf. */
.lvl-colofon .lvl-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--lvl-ruimte-5);
  padding-top: var(--lvl-ruimte-5);
  padding-bottom: var(--lvl-ruimte-5);
}

.lvl-colofon-naam {
  margin-top: var(--lvl-ruimte-2);
  margin-bottom: var(--lvl-ruimte-3);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Drie regels onder de naam: registratie, adres, bereikbaarheid. De
   cijfers krijgen tabellarische uitlijning, zodat het KvK-nummer en het
   registratienummer op één regel netjes naast elkaar staan. */
.lvl-colofon-regel {
  margin-top: 6px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.lvl-colofon-regel span {
  margin: 0 8px;
  color: var(--lvl-regel-sterk);
}

.lvl-colofon-verplicht {
  display: flex;
  flex-direction: column;
  gap: var(--lvl-ruimte-1);
  font-size: 0.9375rem;
  font-weight: 600;
}


/* ------------------------------------------------------------------ *
 * 10. Toegankelijkheid en beweging
 * ------------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--lvl-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.lvl-overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--lvl-drager);
  color: var(--lvl-papier);
  padding: 12px 18px;
  border-radius: 0 0 var(--lvl-rond-knop) 0;
  text-decoration: none;
}

.lvl-overslaan:focus {
  left: 0;
}

.lvl-verborgen {
  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;
  border: 0;
}

/* De overslaan-link zet focus op <main>; die mag zelf geen zichtbare
   omlijning krijgen, de link had de focus al. */
main:focus {
  outline: none;
}

/* --- Beweging ---------------------------------------------------- */

:root {
  /* Nodig om een uitklapper van 0 naar auto te kunnen animeren.
     Browsers die dit niet kennen negeren de regel; de vraag klapt dan
     direct open in plaats van vloeiend. Dat is het enige verschil. */
  interpolate-size: allow-keywords;
}

/* Alles wat beweegt, staat hier bij elkaar en staat achter twee
   voorwaarden: .lvl-js, die alleen op de <html> komt als er
   JavaScript draait, en prefers-reduced-motion: no-preference.

   Daarmee geldt: geen JavaScript is een volledig zichtbare pagina,
   en minder beweging gevraagd is een volledig stilstaande pagina.
   Geen van beide is een uitgeklede versie. */
@media (prefers-reduced-motion: no-preference) {
  /* In beeld komen: 22 pixels omhoog en 480 milliseconden, met een
     korte fade. Tot 10-09-2026 was dat 8px in 240ms; dat was zo klein
     dat de opdrachtgever terecht opmerkte dat alles al op zijn plek
     stond. Er zweeft nog steeds niets, er schaalt niets en er draait
     niets: het is één verplaatsing over één as, en hij stopt.

     Elk element komt één keer. Dat zit niet in deze regels maar in
     assets/js/looijmans.js: dat zet .is-zichtbaar en stopt daarna met
     kijken. Bij terugscrollen gebeurt er dus niets. */
  .lvl-js .lvl-inbeeld {
    opacity: 0;
    transform: translateY(var(--lvl-verschuif));
    transition: opacity var(--lvl-duur-inbeeld) var(--lvl-soepel),
                transform var(--lvl-duur-inbeeld) var(--lvl-soepel);
  }

  .lvl-js .lvl-inbeeld.is-zichtbaar {
    opacity: 1;
    transform: none;
  }

  /* Elementen binnen dezelfde sectie lopen iets uit elkaar, zodat ze na
     elkaar inschuiven en niet tegelijk. Het omhullende blok krijgt
     .lvl-reeks; zijn directe kinderen met .lvl-inbeeld krijgen een
     oplopende vertraging.

     Vier stappen en dan houdt het op: bij een raster van zes kaarten
     zou de zesde anders een halve seconde na de eerste beginnen, en dan
     wacht je op de pagina in plaats van dat hij binnenkomt. De regel
     geldt alleen bij het binnenkomen — zodra het element er staat gaat
     de vertraging eraf, anders loopt een hover erna ook achter. */
  .lvl-js .lvl-reeks > .lvl-inbeeld:nth-child(2) {
    transition-delay: var(--lvl-trap);
  }

  .lvl-js .lvl-reeks > .lvl-inbeeld:nth-child(3) {
    transition-delay: calc(var(--lvl-trap) * 2);
  }

  .lvl-js .lvl-reeks > .lvl-inbeeld:nth-child(4) {
    transition-delay: calc(var(--lvl-trap) * 3);
  }

  .lvl-js .lvl-reeks > .lvl-inbeeld:nth-child(n + 5) {
    transition-delay: calc(var(--lvl-trap) * 4);
  }

  .lvl-js .lvl-reeks > .lvl-inbeeld.is-zichtbaar {
    transition-delay: 0s;
  }

  /* De herofoto zet zich vast in plaats van te verschijnen: hij komt
     binnen op 106% en zakt naar 100%. Langer dan de rest, want het is
     een groot vlak en een korte schaal leest daar als een schok. De
     figure snijdt de overloop af, dus er komt niets buiten de kader.

     Dit is de enige plek op de site waar iets schaalt. Reden: de
     opdracht van 10-09-2026 was dat de herofoto meer moet springen, en
     schaduw onder een foto is uitgesloten (CLAUDE.md sectie 6). */
  .lvl-js .lvl-hero-beeld .lvl-beeld-foto {
    transform: scale(1.06);
    transition: transform 900ms var(--lvl-soepel);
  }

  .lvl-js .lvl-hero-beeld.is-zichtbaar .lvl-beeld-foto {
    transform: none;
  }

  /* Het kleurvlak achter de foto komt van onder de foto vandaan. Het
     beweegt in dezelfde richting als de rest van de pagina en blijft
     daarmee één beweging, geen tweede effect. */
  .lvl-js .lvl-hero-beeld::before {
    opacity: 0;
    transform: translate(calc(var(--lvl-ruimte-3) * -1), calc(var(--lvl-ruimte-3) * -1));
    transition: opacity var(--lvl-duur-inbeeld) var(--lvl-soepel),
                transform 900ms var(--lvl-soepel);
  }

  .lvl-js .lvl-hero-beeld.is-zichtbaar::before {
    opacity: 0.26;
    transform: none;
  }

  /* Een fasesegment kleurt bij zodra je het gepasseerd bent. Kort:
     het moet meelopen met de scroll, niet erachteraan komen. */
  .lvl-tijdlijn .lvl-fase::before {
    transition: background-color 200ms ease;
  }

  /* Het openen en sluiten van een vraag. ::details-content is de enige
     manier om dit zonder JavaScript vloeiend te krijgen; kent de
     browser het niet, dan vervalt de hele regel en klapt de vraag
     direct open. */
  .lvl-vraag::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--lvl-duur-lang) var(--lvl-soepel),
                content-visibility var(--lvl-duur-lang) allow-discrete;
  }

  .lvl-vraag[open]::details-content {
    block-size: auto;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .lvl-kaart-actief:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Breekpunten
 * ------------------------------------------------------------------ */

@media (max-width: 1040px) {
  /* Het kernfeitenblok gaat op twee kolommen; het derde feit komt
     eronder te staan en houdt zijn eigen scheidingslijn. */
  .lvl-kernfeiten ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lvl-ruimte-3);
  }

  .lvl-spoor {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lvl-ruimte-3);
  }

  .lvl-spoor > .lvl-kant {
    position: static;
  }
}

@media (max-width: 780px) {
  :root {
    --lvl-rand:     20px;
    --lvl-ruimte-5: 48px;
    --lvl-ruimte-6: 64px;
    --lvl-ruimte-7: 72px;
  }

  .lvl-hero-raster,
  .lvl-locatie,
  .lvl-uitgelicht-rij,
  .lvl-cta .lvl-container,
  .lvl-colofon .lvl-container,
  .lvl-kernfeiten ul,
  .lvl-redenen,
  .lvl-regelingen,
  .lvl-rechten,
  .lvl-rij {
    grid-template-columns: minmax(0, 1fr);
  }

  /* De drie punten in de hero staan naast elkaar zolang daar ruimte
     voor is. Onder de 780 vallen ze onder elkaar; de stip per punt is
     dan de markering. */
  .lvl-punten-rij {
    grid-auto-flow: row;
    gap: var(--lvl-ruimte-3);
  }

  /* Het kernfeitenblok valt op mobiel minder ver over de hero heen:
     met één kolom is het blok hoog, en dan wordt de overlap een gat in
     plaats van een gebaar. */
  .lvl-kernfeiten {
    margin-top: calc(var(--lvl-ruimte-3) * -1);
    padding: var(--lvl-ruimte-3);
  }

  .lvl-watwedoen-tekst {
    padding-left: var(--lvl-ruimte-3);
  }

  /* Het beeld staat op mobiel weer gewoon boven de tekst; de wisselende
     kanten hebben zonder twee kolommen geen betekenis. */
  .lvl-uitgelicht-rij:nth-child(even) .lvl-beeld,
  .lvl-locatie .lvl-beeld {
    order: 0;
  }

  .lvl-sectiekop {
    max-width: none;
  }

  .lvl-leden { padding-left: 26px; }
  .lvl-letters { padding-left: 24px; }
}

/* ------------------------------------------------------------------ *
 * Kennisbank
 *
 * Een kennisbankartikel is geen landingspagina maar een blad: links de
 * inhoudsopgave in de kantlijn, rechts één kolom tekst. Het bestaande
 * .lvl-spoor met de plakkende .lvl-kant doet dat raster al, en de
 * lopende tekst leunt op .lvl-artikelen uit het documentsjabloon. Wat
 * hieronder staat is dus alleen wat de kennisbank er zelf bij heeft:
 * de inhoudsopgave, het kader, de bronregel en de verwante artikelen.
 *
 * Deze regels staan achter de breekpunten hierboven en dragen daarom
 * hun eigen media query mee.
 * ------------------------------------------------------------------ */

/* --- De kop van een artikel --------------------------------------- */

/* Kennisbank als kruimel in het sectielabel. Wit op blauw, in dezelfde
   kapitalen en spatiëring als elk ander sectielabel. */
.lvl-kruimel {
  color: inherit;
  text-decoration-color: var(--lvl-regel-sterk);
  text-underline-offset: 3px;
}

.lvl-artikelmeta {
  margin-top: var(--lvl-ruimte-3);
  color: var(--lvl-grijs);
  font-size: 0.875rem;
}

/* --- De inhoudsopgave in de kantlijn ------------------------------- */

/* Een navigatierail: één doorlopende grijze lijn langs de lijst,
   waarvan het stukje naast de aangewezen regel blauw kleurt. Het item
   krijgt daarom een eigen linkerrand die de lijn van de lijst precies
   overlapt — vandaar de negatieve marge. Dit is geen margelijnmotief
   maar een positieaanduiding: de lijn zegt waar je in de lijst staat. */
.lvl-inhoudsopgave ol {
  margin: var(--lvl-ruimte-2) 0 0;
  padding: 0;
  border-left: 2px solid var(--lvl-regel-sterk);
  list-style: none;
}

.lvl-inhoudsopgave a {
  display: block;
  margin-left: -2px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  color: var(--lvl-grijs);
  line-height: 1.4;
  text-decoration: none;
}

.lvl-inhoudsopgave a:hover,
.lvl-inhoudsopgave a:focus-visible {
  border-left-color: var(--lvl-drager);
  color: var(--lvl-drager);
}

/* --- Het kader ---------------------------------------------------- */

/* Wat je moet onthouden. Dezelfde vorm als .lvl-documentkop, zodat het
   over de hele site één ding betekent: dit is aangehaald, dit staat
   ergens vast. */
.lvl-kader {
  margin-top: var(--lvl-ruimte-4);
  padding: var(--lvl-ruimte-3) var(--lvl-ruimte-4);
  border-radius: var(--lvl-rond-klein);
  background: var(--lvl-vlak-licht);
}

.lvl-kader-kop {
  margin: 0;
  color: var(--lvl-drager);
  font-weight: 700;
}

.lvl-kader p + p {
  margin-top: var(--lvl-ruimte-2);
}

.lvl-kader .lvl-leden {
  margin-top: var(--lvl-ruimte-2);
}

/* --- De bronregel ------------------------------------------------- */

/* Waar het na te lezen is. Geen voetnoot in kleine letters onderaan de
   pagina maar een regel onder de sectie zelf, van de tekst gescheiden
   door een haarlijn. */
.lvl-bronregel {
  margin-top: var(--lvl-ruimte-3);
  padding-top: var(--lvl-ruimte-2);
  border-top: 1px solid var(--lvl-regel);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

.lvl-bronregel a {
  color: var(--lvl-drager);
}

/* --- Verwante artikelen en het archief ---------------------------- */

/* Geen kaarten: blokken zonder rand. De streep van 2px die hier tot
   10-09-2026 boven elk blok stond is vervallen; wat het blok nu
   aanwijsbaar maakt is de grond die bij hover oplicht, plus de
   onderstreping onder de kop. */
.lvl-verwant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--lvl-ruimte-5);
  margin-top: var(--lvl-ruimte-5);
}

.lvl-verwant-blok {
  display: block;
  margin-left: calc(var(--lvl-ruimte-3) * -1);
  padding: var(--lvl-ruimte-3);
  border-radius: var(--lvl-rond-kaart);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--lvl-duur-kort) ease;
}

.lvl-verwant-blok:hover {
  background: var(--lvl-drager-licht);
}

.lvl-verwant-blok:focus-visible {
  outline: 2px solid var(--lvl-focus);
  outline-offset: 3px;
}

.lvl-verwant-blok h3 {
  color: var(--lvl-drager);
  font-size: 1.0625rem;
}

.lvl-verwant-blok:hover h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lvl-verwant-blok p {
  margin-top: var(--lvl-ruimte-1);
  color: var(--lvl-grijs);
  font-size: 0.9375rem;
}

/* --- Hetzelfde raster, maar als kaarten -------------------------- */

/* Onder een artikel is een verwijzing een naschrift en mag hij stil zijn.
   Halverwege /incasso is hij een keuze uit zeven branches, en daar was
   dezelfde vorm te weinig: zeven koppen van 17px op een lichte band,
   zonder cel en zonder rand, waarvan alleen bij hover te zien is dat het
   links zijn. Vandaar deze variant, alleen op de informatiepagina's.

   Een aanklikbare kaart is een van de drie dingen die van CLAUDE.md
   sectie 6 schaduw mogen dragen, en zijn hover mag die diepte vergroten.
   Verder gebeurt er niets: de kaart springt niet omhoog en de grond
   verkleurt niet. Het hele vlak is de link, dus er staat geen losse
   "lees meer" onder. */
.lvl-verwant-kaarten {
  gap: var(--lvl-ruimte-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.lvl-verwant-kaarten .lvl-verwant-blok {
  margin-left: 0;
  padding: var(--lvl-ruimte-3);
  background: var(--lvl-papier);
  box-shadow: var(--lvl-schaduw);
  transition: box-shadow var(--lvl-duur-kort) ease;
}

.lvl-verwant-kaarten .lvl-verwant-blok:hover,
.lvl-verwant-kaarten .lvl-verwant-blok:focus-visible {
  background: var(--lvl-papier);
  box-shadow: var(--lvl-schaduw-diep);
}

.lvl-verwant-kaarten .lvl-verwant-blok h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
}

.lvl-verwant-kaarten .lvl-verwant-blok p {
  margin-top: var(--lvl-ruimte-2);
}

@media (max-width: 780px) {

  /* Zonder tweede kolom is de inhoudsopgave geen kantlijn meer maar
     een lijst boven de tekst. De lijn blijft; de plakkende positie
     staat elders in dit bestand al uit. */
  .lvl-inhoudsopgave {
    margin-bottom: var(--lvl-ruimte-4);
  }

  .lvl-verwant {
    gap: 0;
  }

  /* De uitspringende kantlijn gaat eruit. Op een breed scherm valt die
     -24px binnen de paginamarge van 40px en zet hij de hovergrond netjes
     buiten de tekstkolom; op mobiel is de marge 20px en steekt het blok
     4px buiten beeld. Wat er dan afgesneden wordt is niet alleen de
     grond maar ook de focusrand, en een focus die je niet kunt zien is
     geen focus. Gemeten op 12-09-2026 op 390px en 768px. */
  .lvl-verwant-blok {
    margin-left: 0;
  }

  /* Voor de kaarten blijft de tussenruimte wel staan: zonder gap
     plakken twee vlakken met een schaduw tegen elkaar. */
  .lvl-verwant-kaarten {
    gap: var(--lvl-ruimte-3);
  }
}