/* Roosterplanning: /software/producten/roosterplanning/ (main.rp-c, ontwerp 3 "Banden", tekst SITE-TEKST-V10.md §5)
   en /software/producten/roosterplanning/beveiliging/ (main.rp.rp-vp). Bron van het productdeel: 04-website-richtingen-v10/C/c.css (ronde 5).
   Typeschaal zonder tussenmaten: 88/84 namen · 40/48 · 24/34 · 16/24 · mono 13/18 kapitalen (alleen productmenu). */

/* =================== Productpagina (main.rp-c) =================== */

/* ---------- Link (16/24) ---------- */
.c-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; line-height: 24px; font-weight: 400; color: var(--papier);
  text-decoration: underline 1px var(--steen); text-underline-offset: 6px;
  transition: text-decoration-color 150ms var(--ease);
}
@media (hover: hover) {
  .c-link:hover { text-decoration-color: var(--koper); }
}

/* ---------- Werkingswisselaar ---------- */
.werking { background: var(--toon); padding-block: 64px; }
.werking h2 { color: var(--papier); }
.w-paneel { margin-top: 56px; }
.w-titel { color: var(--papier); }
.w-zin { margin-top: 8px; max-width: 34em; font-size: 16px; line-height: 24px; color: var(--steen-licht); }
.w-fig { margin-top: 24px; }
.w-fig img { display: block; width: 100%; height: auto; background: var(--toon); }
.w-fig figcaption { margin-top: 12px; }
.w-tabs { display: none; }
.werking .w-meer { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--lijn); }
.werking .w-meer__zin { margin-top: 8px; max-width: 26em; font-size: 16px; line-height: 24px; color: var(--steen-licht); } /* eigen klasse: .w-zin is in tabstand visueel verborgen */
.werking .w-meer .regels__lijst { margin-top: 32px; }
@media (max-width: 899px) {
  /* Regelmelding: vanaf "Berekening" tot en met de bron; regelcodes, status en uitleg vallen buiten het kader. */
  .w-fig--onder img { aspect-ratio: 640 / 372; object-fit: cover; object-position: center bottom; }
  /* Publiceren: kop en controletabel (Bindend t/m, Wijzigingen, Betrokken). Bron 1544 op 680 css-px (sizes, 2,27x).
     Venster links op bron-x 424 (187 css), "bericht" eindigt op bron-x 1163 (512 css): kader vanaf 182 css, 325 nodig, 335 op 375.
     Hoogte bron y 0-392 (173 css), zonder opschalen. */
  .w-fig--pub img { width: 100%; max-width: 340px; height: 173px; object-fit: none; object-position: left -182px top 0; }
}
.w-paneel:focus-visible { outline-offset: -6px; }

