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

a.btn-primary:hover,a.btn-primary:focus-visible{transform:translateY(-3px);box-shadow:0 12px 32px rgba(115,97,171,.42)}
/* De kaart "Wat ik jou gun" draagt de klasse card-geel, maar die regel stond
   nergens in het bestand; de kaart bleef daardoor wit. Zelfde tint als de
   menubalk en de footer.                                                    */
.card.card-geel{background:var(--geel-licht);border-color:rgba(184,145,46,.3)}
.over-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;border-radius:36px}
@media(max-width:1150px){
}

@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)}
  .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)}

/* ----- kop met de foto ernaast -----
   Zelfde opzet als de andere subpagina's: tekst links op de uitlijnlijn, een
   liggend beeld van 4 bij 3 rechts. De foto is horizontaal gespiegeld, zodat
   de blik naar de tekst wijst in plaats van de pagina uit.
   De kop blijft hier op 44px staan en niet op de 56 van de andere pagina's:
   deze zin is 74 tekens en wordt op displaymaat een muur.                  */
.hero-duo{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 430px;
  gap:56px;align-items:center;padding:80px var(--lijn) 70px;
  background:linear-gradient(115deg,#f4eef8 0%,#faf3ea 48%,#fdf6e6 100%)}
.hero-duo > :not(.kop-fade){position:relative;z-index:1}
.hero-duo h1{margin:0 0 24px;font-weight:600;font-size:44px;line-height:1.2;
  letter-spacing:-.02em;max-width:640px;text-wrap:balance}
/* De inleiding is hier drie zinnen lang; die zet ik niet in de serif-cursief
   zoals op de kortere subpagina's, want dat leest bij deze lengte niet fijn. */
.hero-duo .hero-lead{margin:0;max-width:560px;font-size:var(--t-body);line-height:1.8;
  color:var(--ink-soft)}
.hero-duo figure{margin:0}
/* Vierkant en 430px breed, precies zoals in de vorige versie, met dezelfde
   uitsnede. Een liggend beeld sneed er te veel af. Alleen de kant is anders:
   de foto staat nu rechts en is gespiegeld, zodat de blik naar de tekst wijst. */
.hero-duo 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);
  transform:scaleX(-1)}
@media(max-width:1100px){
  .hero-duo{grid-template-columns:1fr;gap:34px;padding:56px var(--lijn) 52px}
  .hero-duo img{max-width:380px}
}
@media(max-width:900px){
  .hero-duo{padding:44px var(--lijn) 44px}
  .hero-duo h1{font-size:30px}
}

/* ----- het lange verhaal ----- */
/* Het verhaal is nu het laatste blok voor het contactblok. Met 140px onderaan
   plus de 88px die het contactblok zelf meebrengt viel er een gat van ruim 220px;
   daarom hier 24px, zodat de twee tegen elkaar aan blijven staan.          */
/* Het verhaal staat nu in twee stukken met de citaatband ertussen. Het eerste
   stuk eindigt strak boven de band, het tweede begint met 56px eronder en
   sluit met 24px aan op het contactblok: de band brengt zelf al 90px lucht mee
   en het contactblok 88.                                                    */
.verhaal{padding:var(--sectie) var(--lijn) 24px}
/* De citaatband is vervallen; de regels die de ruimte eromheen zetten ook. */
/* 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. Het blok staat dus in het midden, de tekst niet.              */
.verhaal-kolom{max-width:var(--prose);margin:0 auto;text-align:left}
.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 ----- */
/* De sectie met de twee kaarten is vervallen; de opmaak ervoor hoeft niet meer. */

@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}
}