/* De Dauw — gedeelde stijl voor index, lessen en fitting */
:root{
  /* ---- het palet, uit de herofoto: grasschaduw, ochtendnevel, de zon erachter ---- */
  --grond:#14170e;        /* de schaduwkant van het gras — donkere grond */
  --mos:#1e2314;          /* verhoogde donkere vlakken */
  --olijf:#3b4024;        /* lijnen en randen op donker */
  --papier:#f4eddf;       /* de nevel, als leesvlak */
  --papier-diep:#e9dfca;
  --inkt:#1d2013;         /* tekst op papier */
  --inkt-zacht:#5a5b45;
  --nevel:#f0e7d4;        /* tekst op donker */
  --nevel-zacht:rgba(240,231,212,0.72);
  --zon:#dba545;          /* de zon: CTA en accent op donker */
  --zon-diep:#8f6214;     /* hetzelfde goud, leesbaar op papier */
  --lijn:rgba(29,32,19,0.14);
  --lijn-donker:rgba(240,231,212,0.14);
  --kaart:#fbf7ee;         /* een losse kaart op papier: net lichter dan de nevel */

  --serif:"Newsreader", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;

  --rand:clamp(20px, 5vw, 72px);
  --breed:1240px;
  --sectie:clamp(80px, 12vw, 168px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--zon-diep);outline-offset:3px;border-radius:2px}
/* op papier is het lichte goud te zwak (1,9:1); op de donkere vlakken blijft het de zon */
.donker :focus-visible,.hero :focus-visible,.balk :focus-visible,footer :focus-visible{outline-color:var(--zon)}

.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--zon);color:var(--grond);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{left:12px}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.oog{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--zon-diep);margin:0 0 20px}
.donker .oog{color:var(--zon)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(36px,5.2vw,68px);line-height:1.04;max-width:16ch}
h2 em,h1 em{font-style:italic;font-weight:300}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--inkt-zacht);max-width:52ch;margin:28px 0 0}
.donker .lead{color:var(--nevel-zacht)}

/* ---- knoppen ---- */
.knop{display:inline-flex;align-items:center;gap:10px;background:var(--zon);color:var(--grond);font:600 16px/1 var(--sans);padding:17px 26px;border-radius:999px;text-decoration:none;transition:transform .2s ease, background .2s ease}
.knop:hover{background:#e8b65a;transform:translateY(-1px)}
.knop .pijl{transition:transform .2s ease}
.knop:hover .pijl{transform:translateX(3px)}
.link{font:500 16px/1 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;color:var(--nevel)}
.link:hover{text-decoration-color:var(--zon)}

/* ---- balk ---- */
.balk{position:fixed;inset:0 0 auto;z-index:50;color:var(--nevel);transition:background .35s ease, box-shadow .35s ease}
.balk.gegrond{background:rgba(20,23,14,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--lijn-donker)}
.balk .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.merk{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.merk b{font:400 23px/1 var(--serif);letter-spacing:-.01em}
.merk span{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nevel-zacht);margin-top:6px}
.balk nav{display:flex;gap:30px;align-items:center}
.balk nav a{font:500 15px/1 var(--sans);text-decoration:none;color:var(--nevel-zacht);transition:color .2s}
.balk nav a:hover{color:var(--nevel)}
.balk .knop{padding:12px 20px;font-size:15px}
@media (max-width:860px){.balk nav a:not(.knop){display:none}}

/* ---- Diensten: het uitklapmenu in de balk (2026-10-16) ----
   Lessen, fitting, clubservice en golf management onder één knop. site.js opent het op klik en
   (met een muis) op hover; zonder JS doen :hover en :focus-within het. Op mobiel is het de enige
   navigatie naast "Boek tijd", dus het blijft daar staan als een paneel over de volle breedte, met
   onderin (li.meer) de links die de balk op mobiel verbergt: Reizen, Over Ronald, Vragen. */
.menu{position:relative}
.menu-knop{display:flex;align-items:center;gap:9px;background:none;border:0;padding:10px 0;margin:-10px 0;cursor:pointer;
  font:500 15px/1 var(--sans);color:var(--nevel-zacht);transition:color .2s}
.menu-knop:hover,.menu.open .menu-knop{color:var(--nevel)}
.menu-knop.hier{color:var(--nevel);text-decoration:underline;text-decoration-color:var(--zon);text-underline-offset:8px;text-decoration-thickness:1px}
.menu-pijl{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;
  transition:rotate .25s ease, translate .25s ease}
.menu.open .menu-pijl{rotate:225deg;translate:0 2px}
.menu-lijst{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 22px);left:-18px;width:340px;
  background:rgba(20,23,14,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--lijn-donker);border-radius:6px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s ease, translate .25s cubic-bezier(.2,.7,.2,1), visibility 0s .25s}
