/* ============================================================================
   VCA-Totaal.nl

   Geen framework en geen externe fonts. Dat is een keuze: de CSP blijft kort,
   er is geen verzoek naar een andere server, en de pagina staat er meteen.
   Snelheid telt mee in de vindbaarheid, en op een bouwplaats met slecht bereik
   telt hij dubbel.

   ZAKELIJK EN LEREND, IN NEUTRALE KLEUREN
   Grijstinten met een warme ondertoon, en één donkere kleur voor alles waar
   iets te doen valt. Geen signaalkleur als versiering: wie kleur gebruikt voor
   een kop, houdt niets over om een knop mee aan te wijzen.

   Het zakelijke zit niet in kleur maar in ordening: ruime marges, duidelijke
   niveaus in de koppen, dunne lijnen in plaats van vlakken en schaduwen, en
   cijfers in tabelvorm zodat ze onder elkaar uitlijnen. Het lerende zit in de
   opbouw: een inhoudsopgave, onderwerpen met aantallen erbij, en leesregels die
   kort genoeg blijven om echt te lezen.
============================================================================ */

:root {
    --wit:        #ffffff;
    --vlak:       #f6f6f4;   /* zeer licht warm grijs, voor secties */
    --vlak-diep:  #edece8;   /* een tint dieper, voor accentblokken */
    --inkt:       #1f2225;   /* tekst en knoppen */
    --inkt-zacht: #3b4045;
    --zacht:      #61666c;   /* bijschriften en toelichting */
    --lijn:       #e1e0dc;
    --lijn-sterk: #c9c7c1;
    --link:       #2f5063;   /* gedempt blauwgrijs, herkenbaar maar rustig */
    --breedte:    68rem;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--wit);
    color: var(--inkt);
    font: 400 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.binnen { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 1.25rem; }

/* --- Toegankelijkheid ---------------------------------------------------- */

.overslaan {
    position: absolute; left: -9999px; top: 0;
    background: var(--inkt); color: #fff; padding: 0.7rem 1rem; z-index: 100;
}
.overslaan:focus { left: 0; }

:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* --- Kop ----------------------------------------------------------------- */

.kop { border-bottom: 1px solid var(--lijn); background: var(--wit); }

.kop-rij {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem;
}

.merk {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--inkt); text-decoration: none;
}
.merk-deel { color: var(--zacht); font-weight: 400; }

/* Het menu mag nooit breder worden dan de kop. Zonder deze grens houdt de <nav>
   als flex-item zijn max-content-breedte vast, wappert hij op een smalle
   telefoon rechts het scherm af en breekt hij niet af op zijn eigen wrap. */
.kop-rij > nav { max-width: 100%; }

.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.menu a {
    color: var(--inkt); text-decoration: none; font-size: 0.97rem;
    padding: 0.35rem 0; border-bottom: 2px solid transparent; display: inline-block;
}
.menu a:hover { border-bottom-color: var(--lijn-sterk); }
.menu a[aria-current="page"] { border-bottom-color: var(--inkt); font-weight: 600; }

/* De taalkeuze. Klein en rustig: wie hem nodig heeft, zoekt hem, en wie hem
   niet nodig heeft moet er geen last van hebben. De vlag staat vóór de naam en
   nooit in plaats daarvan; een vlag is een land en geen taal. */
.talen ul { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; list-style: none; margin: 0; padding: 0; }

.talen a,
.talen .taal-nog-niet {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--zacht); text-decoration: none; font-size: 0.87rem;
}
.talen a:hover { color: var(--inkt); text-decoration: underline; }
.talen a[aria-current] { color: var(--inkt); font-weight: 600; }

/* --- De uitklapper ------------------------------------------------------- */

/* De marge naar rechts duwt het menu naar de overkant, zodat logo en taalknop
   links bij elkaar blijven staan in plaats van dat space-between ze alle drie
   even ver uit elkaar zet. */
.taalkeuze { margin-right: auto; }

.taalkeuze summary {
    display: inline-flex; align-items: center; gap: 0.35rem;
    cursor: pointer; list-style: none;
    color: var(--zacht); font-size: 0.87rem;
    padding: 0.3rem 0.5rem; border: 1px solid var(--lijn); border-radius: 4px;
}
.taalkeuze summary::-webkit-details-marker { display: none; }
.taalkeuze summary:hover { color: var(--inkt); border-color: var(--lijn-sterk); }

