/* ==========================================================================
   STUDIO GLINSTERING — gedeelde opmaak van de subpagina's (versie 56)

   De kop met de foto of het kleurvlak ernaast, de dichtere maatvoering van
   110px, de vlakken met de zachte tinten, de praktische gegevens en de lijst
   met vinkjes. Wordt geladen op Hoe ik werk, 1-op-1 sessies, Opstellingendag,
   Agenda en Privacy, en dus niet op de homepage, Over mij en Contact.
   ========================================================================== */


a.btn-primary:hover,a.btn-primary:focus-visible{transform:translateY(-3px);box-shadow:0 12px 32px rgba(115,97,171,.42)}
.over-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;border-radius:36px}

@media(max-width:900px){
  :root{--lijn:24px}
  .btn{min-width:0;width:100%;min-height:66px;font-size:17px}
  .kolkop{white-space:normal}
  :root{--t-display:38px;--t-h2:26px;--t-lead:20px;--t-h3:19px;--t-body:16px;--sectie:76px}
  .site-header{padding:16px var(--lijn)}
  .main-nav{display:none}
  .menu-toggle{display:flex}
  .mobile-menu{display:flex}
  .hero-home{padding:44px var(--lijn) 52px}
  .foto-bijschrift{position:static;right:0;margin-top:20px}
  .hero-foto{max-width:320px;margin:36px auto 34px}
  .kop-fade{height:72px}
  .section{padding:0 var(--lijn) var(--sectie)}
  .cta{padding:56px var(--lijn) 48px}
  .section-prose{padding:var(--sectie) var(--lijn)}
  .welkom{grid-template-columns:1fr;gap:30px;padding:var(--sectie) var(--lijn)}
  .welkom-kol{padding:0}
  .welkom-links{border-right:none;border-bottom:1px solid rgba(74,58,104,.16);padding-bottom:30px}
  .kolkop{min-height:0}
  .card-grid.cols-2{grid-template-columns:1fr}
  .aanbod-kaart{grid-template-columns:1fr}
  .aanbod-foto img{aspect-ratio:16/9;min-height:0}
  .aanbod-tekst{padding:24px 24px 28px}
  .aanbod-inhoud{padding:30px 26px 34px}
  .band{margin:0 0 var(--sectie);padding:56px var(--lijn)}

  .over-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .over-foto{max-width:300px;margin:0 auto}

  .fit-card{padding:32px 26px}
  .site-footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:24px var(--lijn)}
  .site-footer > :first-child,.site-footer > :last-child{justify-self:center}
}

