/* Eén gedeelde achtergrondbron: het bestaande Zo werkt het-paneel. */
:root{--sf-brown-surface:url('assets/original/It7Xf87L4YVXV7D5AsJxl24Ak.png');--sf-brown-base:#281910}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Hero content"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="About Sofie"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Sofie story"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Zo werkt het panel"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="1:1 Online Coaching"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Community Result"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Footer"],
.framer-yG8Yw.framer-yG8Yw .sf-mobile-text,
.framer-yG8Yw.framer-yG8Yw .sf-mobile-copy,
.sf-stories,
.sooffit-intake-popup{
 background-color:var(--sf-brown-base)!important;
 background-image:var(--sf-brown-surface)!important;
 background-position:center!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
}
/* Vervang oude decoratieve achtergronden, met behoud van portret- en resultaatfoto's. */
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Zo werkt het panel"]>[data-framer-background-image-wrapper],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="1:1 Online Coaching"]>[data-framer-background-image-wrapper],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Community Result"]>[data-framer-background-image-wrapper],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Footer"]>[data-framer-background-image-wrapper]{display:none!important}
/* Het transparante intakeformulier laat dezelfde ondergrond doorschijnen. */
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Gratis kennismaking intake"]{background-color:var(--sf-brown-base)!important;background-image:var(--sf-brown-surface)!important;background-size:cover!important;background-position:center!important}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Gratis kennismaking intake"]>section{background:rgba(40,25,16,.32)!important}
@media(max-width:809px){
 .framer-yG8Yw.framer-yG8Yw .sf-mobile-copy{background-color:var(--sf-brown-base)!important;background-image:var(--sf-brown-surface)!important;background-size:cover!important}
}
/* Ook de resterende basiskleuren, knoppen en foto-overlays delen dezelfde textuur. */
.framer-yG8Yw.framer-yG8Yw [data-framer-name="SOOFFIT Hero"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Sooffit Approach"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Sofie portrait mobile"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Plan je gratis kennismaking"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Schedule Free Intake"],
.sf-stories .sf-pause{
 background-color:var(--sf-brown-base)!important;
 background-image:var(--sf-brown-surface)!important;
 background-size:cover!important;
 background-position:center!important;
}
/* Doorzichtige lagen: de foto blijft zichtbaar onder het gedeelde bruine verloop. */
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Hero chocolate overlay"],
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Photo contrast layer"]{
 background:var(--sf-brown-surface) center/cover no-repeat!important;opacity:.55!important;
}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Mobile app photo shade"]{
 background:var(--sf-brown-surface) center/cover no-repeat!important;opacity:.82!important;
}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Coaching photo gradient"]{
 background:var(--sf-brown-surface) center/cover no-repeat!important;
 mask-image:linear-gradient(180deg,transparent 0%,#000 62%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);opacity:.9!important;
}
.sf-stories.sf-stories:before{background:var(--sf-brown-surface) center/cover no-repeat!important;opacity:.6}
.sf-stories .sf-backdrop{background-color:transparent!important}
@media(max-width:809px){.sf-stories.sf-stories:before{opacity:.55}}

/* Desktop: heldere fotolagen en goed leesbare bediening. */
@media(min-width:810px){
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Hero content"]{background:transparent!important}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="About Sofie"]>[data-framer-background-image-wrapper]{mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,#000 65%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 38%,#000 65%)}
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Plan je gratis kennismaking"] p{color:#f7f3eb!important;--framer-text-color:#f7f3eb!important}
.framer-yG8Yw [data-framer-name="Coaching App"]{width:100%!important;max-width:100%!important;min-width:0!important}
.framer-yG8Yw [data-framer-name="App Showcase"]{min-width:0!important;width:100%!important;max-width:100%!important;min-height:580px!important}
.framer-yG8Yw [data-framer-name="App Heading"]{left:40px!important;right:auto!important;top:110px!important;width:45%!important;transform:none!important}
.framer-yG8Yw [data-framer-name="App Heading"] h2{font-size:clamp(32px,3vw,44px)!important;line-height:1.12!important}
.framer-yG8Yw [data-framer-name="App Introduction"]{position:absolute!important;left:40px!important;right:auto!important;top:240px!important;width:43%!important;height:auto!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:24px!important;align-items:flex-start!important}
.framer-yG8Yw [data-framer-name="Coaching App Label"],.framer-yG8Yw [data-framer-name="App Description"]{position:relative!important;left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;transform:none!important}
.framer-yG8Yw [data-framer-name="App functies"]{left:40px!important;right:auto!important;bottom:24px!important;width:44%!important;transform:none!important}
.framer-yG8Yw [data-framer-name="App functies"] p{white-space:normal!important;line-height:1.7!important}
}

@media(min-width:810px){
.framer-yG8Yw.framer-yG8Yw [data-framer-name="Sofie story"]{align-self:flex-start!important;margin-left:clamp(32px,4.4vw,64px)!important;width:calc(44% - 32px)!important;max-width:520px!important;padding:56px 0!important;background:transparent!important;box-sizing:border-box!important;height:auto!important}
}

/* Lichte kennismakingsknop op het donkere stappenplan. */
.framer-yG8Yw.framer-yG8Yw #journey [data-framer-name="Plan je gratis kennismaking"] {
 background: #f7f3eb !important;
 color: #3b3028 !important;
}
.framer-yG8Yw.framer-yG8Yw #journey [data-framer-name="Plan je gratis kennismaking"] p {
 color: #3b3028 !important;
 --framer-text-color: #3b3028 !important;
}