/* Flexi Hiring — desktop design reproduction (artboard 1440 x 8553)
   Coordinates come straight from the Lanhu design spec. */

:root{
  --bg:#000;
  --ink:#fff;
  --muted:rgba(255,255,255,.6);
  --card:#1C1C1E;
  --blue:#4262FF;
  --red:#F45252;
  --hairline:rgba(255,255,255,.18);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{background:var(--bg)}

body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block}
a{color:inherit;text-decoration:none}

.stage{
  position:relative;
  width:100%;
  overflow:hidden;
  /* the artboard is scaled by --fit, so reserve the scaled height */
  height:calc(8553px * var(--fit, 1));
}

.page{
  position:relative;
  width:1440px;
  height:8553px;
  overflow:hidden;
  background:var(--bg);
  transform:translateX(var(--shift, 0px)) scale(var(--fit, 1));
  transform-origin:top left;
}

.page > section,
.page > header,
.page > footer{position:absolute;left:0;width:1440px}

/* ---------- glows ---------- */
.glow{position:absolute;width:830px;height:1009px;pointer-events:none;z-index:0}
.glow-right{left:1140px;top:1039px}
.glow-left{left:-500px;top:2510px}

/* ---------- nav ---------- */
.site-header{
  /* fixed so the nav stays on screen while the page scrolls.
     It lives outside .page (a fixed bar inside the scaled artboard would
     scroll away) and is scaled/centred with the same --fit / --shift vars. */
  position:fixed;
  top:21px;
  left:var(--shift, 0px);
  width:1440px;
  height:50px;
  z-index:80;
  background:#000;
  transform:scale(var(--fit, 1));
  transform-origin:top left;
}
.site-header::before{content:"";position:absolute;left:0;right:0;top:calc(-21px / var(--fit, 1));height:calc(21px / var(--fit, 1));background:#000}
.brand{position:absolute;left:80px;top:0}
.main-nav{
  position:absolute;left:479px;top:12px;
  display:flex;gap:60px;
  font-size:18px;line-height:27px;
  white-space:nowrap;
}
.main-nav a{opacity:1;transition:opacity .15s}
.main-nav a:hover{opacity:.7}
.btn-cta{
  /* 宽度跟着文字走：德语「Jetzt bewerben →」正好 180，法语/荷兰语更长就自己撑开，
     右下角固定不动、往左长，所以不会顶出画布 */
  position:absolute;right:80px;top:0;
  min-width:180px;padding:0 22px;height:50px;border-radius:25px;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:Helvetica,Arial,sans-serif;
  font-weight:700;font-size:16px;
  white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{top:171px;height:810px}
.hero-img{position:absolute;left:432px;top:0;width:1008px;height:810px}
.hero h1{
  position:absolute;left:115px;top:124px;width:780px;
  font-size:94px;line-height:102px;font-weight:400;letter-spacing:-.01em;
}
.hero-sub{
  position:absolute;left:115px;top:472px;width:264px;
  font-size:19px;line-height:30px;color:var(--muted);
}
.hero-arrow{position:absolute;left:403px;top:498px}

/* ---------- partners ---------- */
.partners{top:1081px;height:219px}
.partners-label{position:absolute;left:115px;top:0;font-size:34px;line-height:43px}
.pl{position:absolute;top:85px}
.pl-lazada{left:143px;width:182px;height:102px}
.pl-shopee{left:373px;width:182px;height:102px}
.pl-tokopedia{left:603px;width:182px;height:102px}
.pl-wayfair{left:833px;width:220px;height:102px}
.pl-google{left:1101px;top:52px;width:200px;height:167px}

/* ---------- intro ---------- */
.intro{top:1400px;height:217px}
.intro-title{
  position:absolute;left:116px;top:19px;width:530px;
  font-size:34px;line-height:43px;font-weight:700;
}
.intro-text{
  position:absolute;left:116px;top:138px;width:500px;
  font-size:19px;line-height:30px;color:var(--muted);
}
.intro-circles{position:absolute;left:720px;top:0;width:720px;height:217px}
.sphere-label{
  position:absolute;top:86px;
  font-size:30px;line-height:30px;color:rgba(255,255,255,.55);
  white-space:nowrap;
}
.sphere-left{left:807px}
.sphere-right{left:1169px}

/* ---------- this job ---------- */
.job{top:1717px;height:776px}
.job-title{
  position:absolute;left:67px;top:0;
  font-size:114px;line-height:118px;font-weight:400;
}
.job-col-title{
  position:absolute;top:274px;
  font-size:36px;line-height:54px;font-weight:400;
}
.job-col-title-l{left:17px}
.job-col-title-r{left:832px}
.job-list{
  position:absolute;width:467px;
  font-family:'Open Sans',sans-serif;
  font-size:20px;line-height:32px;color:#CDCDCD;
  list-style:none;
}
.job-list-l{left:37px;top:344px}
.job-list-r{left:852px;top:328px}
.job-list li{position:relative;padding-left:22px}
.job-list li::before{content:"•";position:absolute;left:2px;top:0}
.job-image{position:absolute;left:508px;top:432px;width:318px;height:222px}

/* ---------- benefits ---------- */
.benefits{top:2593px;height:499px}
.tape{position:absolute;left:795px;top:-21px;width:191px;height:62px}
.benefits-sub{
  position:absolute;left:129px;top:25px;width:1192px;
  font-size:20px;line-height:32px;text-align:center;
}
.benefits-title{
  position:absolute;left:270px;top:69px;width:837px;
  font-size:46px;line-height:56px;font-weight:700;text-align:center;
}
.benefit-col{
  position:absolute;top:231px;width:310px;
  font-family:'Open Sans',sans-serif;
  font-size:18px;line-height:32px;
}
.benefit-col-1{left:151px}
.benefit-col-2{left:527px}
.benefit-col-3{left:916px}

/* ---------- about ---------- */
.about{top:3192px;height:871px}
.deco-triangle{position:absolute;left:1052px;top:3px}
.about-title{
  position:absolute;left:151px;top:173px;
  font-size:46px;line-height:56px;font-weight:700;
}
.about-sub{
  position:absolute;left:151px;top:239px;
  font-size:26px;line-height:36px;color:var(--muted);
}
.about-text{
  position:absolute;left:151px;top:325px;width:618px;
  font-size:26px;line-height:36px;color:var(--muted);
}
.about-more{
  position:absolute;left:151px;top:646px;
  display:flex;align-items:center;gap:11px;
  font-size:26px;line-height:36px;
}
.about-photo{position:absolute}
.about-photo-1{left:821px;top:303px;width:230px;height:230px}
.about-photo-2{left:1081px;top:245px;width:240px;height:160px}
.about-photo-3{left:1081px;top:435px;width:240px;height:240px}

/* ---------- stats ---------- */
.stats{top:4163px;height:155px}
.stat{
  position:absolute;
  font-family:'Open Sans',sans-serif;
  font-size:40px;line-height:54px;font-weight:700;
  white-space:nowrap;
}
.stat-num{color:var(--red)}
.stat-1{left:210px;top:0}
.stat-2{left:590px;top:0}
.stat-3{left:210px;top:101px}
.stat-4{left:598px;top:101px}
.deco-arc{
  position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;
}
.deco-arc-1{left:1129px;top:-43px;width:287px;height:287px}
.deco-arc-2{left:-368px;top:-162px;width:414px;height:414px}

/* ---------- quotes ---------- */
.quotes{top:4418px;height:760px}
.quote{
  position:absolute;
  width:600px;height:200px;
  background:var(--card);border-radius:24px;
}
.quote img{position:absolute;left:62px;top:62px}
.quote blockquote{
  position:absolute;left:162px;top:53px;width:365px;
  font-size:26px;line-height:32px;
}
.quote-1{left:70px;top:0}
.quote-2{left:770px;top:0}
.quote-3{left:70px;top:280px}
.quote-4{left:770px;top:280px}
.quote-5{left:70px;top:560px}

/* ---------- brands ---------- */
.brands{top:5278px;height:1049px;background:var(--card)}
.brands h3{
  position:absolute;left:101px;width:518px;
  font-size:31px;line-height:37px;font-weight:500;
}
.brand-item-1 h3{top:145px}
.brand-item-1 p{
  position:absolute;left:101px;top:232px;width:486px;
  font-family:'Open Sans',sans-serif;
  font-size:17.5px;line-height:25px;color:rgba(255,255,255,.92);
}
.brand-item-2 h3{top:367px}
.brand-item-3 h3{top:577px}
.brand-item-4 h3{top:802px}
.brands ul{
  position:absolute;left:101px;width:494px;
  list-style:none;
  font-family:'Open Sans',sans-serif;
  font-size:17.5px;line-height:25px;color:rgba(255,255,255,.92);
}
.brand-item-2 ul{top:454px}
.brand-item-3 ul{top:667px}
.brand-item-4 ul{top:855px}
.brands ul li{position:relative;padding-left:20px;margin-bottom:6px}
.brands ul li::before{content:"•";position:absolute;left:0;top:0}
.brands::after{content:none}
.brand-cards{position:absolute;left:837px;top:0;width:487px;height:1049px}
.rule{position:absolute;left:101px;width:518px;height:1px;background:var(--hairline)}

/* ---------- faq ---------- */
.faq{top:6427px;height:1472px}
.faq-bubbles{position:absolute;left:274px;top:0;width:500px;height:331px}
.faq-title{
  position:absolute;left:790px;top:166px;
  font-size:46px;line-height:56px;font-weight:700;
}
.faq-btn{
  position:absolute;left:790px;top:243px;
  width:376px;height:48px;border-radius:24px;
  background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:Helvetica,Arial,sans-serif;
  font-size:18px;line-height:24px;white-space:nowrap;
}
.faq-list{
  position:absolute;left:378px;top:402px;width:807px;
  font-family:'Open Sans',sans-serif;
  font-size:24px;line-height:34px;
}
.faq-list h3{font-size:24px;line-height:34px;font-weight:700;margin-bottom:26px}
.faq-list p{margin-bottom:26px;font-weight:400}

/* ---------- footer ---------- */
.site-footer{top:7999px;height:554px}
.footer-title{
  position:absolute;left:120px;top:143px;width:917px;
  font-size:24px;line-height:57.6px;font-weight:700;
}
.footer-list{
  position:absolute;left:120px;top:268px;
  list-style:none;
  font-size:19px;line-height:30px;color:var(--muted);
}
.to-top{
  position:absolute;left:1370px;top:138px;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:200;line-height:1;
}
.footer-circles{position:absolute;left:790px;top:230px;width:650px;height:324px}

/* mobile-only helpers */
.nav-toggle{display:none}
.tape-text{display:none}

/* ---------- floating WhatsApp button ---------- */
.wa-float{
  position:fixed;
  right:36px;bottom:72px;
  z-index:80;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .18s ease,box-shadow .18s ease;
  animation:wa-breathe 2.6s ease-in-out infinite;
}
.wa-float::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:3px solid rgba(37,211,102,.85);
  pointer-events:none;
  animation:wa-ring 2.6s ease-out infinite;
}
@keyframes wa-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}
@keyframes wa-ring{
  0%{transform:scale(1);opacity:.9}
  65%{transform:scale(1.95);opacity:0}
  100%{transform:scale(1.95);opacity:0}
}
.wa-float svg{width:32px;height:32px;display:block}
.wa-float:hover{animation:none;transform:scale(1.12);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1) inset}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:900px){
  .wa-float{right:20px;bottom:72px;width:54px;height:54px}
  .wa-float svg{width:28px;height:28px}
}

