/* Extra stijl voor de module performance. Alleen deze module schrijft hier.
   Gebruik eerst de klassen uit base.css; voeg hier alleen toe wat echt mist. */

.pf{display:flex;flex-direction:column;gap:30px;max-width:1240px}
.pf-sec{display:flex;flex-direction:column;gap:12px}
.pf-kop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pf-kop .meta{margin-left:auto}
.pf-uitleg{margin:12px 0 0;line-height:1.55;max-width:760px}
.pf-sec > .pf-uitleg{margin:2px 0 0}
.pf .kpi .big{display:flex;align-items:baseline;gap:4px}
.pf .kpi .pf-eh{font-size:14px;font-weight:500;color:var(--muted)}

/* ─── Waar deze cijfers op rusten ─────────────────────────────
   Staat bovenaan en moet gelezen worden, maar het is geen alarm: het gaat
   over ontbrekende velden, niet over een fout. Dus gewoon een kaart in het
   gedempte vlak, geen gekleurde note — die zou het eerste accent van het
   scherm opeisen terwijl de cijfers eronder belangrijker zijn. */
.pf-basis{background:var(--well)}
.pf-basislijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pf-basislijst li{display:flex;align-items:baseline;gap:12px;font-size:12.5px;color:var(--txt-2);line-height:1.5}
.pf-basislijst b{flex:0 0 auto;min-width:42px;text-align:right;font-size:15px;font-weight:600;color:var(--ink)}

/* ─── Doel: omzetdoel, voortgang en benodigd tempo ───────────── */
.pf-doelkop{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.pf-doelkop > div{display:flex;flex-direction:column;gap:7px}
.pf-doelbar{display:flex;align-items:center;gap:14px;margin-top:18px}
.pf-doelbar .bar{flex:1;height:9px}
.pf-doelbar .meta{white-space:nowrap}
.pf-tempo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
/* Bij het team staat het tempo bovenaan de kaart — dan geen streep erboven. */
.pf-tempo:first-child{margin-top:0;padding-top:0;border-top:none}
.pf-tempo-t{display:flex;flex-direction:column;gap:4px}
.pf-tempo-t b{font-size:24px;font-weight:600;color:var(--ink);line-height:1.2}
.pf-tempo-t .meta{font-size:11.5px;line-height:1.45}
.pf-doelset{margin-top:6px}

/* ─── Periodekiezer in de paginakop ──────────────────────────── */
.pf-kiezer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-kiezer .pf-eigen input[type=date]{width:auto;padding:5px 8px;font-size:12.5px}

/* ─── Trend: staafgrafiek, puur HTML/CSS ─────────────────────── */
.pf-kols{display:flex;align-items:flex-end;gap:6px}
.pf-kol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.pf-area{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%}
.pf-area > i{display:block;width:13px;border-radius:3px 3px 0 0}
.pf-area > i.get{background:var(--olive-l)}
.pf-area > i.stop{background:var(--red-line)}
.pf-area > i.bereikt{background:var(--olive-l)}
.pf-area > i.geen{background:var(--amber)}
.pf-area > i.lead{background:var(--blue)}
.pf-area > i.vac{background:var(--purple)}
.pf-area .pf-tick{position:absolute;left:8%;right:8%;height:0;border-top:1px dashed var(--line-2)}
.pf-net{font-size:12.5px;font-weight:600;color:var(--txt-2)} /* richting via .pos/.neg (base.css) */
.pf-mnd{font-size:11px;color:var(--muted);text-transform:capitalize}

.pf-leg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);margin-left:auto}
.pf-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:8px}
.pf-leg i:first-child{margin-left:0}
.pf-leg i.get{background:var(--olive-l)}
.pf-leg i.stop{background:var(--red-line)}
.pf-leg i.bereikt{background:var(--olive-l)}
.pf-leg i.geen{background:var(--amber)}
.pf-leg i.tick{width:14px;height:0;border-top:1px dashed var(--line-2);border-radius:0}

/* Twee kaarten naast elkaar (belletjes recruitment/sales, leads/vacatures);
   zelfde patroon als .pf-klantzij hieronder. */
