/* KMK Begrippen 0.2.0. Gescoped onder .kb; kritieke kleuren expliciet, Astra-bestendig.
   Ontwerp: koopreisspoor als signatuur, zoeken vooraan, werkt zonder JavaScript. */

:root{
 --navy:#0D2B45; --inkt:#14293D; --blauw:#1E5FD2; --lucht:#3DB7E4; --oranje:#FF9F00;
 --grijs:#5B7186; --zacht:#8FA3B6; --lijn:#DCE6EF; --mist:#F5F8FB; --vlak:#FFFFFF; --achter:#FFFFFF;
 --schaduw:0 10px 34px rgba(13,43,69,.10); --radius:16px; --snel:.18s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark){
 :root{--navy:#EAF2FA; --inkt:#DCE7F2; --grijs:#9FB3C6; --zacht:#7A8FA3; --lijn:#22384E; --mist:#122536; --vlak:#0F2131; --achter:#0A1826; --blauw:#6BA8FF;}
}
*{box-sizing:border-box}
.kb{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--inkt);background:var(--achter);
 font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.kb h1,.kb h2,.kb h3{font-family:"Schibsted Grotesk",Inter,system-ui,sans-serif;color:var(--navy);line-height:1.15;margin:0}
.kb a{color:var(--blauw);text-decoration:none}
.kb a:hover{text-decoration:underline}
.kb :focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:6px}
.kb-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Kopbalk */
.kb-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--lijn)}
.kb-bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.kb-merk{display:flex;align-items:baseline;gap:10px;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;
 color:var(--navy);font-size:16px;letter-spacing:-.01em}
.kb-merk span{font-weight:500;color:var(--grijs);font-size:12.5px;font-family:Inter,sans-serif;letter-spacing:0}
.kb-teller{font-size:12px;color:var(--grijs);font-variant-numeric:tabular-nums}

/* Zoekkop */
.kb-hero{padding:44px 0 8px}
.kb-eye{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;
 text-transform:uppercase;color:var(--blauw);margin-bottom:12px}
.kb-eye::before{content:"";width:18px;height:3px;background:var(--oranje);border-radius:2px;flex:0 0 auto}
.kb-hero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.025em;max-width:16ch}
.kb-hero p{color:var(--grijs);font-size:17px;margin:12px 0 26px;max-width:52ch}
.kb-zoek{position:relative;max-width:680px}
.kb-zoek__veld{display:flex;align-items:center;gap:12px;background:var(--vlak);border:1px solid var(--lijn);
 border-radius:14px;padding:0 18px;box-shadow:0 2px 12px rgba(13,43,69,.06);transition:border-color var(--snel),box-shadow var(--snel)}
.kb-zoek__veld:focus-within{border-color:var(--blauw);box-shadow:0 0 0 5px rgba(30,95,210,.10)}
.kb-zoek input{flex:1;border:0;background:transparent;font:inherit;font-size:16.5px;color:var(--inkt);
 padding:16px 0;min-height:44px}
.kb-zoek input:focus{outline:none}
.kb-zoek input::placeholder{color:var(--zacht)}
.kb-zoek__icoon{width:20px;height:20px;flex:none;color:var(--zacht)}
.kb-zoek__toets{flex:none;font-size:11.5px;color:var(--zacht);border:1px solid var(--lijn);border-radius:6px;
 padding:3px 7px;font-family:ui-monospace,Menlo,monospace}
.kb-zoek__wis{flex:none;border:0;background:transparent;color:var(--grijs);font:inherit;font-size:13px;
 cursor:pointer;padding:8px;min-height:44px;display:none}
.kb-zoek--vol .kb-zoek__wis{display:block}
.kb-zoek--vol .kb-zoek__toets{display:none}

/* Resultaten */
.kb-uit{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--vlak);border:1px solid var(--lijn);
 border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;z-index:20}
.kb-uit[hidden]{display:none}
.kb-hit{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:13px 18px;
 border-bottom:1px solid var(--mist);min-height:56px}
