/* bewys. Zelfde huisstijl als WooZeker en WPZeker: dezelfde navy, dezelfde vormen, dezelfde
   letters. Alleen de accentkleur verschilt, en die komt uit hetzelfde palet: waar WooZeker het
   groen pakt, pakt bewys het blauw dat daar al naast stond. Zo zie je dat het familie is zonder
   dat het dezelfde site lijkt. */

:root {
    /* Een stap lichter dan bij de zusters. Daar is één donker vlak per pagina; hier zijn het er
       drie, en dan wordt #04162F een blok. Dit blijft dezelfde kleur, alleen minder zwaar: wit
       erop haalt nog altijd ruim 14:1. */
    --navy-900: #0C2444;
    --navy-800: #123055;
    --navy-700: #16304a;
    --navy-600: #24507a;
    --groen:    #204ce5;   /* het accent van dit merk: het blauw uit het huisstijlpalet */
    --groen-op: #1a3fc0;   /* zelfde naam als bij de zusters, zodat de gedeelde css klopt */
    --blauw:    #204ce5;
    --grijs-05: #F5F5F5;
    --grijs-10: #E9EAEC;
    --grijs-40: #9aa3ae;
    --grijs-60: #585e6a;
    --wit:      #FFFFFF;

    --breed: 1140px;   /* zelfde container als wpzeker */
    --radius: 20px;   /* kaarten en velden, net als wpzeker */
    --pil: 50px;      /* knoppen zijn daar volledig afgerond */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--navy-700);
    background: var(--wit);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 900;   /* wpzeker zet koppen op 900, en dat zie je meteen */
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 .5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.2rem; }
/* Alinea's lopen mee met de sectie, net als op wpzeker. Alleen op de lange leespagina's zetten
   we een kolom, want vijftienhonderd woorden over de volle breedte leest niemand. */
p  { margin: 0 0 1em; }
.leeskolom p, .leeskolom li { max-width: 68ch; }
a  { color: var(--blauw); }