/* een onzichtbare brug, zodat de muis van de knop naar het menu kan zonder dat het dichtgaat */
.menu-lijst::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.menu.open .menu-lijst,
html:not(.js) .menu:hover .menu-lijst,
html:not(.js) .menu:focus-within .menu-lijst{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.balk nav .menu-lijst a{display:block;padding:14px 16px;border-radius:4px;color:var(--nevel);text-decoration:none;transition:background .2s}
.balk nav .menu-lijst a:hover{background:rgba(240,231,212,.07)}
.balk nav .menu-lijst a[aria-current="page"]{text-decoration:none;background:rgba(219,165,69,.1)}
.menu-lijst li + li{border-top:1px solid var(--lijn-donker)}
.menu-lijst b{display:block;font:400 21px/1.15 var(--serif);letter-spacing:-.01em}
.menu-lijst a[aria-current="page"] b{color:var(--zon)}
.menu-lijst span{display:block;margin-top:5px;font:400 14px/1.35 var(--sans);color:var(--nevel-zacht)}
@media (prefers-reduced-motion:reduce){.menu-lijst,.menu-pijl{transition:none}}
/* de rest van de navigatie (Reizen, Over Ronald, Vragen): alleen op mobiel, onderin het paneel */
.menu-lijst .meer{display:none}
@media (max-width:860px){
  .balk nav{gap:22px}
  .menu{position:static}
  .menu-lijst{position:fixed;top:76px;left:12px;right:12px;width:auto}
  .menu-lijst::before{display:none}
  .menu-lijst .meer{display:flex;flex-wrap:wrap;gap:2px 4px;padding-top:6px}
  .balk nav .menu-lijst .meer a{display:inline-block;padding:14px 16px;font:500 16px/1 var(--sans);color:var(--nevel-zacht)}
  .balk nav .menu-lijst .meer a:hover{color:var(--nevel)}
  .balk nav .menu-lijst .meer a[aria-current="page"]{color:var(--zon)}
}
/* smalle telefoon: merk, Diensten en Boek tijd moeten op één regel passen */
@media (max-width:440px){
  .balk .wrap{gap:12px}
  .balk nav{gap:14px}
  .merk b{font-size:19px;white-space:nowrap}
  .merk span{font-size:9px;letter-spacing:.16em}
  .balk .knop{padding:10px 14px;font-size:14px;white-space:nowrap}
}

/* ---- taalknop NL/EN (2026-10-16) ----
   Helemaal rechts in de balk, na Boek tijd. De Engelse pagina's staan in en/ en wijzen terug.
   Op een smalle telefoon past hij niet meer naast merk, Diensten en Boek tijd: dan staat hij
   onderin het Diensten-paneel (a.taal-mobiel in li.meer). */
.balk nav a.taal{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;padding:0 9px;
  border:1px solid var(--lijn-donker);border-radius:4px;font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--nevel-zacht);
  transition:color .2s, border-color .2s}
.balk nav a.taal:hover{color:var(--nevel);border-color:var(--nevel-zacht)}
.balk nav .menu-lijst .meer a.taal-mobiel{display:none}
@media (max-width:440px){
  .balk nav a.taal{display:none}
  .balk nav .menu-lijst .meer a.taal-mobiel{display:inline-block}
}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;background:var(--grond);color:var(--nevel);display:flex;align-items:flex-end;overflow:hidden}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;object-position:60% 50%;animation:ontwaak 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes ontwaak{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}
/* alleen onderin en links een schaduw: de tekst staat op het gras, de lucht blijft schoon */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom, rgba(20,23,14,.42) 0, rgba(20,23,14,0) 150px),
  linear-gradient(to top, rgba(20,23,14,.88) 0%, rgba(20,23,14,.35) 38%, rgba(20,23,14,0) 62%),
  linear-gradient(to right, rgba(20,23,14,.45) 0%, rgba(20,23,14,0) 55%)}
/* padding-top houdt de tekst onder de balk, ook als het scherm laag is */
.hero{padding-top:100px}
.hero-in{position:relative;z-index:1;width:100%;padding-bottom:clamp(36px,8vh,104px)}
/* de kop schaalt mee met breedte én hoogte: op een breed maar laag laptopscherm past de hero nog */
.hero h1{font-size:clamp(44px,min(7.6vw,15vh - 25px),112px);line-height:.98;max-width:11ch;text-wrap:balance}
/* laptop (breed maar laag): elke zin op één regel, dus twee regels kop in plaats van vier */
@media (min-width:861px) and (max-height:900px){
  .hero h1{max-width:none;font-size:clamp(44px,min(6.4vw,12vh),104px)}
  .hero p{margin:22px 0 28px}
}
.hero h1 .tweede{display:block;color:var(--zon);font-style:italic;font-weight:300}
.hero p{font-size:clamp(18px,1.5vw,20px);color:var(--nevel-zacht);max-width:40ch;margin:28px 0 36px}
.hero .acties{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.hero .oog{color:var(--nevel-zacht)}
/* prototype-logo's: transparante PNG's in nevel + zon */
.merk.beeld img{display:block;width:auto;height:46px}
.merk.beeld.naast{flex-direction:row;align-items:center;gap:14px}
.merk.beeld i{font-style:normal;display:flex;flex-direction:column}
.merk.beeld[data-logo="3"] img{height:40px}
.merk.beeld[data-logo="3"] span{margin-top:7px;align-self:center}
.merk.beeld[data-logo="4"] img{height:58px}
.hero .reveal{animation:op 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero .reveal:nth-child(2){animation-delay:.25s}
.hero .reveal:nth-child(3){animation-delay:.45s}
.hero .reveal:nth-child(4){animation-delay:.6s}
@keyframes op{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .reveal{animation:none}}
@media (max-width:640px){
  .hero::after{background:linear-gradient(to top, rgba(20,23,14,.94) 0%, rgba(20,23,14,.55) 45%, rgba(20,23,14,.05) 75%)}
}

/* ---- bewijs: wat hij gedaan heeft ---- */
.bewijs{border-bottom:1px solid var(--lijn)}
.bewijs ul{list-style:none;margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(4,1fr)}
.bewijs li{padding:34px 28px 34px 0;border-right:1px solid var(--lijn)}
.bewijs li + li{padding-left:28px}
.bewijs li:last-child{border-right:0}
.bewijs b{display:block;font:400 clamp(24px,2.4vw,32px)/1.1 var(--serif);letter-spacing:-.01em}
.bewijs span{display:block;font-size:14px;color:var(--inkt-zacht);margin-top:8px}
@media (max-width:860px){
  .bewijs ul{grid-template-columns:1fr 1fr}
  .bewijs li{padding:26px 16px 26px 0 !important;border-right:0;border-bottom:1px solid var(--lijn)}
  .bewijs li:nth-child(even){padding-left:16px !important;border-left:1px solid var(--lijn)}
  .bewijs li:nth-last-child(-n+2){border-bottom:0}
}

section{scroll-margin-top:76px}
.sectie{padding:var(--sectie) 0}
.donker{background:var(--grond);color:var(--nevel)}

/* ---- lessen ---- */
.kop{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(48px,7vw,88px)}
.kop .lead{margin:0}
@media (max-width:860px){.kop{grid-template-columns:1fr;gap:0}.kop .lead{margin-top:24px}}
/* drie diensten naast elkaar, elk van boven naar beneden gelezen */
.lessen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--inkt)}
.les{display:flex;flex-direction:column;padding:36px 36px 8px;border-left:1px solid var(--lijn)}
.les:first-child{padding-left:0;border-left:0}
.les:last-child{padding-right:0}
.les .nr{font:italic 300 22px/1 var(--serif);color:var(--zon-diep)}
.les h3{font-size:clamp(30px,3vw,40px);line-height:1.05;margin:28px 0 18px}
.les p{margin:0;color:var(--inkt-zacht);text-wrap:pretty}
.les p + p{margin-top:12px;font-size:15px}
.les .prijs{margin-top:auto;padding-top:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);font-weight:600}
/* wie er al uit is, boekt direct vanuit de kolom */
.les-voet{margin-top:auto;padding-top:28px}
.les .les-voet .prijs{margin:0;padding:0;display:block}
.boek{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:var(--zon);color:var(--grond);text-decoration:none;font:600 16px/1 var(--sans);
  padding:8px 8px 8px 22px;border-radius:999px;box-shadow:0 10px 24px -14px rgba(143,98,20,.9);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease}
