:root{--bg: #FBF7F1;--card: #FFFFFF;--card-alt: #F4EDE3;--ink: #2B2622;--muted: #7A6F66;--line: #E9E1D6;--accent: #1F5F5B;--accent-deep: #154340;--accent-soft: #E3EFED;--warm: #C4704F;--sun: #F2B544;--sun-soft: #FDF1D8;--success: #2E7D4F;--success-deep: #215C3A;--success-soft: #E5F3EA;--error: #B33A3A;--error-deep: #852A2A;--error-soft: #F8E6E3;--der: #2F6FB3;--die: #C0392B;--das: #2E8B57;--radius: 18px;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #1C1916;--card: #27231F;--card-alt: #302B26;--ink: #F2ECE4;--muted: #A89E93;--line: #3A342E;--accent: #7FC4BE;--accent-deep: #4E9690;--accent-soft: #22403D;--warm: #E39A7C;--sun: #F5C65F;--sun-soft: #3D3220;--success: #6FCB94;--success-deep: #4A9D6C;--success-soft: #1F3A2A;--error: #F08A7E;--error-deep: #B8645A;--error-soft: #40221F;--der: #7FB0E8;--die: #F08A7E;--das: #7FCFA0;color-scheme:dark}}:root[data-theme=dark]{--bg: #1C1916;--card: #27231F;--card-alt: #302B26;--ink: #F2ECE4;--muted: #A89E93;--line: #3A342E;--accent: #7FC4BE;--accent-deep: #4E9690;--accent-soft: #22403D;--warm: #E39A7C;--sun: #F5C65F;--sun-soft: #3D3220;--success: #6FCB94;--success-deep: #4A9D6C;--success-soft: #1F3A2A;--error: #F08A7E;--error-deep: #B8645A;--error-soft: #40221F;--der: #7FB0E8;--die: #F08A7E;--das: #7FCFA0;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--ink)}body{font-size:16px;line-height:1.45;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer}input,textarea{font:inherit;color:var(--ink)}.app{max-width:720px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom));min-height:100vh}.app.focus{padding-bottom:24px}.title{font-size:30px;font-weight:800;letter-spacing:-.01em;margin:0}.h2{font-size:20px;font-weight:800;margin:24px 0 10px}.muted{color:var(--muted)}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--warm)}.row{display:flex;align-items:center;gap:12px}.stack{display:flex;flex-direction:column;gap:14px}.spacer{flex:1}.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 3px 0 var(--line)}.card.link{cursor:pointer;transition:transform .15s;display:block;text-decoration:none;color:inherit;text-align:left;width:100%}.card.link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:16px;font-weight:800;font-size:17px;color:#fff;background:var(--c, var(--accent));box-shadow:0 4px 0 var(--d, var(--accent-deep));transition:transform .08s,box-shadow .08s;margin-bottom:4px}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--d, var(--accent-deep))}.btn:disabled{background:var(--card-alt);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:default}.btn.success{--c: var(--success);--d: var(--success-deep)}.btn.error{--c: var(--error);--d: var(--error-deep)}.btn.warm{--c: var(--warm);--d: #8f4f37}.btn.secondary{background:var(--accent-soft);color:var(--accent);box-shadow:0 3px 0 var(--line);min-height:46px;font-size:16px}.chip{border:0;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}.iconbtn{border:0;background:transparent;color:var(--muted);width:40px;height:40px;border-radius:12px;font-size:20px;display:grid;place-items:center}.speaker{border:0;background:var(--accent-soft);color:var(--accent);border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .15s}.speaker:active{transform:scale(.92)}.speaker.playing{animation:pulse 1s infinite}.option{display:block;width:100%;text-align:left;padding:15px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);box-shadow:0 3px 0 var(--line);font-weight:700;font-size:17px;margin-bottom:3px;transition:transform .12s}.option:active{transform:translateY(2px)}.option.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 3px 0 var(--accent)}.option.correct{border-color:var(--success);background:var(--success-soft);box-shadow:0 3px 0 var(--success);animation:pop .35s}.option.wrong{border-color:var(--error);background:var(--error-soft);box-shadow:0 3px 0 var(--error)}.option.done{opacity:.5}.tiles{display:flex;flex-wrap:wrap;gap:8px}.tile{padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);box-shadow:0 3px 0 var(--line);font-weight:700;font-size:17px;animation:pop .25s}.tile.filled{border-color:var(--accent);box-shadow:0 3px 0 var(--accent)}.answer-zone{min-height:110px;padding:12px;background:var(--card-alt);border-radius:14px;align-content:flex-start}.input{width:100%;padding:14px;font-size:20px;border-radius:12px;border:2px solid var(--accent);background:var(--card);outline:none}.umlauts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.umlauts button{border:0;background:var(--card-alt);border-radius:8px;width:40px;height:38px;font-size:18px;font-weight:600}.der{color:var(--der);font-weight:800}.die{color:var(--die);font-weight:800}.das{color:var(--das);font-weight:800}.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden;flex:1}.progress>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--das));transition:width .5s cubic-bezier(.3,1.4,.5,1);min-width:12px}.topbar{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;gap:10px;padding:10px 0}.page{animation:slidein .3s ease;padding-top:8px}.bottom{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}.feedback{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .3s cubic-bezier(.3,1.3,.5,1)}.feedback .inner{max-width:688px;margin:0 auto}.feedback.ok{background:var(--success-soft)}.feedback.bad{background:var(--error-soft)}.feedback h3{margin:0 0 6px;font-size:21px;font-weight:900}.combo{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:30;background:var(--warm);color:#fff;font-weight:900;padding:10px 18px;border-radius:99px;box-shadow:0 6px 20px #c4704f66;animation:drop .4s cubic-bezier(.3,1.5,.5,1)}.bubble{max-width:85%;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:transform .2s}.bubble.f{margin-left:auto;background:var(--accent-soft)}.bubble.playing{border:2px solid var(--accent);transform:scale(1.02)}.bubble .who{font-size:12px;font-weight:700;color:var(--muted)}.bubble .de{font-size:18px;font-weight:600}.bubble .en{color:var(--accent);font-size:15px;animation:fadein .25s}.bubble .acts{display:flex;gap:14px;margin-top:6px}.bubble .acts button{border:0;background:none;color:var(--accent);font-weight:800;font-size:13px;padding:0}.md p{margin:0 0 10px}.md ul{margin:0 0 10px;padding-left:20px}.md table{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden;margin:6px 0 12px;font-size:15px}.md th{background:var(--card-alt);color:var(--muted);text-align:left;padding:8px 10px;font-weight:700}.md td{padding:8px 10px;border-top:1px solid var(--line)}.md .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--card);border-top:1.5px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}.tabbar a{flex:1;max-width:180px;text-align:center;padding:10px 0 8px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:700}.tabbar a .ic{font-size:22px;display:block;transition:transform .2s}.tabbar a.active{color:var(--accent)}.tabbar a.active .ic{transform:scale(1.15) translateY(-2px)}.msg-user{margin-left:auto;max-width:80%;background:var(--accent);color:#fff;padding:12px;border-radius:18px;animation:up .25s}.msg-ai{max-width:88%;background:var(--card);border:1px solid var(--line);padding:12px;border-radius:18px;animation:up .25s}.correction{background:var(--sun-soft);border-radius:12px;padding:10px;font-size:15px;margin-bottom:6px}.chatbar{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--bg);align-items:flex-end}.chatbar textarea{flex:1;resize:none;border:1.5px solid var(--line);background:var(--card);border-radius:20px;padding:10px 14px;min-height:44px;max-height:120px;outline:none}.round{width:44px;height:44px;border-radius:50%;border:0;color:#fff;background:var(--accent);flex:none;font-size:18px}.round:disabled{background:var(--line)}.dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin:0 2px;animation:bounce 1s infinite}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ring{position:relative;display:grid;place-items:center}.ring svg{transform:rotate(-90deg)}.ring span{position:absolute;font-weight:900}.popin{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}.shake{animation:shake .35s}.word-img{width:100%;max-height:220px;object-fit:contain;border-radius:12px}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slidein{0%{transform:translate(24px);opacity:0}to{transform:none;opacity:1}}@keyframes up{0%{transform:translateY(100%)}to{transform:none}}@keyframes drop{0%{transform:translate(-50%,-60px) scale(.8)}to{transform:translate(-50%)}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:none}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (max-width: 420px){.title{font-size:26px}}.ex-head{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900}.ex-head span{width:34px;height:34px;border-radius:10px;background:var(--sun-soft);display:grid;place-items:center;font-size:17px}.combo-chip{position:fixed;top:64px;right:max(16px,calc(50vw - 344px));z-index:6;background:var(--sun-soft);color:var(--warm);font-weight:900;padding:5px 12px;border-radius:99px;animation:pop .3s}.xp-float{position:fixed;top:120px;left:50%;transform:translate(-50%);z-index:25;color:var(--sun);font-size:24px;font-weight:900;text-shadow:0 2px 10px rgba(242,181,68,.45);animation:xpfloat .9s ease-out forwards;pointer-events:none}.fb-icon{width:38px;height:38px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:20px;font-weight:900;animation:pop .35s}.feedback .row{gap:10px}.stat{flex:1;border:2px solid var(--c);border-radius:16px;overflow:hidden;background:var(--card)}.stat div{background:var(--c);color:#fff;font-size:12px;font-weight:900;padding:6px 0;letter-spacing:.05em}.stat b{display:block;color:var(--c);font-size:22px;font-weight:900;padding:12px 0}@keyframes xpfloat{0%{opacity:0;transform:translate(-50%,20px) scale(.5)}25%{opacity:1;transform:translate(-50%) scale(1.1)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-40px) scale(1)}}.unit-banner{display:flex;align-items:center;gap:12px;border-radius:20px;padding:16px;color:#fff;text-decoration:none;text-align:left;background:var(--uc);box-shadow:0 4px color-mix(in srgb,var(--uc) 75%,black);border:0;width:100%;cursor:pointer}.unit-banner.locked{filter:saturate(.4);opacity:.85}.unit-banner small{font-size:12px;font-weight:900;letter-spacing:.1em;opacity:.8}.unit-banner .t{font-size:21px;font-weight:900}.unit-banner .em{margin-left:auto;font-size:38px;width:62px;height:62px;border-radius:18px;background:#ffffff2e;display:grid;place-items:center;flex:none}.trail{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0}.node{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;cursor:pointer;text-decoration:none;color:var(--ink)}.node .c{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;background:var(--nc);box-shadow:0 5px color-mix(in srgb,var(--nc) 75%,black);transition:transform .1s}.node:active .c{transform:translateY(4px);box-shadow:0 1px color-mix(in srgb,var(--nc) 75%,black)}.node.open .c{--nc: var(--card-alt);color:var(--muted)}.node.locked .c{--nc: var(--line);color:var(--muted)}.node.current .c{outline:6px solid color-mix(in srgb,var(--nc) 35%,transparent);outline-offset:6px;animation:pulse 1.6s infinite}.node .lbl{font-size:12px;font-weight:800;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node.locked .lbl{color:var(--muted)}.start-tag{font-size:13px;font-weight:900;color:var(--nc);background:var(--card);border:2px solid var(--line);border-radius:99px;padding:4px 12px;animation:bounce 1.6s infinite}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:40;display:grid;place-items:end center}.sheet{width:100%;max-width:720px;max-height:85vh;overflow:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));animation:up .3s}.wchip{display:inline-flex;gap:4px;padding:6px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:14px;margin:0 6px 6px 0}.scen{border:2px solid color-mix(in srgb,var(--sc) 60%,transparent);box-shadow:0 4px color-mix(in srgb,var(--sc) 50%,transparent)}.scen .em{width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--sc) 15%,transparent);display:grid;place-items:center;font-size:28px}.scen .who{font-size:11px;font-weight:900;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent);padding:3px 8px;border-radius:99px}.hero{border-radius:24px;padding:18px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 4px 0 var(--accent-deep)}.hero a{display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--accent);border-radius:14px;height:50px;padding:0 16px;font-weight:900;text-decoration:none;margin-top:14px}