/* ==========================================================================
   werkwijze — 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)} }

/* ----- 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 op 1-op-1 sessies en bij de aanbodkaart
   op de homepage, zodat je de foto overal hetzelfde ziet.                    */
.hero-duo img{object-position:50% 42%}

/* ----- kleurvlak: staat nu niet meer in de pagina -----
   Sinds versie 68 staat er een foto in de kop in plaats van dit vlak. De regels
   blijven staan, zodat je het zonnetje zo weer terug kunt zetten.
   ----- oorspronkelijke uitleg -----
   Dezelfde afmetingen en dezelfde ronding als de foto op de andere twee
   subpagina's, zodat de vier koppen hetzelfde ritme houden. Het zonnetje uit
   het logo staat er groot en zacht in.
   Het bronbestand van het zonnetje krijgt een ruimere viewBox mee: de
   oorspronkelijke sneed de punten van de stralen rechts en onderaan af.   */
.kleurvlak{width:100%;aspect-ratio:4/3;border-radius:var(--radius);position:relative;
  overflow:hidden;box-shadow:0 18px 50px rgba(74,58,104,.10);
  background:linear-gradient(140deg,#e9e2f5 0%,#f6eeda 100%)}
.kleurvlak img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:64%;max-width:64%;object-fit:contain;opacity:.5}
@media(max-width:1100px){ .kleurvlak{max-width:520px} }