.boek .pijl{width:40px;height:40px;border-radius:50%;background:var(--grond);color:var(--zon);
  display:grid;place-items:center;font-size:18px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.boek:hover{background:#e8b65a;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(143,98,20,1)}
.boek:hover .pijl{transform:translateX(3px) rotate(-30deg)}
@media (prefers-reduced-motion:reduce){.boek,.boek .pijl{transition:none}.boek:hover,.boek:hover .pijl{transform:none}}
@media (max-width:860px){
  .lessen{grid-template-columns:1fr}
  .les,.les:first-child,.les:last-child{padding:32px 0;border-left:0;border-bottom:1px solid var(--lijn)}
  .les h3{margin:18px 0 12px}
  .les-voet{padding-top:20px}
}

/* ---- fitting ---- */
.fitting .kop{margin-bottom:clamp(48px,6vw,72px)}
/* de foto en de fitkaart overlappen: de kaart ligt op het gras, als een scorekaart */
.paskamer{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.paskamer figure{grid-column:1/9;grid-row:1;margin:0}
.paskamer figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:40% 60%;border-radius:4px}
.paskamer figcaption{font-size:13px;color:var(--nevel-zacht);margin-top:14px}
.fitkaart{grid-column:8/13;grid-row:1;position:relative;z-index:1;background:var(--papier);color:var(--inkt);
  border-radius:4px;padding:clamp(24px,2.6vw,36px);rotate:-1.2deg;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 40px 70px -28px rgba(0,0,0,.75)}
.fitkaart header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:3px double var(--inkt)}
.fitkaart header b{font:400 30px/1 var(--serif);letter-spacing:-.01em}
.fitkaart header span{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--zon-diep)}
.fitkaart .voor{font-size:14px;color:var(--inkt-zacht);margin:12px 0 4px}
.fitkaart dl{margin:0}
.fitkaart dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px dotted rgba(29,32,19,.3)}
.fitkaart dt{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
/* de ingevulde waarden in "inkt": cursief, alsof ze er tijdens de fitting zijn bijgeschreven */
.fitkaart dd{margin:0;font:italic 400 21px/1.1 var(--serif);color:var(--inkt);text-align:right}
.fitkaart .voet{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px;font-size:12px;color:var(--inkt-zacht)}
.fitkaart .paraaf{font:italic 300 24px/1 var(--serif);color:var(--zon-diep);border-bottom:1px solid var(--lijn);padding:0 4px 4px}

/* het traject: twee stappen samen op de range, één daarna */
.traject{list-style:none;margin:clamp(72px,9vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,4vw,56px)}
.traject .duur{grid-row:1;position:relative;padding:0 0 14px;margin-bottom:28px;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--zon);border-bottom:1px solid var(--zon)}
.traject .duur::before,.traject .duur::after{content:"";position:absolute;bottom:-1px;width:1px;height:10px;background:var(--zon)}
.traject .duur::before{left:0}.traject .duur::after{right:0}
.traject .duur.samen{grid-column:1/3}
.traject .duur.daarna{grid-column:3/4;color:var(--nevel-zacht);border-color:var(--olijf)}
.traject .duur.daarna::before,.traject .duur.daarna::after{background:var(--olijf)}
.traject .stap{grid-row:2}
.traject .nr{font:italic 300 22px/1 var(--serif);color:var(--zon)}
.traject h3{font-size:clamp(30px,3vw,40px);line-height:1.05;margin:16px 0 12px}
.traject p{margin:0;color:var(--nevel-zacht);max-width:34ch;text-wrap:pretty}

/* slot: waarom bij hem, de feiten, en de knop */
.fit-slot{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,104px);margin-top:clamp(72px,9vw,120px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--lijn-donker)}
.belofte{font:italic 300 clamp(30px,3.2vw,44px)/1.15 var(--serif);color:var(--zon);margin:0;max-width:18ch;text-wrap:balance}
.fit-slot .leraar{color:var(--nevel-zacht);max-width:44ch;margin:24px 0 0;font-size:18px}
.feiten{margin:0}
.feiten div{border-top:1px solid var(--lijn-donker);padding:14px 0 18px}
.feiten div:first-child{border-top:0;padding-top:0}
.feiten dt{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nevel-zacht);margin-bottom:10px}
.feiten dd{margin:0}
.fit-slot .boek{margin-top:12px}

@media (max-width:860px){
  .paskamer{display:block}
  .paskamer figure img{aspect-ratio:4/3}
  .paskamer figcaption{display:none}
  .fitkaart{margin:-48px 12px 0;rotate:-1deg}
  .traject{grid-template-columns:1fr}
  .traject .duur,.traject .stap{grid-row:auto;grid-column:1 !important}
  .traject .samen{order:0}.traject li:nth-child(3){order:1}.traject li:nth-child(4){order:2}
  .traject .daarna{order:3;margin-top:16px}.traject li:nth-child(5){order:4}
  .traject .stap{padding-bottom:32px}
  .fit-slot{grid-template-columns:1fr}
}

