/* ===== gedeeld door de kennispaginas ===== */
/* ================= gedeeld door de kennispagina's (4zzd) =================

   De derde familie naast _branche.css en _logo.css. bouw.py laadt dit bestand zodra een
   pagina een .knhero heeft.

   Waarom deze familie er anders uitziet dan de andere twee: een kennispagina beantwoordt
   een vraag. De branchepagina's en de kledingstukpagina's openen met een foto omdat daar
   een product het onderwerp is; hier is het onderwerp een antwoord, en een foto zou dat
   alleen maar uitstellen. Daarom staat in de kop de vraag als kop en het antwoord er
   direct onder, in grotere letter dan de rest van de pagina. Wie alleen de kop leest,
   heeft zijn antwoord al. */

.knhero{background:var(--paper);color:var(--ink-2);
  padding:clamp(30px,3.4vw,58px) 0 clamp(34px,3.8vw,64px);
  text-align:center}
/* Op papier, niet op een donker vlak. Vierde vorm, en de reden staat in de vorige drie:
   de donkere band komt van de kledingstukpagina's, en daar werkt hij omdat een foto de halve
   breedte vult. Hier bleef dezelfde band leeg - de user drie keer: "een groot paars vlak",
   "een saai gedeelte bovenaan", "ik vind het nu ook niet heel mooi". Dat is geen kwestie van
   de inhoud maar van het middel: een kleurvlak zonder beeld is een plaat.

   Bijkomend voordeel: de pagina had twee donkere vlakken, de kop en het blok "waar het wel
   eens kendonker". Nu is dat tweede blok het enige donkere moment van de pagina, en dat is
   precies het blok dat nadruk verdient.

   Een kennispagina begint hiermee als een artikel: de vraag, het antwoord, en het rijtje
   wassymbolen. De oude donkere versie staat in _backup/_kennis_donkerekop.css. */
.knmidden{max-width:74rem}
.knhero .kruimel{justify-content:center}
/* De vraag draagt de kop nu alleen, zonder vlak eronder, dus hij mag groter en zwaarder. */
.knhero h1{color:var(--ink);font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:1.02;
  max-width:16ch;margin:clamp(16px,1.6vw,28px) auto 0;
  font-variation-settings:"wdth" 88,"wght" 800;letter-spacing:-.036em}
/* Het antwoordwoord in de merkkleur: dat is het enige gekleurde element in de kop, en het
   staat op het woord waar iemand voor komt. */
.knantwoord{margin:clamp(20px,2.2vw,34px) auto 0;max-width:58ch}
.knantwoord .kort{display:block;font-family:Archivo,sans-serif;color:var(--accent);
  font-size:var(--t4);font-variation-settings:"wdth" 94,"wght" 800;letter-spacing:-.022em;
  margin-bottom:var(--r2)}
.knantwoord p{color:var(--ink-2);font-size:var(--t3);line-height:1.58}
.knantwoord p + p{margin-top:.7em}
@media (max-width:560px){
  .knantwoord p{text-align:left}
  .knhero .kruimel{text-align:center}
}

/* ---- drie kolommen naast elkaar. Gedeeld door de kennispagina's. Geen kaarten met
   randen: dat is op deze site het meubelstuk van de branchepagina's. Hier alleen een
   haarlijn erboven, zoals de feitenbalk op de homepage. */
.kendrie{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.4vw,44px);margin-top:clamp(30px,3.2vw,52px)}
@media (max-width:940px){.kendrie{grid-template-columns:1fr;gap:var(--r5)}}
.kendrie section,.kendrie article{padding-top:var(--r3);border-top:2px solid var(--ink)}
.kendrie h3{font-size:var(--t3);font-variation-settings:"wght" 720;letter-spacing:-.018em}
.kendrie .oordeel{display:block;margin-top:var(--r1);font-family:Archivo,sans-serif;
  font-size:var(--t1);font-variation-settings:"wght" 640;color:var(--accent);
  letter-spacing:.02em}
.kendrie p{margin-top:var(--r2);color:var(--ink-2);font-size:var(--t2);line-height:1.62}

/* ---- een genummerde lijst: een volgorde van handelingen, of een rijtje voorwaarden. */
.kenregels{list-style:none;margin:clamp(26px,3vw,46px) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.6vw,24px);max-width:78ch;counter-reset:wr}
/* Vanaf 1101 in twee kolommen. Als lange kolom liet deze lijst op een breed scherm de halve
   pagina leeg; in twee kolommen blijft elke regel nog steeds rond de 60 tekens breed.

   grid-auto-flow:column en niet de standaard rijvulling. Met de standaard leest de lijst
   1-2 / 3-4 / 5, dus links-rechts-links-rechts, en dan moet je met je ogen heen en weer om
   de volgorde te volgen. Zo vult hij eerst de linkerkolom van boven naar beneden en dan de
   rechter: links 1, 2, 3 en rechts 4, 5.

   Het aantal rijen hangt af van het aantal regels, en dat verschilt per pagina. Met :has()
   telt de opmaak dat zelf, zodat een volgende kennispagina er niets voor hoeft te regelen. */
