/* Kamerstand: gedeelde stijl voor alle pagina's in web/. Overgenomen uit het canvas-ontwerp (A+B-stijl).
   Pagina-specifieke opmaak staat inline in de pagina zelf, zoals in het ontwerp. */
:root {
  --inkt: #161616;
  --inkt-2: #4A4A47;
  --inkt-3: #5C5C59;
  --inkt-4: #8A8A86;
  --rood: #6E1A27;
  --rood-licht: #D8B9BE;
  --groen: #2F6B3B;
  /* Vaste betekenis van kleuren in grafieken: tinten van het merkrood (branding), geen zwart.
     donker = coalitie, midden = oppositie en algemene balken, data-rood = aangenomen en onder het gemiddelde,
     licht = verworpen */
  --rood-donker: #5A1420;
  --data-rood: #8E3B47;
  --rood-midden: #B9737E;
  --data-rood-licht: #E2C6CB;
  --coalitie: var(--rood-donker);
  --oppositie: var(--rood-midden);
  --aangenomen: var(--data-rood);
  --verworpen: var(--data-rood-licht);
  --boven: var(--groen);
  --onder: var(--data-rood);
  --meer: #B5651D;
  --minder: #3F6E9E;
  --lijn: #E4E4E1;
  --lijn-2: #C9C9C5;
  --vlak: #F7F2F3;
  --vlak-grijs: #F0F0EE;
  --wit: #FFFFFF;
  /* Vlakken en tekst */
  --vlak-filter: #F7F7F5;
  --vlak-zacht: #FBFBFA;
  --inkt-zacht: #333331;
  --lijn-3: #B5B5B1;
  --lijn-partij: #E8DCDF;
  --topbalk-tekst: #CFCFCB;
  --melding-vlak: #FFF4E5;
  --melding-inkt: #6B4310;
  /* Status (vragen en toezeggingen) */
  --ok-vlak: #E6EFE8;
  --ok-inkt: #1F4A28;
  --deels-vlak: #EEF3E8;
  --deels-inkt: #3A5A20;
  --laat-vlak: #FBE9EC;
  /* Tinten rood voor gestapelde grafieken (debatten, trends), van donker naar licht */
  --rood-1: #4A0F1B;
  --rood-3: #A84A57;
  --rood-4: #C97D87;
  --rood-roze: #D07F8C;
  --rood-5: #DFA7AE;
  --rood-6: #E2B4BA;
  --rood-7: #F0CDD2;
  --overig: #EEE7E5;
  --zonder-onderwerp: #EEEEEC;
  /* Vaste volgorde voor onderwerpen in ring- en staafgrafieken (na --data-rood) */
  --cat-oker: #C9962E;
  --cat-teal: #00968C;
  --cat-terra: #C0603B;
  --cat-blauw: #3F6FB0;
  --cat-olijf: #7C8A3A;
  --cat-paars: #94509A;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  /* Geen monospace meer voor cijfers (keuze gebruiker): --mono is Geist met cijfers van gelijke breedte */
  --mono: var(--sans);
}
* { box-sizing: border-box; }
/* Paginakop (docs/ontwerpregels.md, Typografie). Home zet zijn eigen, grotere h1 inline. */
h1 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 5vw, 58px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: manual; }
/* Een h1 die een zin is: de titel van een motie of wetsvoorstel */
.ks-h1-zin { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; max-width: 32em; }
.ks-titel-vol { margin: 12px 0 0; max-width: 40em; }
.ks-titel-vol span { display: block; font-size: 12px; color: var(--inkt-3); }
.ks-titel-vol p { margin: 2px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--inkt-2); }
body { margin: 0; background: var(--wit); color: var(--inkt); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: var(--inkt); }
a:hover { color: var(--rood); }
/* Alle keuzelijsten en invoervakken (filters) even hoog: --veld-h. Grote zoekbalken op de homepage en de Motiemeter zijn bewust hoger. */
:root { --veld-h: 44px; }
select { box-sizing: border-box; height: var(--veld-h); min-height: var(--veld-h); padding: 0 10px; border: 1px solid var(--lijn-2); border-radius: 0; background: var(--wit); font: inherit; font-size: 15px; color: var(--inkt); max-width: 100%; }
input[type=search], input[type=text], input[type=email], input[type=date], input[type=number], textarea { box-sizing: border-box; min-height: var(--veld-h); padding: 8px 10px; border: 1px solid var(--lijn-2); border-radius: 0; background: var(--wit); font: inherit; font-size: 15px; color: var(--inkt); }
input[type=search], input[type=text], input[type=email], input[type=date], input[type=number] { height: var(--veld-h); padding-top: 0; padding-bottom: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

.ks-wrap { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.ks-topbalk { background: var(--wit); color: var(--inkt-3); font-size: 13px; }
.ks-topbalk .ks-wrap { padding-top: 0; padding-bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 8px; }
.ks-topbalk a { color: var(--inkt); text-decoration: none; }
.ks-topbalk a:hover { color: var(--rood); }
.ks-topbalk .ks-wrap > span { padding: 8px 0 0; }
@media (min-width: 761px) { .ks-topbalk .ks-wrap > span { padding: 0; } }
.ks-kop { border-bottom: 1px solid var(--lijn); }
.ks-kop .ks-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; min-height: 72px; }
.ks-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ks-logo-teken { width: 40px; height: 26px; flex: 0 0 auto; }
.ks-logo-tekst { display: flex; flex-direction: column; line-height: 1.1; }
.ks-logo-naam { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.ks-logo-sub { font-size: 11px; color: var(--inkt-3); }
.ks-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.ks-nav a { color: var(--inkt-3); text-decoration: none; padding: 12px 0; }
.ks-nav a[aria-current=page] { color: var(--inkt); font-weight: 500; background: linear-gradient(var(--rood), var(--rood)) left bottom / 100% 2px no-repeat; }
.ks-menu { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ks-menu-knop { display: inline-flex; align-items: center; justify-content: center; width: 22px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--inkt-3); cursor: pointer; }
.ks-menu-knop[aria-expanded=true] svg { transform: rotate(180deg); }
.ks-sub { display: none; position: absolute; z-index: 20; top: 100%; left: -14px; min-width: 240px; padding: 8px 0; background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 6px 18px rgba(22, 22, 22, 0.08); flex-direction: column; }
.ks-menu:hover .ks-sub, .ks-menu:focus-within .ks-sub, .ks-menu-knop[aria-expanded=true] + .ks-sub { display: flex; }
.ks-sub a { padding: 9px 16px; color: var(--inkt-2); box-shadow: none; white-space: nowrap; }
.ks-sub a:hover { background: var(--vlak); color: var(--inkt); }
.ks-sub-kies { display: flex; flex-direction: column; gap: 4px; margin: 6px 16px 6px; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: 12px; color: var(--inkt-3); }
.ks-sub-kies select { width: 100%; }
.ks-telregel { margin: 48px auto 0; padding-bottom: 16px; font-size: 13px; color: var(--inkt-3); }
.ks-telregel a { color: var(--inkt-3); }
/* Voet: 1px inkt erboven; merk in kolom 1-4, kolommen in 6-7, 8-9 en 10-12 van het raster van 12; onderregel na een hairline */
.ks-voet { border-top: 1px solid var(--inkt); background: var(--wit); }
.ks-voet .ks-wrap { padding-top: 56px; padding-bottom: 32px; }
.ks-voet-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.ks-voet-raster > * { min-width: 0; }
.ks-voet-merk { grid-column: 1 / span 3; }
.ks-voet-kolom:nth-child(2) { grid-column: 4 / span 2; }
.ks-voet-kolom:nth-child(3) { grid-column: 6 / span 2; }
.ks-voet-kolom:nth-child(4) { grid-column: 8 / span 2; }
.ks-voet-kolom:nth-child(5) { grid-column: 10 / span 3; }
/* smaller dan 1200px past het merk niet naast vier kolommen zonder dat links afbreken: merk erboven, kolommen 3 breed */
@media (min-width: 761px) and (max-width: 1199px) {
  .ks-voet-merk { grid-column: 1 / -1; }
  .ks-voet-kolom:nth-child(2) { grid-column: 1 / span 3; }
  .ks-voet-kolom:nth-child(3) { grid-column: 4 / span 3; }
  .ks-voet-kolom:nth-child(4) { grid-column: 7 / span 3; }
  .ks-voet-kolom:nth-child(5) { grid-column: 10 / span 3; }
}
.ks-voet .ks-logo { display: inline-flex; padding: 0; color: var(--inkt); }
.ks-voet-merk p { margin: 14px 0 0; max-width: 22em; font-size: 14px; color: var(--inkt-2); }
.ks-voet-kop { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); font-size: 13px; font-weight: 500; color: var(--inkt); }
.ks-voet ul { margin: 0; padding: 0; list-style: none; }
.ks-voet-kolom a { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0; font-size: 14px; color: var(--inkt-2); text-decoration: none; }
.ks-voet-kolom a::before { content: ''; position: absolute; inset: -2px 0; } /* rij van 40px, tikvlak van 44px */
.ks-voet-kolom a:hover { color: var(--inkt); text-decoration: underline; }
.ks-voet-regel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 24px; margin-top: 48px; padding-top: 4px; border-top: 1px solid var(--lijn); font-size: 12px; color: var(--inkt-3); }
.ks-voet-regel > span { padding: 14px 0; line-height: 16px; }
.ks-voet-regel a { display: inline-block; padding: 14px 0; margin: -14px 0; color: var(--inkt-3); }

