:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Text",Inter,system-ui,sans-serif;color:#0f1226;background:#fff8ee;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink:#0f1226;--blue:#2e4bff;--blue-deep:#1a2bc2;--lime:#c6ff3a;--cream:#fff8ee;--white:#fff;--line:#e7dece;--muted:#5e6178;--pink:#ff4f93;--orange:#ff8a2b;--purple:#8b5cff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;top:-80px;left:16px;z-index:100;padding:12px 16px;border:3px solid var(--ink);border-radius:14px;background:var(--white);font-weight:900}
.skip:focus{top:12px}
.header{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:92px}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:25px;font-weight:1000;letter-spacing:-.065em}
.brand img{border-radius:12px;transform:rotate(-5deg)}
.brand>span>span,.download-mark strong span{color:var(--blue)}
.header nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px;font-weight:850}
.header nav a,.footer-links a{transition:color .15s,transform .15s}
.header nav a:hover,.footer-links a:hover{color:var(--blue);transform:translateY(-1px)}
.header-cta{display:inline-flex;align-items:center;gap:14px;padding:13px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:0 4px 0 var(--ink);font-size:14px;font-weight:950;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:center;min-height:665px;padding:64px 66px;overflow:hidden;border:3px solid var(--ink);border-radius:38px;background:var(--blue);color:var(--white);box-shadow:0 12px 0 var(--ink)}
.hero:before{content:"";position:absolute;right:-190px;bottom:-315px;width:760px;height:760px;border:2px solid #ffffff33;border-radius:50%;box-shadow:0 0 0 80px #ffffff09,0 0 0 82px #ffffff22,0 0 0 175px #ffffff08,0 0 0 177px #ffffff18}
.hero-copy{position:relative;z-index:2;max-width:610px}
.eyebrow,.kicker{font-size:12px;font-weight:950;letter-spacing:.16em}
.eyebrow{display:inline-flex;align-items:center;gap:11px}
.eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px #c6ff3a30}
.hero h1{margin:27px 0 23px;font-size:clamp(60px,6vw,94px);line-height:1.08;letter-spacing:-.035em;word-spacing:.1em;font-weight:1000}
.hero h1 em,.how h2 em{font-style:normal;color:var(--lime)}
.hero-copy>p:not(.hero-note){max-width:525px;margin:0;color:#f2f4ff;font-size:clamp(17px,1.7vw,21px);line-height:1.48;font-weight:620}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:58px;padding:14px 21px;border:3px solid var(--ink);border-radius:18px;font-size:15px;font-weight:950;transition:transform .15s,box-shadow .15s,background .15s}
.button:hover{transform:translateY(-3px)}
.button-lime{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.button-lime:hover{background:#d5ff69;box-shadow:0 9px 0 var(--ink)}
.button-ghost{border-color:#fff;background:#ffffff12;color:var(--white);box-shadow:0 6px 0 #16218f}
.button-ghost:hover{background:#ffffff24;box-shadow:0 9px 0 #16218f}
.hero-note{margin:25px 0 0;color:#e3e7ff;font-size:12px;font-weight:800;letter-spacing:.02em}
.hero-visual{position:relative;z-index:1;align-self:end;height:575px}
.phone{position:absolute;top:-5px;right:35px;width:270px;height:585px;padding:8px;overflow:hidden;border:8px solid var(--ink);border-radius:45px;background:var(--cream);box-shadow:18px 25px 0 #1826af,0 24px 55px #0f122666;transform:rotate(6deg)}
.phone:before{content:"";position:absolute;z-index:2;top:5px;left:50%;width:80px;height:17px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:var(--ink)}
.phone img{display:block;width:100%;height:auto;border-radius:30px}
.sticker{position:absolute;z-index:3;display:inline-grid;place-items:center;padding:10px 13px;border:3px solid var(--ink);border-radius:15px;box-shadow:5px 7px 0 var(--ink);color:var(--ink);font-weight:950}
.sticker-one{top:101px;left:-18px;background:var(--lime);transform:rotate(-8deg);font-size:12px;letter-spacing:.07em}
.sticker-two{right:-10px;bottom:110px;background:var(--pink);transform:rotate(9deg);font-size:17px}
.sticker-three{left:24px;bottom:48px;width:76px;height:76px;background:var(--orange);transform:rotate(-12deg);font-size:34px}
.ticker{margin:55px 0 0;overflow:hidden;border-block:2px solid var(--line);color:var(--blue-deep)}
.ticker div{width:max-content;padding:15px 0;white-space:nowrap;font-size:12px;font-weight:950;letter-spacing:.16em;word-spacing:12px;animation:ticker 32s linear infinite}
.ticker b{margin:0 23px;color:var(--pink);font-size:16px}
@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding-top:112px;padding-bottom:112px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:36px}
.kicker{color:var(--blue-deep)}
h1,h2,h3{overflow-wrap:anywhere}
h2{margin:11px 0 0;font-size:clamp(45px,5vw,70px);line-height:1;letter-spacing:-.072em;font-weight:1000}
.section-head>p{max-width:290px;margin:0 0 6px;color:var(--muted);font-size:16px;line-height:1.5;font-weight:650}
.games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.game{position:relative;min-width:0;overflow:hidden;border:3px solid var(--ink);border-radius:28px;background:var(--white);box-shadow:0 8px 0 var(--ink);transition:transform .18s,box-shadow .18s}
.game:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 14px 0 var(--ink)}
.game:nth-child(even):hover{transform:translateY(-6px) rotate(.5deg)}
.game>img{display:block;width:100%;height:auto;aspect-ratio:660/876;object-fit:cover;border-bottom:3px solid var(--ink)}
.game-copy{min-height:205px;padding:23px 21px 25px}
.game-copy>span{font-size:10px;font-weight:950;letter-spacing:.13em;color:var(--blue-deep)}
.game-copy h3{margin:9px 0 10px;font-size:32px;line-height:1;letter-spacing:-.06em}
.game-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.48;font-weight:620}
.game-tickt .game-copy>span{color:#a44700}.game-falsch .game-copy>span{color:#bd1f5c}.game-sound .game-copy>span{color:#6234cf}
.how{padding:110px 0;border-block:3px solid var(--ink);background:var(--ink);color:var(--white)}
.how-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:95px}
.how .kicker{color:var(--lime)}
.how h2{margin-bottom:24px}
.how p{max-width:490px;color:#dce1ff;font-size:17px;line-height:1.55}
.how ol{margin:0;padding:0;list-style:none}
.how li{display:flex;align-items:start;gap:24px;padding:26px 0;border-bottom:1px solid #ffffff32}
.how li:first-child{border-top:1px solid #ffffff32}
.how li strong{color:var(--lime);font-size:18px;letter-spacing:.06em}
.how li span{display:grid;gap:7px}
.how li b{font-size:21px}
.how li small{color:#cdd3ef;font-size:14px;line-height:1.42}
.free-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:70px;padding:54px 60px;border:3px solid var(--ink);border-radius:34px;background:var(--white);box-shadow:0 10px 0 var(--ink)}
.free-card h2{max-width:650px;font-size:clamp(40px,5vw,70px)}
.free-card p{max-width:670px;margin:21px 0 0;color:var(--muted);font-size:17px;line-height:1.58;font-weight:600}
.free-badge{width:220px;aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:2px;border:3px solid var(--ink);border-radius:50%;background:var(--lime);box-shadow:9px 11px 0 var(--blue);transform:rotate(7deg);text-align:center}
.free-badge strong{font-size:70px;line-height:.9;letter-spacing:-.08em}
.free-badge span{font-size:13px;line-height:1.2;font-weight:1000;letter-spacing:.08em}
.creator-section{padding:90px 0;border-block:3px solid var(--ink);background:var(--blue);color:var(--white)}
.creator-grid{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:100px}
.creator-section .kicker{color:var(--lime)}
.creator-section p{max-width:500px;color:#e7eaff;font-size:18px;line-height:1.55;font-weight:600}
.text-link{display:inline-flex;align-items:center;gap:13px;margin-top:15px;padding-bottom:5px;border-bottom:3px solid var(--lime);font-weight:950}
.faq-section{padding-bottom:126px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px}
.faq-grid details{border:3px solid var(--ink);border-radius:20px;background:var(--white);box-shadow:0 5px 0 var(--ink)}
.faq-grid summary{padding:22px 54px 22px 22px;cursor:pointer;list-style:none;font-size:17px;font-weight:900;position:relative}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary:after{content:"+";position:absolute;right:21px;top:15px;font-size:29px;color:var(--blue)}
.faq-grid details[open] summary:after{content:"–"}
.faq-grid p{margin:0;padding:0 22px 24px;color:var(--muted);line-height:1.55}
.download{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:80px;margin-bottom:112px;padding:60px;border:3px solid var(--ink);border-radius:36px;background:#e4e9ff;box-shadow:0 11px 0 var(--ink)}
.download p{max-width:600px;color:var(--muted);font-size:17px;line-height:1.55}
.coming-soon{display:inline-flex;align-items:center;min-height:50px;margin-top:12px;padding:11px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:0 4px 0 var(--ink);color:var(--blue-deep);font-size:13px;font-weight:950;letter-spacing:.04em}
.download-mark{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:3px solid var(--ink);border-radius:30px;background:var(--white);box-shadow:0 8px 0 var(--ink);transform:rotate(3deg)}
.download-mark img{transform:rotate(-8deg)}
.download-mark strong{font-size:45px;letter-spacing:-.065em}
.download-mark small{color:var(--muted);font-size:12px;letter-spacing:.15em;font-weight:950}
.footer{padding:52px 0;background:var(--white);border-top:3px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:25px}
.footer p{color:var(--muted);font-size:13px;line-height:1.5}
.footer-links{display:grid;grid-template-columns:repeat(2,max-content);gap:13px 32px;align-content:start;font-size:13px;font-weight:850}
.copyright{grid-column:1/-1;padding-top:17px;border-top:1px solid var(--line);color:#8b829d;font-size:12px}
.subpage .header{min-height:80px}
.subhero{padding:72px 0 46px;border-bottom:2px solid var(--line)}
.subhero h1{max-width:900px;margin:12px 0 15px;font-size:clamp(50px,6vw,80px);line-height:.98;letter-spacing:-.075em}
.subhero p{max-width:700px;color:var(--muted);font-size:18px;line-height:1.5}
.content{width:min(850px,calc(100% - 48px));margin:0 auto;padding:56px 0 100px}
.content h2{margin:45px 0 14px;font-size:29px;letter-spacing:-.045em}
.content h2:first-child{margin-top:0}
.content h3{font-size:18px}
.content p,.content li{color:var(--muted);font-size:16px;line-height:1.65}
.content ul{padding-left:22px}
.content a:not(.button){color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.content address{font-style:normal;line-height:1.65}
.notice{padding:20px 24px;border:2px solid #cbd5ff;border-radius:18px;background:#e4e9ff;color:var(--ink)!important}
.faq{padding:24px 0;border-bottom:1px solid var(--line)}
.faq h2{margin:0 0 8px}
.faq p{margin:0}
.support-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:25px;border:3px solid var(--ink);border-radius:22px;background:var(--white);box-shadow:0 6px 0 var(--ink)}
.support-card p{margin:0}
.referral-page{min-height:100vh;background:var(--blue);padding:28px 0}
.referral-shell{width:min(570px,calc(100% - 32px));margin:0 auto}
.referral-top{display:flex;justify-content:center;padding:8px 0 25px;color:var(--white)}
.referral-card{padding:34px;border:3px solid var(--ink);border-radius:32px;background:var(--cream);box-shadow:0 10px 0 var(--ink);text-align:center}
.referral-card .kicker{display:block;color:var(--blue-deep)}
.referral-card h1{margin:14px 0 13px;font-size:clamp(44px,12vw,68px);line-height:.96;letter-spacing:-.075em}
.referral-card>p{color:var(--muted);line-height:1.55}
.referral-game{display:inline-flex;margin:10px 0 4px;padding:8px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--white);font-size:12px;font-weight:950}
.creator-code{margin:22px 0;padding:18px;border:3px solid var(--ink);border-radius:20px;background:var(--lime);box-shadow:0 6px 0 var(--ink)}
.creator-code span{display:block;font-size:11px;font-weight:950;letter-spacing:.13em}
.creator-code strong{display:block;margin-top:5px;font-size:30px;letter-spacing:.08em}
.referral-actions{display:grid;gap:13px;margin-top:27px}
.referral-actions .button{width:100%}
.button-blue{background:var(--blue);color:var(--white);box-shadow:0 6px 0 var(--ink)}
.button-blue:hover{box-shadow:0 9px 0 var(--ink)}
.button-white{background:var(--white);color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.referral-note{margin:23px 0 0!important;font-size:13px}
.referral-footer{padding:28px 12px;color:#e7eaff;text-align:center;font-size:12px;line-height:1.55}
.referral-footer a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1050px){.hero{grid-template-columns:1fr .68fr;padding:52px 42px}.phone{right:-38px}.sticker-one{left:-25px}.games{grid-template-columns:1fr 1fr}.creator-grid{gap:50px}}
@media(max-width:760px){.wrap{width:min(100% - 32px,560px)}.header{min-height:76px;gap:10px}.brand{font-size:21px}.brand img{width:37px;height:37px}.header nav{display:none}.header-cta{padding:10px 13px;font-size:12px}.hero{display:block;min-height:0;padding:40px 25px 0;border-radius:28px}.hero h1{font-size:clamp(44px,13vw,76px)}.hero-copy>p:not(.hero-note){font-size:16px}.actions{margin-top:28px}.button{min-height:54px;font-size:14px}.hero-visual{height:375px;margin-top:28px}.phone{top:6px;right:calc(50% - 112px);width:224px;height:485px;border-width:7px;border-radius:38px}.sticker-one{top:86px;left:calc(50% - 174px);font-size:10px}.sticker-two{right:calc(50% - 182px);bottom:56px;font-size:14px}.sticker-three{left:calc(50% - 172px);bottom:17px;width:61px;height:61px;font-size:27px}.ticker{margin-top:36px}.ticker div{animation:none}.section{padding-top:80px;padding-bottom:82px}.section-head{display:block}.section-head>p{margin-top:18px}.games{grid-template-columns:1fr 1fr}.game-copy{min-height:190px}.how{padding:78px 0}.how-grid,.free-card,.creator-grid,.download{grid-template-columns:1fr}.how-grid{gap:38px}.free-card{gap:40px;padding:39px 28px}.free-badge{width:180px;justify-self:center}.creator-grid{gap:20px}.faq-grid{grid-template-columns:1fr}.download{gap:38px;margin-bottom:82px;padding:39px 28px}.download-mark{min-height:250px}.footer-grid{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}.subhero{padding:51px 0 36px}.content{padding:37px 0 76px}.referral-card{padding:27px 22px}}
@media(max-width:520px){.games{grid-template-columns:1fr}.game{display:grid;grid-template-columns:42% 58%}.game>img{height:100%;border-right:3px solid var(--ink);border-bottom:0}.game-copy{min-height:0;padding:21px 17px}.game-copy h3{font-size:29px}.game-copy p{font-size:13px}.actions{display:grid}.actions .button{width:100%}.hero-visual{height:350px}.header-cta span{display:none}.free-badge{width:160px}.free-badge strong{font-size:58px}.support-card{align-items:flex-start}.support-card .button{width:100%}}
@media(max-width:340px){.free-card h2{font-size:38px}.sticker-two{right:calc(50% - 158px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}