.kb-hit:last-child{border-bottom:0}
.kb-hit:hover,.kb-hit[aria-selected="true"]{background:var(--mist);text-decoration:none}
.kb-hit b{font-size:15.5px;color:var(--navy);font-weight:600;overflow-wrap:break-word}
.kb-hit em{grid-column:1;font-style:normal;font-size:12.5px;color:var(--grijs)}
.kb-hit__stap{font-size:11.5px;color:var(--grijs);background:var(--mist);border:1px solid var(--lijn);
 border-radius:999px;padding:3px 10px;white-space:nowrap}
.kb-hit[aria-selected="true"] .kb-hit__stap{background:var(--vlak)}
.kb-leeg{padding:22px 20px}
.kb-leeg b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:4px}
.kb-leeg p{margin:0 0 14px;font-size:14px;color:var(--grijs)}

/* Populair: uitgelijnd, gebalanceerd knoppenraster */
.kb-populair{margin:20px 0 0}
.kb-populair > span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 color:var(--grijs);margin:0 0 10px}
.kb-populair__rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:760px){.kb-populair__rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kb-chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;
 border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt);font-size:13.5px;font-weight:500}
.kb-chip:hover{border-color:var(--blauw);color:var(--blauw);text-decoration:none}
.kb-populair__rij .kb-chip{width:100%;justify-content:center;text-align:center;border-radius:10px;
 padding:8px 10px;line-height:1.25;font-weight:600}

/* Koopreisspoor: de signatuur. Paneel met doorlopende rail en een bol per stap. */
.kb-spoor{margin:34px 0 10px;background:var(--mist);border:1px solid var(--lijn);border-radius:18px;padding:22px 20px 24px}
.kb-spoor__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.kb-spoor__kop h2{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.kb-spoor__baan{position:relative}
.kb-spoor__baan::before{content:"";position:absolute;left:calc(100%/18);right:calc(100%/18);top:11px;height:2px;background:var(--lijn);border-radius:2px}
.kb-spoor__rij{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
@media (max-width:820px){
 .kb-spoor__baan{overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
 .kb-spoor__baan::before{left:94px;right:94px}
 .kb-spoor__rij{grid-template-columns:repeat(9,148px)}
 .kb-spoor__stap{scroll-snap-align:start}
}
.kb-spoor__stap{display:flex;flex-direction:column}
.kb-spoor__bol{position:relative;display:block;width:22px;height:22px;border-radius:50%;background:var(--vlak);
 border:2px solid var(--lijn);margin:0 auto 10px;transition:border-color var(--snel),background var(--snel)}
.kb-spoor__bol::after{content:"";position:absolute;inset:5px;border-radius:50%;background:transparent;transition:background var(--snel)}
.kb-spoor__stap:hover .kb-spoor__bol{border-color:var(--blauw)}
.kb-spoor__stap:hover .kb-spoor__bol::after{background:var(--oranje)}
.kb-spoor__kaart{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;background:var(--vlak);border:1px solid var(--lijn);
 border-radius:12px;padding:11px 10px 12px;min-height:112px;transition:border-color var(--snel),box-shadow var(--snel)}
.kb-spoor__stap:hover .kb-spoor__kaart{border-color:var(--blauw);box-shadow:0 4px 14px rgba(30,95,210,.12)}
.kb-spoor__stap:hover{text-decoration:none}
.kb-spoor__nr{display:block;font-family:"Schibsted Grotesk",Inter,sans-serif;font-size:13px;color:var(--blauw);font-weight:800;letter-spacing:.04em}
.kb-spoor__naam{display:block;font-family:"Schibsted Grotesk",Inter,sans-serif;font-size:13px;font-weight:700;color:var(--navy);line-height:1.25;flex:1 1 auto;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.kb-spoor__aantal{display:block;font-size:12px;color:var(--grijs);font-variant-numeric:tabular-nums}

/* Index */
.kb-index{padding:30px 0 60px}
.kb-index__kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kb-schakel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--mist);border:1px solid var(--lijn);border-radius:999px;padding:4px}
.kb-schakel a{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--grijs);min-height:40px;
 display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
@media (max-width:480px){
 .kb-index__kop{flex-direction:column;align-items:stretch}
 .kb-schakel{width:100%}
 .kb-schakel a{padding:9px 6px;font-size:13px}
 .kb-index__kop .kb-teller{text-align:right}
}
.kb-schakel a:hover{text-decoration:none;color:var(--navy)}
.kb-schakel a[aria-current="true"]{background:var(--vlak);color:var(--navy);box-shadow:0 1px 3px rgba(13,43,69,.10)}
.kb-alfabet{position:sticky;top:0;z-index:6;background:var(--achter);display:grid;
 grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px;margin:0 0 22px;padding:12px 0;border-bottom:1px solid var(--mist)}
.kb-alfabet a{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;
 border:1px solid var(--lijn);border-radius:10px;background:var(--vlak);color:var(--inkt);font-weight:700;font-size:13.5px}
.kb-alfabet a:hover{border-color:var(--blauw);color:var(--blauw);text-decoration:none}
.kb-groep{margin:0 0 30px;scroll-margin-top:80px}
.kb-groep__kop{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--mist);padding-bottom:8px;margin-bottom:8px}
.kb-groep__kop h2{font-size:24px;font-weight:800}
.kb-groep__kop span{font-size:12.5px;color:var(--grijs);font-variant-numeric:tabular-nums}
.kb-groep__uit{font-size:13.5px;color:var(--grijs);margin:0 0 12px;max-width:60ch}
.kb-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 28px}
.kb-rij a{display:flex;flex-direction:column;padding:9px 10px;border-radius:10px;min-height:44px;justify-content:center}
.kb-rij a{border:1px solid transparent}
.kb-rij a:hover{background:rgba(61,183,228,.08);border-color:rgba(61,183,228,.30);text-decoration:none}
.kb-rij b{font-weight:600;font-size:14.5px;color:var(--navy);overflow-wrap:break-word;hyphens:auto}
.kb-rij a:hover b{color:var(--blauw)}
.kb-rij em{font-style:normal;font-size:12.5px;color:var(--grijs);overflow-wrap:break-word}