.ks-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.ks-laden { color: var(--inkt-3); }
.ks-fout, .ks-melding { padding: 12px 16px; background: var(--melding-vlak); color: var(--melding-inkt); font-size: 14px; }
.ks-mono, .mono, [style*="var(--mono)"] { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ks-serif { font-family: var(--serif); }
.ks-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vergelijkingsbalk (KS.vgl): 0–100%, streepje = gemiddelde coalitie of oppositie, punt = Kamerlid */
.ks-vgl { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.ks-vgl-kol { flex: 1 1 auto; min-width: 60px; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.ks-vgl-balk { position: relative; display: block; height: 16px; }
.ks-vgl-cijfers { font-family: var(--sans); font-size: 12px; line-height: 1.3; color: var(--inkt-3); white-space: normal; }
.ks-vgl-cijfers strong { color: var(--inkt); font-weight: 600; }
.ks-vgl-lijn { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--lijn); }
.ks-vgl-tussen { position: absolute; top: 7px; height: 2px; opacity: 0.45; }
.ks-vgl-gem { position: absolute; top: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--inkt); }
.ks-vgl-punt { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; outline: 2px solid var(--wit); }
.ks-vgl-label { flex: 0 0 auto; min-width: 34px; text-align: right; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.ks-vgl::after { content: attr(data-zin); position: absolute; z-index: 5; right: 0; top: 100%; width: max-content; max-width: min(340px, 86vw); padding: 8px 10px; background: var(--inkt); color: var(--wit); font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; display: none; }
.ks-vgl:hover::after, .ks-vgl:focus-visible::after, .ks-vgl.open::after { display: block; }

/* Telefoon: 16px marge, kolommen onder elkaar, geen horizontale scroll. */
/* Links in de topbalk: tikzone van 44px via padding (de voet regelt zijn eigen tikvlakken) */
.ks-topbalk a { display: inline-block; padding: 12px 0; }
/* Tekstpagina's (over, disclaimer, melden): label, paginakop, lead en secties met lopende tekst van 40em */
.ks-paginalabel { margin: 0; font-size: 13px; font-weight: 500; color: var(--rood); }
.ks-tekst { padding-top: 56px; padding-bottom: 88px; }
.ks-tekst header { display: flex; flex-direction: column; gap: 14px; max-width: 40em; }
.ks-tekst .ks-lead { margin: 0; font-size: 17px; color: var(--inkt-2); }
.ks-tekst section { margin-top: 64px; max-width: 40em; }
.ks-tekst h2 { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--inkt); font-family: var(--serif); font-size: 26px; font-weight: 500; }
.ks-tekst h3 { margin: 28px 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.ks-tekst p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; max-width: 40em; }
/* Formulier: zichtbaar label, velden 44px hoog, 1px lijn-2, recht */
.ks-form { display: flex; flex-direction: column; gap: 20px; max-width: 40em; margin-top: 40px; }
.ks-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--inkt); }
.ks-form label small { font-weight: 400; color: var(--inkt-3); }
.ks-form select, .ks-form input, .ks-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--lijn-2); border-radius: 0; font: inherit; font-size: 15px; }
.ks-form textarea { padding: 10px; resize: vertical; }
.ks-knop-primair { align-self: flex-start; min-height: 44px; padding: 0 20px; border: 0; background: var(--rood); color: var(--wit); font: inherit; font-weight: 500; cursor: pointer; }
.ks-knop-primair[disabled] { opacity: 0.6; cursor: default; }
/* Citeer · Deel: één regel onder een cijferblok, rechts, 12px inkt-3; knoppen als tekst met een tikvlak van 44px */
.ks-deel { margin: 4px 0 0; text-align: right; font-size: 12px; color: var(--inkt-3); }
.ks-deel button { position: relative; min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--inkt-3); cursor: pointer; }
.ks-deel button::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.ks-deel button:hover { color: var(--inkt); text-decoration: underline; }
/* Tikdoelen: elke knop, keuzelijst, uitklapregel en losse link minstens 44px hoog (ontwerpregel). Kleine iconen
   (het i-knopje, het pijltje in het menu) houden hun maat en krijgen een onzichtbare tikzone van 44px. */