.pf-2kol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ─── Tabellen ───────────────────────────────────────────────── */
.pf-tbl td.pf-balk{width:110px;min-width:90px}
.pf-tbl td.pf-balk .bar{height:6px}
.pf-tbl tfoot td,.pf-tbl tr.pf-tot td{background:var(--card-2);border-top:1px solid var(--line);font-weight:600;padding:10px 14px}
.pf-tbl .chip{font-size:11px}
/* Onder de totaalregel: rijen die bewust buiten de telling blijven
   (historische import). Gedempt, maar zichtbaar — ze bestaan wel. */
.pf-tbl tbody.pf-buiten td{background:var(--well);color:var(--txt-2);border-top:1px solid var(--line)}
.pf-tbl tbody.pf-buiten b{font-weight:600}

/* ─── Trechter ───────────────────────────────────────────────── */
.pf-funnel{display:flex;flex-direction:column;gap:7px}
.pf-fr{display:flex;align-items:center;gap:12px}
.pf-fl{flex:0 0 158px;font-size:12.5px;color:var(--txt-2)}
/* Baanachtergrond uit het design-system (--well-2), geen eigen hex. */
.pf-fb{flex:1;min-width:0;position:relative;height:22px;background:var(--well-2);border-radius:4px;display:flex;align-items:center}
/* Eén accent: elke fase heeft al zijn eigen regel met naam en percentage, dus
   elf verschillende fasekleuren maakten hier alleen een regenboog van. */
.pf-fb > i{display:block;height:100%;border-radius:4px;background:var(--olive-l);min-width:2px}
/* Aantal aan het eind van de baan in donkere tekst: altijd leesbaar, ook als de
   staaf kort is — witte tekst in de staaf vroeg om een schaduw. */
.pf-fn{position:absolute;right:10px;font-size:12px;font-weight:600;color:var(--ink)}
.pf-fd{flex:0 0 78px;text-align:right;font-size:11.5px}

