/* tekstvoorstel 17-10-2026, live 18-10-2026: Diensten en prijzen */
.ph-intro { max-width: 34em; margin: clamp(20px, 2.4vw, 28px) 0 0; color: var(--wit); }
.zz-btw { margin-top: clamp(20px, 2vw, 28px); }
.pd-intro { margin: clamp(16px, 2vw, 24px) 0 0; max-width: 34em; font-size: var(--intro); line-height: 1.6; }
.pd-los { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(16px, 2vw, 28px); }
.pd-los-blok { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-vlak); background: rgba(255, 255, 255, .12); }
.pd-los-blok h4 { margin: 0 0 10px; }
.pd-los-blok p { margin: 0; line-height: 1.6; }
@media (max-width: 760px) { .pd-los { grid-template-columns: minmax(0, 1fr); } }
.ad-noot { grid-column: 1 / -1; margin: 0; color: var(--fg-2); }
/* rekenhulp v2 */
.rh { margin-top: clamp(24px, 3vw, 40px); border-radius: var(--r-groot); background: var(--zwart); color: var(--wit); }
.rh > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.4vw, 48px); cursor: pointer; list-style: none; }
.rh > summary::-webkit-details-marker { display: none; }
.rh > summary .kop { margin: 0; color: var(--wit); }
.rh-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 48px); padding: 0 clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px); }
@media (max-width: 860px) { .rh-in { grid-template-columns: minmax(0, 1fr); } }
.rh-veld { margin: 0 0 24px; padding: 0; border: 0; }
.rh-vraag { display: block; margin: 0 0 10px; font-weight: 700; font-size: 17px; }
.rh-hulp { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.rh-stap { display: inline-flex; align-items: center; gap: 8px; }
.rh-stap button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--wit); color: var(--zwart); font-size: 22px; cursor: pointer; }
.rh-stap button:hover { background: var(--lime); }
.rh-stap input { width: 72px; height: 44px; text-align: center; font: 400 22px var(--f-sub); border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .3); background: var(--zwart-2); color: var(--wit); }
.rh-start label { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.rh-start input { margin-top: 3px; accent-color: var(--lime); }
.rh-uit { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-vlak); background: var(--wit); color: var(--zwart); }
.rh-uit p { margin: 0 0 14px; line-height: 1.6; }
.rh-kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 480px) { .rh-kolommen { grid-template-columns: minmax(0, 1fr); } }
.rh-dienst { padding: 16px; border-radius: var(--r-md); background: var(--grijs-vlak, #F2F2F2); }
.rh-dienst .label { margin: 0 0 8px; color: var(--blauw); }
.rh-dienst dl { margin: 0; }
.rh-dienst dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.rh-dienst dd { margin: 0; white-space: nowrap; }
.rh-totaal { margin: 10px 0 0 !important; font-family: var(--f-sub); font-size: 22px; }
.rh-zin { color: var(--zwart); }
.rh-uit .noot { font-size: 13px; color: var(--grijs-tekst); }
.rh[open] .pd-plus { transform: rotate(45deg); }
.rh-kolommen { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
#werfpartner .pd-intro { color: var(--zwart); }
/* Werfpartner: vier groepen naast elkaar (Waakstand en Flexibel in dienst in een eigen groep) */
#werfpartner .pd-groepen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { #werfpartner .pd-groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { #werfpartner .pd-groepen { grid-template-columns: minmax(0, 1fr); } }
/* rekenhulp: kop duidelijker als iets om in te vullen (icoon, uitleg, knop) */
.rh > summary { justify-content: flex-start; gap: clamp(14px, 2vw, 24px); }
.rh-ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--lime); color: var(--zwart); }
.rh-ico svg { width: 30px; height: 30px; }
.rh-sum-tekst { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.rh-sum-sub { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.rh-open { flex: none; pointer-events: none; }
.rh-open-t { display: none; }
.rh[open] .rh-open-t { display: inline; }
.rh[open] .rh-dicht-t { display: none; }
.rh[open] .rh-pijl { display: inline-block; transform: rotate(180deg); }
.rh > summary:hover .rh-open { background: var(--wit); }
@media (max-width: 700px) {
  .rh > summary { flex-wrap: wrap; }
  .rh-open { width: 100%; justify-content: center; }
}
.rh-open { background: var(--lime); color: var(--zwart); padding: 14px 22px; border-radius: var(--r-pil); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
/* uitleg onder de jaartabel uitklapbaar */
.tabel-uitleg { margin-top: 20px; border-top: 1px solid var(--lijn); padding-top: 14px; }
.tabel-uitleg > summary { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.tabel-uitleg > summary::-webkit-details-marker { display: none; }
.tabel-uitleg[open] .pd-plus { transform: rotate(45deg); }
.tabel-uitleg .tabel-noot { margin-top: 12px; }
.rh-totaal-l { margin: 12px 0 0 !important; font-size: 13px; color: var(--grijs-tekst); }
.rh-totaal-l + .rh-totaal { margin-top: 2px !important; }
/* geen spinner-pijltjes in de getalvelden; de min- en plusknoppen doen dat werk */
.rh-stap input { -moz-appearance: textfield; appearance: textfield; }
.rh-stap input::-webkit-outer-spin-button, .rh-stap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* eerst de vragen groot, daaronder de kostenkaart over de volle breedte */
.rh-in { grid-template-columns: minmax(0, 1fr); }
.rh-invoer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding: clamp(8px, 1vw, 16px) 0 clamp(8px, 1.4vw, 20px); }
@media (max-width: 760px) { .rh-invoer { grid-template-columns: minmax(0, 1fr); } }
.rh-invoer .rh-veld { margin: 0; }
.rh-invoer .rh-vraag { font-family: var(--f-kop); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; text-transform: uppercase; margin-bottom: 18px; }
.rh-stap { gap: 12px; }
.rh-stap button { width: 60px; height: 60px; font-size: 28px; }
.rh-stap input { width: 110px; height: 60px; font-size: 34px; }
.rh-kolommen { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rh-toon-rij { padding-top: 4px; }
.rh-toon { background: var(--lime); color: var(--zwart); }
.rh-uit[hidden], .rh-toon-rij[hidden] { display: none; }
.rh-invoer .rh-vraag { font-family: var(--f-tekst); font-weight: 700; text-transform: none; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; }   /* weer Roboto, wel groter */
.rh-invoer { align-items: stretch; } .rh-invoer .rh-veld { display: flex; flex-direction: column; justify-content: space-between; }   /* knoppen op dezelfde hoogte, ook als een vraag over twee regels loopt */
.rh-prijs { color: var(--blauw); }
/* derde vraag: actieve maanden, over de volle breedte */
.rh-maanden { grid-column: 1 / -1; border: 0; padding: 0; }
.rh-maanden legend { padding: 0; }
.rh-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .rh-keuzes { grid-template-columns: minmax(0, 1fr); } }
.rh-keuzes label { position: relative; cursor: pointer; }
.rh-keuzes input { position: absolute; opacity: 0; }
.rh-keuzes span { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .3); background: var(--zwart-2); }
.rh-keuzes b { font-size: 17px; }
.rh-keuzes small { font-size: 14px; color: rgba(255, 255, 255, .7); }
.rh-keuzes input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--zwart); }
.rh-keuzes input:checked + span small { color: rgba(0, 0, 0, .7); }
.rh-keuzes input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
/* tabel Werfpartner bij een jaar samenwerken (3/6/12 maanden actief) */
.rh-jaar { margin: 0 0 22px; }
.rh-jaar table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rh-jaar th, .rh-jaar td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); vertical-align: top; }
.rh-jaar thead th { font-family: var(--f-sub); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 400; color: var(--blauw); }
.rh-jaar tbody th { font-weight: 700; }
.rh-jaar td b { display: block; font-family: var(--f-sub); font-weight: 400; font-size: 20px; }
.rh-jaar td small { color: var(--grijs-tekst); font-size: 13px; }