.omhulsel { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.vak      { padding: 76px 0; }
/* Dezelfde navy als de hero en niet --navy-800. Twee bijna gelijke donkerblauwen op één pagina
   leest niet als twee vlakken maar als een vlak dat niet goed staat. --navy-800 blijft bestaan
   voor kleinere dingen die wél op donker moeten liggen. */
.vak-donker { background: var(--navy-900); color: var(--grijs-10); }
.vak-donker h1, .vak-donker h2, .vak-donker h3 { color: var(--wit); }
.vak-licht  { background: var(--grijs-05); }

/* ---- kop ---------------------------------------------------------------- */
.kop {
    position: sticky; top: 0; z-index: 50;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.kop-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.merk {
    font-family: 'DM Sans', sans-serif; font-weight: 900; font-size: 1.25rem;
    color: var(--wit); text-decoration: none; letter-spacing: -0.02em;
}
.kop nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.kop nav a {
    /* DM Sans en niet Heebo. Het menu is bediening en geen lopende tekst, en het stond hier
       naast een knop en een logo die al DM Sans waren: twee lettertypen in één balk zie je. */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    color: var(--grijs-10); text-decoration: none; font-size: .95rem;
}
.kop nav a[aria-current] { color: var(--wit); }
.kop nav a:hover { color: var(--wit); }

/* ---- knoppen ------------------------------------------------------------ */
.knop {
    display: inline-block; padding: 14px 30px; border-radius: var(--pil);
    font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1rem;
    text-decoration: none; border: 0; cursor: pointer; transition: background .15s;
}
.knop-groen { background: var(--groen); color: var(--wit); }
.knop-groen:hover { background: var(--groen-op); }
.knop-open { border: 1px solid rgba(255,255,255,.35); color: var(--wit); }
.knop-open:hover { border-color: var(--wit); }

/* ---- hero --------------------------------------------------------------- */
/* Breder dan bij de zusters, en dat is de hele ingreep. Op 16ch werd een kop van negen woorden
   vier regels van twee woorden: even veel tekst, maar je leest hem als vier dingen in plaats van
   één zin. Op 28ch zijn het er twee. Dezelfde reden voor de lead. */
.hero { background: var(--navy-900); color: var(--grijs-10); padding: 84px 0 76px; }
.hero h1 { color: var(--wit); max-width: 28ch; }
.hero .lead { font-size: 1.2rem; color: #c4ccd6; max-width: 62ch; }
.hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ---- raster ------------------------------------------------------------- */
.raster { display: grid; gap: 24px; }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.kaart {
    background: var(--wit); border: 1px solid var(--grijs-10);
    border-radius: var(--radius); padding: 30px;
}
.kaart h3 { margin-top: 0; }
.kaart p:last-child { margin-bottom: 0; }

/* ---- prijzen ------------------------------------------------------------ */
.prijskaart { display: flex; flex-direction: column; }
.prijskaart.uitgelicht { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); }
.prijs { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; }
.prijs small { font-size: .95rem; font-weight: 400; color: var(--grijs-60); }
.prijskaart ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
/* Een vinkje en geen stip. Een stip is een opsomming, een vinkje is een belofte, en op een
   prijskaart som je niet op maar beloof je. Getekend met twee randen in plaats van een teken uit
   het lettertype: dan is hij overal even dik en neemt hij de accentkleur aan. */
.prijskaart li { padding-left: 28px; position: relative; margin-bottom: 10px; font-size: .95rem; }
.prijskaart li::before {
    content: ''; position: absolute; left: 3px; top: .34em;
    width: 6px; height: 11px; border: solid var(--groen);
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.etiket {
    display: inline-block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--groen); font-weight: 500; margin-bottom: 10px;
}

/* ---- voet --------------------------------------------------------------- */
.voet { background: var(--navy-900); color: var(--grijs-40); padding: 56px 0 40px; font-size: .92rem; }
.voet a { color: var(--grijs-10); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet-in { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.voet h4 { color: var(--wit); font-size: .95rem; margin-bottom: 12px; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 8px; }
.voet-onder {
    margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---- uitklapmenu -------------------------------------------------------- */
.hamburger {
    display: none; margin-left: auto; width: 42px; height: 42px; padding: 10px;
    background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
    cursor: pointer; flex-direction: column; justify-content: space-between;
}
.hamburger span { display: block; height: 2px; background: var(--grijs-10); border-radius: 2px; }
.hamburger[aria-expanded="true"] { border-color: var(--groen); }

@media (max-width: 900px) {
    .hamburger { display: flex; }
    .kop-in { position: relative; }
    .kop nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0; margin: 0;
        background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.08);
        padding: 8px 24px 22px; box-shadow: 0 18px 30px rgba(0,0,0,.28);
    }
    body.menu-open .kop nav { display: flex; }
    .kop nav a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .kop nav a:last-child { border-bottom: 0; }
    .kop nav .knop { margin-top: 16px; text-align: center; }
    .kop nav .kop-icoon { width: auto; height: auto; border: 0; border-radius: 0; justify-content: flex-start; gap: 10px; }
    .kop nav .kop-icoon::after { content: 'Inloggen'; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1.05rem; }
}

@media (max-width: 720px) {
    .vak { padding: 56px 0; }
    .hero { padding: 64px 0 56px; }
    .rapport-cijfers > div { padding: 16px 10px; }
    .rapport-getal { font-size: 1.5rem; }
    .rapport-cijfers span { font-size: .72rem; }
}

/* Het diagram is 900 breed. Op een telefoon zou dat naar 39 procent schalen en dan staan de
   labels op zes pixels: aanwezig en onleesbaar. Liever laten schuiven dan laten verdwijnen. */
.diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram svg { min-width: 680px; }

/* ---- formulieren -------------------------------------------------------- */
label { display: block; margin: 18px 0 7px; font-size: .95rem; font-weight: 500; }
input[type=text], input[type=email], input:not([type]), textarea {
    width: 100%; padding: 13px 15px; font: inherit; font-size: 1rem;
    border: 1px solid var(--grijs-10); border-radius: var(--radius);
    background: var(--wit); color: var(--navy-700);
}
input:focus, textarea:focus { outline: 2px solid var(--groen); outline-offset: 1px; border-color: var(--groen); }
textarea { resize: vertical; }
.hero label { color: #c4ccd6; }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
ol li::marker { font-weight: 700; color: var(--groen); }

/* ---- beeldmerk ---------------------------------------------------------- */
.merk { display: inline-flex; align-items: center; gap: 10px; }
/* Hoogte en niet breedte, want het merkteken is hoger dan breed en de kopbalk is 68 pixels.
   Op 32 staat het teken steviger naast de naam dan op 27, zonder dat de balk hoger hoeft. */
.merk-schild { height: 32px; width: auto; flex: none; }
.merk span { color: inherit; }
.voet .merk { color: var(--wit); text-decoration: none; }

/* ---- iconen ------------------------------------------------------------- */
.icoon { width: 28px; height: 28px; color: var(--groen); margin-bottom: 14px; display: block; }
.vak-donker .icoon { color: var(--groen); }

/* ---- beeld in een sectie ------------------------------------------------ */
.beeld {
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--grijs-10); background: var(--grijs-05);
}
.beeld img { display: block; width: 100%; height: auto; }
.beeld-bijschrift { font-size: .88rem; color: var(--grijs-40); margin-top: 10px; }

/* Nog te vullen. Zichtbaar leeg is beter dan een stockfoto die niets zegt. */
.beeld-leeg {
    display: grid; place-items: center; min-height: 260px; text-align: center;
    border: 1px dashed var(--grijs-10); color: var(--grijs-40); font-size: .9rem; padding: 24px;
}

/* ---- nagebouwd scherm --------------------------------------------------- */
.scherm {
    border: 1px solid var(--grijs-10); border-radius: var(--radius);
    overflow: hidden; background: var(--wit); box-shadow: 0 10px 30px rgba(11,31,57,.07);
}
.scherm-balk {
    display: flex; align-items: center; gap: 7px;
    padding: 13px 18px; background: var(--grijs-05); border-bottom: 1px solid var(--grijs-10);
}
/* De drie stippen. `:not(.scherm-titel)` is geen netheid maar noodzaak: de titel is ook een span
   in deze balk, en zonder uitzondering krijgt die 10 bij 10 pixels en een rond grijs vlakje. De
   tekst loopt dan over het scherm eronder heen. */
.scherm-balk > span:not(.scherm-titel) {
    width: 10px; height: 10px; border-radius: 50%; background: #d5d8dd; flex: none;
}
.scherm-titel {
    margin-left: 12px; font-family: 'DM Sans', sans-serif; font-weight: 500;
    font-size: .85rem; color: var(--grijs-60);
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scherm-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.scherm-tabel th {
    text-align: left; font-family: 'DM Sans', sans-serif; font-weight: 500;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--grijs-40); padding: 13px 18px; border-bottom: 1px solid var(--grijs-10);
}
.scherm-tabel td { padding: 14px 18px; border-bottom: 1px solid var(--grijs-05); }
.scherm-tabel tr:last-child td { border-bottom: 0; }
.scherm-naam { font-weight: 500; color: var(--navy-700); }
.pil {
    display: inline-block; padding: 3px 11px; border-radius: var(--pil);
    font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.pil-groen  { background: #e4f6ee; color: #08794c; }
.pil-oranje { background: #fdf1dd; color: #97640d; }
.pil-rood   { background: #fbe6e3; color: #a5301f; }
.pil-grijs  { background: var(--grijs-05); color: var(--grijs-60); }

@media (max-width: 620px) {
    .scherm-tabel th:nth-child(2), .scherm-tabel td:nth-child(2),
    .scherm-tabel th:nth-child(3), .scherm-tabel td:nth-child(3) { display: none; }
}

/* ---- de belofte --------------------------------------------------------- */
.belofte { padding: 8px 0 4px; }
.belofte p {
    font-family: 'DM Sans', sans-serif; font-weight: 500;
    font-size: 1.35rem; line-height: 1.45; color: var(--navy-800); margin: 0;
}

/* ---- maandrapport ------------------------------------------------------- */
.rapport-cijfers {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--grijs-10);
}
.rapport-cijfers > div { padding: 20px 18px; text-align: center; }
.rapport-cijfers > div + div { border-left: 1px solid var(--grijs-10); }
.rapport-getal {
    display: block; font-family: 'DM Sans', sans-serif; font-weight: 900;
    font-size: 1.9rem; line-height: 1;
}
.rapport-groen  { color: #08794c; }
.rapport-oranje { color: #97640d; }
.rapport-cijfers span { display: block; font-size: .8rem; color: var(--grijs-60); margin-top: 6px; }
.rapport-lijst { list-style: none; margin: 0; padding: 8px 0; }
.rapport-lijst li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 18px; font-size: .9rem; line-height: 1.5;
}
.stip { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: .45em; }
.stip-groen  { background: #0CA367; }
.stip-oranje { background: #d79a1e; }
.stip-grijs  { background: #c3c8cf; }

/* ---- melding ------------------------------------------------------------ */
.melding-in { padding: 22px 24px 24px; }
.melding-in h4 { font-size: 1.15rem; margin: 12px 0 8px; }
.melding-in p { font-size: .93rem; color: var(--grijs-60); margin: 0 0 8px; }
.melding-tijd { font-size: .82rem !important; color: var(--grijs-40) !important; margin: 0 !important; }
.stip-rood { background: #c0392b; }
.rapport-rood { color: #a5301f; }
.rapport-uitleg { color: var(--grijs-60); font-size: .86rem; }

/* ---- inloggen als icoon ------------------------------------------------- */
.kop-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); color: var(--grijs-10);
    transition: border-color .15s, color .15s;
}
.kop-icoon:hover { border-color: var(--wit); color: var(--wit); }
.kop-icoon[aria-current] { border-color: var(--groen); color: var(--groen); }
.icoon-kop { width: 19px; height: 19px; margin: 0; color: inherit; display: block; }


/* ---- leespagina's (voorwaarden, privacy, verwerking) --------------------- */
.artikel h2 { margin-top: 44px; font-size: 1.5rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel h3 { margin-top: 30px; font-size: 1.12rem; }
.artikel ul, .artikel ol { max-width: 68ch; padding-left: 22px; }
.artikel li { margin-bottom: 9px; }
.artikel .kader {
    background: var(--grijs-05); border-radius: var(--radius);
    padding: 22px 26px; margin: 30px 0; max-width: 68ch;
}
.artikel .kader p:last-child { margin-bottom: 0; }

/* Eén regel onder de heroknoppen. Rustig, want het is een bewijsje en geen belofte. */
.hero-cijfer {
    margin: 26px 0 0; font-size: .95rem; line-height: 1.6;
    color: rgba(255,255,255,.62); max-width: 60ch;
}
.hero-cijfer strong { color: var(--wit); font-weight: 500; }

/* Tweede knop op een witte kaart. .knop-open is voor donkere vlakken en verdwijnt hier. */
.knop-zacht { background: var(--wit); border: 1px solid var(--grijs-10); color: var(--grijs-60); }
.knop-zacht:hover { border-color: var(--grijs-40); color: var(--navy-800); }
.mailrij { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mailrij input[type=email], .mailrij input[type=text] { flex: 1; min-width: 240px; }
.mailrij .knop { flex: none; }
.verborgen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================ vanaf hier alleen bewys ================================= */
/* Wat hierboven staat is gedeeld met WooZeker en WPZeker en hoort daar gelijk aan te blijven.
   Wat hieronder staat gaat over dingen die de zusters niet hebben: een gedeelde pagina, een
   stappenrij, en de vergelijking tussen zelf bijhouden en dit. */

/* ---- de looptijd achter de pil ------------------------------------------ */
/* De datum en wat die datum betekent horen bij elkaar, dus staan ze in één cel en niet in twee
   kolommen. In het prototype stonden ze los, en dan leest een regel als twee halve regels. */
.scherm-loop {
    display: block; font-size: .76rem; color: var(--grijs-40);
    margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* ---- kop van een gedeelde pagina ---------------------------------------- */
/* Geen stippenbalk hierboven: dit is geen scherm van jou maar een pagina die iemand anders
   krijgt, en dat verschil moet je zien zonder het te lezen. */
.deelkop {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 18px; border-bottom: 1px solid var(--grijs-10); background: var(--wit);
}
.deelkop strong {
    display: block; font-family: 'DM Sans', sans-serif; font-weight: 700;
    color: var(--navy-800); line-height: 1.3;
}
.deelkop span { font-size: .82rem; color: var(--grijs-40); }
.scherm-voet {
    margin: 0; padding: 16px 18px; background: var(--grijs-05);
    font-size: .86rem; color: var(--grijs-60); border-top: 1px solid var(--grijs-10);
}

/* ---- tekst naast een scherm --------------------------------------------- */
/* Een scherm is breed en tekst is smal. In twee gelijke kolommen wordt het scherm daarom hoger
   dan het hoort: dezelfde regels, maar dan in een staand kader. Geef het de ruimte die het van
   zichzelf heeft, dan staat de tabel er liggend in. */
.raster-beeld       { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.raster-beeld-links { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.raster-beeld, .raster-beeld-links { align-items: center; gap: 48px; }
@media (max-width: 860px) {
    .raster-beeld, .raster-beeld-links { grid-template-columns: 1fr; }
    /* Het scherm dat op een breed scherm links staat, hoort onder de tekst zodra het stapelt:
       eerst lezen waar je naar kijkt, dan kijken. */
    .raster-beeld-links > :first-child { order: 2; }
}

/* ---- de stappen die een bezoeker doorloopt ------------------------------ */
/* Genummerd omdat het werkelijk een volgorde is: zonder mailadres geen papieren, zonder papieren
   geen link. Een genummerde rij bij drie dingen die naast elkaar kunnen zou versiering zijn. */
.stappen { counter-reset: stap; display: grid; gap: 22px; margin-top: 34px; }
.stap {
    display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start;
}
.stap::before {
    counter-increment: stap; content: counter(stap);
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--groen); color: var(--wit);
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.1rem;
}
.vak-donker .stap::before { background: var(--wit); color: var(--navy-900); }
.stap h3 { margin: 8px 0 6px; }
.stap p { margin: 0; color: var(--grijs-60); max-width: 60ch; }
.vak-donker .stap p { color: #c4ccd6; }

/* ---- wat er misgaat als je niets doet ----------------------------------- */
/* Het rode zit in de pil en verder nergens. Een rand aan één kant maakt er een meldingsbalk van
   in plaats van een kaart, en dan staan er drie meldingen naast elkaar terwijl het drie verhalen
   zijn. */
.gevalkaart .pil { margin-bottom: 12px; }
.gevalkaart p:last-child { margin-bottom: 0; font-size: .95rem; color: var(--grijs-60); }

/* Een kop met een bedrijfsnaam erin is langer dan een kop die wij zelf schrijven, en hoeveel
   langer weten we niet: "Bosman" en "Gebr. Van der Heijden Installatietechniek" krijgen dezelfde
   regel. Daarom ruimer dan de gewone kop, zodat ook een lange naam op twee regels blijft. */
.hero h1.lang { max-width: 34ch; }

/* ---- de regel met de eigen gegevens uit de mail -------------------------- */
/* Staat alleen op /check/, en alleen als er werkelijk iets uit het register is meegegeven. Geen
   gegevens betekent: dit blok bestaat niet, in plaats van een leeg kader met streepjes erin. */
.vondst {
    border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
    background: rgba(255,255,255,.05); padding: 22px 26px; margin-top: 28px; max-width: 46rem;
}
.vondst strong { color: var(--wit); font-family: 'DM Sans', sans-serif; font-weight: 700; }
.vondst dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 14px 0 0; }
.vondst dt { color: rgba(255,255,255,.55); font-size: .9rem; }
.vondst dd { margin: 0; color: var(--wit); font-size: .95rem; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .deelkop { flex-direction: column; align-items: flex-start; gap: 10px; }
    .vondst dl { grid-template-columns: 1fr; gap: 2px 0; }
    .vondst dd { margin-bottom: 10px; }
}

/* ---- een wit scherm in een donkere sectie ------------------------------- */
/* Dit is een fout die je niet ziet aankomen en wel meteen ziet staan: .vak-donker zet de
   tekstkleur op grijs-10, en een .scherm daarbinnen is wit. De cellen die zelf geen kleur zetten
   erven dan licht grijs op wit. Op de voorpagina en op /check/ staat het gedeelde scherm in een
   donkere sectie, dus dit is geen theorie.

   h4 staat er los bij, want .vak-donker maakt alleen h1 tot h3 wit. */
.vak-donker .scherm, .hero .scherm { color: var(--navy-700); }
.vak-donker .scherm h4, .hero .scherm h4 { color: var(--navy-800); }

/* ---- de datum blijft staan op een telefoon ------------------------------ */
/* Het gedeelde stijlblad verbergt onder 620px kolom 2 én 3. Bij de zusters is kolom 3 een
   versienummer; hier is het de vervaldatum, en dat is de hele reden dat de tabel er staat. Dus
   kolom 2 blijft weg en kolom 3 komt terug. */
@media (max-width: 620px) {
    .scherm-tabel th:nth-child(3), .scherm-tabel td:nth-child(3) { display: table-cell; }
    .scherm-loop { font-size: .72rem; }
}


/* ---- voorbeelden per sector --------------------------------------------- */
/* Tabs zonder javascript: verborgen radioknoppen sturen met `:checked ~` welk paneel zichtbaar
   is. Dat is geen trucje maar het juiste gereedschap: het werkt met het toetsenbord, het werkt
   als javascript faalt, en het valt onder de Content-Security-Policy niet op.
   Let op de volgorde in de html: eerst alle inputs, dan de labelrij, dan de panelen. `~` kijkt
   alleen vooruit, dus een input die ná zijn paneel staat stuurt niets aan. */
.sectoren > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sectorrij { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.sectorrij label {
    margin: 0; cursor: pointer; padding: 9px 18px; border-radius: var(--pil);
    border: 1px solid var(--grijs-10); background: var(--wit);
    font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .93rem;
    color: var(--grijs-60); transition: border-color .15s, color .15s, background .15s;
}
.sectorrij label:hover { border-color: var(--grijs-40); color: var(--navy-800); }
.sectorpaneel { display: none; }

/* Eén regel per sector, en die moet ook kloppen als er een zesde bij komt: `nth-of-type`
   koppelt de zoveelste input aan het zoveelste label en paneel. */
.sectoren > input:nth-of-type(1):checked ~ .sectorrij label:nth-of-type(1),
.sectoren > input:nth-of-type(2):checked ~ .sectorrij label:nth-of-type(2),
.sectoren > input:nth-of-type(3):checked ~ .sectorrij label:nth-of-type(3),
.sectoren > input:nth-of-type(4):checked ~ .sectorrij label:nth-of-type(4),
.sectoren > input:nth-of-type(5):checked ~ .sectorrij label:nth-of-type(5),
.sectoren > input:nth-of-type(6):checked ~ .sectorrij label:nth-of-type(6) {
    background: var(--groen); border-color: var(--groen); color: var(--wit);
}
.sectoren > input:nth-of-type(1):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(1),
.sectoren > input:nth-of-type(2):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(2),
.sectoren > input:nth-of-type(3):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(3),
.sectoren > input:nth-of-type(4):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(4),
.sectoren > input:nth-of-type(5):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(5),
.sectoren > input:nth-of-type(6):checked ~ .sectorpanelen .sectorpaneel:nth-of-type(6) {
    display: block;
}

/* Toetsenbordbediening moet je kunnen zien, anders bestaat hij niet. */
.sectoren > input:focus-visible:nth-of-type(1) ~ .sectorrij label:nth-of-type(1),
.sectoren > input:focus-visible:nth-of-type(2) ~ .sectorrij label:nth-of-type(2),
.sectoren > input:focus-visible:nth-of-type(3) ~ .sectorrij label:nth-of-type(3),
.sectoren > input:focus-visible:nth-of-type(4) ~ .sectorrij label:nth-of-type(4),
.sectoren > input:focus-visible:nth-of-type(5) ~ .sectorrij label:nth-of-type(5),
.sectoren > input:focus-visible:nth-of-type(6) ~ .sectorrij label:nth-of-type(6) {
    outline: 2px solid var(--navy-800); outline-offset: 2px;
}