/* Het pijltje tekenen we met randen en niet met een letterteken. Het
   standaarddriehoekje van de browser staat aan de verkeerde kant van de tekst,
   en een teken als ▾ hangt af van het lettertype: in de systeemletters van
   Windows valt hij zo klein uit dat het een stip lijkt. Met randen is hij overal
   even groot en even scherp. */
.taalkeuze summary::after {
    content: ""; flex: none; margin-left: 0.25rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--zacht);
}
.taalkeuze[open] summary::after {
    border-top: 0; border-bottom: 5px solid var(--inkt);
}
.taalkeuze[open] summary { color: var(--inkt); border-color: var(--lijn-sterk); }

/* De taallijst is een volle band onder de koprij en zweeft niet: bij het
   openklappen wordt de kop hoger en schuift de pagina naar beneden. Dat is
   rustiger dan een paneel dat over de tekst heen valt, en het scheelt gedoe met
   stapelvolgorde en met een paneel dat van het scherm af loopt.

   De band hangt aan de knop via :has(). De <details> in de koprij bevat alleen
   de <summary>, dus de browser regelt het openklappen zelf; deze regel maakt de
   band zichtbaar zodra die details openstaat. Zonder :has() zou hier javascript
   voor nodig zijn. */
.taalband { display: none; background: var(--vlak); border-top: 1px solid var(--lijn); }
.kop:has(.taalkeuze[open]) .taalband { display: block; }

.taalband > .binnen { padding-top: 1rem; padding-bottom: 1.2rem; }

.taalband-kop {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--zacht);
    margin: 1.1rem 0 0.4rem;
}
.taalband-kop:first-child { margin-top: 0; }

/* Over de volle breedte is auto-fit wél op zijn plaats: er is ruimte zat, dus
   het aantal kolommen mag zich naar het scherm voegen. */
.taalband ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.1rem 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.taalband a,
.taalband .taal-nog-niet {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.4rem; border-radius: 4px;
    color: var(--inkt); text-decoration: none; font-size: 0.9rem;
}
.taalband a:hover { background: var(--wit); }
.taalband a[aria-current] { font-weight: 700; background: var(--wit); }

/* De Nederlandse naam is de bijzin: klein en grijs, en hij valt weg op een smal
   scherm. De naam in de taal zelf blijft altijd staan. */
.taal-eigen { white-space: nowrap; }
.taal-nl { font-size: 0.78rem; color: var(--zacht); white-space: nowrap; }

/* Een dun randje, anders loopt de witte baan van de Nederlandse en de Poolse
   vlag over in de witte achtergrond en houd je een half vlaggetje over. */
.vlag {
    display: block; flex: none; border: 1px solid var(--lijn-sterk); border-radius: 1px;
}

/* Het taalteken voor de talen zonder banenvlag: de landcode in een kadertje van
   dezelfde maat, zodat de namen in de lijst blijven uitlijnen. */
.taalcode {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 21px; height: 13px;
    border: 1px solid var(--lijn-sterk); border-radius: 1px;
    background: var(--vlak-diep); color: var(--zacht);
    font-size: 0.6rem; font-weight: 700;
}

/* Nog niet beschikbaar: zichtbaar, maar duidelijk geen knop. */
.taal-nog-niet { cursor: default; opacity: 0.55; }
.taal-nog-niet .vlag,
.taal-nog-niet .taalcode { filter: saturate(0.3); }

@media (max-width: 34rem) {
    /* Op een telefoon past de knop niet meer naast het logo, dus krijgt hij een
       eigen regel. Zonder deze regel loopt hij aan de rechterkant het scherm af,
       want een flex-item wijkt niet vanzelf. */
    .taalkeuze { margin-right: 0; flex: 0 0 100%; }
    .taalkeuze summary { width: fit-content; }

    /* De Nederlandse naam valt weg; die is er voor ons en niet voor de bezoeker
       die zijn eigen taal zoekt. De band wordt dan lang, dus hij krijgt een
       eigen maximum en scrollt binnen zichzelf. */
    .taal-nl { display: none; }
    .taalband > .binnen { max-height: 60vh; overflow-y: auto; }
}

