/* Over ons, voorwaarden en privacy. Breidt site.css uit, wijzigt niets gedeelds. */

/* Ankers uit de footer (#route, #contact, #annuleren, #cadeaubon): html heeft al scroll-padding ter hoogte van de
   vaste header, dit telt erbij op voor wat lucht boven de kop. */
.anker,.prose h2[id]{scroll-margin-top:16px}

/* ---------- Over ons ---------- */
.over-hero h1{max-width:16ch}
.over-hero .next{margin-top:28px}

.waarom{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.55fr);gap:clamp(40px, 7vw, 120px);padding-top:clamp(72px, 9vw, 140px)}
.waarom-kop{align-self:start}
.waarom-kop .h2{margin-top:14px;max-width:13ch}

.strook-rail{display:grid;grid-template-columns:1.35fr 1fr 1.2fr .95fr 1.25fr;gap:14px;align-items:start;max-width:1680px;margin-inline:auto;padding-inline:var(--pad)}
.strook-foto{margin:0}
.strook-foto .crop{aspect-ratio:4/5}
.strook-foto:nth-child(even){margin-top:clamp(28px, 4vw, 64px)}
.strook-foto:nth-child(even) .crop{aspect-ratio:3/4}
.strook-foto:hover .crop{--hz:1.06}
.strook-noot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:22px;font-size:.9375rem;color:var(--ink-2)}
.strook-noot .label{background:var(--ph)}

.contact-blok{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);gap:21px;align-items:stretch}
.contact-nap{padding:clamp(4px, 1vw, 12px) clamp(0px, 3vw, 40px) 0 0}
.contact-nap .h2{margin-top:14px;max-width:14ch}
.contact-nap address{margin-top:clamp(28px, 3vw, 40px);font-style:normal;font-size:clamp(1.1875rem, 1.8vw, 1.4rem);line-height:1.55}
.contact-tel{display:inline-block;margin-top:18px;font-size:clamp(2rem, 4.4vw, 3.25rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;text-decoration:none;font-variant-numeric:tabular-nums;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.contact-tel:hover{background-size:100% 2px}
.contact-nap .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.contact-feiten{margin:0;background:var(--panel);padding:clamp(26px, 3vw, 44px)}
.contact-feiten > div{padding:20px 0;border-top:1px solid var(--line)}
.contact-feiten > div:first-child{border-top:0;padding-top:0}
.contact-feiten dt{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.contact-feiten dd{margin:6px 0 0;font-size:1.0625rem;line-height:1.55;max-width:44ch}

.over-cursussen{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);gap:clamp(32px, 5vw, 80px);align-items:start;padding-top:clamp(20px, 3vw, 40px);border-top:1px solid var(--line)}
.oc-tekst{padding-top:clamp(20px, 3vw, 40px)}
.oc-tekst .h2{margin-top:14px}
.oc-tekst > p:not(.eyebrow){margin-top:18px;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:42ch}
.oc-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:30px}
.oc-cards{grid-template-columns:repeat(2, minmax(0, 1fr));padding-top:clamp(20px, 3vw, 40px)}

/* ---------- Voorwaarden en privacy: document met zijbalk ---------- */
.doc-concept{margin-top:34px;max-width:76ch}
.doc{display:grid;grid-template-columns:minmax(200px, 270px) minmax(0, 1fr);gap:clamp(40px, 7vw, 120px);padding-bottom:clamp(90px, 10vw, 150px)}
.doc-tekst{max-width:780px;min-width:0}
.doc-tekst > * + *{margin-top:1.1em}
.doc-tekst > .prose:first-child > h2:first-child{margin-top:0}
.toc-kop{margin-bottom:14px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

.toc.anchors{background:none;border:0;z-index:auto}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;border-top:1px solid var(--ink)}
.toc li{counter-increment:t}
.toc.anchors a{display:grid;grid-template-columns:30px minmax(0, 1fr);align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);white-space:normal;font-size:.9375rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);background:none;transition:color .3s var(--ease)}
.toc.anchors a::before{content:counter(t, decimal-leading-zero);font-size:.75rem;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--olive-line);transition:color .3s var(--ease)}
.toc.anchors a:hover{color:var(--ink)}
.toc.anchors a.is-actief{color:var(--ink);font-weight:800}
.toc.anchors a.is-actief::before{color:var(--red)}