/* ---- over ---- */
/* sinds 10-07 staat de fitting bovenaan; lessen en over zijn nu twee lichte secties na elkaar */
#lessen{padding-bottom:clamp(64px,8vw,112px)}
#lessen + .over{border-top:1px solid var(--lijn);padding-top:clamp(64px,8vw,112px)}
.over .raster{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,104px);align-items:center;padding-bottom:clamp(0px,8vw,120px)}
.over .tekst p{max-width:54ch}
.over .tekst p + p{margin-top:18px}
.over .tekst .eerste{margin-top:32px;font-size:19px}
.noot{font-size:14px;color:var(--inkt-zacht);border-left:2px solid var(--zon);padding:2px 0 2px 16px;margin-top:32px !important}
/* het gat: de enige plek die leeg blijft */
.gat{aspect-ratio:4/5;border:1.5px dashed rgba(143,98,20,.55);border-radius:4px;background:
  repeating-linear-gradient(135deg, rgba(143,98,20,.05) 0 14px, transparent 14px 28px), var(--papier-diep);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,40px)}
.gat .label{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--zon-diep)}
.gat h3,.gat .gat-kop{font-size:clamp(26px,2.4vw,32px);line-height:1.1;margin:14px 0 14px}
/* een gat-kop is geen kop in de structuur (de echte titel volgt eronder), maar ziet er wel zo uit */
.gat .gat-kop{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.gat ul{margin:0;padding:0 0 0 18px;font-size:14px;color:var(--inkt-zacht)}
.gat li + li{margin-top:4px}
/* het portret: een donker vlak schuift erachter uit, en de loopbaan ligt erop als kaartje */
.portret{margin:0;position:relative;isolation:isolate}
.portret::before{content:"";position:absolute;inset:-28px -28px 56px 56px;z-index:-1;border-radius:4px;
  background:radial-gradient(120% 80% at 100% 0%, rgba(219,165,69,.28), transparent 60%), var(--grond)}
.portret img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  box-shadow:0 30px 60px -30px rgba(20,23,14,.6)}
.loopbaan{position:absolute;left:clamp(-88px,-6vw,-40px);bottom:clamp(-160px,-9vw,-100px);width:min(300px,78%);
  background:var(--kaart);color:var(--inkt);border-radius:4px;padding:22px 24px 16px;rotate:1.4deg;
  box-shadow:0 2px 0 rgba(0,0,0,.06), 0 36px 60px -26px rgba(20,23,14,.7)}
.loopbaan header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:3px double var(--inkt)}
.loopbaan header b{font:400 24px/1 var(--serif);letter-spacing:-.01em}
.loopbaan header span{font:italic 300 18px/1 var(--serif);color:var(--zon-diep)}
.loopbaan ol{list-style:none;margin:0;padding:0}
.loopbaan li{display:grid;grid-template-columns:5.2em 1fr;align-items:baseline;gap:12px;padding:9px 0;font-size:14px;color:var(--inkt-zacht);border-bottom:1px dotted rgba(29,32,19,.3)}
.loopbaan li:last-child{border-bottom:0}
.loopbaan .jr{font:italic 400 19px/1 var(--serif);color:var(--inkt)}
@media (max-width:860px){
  .over .raster{grid-template-columns:1fr;padding-bottom:0}.gat{aspect-ratio:auto;min-height:420px}
  .portret{margin-right:16px}
  .portret::before{inset:-16px -16px 40px 40px}
  .loopbaan{position:relative;left:auto;bottom:auto;width:auto;margin:-56px 12px 0;rotate:-1deg}
}

/* ---- reviews ---- */
.reviews{border-top:1px solid var(--lijn)}
/* Google-reviews mock-up: de vorm van het echte blok, nog zonder inhoud.
   Het G-logo en de sterren dragen de herkenning; de rest blijft De Dauw. */
.greviews{margin-top:48px}
.gkop{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px;padding-bottom:24px;border-bottom:1px solid var(--inkt)}
.glogo{width:40px;height:40px;flex:none}
.gscore p{margin:0}
.gtitel{font:600 13px/1.2 var(--sans);letter-spacing:.04em;color:var(--inkt-zacht)}
.gcijfer{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:4px!important}
.gcijfer b{font:400 40px/1 var(--serif);color:rgba(29,32,19,.35)}
.gaantal{font-size:14px;color:var(--inkt-zacht)}
.sterren{color:rgba(29,32,19,.16);letter-spacing:.08em;font-size:20px;line-height:1}
.gwacht{margin-left:auto;font-size:14px;color:var(--zon-diep)}
.gkaarten{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gkaarten li{background:var(--kaart);border:1px solid var(--lijn);border-radius:14px;padding:22px 22px 26px;min-height:210px}
.gwie{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--papier-diep);flex:none}
.gmini{width:18px;height:18px;margin-left:auto;opacity:.55;flex:none}
.gregel{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.gregel .sterren{font-size:15px}
.gregel .balkje{margin:0}
.balkje{display:block;height:9px;border-radius:5px;background:rgba(29,32,19,.08);margin-top:10px}
.gwie .balkje{margin:0}
.gvoet{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;margin-top:32px}
.gvoet p{margin:0;color:var(--inkt-zacht);max-width:58ch}
.glink{font:500 16px/1 var(--sans);color:var(--inkt-zacht);text-decoration:underline dotted;text-underline-offset:5px;opacity:.6;cursor:not-allowed}
@media (max-width:860px){
  .gkaarten{grid-template-columns:1fr}.gkaarten li{min-height:0}
  .gkaarten li:nth-child(n+2){display:none} /* op mobiel: één kaart is genoeg om het idee te tonen */
  .gwacht{margin-left:0}
}

/* ---- vragen ---- */
.vragen .raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px)}
details{border-bottom:1px solid var(--lijn)}
details:first-child{border-top:1px solid var(--inkt)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:400 clamp(20px,1.8vw,24px)/1.3 var(--serif)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 28px/1 var(--sans);color:var(--zon-diep);transition:transform .25s ease;flex:none}
details[open] summary::after{transform:rotate(45deg)}
/* tijdens het dichtschuiven is details nog [open]: het kruisje draait meteen terug */
details.sluit summary::after{transform:none}
details p{margin:0 0 26px;color:var(--inkt-zacht);max-width:58ch}
/* het antwoord komt rustig op terwijl het vak openschuift (site.js doet de hoogte) */
details[open]:not(.sluit) > :not(summary){animation:antwoord .4s .08s cubic-bezier(.2,.7,.2,1) both}
@keyframes antwoord{from{opacity:0;translate:0 -6px}}
@media (prefers-reduced-motion:reduce){details[open] > :not(summary){animation:none}}
@media (max-width:860px){.vragen .raster{grid-template-columns:1fr}}