/* Begrippagina */
.kb-terug{display:inline-flex;align-items:center;gap:7px;margin:26px 0 18px;font-size:14px;color:var(--grijs);min-height:44px}
.kb-terug:hover{color:var(--blauw);text-decoration:none}
.kb-kop{border-bottom:1px solid var(--lijn);padding-bottom:22px;margin-bottom:26px}
.kb-kop h1{font-size:clamp(28px,4.6vw,42px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.kb-kop__ook{font-size:14.5px;color:var(--grijs);margin:0 0 14px}
.kb-merken{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kb-merk-stap{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border-radius:999px;
 padding:6px 15px;font-size:12.5px;font-weight:600}
.kb-merk-stap i{font-style:normal;font-family:ui-monospace,Menlo,monospace;color:var(--lucht);font-size:11px}
.kb-merk-vlak{display:inline-flex;align-items:center;background:var(--mist);border:1px solid var(--lijn);
 border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--inkt);font-weight:500}
.kb-merk-tijd{display:inline-flex;align-items:center;gap:7px;background:#FFF3DC;border:1px solid #F2DCA8;
 border-radius:999px;padding:6px 14px;font-size:12.5px;color:#8A5A00;font-weight:600}
.kb-id{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--zacht);letter-spacing:.04em;margin:14px 0 0}
.kb-inhoud{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start;padding-bottom:70px}
@media (max-width:900px){.kb-inhoud{grid-template-columns:1fr;gap:30px}}
.kb-lead{font-size:19px;line-height:1.55;color:var(--navy);font-weight:500}
.kb-tekst p{margin:0 0 16px}
/* Tekstopmaak van de uitleg zelf */
.kb-tekst h2{font-size:20px;font-weight:700;margin:30px 0 10px;letter-spacing:-.01em}
.kb-tekst h2:first-of-type{margin-top:26px}
.kb-tekst p{font-size:16.5px;line-height:1.68;margin:0 0 16px}
.kb-tekst ul{margin:0 0 18px;padding-left:22px}
.kb-tekst li{margin:7px 0;font-size:16.5px;line-height:1.6}
.kb-tekst li::marker{color:var(--lucht)}
.kb-tekst a{text-decoration:underline;text-underline-offset:2px}
.kb-wacht{border:1px dashed var(--lijn);border-radius:var(--radius);padding:24px;background:var(--mist)}
.kb-wacht b{display:block;color:var(--navy);font-size:16px;margin-bottom:6px;font-family:"Schibsted Grotesk",sans-serif}
.kb-wacht p{margin:0;font-size:14.5px;color:var(--grijs)}
.kb-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--grijs);
 background:var(--vlak);border:1px solid var(--lijn);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.kb-status i{width:7px;height:7px;border-radius:50%;background:var(--zacht);flex:none}
.kb-status--goed{color:#1B7A4B;border-color:#BFE3CE;background:#F1FAF5}
.kb-status--goed i{background:#2FA36B}
.kb-status--open{color:#8A5A00;border-color:#F2DCA8;background:#FFF9EE}
.kb-status--open i{background:#E0A32E}
.kb-let{border:1px solid #F2DCA8;background:#FFF9EE;border-radius:var(--radius);padding:18px 20px;margin:22px 0 0}
.kb-let b{display:block;color:#8A5A00;font-family:"Schibsted Grotesk",Inter,sans-serif;font-size:15px;margin-bottom:5px}
.kb-let p{margin:0;font-size:14px;color:#7A5510;line-height:1.55}
.kb-blok{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);padding:20px 22px;margin:0 0 16px}
.kb-blok h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs);margin-bottom:12px}
.kb-blok ul{list-style:none;margin:0;padding:0}
.kb-blok li{padding:7px 0;border-bottom:1px solid var(--mist);font-size:14.5px}
.kb-blok li:last-child{border-bottom:0}
.kb-expert{background:var(--navy);border-radius:var(--radius);padding:22px;color:#fff;margin:0 0 16px}
.kb-expert h2{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lucht);margin-bottom:10px}
.kb-expert p{margin:0;font-size:14.5px;color:rgba(255,255,255,.86)}
.kb-expert__knop{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:16px;
 background:var(--oranje);color:#081D30;border-radius:999px;padding:12px 24px;font-weight:700;font-size:14.5px;width:100%}
.kb-expert__knop:hover{text-decoration:none;filter:brightness(1.05)}
.kb-deel{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.kb-deel button{border:1px solid var(--lijn);background:var(--vlak);border-radius:999px;padding:9px 16px;
 font:inherit;font-size:13px;color:var(--inkt);cursor:pointer;min-height:44px}
.kb-deel button:hover{border-color:var(--blauw);color:var(--blauw)}
.kb-blok--doen{background:var(--mist)}
.kb-blok--doen li a{font-weight:600}
.kb-hier{border:1px solid var(--lijn);border-radius:var(--radius);padding:22px;margin:34px 0;background:var(--vlak)}
.kb-hier h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs);margin-bottom:14px}
.kb-hier__rij{display:flex;flex-wrap:wrap;gap:8px}
.kb-hier__uit{margin:14px 0 0;font-size:13px;color:var(--grijs)}
.kb-zoekblok{border:1px solid var(--lijn);border-radius:var(--radius);padding:20px 22px;margin:0 0 30px;background:var(--vlak)}
.kb-zoekblok__kop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.kb-zoekblok__kop h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs)}
.kb-zoekblok__kop a{font-size:13.5px;font-weight:600}
.kb-zoekblok__rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.kb-zoekblok__hit{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border:1px solid var(--lijn);border-radius:11px;min-height:44px;justify-content:center}
.kb-zoekblok__hit:hover{border-color:var(--blauw);background:var(--mist);text-decoration:none}
.kb-zoekblok__hit b{font-size:15px;color:var(--navy);font-weight:600}
.kb-zoekblok__hit span{font-size:12.5px;color:var(--grijs)}
.kb-voet{border-top:1px solid var(--lijn);padding:26px 0 60px;font-size:13px;color:var(--grijs)}

/* Statische routering zonder JavaScript */
.kb-detail{display:none}
.kb-detail:target{display:block}
.kb-start{display:block}
body:has(.kb-detail:target) .kb-start{display:none}
body:has(.kb-detail:target) .kb-bar{position:static}
.kb-vb{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;
 text-transform:uppercase;color:#8A5A00;background:#FFF3DC;border:1px solid #F2DCA8;border-radius:999px;
 padding:5px 13px;margin-bottom:14px}

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

/* Themabestendigheid: het thema mag deze eigenschappen niet overschrijven.
   Selectors zijn bewust zwaarder dan .entry-content h1 en .entry-content a. */
.kb h1, .kb h2, .kb h3, .kb .kb-hero h1, .kb .kb-kop h1{color:var(--navy)!important}
.kb .kb-groep__kop h2, .kb .kb-spoor__kop h2, .kb .kb-blok h2{color:var(--grijs)!important}
.kb .kb-groep__kop h2{color:var(--navy)!important}
.kb .kb-expert h2{color:var(--lucht)!important}
.kb a.kb-expert__knop, .kb a.kb-expert__knop:hover, .kb a.kb-expert__knop:visited{color:#081D30!important;background:var(--oranje)!important}
.kb a.kb-merk-stap, .kb a.kb-merk-stap:hover{color:#fff!important}
.kb a.kb-chip, .kb a.kb-chip:visited{color:var(--inkt)!important}
.kb a.kb-chip:hover{color:var(--blauw)!important}
.kb a.kb-terug, .kb a.kb-terug:visited{color:var(--grijs)!important}
.kb a.kb-terug:hover{color:var(--blauw)!important}
.kb .kb-rij b{color:var(--navy)!important}
.kb .kb-rij a:hover b{color:var(--blauw)!important}
.kb .kb-rij em{color:var(--grijs)!important}
.kb .kb-spoor__nr{color:var(--blauw)!important}
.kb .kb-eye{color:var(--blauw)!important}
.kb .kb-spoor__stap, .kb .kb-spoor__stap:visited{color:var(--inkt)!important}
.kb .kb-schakel a, .kb .kb-alfabet a{color:var(--grijs)!important}
.kb .kb-schakel a[aria-current="true"], .kb .kb-alfabet a{color:var(--navy)!important}
.kb .kb-expert p, .kb .kb-expert p b{color:rgba(255,255,255,.88)!important}
.kb .kb-lead{color:var(--navy)!important}
.kb .kb-zoekblok__kop h2{color:var(--grijs)!important}
.kb .kb-zoekblok__hit b{color:var(--navy)!important}
.kb .kb-zoekblok__hit span{color:var(--grijs)!important}
.kb .kb-tekst p, .kb .kb-tekst li{color:var(--inkt)!important}
.kb .kb-tekst p.kb-lead{color:var(--navy)!important;font-size:19px;line-height:1.55;font-weight:500}
.kb .kb-tekst h2{color:var(--navy)!important}
.kb .kb-tekst a{color:var(--blauw)!important}
.kb .kb-hier h2{color:var(--grijs)!important}
.kb .kb-hier__uit{color:var(--grijs)!important}
.kb .kb-blok--doen li a{color:var(--blauw)!important}
.kb .kb-status--goed{color:#1B7A4B!important}
.kb .kb-status--open{color:#8A5A00!important}
.kb .kb-let b{color:#8A5A00!important}
.kb .kb-let p{color:#7A5510!important}
.kb .kb-hero p, .kb .kb-groep__uit, .kb .kb-teller, .kb .kb-kop__ook{color:var(--grijs)!important}

.kb, .kb p, .kb li, .kb span, .kb a, .kb b, .kb em, .kb input, .kb button, .kb kbd{font-style:normal!important}
.kb input[type="search"]{-webkit-appearance:none;appearance:none;border-radius:0;background:transparent!important;color:var(--inkt)!important;box-shadow:none!important}
.kb a{box-shadow:none}
.kb-expert__knop{color:#081D30!important;background:var(--oranje)!important}
.kb-expert h2, .kb-expert p{color:inherit}
.kb-merk-stap{color:#fff!important}
.kb-merk-stap:hover{color:#fff!important;text-decoration:none}