@media (min-width: 900px) {
  .werking { padding-block: 96px; }
  .werking__rast { display: grid; grid-template-columns: minmax(0, 368px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; }
  .werking__links, .w-paneel { grid-column: 1 / -1; }

  /* Tabs (alleen met JS en vanaf 900): tablijst links, alle panelen op één plek, wissel met een crossfade van 150 ms. */
  .is-tabs .werking__links { grid-area: 1 / 1; position: relative; z-index: 1; }
  .is-tabs .w-tabs { display: flex; flex-direction: column; margin-top: 40px; }
  .is-tabs .w-tabs[hidden] { display: none; }
  /* Alleen de opname vervaagt; podium en bijschrift wisselen direct. Overgangen pas na de init (.is-klaar). */
  .is-tabs .w-paneel {
    grid-area: 1 / 1 / 3 / 3; margin-top: 0;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
    visibility: hidden;
  }
  .is-tabs .w-paneel.is-aan { visibility: visible; }
  .is-tabs .w-paneel:not(.is-aan) figcaption { visibility: hidden; }
  .is-tabs .w-fig img { opacity: 0; }
  .is-tabs .is-aan .w-fig img { opacity: 1; }
  .is-klaar .is-aan .w-fig img { transition: opacity 150ms var(--ease); }
  /* Titel en zin staan dan in de tab; in het paneel blijven ze alleen voor de schermlezer. */
  .is-tabs .w-titel, .is-tabs .w-zin {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Tablijst links; rechts het podium met direct daaronder (12 px) het onderschrift, bij elke tab op dezelfde plek. */
  .is-tabs .w-fig { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }

  /* Podium (met en zonder JS): vast vlak in de verhouding van het planbordvenster, in de achtergrondtint van de opname
     (#FAFAFA planbord en regelmelding, #FFFFFF publiceren). Elke opname linksboven; --w/--x/--y in procenten van de podiumbreedte,
     clip-path (procenten van de opname) laat alleen het venster zien.
     Planbord 2880 x 1800: x 528-2306, y 244-1276. Regelmelding 2400 x 1621: x 530-2352, y 632-1432 (zonder regelcodes en uitleg).
     Publiceren 1544 x 884: x 424-1492, y 86-390 (Controle valt erbuiten). */
  .w-fig picture { display: block; overflow: hidden; aspect-ratio: 1778 / 1032; background: var(--pod, #fafafa); }
  .w-fig img { width: var(--w); max-width: none; height: auto; margin: var(--y) 0 0 var(--x); clip-path: inset(var(--clip)); }
  .w-fig--pb { --w: 161.980%; --x: -29.696%; --y: -13.723%; --clip: 0; }
  .w-fig--onder { --w: 131.723%; --x: -29.089%; --y: -34.687%; --clip: 38.988% 2% 11.659% 22.083%; }
  .w-fig--pub { --w: 86.839%; --x: -23.847%; --y: -4.837%; --clip: 9.729% 3.368% 55.882% 27.461%; --pod: var(--toon); }
  .werking:not(.is-tabs) .w-fig--pub picture { aspect-ratio: 1778 / 304; }

  .w-tab {
    display: block; width: 100%; margin: 0; padding: 14px 12px 14px 22px; text-align: left;
    background: none; border: 0; border-left: 2px solid transparent; border-radius: 0;
    color: var(--steen); font: inherit; cursor: pointer;
    transition: color 150ms var(--ease);
  }
  .w-tab[aria-selected="true"] { border-left-color: var(--papier); color: var(--papier); }
  .w-tab:focus-visible { outline-offset: -6px; }
  .w-tab__titel { display: block; font-size: 24px; line-height: 34px; letter-spacing: -0.01em; }
  .w-tab__zin { display: none; margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--steen-licht); }
  .w-tab[aria-selected="true"] .w-tab__zin { display: block; }
}
@media (min-width: 900px) and (hover: hover) { .w-tab:hover { color: var(--papier); } }

/* ---------- Regels, twee tonen, 2 kolommen ---------- */
.regels { padding-block: var(--ruim); }
.regels__kop { max-width: 30em; }
.regels__tekst { max-width: 30em; margin-top: 16px; }
.regels__lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; margin-top: 56px; }
.regels__lijst li { max-width: 26em; }
@media (min-width: 900px) { .regels__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }

/* ---------- Per rol: banden van 160, link rechts ---------- */
.planning-rolkop { padding-block: var(--sectie) var(--dicht); }
.rp-c .rollen li + li .rol { border-top: 1px solid var(--lijn); }
.rp-c .rollen { border-block: 1px solid var(--lijn); }
.rol { display: block; color: inherit; text-decoration: none; }
.rol:focus-visible { outline-offset: -6px; }
.rol__rij { min-height: 160px; padding-block: 32px; row-gap: 8px; align-items: center; align-content: center; }
.rol__link { justify-self: start; }
@media (min-width: 900px) {
  .rol__rij .rol__tekst { grid-column: 1 / 9; }
  .rol__rij .rol__link { grid-column: 10 / 13; justify-self: end; }
}
@media (hover: hover) { .rol:hover .rol__link { text-decoration-color: var(--koper); } }

/* ---------- Een functie die u mist, vertrouwensband ---------- */
.vertrouwen { background: var(--toon); padding-block: var(--ruim); }
.vertrouwen__tekst .t24 { margin-top: 16px; max-width: 30em; }
.vertrouwen__tekst .c-link { margin-top: 24px; }
@media (min-width: 900px) { .vertrouwen .vertrouwen__tekst, .functie .vertrouwen__tekst { grid-column: 1 / 9; } }
.functie { padding-block: var(--ruim); }

/* ---------- Vragen ---------- */
.vragen { padding-block: var(--ruim); row-gap: 32px; }
.vragen__kop { color: var(--papier); }
@media (min-width: 900px) {
  .vragen .vragen__kop { grid-column: 1 / 5; }
  .vragen .vragen__lijst { grid-column: 5 / 13; }
}
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary {
  position: relative; display: block; padding: 20px 48px 20px 0; list-style: none; cursor: pointer; color: var(--papier);
  text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color 150ms var(--ease);
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::before, .vragen summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1px; background: var(--papier);
}
.vragen summary::after { transform: rotate(90deg); }
.vragen details[open] summary::after { opacity: 0; }
.vragen details p { max-width: 40em; padding-bottom: 24px; font-size: 16px; line-height: 24px; color: var(--steen-licht); }
@media (hover: hover) { .vragen summary:hover { text-decoration-color: var(--koper); } }

/* ---------- Afsluiter: DEMO ---------- */
.afsluiter { padding-block: calc(var(--ruim) * 1.5); }
.afsluiter__tekst .t24 { margin-top: 32px; max-width: 30em; }
.afsluiter__tekst h2 .t40 { display: block; margin-top: 16px; }
.afsluiter__actie { margin-top: 40px; }
.afsluiter__mail { margin-top: 32px; font-size: 16px; line-height: 24px; }
@media (min-width: 900px) { .afsluiter .afsluiter__tekst { grid-column: 1 / 9; } }

@media (prefers-reduced-motion: reduce) {
  .rp-c *, .rp-c *::before, .rp-c *::after { transition: none !important; }
}

/* =================== Beveiliging en privacy (main.rp.rp-vp) =================== */
.rp [id] { scroll-margin-top: 32px; }

/* Tabellen: geen lijnen per rij; ruimte scheidt */
.rp .tabel :is(th, td) { border: 0 !important; }
.rp .tabel thead th { padding-bottom: 8px; }
.rp .tabel tbody > tr > * { padding-block: 14px; }
.rp .tabel td { font-size: 18px; line-height: 1.5; }
.rp .tabel .stand { font-size: 18px; }
.rp .tabel tbody > tr:nth-child(n) > * { padding-top: 14px; vertical-align: baseline; }

/* Kop links (4 kol.), tekst rechts (8 kol.) */
.rp-vp__stand { margin-top: 16px; color: var(--papier); }
.rp-vp__inhoud { padding-block: var(--sectie); background: var(--toon); }
.rp-vp__verantwoording { display: grid; padding-block: var(--dicht); row-gap: 12px; }
.rp-vp__verantwoording > * { margin-top: 0; }
.rp-vp__verantwoording > .regel { max-width: 40em; }
.rp-vp__sectie { padding-top: 0; }
.rp-vp__sectie + .rp-vp__sectie { margin-top: var(--sectie); }
.rp-vp__kol { display: grid; row-gap: 20px; }
.rp-vp__kol > .h2 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.rp-vp__tekst { min-width: 0; max-width: 820px; }
.rp-vp__tekst > p, .rp-vp__lijst li { font-size: 18px; line-height: 1.55; color: var(--steen-licht); }
.rp-vp__tekst > * + * { margin-top: 14px; }
.rp-vp__tekst > .tabel { margin-top: 28px; }
.rp-vp__tekst > .tabel + * { margin-top: 20px; }
.rp-vp__h3 { padding-top: 24px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--papier); }
.rp-vp__lijst { display: grid; row-gap: 8px; }
.rp-vp__links { margin-top: 32px !important; }
.rp-vp .tabel tbody th { font-size: 18px; }
.rp-vp .tabel td { font-size: 18px; }

@media (min-width: 900px) {
  .rp-vp__kol { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
  .rp-vp__kol > .h2 { grid-column: 1 / 5; }
  .rp-vp__tekst { grid-column: 5 / 13; }
  .rp-vp .tabel tr > * { width: auto; }
  .rp-vp .tabel tr > :first-child { width: 30%; }
}
@media (max-width: 899px) {
  .rp .tabel tbody > tr + tr > th { padding-top: 24px; }
  .rp .tabel tbody > tr > td:empty { display: none; }
  .rp .tabel thead :is(tr, th) { display: block; width: 1px; padding: 0; overflow: hidden; }
}