/* ---- contact: het slot, de zon komt op ---- */
.contact{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,10vw,136px) 0 clamp(56px,7vw,88px)}
/* geen tweede foto: een gloed die van onderen opkomt, als de zon achter de nevel uit de hero */
.contact::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-48%;width:min(1500px,170vw);aspect-ratio:1;translate:-30% 0;border-radius:50%;
  background:radial-gradient(closest-side, rgba(219,165,69,.46), rgba(219,165,69,.16) 42%, rgba(219,165,69,0) 72%);
  transition:translate 2.4s cubic-bezier(.2,.7,.2,1), opacity 2.4s ease}
.js .contact:not(.opgekomen)::before{translate:-30% 14%;opacity:.4}
.contact::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:40%;background:linear-gradient(to top, rgba(240,231,212,.05), transparent)}
@media (prefers-reduced-motion:reduce){.contact::before{transition:none}.js .contact:not(.opgekomen)::before{translate:-30% 0;opacity:1}}
.contact .kop{margin-bottom:0}
.contact h2{font-size:clamp(40px,5.2vw,68px);line-height:1.02;max-width:11ch}
.contact .lead{max-width:40ch}
/* drie ingangen, elk een mail met het juiste onderwerp */
.routes{list-style:none;margin:clamp(36px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.route{display:flex;flex-direction:column;height:100%;padding:clamp(22px,2vw,28px);text-decoration:none;
  border:1px solid var(--lijn-donker);border-radius:6px;background:rgba(30,35,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.route .nr{font:italic 300 20px/1 var(--serif);color:var(--zon)}
.route h3{font-size:clamp(26px,2.2vw,32px);line-height:1.05;margin:14px 0 8px}
.route p{margin:0;color:var(--nevel-zacht);max-width:30ch;font-size:16px}
.route .doe{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 15px/1 var(--sans);color:var(--nevel)}
.route .pijl{width:40px;height:40px;border-radius:50%;border:1px solid var(--olijf);display:grid;place-items:center;font-size:18px;color:var(--zon);flex:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.route:hover{border-color:rgba(219,165,69,.6);background:rgba(30,35,20,.8);transform:translateY(-4px)}
.route:hover .pijl{background:var(--zon);border-color:var(--zon);color:var(--grond);transform:rotate(-30deg)}
/* de eerste route krijgt het goud: op de homepage de fitting, Ronald verkoopt via de fitting */
.route.eerst{background:var(--zon);border-color:var(--zon);color:var(--grond)}
.route.eerst .nr,.route.eerst p,.route.eerst .doe{color:var(--grond)}
.route.eerst p{opacity:.78}
.route.eerst .pijl{background:var(--grond);border-color:var(--grond);color:var(--zon)}
.route.eerst:hover{background:#e8b65a;border-color:#e8b65a}
.route.eerst:hover .pijl{background:var(--grond);color:var(--zon)}
@media (prefers-reduced-motion:reduce){.route,.route .pijl{transition:none}.route:hover,.route:hover .pijl{transform:none}}
/* en voor wie gewoon het adres wil */
.direct{margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--lijn-donker);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;align-items:start}
.direct dt{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nevel-zacht);margin-bottom:12px}
.direct dd{margin:0}
.direct .mail a{font:400 clamp(22px,2vw,28px)/1.1 var(--serif);letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--olijf);transition:text-decoration-color .2s}
.direct .mail a:hover{text-decoration-color:var(--zon)}
.direct a{text-decoration-color:var(--olijf)}
@media (max-width:860px){
  .routes{grid-template-columns:1fr}
  .direct{grid-template-columns:1fr 1fr}
  .direct .mail{grid-column:1/-1}
}

footer{background:var(--grond);color:var(--nevel-zacht);font-size:14px;border-top:1px solid var(--lijn-donker)}
footer .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:40px;padding-bottom:40px}
footer b{display:block;color:var(--nevel);font-weight:600}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}


/* scroll-onthulling, alleen als JS en beweging er zijn */
.js .op{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.js .op.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .op{opacity:1;transform:none;transition:none}}

/* =====================================================================
   Subpagina's: lessen.html en fitting.html (2026-10-03)
   ===================================================================== */

/* de balk weet op welke pagina je bent */
.balk nav a[aria-current="page"]{color:var(--nevel);text-decoration:underline;text-decoration-color:var(--zon);text-underline-offset:8px;text-decoration-thickness:1px}

/* een lagere hero: dezelfde ochtend, minder hoog */
.hero.sub{min-height:min(80svh,780px)}
.hero.sub h1{font-size:clamp(44px,min(6.6vw,13vh - 20px),96px);max-width:12ch}
.kruimel{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nevel-zacht);margin:0 0 20px}
.kruimel a{text-decoration:none}
.kruimel a:hover{color:var(--nevel)}
.kruimel span{margin:0 8px;color:var(--zon)}