@media (min-width:1101px){
  .kenregels{grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:none;column-gap:clamp(34px,4vw,80px)}
  /* 3 of 4 regels -> 2 rijen */
  .kenregels:has(li:nth-child(3)):not(:has(li:nth-child(5))){grid-template-rows:repeat(2,auto)}
  /* 5 of 6 regels -> 3 rijen */
  .kenregels:has(li:nth-child(5)):not(:has(li:nth-child(7))){grid-template-rows:repeat(3,auto)}
  /* 7 of 8 regels -> 4 rijen */
  .kenregels:has(li:nth-child(7)){grid-template-rows:repeat(4,auto)}
  /* 1 of 2 regels: geen tweede kolom, dat oogt als een gat */
  .kenregels:not(:has(li:nth-child(3))){grid-auto-flow:row;grid-template-columns:minmax(0,1fr);max-width:78ch}
}
.kenregels li{position:relative;padding-left:clamp(44px,4vw,62px);color:var(--ink-2);
  font-size:var(--t2);line-height:1.62}
.kenregels li::before{counter-increment:wr;content:counter(wr);
  position:absolute;left:0;top:-2px;
  width:clamp(28px,2.6vw,38px);height:clamp(28px,2.6vw,38px);border-radius:50%;
  display:grid;place-items:center;background:var(--dark);color:#fff;
  font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 700}
.kenregels b{color:var(--ink);font-variation-settings:"wght" 640}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .kenregels li::before{background:var(--accent)}}
:root[data-theme="dark"] .kenregels li::before{background:var(--accent)}

/* ---- waar het wél kendonker. Donker blok: dit is de eerlijke alinea, en die hoort niet
   weggestopt tussen de rest. */
.kendonker{background:var(--dark);color:var(--op-2);border-radius:2px;
  margin-top:clamp(34px,3.6vw,58px);padding:clamp(28px,3vw,48px) clamp(24px,3vw,52px);
  max-width:92ch}
.kendonker h2{color:#fff;font-size:var(--t4);font-variation-settings:"wdth" 94,"wght" 740;
  letter-spacing:-.022em;max-width:24ch}
.kendonker ul{list-style:none;margin:clamp(20px,2.2vw,32px) 0 0;padding:0;display:grid;gap:var(--r3)}
.kendonker li{position:relative;padding-left:30px;font-size:var(--t2);line-height:1.6}
.kendonker li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--op-licht);border-radius:1px}
.kendonker b{color:#fff;font-variation-settings:"wght" 640}

/* ---- de vragen op een kennispagina. Dezelfde vorm als elders, alleen de achtergrond
   wisselt mee met het ritme van de pagina. */
.kenvragen{background:var(--paper)}

/* ---- kleine ondersteunende beelden (4zzd). Bewust klein: op een kennispagina is de tekst
   het antwoord en is een foto een aanduiding, geen bewijs. Daarom staan ze naast de tekst
   in plaats van erboven, en dragen ze een onderschrift dat beschrijft wat er te zien is en
   niets beweert. */
.kensplit{display:grid;gap:clamp(24px,3vw,56px);align-items:start;
  margin-top:clamp(26px,3vw,46px)}
@media (min-width:941px){.kensplit{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}}
.kenbeeld{margin:0}
.kenbeeld img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px;
  background:var(--surface-2)}
.kenbeeld figcaption{margin-top:var(--r2);color:var(--ink-3);font-size:var(--t1);
  line-height:1.5;max-width:44ch}
/* De stapel staat alleen, maar niet over de volle breedte: dat zou hem tot hoofdbeeld maken. */
.kenbreed{margin:clamp(28px,3.2vw,50px) 0 0;max-width:760px}
.kenbreed img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
.kenbreed figcaption{margin-top:var(--r2);color:var(--ink-3);font-size:var(--t1)}
/* Omgekeerde volgorde: beeld links, tekst rechts. Twee blokken onder elkaar met het beeld
   steeds rechts leest als een sjabloon; zo krijgt de pagina ritme. */