.pf-ratios{display:flex;gap:34px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pf-ratios > div{display:flex;flex-direction:column;gap:3px}
.pf-ratios b{font-size:22px;font-weight:600;color:var(--ink);line-height:1.2}
.pf-ratios .meta{font-size:11.5px}

/* ─── Redenenlijstjes (uitval, top-klanten) ──────────────────── */
.pf-redenen{display:flex;flex-direction:column;gap:11px}
.pf-reden{display:flex;align-items:center;gap:11px}
.pf-reden .pf-rl{flex:1;min-width:0;font-size:12.5px;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-reden .pf-rb{flex:0 0 88px}
.pf-reden .pf-rb .bar{height:6px}
.pf-reden .pf-rn{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--ink);min-width:24px;text-align:right}

/* ─── Sparklines — dun olijflijntje in KPI-tegel en Doel-blok ────
   Eén per tegel, geen assen of tooltips: richting, geen grafiek. */
.pf-spark{display:flex;align-items:center;gap:8px;margin-top:8px}
.pf-spark svg{display:block;opacity:.85;flex:0 0 auto}

@media (max-width:760px){
  .pf-fl{flex:0 0 108px;font-size:11.5px}
  .pf-fd{flex:0 0 60px}
  .pf-area > i{width:9px}
  .pf-kiezer .seg button{padding:5px 8px;font-size:11.5px}
}
/* Op een telefoon staat pf-doelkop onder elkaar; 40px tussenruimte maakte
   van het Doel-blok dan een halve schermlengte lucht. */
@media (max-width:560px){
  .pf-doelkop{gap:22px}
}
/* Op 375px is een trendkolom nog maar 19px breed, terwijl twee staven van
   9px plus 3px tussenruimte er 21px van maken: de staven liepen dan net
   over de kolomgrens heen en raakten die van de buurmaand. */
@media (max-width:420px){
  .pf-area{gap:2px}
  .pf-area > i{width:7px}
}

/* ═══ Naamlijsten (getekend / gestopt / nazorg) — verhuisd uit Recruitment ═══ */
.pf-namen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.pf-namenkol{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.pf-namenkol .label{margin-bottom:8px}
.pf-naam{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--line);padding:7px 2px;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600;color:var(--txt);text-align:left}
.pf-naam:last-child{border-bottom:none}
.pf-naam:hover{color:var(--olive)}
.pf-naam em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pf-naam.pos em{color:var(--olive)}
.pf-naam.neg em{color:var(--red)}
.pf-naam.nu em{color:var(--amber);font-weight:600}

/* ═══ HET JAAR — burn-up naar het jaardoel ═════════════════════════
   Zelfde staafidioom als de maandtrend hierboven (kolom, streepje voor het
   tempo, cijfer eronder), zodat het als hetzelfde systeem leest. Verschil:
   de staaf is hier CUMULATIEF, dus hij loopt op naar het jaardoel, en de
   maanden die nog moeten komen hebben alleen een streepje.               */
.pf-jrkols{display:flex;align-items:flex-end;gap:6px}
.pf-jrkol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.pf-jrarea{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%}
.pf-jrarea > i{display:block;width:22px;max-width:70%;border-radius:3px 3px 0 0;background:var(--olive-l)}
.pf-jrarea .pf-tick{position:absolute;left:6%;right:6%;height:0;border-top:1px dashed var(--line-2)}
.pf-jrn{font-size:12.5px;color:var(--ink);white-space:nowrap}
/* Maanden die nog moeten komen: het cijfer is dáár het tempo, niet een
   resultaat. Gedempt, zodat je die twee nooit door elkaar haalt. */
.pf-jrn.toek{color:var(--muted);font-weight:500}
.pf-jrklant{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pf-jrklant .meta{flex:1;min-width:220px;line-height:1.5}
.pf-jrklant b{color:var(--ink)}

/* Deze twee stappen staan hier en niet bij de media queries hierboven: die
   komen in dit bestand vóór de regels die ze moeten overschrijven, en dan
   wint bij gelijke specificiteit de laatste — het overschrijven deed dus
   niets. Bij twaalf kolommen op een telefoon is dat meteen zichtbaar. */
@media (max-width:760px){
  .pf-jrkols{gap:3px}
  .pf-jrn{font-size:11px}
  .pf-jrkol .pf-mnd{font-size:10px}
}
/* Een jaardoel van drie cijfers (100+) past bij 11px net niet meer in een
   kolom van 22px; dan schuiven de maanden uit elkaar. */
@media (max-width:420px){
  .pf-jrkols{gap:2px}
  .pf-jrn{font-size:10px}
}

/* ═══ OP WEG NAAR HET JAARDOEL ═════════════════════════════════════
   Vier kaarten die elkaar opvolgen: ratio's → tempo → trechter → omzet.
   Zelfde cijferidioom als .pf-tempo hierboven (label klein, getal groot in
   Inter, uitleg eronder), zodat het als hetzelfde systeem leest.        */
.pf-naargrid{display:grid;gap:16px}
/* 150px is bewust: binnen een halve kaart (±450px) blijven het er twee, en
   vanaf 1500px — waar de kaarten meegroeien — staan de drie ratio's netjes
   naast elkaar in plaats van twee-plus-één. */
.pf-ncs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.pf-nc{display:flex;flex-direction:column;gap:4px}
.pf-nc b{font-size:24px;font-weight:600;color:var(--ink);line-height:1.2}
.pf-nc .meta{font-size:11.5px;line-height:1.45}
/* Een cijfer dat op te weinig waarnemingen rust, staat gedempt: het is een
   richting, geen stuurgetal. De reden staat er in tekst bij. */
.pf-nc.zwak b{color:var(--txt-2)}
.pf-nc .chip{align-self:flex-start;margin:2px 0}

/* Het bruto-deel hoort bij hetzelfde cijfer, maar is een andere vraag —
   vandaar een streep in plaats van een tweede kaart. */
.pf-nbruto{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pf-nbruto > .label{display:block;margin-bottom:12px}
.pf-nbruto > p{margin:0;line-height:1.5}

/* De trechter leest van boven naar beneden: leads bovenaan, plaatsingen
   onderaan — dezelfde richting als de trechter verderop op deze pagina. */
.pf-keten{display:flex;flex-direction:column}
.pf-kr{display:grid;grid-template-columns:minmax(84px,auto) minmax(48px,auto) minmax(120px,1fr);
  align-items:baseline;gap:4px 14px;padding:10px 2px;border-bottom:1px solid var(--line)}
.pf-kr:last-child{border-bottom:none}
.pf-kl{font-size:13px;font-weight:600;color:var(--txt)}
.pf-kr b{font-size:18px;color:var(--ink);text-align:right}
.pf-kr .meta{font-size:11.5px;line-height:1.45}
.pf-kr.zwak b{color:var(--txt-2)}
/* De onderste regel is het doel waar alles op uitkomt: dat mag je zien. */
.pf-kr.doel{background:var(--well);border-radius:var(--r-s);padding-left:10px;padding-right:10px;border-bottom:none}
.pf-kr.doel .pf-kl{color:var(--olive)}

@media (max-width:520px){
  .pf-kr{grid-template-columns:1fr auto;grid-template-areas:"lbl waarde" "sub sub"}
  .pf-kr > .pf-kl{grid-area:lbl}
  .pf-kr > b{grid-area:waarde}
  .pf-kr > .meta{grid-area:sub}
}
@media (min-width:1100px){
  .pf-naargrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ═══ PER KLANT — omzet en plaatsingen per klant ═══════════════════
   Geen grafiekbibliotheek in dit project (en die komt er ook niet), dus
   alles hier is HTML met een breedte in procenten. Voordeel: het werkt
   zonder JavaScript-animatie, schaalt mee met de kolom en is met
   ctrl-F te doorzoeken. Elke staaf heeft zijn waarde als tekst ernaast —
   een balk zonder getal is een plaatje, geen cijfer.                   */

.pf-klant .pf-kseg{margin-left:4px}
/* De bronregel is uitleg, geen alarm: een blauw infovlak zou een tweede
   accent op een scherm zijn dat er al één heeft (olijf). Daarom neutraal. */
.note.info.pf-bron{background:var(--well);border-color:var(--line);color:var(--txt-2);max-width:900px}
.pf-bron b{color:var(--ink)}

/* Onder 1500px staat alles onder elkaar: de rangschikking is de lange lijst
   waar het om draait, concentratie en ontwikkeling erna. Vanaf 1500px komen
   die twee náást de rangschikking te staan in plaats van dat de staven
   worden uitgerekt — zie de breedteladder onderaan dit bestand. */
.pf-klantgrid{display:flex;flex-direction:column;gap:16px}
.pf-klantzij{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* ─── Rangschikking ─────────────────────────────────────────────── */
.pf-rang{display:flex;flex-direction:column}
.pf-rr{display:grid;width:100%;text-align:left;cursor:pointer;
  grid-template-columns:24px minmax(90px,1.2fr) minmax(60px,2fr) auto;
  grid-template-areas:"nr naam bar waarde" ". sub sub sub";
  align-items:center;gap:2px 12px;padding:10px 2px;
  background:none;border:none;border-bottom:1px solid var(--line);font-family:var(--body)}
.pf-rang .pf-rr:last-child{border-bottom:none}
.pf-rr:hover .pf-rnaam{color:var(--olive)}
.pf-rnr{grid-area:nr;font-size:11.5px;color:var(--muted);text-align:right}
.pf-rnaam{grid-area:naam;font-size:13.5px;font-weight:600;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-rbar{grid-area:bar;height:9px;background:var(--well-2);border-radius:99px;overflow:hidden}
.pf-rbar > i{display:block;height:100%;background:var(--olive-l);border-radius:99px}
.pf-rw{grid-area:waarde;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right}
.pf-rsub{grid-area:sub;font-size:11.5px}
.pf-rsub .pf-let{color:var(--amber)}
.pf-meer{align-self:flex-start;margin-top:14px}
.pf-nul{margin:14px 0 0}

/* Klanten zonder berekenbare fee. Zichtbaar en met reden, maar buiten de
   optelling — als € 0 in de rangschikking zouden ze onterecht onderaan
   belanden en dan lijkt een goede klant een slechte. */
.pf-onbekend{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pf-onbekend .label{margin-bottom:8px}
.pf-onbekend > p{margin:10px 0 0;line-height:1.5;max-width:760px}
.pf-onb{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--line);padding:7px 2px;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600;color:var(--txt-2);text-align:left}
.pf-onb:last-of-type{border-bottom:none}
.pf-onb:hover{color:var(--olive)}
.pf-onb em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted);text-align:right}

/* ─── Concentratie: één balk, vier groepen, één accent in vier sterktes.
   Vier verschillende kleuren zouden hier betekenis suggereren die er niet
   is: het is één grootheid, opgedeeld naar rangorde. Dus dezelfde olijf,
   steeds lichter. ────────────────────────────────────────────────── */
.pf-concbar{display:flex;height:26px;border-radius:var(--r-s);overflow:hidden;background:var(--well-2)}
.pf-concbar > i{display:block;height:100%;background:var(--olive-l);border-right:1px solid var(--card)}
.pf-concbar > i:last-child{border-right:none}
.pf-concbar > i.s1{background:var(--olive)}
.pf-concbar > i.s3{opacity:.62}
.pf-concbar > i.s4{opacity:.34}
.pf-conclegend{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pf-conclegend li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--txt-2)}
.pf-conclegend li > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-conclegend li > b{font-size:13px;color:var(--ink);min-width:38px;text-align:right}
.pf-conclegend li > em{font-style:normal;min-width:78px;text-align:right}
.pf-conclegend i{flex:0 0 auto;width:10px;height:10px;border-radius:3px;background:var(--olive-l)}
.pf-conclegend i.s1{background:var(--olive)}
.pf-conclegend i.s3{opacity:.62}
.pf-conclegend i.s4{opacity:.34}
.pf-risico{margin-top:18px}

/* ─── Groei en terugloop ────────────────────────────────────────── */
.pf-ontw2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.pf-ontwkol .label{margin-bottom:6px}
.pf-ontw{display:grid;grid-template-columns:1fr auto;grid-template-areas:"naam delta" "sub delta";
  align-items:center;gap:0 12px;width:100%;background:none;border:none;
  border-bottom:1px solid var(--line);padding:8px 2px;cursor:pointer;
  font-family:var(--body);text-align:left}
.pf-ontw:last-child{border-bottom:none}
.pf-ontw > span{grid-area:naam;font-size:13px;font-weight:600;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-ontw > em{grid-area:sub;font-style:normal;font-size:11.5px;color:var(--muted)}
.pf-ontw > .num{grid-area:delta;font-size:13.5px;white-space:nowrap}
.pf-ontw:hover > span{color:var(--olive)}

/* De klanttabel heeft elf kolommen; op smalle schermen scrolt .tblwrap al
   horizontaal. Zonder deze rem wordt de klantnaam samengeperst tot twee
   letters per regel terwijl er rechts nog ruimte is. */
.pf-klant table.tbl th:first-child,.pf-klant table.tbl td:first-child{min-width:150px}

@media (max-width:620px){
  /* Naam en bedrag boven elkaar met de balk eronder: op 375px is er geen
     kolom over voor een balk náást een bedrag van acht tekens. */
  .pf-rr{grid-template-columns:24px 1fr auto;
         grid-template-areas:"nr naam waarde" ". bar bar" ". sub sub";gap:5px 10px}
  .pf-conclegend li > em{display:none}
}

/* ─── Breed scherm ───────────────────────────────────────────────
   De rem van 1240px verdwijnt vanaf 1500px. Anders dan bij het dashboard is
   uitrekken hier wél winst: elk blok is een grid dat kolommen bijzet
   (.grid c3/c4, .pf-namen, .pf-tempo — allemaal auto-fit) of een grafiek of
   tabel, en die worden met meer breedte fijnmaziger in plaats van ijler.
   .pf-uitleg houdt bewust zijn eigen max-width van 760px: dat is lopende
   tekst en die blijft op één leesbare regellengte staan. */
@media (min-width:1500px){
  .pf{max-width:none}
  /* Twee dingen worden van breedte juist SLECHTER in plaats van fijnmaziger,
     dus die krijgen hun eigen rem terug binnen het bredere vlak:
     — de trendstaven bleven 13px haren in een veld van anderhalve meter;
     — een trechterbalk van 1400px zegt niks meer dan een van 700px, terwijl
       het oog dan wél heen en weer moet tussen fasenaam en aantal. */
  .pf-area > i{width:18px}
  .pf-funnel{max-width:1000px}
  .pf-fl{flex:0 0 190px}
  /* Een rangschikkingsbalk van anderhalve meter zegt niets meer dan een van
     zevenhonderd pixels. De winst van extra breedte zit dus niet in langere
     staven maar in méér naast elkaar: de rangschikking links, concentratie
     en ontwikkeling rechts. Zo blijft er ook rechts geen strook leeg. */
  .pf-klantgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    align-items:start;gap:16px}
  .pf-klantzij{grid-template-columns:1fr}
}
/* ≥1900px (teamscherm) heeft Performance geen eigen stap nodig: elk blok is
   al een auto-fit-grid of een tabel, die zetten er vanzelf kolommen bij.
   Bewust vastgelegd zodat dit niet leest als een vergeten stap. */

/* ─── Vier ankerhoofdstukken + samenvatting (3 sep 2026) ──────────
   De samenvattingszin is het eerste wat je leest: één zin, altijd met een
   bedrag en een handeling (prioriteitsladder). De ankerbalk vervangt
   twaalf losse secties door vier hoofdstukken. */
.pf-samenvatting{padding:14px 18px;border:1px solid var(--line);border-radius:10px;
  background:var(--well);font-size:14px;line-height:1.6;color:var(--ink);max-width:900px}
.pf-samenvatting.warn{background:var(--amber-bg);border-color:var(--amber-line);color:#8a5a1a}
.pf-anker{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:5;
  padding:8px 0;background:var(--bg)}
.pf-anker button{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:6px 16px;font-size:12.5px;font-weight:600;color:var(--txt-2);cursor:pointer}
.pf-anker button:hover{color:var(--ink);border-color:var(--olive)}
.pf-hkop{display:flex;align-items:baseline;gap:12px;margin-top:14px;padding-top:8px;
  border-top:2px solid var(--line);scroll-margin-top:52px}
.pf-hkop .label{font-size:15px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}

/* "Op weg naar" ingeklapt: de summary ís de kernrij. */
.pf-inklap > summary{cursor:pointer;list-style:none}
.pf-inklap > summary::-webkit-details-marker{display:none}
.pf-inklap > summary .pf-kop .label::before{content:'▸ ';color:var(--muted)}
.pf-inklap[open] > summary .pf-kop .label::before{content:'▾ '}
.pf-inklap[open] > summary{margin-bottom:12px}

/* ─── Hoofdstuk Trechter ───────────────────────────────────────── */
.pf-aansluit{margin:0 0 16px;line-height:1.55;max-width:860px}
.pf-fr[data-trstap]{cursor:pointer}
.pf-fr[data-trstap]:hover .pf-fl{color:var(--ink)}
.pf-drill{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 10px;padding:10px 12px;
  background:var(--well);border-radius:8px;font-size:12px;color:var(--txt-2)}
.pf-drill i{font-style:normal;color:var(--muted)}
.pf-advopv{margin-top:18px;padding:12px 16px;border-left:3px solid var(--olive-l);
  background:var(--well);border-radius:0 8px 8px 0;max-width:860px}
.pf-advopv p{margin:6px 0 0;line-height:1.6;font-size:13px}
.pf-2zin{margin-top:16px;font-size:13.5px;line-height:1.6;max-width:860px}
.pf-rendement{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.pf-rendement > .label{display:block;margin-bottom:10px}
.pf-nietmeta td{color:var(--txt-2)}
.pf-tbl td .chip.amber{margin-left:6px}