@media (prefers-reduced-motion: reduce){
  .wa-float,.wa-float::after{animation:none}
}


/* ================= WhatsApp-Bewerbungsformular ================= */
.wa-float{border:0;padding:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}

.wa-modal{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.wa-modal[hidden]{display:none}
.wa-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(6px)}
.wa-modal__card{
  position:relative;
  width:520px;max-width:100%;
  max-height:calc(100vh - 40px);overflow:auto;
  padding:34px 34px 30px;
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  animation:wa-in .22s ease-out;
  font-family:"Inter","Open Sans",system-ui,sans-serif;
  color:#fff;
}
@keyframes wa-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.wa-modal__close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.08);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.wa-modal__close:hover{background:rgba(255,255,255,.16)}
.wa-modal__title{margin:0 0 8px;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.wa-modal__sub{margin:0 0 22px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wa-field{display:block;margin:0 0 14px}
.wa-field>span{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.wa-field input,.wa-field select{
  width:100%;box-sizing:border-box;
  height:48px;padding:0 14px;
  background:#171717;color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:11px;
  font:inherit;font-size:15px;outline:none;
  transition:border-color .15s,background .15s;
  appearance:none;
}
.wa-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='.6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.wa-field input::placeholder{color:rgba(255,255,255,.32)}
.wa-field input:focus,.wa-field select:focus{border-color:#4262ff;background:#1b1b1b}
.wa-field input[aria-invalid="true"],.wa-field select[aria-invalid="true"]{border-color:#f45252}
.wa-field input::-webkit-outer-spin-button,.wa-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wa-field input[type=number]{-moz-appearance:textfield}
/* 电话：国旗 + 固定 +49 */
.wa-phone{
  display:flex;align-items:center;gap:10px;
  height:48px;padding:0 14px;
  background:#171717;border:1px solid rgba(255,255,255,.16);border-radius:11px;
  transition:border-color .15s,background .15s;
}
.wa-phone:focus-within{border-color:#4262ff;background:#1b1b1b}
.wa-phone:has(input[aria-invalid="true"]){border-color:#f45252}
.wa-phone__cc{
  display:inline-flex;align-items:center;gap:7px;
  padding-right:11px;border-right:1px solid rgba(255,255,255,.12);
  font-size:15px;color:rgba(255,255,255,.88);white-space:nowrap;
}
.wa-phone__flag{
  display:inline-block;width:20px;height:14px;border-radius:2px;
  background:linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.wa-phone__flag.flag-de{background:linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66% 100%)}
.wa-phone__flag.flag-fr{background:linear-gradient(90deg,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66% 100%)}
.wa-phone__flag.flag-nl{background:linear-gradient(#ae1c28 0 33.33%,#fff 33.33% 66.66%,#21468b 66.66% 100%)}
.wa-phone__flag.flag-es{background:linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75% 100%)}
.wa-phone__flag.flag-it{background:linear-gradient(90deg,#009246 0 33.33%,#fff 33.33% 66.66%,#ce2b37 66.66% 100%)}
.wa-phone__flag.flag-pl{background:linear-gradient(#fff 0 50%,#dc143c 50% 100%)}
.wa-phone__flag.flag-ch{background-color:#d52b1e;background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-size:4px 10px,12px 4px;background-position:center,center;background-repeat:no-repeat,no-repeat}
.wa-field .wa-phone input{
  flex:1 1 auto;width:auto;min-width:0;height:100%;padding:0;
  border:0;background:transparent;box-shadow:none;font-size:15px;
}
.wa-field .wa-phone input:focus{border:0;background:transparent}
.wa-phone input::placeholder{color:rgba(255,255,255,.32)}
.wa-fail{padding:10px 0 2px;text-align:center}
.wa-fail[hidden]{display:none}
.wa-fail__icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:rgba(244,82,82,.16);color:#ff8080;font-size:28px;font-weight:800;line-height:56px;text-align:center}
.wa-fail .wa-modal__sub{margin-bottom:24px}
/* 失败框会自动把焦点放到按钮上，鼠标点击进来的不要那圈白边 */
.wa-modal__card:focus{outline:none}
.wa-submit:focus{outline:none}
.wa-submit:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}
.wa-err{margin:2px 0 14px;font-size:13px;line-height:1.45;color:#ff8080}
.wa-err[hidden]{display:none}
.wa-submit{
  width:100%;height:52px;
  border:0;border-radius:13px;
  background:#4262ff;color:#fff;
  font:inherit;font-size:16px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:background .15s,transform .12s;
}
.wa-submit:hover{background:#3452e8}
.wa-submit:active{transform:scale(.99)}
.wa-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.4);text-align:center}
.wa-done{text-align:center}
.wa-done[hidden]{display:none}
.wa-done__icon{
  width:62px;height:62px;margin:6px auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,211,102,.15);
}
.wa-done__icon svg{width:34px;height:34px;fill:#25d366}
.wa-manual{display:inline-block;margin:0 0 18px;font-size:13px;color:#8fa2ff;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.wa-manual:focus-visible{outline:2px solid #4262ff;outline-offset:4px}
html.wa-lock{overflow:hidden}

@media (max-width:560px){
  .wa-modal{padding:14px}
  .wa-modal__card{padding:26px 20px 22px;border-radius:18px;max-height:calc(100vh - 28px)}
  .wa-modal__title{font-size:22px}
  .wa-grid{grid-template-columns:1fr;gap:0}
  .wa-field{margin-bottom:12px}
}


/* ---------- eigenes Dropdown im Formular ---------- */
.wa-select{position:relative}
.wa-select__btn{
  width:100%;height:48px;padding:0 40px 0 14px;
  display:flex;align-items:center;
  background:#171717;color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:11px;
  font:inherit;font-size:15px;text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.wa-select__btn:hover{background:#1c1c1c}
.wa-select__btn:focus-visible{outline:none;border-color:#4262ff}
.wa-select.is-open .wa-select__btn{border-color:#4262ff;background:#1c1c1c}
.wa-select__btn[aria-invalid="true"]{border-color:#f45252}
.wa-select__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-select__val[data-empty]{color:rgba(255,255,255,.42)}
.wa-select__chev{
  position:absolute;right:14px;top:50%;width:11px;height:8px;margin-top:-4px;
  fill:rgba(255,255,255,.55);transition:transform .18s ease,fill .18s ease;pointer-events:none;
}
.wa-select.is-open .wa-select__chev{transform:rotate(180deg);fill:#fff}
.wa-select__list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  margin:0;padding:6px;list-style:none;
  background:#151515;border:1px solid rgba(255,255,255,.13);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.65);
  max-height:232px;overflow:auto;outline:none;z-index:9;
  animation:wa-dd .16s ease-out;
}
.wa-select.is-up .wa-select__list{top:auto;bottom:calc(100% + 6px);animation-name:wa-dd-up}
@keyframes wa-dd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes wa-dd-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wa-select__list[hidden]{display:none}
.wa-select__list li{
  position:relative;height:42px;line-height:42px;
  padding:0 34px 0 12px;border-radius:8px;
  font-size:15px;color:rgba(255,255,255,.85);cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s;
}
.wa-select__list li:hover,.wa-select__list li.is-active{background:rgba(255,255,255,.07);color:#fff}
.wa-select__list li[aria-selected="true"]{background:rgba(66,98,255,.17);color:#fff;font-weight:600}
.wa-select__list li[aria-selected="true"]::after{
  content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237d94ff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}