@media (min-width:941px){
  .kensplit.gedraaid{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
  .kensplit.gedraaid .kenbeeld{order:-1}
}
/* Gestapeld komt het beeld NA de tekst. Andersom stond de foto boven de kop die hem
   introduceert, en dan leest een aanduidfoto als een hoofdbeeld. */
@media (max-width:940px){.kensplit .kenbeeld,.kensplit.gedraaid .kenbeeld{order:2}}


/* ---- het motief in de kop (4zze).
   De user: "ik vind het een beetje een saai gedeelte bovenaan en dit is waar iemand op landt.
   Misschien kan je wat doen met de standaard wasemblemen in het wit. Er mag iets meer
   persoonlijkheid in het hero-gedeelte zitten."

   Niet gecentreerd: alle negentien andere pagina's lijnen links uit, en een gecentreerde kop
   zou deze pagina uit de familie trekken. De persoonlijkheid komt uit het motief, en dat
   motief is hier niet willekeurig: het is precies waar de pagina over gaat, en het is hetzelfde
   rijtje dat op het etiket in de kraag staat - het beeld verderop op de pagina.

   Als lijnwerk in de opmaak en niet als afbeelding: zo blijft het scherp op elk scherm, schaalt
   het mee en kost het niets aan laadtijd. */
.kenmotief{margin:clamp(30px,3.6vw,58px) auto 0;padding-top:clamp(18px,2vw,30px);
  border-top:1px solid var(--rule-2);max-width:46rem}
.kenmotief .label{display:block;font-family:Archivo,sans-serif;font-size:var(--t0);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-variation-settings:"wdth" 82,"wght" 620;margin-bottom:clamp(12px,1.4vw,20px)}
.kenmotief .rij{display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,72px);flex-wrap:wrap}
.kenmotief svg{width:clamp(32px,3.4vw,50px);height:auto;display:block;
  color:var(--accent);opacity:.72;flex:none;
  transition:opacity .25s ease}
.kenmotief:hover svg{opacity:1}
@media (max-width:560px){
  .kenmotief .rij{gap:18px}
  .kenmotief svg{width:28px}
}

/* ---- het rekenvak op /werkkleding-en-de-belastingdienst/: de denkbeeldige rechthoek uit
   paragraaf 22.2.4 van het Handboek Loonheffingen, als tekening. Geen versiering maar de
   rekenregel zelf, met de maten erbij die precies 70 cm2 opleveren. */
.kenmotief .rekenvak{width:clamp(200px,22vw,280px);height:auto;color:var(--accent);
  opacity:.85;flex:none}
.kenmotief .rekenbij{color:var(--ink-2);font-size:var(--t1);line-height:1.55;
  max-width:34ch;text-align:left}
@media (max-width:560px){
  .kenmotief .rekenbij{text-align:center;max-width:none}
}

/* ---------- overzichtspagina's: /branches/ en /advies/ (4zzw, herzien 4zzy) ----------
   Eerste versie was een lijst met lijnen, zonder beeld: "echt heel saai" (user). Nu met het
   beeld van de pagina waar de link heen gaat. Branches: fotokaarten in twee verspringende
   kolommen. Advies: vier brede rijen, om en om, met het korte antwoord in de merkkleur.
   Elke kaart en elke rij is in zijn geheel een link. */

/* gedeelde onderdelen */
.ovwat{font-family:Archivo,sans-serif;font-size:var(--t0);letter-spacing:.08em;
  text-transform:uppercase;font-variation-settings:"wght" 600;color:var(--ink-3)}
.ovnaar{font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 640;
  color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.ovnaar span{display:inline-block;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.ovslot{margin-top:clamp(48px,5.4vw,96px);padding-top:clamp(28px,3vw,44px);
  border-top:1px solid var(--rule-2);max-width:62ch}
.ovslot h2{font-size:var(--t4);font-variation-settings:"wdth" 94,"wght" 720;letter-spacing:-.022em}
.ovslot p{margin-top:var(--r2);color:var(--ink-2)}
.ovslot a{color:var(--accent)}

/* kop van /branches/: tekst links, drie sfeerbeelden verspringend rechts */
.ovhero{text-align:left}
.ovkop{display:grid;gap:clamp(34px,4vw,76px);align-items:center}
@media (min-width:941px){.ovkop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ovhero .kruimel{justify-content:flex-start}
.ovhero h1{margin:clamp(16px,1.6vw,28px) 0 0;max-width:12ch}
.ovintro{margin-top:clamp(18px,2vw,30px);font-size:var(--t3);line-height:1.58;color:var(--ink-2);max-width:44ch}
.ovfeiten{list-style:none;margin:clamp(22px,2.4vw,36px) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 24px;font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 620;color:var(--ink)}
.ovfeiten li{display:flex;align-items:center;gap:9px}
.ovfeiten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* Een groot staand beeld met twee kleinere ernaast: drie gelijke fotootjes vielen weg in
   de breedte van de kop. */
@media (min-width:941px){.ovkop{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.ovcollage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr 1fr;
  gap:clamp(10px,1.2vw,18px);height:clamp(300px,36vw,560px)}
.ovcollage img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;
  background:var(--surface-2);min-height:0}
.ovcollage img:first-child{grid-row:1 / 3;object-position:50% 30%}
.ovcollage img:nth-child(2){object-position:50% 28%}
.ovcollage img:nth-child(3){object-position:50% 40%}
@media (max-width:940px){.ovcollage{height:clamp(260px,62vw,440px);max-width:640px}}

/* acht fotokaarten */
.brkaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(44px,5vw,80px)}
@media (min-width:600px){.brkaarten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,3.4vw,72px)}}
/* De rechterkolom begint lager. Met transform, zodat de rijen gelijk blijven lopen; de
   ruimte die dat onderaan kost, krijgt de lijst er als marge bij. */