.doc-sec{padding:clamp(36px, 4vw, 52px) 0 0;border-top:1px solid var(--line)}
.doc-sec:first-child{border-top:0;padding-top:0}
.doc-sec + .doc-sec{margin-top:clamp(36px, 4vw, 52px)}
.doc-sec h2{font-size:clamp(1.65rem, 2.8vw, 2.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.doc-nr{display:block;margin-bottom:10px;font-size:.8125rem;font-weight:800;letter-spacing:.1em;color:var(--olive);font-variant-numeric:tabular-nums}
.doc-sec .prose{margin-top:18px}
/* Een regel die er niet is (geen duo-korting gekozen) neemt zijn punt mee. */
.doc-sec li:has(> [data-regel]:empty){display:none}
.doc-sec .prose b[data-r]{font-weight:800;color:var(--ink)}
.prose .doc-regel{font-size:1.1875rem;line-height:1.6;font-weight:600;color:var(--ink)}
.doc-waarom{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:4px 16px;align-items:baseline;margin-top:24px;padding:16px 20px;background:var(--sage-tint);font-size:1rem;line-height:1.6;max-width:68ch}
.doc-waarom b{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.doc-sec .bron{margin-top:14px;max-width:68ch}
.doc-twee{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:21px;margin-top:24px;max-width:780px}
.doc-twee > div{padding:clamp(20px, 2.4vw, 28px);background:var(--panel)}
.doc-twee h3{margin-bottom:14px;font-size:1.125rem;font-weight:800;letter-spacing:-.01em}
.doc-contact{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:20px}
.doc-contact address{font-style:normal;font-size:1.0625rem;line-height:1.7}
.doc-contact address a{font-weight:700;text-underline-offset:3px}
.doc-contact .btns{display:flex;flex-wrap:wrap;gap:12px}
.doc-bijgewerkt{margin-top:36px !important}

.kortom + .toc{margin-top:clamp(28px, 3vw, 40px)}
.kortom{padding:clamp(22px, 2.4vw, 28px);background:var(--sage-tint)}
.kortom .checklist{gap:14px;font-weight:600}
.privacy-tabel tbody th{width:22%}
.privacy-tabel td{color:var(--ink-2);line-height:1.55}

.proto-data{margin-block:1.6em;padding:clamp(22px, 2.6vw, 32px);background:var(--panel);border:1px dashed var(--field-line)}
.pd-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px}
.pd-kop .toc-kop{margin:0}
.pd-som{font-weight:700}
.pd-lijst{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 136px), 1fr));gap:10px}
.pd-lijst li{display:flex;align-items:baseline;gap:10px;min-width:0;overflow-wrap:anywhere;padding:12px 14px;background:var(--paper);font-size:.9375rem;line-height:1.3;transition:opacity .4s var(--ease)}
.pd-lijst b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pd-lijst li.is-leeg{color:var(--ink-2);background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.pd-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.pd-status{font-weight:700}
.pd-status:empty{display:none}

@media (min-width: 901px){
  .doc-zij > *{position:sticky;top:calc(var(--header-h) + 32px)}
  /* Privacy: alleen de inhoudsopgave plakt mee; samen met "kort gezegd" is hij te hoog voor een laptopscherm. */
  .doc-zij > .kortom{position:static}
}

@media (max-width: 1180px){
  .strook-rail{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .strook-foto:nth-child(n+4){display:none}
}
@media (max-width: 900px){
  .waarom,.contact-blok,.over-cursussen{grid-template-columns:1fr}
  .contact-nap{padding:0}
  .doc{grid-template-columns:1fr;gap:40px}
  .toc ol{columns:2;column-gap:24px}
  .toc li{break-inside:avoid}
}
@media (max-width: 760px){
  .strook-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .strook-rail::-webkit-scrollbar{display:none}
  .strook-foto,.strook-foto:nth-child(n+4){display:block;flex:0 0 76%;scroll-snap-align:start}
  .strook-foto:nth-child(even){margin-top:0}
  .oc-cards{grid-template-columns:1fr;row-gap:56px}
  .doc-twee{grid-template-columns:1fr}
  .doc-waarom{grid-template-columns:1fr}
  .toc ol{column-gap:16px}
  .toc.anchors a{grid-template-columns:24px minmax(0, 1fr);padding:9px 0;font-size:.875rem}
  .doc-contact{flex-direction:column;align-items:flex-start}
  .privacy-tabel tbody th{width:auto}
}

@media print{
  .doc-waarom,.doc-twee > div{break-inside:avoid}
}