/* Gedeelde opmaak van de figuren in een editie.
   Gebruikt door onderzoek/makelaars-[stad].html (de leespagina) en
   onderzoek/rapport-makelaars-[stad].html (de rapportvorm), zodat beide
   dezelfde beelden tonen en niet uit elkaar kunnen lopen.
   De paginaopmaak staat in de pagina zelf; hier staan alleen de grafieken,
   de tabellen en de kaarten. Alle kleuren en maten komen uit tokens.css. */

  .lijst { width: 100%; border-collapse: collapse; }
  .lijst th { font-size: var(--maat-12); font-weight: var(--dik-vast); text-align: left;
              letter-spacing: var(--spatie-label); text-transform: uppercase;
              color: var(--tekst-gedempt); padding: 0 var(--r-3) var(--r-3);
              border-bottom: 1px solid var(--lijn-interactief); vertical-align: bottom; }
  .lijst td { padding: var(--r-3); border-bottom: 1px solid var(--lijn); vertical-align: middle;
              line-height: 1.2; }
  /* kop en inhoud staan in dezelfde kolomkant: de cijferkolommen rechts, de rest links */
  .lijst th.rechts, .lijst td.rechts { text-align: right; }
  .lijst th:last-child, .lijst td:last-child { padding-right: 0; }
  .lijst td:first-child, .lijst th:first-child { padding-left: 0; }
  .lijst tr:last-child td { border-bottom: 0; }
  .rechts { text-align: right; }
  .plek { font-size: var(--maat-12); font-weight: var(--dik-vast); color: var(--tekst-gedempt);
          font-variant-numeric: tabular-nums; width: 30px; }
  .naam { font-size: var(--maat-18); font-weight: var(--dik-lezen); }
  .score{ font-size: var(--maat-24); font-weight: var(--dik-vast); line-height: 1;
          font-variant-numeric: tabular-nums; }
  .cellen { font-size: var(--maat-12); color: var(--tekst-gedempt); white-space: nowrap;
            font-variant-numeric: tabular-nums; }
  .baanvak { width: 34%; min-width: 120px; }
  .baan { position: relative; height: 12px; border-radius: var(--rond-1); background: var(--balk-baan); }
  .vul  { position: absolute; inset: 0 auto 0 0; border-radius: var(--rond-1); background: var(--balk); }
  .ijk  { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--lijn-interactief); }
  .schaal { display: flex; justify-content: space-between; font-size: var(--maat-12);
            color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; margin-top: 5px; }
  @media (max-width: 780px) { .baanvak, th.baanvak { display: none; } }

  /* ( 03 ) Meetkaart: hetzelfde ritme als de ranglijst. Kleur zegt welke assistent
     het is, vorm zegt hoe hoog het kantoor stond. Zo zie je de twee assistenten uit
     elkaar én blijft de kaart kloppen in zwart-wit. */
  .kaartraster { width: 100%; border-collapse: collapse; }
  .kaartraster thead th { font-size: var(--maat-12); font-weight: var(--dik-vast);
                    letter-spacing: var(--spatie-label); text-transform: uppercase;
                    color: var(--tekst-gedempt); padding: 0 6px var(--r-3); text-align: center;
                    vertical-align: bottom; border-bottom: 1px solid var(--lijn-interactief); }
  .kaartraster th.vraag { text-align: left; width: 38%; text-transform: none;
                          letter-spacing: 0; font-weight: var(--dik-lezen);
                          font-size: var(--maat-14); line-height: var(--regel-14);
                          color: var(--tekst); padding-left: 0; }
  .kaartraster tbody th.vraag { font-weight: 400; padding-block: var(--r-3);
                                border-bottom: 1px solid var(--lijn); }
  .kaartraster td { padding: var(--r-3) 6px; text-align: center;
                    border-bottom: 1px solid var(--lijn); }
  .kaartraster tbody tr:last-child th, .kaartraster tbody tr:last-child td { border-bottom: 0; }
  .kaartraster tbody tr:hover th, .kaartraster tbody tr:hover td {
                    background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .kaartraster .vnr { display: block; font-size: var(--maat-12); color: var(--tekst-gedempt);
                      letter-spacing: var(--spatie-label); }
  .duo { display: inline-flex; gap: 6px; }
  .cel { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor;
         display: inline-block; }
  .cel--gpt    { color: var(--reeks-1); }
  .cel--goog   { color: var(--reeks-2); }
  .cel--vol    { background: currentColor; }
  .cel--laag   { background: linear-gradient(180deg, transparent 0 50%, currentColor 50% 100%); }
  .cel--neutraal { color: var(--tekst); }
  .cel--leeg   { background: none; border-style: dotted; }
  .cel--leeg.cel--neutraal { color: var(--tekst-gedempt); }
  /* vierde toestand: de assistent gaf op deze vraag helemaal geen antwoord. Geen cirkel
     maar een streepje, zodat "er was niets" niet leest als "niemand werd genoemd". */
  .cel--geen   { border: none; background: none; border-radius: 0; position: relative; }
  .cel--geen::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
                 height: 3px; transform: translateY(-50%); border-radius: 2px;
                 background: color-mix(in srgb, currentColor 70%, transparent); }
  .cel--geen.cel--neutraal { color: var(--tekst-gedempt); }
  .legenda { display: flex; gap: var(--r-4) var(--r-6); flex-wrap: wrap; margin-top: var(--r-6);
             font-size: var(--maat-14); color: var(--tekst); }
  .legenda span { display: inline-flex; align-items: center; gap: 9px; }
  .legenda .cel { width: 17px; height: 17px; }

  .tweekaarten { display: grid; gap: var(--r-4); }
  @media (min-width: 860px) { .tweekaarten { grid-template-columns: 1fr 1fr; } }
  .bronlijst { list-style: none; margin: var(--r-4) 0 0; padding: 0; display: grid; gap: var(--r-3); }
  .bronlijst li { display: grid; grid-template-columns: 1fr auto 38%; gap: var(--r-3);
                  align-items: center; font-size: var(--maat-16); }
  .bronlijst b { font-weight: var(--dik-lezen); }
  .bronlijst span { font-variant-numeric: tabular-nums; color: var(--tekst-gedempt);
                    font-size: var(--maat-14); }
  .bronbaan { height: 8px; border-radius: var(--rond-1); background: var(--balk); min-width: 0; }
  @media (max-width: 560px) {
    /* op een telefoon past de baan niet naast de naam; hij gaat eronder */
    .bronlijst li { grid-template-columns: 1fr auto; }
    .bronbaan { grid-column: 1 / -1; }
  }

  /* ( 03 ): alle kantoren uit de marktlijst met naam, in drie rijen van blokken (B-28). */
  .rijen { display: grid; gap: var(--r-8); }
  .rij__kop { display: flex; align-items: baseline; gap: var(--r-3); margin: 0 0 var(--r-3);
              font-size: var(--maat-14); color: var(--tekst-gedempt); }
  .rij__kop b { font-size: var(--maat-24); font-weight: var(--dik-vast); color: var(--tekst);
                font-variant-numeric: tabular-nums; }
  .blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .blok { display: grid; gap: 4px; align-content: center; min-width: 0;
          border: 1px solid var(--lijn); border-radius: var(--rond-2); padding: 10px 12px;
          font-size: var(--maat-14); line-height: 1.3; }
  .blok strong { font-weight: var(--dik-lezen); overflow-wrap: break-word; }
  .blok span { font-size: var(--maat-12); color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; }
  /* Twee groepen, drie markeringen, zoals ze waren: in de ranglijst een doorzichtig
     groen vlak, wel genoemd een gele rand, en in geen enkel antwoord een gestreepte
     rand. De sectie zelf staat op de lichte band, dus het geheel blijft rustig. */
  .blok--rang { border-color: color-mix(in srgb, var(--positief) 55%, transparent);
                background: color-mix(in srgb, var(--positief) 10%, transparent); }
  .blok--weinig { border-color: color-mix(in srgb, var(--let-op) 50%, transparent); }
  .blok--nergens { border-style: dashed; }
  /* oud: stippenraster, niet meer in gebruik */
  /* ( 03 ): afwezigen alleen als aantal (B-20). Eén stip per kantoor in de gemeente,
     in dezelfde drie vormen als de meetkaart. */
  .raster { display: flex; flex-wrap: wrap; gap: 10px; }
  .raster .cel, .raster__legenda .cel { width: 22px; height: 22px; }
  /* één vermelding: telt niet als genoemd (B-21); gestippeld zoals leeg, met een kern */
  .cel--een { color: var(--tekst-gedempt); border-style: dotted;
              background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px); }
  .raster__legenda { display: grid; gap: var(--r-3); margin-top: var(--r-6); }
  .raster__legenda div { display: flex; align-items: center; gap: var(--r-3); font-size: var(--maat-14); }
  .raster__legenda b { font-size: var(--maat-24); font-weight: var(--dik-vast); min-width: 2ch;
                       font-variant-numeric: tabular-nums; }
  .afwezigenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .afwezigenlijst li { display: flex; align-items: center; gap: var(--r-4);
                       padding: var(--r-4) 0; border-bottom: 1px solid var(--lijn);
                       font-size: var(--maat-18); }
  .afwezigenlijst li:last-child { border-bottom: 0; }
  .afwezigenlijst i { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
                      border: 2px dotted var(--tekst-gedempt); }
  .afwezigenlijst li.wel i { border-style: solid; border-color: var(--positief);
                             background: var(--positief); }
  .afwezigenlijst li.wel span { margin-left: auto; font-size: var(--maat-14);
                                color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; }
  .voet { border-top: 1px solid var(--lijn); padding-block: var(--r-8) 0; margin-top: var(--band-half); }

  /* --- ( 04 ) bellenkaart: oppervlak is het aantal, kleur is het soort bron.
         Twee kaarten naast elkaar, want het verschil tussen de twee assistenten
         is hier de bevinding. --- */
  .bubkaart { margin-top: var(--r-4); }
  .bubkaart svg { display: block; width: 100%; height: auto; }
  .bubkaart text { font-family: inherit; fill: #fff; }
  .bublegenda { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-6);
                margin-top: var(--r-6); font-size: var(--maat-12);
                color: var(--tekst-gedempt); }
  .bublegenda span { display: inline-flex; align-items: center; gap: 8px; }
  .bublegenda i { width: 12px; height: 12px; border-radius: 50%; flex: none; }

  .verantwoording h3 { font-size: var(--maat-24); font-weight: var(--dik-vast);
                       line-height: var(--regel-24); margin: var(--band-half) 0 var(--r-4); }
  .woordenlijst { display: grid; gap: var(--r-4); margin-top: var(--r-4); }
  @media (min-width: 820px) { .woordenlijst { grid-template-columns: 1fr 1fr; } }
  .woord { border-top: 1px solid var(--lijn); padding-top: var(--r-3); }
  .woord b { display: block; font-size: var(--maat-12); font-weight: var(--dik-vast);
             letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); }
  .woord p { margin: var(--r-2) 0 0; font-size: var(--maat-14); line-height: var(--regel-14);
             color: var(--tekst-gedempt); }
  .trap { display: grid; gap: var(--r-3); margin-top: var(--r-4); }
  .trap div { display: grid; grid-template-columns: 34px 1fr; gap: var(--r-4);
              align-items: baseline; font-size: var(--maat-16); line-height: var(--regel-16); }
  .trap i { font-style: normal; font-size: var(--maat-12); font-weight: var(--dik-vast);
            color: var(--accent); letter-spacing: var(--spatie-label); }

  /* --- ( 05 ) twee assistenten: per vraag wie er bovenaan staat, naast elkaar.
         Drie toestanden, want "oneens" en "Google gaf geen antwoord" zijn niet
         hetzelfde en dat verschil is precies de bevinding. --- */
  .strijd { width: 100%; border-collapse: collapse; }
  .strijd th { text-align: left; font-size: var(--maat-12); font-weight: var(--dik-vast);
               letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-gedempt);
               padding: 0 var(--r-3) var(--r-3) 0; border-bottom: 1px solid var(--lijn); }
  .strijd td { padding: var(--r-4) var(--r-3) var(--r-4) 0; border-bottom: 1px solid var(--lijn);
               font-size: var(--maat-16); vertical-align: baseline; color: var(--tekst); }
  .strijd tr:last-child td { border-bottom: 0; }
  .strijd .vnr { font-size: var(--maat-12); color: var(--tekst-gedempt); white-space: nowrap; }
  .strijd .leeg { color: var(--tekst-gedempt); }
  .merk { display: inline-flex; align-items: center; gap: 7px; font-size: var(--maat-12);
          white-space: nowrap; }
  .merk i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
  .merk--oneens i  { background: var(--reeks-2); }
  .merk--eens i    { background: var(--reeks-4); }
  .merk--leeg i    { background: none; border: 1px solid var(--lijn-interactief); }

  /* --- ( 06 ) wat open ligt: de marge tussen nummer 1 en nummer 2 per vraag.
         Een korte baan is een vraag die niemand bezit. --- */
  .marge { display: grid; gap: var(--r-5); }
  .marge__rij { display: grid; grid-template-columns: 1fr; gap: var(--r-2); }
  @media (min-width: 760px) {
    .marge__rij { grid-template-columns: 200px 1fr 60px; align-items: center; gap: var(--r-4); }
  }
  .marge__vraag { font-size: var(--maat-14); color: var(--tekst); }
  .marge__baan { position: relative; height: 12px; border-radius: var(--rond-1);
                 background: var(--balk-baan); }
  .marge__vul { position: absolute; inset: 0 auto 0 0; border-radius: var(--rond-1);
                background: var(--balk); }
  .marge__vul--wijd { background: color-mix(in srgb, var(--balk) 42%, transparent); }
  .marge__getal { font-size: var(--maat-16); font-weight: var(--dik-vast);
                  font-variant-numeric: tabular-nums; text-align: right; }
  .marge__voet { font-size: var(--maat-12); color: var(--tekst-gedempt); }

  /* --- ( 06 ) drie kanskaarten, elk over de volle breedte. Links het fenomeen en het
         geval, rechts het beeld. De opbouw volgt steeds dezelfde vier zetten: label,
         kop, twee zinnen, drie punten, knop. --- */
  .kansen { display: grid; gap: var(--r-6); margin-top: var(--r-8); }
  .kans { border: 1px solid var(--lijn); border-radius: var(--rond-3);
          background: var(--grond-kaart); padding: var(--r-8); display: grid;
          gap: var(--r-8); min-width: 0; }
  @media (min-width: 900px) { .kans { grid-template-columns: 1fr 1fr; gap: var(--r-12);
          align-items: center; padding: var(--r-10); } }
  .kans__zij { min-width: 0; }
  .kans__label { margin: 0 0 var(--r-3); font-size: var(--maat-12); font-weight: var(--dik-vast);
                 letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); }
  .kans__kop { margin: 0 0 var(--r-4); font-size: var(--maat-40); line-height: var(--regel-sub);
               letter-spacing: var(--spatie-sub); font-weight: var(--dik-vast); }
  .kans__fenomeen { margin: 0 0 var(--r-6); font-size: var(--maat-18); line-height: var(--regel-18);
                    color: var(--tekst-gedempt); max-width: 46ch; }
  .kans__punten { margin: 0 0 var(--r-6); padding: 0; list-style: none; display: grid; gap: var(--r-3); }
  .kans__punten li { font-size: var(--maat-14); line-height: var(--regel-14); padding-left: 18px;
                     position: relative; }
  .kans__punten li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px;
                     height: 7px; border-radius: 50%; background: var(--balk); }
  .kans__beeld { min-width: 0; display: grid; gap: var(--r-4); align-content: center; }
  .kans__groot { margin: 0; display: flex; align-items: baseline; gap: 10px; }
  .kans__groot b { font-size: clamp(64px, 9vw, 110px); line-height: .85; font-weight: var(--dik-vast);
                   letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .kans__groot i { font-style: normal; font-size: clamp(28px, 4vw, 46px); color: var(--tekst-gedempt);
                   font-weight: var(--dik-vast); }
  .kans__bij { margin: 0; font-size: var(--maat-16); max-width: 34ch; }
  /* de aanpak: geen zin maar trefwoorden, zodat de spreker het verhaal vertelt */
  .kans__aanpak { margin: var(--r-6) 0 0; border-top: 1px solid var(--lijn);
                  padding-top: var(--r-4); display: grid; gap: var(--r-3); }
  .kans__aanpak > i { font-style: normal; font-size: var(--maat-12); font-weight: var(--dik-vast);
                  letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--accent); }
  .kans__aanpak > span { display: flex; flex-wrap: wrap; gap: 8px; }
  .kans__aanpak b { font-weight: var(--dik-lezen); font-size: var(--maat-14);
                  line-height: var(--regel-14); padding: 5px 11px; border-radius: 999px;
                  border: 1px solid var(--lijn-interactief); background: var(--grond-verhoogd); }

  /* de vraag boven een beeld: het anker van de kaart */
  /* de vraag hoort bij het beeld eronder, niet bij de zin erboven: extra lucht erboven */
  .kans__vraag { margin: var(--r-6) 0 2px; font-size: var(--maat-14); line-height: 1.35;
                 color: var(--tekst); }

  /* de kansformule: twee variabelen die samen de kans maken */
  .formule { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
             margin: 0 0 var(--r-6); padding: var(--r-4) var(--r-5);
             border: 1px dashed var(--lijn-interactief); border-radius: var(--rond-2);
             font-size: var(--maat-14); }
  .formule span { font-weight: var(--dik-lezen); }
  .formule b { color: var(--tekst-gedempt); font-weight: var(--dik-vast); }
  .formule em { font-style: normal; font-weight: var(--dik-vast); color: var(--accent);
                letter-spacing: var(--spatie-label); text-transform: uppercase;
                font-size: var(--maat-12); }

  /* beeld 1: de plekken in een antwoord als stoelen. Een volle stoel betekent dat
     dezelfde naam er in alle runs zat; een gestippelde stoel wisselt per run. */
  .stoelen { display: grid; grid-template-rows: auto 1fr auto; grid-auto-flow: column;
             grid-auto-columns: minmax(0, 1fr); gap: 7px var(--r-3); max-width: 460px; }
  /* de stoelen delen hun rijen, zodat de naam en de regel eronder op één lijn staan */
  .stoel { display: contents; }
  .stoel__zit { height: 46px; border-radius: var(--rond-2); display: grid;
                place-items: center; font-size: var(--maat-18); font-weight: var(--dik-vast); }
  .stoel--vast .stoel__zit { background: var(--balk); }
  .stoel--vrij .stoel__zit { border: 2px dashed var(--accent); color: var(--accent);
                background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .stoel b { font-size: var(--maat-14); line-height: var(--regel-14); font-weight: var(--dik-vast);
             overflow-wrap: break-word; }
  .stoel em { font-style: normal; font-size: var(--maat-12); line-height: var(--regel-12);
              color: var(--tekst-gedempt); }
  .stoel--vrij b { color: var(--accent); }
  /* op een telefoon passen vier stoelen niet naast elkaar: dan twee rijen van twee */
  @media (max-width: 560px) {
    .stoelen { grid-auto-flow: row; grid-template-rows: none;
               grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-4) var(--r-3); }
    .stoel { display: grid; gap: 6px; align-content: start; min-width: 0; }
  }
  /* beeld 2 en 3: de marktlijst als rooster van stippen. Dezelfde tekening, een
     andere kleur op de stip die het verhaal draagt. */
  .stiprooster { display: grid; grid-template-columns: repeat(11, 1fr); gap: 9px;
                 max-width: 430px; }
  .stiprooster i { width: 100%; aspect-ratio: 1; border-radius: 50%;
                   background: var(--balk-baan); }
  .stiprooster i.aan { background: var(--balk); }
  .stiprooster i.rang { background: color-mix(in srgb, var(--tekst) 45%, transparent); }
  .stiprooster i.uit { background: var(--accent-vlak);
                   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
  .stiplegenda { margin: var(--r-2) 0 0; display: flex; flex-wrap: wrap;
                 gap: var(--r-3) var(--r-6); font-size: var(--maat-14);
                 color: var(--tekst-gedempt); align-items: center; }
  .stiplegenda span { display: inline-flex; align-items: center; gap: 8px; }
  .stiplegenda i { width: 14px; height: 14px; border-radius: 50%; flex: none;
                   background: var(--balk-baan); }
  .stiplegenda i.rang { background: color-mix(in srgb, var(--tekst) 45%, transparent); }
  .stiplegenda i.uit { background: var(--accent-vlak);
                   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
  .stiplegenda i.aan { background: var(--balk); }
  .citaatkaart { border: 1px solid var(--lijn); border-left: 3px solid var(--accent);
                 border-radius: var(--rond-2); padding: var(--r-4) var(--r-5);
                 background: var(--grond-verhougd, var(--grond-verhoogd)); }
  .citaatkaart p { margin: 0; }
  .citaatkaart__bron { font-size: var(--maat-12); letter-spacing: var(--spatie-label);
                       text-transform: uppercase; color: var(--tekst-gedempt);
                       font-weight: var(--dik-vast); margin-bottom: 6px !important; }
  .citaatkaart__tekst { font-size: var(--maat-18); line-height: var(--regel-18); }
  .kansvoet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-4) var(--r-6);
              margin-top: var(--r-8); }
  .kansvoet p { margin: 0; font-size: var(--maat-12); color: var(--tekst-gedempt); max-width: 46ch; }

  /* brede tabellen schuiven mee op een telefoon in plaats van de pagina te verbreden */
  .rol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rol > table { min-width: 100%; }
  /* rasterkolommen mogen krimpen, anders duwt een brede tabel de pagina open */
  .eg-grafiekblok > *, .eg-inleidblok > *, .tweekaarten > *, .eg-kaart { min-width: 0; }

  /* --- De drie hoofdstukken die voor elke stad gelijk zijn, uit kern.js.
         Links het verhaal, rechts de cijfers of de twee vakken. Dezelfde
         opbouw als de kanskaarten, zodat het hele document één ritme houdt. --- */
  .kern, .zet { border: 1px solid var(--lijn); border-radius: var(--rond-3);
                background: var(--grond-kaart); padding: var(--r-8); display: grid;
                gap: var(--r-8); min-width: 0; }
  @media (min-width: 900px) {
    .kern, .zet { grid-template-columns: 1fr 1fr; gap: var(--r-12); align-items: center;
                  padding: var(--r-10); }
  }
  .kern__zij, .zet__zij { min-width: 0; }
  .kern__nr, .zet__nr { margin: 0 0 var(--r-3); font-size: var(--maat-12);
                font-weight: var(--dik-vast); letter-spacing: var(--spatie-label);
                text-transform: uppercase; color: var(--accent); }
  .kern__kop, .zet__kop { margin: 0 0 var(--r-4); font-size: var(--maat-40);
                line-height: var(--regel-sub); letter-spacing: var(--spatie-sub);
                font-weight: var(--dik-vast); }
  .kern__tekst, .zet__tekst { margin: 0; font-size: var(--maat-18);
                line-height: var(--regel-18); color: var(--tekst-gedempt); max-width: 46ch; }

  /* de tekening naast een punt: één mechanisme per beeld, geen losse statistiek */
  .kern__beeld { margin: 0; min-width: 0; border: 1px solid var(--lijn);
                border-radius: var(--rond-2); background: var(--grond-verhoogd);
                padding: var(--r-5); }
  .kern__beeld svg { display: block; width: 100%; height: auto; max-width: 420px;
                margin: 0 auto; }

  /* de twee vakken onder een zet, en onder een kanskaart */
  .zet__vakken, .kans__vakken { display: grid; gap: var(--r-4); min-width: 0; }
  @media (min-width: 560px) { .zet__vakken, .kans__vakken { grid-template-columns: 1fr 1fr; } }
  /* onder een kanskaart loopt de strook over allebei de kolommen */
  @media (min-width: 900px) { .kans__vakken { grid-column: 1 / -1;
        border-top: 1px solid var(--lijn); padding-top: var(--r-6); margin-top: var(--r-2); } }
  .vak { border: 1px solid var(--lijn); border-radius: var(--rond-2);
         padding: var(--r-4) var(--r-5); background: var(--grond-verhoogd); }
  .vak p { margin: 0; font-size: var(--maat-14); line-height: var(--regel-14); }
  .vak__label { font-size: var(--maat-12) !important; font-weight: var(--dik-vast);
         letter-spacing: var(--spatie-label); text-transform: uppercase;
         margin-bottom: 6px !important; }
  .vak--begin { border-left: 3px solid var(--accent); }
  .vak--begin .vak__label { color: var(--accent); }
  .vak--fout { border-left: 3px solid var(--lijn-interactief); }
  .vak--fout .vak__label { color: var(--tekst-gedempt); }

  /* de vier lagen, in de volgorde waarin een assistent ze afloopt */
  .lagen { display: grid; gap: var(--r-4); }
  .laag { display: grid; gap: var(--r-4); border: 1px solid var(--lijn);
          border-radius: var(--rond-3); background: var(--grond-kaart);
          padding: var(--r-6); align-items: start; min-width: 0; }
  @media (min-width: 820px) { .laag { grid-template-columns: 64px 1fr 1fr; gap: var(--r-6); } }
  .laag__nr { margin: 0; font-size: var(--maat-40); line-height: .9; font-weight: var(--dik-vast);
          letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
  .laag__lijf { min-width: 0; }
  .laag__naam { margin: 0 0 4px; font-size: var(--maat-24); line-height: var(--regel-24);
          font-weight: var(--dik-vast); }
  .laag__vraag { margin: 0 0 var(--r-3); font-size: var(--maat-16); line-height: var(--regel-16); }
  .laag__tekst { margin: 0; font-size: var(--maat-14); line-height: var(--regel-14);
          color: var(--tekst-gedempt); }
  .laag__rand { min-width: 0; border-left: 1px solid var(--lijn); padding-left: var(--r-5); }
  @media (max-width: 819px) { .laag__rand { border-left: none; border-top: 1px solid var(--lijn);
          padding-left: 0; padding-top: var(--r-4); } }
  .laag__label { margin: 0 0 4px; font-size: var(--maat-12); font-weight: var(--dik-vast);
          letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst-gedempt); }
  .laag__mis { margin: 0 0 var(--r-4); font-size: var(--maat-14); line-height: var(--regel-14); }
  .laag__wie { margin: 0; font-size: var(--maat-14); line-height: var(--regel-14); }

  /* --- Paginaopmaak die de leespagina en het rapport allebei gebruiken: de strook,
         de videostrip, de drie fasen, de uitklapper "wat u hier zelf aan kunt doen",
         en de naad waar het rapport uit zichzelf stapt. --- */