button, summary, select, input[type=search], input[type=text], input[type=email], input[type=date], input[type=number] { min-height: 44px; }
.ks-i { min-height: 0; }
.ks-menu-knop { position: relative; min-height: 44px; }
.ks-menu-knop::after { content: ''; position: absolute; top: 0; bottom: 0; left: -11px; right: -11px; }
.ks-logo { min-height: 44px; }
a.srij, a.lrij, a.an-rij, a.dn-rij, a.deb-rij, button.deb-rij, button.rij, button.versch, a.nipt { min-height: 44px; }
a.tag, a.week-link, a#d-link, a#deb-alle, a#terug, a#w-moties-link, .m-toc a.t { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 760px) {
  .ks-voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ks-voet-merk { grid-column: 1 / -1; }
  .ks-voet-raster .ks-voet-kolom { grid-column: auto; }
  .ks-wrap { padding-left: 16px; padding-right: 16px; }
  .ks-grid12 { grid-template-columns: minmax(0, 1fr); }
  .ks-grid12 > * { grid-column: 1 / -1 !important; }
  .ks-nav { gap: 0 18px; }
  /* submenu over de volle breedte onder de kop, zodat het bij een item rechts niet buiten beeld valt */
  .ks-menu { position: static; }
  .ks-kop .ks-wrap { position: relative; }
  .ks-sub { left: 16px; right: 16px; min-width: 0; }
  .ks-kop .ks-wrap { padding-top: 12px; }
  .ks-stapel { grid-template-columns: minmax(0, 1fr) !important; }
  .ks-stapel > * { grid-column: 1 / -1 !important; }
  .ks-verberg-mobiel { display: none !important; }
}

