@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url(../fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}
:root{--paper:#F5F6FA;--paper2:#E9ECF6;--ink:#14121F;--ink2:#4A4763;--ultra:#5B3DFF;--lime:#C8F03A;--pink:#FF4D8D;--teal:#00B8C4;--amber:#FFB020;
--disp:"Bricolage Grotesque",system-ui,sans-serif;--text:"Instrument Sans","Noto Sans Khmer","Khmer OS",system-ui,sans-serif;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--paper2);scroll-behavior:auto}
body{margin:0;font-family:var(--text);color:var(--ink);background:var(--paper2);overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
#col{position:relative;width:min(100vw,430px);margin:0 auto;background:var(--paper);min-height:100dvh;box-shadow:0 0 0 2px var(--ink)}
@media(max-width:430px){#col{box-shadow:none}}
#cv{position:sticky;top:0;display:block;width:100%;height:100dvh;margin-bottom:-100dvh;z-index:0;touch-action:pan-y}
#scroll{position:relative;z-index:2;pointer-events:none}
#scroll>section{position:relative}
#scroll button,#scroll a{pointer-events:auto}
#top{background:linear-gradient(to bottom,var(--paper) 55%,rgba(245,246,250,0));position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100vw,430px);z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(8px + var(--sat)) max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left))}
.logo{display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font:800 19px/1 var(--disp);letter-spacing:-.03em}
.chip{min-height:44px;font:700 13px/1 var(--text);color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:9px 14px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.chip:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 18px/1 var(--disp);letter-spacing:-.01em;color:var(--ink);background:var(--lime);border:3px solid var(--ink);border-radius:18px;padding:17px 22px;box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s;width:100%}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.alt{background:#fff}
button:focus-visible,a:focus-visible{outline:3px solid var(--ultra);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:800;margin:0;letter-spacing:-.035em;line-height:.96}
#hero{height:100svh;min-height:600px}
.herotxt{position:absolute;left:16px;right:16px;top:calc(76px + var(--sat))}
#hero h1{font-size:clamp(38px,11.6vw,52px)}
.lead{font-size:16.5px;line-height:1.45;color:var(--ink2);margin:14px 0 0;max-width:34ch}
.hint{position:absolute;right:20px;bottom:calc(112px + var(--sab));display:flex;align-items:center;gap:10px;font:700 13px var(--text);color:var(--ink2)}
.hint i{width:2.5px;height:26px;background:var(--ink);position:relative;overflow:hidden;border-radius:2px}
.hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--lime);animation:drip 1.6s cubic-bezier(.6,0,.3,1) infinite;border:0}
@keyframes drip{0%{top:-100%}60%,100%{top:100%}}
#layers{height:1020vh}
#lineage{height:760vh}
#cta{min-height:130svh;display:flex;align-items:flex-end;padding-bottom:calc(40px + var(--sab))}
.ctabox{width:100%;padding:0 16px}
.ctabox .btn{margin-top:26px;min-height:56px}
.ctabox .lead{max-width:32ch}
.ctabox h2{font-size:clamp(44px,13vw,56px);margin-bottom:4px}
.note{font-size:13px;color:var(--ink2);min-height:18px;margin:12px 0 0}
#panel{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(100vw,430px);z-index:15;background:#fff;border-top:3px solid var(--ink);border-radius:22px 22px 0 0;padding:14px 18px calc(18px + var(--sab));box-shadow:0 -5px 0 rgba(20,18,31,.12);transition:transform .45s cubic-bezier(.2,.9,.25,1.1)}
#panel.on{transform:translate(-50%,0)}
.ticks{display:flex;gap:5px;margin-bottom:12px}
.ticks b{flex:1;height:5px;border-radius:3px;background:var(--paper2);border:1.5px solid var(--ink);transition:background .25s}
.ticks b.d{background:var(--ink)}.ticks b.c{background:var(--lime)}
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px}
#pTitle{font-size:36px}
.state{font:800 12.5px var(--text);padding:6px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--lime);white-space:nowrap}
.state[data-s="im Aufbau"]{background:var(--amber)}.state[data-s="teils"]{background:var(--paper2)}
.pline{font:800 19px/1.15 var(--disp);letter-spacing:-.02em;margin:10px 0 6px}
#pText{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink2);max-width:36ch}
#panel.sw .phead,#panel.sw .pline,#panel.sw #pText{animation:slam .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes slam{0%{transform:translateY(14px) scale(1.04);opacity:0}100%{transform:none;opacity:1}}
#bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,430px);z-index:14;padding:12px 16px calc(14px + var(--sab));background:linear-gradient(to top,var(--paper) 60%,rgba(245,246,250,0));transition:transform .4s cubic-bezier(.2,.9,.25,1.1);pointer-events:none}
#bar .btn{pointer-events:auto}
#bar.off{transform:translate(-50%,130%)}
.screen{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:min(100vw,430px);z-index:40;display:flex;align-items:flex-end;padding:0 16px calc(36px + var(--sab));background:linear-gradient(to bottom,rgba(245,246,250,0) 0,rgba(245,246,250,.0) 36%,var(--paper) 62%)}
.screen[hidden],#ui[hidden],#bubble[hidden],#homebar[hidden],#sheet[hidden],#eyeInd[hidden],#skip[hidden],.toast[hidden]{display:none!important}
.sbox{width:100%}
.big{font:800 clamp(30px,9vw,38px)/1 var(--disp);letter-spacing:-.035em;margin:0 0 14px}
.qnum{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.qnum span{font:700 15px var(--text);color:var(--ink2)}
.qnum b{font:800 92px/.8 var(--disp);letter-spacing:-.05em;color:var(--ultra);text-shadow:4px 4px 0 var(--ink);display:inline-block}
.qnum b.flip{animation:slam .5s cubic-bezier(.2,1.4,.4,1)}
.small{font-size:14px;color:var(--ink2);margin:0;max-width:34ch}
.toast{position:fixed;left:50%;top:calc(64px + var(--sat));transform:translateX(-50%);z-index:60;background:var(--pink);color:var(--ink);font:800 14px var(--text);border:2.5px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:3px 3px 0 var(--ink);max-width:90vw}
#ui{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:min(100vw,430px);z-index:30;pointer-events:none}
#ui>*{pointer-events:auto}
#skip{position:absolute;top:calc(10px + var(--sat));right:max(14px,env(safe-area-inset-right))}
#snd{position:absolute;top:calc(10px + var(--sat));left:max(14px,env(safe-area-inset-left))}
#cap{position:absolute;left:0;right:0;bottom:calc(120px + var(--sab));text-align:center;pointer-events:none;font:800 15px var(--text)}
#bubble{position:absolute;left:18px;right:18px;top:calc(60px + var(--sat));background:#fff;border:3px solid var(--ink);border-radius:24px;padding:18px 18px 20px;box-shadow:6px 6px 0 var(--ink);animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
#bubble::after{content:"";position:absolute;left:50%;bottom:-17px;width:26px;height:26px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateX(-50%) rotate(45deg) skew(8deg,8deg)}
#bubble p{margin:0;font:500 19px/1.4 var(--text);overflow-wrap:anywhere}
#bubble p:lang(km){line-height:1.9}
@keyframes pop{0%{transform:scale(.6) translateY(20px);opacity:0}100%{transform:none;opacity:1}}
#homebar{position:absolute;left:16px;right:16px;bottom:calc(22px + var(--sab));display:flex;flex-direction:column;gap:12px;align-items:stretch}
#homebar .chip{align-self:center}
#eyeInd{position:fixed;top:calc(10px + var(--sat));left:50%;transform:translateX(-50%);z-index:70;width:min(calc(100vw - 24px),406px);display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:8px;box-shadow:3px 3px 0 var(--ink);font:700 14px var(--text)}
#eyeInd video{width:72px;height:54px;object-fit:cover;border-radius:12px;border:2px solid var(--ink);background:var(--ink);flex:none}
.eyetxt{flex:1;min-width:0}
.eyehead{display:flex;align-items:center;gap:6px;white-space:nowrap}
.eyehead span{font-weight:600;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
#eyeInd i{width:12px;height:12px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);animation:beat 1.1s infinite;flex:none}
#eyeInd p{margin:2px 0 0;font:500 13px/1.3 var(--text);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.eyebtns{display:flex;flex-direction:column;gap:4px;flex:none}
@keyframes beat{50%{transform:scale(1.5);background:var(--lime)}}
#eyeInd button{font:800 13px var(--text);background:var(--pink);color:var(--ink);border:2.5px solid var(--ink);border-radius:99px;padding:0 12px;min-height:44px;cursor:pointer}
#eyeInd #eyeFlip{background:#fff;min-height:36px}
body.eye #bubble{top:calc(136px + var(--sat))}
body.eye #snd,body.eye #skip{top:calc(130px + var(--sat))}
.small a{color:var(--ink)}
.sheet{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:min(100vw,430px);z-index:80;background:rgba(20,18,31,.35);display:flex;align-items:flex-end}
.sheetbox{background:#fff;border-top:3px solid var(--ink);border-radius:24px 24px 0 0;padding:22px 18px calc(22px + var(--sab));width:100%;animation:up .4s cubic-bezier(.2,1,.3,1)}
@keyframes up{from{transform:translateY(100%)}}
.sheetbox h3{font-size:32px;margin-bottom:10px}.sheetbox p{margin:0 0 14px;color:var(--ink2);line-height:1.45}
.seg{display:flex;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;margin-bottom:14px}
.seg button{flex:1;min-height:44px;font:700 15px var(--text);padding:11px;background:#fff;border:0;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.row{display:flex;flex-direction:column;gap:12px;align-items:stretch}.row .chip{align-self:center}
body.intro{overflow:hidden}
body.intro #scroll,body.intro #top,body.intro #panel,body.intro #bar{display:none}
@media (prefers-reduced-motion:reduce){.hint i::after{animation:none}#panel{transition:none}}