/* onder de hero: waar staat wat op deze pagina */
.inhoud-strip{border-bottom:1px solid var(--lijn)}
.inhoud-strip ol{list-style:none;margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.inhoud-strip li{border-right:1px solid var(--lijn)}
.inhoud-strip li:last-child{border-right:0}
.inhoud-strip a{display:block;height:100%;padding:26px 20px;text-decoration:none;font:400 clamp(19px,1.6vw,22px)/1.2 var(--serif);transition:color .2s}
.inhoud-strip li:first-child a{padding-left:0}
.inhoud-strip a b{display:block;font:italic 300 16px/1 var(--serif);color:var(--zon-diep);margin-bottom:10px}
.inhoud-strip a:hover{color:var(--zon-diep)}
@media (max-width:860px){
  .inhoud-strip ol{grid-template-columns:1fr 1fr}
  .inhoud-strip li{border-right:0;border-bottom:1px solid var(--lijn)}
  .inhoud-strip li:nth-child(odd) a{padding-left:0;border-right:1px solid var(--lijn)}
  .inhoud-strip a{padding:20px 16px}
}

/* --- het open veld: een feit dat Ronald nog invult ---
   Leeg met opzet (decisions/2026-07-15-placeholders-do-the-asking): een stippellijn met
   een potloodje, zoals op een formulier dat nog ingevuld moet worden. */
.vul{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .4em;border-bottom:1.5px dashed var(--zon-diep);
  background:rgba(219,165,69,.13);border-radius:2px 2px 0 0;font:italic 400 1em/1.3 var(--serif);color:var(--zon-diep)}
.vul::before{content:"✎ ";font-style:normal;font-size:.8em}
.donker .vul{border-color:var(--zon);color:var(--zon)}
/* iets wat we denken te weten, maar nog niet van Ronald zelf hebben */
.check{text-decoration:underline dotted var(--zon-diep);text-underline-offset:4px;cursor:help}
.donker .check{text-decoration-color:var(--zon)}

/* --- lessen: alle vormen in één tabel, met wat het kost --- */
.tarief{width:100%;border-collapse:collapse;margin-top:clamp(48px,6vw,80px);font-size:16px}
.tarief caption{text-align:left;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht);padding-bottom:18px}
.tarief th,.tarief td{text-align:left;padding:20px 20px 20px 0;border-bottom:1px solid var(--lijn);vertical-align:baseline}
.tarief thead th{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);border-bottom:1px solid var(--inkt)}
.tarief tbody th{font:400 clamp(20px,1.8vw,24px)/1.2 var(--serif)}
.tarief td{color:var(--inkt-zacht)}
.tarief td:last-child,.tarief th:last-child{text-align:right;padding-right:0;color:var(--inkt)}
@media (max-width:640px){
  .tarief thead{display:none}
  .tarief tr{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--lijn)}
  .tarief th,.tarief td{border:0;padding:0}
  .tarief tbody th{grid-column:1/-1;margin-bottom:6px}
  .tarief td:nth-child(3){grid-column:1}
  .tarief td:last-child{grid-row:2 / span 2;grid-column:2;align-self:center}
}

/* --- de baanpermissie-dag: een tijdlijn van de dag op donker --- */
.dag{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,104px);align-items:start}
.dag .noot{color:var(--nevel-zacht)}
.uren{list-style:none;margin:0;padding:0;position:relative}
.uren::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--zon),var(--olijf))}
.uren li{position:relative;padding:0 0 34px 44px}
.uren li:last-child{padding-bottom:0}
.uren li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;background:var(--grond);border:1.5px solid var(--zon)}
.uren li:last-child::before{background:var(--zon)}
.uren .wanneer{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--zon)}
.uren h3{font-size:clamp(26px,2.4vw,32px);line-height:1.1;margin:10px 0 8px}
.uren p{margin:0;color:var(--nevel-zacht);max-width:46ch}
.dag .feiten{margin-top:40px}
@media (max-width:860px){.dag{grid-template-columns:1fr}}

/* --- je eerste les: drie momenten, en wat je meeneemt --- */
.eerste-les{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.eerste-les li{border-top:1px solid var(--inkt);padding-top:24px}
.eerste-les .wanneer{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--zon-diep)}
.eerste-les h3{font-size:clamp(28px,2.6vw,36px);line-height:1.05;margin:18px 0 12px}
.eerste-les p{margin:0;color:var(--inkt-zacht);max-width:34ch;text-wrap:pretty}
@media (max-width:860px){.eerste-les{grid-template-columns:1fr}}

.tas{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--lijn);display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
.tas h3{font-size:clamp(28px,2.6vw,36px);line-height:1.05}
.tas > div > p{color:var(--inkt-zacht);margin:14px 0 0;max-width:36ch}
.tas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.tas li{padding:14px 0;border-bottom:1px dotted rgba(29,32,19,.3);display:flex;gap:14px;align-items:baseline}
.tas li::before{content:"✓";color:var(--zon-diep);font-weight:600;flex:none}
.tas li.niet::before{content:"–";color:var(--inkt-zacht)}
@media (max-width:860px){.tas{grid-template-columns:1fr}.tas ul{grid-template-columns:1fr}}

/* --- de afspraken: een kaart zoals de fitkaart, maar dan met de regels ---
   Wat bekend is staat er, wat Ronald nog kiest is een .vul. */
.afspraken{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,104px);align-items:start}
.voorwaarden{background:var(--kaart);color:var(--inkt);border-radius:4px;padding:clamp(24px,3vw,44px);rotate:.6deg;
  border:1px solid var(--lijn);box-shadow:0 2px 0 rgba(0,0,0,.05), 0 34px 60px -34px rgba(29,32,19,.5)}
.voorwaarden header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:3px double var(--inkt)}
.voorwaarden header b{font:400 clamp(26px,2.4vw,32px)/1 var(--serif);letter-spacing:-.01em}
.voorwaarden header span{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--zon-diep)}
.voorwaarden dl{margin:0}
.voorwaarden dl > div{display:grid;grid-template-columns:minmax(140px,1fr) 2.2fr;gap:24px;padding:18px 0;border-bottom:1px dotted rgba(29,32,19,.3)}
.voorwaarden dt{font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);padding-top:3px}
.voorwaarden dd{margin:0;line-height:1.7}
.voorwaarden .voet{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:24px;font-size:12px;color:var(--inkt-zacht)}
.voorwaarden .paraaf{min-width:130px;border-bottom:1px solid var(--inkt-zacht);height:28px}
.legenda{display:flex;flex-direction:column;gap:12px;margin-top:32px;font-size:15px;color:var(--inkt-zacht);max-width:42ch}
.legenda span{display:flex;gap:12px;align-items:baseline}
@media (max-width:860px){.afspraken{grid-template-columns:1fr}.voorwaarden{rotate:0deg}.voorwaarden dl > div{grid-template-columns:1fr;gap:6px}}

