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

/* Gold alleen voor a.btn-primary, terwijl de verstuurknop een <button> is.
   Daardoor veerde de WhatsApp-knop ernaast wel op en deze niet. Nu allebei,
   met dezelfde overshoot-curve.                                            */
a.btn-primary:hover,a.btn-primary:focus-visible,
button.btn-primary:hover,button.btn-primary:focus-visible{transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(115,97,171,.42)}
button.btn-primary{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
button.btn-primary:active{transform:translateY(-1px)}
.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: gecentreerd, zonder foto ----- */
.hero-mid{position:relative;overflow:hidden;text-align:center;padding:96px var(--lijn) 104px;
  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; met "> *" valt het terug in de tekststroom en
   zie je het als een geel blok onder de menubalk.                          */
.hero-mid > :not(.kop-fade){position:relative;z-index:1}
.hero-mid h1{margin:0 0 22px;font-weight:600;font-size:var(--t-display);line-height:1.12;letter-spacing:-.02em}
.hero-mid .hero-lead{margin:0 auto;max-width:720px;font-family:var(--font-serif);font-style:italic;
  font-size:var(--t-lead);line-height:1.5;color:var(--paars-donker);text-wrap:balance}

/* ----- formulier en gegevens naast elkaar -----
   Het verloop naar geel zit in dit blok zelf en loopt tot de onderrand, zodat
   hij precies aansluit op de footer en er geen naad tussen twee vlakken valt. */
/* Twee kaarten naast elkaar, zoals op de huidige site: het formulier op een
   licht doorschijnend vlak, de gegevens op geel. Het verloop naar de footer
   zit in de onderste 170px van dit blok zelf, dus onder de kaarten. Zo is er
   geen los element dat tegen de footer aan moet sluiten.                   */
/* align-items:stretch in plaats van start: de gele kaart loopt door tot de
   onderkant van het formulier, zodat de twee even lang zijn.               */
.contact{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:stretch;
  padding:88px var(--lijn) 190px;background-color:var(--bg);
  background-image:linear-gradient(180deg,var(--bg),var(--geel-licht));
  background-repeat:no-repeat;background-position:bottom;background-size:100% 170px}
.kaart-form{background:var(--kaart);border:1px solid rgba(142,124,195,.25);
  border-radius:var(--radius);padding:48px 46px;backdrop-filter:blur(6px);box-shadow:var(--schaduw)}
.kaart-info{background:var(--geel-licht);border:1px solid rgba(184,145,46,.3);
  border-radius:var(--radius);padding:48px 46px}
.form-intro{margin:0 0 30px;font-size:var(--t-body);line-height:1.75;color:var(--ink-soft)}
.veld{margin:0 0 22px}
.veld label,.veld legend{display:block;margin:0 0 8px;padding:0;font-size:var(--t-small);
  font-weight:600;color:var(--ink)}
.veld input[type=text],.veld input[type=email],.veld textarea{width:100%;font-family:var(--font-sans);
  font-size:var(--t-body);line-height:1.6;color:var(--ink);background:#fff;
  border:1px solid rgba(142,124,195,.35);border-radius:16px;padding:15px 18px;
  transition:border-color .2s,box-shadow .2s}
.veld textarea{min-height:170px;resize:vertical}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--knop-a);
  box-shadow:0 0 0 3px rgba(102,85,152,.18)}
.veld input::placeholder,.veld textarea::placeholder{color:var(--ink-mute)}
fieldset.veld{border:none;margin:0 0 22px;padding:0}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuze{position:relative;display:inline-flex}
.keuze input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:100px;
  font-size:var(--t-small);color:var(--ink-soft);background:#fff;
  border:1px solid rgba(142,124,195,.35);transition:background .2s,border-color .2s,color .2s}