/* Periode achter een grafiektitel, overal gelijk */
.t-per { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--inkt-3); letter-spacing: 0; }

/* Regel voor organisaties onder een dossierpagina */
.ks-org { margin: 32px 0 0; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--inkt-3); }
.ks-org a { color: var(--inkt); }

/* Tabs (Trends): zelfde vorm als de subnavigatie op de partijpagina */
.trend-nav { padding-top: 28px; }
.ks-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.ks-tabs a { padding: 12px 0; text-decoration: none; color: var(--inkt-3); }
.ks-tabs a:hover { color: var(--inkt); }
.ks-tabs a[aria-current=page] { color: var(--inkt); font-weight: 500; background: linear-gradient(var(--rood), var(--rood)) left bottom / 100% 2px no-repeat; }

/* Info-knopje: superscript 'i' achter een kop; klik toont uitleg (zie INFO in ks.js) */
.ks-i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; padding: 0;
  vertical-align: super; border: 1px solid var(--lijn-2); border-radius: 50%; background: var(--wit); color: var(--inkt-3);
  font-family: var(--serif); font-size: 10px; font-style: italic; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; }
.ks-i::before { content: ''; position: absolute; inset: -15px; } /* tikzone van 45px */
.ks-i:hover, .ks-i[aria-expanded=true] { border-color: var(--rood); background: var(--rood); color: var(--wit); }
.ks-i:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }
.ks-info-pop { position: absolute; z-index: 1000; padding: 14px 36px 12px 16px; background: var(--wit); border: 1px solid var(--lijn-2); border-top: 3px solid var(--rood);
  box-shadow: 0 6px 24px rgba(22, 22, 22, .14); font-family: var(--sans); font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--inkt-2); text-align: left; }
.ks-info-pop p { margin: 0 0 8px; } .ks-info-pop p:last-of-type { margin-bottom: 0; }
.ks-info-pop .ks-info-t { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--inkt); }
.ks-info-pop b { font-weight: 600; color: var(--inkt); }
.ks-info-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--inkt-3); cursor: pointer; }
.ks-info-x:hover { color: var(--inkt); }

/* Venstertje bij de muis op een gestapelde grafiek (KS.gestapeld) */
.ks-tip { position: absolute; z-index: 900; pointer-events: none; min-width: 180px; max-width: 300px; padding: 8px 10px; background: var(--wit); border: 1px solid var(--lijn-2); font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--inkt-2); }
.ks-tip b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--inkt); }
.ks-tip span { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 1px 0; }
.ks-tip span.aan { font-weight: 600; color: var(--inkt); }
.ks-tip span.tot { grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--lijn); font-weight: 600; color: var(--inkt); }
.ks-tip i { width: 10px; height: 10px; }
.ks-tip em { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 480px) { .ks-voet-raster { grid-template-columns: minmax(0, 1fr); } }