@import url('/fonts.css');
:root{--paper:#f9f6ef;--ink:#4f6055;--muted:#737c71;--sage:#dfe9d8;--sage-strong:#647d62;--pink:#f0deda;--lavender:#e7e1f0;--blue:#dfeaf0;--yellow:#f2e8c9;--line:#e5e6db;--radius:28px;--shadow:0 14px 42px #7987740d;font-family:'Nunito', 'Trebuchet MS',ui-rounded,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 10% 46%,#e7ebdc55,transparent 34%),radial-gradient(ellipse at 90% 14%,#f1e7d944,transparent 29%),var(--paper);font-size:16px;line-height:1.55}body:after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23656550' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #8c9eaf;outline-offset:5px}button{transition:transform .18s,background .18s}button:not(:disabled):hover{transform:translateY(-2px)}button:active:not(:disabled){transform:scale(.98)}a{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.16;letter-spacing:-.04em;font-weight:700}h1{font-size:clamp(40px,4.3vw,64px)}h2{font-size:clamp(30px,3vw,44px)}h3{font-size:25px}p{color:var(--muted)}[hidden]{display:none!important}.site-header{max-width:1280px;margin:auto;padding:30px 56px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:28px;letter-spacing:-1.5px;font-weight:800}.brand img{width:40px;height:40px;transform:rotate(-8deg)}.brand-dot{color:#bba579;font-size:23px;display:inline-block;transform:translate(3px,-10px)}.header-actions{display:flex;align-items:center;gap:13px}.connection{font-size:12px;letter-spacing:.02em;color:#778570;display:flex;align-items:center;gap:8px}.connection:before{content:'';width:6px;height:6px;background:#a5b997;border-radius:50%}.icon-button{border:1px solid var(--line);width:44px;height:44px;border-radius:50%;background:#ffffff66;display:inline-flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.icon-button svg{width:20px;height:20px}.quiet-button{padding:10px 15px;min-height:44px;border:1px solid var(--line);border-radius:100px;background:transparent;font-size:13px}.site-footer{max-width:1168px;margin:50px auto 0;padding:23px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:#858d7f;gap:20px}.site-footer span span{color:#ad8f82;font-size:16px;margin-left:5px}main{max-width:1168px;margin:auto;outline:none}.hero{display:grid;grid-template-columns:1.04fr 1fr;gap:15px;align-items:center;min-height:510px}.hero-copy{padding:38px 0 46px;position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:#78896c;margin-bottom:24px}.eyebrow:before{content:'✦';font-size:17px;color:#aca279}.hero h1{max-width:550px;margin-bottom:23px}.hero h1 em{font-style:normal;position:relative;color:#839475;white-space:nowrap}.hero h1 em:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:13px;border-top:5px solid #d7dec5;border-radius:50%;transform:rotate(-2deg);opacity:.8}.hero-copy>p{max-width:416px;font-size:17px;line-height:1.8;margin-bottom:28px}.hero-art{position:relative;margin:-10px -30px 0 -35px;align-self:stretch;display:flex;align-items:center}.hero-art img{width:100%;height:auto}.art-caption{position:absolute;bottom:36px;left:25%;transform:rotate(-5deg);color:#84917d;font-size:14px;font-style:italic}.primary{border:1px solid #c1d1b5;border-bottom:3px solid #b8caaa;border-radius:17px;background:var(--sage);padding:15px 24px;font-weight:700;min-height:56px;display:inline-flex;gap:12px;align-items:center;justify-content:center;box-shadow:0 4px 0 #dce4d52b;text-decoration:none}.primary:hover{background:#d4e2ca}.primary svg{width:22px;height:22px}.tiny-note{display:flex;gap:6px;align-items:center;font-size:11px;margin-top:13px;color:#88917f}.secondary{padding:12px 19px;min-height:48px;border:1px solid #dcded3;border-radius:15px;background:#fff9;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600}.text-button{border:0;background:transparent;padding:12px;font-size:13px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.journey{padding:27px 0 10px}.section-label{display:flex;align-items:center;gap:15px;margin-bottom:22px}.section-label h2{font-size:13px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;white-space:nowrap}.section-label:after{content:'';height:1px;background:var(--line);flex:1}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step{display:flex;gap:17px;padding:25px 24px;border:1px solid #e6e4d9;border-radius:22px;background:#fffcf655;box-shadow:var(--shadow)}.step-icon{width:53px;height:53px;border-radius:18px;background:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-5deg);font-size:25px}.step:nth-child(2) .step-icon{background:var(--blue);transform:rotate(4deg)}.step:nth-child(3) .step-icon{background:var(--yellow)}.step-icon svg{width:27px;height:27px}.step h3{font-size:16px;letter-spacing:-.01em;margin:3px 0 7px}.step p{font-size:12px;line-height:1.7}.welcome-line{display:flex;align-items:center;gap:14px;margin:38px 0 24px}.avatar{width:65px;height:65px;object-fit:cover;border-radius:50%;border:5px solid #fdfbf6;box-shadow:0 0 0 1px var(--line)}.welcome-line p{font-size:13px}.menu-heading{font-size:46px;margin-bottom:10px}.menu-sub{font-size:17px}.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:35px 0 28px}.category{border:1px solid #d8e0d0;border-radius:32px;background:linear-gradient(130deg,#e5eddc,#eef0e5);padding:34px;text-align:left;position:relative;overflow:hidden}.category.letters{background:linear-gradient(130deg,#eee4e5,#f3eeeb);border-color:#e4d9d7}.category .symbol{display:block;font-size:64px;font-weight:800;line-height:1.2;letter-spacing:-.07em;color:#8fa383;margin:5px 0 36px}.category.letters .symbol{color:#bd9b9c}.category h2{font-size:29px;letter-spacing:-.025em}.category p{font-size:14px;margin:8px 0 20px}.category .arrow{position:absolute;right:30px;top:35px;font-size:28px}.progress-track{height:7px;background:#fff9;border-radius:9px;overflow:hidden}.progress-track span{height:100%;display:block;background:#a5b996;border-radius:9px}.letters .progress-track span{background:#c6aaa9}.category small{font-size:12px;display:block;margin-top:9px}.menu-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.companion{padding:18px 23px;border-radius:22px;background:#fff8;border:1px dashed #d6ddcd;display:flex;align-items:center;gap:15px;flex:1}.companion img{width:48px;height:48px;object-fit:cover;border-radius:15px}.companion p{font-size:13px}.companion strong{display:block;font-size:14px}.learn{max-width:900px;margin:18px auto 0}.learn-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.learn-header>div{display:flex;align-items:center;gap:13px}.learn-progress{display:flex;gap:5px;margin:23px 0 27px}.learn-progress i{height:7px;background:#e7e8de;border-radius:5px;flex:1}.learn-progress i.done{background:#abc09a}.learn-progress i.current{background:#d9c28e}.learn-title{text-align:center}.learn-title h1{font-size:34px}.learn-title p{margin-top:8px;font-size:14px}.practice-grid{display:grid;grid-template-columns:1fr 240px;gap:28px;margin-top:25px;align-items:start}.board-wrap{border-radius:28px;border:1px solid #e0e3d7;background:#fffdf8;box-shadow:var(--shadow);overflow:hidden;position:relative}.board-top{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eeeade;font-size:12px;color:#7c8974}.board-top strong{font-size:14px}.board-wrap canvas{display:block;width:100%;aspect-ratio:1;touch-action:none;cursor:crosshair;background:linear-gradient(transparent 49.7%,#d6ddd536 50%,transparent 50.3%);border-radius:0 0 28px 28px}.board-wrap.success{box-shadow:0 0 0 3px #c5d9b6,0 10px 40px #a5bc8f20}.practice-side{padding-top:4px}.practice-side .buddy-card{background:#eff0e5;border-radius:23px;padding:23px;text-align:center}.buddy-card img{width:85px;height:85px;object-fit:cover;border-radius:50%;border:5px solid #fffbef;margin-bottom:9px}.buddy-card p{font-size:14px;color:#6b7b62}.modes{padding:18px 0}.modes label{display:block;font-size:12px;font-weight:700;margin:0 0 9px}.segmented{display:flex;background:#eaece3;padding:4px;border-radius:13px;gap:3px}.segmented button{border:0;flex:1;min-height:43px;font-size:12px;border-radius:10px;background:transparent;padding:7px}.segmented button.active{background:#fffdf7;box-shadow:0 2px 6px #4d5d4720}.mode-info{font-size:12px;margin-top:10px;line-height:1.65}.keyboard-label{font-size:12px;display:block;margin:15px 0 7px}.keyboard-input{width:100%;height:51px;border:1px solid #d9ded3;background:#fffdf7;border-radius:13px;text-align:center;font-size:20px;color:var(--ink)}.canvas-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px}.feedback{min-height:50px;text-align:center;padding:16px 8px 0;font-size:16px;font-weight:700;color:#708463}.small{font-size:12px}.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.album-item{background:#fffcf6;border-radius:22px;padding:12px;border:1px solid var(--line);overflow:hidden}.album-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:15px}.album-item h3{font-size:17px;margin:13px 5px 7px;letter-spacing:-.02em}.album-item p{font-size:12px;margin:5px}.empty{padding:50px 20px;text-align:center;background:#f0eee5;border-radius:25px;margin:26px 0}.empty p{margin:15px}.pill{display:inline-flex;align-items:center;gap:6px;background:#eff0e5;border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:12px}.skip{position:absolute;left:10px;top:-100px;z-index:50;background:white;padding:12px}.skip:focus{top:10px}dialog{border:1px solid #e4e5d9;border-radius:30px;padding:35px;max-width:540px;width:calc(100% - 28px);background:var(--paper);color:var(--ink);box-shadow:0 30px 130px #40503b44;max-height:90dvh;overflow:auto}dialog::backdrop{background:#59664c55;backdrop-filter:blur(7px)}.modal-close{position:absolute;right:13px;top:13px;width:37px;height:37px}.modal-heading{padding-right:15px;font-size:29px;margin:10px 0 15px}.modal-copy{font-size:14px;line-height:1.7;margin:14px 0}.form-field{display:block;font-size:13px;font-weight:700;margin:18px 0 7px}.form-input{width:100%;padding:12px 14px;min-height:50px;border:1px solid #d3dbca;border-radius:12px;background:#fffdf9;color:var(--ink)}.check-label{display:flex;align-items:flex-start;gap:10px;font-size:13px;margin:17px 0;line-height:1.6}.check-label input{width:20px;height:20px;accent-color:#7b916d;flex-shrink:0}.upload-preview{display:block;width:130px;height:130px;object-fit:cover;border-radius:28px;margin:15px auto}.full{width:100%}.upload-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.reward{text-align:center}.reward .eyebrow{margin:5px 0 15px}.reward h2{font-size:35px}.reward p{font-size:14px;margin:10px 0 17px}.reward-image{width:100%;aspect-ratio:1;border-radius:23px;object-fit:cover;margin-top:12px}.reward-placeholder{width:100%;aspect-ratio:1;border-radius:23px;background:#e7ebdd;display:grid;place-items:center;margin:18px 0;font-size:55px;animation:breathe 2s ease-in-out infinite}.reward-status{font-size:12px;color:#838b7d;margin-top:8px}.parent-section{border-top:1px solid var(--line);padding-top:17px;margin-top:22px}.parent-section h3{font-size:18px}.parent-section p{font-size:12px;margin:10px 0}.danger{color:#9b6e61}.install-note{background:#efebdc;border-radius:14px;padding:12px;font-size:12px;margin-top:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:15px;background:#fdfcf6;border:1px solid #d4deca;box-shadow:0 8px 40px #3e493822;z-index:100;font-size:14px;max-width:90vw;text-align:center;display:none}#toast.show{display:block}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}#confetti i{position:absolute;top:-30px;font-style:normal;animation:fall 1.7s ease-in forwards;font-size:22px;color:#b5c8a4}#confetti i:nth-child(3n){color:#d9b7b2}#confetti i:nth-child(3n+1){color:#d2bd87}@keyframes fall{to{transform:translateY(100vh) rotate(260deg);opacity:0}}@keyframes breathe{50%{opacity:.5;transform:scale(.97)}}
@media(min-width:1450px){.hero{min-height:560px}}@media(max-width:1250px){main{margin:0 45px}.site-footer{margin:45px 45px 0}.site-header{padding:25px 45px}.hero-art{margin-right:-20px}.hero h1{font-size:52px}}@media(max-width:850px){.connection{display:none}.hero h1{font-size:44px}.hero-copy>p{font-size:15px}.hero{min-height:440px}.step{padding:20px 15px;gap:10px}.step-icon{width:42px;height:42px}.step h3{font-size:14px}.practice-grid{grid-template-columns:1fr 210px;gap:18px}.art-caption{bottom:65px}.site-footer{font-size:10px}.category{padding:25px}}
@media(max-width:650px){.site-header{padding:20px 22px}.brand{font-size:24px}.brand img{width:33px;height:33px}.header-actions{gap:7px}.header-actions .icon-button{width:38px;height:38px}.quiet-button{font-size:11px;padding:8px 11px}.hero{display:flex;flex-direction:column;gap:0}.hero-copy{padding:30px 0 0;text-align:center}.eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:20px}.hero h1{font-size:43px}.hero-copy>p{font-size:15px;max-width:335px;margin:22px auto}.hero-copy .primary{padding:14px 24px}.tiny-note{justify-content:center;font-size:10px}.hero-art{width:100%;max-width:440px;margin:-10px 0 -12px}.art-caption{bottom:26px;font-size:12px}main{margin:0 22px}.journey{padding-top:5px}.steps{grid-template-columns:1fr;gap:10px}.step{padding:17px 19px;align-items:center;gap:17px}.step h3{font-size:15px;margin:0 0 4px}.step p{font-size:12px}.step-icon{width:45px;height:45px}.site-footer{margin:30px 22px 0;padding-top:20px;display:block;text-align:center;font-size:10px}.site-footer>span{display:block;margin-bottom:8px}.menu-heading{font-size:36px}.menu-sub{font-size:14px}.category-grid{gap:13px;margin-top:26px}.category{padding:20px 17px;border-radius:24px}.category .symbol{font-size:47px;margin-bottom:25px}.category .arrow{right:17px;top:22px;font-size:22px}.category h2{font-size:24px}.category p{font-size:12px;min-height:38px}.category small{font-size:11px}.menu-bottom{flex-direction:column;align-items:stretch;gap:12px}.welcome-line{margin-top:20px}.learn{margin-top:4px}.learn-header .avatar{width:41px;height:41px;border-width:3px}.learn-header{gap:8px;font-size:12px}.learn-header .pill{font-size:10px;padding:7px 9px}.learn-title h1{font-size:28px}.learn-title p{font-size:12px}.learn-progress{gap:3px;margin:18px 0 22px}.practice-grid{display:flex;flex-direction:column;gap:12px;margin-top:17px}.board-column{width:100%}.practice-side{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.practice-side .buddy-card{display:none}.modes{padding:0}.keyboard-label{margin-top:0}.keyboard-input{height:48px}.mode-info{font-size:11px}.canvas-actions .secondary{font-size:12px;padding:10px 12px;min-height:44px}.canvas-actions .primary{min-height:46px;padding:10px 15px;font-size:13px}.feedback{font-size:14px;padding-top:12px;min-height:40px}.board-top{padding:11px 16px}.album-grid{grid-template-columns:1fr 1fr;gap:12px}.album-item{padding:9px;border-radius:17px}.album-item h3{font-size:15px}.album-item .text-button{font-size:11px;padding:8px}.modal-heading{font-size:25px}dialog{padding:29px 22px}.reward h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#confetti{display:none}}
@media(max-width:400px){.hero h1{font-size:36px}.canvas-actions{flex-wrap:wrap}.canvas-actions>.primary{margin-left:auto}.practice-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.keyboard-input{min-width:0}.segmented{flex-wrap:wrap}.segmented button{flex:1 1 auto}}

/* Große Belohnungsansicht ohne Beschneiden, auch im Hochformat. */
.language-switch{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.read-aloud{margin-bottom:14px;min-height:44px}
dialog.image-dialog{max-width:1200px;width:calc(100% - 24px);padding:30px;max-height:96dvh}
.image-dialog .reward-image{display:block;width:100%;height:auto;max-height:72dvh;object-fit:contain;border-radius:18px}
.image-dialog .reward .eyebrow{margin:0 0 6px}.image-dialog .reward h2{font-size:28px}
.image-dialog .reward p{margin:7px 0}.image-dialog .modal-actions{justify-content:center;margin-top:14px}
@media(max-width:650px){.site-header{flex-wrap:wrap;gap:8px 12px}.header-actions{margin-left:auto}.brand{font-size:22px}.language-switch{font-size:11px;padding:8px}.image-dialog .reward-image{max-height:70dvh}dialog.image-dialog{padding:30px 12px 18px}.read-aloud{padding:9px 16px}.learn-header strong{font-size:11px}}

.image-dialog .modal-actions{position:sticky;bottom:-30px;background:var(--paper);padding:12px 0;z-index:1}@media(max-width:650px){.image-dialog .modal-actions{bottom:-18px}}