@media (min-width:941px){
  .brkaarten{padding-bottom:clamp(64px,7vw,128px)}
  .brkaarten li:nth-child(even){transform:translateY(clamp(64px,7vw,128px))}
}
.brkaarten a{display:block;text-decoration:none;color:inherit}
.brkaarten figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--surface-2)}
.brkaarten img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 45%);display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.brkaarten h2{margin-top:clamp(18px,1.8vw,26px);font-size:clamp(1.55rem,2.2vw,2.3rem);
  font-variation-settings:"wdth" 92,"wght" 760;letter-spacing:-.026em;transition:color .18s ease}
.brkaarten p{margin-top:var(--r2);color:var(--ink-2);max-width:52ch}
.brkaarten .ovnaar{margin-top:clamp(14px,1.4vw,20px)}

/* vier adviesrijen, om en om */
.adrijen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(52px,6.4vw,120px)}
.adrijen a{display:grid;gap:clamp(22px,3.4vw,64px);align-items:center;text-decoration:none;color:inherit}
@media (min-width:941px){
  .adrijen a{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .adrijen li:nth-child(even) figure{order:2}
}
.adrijen figure{margin:0;overflow:hidden;border-radius:2px;background:var(--surface-2)}
.adrijen img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.adtekst h2{margin-top:var(--r2);font-size:clamp(1.65rem,2.6vw,2.7rem);line-height:1.06;max-width:18ch;
  font-variation-settings:"wdth" 90,"wght" 780;letter-spacing:-.03em;transition:color .18s ease}
.adkort{margin-top:clamp(14px,1.4vw,22px);font-family:Archivo,sans-serif;color:var(--accent);
  font-size:var(--t4);font-variation-settings:"wdth" 94,"wght" 800;letter-spacing:-.022em;line-height:1.1}
.adtekst p:not(.adkort){margin-top:var(--r2);color:var(--ink-2);max-width:48ch}
.adtekst .ovnaar{margin-top:clamp(18px,1.8vw,28px)}

/* aanwijzen: beeld zoomt licht in, kop krijgt de merkkleur, pijl schuift op */
.brkaarten a:hover img,.adrijen a:hover img{transform:scale(1.045)}
.brkaarten a:hover h2,.brkaarten a:focus-visible h2,.adrijen a:hover h2,.adrijen a:focus-visible h2{color:var(--accent)}
.brkaarten a:hover .ovnaar span,.adrijen a:hover .ovnaar span,
.brkaarten a:focus-visible .ovnaar span,.adrijen a:focus-visible .ovnaar span{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .brkaarten img,.adrijen img,.ovnaar span{transition:none}
  .brkaarten a:hover img,.adrijen a:hover img{transform:none}
}

/* kop van /advies/: rechts de vier korte antwoorden, groot in de merkkleur (4zzy) */
.adantwoorden{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.adantwoorden li{border-bottom:1px solid var(--rule-2)}
.adantwoorden a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:20px;
  row-gap:4px;padding:clamp(16px,1.7vw,26px) 0;text-decoration:none;color:inherit}
.adantwoorden .ovwat{grid-column:1 / -1}
.adantwoorden b{font-family:Archivo,sans-serif;color:var(--accent);font-weight:normal;
  font-size:clamp(1.6rem,2.7vw,2.75rem);line-height:1.05;letter-spacing:-.03em;
  font-variation-settings:"wdth" 90,"wght" 800}
.adpijl{font-family:Archivo,sans-serif;font-size:var(--t3);color:var(--ink-3);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),color .18s ease}
.adantwoorden a:hover .adpijl,.adantwoorden a:focus-visible .adpijl{transform:translateX(6px);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.adpijl{transition:none}}

/* Het kruimelpad lijnt links uit met de kop, ook op de telefoon (de kennisregel centreert). */
@media (max-width:560px){.ovhero .kruimel{justify-content:flex-start;text-align:left}}