@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');:root{--ink:#18201d;--cream:#f4f0e5;--paper:#fffdf6;--green:#254f3d;--lime:#d9ed72;--coral:#f1886f;--blue:#8dc8d8;--muted:#66706b;--line:#d8d4c8}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit}nav{height:70px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line)}.logo{font:700 23px 'Fraunces';text-decoration:none}.logo i{color:var(--green)}.back{text-decoration:none;font-size:13px}.pill{padding:8px 13px;border-radius:99px;background:var(--ink);color:white;font-size:10px;letter-spacing:.1em}main{max-width:1040px;margin:auto;padding:65px 24px 90px;display:grid;grid-template-columns:1fr 300px;gap:55px;align-items:start}header{grid-column:1/-1;max-width:850px}.kicker,.domain{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--green)}h1{font:700 clamp(52px,8vw,88px)/.9 'Fraunces';letter-spacing:-.055em;margin:13px 0 22px}h1 em{font-style:normal;color:var(--green)}header p{color:var(--muted);line-height:1.6;max-width:700px}.assessment{background:var(--paper);border:1px solid var(--ink);padding:30px;box-shadow:10px 10px 0 var(--blue);min-height:430px}.stage-line{display:flex;justify-content:space-between;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.progress{height:7px;background:#e8e3d8;margin:12px 0 28px}.progress i{display:block;height:100%;width:0;background:var(--green);transition:.35s}.domain{margin-bottom:10px}h2{font:600 clamp(25px,4vw,36px)/1.25 'Fraunces';margin:0 0 24px}.answers{display:grid;gap:9px}.answer,.check,.next{border:1px solid var(--line);background:white;padding:14px;text-align:left;font:600 14px 'DM Sans';cursor:pointer}.answer:hover{border-color:var(--ink)}.answer.correct{background:#dcefb5;border-color:var(--green)}.answer.wrong{background:#f7c5ba}.placement-form{display:flex;gap:8px}.placement-form input{min-width:0;flex:1;padding:14px;border:1px solid var(--line);font:inherit}.placement-form .check{background:var(--ink);color:white}.token-drop,.token-bank{min-height:58px;border:1px dashed var(--line);padding:8px;display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}.token{border:1px solid var(--line);background:white;padding:9px;cursor:pointer}.feedback{min-height:35px;padding-top:13px;color:var(--green);font-size:13px;font-weight:700}.next{display:none;background:var(--ink);color:white;text-align:center}.placement-audio{min-height:70px;display:grid;place-items:center;border:1px dashed var(--line);margin-bottom:12px}.placement-audio .german{min-width:58px;min-height:58px}.placement-audio .audio-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}aside{background:var(--lime);padding:24px;transform:rotate(1.5deg);box-shadow:7px 7px 0 var(--ink);display:grid;gap:15px}aside b{font:600 24px 'Fraunces'}aside span{font-size:12px;line-height:1.45;border-top:1px solid #18201d44;padding-top:12px}.result{display:none}.result.show{display:block}.result h2{font:700 clamp(42px,7vw,68px)/.95 'Fraunces';margin:8px 0 18px}.result p{color:var(--muted);line-height:1.55}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:20px 0}.result-grid div{border:1px solid var(--line);padding:10px;text-align:center}.result-grid b{display:block;font:600 20px 'Fraunces'}.result-grid span{font-size:9px;color:var(--muted)}.result a{display:inline-block;background:var(--green);color:white;padding:13px 16px;text-decoration:none;font-weight:700;margin:5px 8px 0 0}.result a.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}@media(max-width:720px){main{grid-template-columns:1fr;padding:42px 15px 80px;gap:35px}header{grid-column:auto}.assessment{padding:21px;box-shadow:6px 6px 0 var(--blue)}aside{transform:none}.result-grid{grid-template-columns:repeat(2,1fr)}.back{font-size:0}.back:after{content:'←';font-size:18px}.placement-form{flex-direction:column}}