/* ---- tijdelijk: hulplijnen om de uitlijning te controleren ---- */
.hulplijn{position:absolute;left:0;right:0;height:0;border-top:1px dashed #d0342c;z-index:60;display:none}
.rechterlijn{position:absolute;top:0;bottom:0;right:var(--lijn);width:0;border-right:1px dashed #2f6b3c;z-index:60;display:none}
body.lijnen .rechterlijn{display:block}
.hulplijn::after{content:attr(data-label);position:absolute;right:8px;top:-20px;font-size:11px;
  font-weight:600;color:#d0342c;background:#fff;padding:2px 8px;border-radius:100px}
body.lijnen .hulplijn{display:block}
body.lijnen .hero-foto img{outline:1px dashed #2f6b3c;outline-offset:2px}
.lijnknop{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;gap:8px}
/* ---- telefoonweergave: zet de pagina in een kolom van 390px ---- */
body.telefoon{background:#3a3346}
body.telefoon > header,body.telefoon > nav,body.telefoon > main,body.telefoon > footer{
  max-width:390px;margin-left:auto;margin-right:auto}
body.telefoon > header{position:static}
body.telefoon{--lijn:24px;--t-display:34px;--t-h2:26px;--t-lead:19px;--t-h3:19px;--sectie:66px}
body.telefoon .main-nav{display:none}
body.telefoon .menu-toggle{display:flex}
body.telefoon .hero-home{display:block;padding:44px var(--lijn) 52px}
body.telefoon .hero-tekst{padding:0}
body.telefoon .hero-foto{position:static;padding:0;max-width:300px;margin:36px auto 34px}
body.telefoon .foto-kader{position:relative;right:auto;height:auto;max-width:none}
body.telefoon .foto-bijschrift{white-space:normal;max-width:88%;text-align:center;
  font-size:10.5px;letter-spacing:.14em;padding:8px 16px}
body.telefoon .hero-foto img{border-radius:44px}

body.telefoon .welkom{grid-template-columns:1fr;gap:30px}
body.telefoon .welkom-kol{padding:0}
body.telefoon .welkom-links{border-right:none;border-bottom:1px solid rgba(74,58,104,.16);padding-bottom:30px}
body.telefoon .kolkop{min-height:0}
body.telefoon .aanbod-kaart{grid-template-columns:1fr}
body.telefoon .aanbod-foto img{aspect-ratio:16/9;min-height:0}
body.telefoon .over-grid{grid-template-columns:1fr;gap:28px}
body.telefoon .over-foto{max-width:280px;margin:0 auto}
body.telefoon .card-grid.cols-2{grid-template-columns:1fr}
body.telefoon .lijnknop{z-index:300}
.lijnknop button{font-family:var(--font-sans);font-size:13px;font-weight:600;border:none;cursor:pointer;
  background:var(--paars-donker);color:#fff;padding:12px 18px;border-radius:100px;
  box-shadow:0 6px 20px rgba(44,36,56,.28)}

/* ======================================================================
   Alleen voor deze pagina
   ====================================================================== */

/* ----- hero van een subpagina: foto links, tekst rechts -----
   De foto staat links tegen de uitlijnlijn, de tekst begint op de hartlijn van
   de pagina. Dat is het spiegelbeeld van de hero op de homepage, zodat de twee
   pagina's naast elkaar niet hetzelfde zijn maar wel hetzelfde ritme houden. */
.hero-sub{position:relative;overflow:hidden;display:grid;grid-template-columns:46% 54%;
  align-items:center;gap:0;padding:84px 0 104px;
  background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)}
.hero-sub-tekst{padding:0 var(--lijn) 0 52px;position:relative;z-index:1}
/* 44px in plaats van de 56px van de homepage: deze kop is 74 tekens en dat
   is bijna vier keer zo lang als "Ergens voel je: het kan anders". Een lange
   kop op displaygrootte wordt een muur in plaats van een zin.             */
.hero-sub h1{margin:0 0 24px;font-weight:600;font-size:44px;line-height:1.2;
  letter-spacing:-.02em;max-width:640px;text-wrap:balance}
.hero-sub .hero-lead{margin:0;max-width:600px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.kader{margin:0;position:relative;z-index:1;display:flex;justify-content:flex-start;
  padding-left:var(--lijn);min-width:0}
.kader img{width:100%;max-width:430px;aspect-ratio:1/1;object-fit:cover;object-position:50% 42%;
  border-radius:36px;box-shadow:0 18px 50px rgba(74,58,104,.16)}

/* ----- het lange verhaal ----- */
.verhaal{padding:var(--sectie) var(--lijn)}
.verhaal-kolom{max-width:var(--prose)}
.verhaal h2{margin:52px 0 14px;font-weight:600;font-size:var(--t-h3);line-height:1.35;
  color:var(--paars-donker)}
.verhaal h2:first-of-type{margin-top:0}
.verhaal p{margin:0 0 20px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.verhaal p:last-child{margin-bottom:0}
.verhaal em{font-style:italic}

/* ----- twee kaarten ----- */
.kaarten{padding:0 var(--lijn) var(--sectie)}
.kaarten .card-grid{max-width:none}

@media(max-width:1250px){
  .hero-sub{grid-template-columns:1fr;padding:64px var(--lijn) 84px;gap:40px}
  .hero-sub-tekst{padding:0}
  .kader{padding-left:0;justify-content:flex-start}
  .kader img{max-width:380px}
}
@media(max-width:900px){
  .hero-sub{padding:44px var(--lijn) 56px;gap:34px}
  .hero-sub h1{font-size:30px}
  .kader{justify-content:center} .kader img{max-width:300px;border-radius:28px}
  .verhaal{padding:var(--sectie) var(--lijn)}
  .verhaal h2{margin-top:40px}
  .kaarten{padding:0 var(--lijn) var(--sectie)}
}



/* ======================================================================
   v55 — onderdelen die in v54 nog niet voorkwamen
   Alles is opgebouwd uit de bestaande zeven lettergroottes en de bestaande
   kleuren. Er komt geen nieuwe waarde bij.
   ====================================================================== */

/* Gele kaart: dezelfde tint als de menubalk en de footer, zodat een blok dat
   praktische informatie draagt zich onderscheidt zonder een nieuwe kleur. */
.card.card-geel{background:var(--geel-licht);border-color:rgba(184,145,46,.3)}

/* Drie kolommen. v54 kende alleen cols-2; bij zes korte kaarten geeft drie
   naast elkaar rustiger rijen dan twee. */
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* ----- citaatband met inhoud links (band-left) -----
   De band uit v54 is gecentreerd en draagt één zin. Deze variant draagt een
   kop met drie stappen en leest daarom van links naar rechts, op dezelfde
   uitlijnlijn als de rest van de pagina. Kleur en schijnsel blijven gelijk,
   zodat het herkenbaar dezelfde band is. */
.band-left{text-align:left}
.band-left h2{margin:0 0 40px;font-weight:600;font-size:var(--t-h2);
  line-height:1.25;letter-spacing:-.01em;color:var(--paars-donker)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.stappen > div{position:relative}
/* Geen streepje boven de stappen: de kop van elke stap is genoeg om de drie
   uit elkaar te houden. */
.stap-titel{margin:0 0 10px;font-size:var(--t-h3);font-weight:600;color:var(--paars-donker)}
.stappen p{margin:0;font-size:var(--t-body);line-height:1.7;color:#4a3f5c}

/* ----- invalshoeken -----
   Drie lange stukken tekst onder elkaar hebben een rustpunt nodig, anders
   wordt het één muur. Elk stuk begint met een bolletje en eindigt met een
   zin in de serif-letter; daartussen loopt gewone broodtekst in de
   tekstkolom van 680px. Een haarlijn scheidt de stukken. */
.invalshoeken{padding:0 var(--lijn) var(--sectie)}
.invalshoek{max-width:var(--prose);padding-bottom:56px;margin-bottom:56px;
  border-bottom:1px solid rgba(74,58,104,.14)}
.invalshoek:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.invalshoek h2{margin:0 0 16px;font-weight:600;font-size:var(--t-h2);
  line-height:1.25;letter-spacing:-.01em}
.invalshoek p{margin:0 0 20px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.invalshoek .orb{margin-bottom:22px}
/* Slotzin van een invalshoek: serif, cursief, met een streepje in saliegroen
   ervoor. Geen tweede citaatband, want dan zou de pagina er vier krijgen. */
.invalshoek-slot{margin:28px 0 0;padding-left:22px;border-left:2px solid var(--salie-licht);
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);
  line-height:1.5;color:var(--paars-donker)}
.orb-geel{background:radial-gradient(circle at 30% 30%,#f7e3a6,var(--geel))}
.orb-groen{background:radial-gradient(circle at 30% 30%,#c9dccd,var(--salie))}

/* ----- opbrengstkaarten ----- */
.opbrengst{padding:0 var(--lijn) var(--sectie)}
.opbrengst .card{padding:34px 32px 36px}
.opbrengst .card h3{margin:0 0 10px;font-weight:600;font-size:var(--t-h3)}
.opbrengst .card p{font-size:var(--t-body);line-height:1.7}
.opbrengst-stip{width:12px;height:12px;border-radius:50%;background:var(--salie);margin-bottom:20px}

/* ----- praktische gegevens in een kaart ----- */
.praktisch{padding:44px 42px}
.praktisch h2{margin:0 0 8px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.praktisch-intro{margin:0 0 22px;font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}
.praktisch dl{margin:0;display:grid;gap:0}
/* Twee kolommen: het woord links, het gegeven rechts. Elke regel krijgt een
   haarlijn eronder, zodat je oog per regel kan lezen zonder kader. */
.praktisch dl > div{display:grid;grid-template-columns:190px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid rgba(184,145,46,.28)}
.praktisch dl > div:last-child{border-bottom:none}
.praktisch dt{font-weight:600;color:var(--paars-donker);font-size:var(--t-body)}
.praktisch dd{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-soft)}
.praktisch dd a{color:var(--paars-donker)}
.praktisch .btn{margin-top:28px}

/* ----- lijst met vinkjes ----- */
.check-lijst{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.check-lijst li{position:relative;padding-left:32px;font-size:var(--t-body);
  line-height:1.7;color:var(--ink-soft)}
.check-lijst li::before{content:"";position:absolute;left:2px;top:9px;width:11px;height:6px;
  border-left:2px solid var(--salie);border-bottom:2px solid var(--salie);
  transform:rotate(-45deg)}

@media(max-width:1100px){
  .stappen{grid-template-columns:1fr;gap:30px}
  .card-grid.cols-3{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .card-grid.cols-3{grid-template-columns:1fr}
  .invalshoeken{padding:0 var(--lijn) var(--sectie)}
  .invalshoek{padding-bottom:40px;margin-bottom:40px}
  .praktisch{padding:30px 26px}
  .praktisch dl > div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .opbrengst{padding:0 var(--lijn) var(--sectie)}
}

/* ----- hero met de tekst in het midden -----
   Geen foto, geen kolommen: kicker, kop en ondertitel staan onder elkaar op
   de hartlijn van de pagina. De achtergrond is hetzelfde verloop als op de
   homepage, zodat de bovenkant van elke pagina herkenbaar blijft. De maten
   komen uit dezelfde zeven stappen: kop op --t-display, ondertitel op
   --t-lead, kicker op 14px.                                               */
.hero-mid{position:relative;overflow:hidden;text-align:center;
  padding:104px var(--lijn) 116px;
  background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)}
/* Alleen de tekst komt boven het overgangsvlak te liggen. Het vlak zelf moet
   absoluut geplaatst blijven; zet je hier "> *", dan valt het terug in de
   tekststroom en zie je het als een geel blok midden in de hero.          */
.hero-mid > :not(.kop-fade){position:relative;z-index:1}
.hero-mid .kicker{margin:0 0 22px}
.hero-mid h1{margin:0 auto 24px;max-width:15ch;text-wrap:balance}
/* De ondertitel staat in de serif-letter, net als de zin onder de kop in het
   contactblok. Dat is in v54 al de vorm voor een gecentreerde ondertitel,
   dus er komt geen nieuwe stijl bij.                                       */
.hero-mid .hero-lead{margin:0 auto;max-width:640px;text-wrap:balance;
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);
  line-height:1.5;color:var(--ink-soft)}
/* Een langere kop (bijvoorbeeld op de opstellingendag) mag breder lopen. */
.hero-mid.hero-mid--breed h1{max-width:22ch}
@media(max-width:900px){
  .hero-mid{padding:56px var(--lijn) 64px}
  .hero-mid h1,.hero-mid.hero-mid--breed h1{max-width:none}
}

/* ======================================================================
   Dichter op elkaar, zoals de site nu online staat
   v54 zette de sectie-afstand van 110 naar 140px. Op een pagina met veel
   tekst geeft dat lucht, maar op een korte pagina valt alles uit elkaar.
   Hier gaat het terug naar de 110px van de huidige site, met de hero op
   dezelfde maat als daar: 80px erboven, 70px eronder.
   ====================================================================== */
:root{--sectie:110px}
.hero-mid{padding:80px var(--lijn) 70px}
/* De inhoud begint direct onder de hero; de 70px onderin de hero is de hele
   tussenruimte. Precies zoals nu online.                                  */
.agenda{padding:0 var(--lijn) var(--sectie)}
.band{padding:80px var(--lijn)}
.invalshoek{padding-bottom:44px;margin-bottom:44px}
.cta{padding:80px var(--lijn) 60px}
@media(max-width:900px){
  :root{--sectie:64px}
  .hero-mid{padding:48px var(--lijn) 44px}
  .band{padding:52px var(--lijn)}
  .cta{padding:52px var(--lijn) 44px}
}
@media(max-width:1150px){
  .main-nav{display:none}
  .menu-toggle{display:flex}
  .mobile-menu{display:flex}
}