/* --- fitting: de soorten, als lijst met duur en kosten --- */
.soorten{list-style:none;margin:0;padding:0;border-top:1px solid var(--nevel)}
.soort{display:grid;grid-template-columns:1.2fr 1.8fr .9fr .9fr;gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--lijn-donker)}
.soort h3{font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.soort p{margin:0;color:var(--nevel-zacht)}
.soort .k{font-size:16px}
.soort .k b{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nevel-zacht);margin-bottom:10px}
@media (max-width:860px){.soort{grid-template-columns:1fr 1fr;gap:12px 16px}.soort h3,.soort p{grid-column:1/-1}}

/* --- fitting: het traject in vijf stappen, met wat er gemeten wordt --- */
.stappen{list-style:none;margin:0;padding:0}
.stappen li{display:grid;grid-template-columns:110px 5fr 6fr;gap:clamp(20px,4vw,56px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--lijn)}
.stappen li:first-child{border-top-color:var(--inkt)}
.stappen li:last-child{border-bottom:1px solid var(--lijn)}
.stappen .nr{font:italic 300 clamp(40px,4vw,56px)/1 var(--serif);color:var(--zon-diep)}
.stappen h3{font-size:clamp(28px,2.8vw,38px);line-height:1.05}
.stappen .tijd{display:block;margin-top:12px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.stappen p{margin:0;color:var(--inkt-zacht);max-width:52ch}
.stappen .meet{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.stappen .meet li{display:block;padding:6px 13px;border:1px solid rgba(29,32,19,.22);border-radius:999px;font-size:13px;color:var(--inkt)}
@media (max-width:860px){.stappen li{grid-template-columns:52px 1fr}.stappen li > div:last-child{grid-column:2}.stappen .nr{font-size:32px}}

/* --- van de homepage door naar een subpagina --- */
.verder{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(32px,4vw,48px);font:500 16px/1 var(--sans);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--zon-diep)}
.donker .verder{color:var(--nevel);text-decoration-color:var(--zon)}
.verder:hover{text-decoration-color:currentColor}
.verder .pijl{transition:transform .2s ease}
.verder:hover .pijl{transform:translateX(3px)}

/* het hoe-lijstje onder de hero wijst naar beneden */
.inhoud-strip a::after{content:" ↓";color:var(--zon-diep);font-family:var(--sans);font-size:.8em}

/* fitting.html: de fit-slot op papier in plaats van op donker */
.fit-slot.licht{margin-top:0;border-top-color:var(--lijn);align-items:center}
.fit-slot.licht .belofte{color:var(--zon-diep)}
.fit-slot.licht .leraar{color:var(--inkt-zacht)}
.fitkaart.los{grid-column:auto;grid-row:auto;rotate:1.4deg;background:var(--kaart);border:1px solid var(--lijn);
  box-shadow:0 2px 0 rgba(0,0,0,.05), 0 34px 60px -34px rgba(29,32,19,.5)}
@media (max-width:860px){.fitkaart.los{margin:0;rotate:0deg}}
.hero img.laag{object-position:40% 70%}
.donker .noot{color:var(--nevel-zacht)}
#soorten .noot{margin-top:32px}
/* fitting-hero: de club staat links, achter de tekst; daar mag het wat donkerder */
.hero.sub.club::after{background:
  linear-gradient(to bottom, rgba(20,23,14,.42) 0, rgba(20,23,14,0) 150px),
  linear-gradient(to top, rgba(20,23,14,.88) 0%, rgba(20,23,14,.35) 38%, rgba(20,23,14,0) 62%),
  linear-gradient(to right, rgba(20,23,14,.78) 0%, rgba(20,23,14,.55) 40%, rgba(20,23,14,0) 70%)}

/* =====================================================================
   reizen.html (2026-10-07): golfreizen, alleen top-of-funnel.
   Programma en inschrijving blijven bij Mogu/Wetu; de site toont en stuurt door.
   ===================================================================== */

/* reizen-hero: de tas staat rechts in tegenlicht; links, achter de tekst, wat donkerder */
.hero.sub.reis-hero img{object-position:60% 32%}
.hero.sub.reis-hero::after{background:
  linear-gradient(to bottom, rgba(20,23,14,.45) 0, rgba(20,23,14,0) 150px),
  linear-gradient(to top, rgba(20,23,14,.9) 0%, rgba(20,23,14,.4) 40%, rgba(20,23,14,0) 64%),
  linear-gradient(to right, rgba(20,23,14,.8) 0%, rgba(20,23,14,.5) 42%, rgba(20,23,14,0) 68%)}
@media (max-width:640px){.hero.sub.reis-hero::after{background:linear-gradient(to top, rgba(20,23,14,.94) 0%, rgba(20,23,14,.6) 48%, rgba(20,23,14,.1) 78%)}}

/* twee reizen naast elkaar: foto-gat boven, de feiten eronder */
.reizen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.reis{display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--lijn);border-radius:6px;overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.04), 0 34px 60px -40px rgba(29,32,19,.45)}
.gat.breed{aspect-ratio:16/10;border:0;border-bottom:1.5px dashed rgba(143,98,20,.55);border-radius:0}
.reis-in{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);flex:1}
.reis .waar{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--zon-diep);margin:0}
.reis-in > h3{font-size:clamp(30px,3vw,40px);line-height:1.05;margin:14px 0 10px}
.reis .wanneer{font:italic 400 20px/1.3 var(--serif);margin:0 0 18px}
.reis-in > p:not([class]){margin:0;color:var(--inkt-zacht);text-wrap:pretty}
.mee{list-style:none;margin:22px 0 0;padding:0}
.mee li{padding:11px 0;border-bottom:1px dotted rgba(29,32,19,.3);display:flex;gap:14px;align-items:baseline;font-size:16px}
.mee li::before{content:"✓";color:var(--zon-diep);font-weight:600;flex:none}
.mee li.niet{color:var(--inkt-zacht)}
.mee li.niet::before{content:"–";color:var(--inkt-zacht)}
.reis-voet{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-top:24px}
.reis .prijs{margin:0;font-size:15px;color:var(--inkt-zacht)}
.reis .prijs b{font:400 clamp(28px,2.6vw,34px)/1 var(--serif);color:var(--inkt);letter-spacing:-.01em;margin-right:6px}
.reis .status{margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.reis .status.open{color:var(--zon-diep)}
.reis .boek{margin-top:22px}
/* een reis die vol zit: zelfde knop, zonder het goud */
.boek.stil{background:transparent;color:var(--inkt);border:1px solid rgba(29,32,19,.3);box-shadow:none}
.boek.stil:hover{background:var(--papier-diep);box-shadow:none}
.reis .door{margin:14px 0 0;font-size:14px;color:var(--inkt-zacht)}
@media (max-width:860px){.reizen{grid-template-columns:1fr}}

/* =====================================================================
   clubservice.html en golfmanagement.html (2026-10-16)
   ===================================================================== */

/* clubservice-hero: de wedge staat links achter de tekst, daar wat donkerder (zoals de fitting-hero) */
.hero.sub.werkbank img{object-position:30% 65%}
.hero.sub.werkbank::after{background:
  linear-gradient(to bottom, rgba(20,23,14,.42) 0, rgba(20,23,14,0) 150px),
  linear-gradient(to top, rgba(20,23,14,.9) 0%, rgba(20,23,14,.4) 40%, rgba(20,23,14,0) 64%),
  linear-gradient(to right, rgba(20,23,14,.8) 0%, rgba(20,23,14,.55) 40%, rgba(20,23,14,0) 70%)}
/* golf management: de golfer staat rechts in de nevel, de tekst links houdt de lucht vrij */
.hero.sub.overzicht img{object-position:62% 45%}

/* een klein foto-gat onder de legenda (clubservice: Ronald aan de werkbank) */
.gat.klein{aspect-ratio:4/3;margin-top:36px;max-width:420px}
/* op mobiel geeft .gat een min-height van 420px; samen met 4/3 dwong dat een breedte van 560px af (horizontaal scrollen) */
@media (max-width:860px){.gat.klein{min-height:0}}

/* golf management is onze lezing: dat zegt de pagina hardop, in plaats van het te verstoppen */
.lezing{margin:0 0 clamp(36px,4vw,52px);padding:16px 20px;max-width:66ch;font-size:16px;color:var(--inkt-zacht);
  background:rgba(219,165,69,.08);border:1.5px dashed rgba(143,98,20,.55);border-radius:4px}
.lezing b{color:var(--zon-diep)}

/* homepage #diensten: twee doorlinks naast elkaar */
.verders{display:flex;flex-wrap:wrap;gap:0 40px}

/* de drie momenten van eerste-les, maar dan op donker */
.donker .eerste-les li{border-top-color:var(--nevel)}
.donker .eerste-les .wanneer{color:var(--zon)}
.donker .eerste-les p{color:var(--nevel-zacht)}

/* ---- laptop ----
   Bijna alle maten schalen met de breedte (vw). Een laptop is breed genoeg om ze tegen hun maximum
   te zetten, maar het scherm is laag en fysiek klein: dan voelt alles te groot. Breed én laag
   (1366×768, 1440×900, 1536×864, 1920×1080 op 125%) krijgt daarom een compactere maat: ongeveer
   80% van type en ritme. Grote monitoren en telefoons blijven zoals ze waren. */
@media (min-width:861px) and (max-height:900px){
  :root{--sectie:clamp(64px,7.5vw,112px)}
  body{font-size:16px}
  h2,.contact h2{font-size:clamp(34px,3.9vw,54px)}
  .lead{font-size:18px;margin-top:22px}
  .oog{margin-bottom:16px}
  .kop{margin-bottom:clamp(36px,4.5vw,60px)}
  .knop{padding:15px 22px;font-size:15px}

  .bewijs li{padding-top:26px;padding-bottom:26px}
  .bewijs b{font-size:clamp(22px,1.9vw,27px)}

  /* fitting */
  .fitting .kop{margin-bottom:clamp(36px,4.5vw,56px)}
  .paskamer figure img{aspect-ratio:16/10}
  .fitkaart{padding:clamp(22px,2vw,30px)}
  .fitkaart header b{font-size:26px}
  .fitkaart dl div{padding:9px 0}
  .fitkaart dd{font-size:19px}
  .traject,.fit-slot{margin-top:clamp(56px,6vw,88px)}
  .traject h3,.les h3{font-size:clamp(26px,2.3vw,32px)}
  .belofte{font-size:clamp(26px,2.5vw,36px)}
  .fit-slot .leraar{font-size:17px}

  /* lessen + over */
  .les{padding-top:30px}
  .les h3{margin:22px 0 14px}
  #lessen{padding-bottom:clamp(56px,6vw,88px)}
  #lessen + .over{padding-top:clamp(56px,6vw,88px)}
  .over .raster{padding-bottom:clamp(0px,6vw,96px)}
  .over .tekst .eerste{font-size:18px;margin-top:26px}
  .portret{max-width:440px;justify-self:end;width:100%}

  /* vragen + contact */
  summary{font-size:clamp(19px,1.5vw,21px);padding:20px 0}
  .contact{padding:clamp(64px,7vw,104px) 0 clamp(48px,5vw,72px)}
  .route h3{font-size:clamp(24px,1.9vw,28px)}
  .direct .mail a{font-size:clamp(20px,1.7vw,24px)}

  /* subpagina's */
  .inhoud-strip a{font-size:clamp(18px,1.4vw,20px);padding:22px 18px}
  .tarief{margin-top:clamp(40px,4.5vw,64px)}
  .tarief tbody th{font-size:clamp(19px,1.5vw,21px)}
  .uren h3,.gat h3,.gat .gat-kop,.soort h3,.voorwaarden header b{font-size:clamp(23px,2vw,28px)}
  .eerste-les h3,.tas h3,.stappen h3,.reis-in > h3{font-size:clamp(25px,2.2vw,31px)}
  .stappen li{padding:clamp(24px,2.6vw,36px) 0}
  .stappen .nr{font-size:clamp(34px,3vw,44px)}
  .tas{margin-top:clamp(44px,5vw,72px)}
  .reis .prijs b{font-size:clamp(25px,2.1vw,30px)}
}