/* --- Tekst --------------------------------------------------------------- */

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem); margin: 0 0 0.6rem; }
h2 {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); margin: 2.5rem 0 0.7rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--lijn);
}
h3 { font-size: 1.08rem; margin: 1.6rem 0 0.4rem; }

p, ul, ol { margin: 0 0 1rem; }

/* Leesregels blijven onder de zeventig tekens: langer leest niemand door. */
.lees { max-width: 40rem; }

a { color: var(--link); }
a:hover { color: var(--inkt); }

.inleiding { font-size: 1.1rem; color: var(--zacht); }

/* --- Blokken ------------------------------------------------------------- */

section { padding: 2.5rem 0; }
section.vlak { background: var(--vlak); border-block: 1px solid var(--lijn); }
section > .binnen > h2:first-child { margin-top: 0; }

.hero { padding: 3rem 0 2.5rem; }
.hero .inleiding { max-width: 38rem; }

.knop {
    display: inline-block; padding: 0.8rem 1.4rem; border-radius: 4px;
    background: var(--inkt); color: #fff; font-weight: 600;
    text-decoration: none; border: 1px solid var(--inkt);
}
.knop:hover { background: var(--inkt-zacht); border-color: var(--inkt-zacht); color: #fff; }
.knop-rand { background: transparent; color: var(--inkt); border-color: var(--lijn-sterk); }
.knop-rand:hover { background: var(--vlak); color: var(--inkt); border-color: var(--inkt); }

.knoppen { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* --- Kruimelpad ---------------------------------------------------------- */

.kruimels { font-size: 0.88rem; color: var(--zacht); padding-top: 1.2rem; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.kruimels li::after { content: "›"; margin-left: 0.4rem; color: var(--lijn-sterk); }
.kruimels li:last-child::after { content: ""; }

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

.raster { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.kaart {
    border: 1px solid var(--lijn); border-radius: 6px; padding: 1.4rem;
    background: var(--wit); display: flex; flex-direction: column;
}
.kaart h3 { margin-top: 0; }
.kaart p { color: var(--zacht); }
.kaart .prijs { font-size: 1.5rem; font-weight: 700; color: var(--inkt); margin: 0.4rem 0 0; }
.kaart .prijs small { font-size: 0.85rem; font-weight: 400; color: var(--zacht); }
.kaart .knoppen { margin-top: auto; padding-top: 1rem; }

.kenmerken { list-style: none; padding: 0; margin: 0.8rem 0; }
.kenmerken li { padding-left: 1.4rem; position: relative; }
.kenmerken li::before {
    content: "\2022"; position: absolute; left: 0; color: var(--lijn-sterk);
}

.etiket {
    display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 3px;
    background: var(--vlak-diep); color: var(--inkt-zacht); border: 1px solid var(--lijn);
}

.melding {
    border: 1px solid var(--lijn); border-left: 3px solid var(--inkt);
    background: var(--vlak); padding: 1rem 1.2rem; border-radius: 4px;
}

.uitgelicht {
    background: var(--vlak-diep); border: 1px solid var(--lijn);
    border-radius: 6px; padding: 1.4rem;
}

/* Cijfers die ertoe doen, groot en onder elkaar: aantal vragen, tijd, cesuur. */
.cijfers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1.5rem 0; }
.cijfer { border-left: 3px solid var(--lijn-sterk); padding-left: 0.9rem; }
.cijfer .waarde { display: block; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cijfer .naam { display: block; font-size: 0.85rem; color: var(--zacht); }

/* --- Inhoudsopgave ------------------------------------------------------- */

.inhoud-lijst { list-style: none; padding: 0; margin: 0; counter-reset: onderwerp; }
.inhoud-lijst li {
    counter-increment: onderwerp; display: flex; gap: 0.9rem; align-items: baseline;
    padding: 0.55rem 0; border-bottom: 1px solid var(--lijn);
}
.inhoud-lijst li::before {
    content: counter(onderwerp) "."; color: var(--zacht);
    font-variant-numeric: tabular-nums; min-width: 1.6rem;
}
.inhoud-lijst .aantal { margin-left: auto; color: var(--zacht); font-size: 0.9rem; white-space: nowrap; }

/* --- Tabel --------------------------------------------------------------- */

.tabelrand { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.96rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--lijn); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--zacht); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--vlak); }

/* --- Borden en pictogrammen ---------------------------------------------- */

/* Vellen met veiligheidsborden. Onder elk teken staat kleine tekst, dus de
   plaat moet zijn kolom helemaal mogen vullen; kleiner en er valt niets meer
   van te lezen. Twee kolommen op een breed scherm, één op een telefoon. */

.borden {
    display: grid; gap: 1.75rem; margin: 1.5rem 0 0;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.bord { margin: 0; }
.bord img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit);
}