<style>
  .strook { background: var(--accent-vlak); color: var(--tekst-op-vlak); text-align: center;
            font-size: var(--maat-12); font-weight: var(--dik-vast);
            letter-spacing: var(--spatie-label); text-transform: uppercase;
            padding: 10px var(--r-4); }
  .kop { display: grid; gap: var(--r-6); }
  .meta { display: flex; gap: var(--r-2); flex-wrap: wrap; }

  /* --- de video woont op een eigen pagina; hier staat alleen de deur ernaartoe.
         Een volle speler bovenaan liet lezers langs het onderzoek scrollen. --- */
  .videostrip { display: flex; align-items: center; gap: var(--r-4); margin-top: var(--r-8);
                border: 1px solid var(--lijn); border-radius: var(--rond-2);
                padding: var(--r-4) var(--r-6); background: var(--grond-verhoogd);
                text-decoration: none; color: var(--tekst); max-width: 64ch; }
  .videostrip:hover { border-color: var(--lijn-interactief); }
  .videostrip__knop { width: 44px; height: 44px; border-radius: 50%; flex: none;
                      display: grid; place-items: center; background: var(--accent-vlak);
                      color: var(--tekst-op-vlak); }
  .videostrip__knop svg { margin-left: 3px; }
  .videostrip__tekst { min-width: 0; }
  .videostrip b { display: block; font-size: var(--maat-16); font-weight: var(--dik-vast); }
  .videostrip span { font-size: var(--maat-12); color: var(--tekst-gedempt); }

  /* --- de drie fasen van het rapport: meten, duiden, wat open ligt --- */
  .fase { border-top: 2px solid var(--tekst); padding-top: var(--r-4);
          margin-bottom: var(--band-half); display: grid; gap: var(--r-2); }
  .fase__naam { font-size: var(--maat-12); font-weight: var(--dik-vast);
                letter-spacing: var(--spatie-label); text-transform: uppercase;
                color: var(--accent); }
  .fase__regel { font-size: var(--maat-18); line-height: var(--regel-18);
                 color: var(--tekst-gedempt); max-width: 58ch; }

  /* --- wat een lezer zelf kan doen: hulp vóór de vraag --- */
  .zelf { margin-top: var(--r-6); border-left: 2px solid var(--accent);
          padding-left: var(--r-4); }
  .zelf > summary { font-weight: var(--dik-vast); color: var(--accent); cursor: pointer; }
  .zelf p { margin-top: var(--r-3); max-width: 58ch; }

  /* --- de naad: hier stapt het rapport uit zichzelf --- */
  .naad { max-width: 60ch; }
  .naad p + p { margin-top: var(--r-4); }
  .naad__ondertekening { margin-top: var(--r-6); font-size: var(--maat-16);
                         color: var(--tekst-gedempt); }
  .naad__ondertekening b { display: block; color: var(--tekst);
                           font-weight: var(--dik-vast); }

  /* --- PRESENTATIESTAND. Zelfde pagina, zelfde opmaak, minder tekst.
         Aanzetten met ?presentatie achter het adres. Alles wat hieronder verdwijnt
         is uitleg die de spreker zelf vertelt; de grafieken, de koppen en de
         vondstzin blijven staan. --- */
  body.presentatie { --balk-hoogte: 0px; }
  body.presentatie .balk,
  body.presentatie .strook,
  body.presentatie .videostrip,
  body.presentatie .laag,
  body.presentatie .eg-uitleg,
  body.presentatie .eg-fijn,
  body.presentatie .eg-grafiekblok__zijde .eg-klein,
  body.presentatie #kansvoet-tekst,
  body.presentatie #analyse,
  body.presentatie #verantwoording,
  body.presentatie .eg-hoofdstukbalk a[href="#analyse"],
  body.presentatie .eg-hoofdstukbalk a[href="#verantwoording"] { display: none !important; }
  /* de linkerkolom loopt leeg, dus de grafiek krijgt de volle breedte */
  body.presentatie .eg-grafiekblok,
  body.presentatie .eg-inleidblok { display: block; }
  body.presentatie .eg-grafiekblok__zijde,
  body.presentatie .eg-inleidblok__kop { margin-bottom: var(--r-6); }
  body.presentatie .eg-inleidblok__zij { max-width: 62ch; }
  body.presentatie .kansvoet { margin-top: var(--r-6); }
  /* springen naar een hoofdstuk mag niet onder de hoofdstukbalk landen */
  body.presentatie main > section { scroll-margin-top: 64px; }
  /* in de presentatiestand mogen de hulpmiddelen groter: er leidt verder niets af */
  body.presentatie .legenda { font-size: var(--maat-16); gap: var(--r-5) var(--r-8); }
  body.presentatie .legenda .cel { width: 20px; height: 20px; }
  body.presentatie .bublegenda { font-size: var(--maat-16); gap: var(--r-4) var(--r-8); }
  body.presentatie .bublegenda i { width: 16px; height: 16px; }
  body.presentatie .kans__vraag { font-size: var(--maat-14); }
  body.presentatie .stiplegenda { font-size: var(--maat-16); gap: var(--r-4) var(--r-8); }
  body.presentatie .stiplegenda i { width: 18px; height: 18px; }
  /* het beeld mag in de presentatie groter: er leidt verder niets af */
  body.presentatie .stiprooster { max-width: 580px; gap: 11px; }
  body.presentatie .stoelen { max-width: 580px; }
  body.presentatie .stoel__zit { height: 58px; }
  body.presentatie .stoel b { font-size: var(--maat-16); }
  body.presentatie .stoel em { font-size: var(--maat-14); }

  /* hulpknop voor de opname: tekent de hoek waar de videobubbel komt */
  .hoekknop, .hoek { display: none; }
  body.presentatie .hoekknop { display: block; position: fixed; right: 12px; bottom: 12px;
    z-index: 40; font-family: inherit; font-size: var(--maat-12); cursor: pointer;
    padding: 7px 11px; border-radius: var(--rond-2); border: 1px solid var(--lijn-interactief);
    background: var(--grond-verhoogd); color: var(--tekst-gedempt); opacity: .35; }
  body.presentatie .hoekknop:hover { opacity: 1; }
  body.presentatie.toonhoek .hoek { display: grid; position: fixed; right: 3vh; bottom: 3vh;
    width: 320px; height: 320px; border-radius: 50%; border: 2px dashed var(--lijn-interactief);
    place-items: center; color: var(--tekst-gedempt); font-size: var(--maat-12);
    text-align: center; z-index: 39; pointer-events: none; }
  @media (max-width: 700px) { body.presentatie .hoekknop, body.presentatie .hoek { display: none; } }


  /* --- ( 03 ) Wie wint welk klantmoment. De kaart toont het moment en het aantal
         vragen; de winnaar staat er niet bij. Bij zweven komt de kaart iets omhoog
         en kleurt de rand, zodat zichtbaar is dat er iets achter zit; bij klik
         klapt het letterlijke antwoord open. Vorm uit de componentbibliotheek. --- */
  .momenten { display: grid; gap: var(--r-4); margin-top: var(--r-8); }
  @media (min-width: 760px) { .momenten { grid-template-columns: 1fr 1fr; align-items: start; } }
  .moment { border: 1px solid var(--lijn); border-radius: var(--rond-3);
            background: var(--grond-kaart); overflow: hidden; min-width: 0;
            transition: border-color var(--tempo-aanraking, .18s) ease,
                        transform var(--tempo-aanraking, .18s) ease,
                        box-shadow var(--tempo-aanraking, .18s) ease; }
  .moment__knop { display: grid; gap: var(--r-3); width: 100%; text-align: left;
            background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
            padding: var(--r-6); }
  .moment__kop { font-size: var(--maat-24); line-height: var(--regel-24);
            font-weight: var(--dik-vast); }
  .moment__zin { font-size: var(--maat-14); line-height: var(--regel-14);
            color: var(--tekst-gedempt); }
  .moment__hint { display: inline-flex; align-items: center; gap: 9px;
            font-size: var(--maat-12); font-weight: var(--dik-vast);
            letter-spacing: var(--spatie-label); text-transform: uppercase;
            color: var(--accent); }
  /* het plusje dat bij open een minnetje wordt */
  .moment__hint i { position: relative; width: 15px; height: 15px; flex: none;
            border: 1px solid currentColor; border-radius: 50%; }
  .moment__hint i::before, .moment__hint i::after { content: ""; position: absolute;
            left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px;
            background: currentColor; }
  .moment__hint i::after { transform: rotate(90deg);
            transition: transform var(--tempo-aanraking, .18s) ease; }
  .moment:hover { border-color: var(--accent); transform: translateY(-2px);
            box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); }
  .moment:hover .moment__hint { text-decoration: underline; text-underline-offset: 3px; }
  .moment__knop:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  .moment--open { border-color: var(--accent); }
  .moment--open .moment__hint i::after { transform: rotate(0deg); }
  .moment__uit { display: grid; gap: var(--r-4); padding: 0 var(--r-6) var(--r-6); }
  /* display: grid wint het van het hidden-attribuut, dus dat zetten we terug */
  .moment__uit[hidden] { display: none; }
  .citaatkaart__vraag { font-size: var(--maat-12) !important; letter-spacing: var(--spatie-label);
            text-transform: uppercase; color: var(--tekst-gedempt);
            font-weight: var(--dik-vast); margin-bottom: 8px !important; }
  .moment .citaatkaart__bron { margin-top: 10px !important; margin-bottom: 0 !important; }
  .moment .citaatkaart__tekst b { font-weight: var(--dik-vast); color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    .moment, .moment__hint i::after { transition: none; }
    .moment:hover { transform: none; }
  }

  /* de acht vragen onder de ranglijst, in dezelfde band en dezelfde kaartvorm */
  .vragenkaart { margin-top: var(--r-6); }
  .vragenkaart__kop { margin: 0 0 var(--r-3); font-size: var(--maat-12);
            font-weight: var(--dik-vast); letter-spacing: var(--spatie-label);
            text-transform: uppercase; color: var(--accent); }
  .vragenkaart__zin { margin: 0 0 var(--r-5); max-width: 70ch; }

  /* ( 02 ): een rij lucht tussen de kantoren uit de ranglijst en de rest */
  .blokken__naad { grid-column: 1 / -1; height: var(--r-4); }