.keuze input:checked + span{background:var(--salie);border-color:var(--salie);color:#fff;font-weight:600}
.keuze input:focus-visible + span{box-shadow:0 0 0 3px rgba(102,85,152,.25)}
.verplicht{color:var(--knop-b)}
.hint{margin:0 0 26px;font-size:var(--t-small);color:var(--ink-mute)}
.honing{position:absolute;left:-9999px}
.acties{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.acties .btn{min-width:0}
.btn-verstuur{min-width:260px}
/* Tweede knop in salie: het derde accent, en het onderscheidt zich van de
   hoofdknop zonder een nieuwe kleur te introduceren. Wit op #5f7364 haalt 4,9. */
.btn-salie{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-size:18px;font-weight:600;min-height:74px;padding:20px 30px;
  border-radius:100px;border:none;cursor:pointer;color:#fff;background:var(--salie);
  box-shadow:0 8px 26px rgba(95,115,100,.3);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
.btn-salie:hover,.btn-salie:focus-visible{transform:translateY(-3px);box-shadow:0 12px 32px rgba(95,115,100,.4)}
/* Regel waarin het formulier laat weten of het bericht is aangekomen. Leeg is
   hij onzichtbaar; role=status zorgt dat een schermlezer hem voorleest zodra
   er tekst in komt.                                                        */
.form-melding{margin:0 0 18px;font-size:var(--t-body);line-height:1.7;font-weight:600}
.form-melding:empty{display:none}
.form-melding.gelukt{color:#3f5e48}
.form-melding.mislukt{color:#8a2f3f}
.toestemming{margin:0;font-size:var(--t-small);line-height:1.7;color:var(--ink-mute)}
.toestemming a{color:var(--paars-donker)}

/* ----- rechterkolom ----- */
.gegevens{position:relative}
.groet{display:flex;align-items:center;gap:20px;margin:0 0 34px;padding:26px 28px;
  background:rgba(255,255,255,.72);border:1px solid rgba(142,124,195,.22);
  border-radius:var(--radius);box-shadow:var(--schaduw)}
.groet p{margin:0;font-family:var(--font-serif);font-style:italic;font-size:var(--t-h3);
  line-height:1.45;color:var(--paars-donker)}
.groet .naam{display:block;margin-top:10px;font-family:var(--font-sans);font-style:normal;
  font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--salie)}
/* De foto is vierkant en de cirkel ook, dus 'cover' sneed niets weg: de donkere
   achtergrond boven het haar liep gewoon mee. Het beeldje is nu een venster met
   de foto 1,28x vergroot en 8,5px omhoog geschoven. Daarmee valt de donkere
   band buiten de cirkel. Op 1,15x in plaats van 1,28x is de uitsnede ruimer,
   zodat er meer van het hoofd te zien is.                                   */
.groet .portret{width:110px;height:110px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:0 6px 18px rgba(74,58,104,.18)}
.groet .portret img{width:100%;height:100%;object-fit:cover;display:block;
  transform:translateY(-5px) scale(1.15)}
.gegevens h2{margin:0 0 22px;font-weight:600;font-size:var(--t-h2);letter-spacing:-.01em}
.gegevens dl{margin:0}
/* Zonder scheidingslijnen: de kopjes in kleinkapitaal zetten de regels al uit
   elkaar, en vier lijnen in een klein vlak maakten het rommelig. In plaats van
   de lijn draagt elke regel nu wat meer ruimte.                             */
.gegevens dl > div{padding:0 0 26px}
.gegevens dl > div:last-child{padding-bottom:0}
.gegevens dt{margin:0 0 4px;font-size:var(--t-kicker);letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--paars-donker)}
.gegevens dd{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-soft)}
.gegevens dd a{color:var(--paars-donker)}
.kaartlink{display:inline-block;margin-top:6px;font-size:var(--t-small);font-weight:600}
/* Speldje voor de locatie, dezelfde lijntekening als op de andere pagina's. */
.speld{display:inline-flex;align-items:center;gap:8px}
.speld svg{width:16px;height:16px;flex:none;color:var(--salie)}

@media(max-width:1100px){
  .contact{grid-template-columns:1fr;gap:26px}
}
@media(max-width:900px){
  .hero-mid{padding:52px var(--lijn) 60px}
  .contact{padding:52px var(--lijn) 150px;gap:22px}
  .kaart-form{padding:30px 24px}
  .kaart-info{padding:30px 24px}
  .groet{flex-direction:column;text-align:center;gap:16px}
  .acties .btn,.acties .btn-salie{width:100%}
}