/* ==========================================================================
   1-op-1-begeleiding — alleen voor deze pagina
   Wordt als laatste geladen, dus wat hier staat gaat voor.
   ========================================================================== */


/* ----- de drie invalshoeken naast elkaar -----
   Drie kolommen van gelijke hoogte. De slotzin wordt met margin-top:auto naar
   de onderkant geduwd, zodat de drie slotzinnen op dezelfde regel eindigen,
   ook als de stukken tekst niet even lang zijn.                            */
.drieluik{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding:0 var(--lijn) var(--sectie)}
.drieluik article{display:flex;flex-direction:column;
  border:1px solid rgba(142,124,195,.24);
  border-radius:var(--radius);box-shadow:var(--schaduw);padding:34px 32px 32px}
/* Elk van de drie krijgt zijn eigen tint, op ongeveer een tiende van de volle
   sterkte van lavendel, roze en geel. Genoeg om te zien dat het drie dingen
   zijn, te weinig om de aandacht te trekken. De rand loopt mee in dezelfde
   kleur. Contrast van de lichtste tekst op de zachtste tint: 5,9.          */
.drieluik .k1{background:#f4f1fa;border-color:rgba(142,124,195,.30)}
.drieluik .k2{background:#fbf1f4;border-color:rgba(217,139,163,.30)}
.drieluik .k3{background:#fbf4e3;border-color:rgba(184,145,46,.28)}
.drieluik h2{margin:0 0 12px;font-weight:600;font-size:var(--t-h3)}
.drieluik p{margin:0 0 16px;font-size:var(--t-body);line-height:1.75;color:var(--ink-soft)}
.drieluik .invalshoek-slot{margin-top:auto;padding-top:20px;font-size:var(--t-lead)}

/* ----- opbrengst als lijst met vinkjes in twee kolommen -----
   Was: zes kaarten onder elkaar in drie kolommen, samen ruim een halve
   schermhoogte. Nu: twee kolommen met vinkjes, waarbij de kop van elk punt
   vet is en de uitleg erachter doorloopt.                                  */
.opbrengst h2{margin:0 0 30px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.opbrengst-lijst{display:grid;grid-template-columns:1fr 1fr;gap:18px 60px;
  margin:0;padding:0;list-style:none;max-width:1180px}
.opbrengst-lijst li{position:relative;padding-left:34px;font-size:var(--t-body);
  line-height:1.7;color:var(--ink-soft)}
/* Vinkje van twee lijnen in saliegroen: hetzelfde teken dat op de
   opstellingendag bij de lijst met vragen staat.                           */
.opbrengst-lijst li::before{content:"";position:absolute;left:2px;top:9px;
  width:12px;height:6px;border-left:2px solid var(--salie);
  border-bottom:2px solid var(--salie);transform:rotate(-45deg)}
.opbrengst-lijst li b{color:var(--ink);font-weight:600}

@media(max-width:1100px){
  .drieluik{grid-template-columns:1fr;gap:20px}
  .opbrengst-lijst{grid-template-columns:1fr;gap:16px}
}

/* ----- tekstblok in het midden -----
   De kolom van 680px staat in het midden van de pagina, maar de regels erin
   beginnen gewoon links. Gecentreerde regels geven aan beide kanten een
   rafelrand; met een vaste linkerkant vindt je oog elke volgende regel terug.
   Het blok staat dus in het midden, de tekst niet.                          */
.verhaal--midden .verhaal-kolom{max-width:var(--prose);margin:0 auto;text-align:left}

/* ----- slotblok vlak boven het contactblok -----
   Stond op 110px onder de band met de stappen; dat viel uit elkaar omdat de
   band zelf ook al 110px marge had. De band houdt nu geen ondermarge meer en
   het slotblok brengt 64px mee.                                             */
.band--strak{margin-bottom:0}
.slot{padding:64px var(--lijn) var(--sectie)}
.slot-kolom{max-width:var(--prose);margin:0 auto}
.slot h2{margin:0 0 18px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.slot p{margin:0 0 18px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.slot p:last-child{margin-bottom:0}
@media(max-width:900px){ .slot{padding:44px var(--lijn) var(--sectie)} }

/* ----- knop in de gecentreerde kop ----- */
.hero-mid .btn{margin-top:32px}

/* ----- twee vlakken naast elkaar -----
   Dezelfde kaarten als het drieluik, maar met z'n tweeën. De tinten k1 tot en
   met k3 werken hier gewoon door.                                          */
.drieluik--twee{grid-template-columns:1fr 1fr}
.drieluik article > p:first-of-type{margin-top:0}

/* ----- één vlak in plaats van twee (vanaf versie 68) -----
   Dezelfde kaart, maar alleen. Over de volle breedte zouden de regels te lang
   worden om prettig te lezen, dus de kaart blijft op de leesbreedte van de
   inleiding erboven (--prose plus de binnenruimte van de kaart) en staat
   gecentreerd. De laatste alinea houdt geen witruimte onder zich.          */
.drieluik--een{grid-template-columns:1fr}
.drieluik--een article{max-width:calc(var(--prose) + 64px);margin:0 auto;width:100%}
.drieluik--een article > p:last-child{margin-bottom:0}

/* ----- lijst met vinkjes in een licht vlak ----- */
.voorwie{padding:0 var(--lijn) var(--sectie)}
.voorwie-kaart{background:var(--geel-licht);border:1px solid rgba(184,145,46,.3);
  border-radius:var(--radius);padding:40px 42px}
.voorwie h2{margin:0 0 26px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.voorwie-kaart h3{margin:0 0 22px;font-weight:600;font-size:var(--t-h3)}
.voorwie-kaart .opbrengst-lijst{max-width:none;color:#54486a}
.voorwie-kaart .opbrengst-lijst li{color:#54486a}

/* ----- praktische gegevens los, zonder kaart -----
   Op een korte pagina is een kaart om drie regels heen te veel omhaal. De
   regels staan op de uitlijnlijn met een haarlijn ertussen.                */
.praktisch-los{padding:0 var(--lijn) var(--sectie)}
.praktisch-los h2{margin:0 0 22px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.praktisch-los dl{margin:0;max-width:820px}
.praktisch-los dl > div{display:grid;grid-template-columns:190px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid rgba(74,58,104,.14)}
.praktisch-los dl > div:first-child{border-top:1px solid rgba(74,58,104,.14)}
.praktisch-los dt{font-weight:600;color:var(--paars-donker);font-size:var(--t-body)}
.praktisch-los dd{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-soft)}
.praktisch-los dd a{color:var(--paars-donker)}

/* ----- losse zin in de serif-letter boven een tekstblok ----- */
.openzin{margin:0 0 22px;font-family:var(--font-serif);font-style:italic;
  font-size:var(--t-lead);line-height:1.5;color:var(--paars-donker)}

@media(max-width:900px){
  .drieluik--twee{grid-template-columns:1fr}
  .voorwie-kaart{padding:28px 24px}
  .praktisch-los dl > div{grid-template-columns:1fr;gap:4px;padding:14px 0}
}

/* ----- liggende fotostrook over de volle breedte -----
   Laag gehouden, zodat het een adempauze is en geen tweede kop. De onderkant
   vervaagt naar de paginakleur, zodat er geen harde rand ontstaat.        */
.foto-strook{position:relative;height:300px;overflow:hidden;background:var(--bg);
  margin-bottom:var(--sectie)}
.foto-strook img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.foto-strook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
  background:linear-gradient(180deg,rgba(249,248,250,0),var(--bg))}
@media(max-width:900px){ .foto-strook{height:190px} }

/* ----- speldje voor de locatie ----- */
.speld{display:inline-flex;align-items:center;gap:8px}
.speld svg{width:16px;height:16px;flex:none;color:var(--salie)}

/* ----- kop boven een blok met twee vlakken ----- */
.blokkop{margin:0 0 26px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.drieluik--in-sectie{padding:0}
.drieluik h3{margin:0 0 12px;font-weight:600;font-size:var(--t-h3)}

/* ----- kop met de foto ernaast -----
   Tekst links op de uitlijnlijn, liggend beeld van 4 bij 3 rechts. Een
   liggende uitsnede laat de ruimte zien waar het over gaat; bij een vierkant
   of staand beeld houd je van een groep een paar mensen over.
   Het vlak eronder is hetzelfde kleurverloop als op de homepage.          */
.hero-duo{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 460px;
  gap:56px;align-items:center;padding:80px var(--lijn) 70px;
  background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)}
/* Het overgangsvlak van de menubalk blijft absoluut geplaatst; al het andere
   komt erboven te liggen.                                                  */
.hero-duo > :not(.kop-fade){position:relative;z-index:1}
.hero-duo h1{margin:0 0 24px;font-weight:600;font-size:var(--t-display);
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
/* text-wrap:balance verdeelt de regels zo gelijk mogelijk, zodat er onderaan
   geen los stukje van drie woorden achterblijft.                           */
.hero-duo .hero-lead{margin:0;max-width:520px;text-wrap:balance;
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);
  line-height:1.5;color:var(--ink-soft)}
.hero-duo .btn{margin-top:30px}
.hero-duo figure{margin:0}
.hero-duo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 46%;
  border-radius:var(--radius);box-shadow:0 18px 50px rgba(74,58,104,.16)}
@media(max-width:1100px){
  .hero-duo{grid-template-columns:1fr;gap:34px;padding:56px var(--lijn) 52px}
  .hero-duo img{max-width:520px}
}
@media(max-width:900px){
  .hero-duo{padding:44px var(--lijn) 44px}
}

/* De foto van de zithoek is staand; in het liggende kader valt daar een band
   uit. Op 42% van de vrije ruimte staat de stoel met de vacht in beeld, met de
   tuin erachter. Dezelfde waarde staat bij de aanbodkaart op de homepage, zodat
   je op beide plekken hetzelfde ziet.                                       */
.hero-duo img{object-position:50% 42%}