/* Mandarino als ontvanger en gids op mandarijn.ai. Vlak, geen schaduwen of verlopen. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* eerste scherm: alleen Mandarino */
.m-stage{position:relative;min-height:calc(100vh - var(--m-nav,64px));min-height:calc(100svh - var(--m-nav,64px));background:#F6F3EE;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px 64px;overflow:hidden}
.m-stage::before{content:'';position:absolute;right:-8%;top:-14%;width:42vw;max-width:520px;aspect-ratio:1;border-radius:0 50% 0 50%;background:#E6EEF8}
.m-podium{position:relative;width:min(300px,52vw);aspect-ratio:1/1.05;display:flex;align-items:flex-end;justify-content:center;flex:none;margin-bottom:8px;max-height:38vh}
.m-halo{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;aspect-ratio:1;border-radius:50%;background:#FFE6D2}
.m-podium img{position:relative;height:100%;width:auto;animation:m-zweef 3.4s ease-in-out infinite}
.m-podium img.m-pop{animation:m-pop .5s ease,m-zweef 3.4s .5s ease-in-out infinite}
.m-podium img.m-zwaai{transform-origin:50% 100%;animation:m-zwaai 1.3s ease-in-out 2}
@keyframes m-zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes m-pop{0%{transform:scale(.88) rotate(-3deg)}60%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}
@keyframes m-zwaai{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.m-bel{position:relative;max-width:660px;width:100%}
.m-bel p{margin:0 0 14px;font-size:clamp(18px,2.6vw,23px);line-height:1.35;font-weight:600;color:#001E50;min-height:2.7em}
.m-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.m-q button,.m-bel form button,.m-guide .gc a{font:inherit;font-size:14.5px;font-weight:600;background:#fff;border:2px solid #FF6B00;color:#1B2A41;padding:10px 14px;border-radius:0 14px 0 14px;cursor:pointer;text-decoration:none;line-height:1.3;display:inline-block}
.m-q button:hover,.m-bel form button:hover,.m-guide .gc a:hover{background:#FF6B00;color:#fff}
.m-q button.pri,.m-guide .gc a.pri{background:#FF6B00;color:#fff}
.m-q button.stil{border-color:transparent;text-decoration:underline;font-weight:500;color:#5B677A}
.m-bel form{display:flex;gap:8px;justify-content:center;margin-top:10px}
.m-bel form input{font:inherit;font-size:16px;padding:10px 12px;border:2px solid rgba(0,30,80,.3);border-radius:10px;min-width:0;flex:1;max-width:300px}
.m-bel form[hidden]{display:none}
.m-scroll{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;font-weight:600;color:#5B677A;text-decoration:none;animation:m-wip 1.8s ease-in-out infinite}
@keyframes m-wip{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.m-q button:focus-visible,.m-guide button:focus-visible,.m-guide a:focus-visible,.m-bel input:focus-visible,.m-scroll:focus-visible{outline:2px solid #FF6B00;outline-offset:2px}
.m-k{display:none}
/* Telefoon: eigen opzet, geen verkleinde desktop. Vraag en alle antwoorden vullen precies een scherm;
   Mandarino krijgt de ruimte die overblijft (svh = zichtbaar scherm met de Safari-balken erbij). */
@media(max-width:620px){
  .m-l{display:none}.m-k{display:inline}
  .m-stage{height:calc(100vh - var(--m-nav,56px));height:calc(100svh - var(--m-nav,56px));min-height:0;justify-content:flex-start;padding:6px 16px calc(10px + env(safe-area-inset-bottom,0px));overflow-y:auto}
  .m-stage::before{display:none}
  .m-podium{flex:1 1 0;min-height:64px;width:100%;max-height:none;aspect-ratio:auto;margin:0 0 6px}
  .m-podium img{height:100%;width:auto;max-width:100%;object-fit:contain}
  .m-bel{flex:none}
  .m-bel p{font-size:18px;line-height:1.3;min-height:0;margin:0 0 10px}
  .m-q{grid-template-columns:minmax(0,1fr);gap:7px}
  .m-q.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-q button,.m-bel form button{min-height:44px;font-size:15px;padding:8px 12px;display:flex;align-items:center;justify-content:center;text-align:center}
  .m-q button.stil{min-height:40px}
  .m-bel form input{max-width:none}
  .m-scroll{position:static;flex:none;margin:4px 0 0;font-size:12.5px;padding:4px}
}
/* korte schermen (iPhone SE, liggend): compacter, en de scrol-hint vervalt */
@media(max-width:620px) and (max-height:620px){
  .m-scroll{display:none}
  .m-q{gap:6px}
  .m-q button,.m-bel form button{min-height:40px;font-size:14.5px;padding:6px 10px}
  .m-bel p{font-size:17px;margin-bottom:8px}
}

/* menu: op telefoon en tablet een knop met een uitklapmenu in plaats van een rij die uit beeld loopt */
.m-burger{display:none;width:44px;height:44px;margin-left:2px;border:0;background:transparent;color:#001E50;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none}
.m-burger svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.m-burger:focus-visible{outline:2px solid #FF6B00;outline-offset:2px}
@media(max-width:900px){
  html.m-js .erp-navbar .nav{flex-wrap:nowrap;gap:6px 8px}
  html.m-js .m-burger{display:inline-flex}
  html.m-js .erp-navbar .nav .btn-sm{margin-left:auto}
  html.m-js .erp-navbar .nav-links{display:none!important;position:absolute;left:0;right:0;top:100%;order:0;flex-direction:column;gap:0;width:auto;background:#F6F3EE;border-bottom:1px solid rgba(0,30,80,.15);padding:4px 16px 10px;overflow:visible;margin:0}
  html.m-js .erp-navbar.open .nav-links{display:flex!important}
  html.m-js .erp-navbar .nav-links a{display:block;padding:14px 4px;font-size:17px;border-bottom:1px solid rgba(0,30,80,.08)}
  html.m-js .erp-navbar .nav-links li:last-child a{border-bottom:0}
}
@media(max-width:600px){
  html.m-js .erp-navbar{padding-block:6px}
  html.m-js .erp-navbar .wm-d{height:30px}
  html.m-js .erp-navbar .nav .btn-sm{padding:9px 12px;font-size:13.5px;min-height:40px}
}

/* hero van de homepage zonder dubbele Mandarino */
html.m-actief .hero-grid{grid-template-columns:minmax(0,1fr)}
html.m-actief .held{display:none}

/* gids op elke plek */
.m-guide{position:fixed;right:14px;bottom:14px;z-index:70;width:min(350px,calc(100vw - 28px));background:#fff;border:2px solid #001E50;border-radius:0 18px 0 18px;display:none;flex-direction:column;font-family:inherit}
.m-guide.aan{display:flex}
.m-guide .gk{display:flex;gap:10px;align-items:center;padding:8px 10px;background:#001E50;color:#fff;border-radius:0 14px 0 0}
.m-guide .gk img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;background:#FFE6D2;flex:none}
.m-guide .gk b{font-size:13px}.m-guide .gk small{display:block;color:#C5D2E8;font-size:11px}
.m-guide .gk button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 6px}
.m-guide .gb{padding:10px 12px;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.m-guide .gs{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#FF6B00}
.m-guide .gt{margin:0;font-size:13.5px;font-weight:600;color:#001E50;line-height:1.35;animation:m-gin .35s ease}
@keyframes m-gin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.m-guide .gc{display:flex;flex-wrap:wrap;gap:6px}
.m-guide .gc button,.m-guide .gc a{font-size:12.5px;padding:6px 10px;border-radius:0 10px 0 10px;border-width:1.5px}
.m-guide .gc button{font:inherit;font-size:12.5px;font-weight:600;background:#fff;border:1.5px solid #FF6B00;color:#1B2A41;cursor:pointer;line-height:1.3}
.m-guide .gc button:hover{background:#FF6B00;color:#fff}
.m-guide .gc button.pri{background:#FF6B00;color:#fff}
.m-guide .gc button.stil{border-color:transparent;color:#5B677A;text-decoration:underline;font-weight:500}
.m-guide.klein .gb{display:none}
.m-guide.klein{width:auto}
@media(max-width:620px){.m-guide{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100vw - 20px)}.m-guide.klein{width:auto}.m-guide.klein .gk{padding:6px 8px 6px 6px}.m-guide.klein .gk small{display:none}.m-guide .gb{max-height:40vh;max-height:40svh}.m-guide .gc button,.m-guide .gc a{min-height:40px;font-size:13.5px;padding:8px 12px}.m-guide .gk button{min-width:40px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.m-podium img,.m-scroll,.m-guide .gt{animation:none!important}}

/* de hero hoeft het logo en de payoff niet te herhalen: die staan in het menu */
html.m-actief .onderteken{display:none}

/* tikvlakken op telefoon en tablet: minstens ca. 40 px hoog */
@media(max-width:900px){
  .f-links a,.f-legal a,.f-legal .linkbtn{display:inline-block;padding:11px 2px;min-height:40px}
  .f-links,.f-legal{gap:0 16px}
  .kopieer{min-height:40px;padding:10px 14px}
  .stapel-knop{padding-block:8px}
  .linkbtn{padding-block:8px}
  .telnr{display:inline-block;padding-block:6px}
  .erp-chip,.erp-wissel button{min-height:40px}
}