/* Het losse gebodsbord is 200 bij 200. Oprekken naar de volle kolom maakt hem
   alleen wazig, dus die houdt zijn eigen breedte en gaat in het midden staan. */
.bord.klein img { width: auto; max-width: 100%; margin: 0 auto; }

.bord figcaption {
    margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.5; color: var(--zacht);
}
.bord figcaption strong { color: var(--inkt); font-weight: 600; }

/* --- Vraag en antwoord --------------------------------------------------- */

.vraag-blok { border-top: 1px solid var(--lijn); padding: 1.1rem 0; }
.vraag-blok:last-child { border-bottom: 1px solid var(--lijn); }
.vraag-blok h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.vraag-blok p { margin: 0; color: var(--zacht); }

/* --- Voet ---------------------------------------------------------------- */

.voet { background: var(--inkt); color: #cfd2d5; margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { padding: 0.15rem 0; }
.voet-rij { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.voet-merk { font-weight: 700; font-size: 1.1rem; color: #fff; margin: 0 0 0.4rem; }
.voet-kop { font-weight: 600; color: #fff; margin: 0 0 0.4rem; }
.voet-onder {
    border-top: 1px solid #3a3e42; margin-top: 2rem; padding-top: 1rem;
    font-size: 0.85rem; color: #9a9ea3;
}
.voet-onder p { margin: 0 0 0.3rem; }

/* --- Keuzehulp op /vca-cursus/ ------------------------------------------- */

/* Het stapnummer hoort bij de kop en niet ernaast: als het los in de marge
   staat, valt het weg zodra de kop over twee regels breekt. */
.stapnummer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; margin-right: 0.5rem;
    border-radius: 50%; background: var(--inkt); color: #fff;
    font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
    vertical-align: 0.05em;
}

/* Twee kaarten naast elkaar, en niet drie of vier: bij een keuze uit twee
   werkt naast elkaar, en de kaarten blijven dan breed genoeg om te lezen. */
.keuzeraster { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.kaart.keuze { border-color: var(--lijn-sterk); }

/* De gekozen kaart krijgt een dikke rand aan de linkerkant en geen kleurvlak.
   Een gevulde kaart trekt zoveel aandacht dat de andere keuze niet meer als
   keuze leest, en dan lijkt de stap al onherroepelijk. */
.kaart.keuze-gekozen {
    border-color: var(--inkt); border-left-width: 3px; background: var(--vlak);
}

.kaart-boven {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--zacht); margin: 0 0 0.3rem;
}

.etiket-aan { background: var(--inkt); color: #fff; border-color: var(--inkt); }

/* "Wijzigen" is een uitweg en geen actie: als tekstlink, zodat hij naast het
   etiket niet met de knoppen concurreert. */
.knop-tekst {
    align-self: center; font-size: 0.92rem; color: var(--link); text-decoration: underline;
}

.knop-aan { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.knop-aan:hover { color: #fff; }

/* Een rij knoppen die samen één keuze zijn: de talen bij stap 3 van de
   keuzehulp, en het aantal deelnemers op het bestelformulier. Heette
   .taal-stap, maar hij staat nu op twee plekken en gaat allang niet meer
   alleen over taal. (En daarvoor heette hij .taalkeuze, wat botste met de
   uitklapper in de kop; twee dingen met dezelfde klassenaam vechten om
   dezelfde regels, en dat kostte destijds de uitlijning van de kop.) */
.knoprij { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }

/* De inklapbare hulp bij stap 1. Dicht is de standaard: wie het al weet, hoeft
   niet langs een tabel met beroepen te scrollen om bij zijn keuze te komen. */
.uitklap {
    margin-top: 1.75rem; border: 1px solid var(--lijn); border-radius: 6px;
    background: var(--wit); padding: 0 1.2rem;
}
.uitklap summary {
    cursor: pointer; padding: 0.9rem 0; font-weight: 600; list-style-position: inside;
}
.uitklap summary:hover { color: var(--link); }
.uitklap[open] { padding-bottom: 1.2rem; }
.uitklap[open] summary { border-bottom: 1px solid var(--lijn); margin-bottom: 1rem; }

/* Wie op "Kies" klikt, springt naar het resultaat. Zonder deze marge komt de
   kop van dat blok tegen de bovenrand van het scherm te staan. */
#uw-keuze { scroll-margin-top: 1.5rem; }

/* --- Kennisbank ---------------------------------------------------------- */

/* Een kaartkop die een link is, blijft zwart. De hele kaart is klikbaar genoeg;
   een blauwe kop in een raster van kaarten geeft het geheel een linkenkleur. */
.kaart h3 a { color: var(--inkt); text-decoration: none; }
.kaart h3 a:hover { text-decoration: underline; }

.rubriek-label {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--zacht); margin: 0 0 0.4rem;
}

/* Het korte antwoord bovenaan een artikel. Dit is het stuk dat een zoekmachine
   kan uitlichten en dat een haastige lezer als enige leest, dus het krijgt de
   opvallendste plek van de pagina: boven de uitleg en met een eigen rand. */
.antwoord {
    border-left: 3px solid var(--inkt); background: var(--vlak);
    padding: 1rem 1.2rem; border-radius: 0 4px 4px 0; margin-top: 1.5rem;
}
.antwoord p { margin: 0; }
.antwoord-kop {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--zacht); margin: 0 0 0.35rem !important;
}

/* De tekst van een artikel. Iets ruimer dan de rest van de site, want dit is
   het enige dat mensen van boven naar beneden uitlezen. */
.artikel { font-size: 1.03rem; }
.artikel h2 { margin-top: 2.2rem; }
.artikel h3 { margin-top: 1.5rem; }
.artikel ul, .artikel ol { padding-left: 1.3rem; }
.artikel li { margin-bottom: 0.4rem; }
.artikel .tabelrand { margin: 1.2rem 0; }

/* De tabel in een artikel mag breder zijn dan de leesregel: een tabel lees je
   niet regel voor regel, en smal geperst wordt hij juist onleesbaar. */
.artikel .tabelrand table { min-width: 100%; }

/* Een link naar een bron buiten de site, waar de lezer werkelijk naartoe moet.
   Die hoort op te vallen tussen de lopende tekst: wie het register zoekt, wil
   niet lezen dat het bestaat maar erheen. */
.bronlink {
    border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--inkt);
    border-radius: 0 4px 4px 0; background: var(--vlak);
    padding: 0.9rem 1.2rem; margin: 1.2rem 0;
}
.bronlink a { font-weight: 600; font-size: 1.05rem; }
.bronlink span { display: block; font-size: 0.85rem; color: var(--zacht); margin-top: 0.2rem; }

.bijgewerkt {
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--lijn);
    font-size: 0.88rem; color: var(--zacht); max-width: 40rem;
}

.rubrieken { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.rubriek h3 { margin-top: 0; }
.rubriek-uitleg { color: var(--zacht); font-size: 0.92rem; margin: 0 0 0.7rem; }

/* Een lijst en geen kaarten. Bij twaalf artikelen wordt een raster van kaarten
   een muur waarin niemand zijn eigen vraag meer terugvindt; in een lijst staan
   de titels onder elkaar en dat scant tien keer sneller. */
.artikellijst { list-style: none; padding: 0; margin: 0; }
.artikellijst li { padding: 0.6rem 0; border-top: 1px solid var(--lijn); }
.artikellijst li:last-child { border-bottom: 1px solid var(--lijn); }
.artikellijst a { font-weight: 600; text-decoration: none; }
.artikellijst a:hover { text-decoration: underline; }
.artikellijst-uitleg { display: block; font-size: 0.88rem; color: var(--zacht); margin-top: 0.15rem; }

/* --- Afdrukken ----------------------------------------------------------- */

@media print {
    .kop nav, .voet, .knoppen, .overslaan, .kruimels { display: none !important; }
    body { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}