#mini-onboarding {display: flex;flex-flow: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.4); justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(5px);}
#ob-cont {width: 500px; background: #fff; padding: 20px; border-radius: var(--lz-radius-small);box-shadow: 0 0 50px rgba(0,0,0,.3);color: var(--lz-darkblue);}
#mini-onboarding h6 {text-align: center; font-size: 13px; font-weight: 400; background: #f4f4f4; padding: 5px 10px; border-radius: 6px;}
.ob-header > span {font-weight: 600;font-size: 14px;}

.ob-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.lz-ob-logo {width: 120px;position: absolute;top: 20px;z-index: 2;}
span.ma {display: flex;align-items: center;margin-bottom: 20px;}
span.ma img {height: 120px;width: auto;margin-right: 20px;}
span.ma h5 {font-size: 14px;font-weight: 400;}
span.ma h5 i.fa-heart {color: red;}
span.ma h5 span {display: block;font-size: 18px;font-weight: bold;padding-bottom: 3px;}
.ma p {margin-top: 10px;line-height: 16px;font-style: italic;font-size: 13px;color: var(--lz-green);}

#mini-onboarding .swiper-slide h3 {font-weight: 600;font-size: 18px;display: flex;justify-content: space-between;}
#mini-onboarding .swiper-slide h3 .ob-steps {font-size: 12px;border-radius: 6px;font-weight: 400;width: 30px;}
.onboarding-options, .answers {display: flex;flex-flow: column;margin-top: 10px;}
.onboarding-options button, .answers button {position: relative; cursor: pointer;border: none;height: 38px;border-radius: 6px;margin-bottom: 10px;font-family: 'Poppins';font-size: 14px;text-align: left;padding: 0 15px;transition: all .2s;}
.onboarding-options button:hover, .answers button:hover {background: #ddd;}
.onboarding-options button::after, .answers button::after {font-family: 'Font Awesome 5 Pro';content: '\f105'; position: absolute;right: 15px;top: 9px;font-size: 18px;transition: all .2s;}
.ntflx .onboarding-options button::after, .ntflx .answers button::after {font-family: 'Font Awesome 6 Pro';font-size: 13px;top: 12px;}
.onboarding-options button:hover::after, .answers button:hover::after {right: 10px;}
.onboarding-options button:last-child, .answers button:last-child {margin-bottom:0;}

.routing-actions {margin-top: 15px;}
.onboarding-cta {background: var(--lz-green); color: #fff; height: 38px; display: inline-block; border-radius: 6px; font-size: 16px; line-height: 38px; padding: 0 15px; margin: 0 5px 5px 0;transition: all .2s;}
.onboarding-cta:hover {background: #23b220;}
.swiper-slide[data-step="routing"] h3 {margin-bottom: 10px;}
.swiper-slide[data-step="routing"] p {line-height: 16px;}

#who {position: relative;max-width: 500px; background: url('https://catering.lieferzwerge.de/upload/iStock-1181396290-min.jpg') no-repeat center center / cover; width: 100%;overflow: hidden; height: 200px; border-radius: 10px; margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: flex-end; color: #fff; padding: 20px; font-size: 18px;}
#who::after {content: '';background: linear-gradient(20deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 70%);height: 100%;width: 100%;position: absolute;left: 0;top: 0;}
#who > div {position: relative;z-index: 1;}
#who h2 {font-weight: 600;font-size: 24px;max-width: 295px;line-height: 24px;}
#who p {margin: 10px 0 0;font-size: 13px;line-height: 16px;max-width: 250px;}


/* smartphone */
@media screen and (min-width: 300px) and (max-width: 540px) {
#ob-cont {width: calc(100% - 30px);max-height: calc(100% - 210px);overflow: auto;}
#mini-onboarding h6 span {display: block;margin: 0 0 5px;font-size: 15px;}
#mini-onboarding h6 {text-align: right;font-size: 10px;}
.ma p {line-height: 14px;font-size: 11px !important;}
#who {height: 130px;max-width: calc(100% - 30px);padding: 15px;}
#who h2 {font-size: 16px;max-width: 220px;line-height: 18px;}
#who p {margin: 5px 0 0;font-size: 11px;line-height: 14px;}
.lz-ob-logo {width: 100px;top: 15px;}
span.ma img {height: 100px;}
span.ma h5 {font-size: 13px;}
span.ma h5 span {font-size: 16px;}

.onboarding-options button, .answers button {height: auto;padding: 8px 15px;}

}