@font-face{font-family:drbuch-webfont;src:url(/assets/drbuch-webfont-D7M3A7dx.woff2)format("woff2"),url(/assets/drbuch-webfont-xbXnFeLX.woff)format("woff");font-weight:400;font-style:normal;font-display:swap}.login-screen{align-items:center;gap:var(--s-3);max-width:640px;padding:var(--s-5) var(--s-7);text-align:center;flex-direction:column;margin:0 auto;display:flex}.login-title{color:var(--ink-muted);font-size:var(--fs-body);letter-spacing:.01em;margin:0 0 var(--s-2);font-weight:600}.login-actions{align-items:flex-end;gap:var(--s-4);margin-top:var(--s-6);display:flex}.login-actions button{box-sizing:border-box}.guest-btn{aspect-ratio:1767/1260;height:150px;padding:0 var(--s-3) 58px;border-radius:var(--r-key);cursor:pointer;box-shadow:none;background:url(/assets/images/UI/UI_Wegweiser_links1.webp) 50%/contain no-repeat;border:none;justify-content:center;align-items:center;font-family:drbuch-webfont,sans-serif;font-size:22px;line-height:1.15;transition:transform .1s;display:inline-flex}@media (hover:hover){.guest-btn:hover{transform:translateY(-2px)}}.guest-btn:active{transform:translateY(3px)}.login-screen .go-btn{aspect-ratio:1869/1181;min-width:64px;height:150px;min-height:64px;padding:5px var(--s-3) 50px;border-radius:var(--r-key);cursor:pointer;box-shadow:none;color:var(--ink);background:url(/assets/images/UI/UI_Wegweiser_rechts1.webp) 50%/contain no-repeat;border:none;justify-content:center;align-items:center;font-family:drbuch-webfont,sans-serif;font-size:22px;line-height:1.15;transition:transform .1s;display:inline-flex}@media (hover:hover){.login-screen .go-btn:hover:not(:disabled){transform:translateY(-2px)}}.login-screen .go-btn:active:not(:disabled){transform:translateY(3px)}.login-screen .go-btn:disabled{opacity:.4;cursor:default;transform:none}.welcome-screen{align-items:center;gap:var(--s-5);max-width:520px;padding:var(--s-5) var(--s-7);text-align:center;flex-direction:column;margin:0 auto;display:flex}.welcome-avatar{filter:drop-shadow(0 8px 18px #4a453c24);width:clamp(88px,16vw,148px);height:clamp(88px,16vw,148px)}.welcome-avatar img{object-fit:contain;width:100%;height:100%}.welcome-greeting{color:var(--ink-muted);font-size:var(--fs-body);margin:0;font-weight:600}.welcome-screen .cta{border-radius:var(--r-pill);cursor:pointer;background:var(--leaf);min-width:64px;min-height:64px;color:var(--surface);padding:var(--s-4) var(--s-7);box-shadow:var(--shadow-press);transition:transform .12s ease, background var(--ease);border:none;font-size:20px;font-weight:600}@media (hover:hover){.welcome-screen .cta:hover{background:var(--leaf-hover)}}.welcome-screen .cta:active{box-shadow:0 3px 0 var(--leaf-deep);transform:translateY(3px)}.offline-confirm-screen{align-items:center;gap:var(--s-5);max-width:520px;padding:var(--s-5) var(--s-7);text-align:center;flex-direction:column;margin:0 auto;display:flex}.offline-confirm-question{color:var(--ink-muted);font-size:var(--fs-body);margin:0;font-weight:600}.offline-confirm-actions{align-items:center;gap:var(--s-5);display:flex}.offline-ja-btn{cursor:pointer;border-radius:var(--r-tile);background:0 0;border:none;padding:0;transition:transform .12s}@media (hover:hover){.offline-ja-btn:hover{transform:translateY(-3px)}}.offline-ja-btn:active{transform:scale(.95)}.offline-nein-btn{border-radius:var(--r-pill);background:var(--surface);min-width:64px;min-height:64px;box-shadow:var(--shadow-tile);color:var(--ink);cursor:pointer;border:none;font-size:28px;transition:transform .12s}@media (hover:hover){.offline-nein-btn:hover{transform:translateY(-2px)}}.offline-nein-btn:active{transform:translateY(3px)}@media (prefers-reduced-motion:reduce){.guest-btn,.login-screen .go-btn,.welcome-screen .cta,.offline-ja-btn,.offline-nein-btn{transition:none}}.exercise-stage{align-items:center;gap:var(--s-6);max-width:780px;padding:var(--s-7) clamp(var(--s-6), 6vw, 56px);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);flex-direction:column;margin:0 auto;display:flex}.exercise-options-grid{gap:var(--s-5);justify-content:center;width:100%;display:grid}.exercise-options-grid[data-option-count="2"]{grid-template-columns:repeat(2,1fr)}.exercise-options-grid[data-option-count="3"]{grid-template-columns:repeat(3,1fr)}.exercise-options-grid[data-option-count="4"]{grid-template-columns:repeat(2,1fr)}.exercise-choice{min-width:64px;min-height:64px;padding:var(--s-4);background:var(--surface);border:3px solid var(--sand);border-radius:var(--r-tile);cursor:pointer;box-shadow:var(--shadow-tile);justify-content:center;align-items:center;transition:transform .18s,box-shadow .18s,opacity .5s,border-color .2s,background .2s;display:flex}@media (hover:hover){.exercise-choice:not(:disabled):hover{border-color:var(--leaf-border-soft);transform:translateY(-3px);box-shadow:0 8px 18px #4a453c1f}}.exercise-choice:not(:disabled):active{transform:translateY(-1px)scale(.98)}.exercise-choice:disabled{cursor:default}.exercise-image-tile-emoji{font-size:clamp(56px,9vw,104px);line-height:1}.exercise-image-tile-img{object-fit:contain;width:clamp(120px,20vw,200px);height:clamp(120px,20vw,200px)}.exercise-choice-dimmed{opacity:.28;box-shadow:none;transform:none}.exercise-choice-correct-pulse{border-color:var(--leaf);background:#e7f2ea;animation:1.4s exercise-pulse;transform:translateY(-20px)}.exercise-choice-chosen-correct{border-color:var(--leaf);background:#e7f2ea}@keyframes exercise-pulse{0%,to{transform:translateY(-20px)scale(1)}30%{transform:translateY(-20px)scale(1.12)}60%{transform:translateY(-20px)scale(1.04)}}.verification-card{align-items:center;gap:var(--s-5);flex-direction:column;display:flex}.verification-buttons{gap:var(--s-6);display:flex}.verification-button{border-radius:var(--r-card);width:120px;min-height:96px;color:var(--surface);cursor:pointer;box-shadow:var(--shadow-tile);border:3px solid #0000;font-size:46px;transition:transform .15s,box-shadow .15s,background .2s,border-color .2s,opacity .5s}.verification-button-yes{background:var(--leaf)}.verification-button-no{background:var(--berry)}@media (hover:hover){.verification-button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 8px 18px #4a453c29}}.verification-button:not(:disabled):active{transform:translateY(-1px)scale(.98)}.sentence-text{text-align:center;font-family:drbuch-webfont,sans-serif;font-size:48px;line-height:1.6}.format-hint-banner{max-width:780px;margin:0 auto var(--s-2);padding:var(--s-3) var(--s-6);border-radius:var(--r-pill);background:var(--sun-bg);border:2px solid var(--sun-border);color:var(--sun-ink);text-align:center;box-shadow:var(--shadow-tile);font-size:22px;font-weight:600}.matching-board{align-items:center;gap:var(--s-6);flex-direction:column;width:100%;display:flex;position:relative}.matching-row{gap:var(--s-5);flex-wrap:wrap;justify-content:center;width:100%;display:flex}.matching-tile-selected{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leaf-ring)}.matching-lines{pointer-events:none;opacity:1;width:100%;height:100%;transition:opacity .4s;position:absolute;inset:0;overflow:visible}.matching-lines--revealed{opacity:0}.matching-line{stroke:var(--ink);stroke-width:3.5px;stroke-linecap:round;fill:none;filter:url(#matching-line-sketch);animation:.32s ease-out matching-line-draw}@keyframes matching-line-draw{0%{opacity:0}to{opacity:1}}.intro-card{border:3px solid var(--sand-soft)}.intro-card-button{min-height:64px;margin-top:var(--s-2);border-radius:var(--r-pill);cursor:pointer;background:var(--leaf);color:var(--surface);padding:var(--s-4) var(--s-7);box-shadow:var(--shadow-press);border:none;font-size:20px;font-weight:600;transition:transform .12s,background .18s}@media (hover:hover){.intro-card-button:hover{background:var(--leaf-hover)}}.intro-card-button:active{box-shadow:0 3px 0 var(--leaf-deep);transform:translateY(3px)}@media (prefers-reduced-motion:reduce){.exercise-choice,.verification-button,.intro-card-button{transition:none}.matching-line{animation:none}.matching-lines{transition:none}}.exercise-image-tile-token{width:clamp(120px,20vw,200px);height:clamp(120px,20vw,200px);display:inline-flex}.exercise-image-tile-token>svg{width:100%;height:100%}.phrase-display{flex-wrap:wrap;justify-content:center;column-gap:.35em;display:inline-flex}.gouache-stroke{stroke-linecap:round;stroke-linejoin:round}.avatar-badge{box-shadow:none;background:url(/assets/images/UI/UI_Avatar.webp) 50%/contain no-repeat;border:none;justify-content:center;align-items:center;display:flex}.avatar-badge img{object-fit:contain;width:78%;height:78%}.avatar-badge-normal{width:64px;height:64px}.avatar-badge-large{width:92px;height:92px}.update-notice{border-radius:var(--r-pill,999px);background:var(--surface,#fffdf7);border:2px solid var(--leaf,#3f9d5a);box-shadow:var(--shadow-card,0 4px 14px #0000001f);font-size:var(--fs-body,17px);z-index:1000;align-items:center;gap:10px;padding:10px 16px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.update-notice-button{border-radius:var(--r-pill,999px);background:var(--leaf,#3f9d5a);color:#fff;font:inherit;cursor:pointer;border:none;padding:8px 14px}
