:root{--action:#49653d;--action-hover:#354c2e}button.primary{background:var(--action);color:#fff;border-color:var(--action);box-shadow:0 3px 0 #30452a}button.primary:hover{background:var(--action-hover)}button.primary:disabled{background:#e3e7dc;color:#68715f;box-shadow:none;border-color:#d6decd}button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a96e2e;outline-offset:4px}.brand img{object-fit:cover;border-radius:14px}.hero-copy #upload-start{display:block;margin:14px 0}.hero-art .art-caption{background:#faf6ecee;padding:6px 12px;border-radius:12px;color:#405238}.dashboard{max-width:1000px;margin:auto}.dashboard h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:0 0 10px}.dashboard .welcome-line{align-items:center}.dashboard .welcome-line .avatar{width:72px;height:72px}.resume-lesson{margin:8px 0 25px;min-height:58px}.activity-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:15px 0 25px}.activity-card{border:1px solid #d9dfce;border-radius:25px;padding:16px;background:#fffdf7;color:#405238;text-align:left;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 3px 0 #e8e9df;transition:transform .15s}.activity-card:hover{transform:translateY(-3px)}.activity-card strong{font-size:20px;line-height:1.25}.activity-card small{font-size:15px}.activity-art{height:135px;border-radius:16px;background:#eff0e8;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;font-size:48px;font-weight:750;width:100%}.activity-art img{height:100%;max-width:100%;object-fit:cover;min-width:0}.activity-art img+img{width:40%;height:80%}.activity-art:has(img+img)>img{width:40%;height:80%;object-fit:contain}.numbers-art{background:#e2eace;color:#4b6836}.letters-art{background:#f5e4cf;color:#7c552d}.math-art{background:#dfecee;color:#376167}.name-art{background:#eadff0;color:#795a86}.dashboard-footer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:20px 0}.dashboard-footer button{min-height:50px}.learn{max-width:1000px;margin:auto}.learn .practice-grid{grid-template-columns:minmax(0,600px) minmax(200px,1fr);align-items:start}.learn-title{margin:12px 0}.learn-title h1{font-size:32px;margin:8px}.learn-title>p{margin:6px}.learn .practice-side{background:#f0f2e9;border:1px solid #dce2d1;border-radius:18px;padding:16px;display:block}.practice-side>summary{cursor:pointer;min-height:35px;font-size:17px;font-weight:600}.practice-options{display:grid;gap:20px;margin-top:15px}.practice-options .buddy-card{display:none}.learn .board-wrap{max-width:580px;margin:auto}.learn-progress{max-width:190px;margin:16px auto;gap:9px}.learn-progress i{height:10px;border-radius:10px}.canvas-actions{gap:12px}.canvas-actions button{min-height:50px}.parent-page{max-width:740px;margin:16px auto 40px}.parent-page>h2{margin-top:22px}.parent-group{border:1px solid #d7dfcd;background:#fffdf7;border-radius:20px;margin:20px 0;padding:20px}.parent-group>summary{cursor:pointer;font-size:21px;font-weight:650;min-height:35px}.parent-section{padding:20px 0}.parent-section p{font-size:16px;line-height:1.6}.parent-section .small{font-size:14px}.parent-section select,.parent-section input{margin-bottom:15px}.parent-section #voice-preview{margin-top:15px}.name-setup,.name-lesson{max-width:960px;margin:20px auto 40px}.name-setup{max-width:620px}.name-setup h1,.name-lesson h1{font-size:clamp(27px,4vw,40px);line-height:1.2}.name-setup form{background:#fffdf7;border:1px solid #d9dfce;border-radius:22px;padding:22px;margin:22px 0}.name-setup input{font-size:24px}.name-word{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;font-size:36px;line-height:1.3;margin:18px 0;color:#405238}.name-word span{min-width:12px}.name-board{max-width:440px;margin:auto}.name-board canvas,.name-letter-board canvas{width:100%;aspect-ratio:1;display:block;background:#fffdf7;touch-action:none;border-radius:18px;border:1px solid #d0d9c5}.name-lesson [data-exercise]>p{text-align:center}.name-lesson .canvas-actions{justify-content:center;margin:20px 0}.name-word-boards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.name-letter-board{width:180px;border:2px solid transparent;border-radius:18px;padding:8px;text-align:center}.name-letter-board.done{border-color:#8aab71;background:#edf2e6}.name-letter-board strong{font-size:24px}.name-letter-board button{min-height:48px}.name-space{flex-basis:100%;height:0}.name-finish-art{display:block;width:min(100%,440px);margin:20px auto;border-radius:22px}.name-lesson .modal-actions{justify-content:center}.name-lesson .learn-header{gap:10px}.name-lesson .learn-header strong{font-size:15px}.name-lesson .learn-header button{min-height:48px}
@media(max-width:700px){.activity-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.activity-art{height:110px;font-size:38px}.activity-card{padding:12px;border-radius:20px}.activity-card strong{font-size:18px}.dashboard .welcome-line .avatar{width:58px;height:58px}.learn .practice-grid{display:flex;flex-direction:column}.learn .practice-side{width:100%;box-sizing:border-box;display:block}.learn .practice-options{grid-template-columns:1fr}.learn .learn-title h1{font-size:25px}.learn .learn-title p{font-size:15px}.learn .board-wrap{max-width:min(100%,48dvh)}.learn .canvas-actions{display:flex;flex-wrap:wrap;justify-content:center}.learn .canvas-actions>div{display:flex;gap:8px}.learn .canvas-actions button{min-height:48px;font-size:14px;padding:10px 14px}.parent-group{padding:16px}.parent-group>summary{font-size:19px}.hero-copy #upload-start{margin:12px auto}.name-letter-board{width:calc(50% - 12px);max-width:210px;box-sizing:border-box}.name-lesson .learn-header strong{font-size:13px}.name-board{max-width:min(100%,48dvh)}.name-lesson .canvas-actions{flex-wrap:wrap}.name-lesson .canvas-actions button{font-size:15px}.name-word{font-size:30px}.mode-info{font-size:14px}.tiny-note{font-size:13px}.dashboard-footer{align-items:stretch;flex-direction:column}}

@media(min-width:701px){.learn-title{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;column-gap:20px;max-width:1000px;margin:8px auto 12px}.learn-title h1{grid-column:1;grid-row:1;margin:0;font-size:30px}.learn-title>p{grid-column:1;font-size:15px}.learn-title #read-aloud{grid-column:2;grid-row:1/3}.learn .board-wrap{max-width:min(100%,calc(100dvh - 370px))}.learn .board-top{padding:10px 16px}.learn .learn-progress{margin:10px auto}.learn .practice-grid{margin-top:12px;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr)}}
.parent-status{font-size:13px;display:inline-block;border-radius:12px;background:#e9eddf;padding:5px 10px;font-weight:500;margin-left:8px}.name-board{max-width:min(440px,calc(100dvh - 370px))}@media(max-width:700px){.name-board{max-width:min(100%,45dvh)}.parent-status{margin:6px 0 0}}

.access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px}.access-grid .check-label{margin:8px 0;padding:8px;border:1px solid var(--line);border-radius:12px}.character-example{max-width:600px;margin:12px auto;font-size:17px;color:var(--ink)}
.context-tasks .context-display{font-size:clamp(28px,6vw,44px);font-weight:700;line-height:1.3;text-align:center;margin:20px 0;letter-spacing:.04em}.context-tasks .quantity-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:12px 0}.context-tasks .quantity-unknown{min-width:64px;min-height:64px;border:2px dashed #a3b68c;border-radius:14px;display:grid;place-items:center;font-size:32px;color:#59664c}.character-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:16px 0}.character-key{min-width:72px;min-height:72px;font-size:34px;font-weight:700;border:2px solid #a3b68c;border-radius:18px;background:#fffdf7;color:#405238;cursor:pointer}.character-key:focus-visible{outline:3px solid #7b916d;outline-offset:2px}.character-key.is-right{background:#dfe9d3;border-color:#7b916d}.character-key.is-wrong{background:#f3e6dd;border-color:#c9a48a}.character-key:disabled{opacity:.7;cursor:default}.context-tasks .adult-prompt{color:#59664c;font-style:italic}.context-tasks .observe-card{text-align:center}
.context-tasks .quantity-row .ten-frames{flex:1 1 150px;max-width:225px;width:100%}.context-tasks .ten-frame{width:100%;min-width:120px}.context-tasks .context-display{font-size:clamp(24px,9vw,44px);letter-spacing:.02em;overflow-wrap:anywhere}.character-key{flex:1 1 64px;max-width:140px;min-width:56px}.context-tasks .quantity-row{gap:10px;align-items:flex-start}
.build-field{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}.build-frame{max-width:270px;width:100%}.build-dot{width:100%;aspect-ratio:1;min-width:0;padding:0;border:2px dashed #b9c8ad;border-radius:50%;background:#f6f7f0;cursor:pointer}.build-dot.filled{background:#a8bf96;border:2px solid #91ac7c}.build-dot.fixed{background:#d9c9a8;border:2px solid #c2ad82;cursor:default}.build-dot:focus-visible{outline:3px solid #7b916d;outline-offset:2px}.context-tasks .build-count{text-align:center;font-weight:700;color:#59664c}.context-tasks .small-display{font-size:clamp(20px,5.5vw,30px);letter-spacing:0}
.listen-options{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:16px 0}.listen-option{display:flex;align-items:center;gap:6px}.listen-speak{min-width:48px;min-height:48px;padding:0 10px}.listen-pick{font-size:clamp(20px,5vw,30px);min-width:96px;padding:0 14px;letter-spacing:.06em}.blend-line{display:flex;justify-content:center;gap:clamp(14px,6vw,40px);font-size:clamp(34px,10vw,60px);font-weight:700;margin:20px 0;transition:gap 1.2s ease}.blend-line.together{gap:0}.blend-letter{display:inline-block;min-width:1ch;text-align:center}.context-tasks .preview-note{text-align:center;color:#796b4f;margin:0 0 8px}
.stage-note{text-align:center;margin:4px 0 0;color:#8a7a5a}
.profile-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.profile-chip{border:2px solid #b9c8ad;background:#fffdf7;color:#405238;border-radius:999px;padding:8px 16px;font-weight:700;min-height:44px;cursor:pointer}.profile-chip.is-active{background:#dfe9d3;border-color:#7b916d}.profile-list{list-style:none;padding:0;margin:8px 0}.profile-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #e1e6d8}.profile-item.is-active .profile-name{font-weight:700}.profile-actions{display:flex;gap:8px;align-items:center}.profile-add .modal-actions{align-items:center}.session-end h4{margin:12px 0 4px}
.class-qr{max-width:260px;margin:12px auto}.class-qr svg{width:100%;height:auto;display:block;background:#fff;border-radius:8px}.class-code-text{font-family:var(--child-font,ui-monospace,monospace);font-size-adjust:var(--child-size-adjust,none);font-size:13px;word-break:break-all}

/* Parent area as tabs (16.9.): one panel at a time, explanations folded away. */
.parent-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}.parent-tabs [role=tab]{border:1px solid var(--line);background:#fff8;border-radius:100px;padding:10px 16px;min-height:44px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}.parent-tabs [role=tab][aria-selected=true]{background:var(--action);color:#fff;border-color:var(--action)}.parent-tabs [role=tab][aria-selected=true] .parent-status{background:#fff2;color:#fff}.parent-panel>.parent-section:first-child{border-top:0;margin-top:8px}.parent-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.parent-row .form-field{margin:0}.parent-row .form-input{width:auto;min-width:160px}.parent-section p.small{margin:6px 0 10px}.learning-aid summary{cursor:pointer;font-size:13px;color:#59664c;padding:6px 0}
@media(max-width:700px){.parent-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 10px}.parent-tabs [role=tab]{white-space:nowrap;font-size:13px;padding:9px 13px}}
/* Landing overview: facts, feature groups, all offers, honest limits. */
.overview{padding:30px 0 10px}.overview-lead{max-width:640px;font-size:17px;line-height:1.7;margin-bottom:24px}.facts{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}@media(max-width:900px){.facts{grid-template-columns:repeat(3,1fr)}}.facts li{background:#fffcf6;border:1px solid var(--line);border-radius:18px;padding:16px 14px;text-align:center}.facts strong{display:block;font-size:34px;letter-spacing:-.04em;color:#5e7a52;line-height:1.1}.facts span{font-size:12px;color:var(--muted);display:block;margin-top:6px}
.feature-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:34px}.feature-group{border:1px solid #e6e4d9;border-radius:22px;padding:22px 22px 14px;background:#fffcf655;box-shadow:var(--shadow)}.feature-group h3{font-size:18px;margin-bottom:10px}.feature-group ul{margin:0;padding:0;list-style:none}.feature-group li{position:relative;padding:6px 0 6px 26px;font-size:14px;line-height:1.55;color:var(--muted);border-top:1px dashed #e8e6dc}.feature-group li:first-child{border-top:0}.feature-group li:before{content:'✓';position:absolute;left:2px;top:6px;color:#7b916d;font-weight:700}
.overview-sub{font-size:22px;margin:10px 0 6px}.offer-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:14px 0 30px}.offer-group{border:1px solid var(--line);border-radius:18px;background:#fff9;padding:6px 16px}.offer-group summary{cursor:pointer;font-weight:700;padding:10px 0;display:flex;align-items:center;gap:10px}.offer-count{font-size:12px;background:#e9eddf;border-radius:12px;padding:3px 9px;font-weight:600}.offer-group ul{list-style:none;margin:0 0 8px;padding:0}.offer-group li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 10px;padding:8px 0;border-top:1px dashed #e8e6dc;font-size:13px}.offer-group li strong{grid-column:1;grid-row:1;font-size:14px}.offer-group li span{grid-column:1;grid-row:2;color:var(--muted)}.offer-group li code{grid-column:2;grid-row:1/3;align-self:start;justify-self:end;font-size:11px;background:#f0f2e8;border-radius:8px;padding:3px 7px;color:#4d6242;white-space:nowrap}
.overview-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:26px}.overview-card{border:1px solid var(--line);border-radius:22px;padding:20px 22px;background:#fffcf6}.overview-card h3{font-size:17px;margin-bottom:10px}.overview-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted);line-height:1.6}.left-out li{list-style:'✕  ';color:#92675b}.audiences{margin:0;font-size:14px}.audiences dt{font-weight:700;margin-top:8px}.audiences dd{margin:2px 0 0;color:var(--muted)}.honest{background:#f3f1e6}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0 6px;border-top:1px solid var(--line)}.share-row p{flex:1;min-width:220px;font-size:14px}
@media(max-width:700px){.overview{padding-top:18px}.facts{grid-template-columns:repeat(2,1fr)}.facts strong{font-size:28px}.feature-group{padding:16px 16px 10px}.offer-group li{grid-template-columns:minmax(0,1fr)}.offer-group li code{grid-column:1;grid-row:3;justify-self:start}}
/* KI-Abenteuer (18.9.): direkt nach dem Hero. Der Hinweis zur Testphase steht in Tinte auf Gelb (5,5:1), die Karten wie die Übersicht. */
.ai-adventure{padding:27px 0 10px}.ai-intro{display:flex;gap:17px;align-items:flex-start;max-width:760px;margin-bottom:18px}.ai-icon{width:53px;height:53px;border-radius:18px;background:var(--lavender);display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-5deg)}.ai-icon svg{width:27px;height:27px}.ai-lead{font-size:17px;line-height:1.7}
.ai-status{max-width:760px;background:var(--yellow);border-radius:18px;padding:14px 18px;margin-bottom:22px}.ai-status strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}.ai-status p{color:var(--ink);font-size:14px;line-height:1.6}
.ai-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:14px}.ai-card{border:1px solid var(--line);border-radius:22px;padding:20px 22px;background:#fffcf6}.ai-card h3{font-size:17px;margin-bottom:10px}.ai-card ol,.ai-card ul{margin:0;padding-left:20px;font-size:14px;color:var(--muted);line-height:1.6}.ai-card li+li{margin-top:6px}.ai-later{font-size:13px;line-height:1.6;max-width:760px}
@media(max-width:700px){.ai-adventure{padding-top:18px}.ai-intro{gap:13px}.ai-icon{width:42px;height:42px}.ai-lead{font-size:15px}.ai-card{padding:16px 16px 14px}}
/* Denkspiele (E2): scattered dots to count, building, compare frames, six candidates, hint pictures. */
.workshop-question h1{margin:26px 0 16px}.workshop-question .ten-frame{width:100%}.workshop-question .build-frame{max-width:300px}.workshop-question .build-count{font-weight:700;color:#59664c;margin:4px 0}.workshop-actions{justify-content:center;margin-top:10px}
.scatter-field{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:280px;margin:8px auto 14px;padding:12px;border:2px dashed #cdb993;border-radius:24px;background:#fffaf0}.scatter-slot,.scatter-dot{aspect-ratio:1;min-width:0}.scatter-dot{display:grid;place-items:center;padding:0;border:2px solid #b08f5c;border-radius:50%;background:#d6b98a;color:#5b4a2e;font-size:14px;line-height:1}.scatter-field>:nth-child(3n+1){transform:translate(3px,-4px)}.scatter-field>:nth-child(4n+2){transform:translate(-4px,3px)}.scatter-field>:nth-child(5n){transform:translate(2px,5px)}.scatter-dot.counted{background:#f3ead8;border-style:dashed}.scatter-dot.counted:after{content:'✓';font-weight:700}
.workshop-question .compare-aid{flex-direction:row;flex-wrap:wrap;justify-content:center;margin:10px auto 16px}.workshop-question .compare-aid .ten-frames{flex:1 1 140px;max-width:225px;width:100%;margin:0}
.workshop-question .character-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:420px;margin:18px auto}.workshop-question .character-key{width:100%;max-width:none;min-width:0}@media(min-width:701px){.workshop-question .character-bar{grid-template-columns:repeat(6,minmax(0,1fr));max-width:680px}}
@media(max-width:420px){.modal-actions{display:grid;grid-template-columns:minmax(0,1fr)}.modal-actions>.primary,.modal-actions>.secondary{width:100%;min-width:0}.workshop-question #question-next,.workshop-question #question-speech{width:100%;min-width:0}.context-tasks .listen-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.context-tasks .listen-option{min-width:0}.context-tasks .listen-pick{flex:1;min-width:0}.switch-build{grid-template-columns:repeat(2,minmax(0,1fr))}.switch-build>.secondary{padding-inline:8px;font-size:13px}}
@media(max-width:340px){.scatter-field{padding:8px}}
.operation-frame{margin:12px auto}.ten-frame i.added{background:#fffdf8;border:3px solid #91ac7c}.ten-frame i.removed{display:grid;place-items:center;background:#f6f7f0;border:1px dashed #91ac7c;font-style:normal}.ten-frame i.removed:after{content:'✕';font-size:13px;line-height:1;color:#8a5a3a}

/* Vocabulary pictures (17.9.): big emoji buttons, the word stays available to screen readers. */
.listen-pick.picture-pick{font-size:56px;line-height:1;min-width:96px;min-height:96px;padding:10px}
@media(max-width:700px){.listen-pick.picture-pick{font-size:44px;min-width:80px;min-height:80px}}

/* Footer (18.9.): buttons, links and text share one line height, so their text sits on one line. */
.site-footer{align-items:center;flex-wrap:wrap}
.site-footer>a,.site-footer>span,.site-footer>.text-button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 2px;font-size:inherit;line-height:1.35;text-underline-offset:4px}
@media(max-width:700px){.site-footer{display:flex;flex-direction:column;align-items:center;gap:0}.site-footer>a,.site-footer>span,.site-footer>.text-button{min-height:40px;margin:0}}

/* Offer colours (18.9.2026): one pastel family per learning area, shared by the child's menu and the
   landing, so children who cannot read yet find an offer again by colour and picture. Blue to teal:
   numbers and arithmetic; apricot to sand: letters and writing; butter yellow: the own name;
   lavender to rose: listening, reading and language; sage to mint: games and pictures. Colours stay
   pale because busy, saturated surroundings measurably cost young children attention (Fisher,
   Godwin & Seltman 2014); text stays dark ink and colour is never the only cue. */
[data-go="numbers"],[data-offer="numbers"]{--tile:#dceaf6;--tile-edge:#b8d0e8;--tile-ink:#3d6792}
[data-go="quantities"],[data-offer="quantities"]{--tile:#d8eef0;--tile-edge:#b1d9de;--tile-ink:#2a7078}
[data-go="workshop"],[data-offer="workshop"]{--tile:#dcefe8;--tile-edge:#b5dccc;--tile-ink:#2c735c}
[data-go="count"],[data-offer="count"]{--tile:#dff0ea;--tile-edge:#bddfce;--tile-ink:#31745c}
[data-go="math"],[data-offer="math"]{--tile:#dfe7f7;--tile-edge:#bccbec;--tile-ink:#44609e}
[data-go="complete"],[data-offer="complete"]{--tile:#daeaf2;--tile-edge:#b5d3e3;--tile-ink:#346a88}
[data-go="compare"],[data-offer="compare"]{--tile:#e0edf5;--tile-edge:#bed6e8;--tile-ink:#436b8d}
[data-go="equations"],[data-offer="equations"]{--tile:#e2e4f6;--tile-edge:#c3c8ec;--tile-ink:#545ea5}
[data-go="clock"],[data-offer="clock"]{--tile:#dcecef;--tile-edge:#b7d5db;--tile-ink:#3c6d78}
[data-go="letters"],[data-offer="letters"]{--tile:#fbe3d1;--tile-edge:#f1c6a5;--tile-ink:#95542b}
[data-go="lowercase"],[data-offer="lowercase"]{--tile:#fce8da;--tile-edge:#f2cdb2;--tile-ink:#935a36}
[data-go="umlauts"],[data-offer="umlauts"]{--tile:#fbe5dc;--tile-edge:#f0c7b6;--tile-ink:#99523f}
[data-go="symbols"],[data-offer="symbols"]{--tile:#f6ead7;--tile-edge:#e5d0aa;--tile-ink:#81632f}
[data-go="mixed"],[data-offer="mixed"]{--tile:#ece6dc;--tile-edge:#d4c9b6;--tile-ink:#6e5a3a}
[data-go="wordgaps"],[data-offer="wordgaps"]{--tile:#fcebdd;--tile-edge:#f2d0b3;--tile-ink:#915c3b}
[data-go="pairs"],[data-offer="pairs"]{--tile:#fde6d6;--tile-edge:#f3c9ad;--tile-ink:#975632}
[data-go="name"],[data-offer="name"]{--tile:#fbf1c6;--tile-edge:#ebd993;--tile-ink:#7e6912}
[data-go="listening"],[data-offer="listening"]{--tile:#ebe4f7;--tile-edge:#d2c5ee;--tile-ink:#6b52a6}
[data-go="reading"],[data-offer="reading"]{--tile:#e6e3f6;--tile-edge:#c9c2ec;--tile-ink:#5a53a2}
[data-go="sentences"],[data-offer="sentences"]{--tile:#f4e2ee;--tile-edge:#e4c3da;--tile-ink:#914a7b}
[data-go="vocabulary"],[data-offer="vocabulary"]{--tile:#f0e5f5;--tile-edge:#dcc8e8;--tile-ink:#7e4f96}
[data-go="memory"],[data-offer="memory"]{--tile:#e2f1dc;--tile-edge:#c1deb5;--tile-ink:#467238}
[data-go="puzzle"],[data-offer="puzzle"]{--tile:#e9f0d7;--tile-edge:#cddcab;--tile-ink:#5a702e}
[data-go="games"],[data-offer="games"]{--tile:#e3efe4;--tile-edge:#c2dcc5;--tile-ink:#46704d}
[data-go="album"],[data-offer="album"]{--tile:#f3ebdb;--tile-edge:#e1d2b3;--tile-ink:#766642}
.activity-card[data-go]{background:var(--tile,#fffdf7);border-color:var(--tile-edge,#d9dfce);box-shadow:0 4px 0 var(--tile-edge,#e8e9df);color:#2f3a2a}
.activity-card[data-go] .activity-art{background:#ffffff8c;color:var(--tile-ink,#405238)}
.activity-card[data-go]:hover{box-shadow:0 7px 0 var(--tile-edge,#e8e9df)}
.activity-card[data-go]:focus-visible{outline:3px solid var(--tile-ink,#8c9eaf);outline-offset:4px}
/* Landing: all offers as small cards in the same colours. */
.offer-legend{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;padding:0;list-style:none}
.offer-legend li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#4a5541;background:#fffcf6;border:1px solid var(--line);border-radius:100px;padding:6px 12px 6px 6px}
.offer-legend i{width:22px;height:22px;border-radius:50%;border:2px solid var(--tile-edge);background:var(--tile)}
.offer-families{display:grid;gap:26px;margin:10px 0 34px}
.offer-family h4{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 12px;letter-spacing:-.01em}
.offer-family .offer-count{font-size:12px;background:#e9eddf;border-radius:12px;padding:3px 9px;font-weight:600}
.offer-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.offer-card{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 14px;align-items:start;padding:14px 16px 14px 14px;border-radius:20px;background:var(--tile,#fffcf6);border:1px solid var(--tile-edge,#e3e1d6);box-shadow:0 3px 0 var(--tile-edge,#e8e9df);transition:transform .15s,box-shadow .15s}
.offer-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tile-edge,#e8e9df)}
.offer-art{grid-row:1/4;width:62px;height:62px;border-radius:16px;background:#ffffffa6;color:var(--tile-ink,#405238);display:grid;place-items:center;font-size:19px;font-weight:800;letter-spacing:-.04em;text-align:center;line-height:1.05;overflow:hidden;font-family:var(--child-font,'Andika',var(--font,inherit));font-size-adjust:var(--child-size-adjust,none)}
.offer-card strong{font-size:15px;line-height:1.3;color:#2f3a2a}
.offer-card span.offer-what{font-size:13px;line-height:1.5;color:#4f5a47}
.offer-card code{justify-self:start;margin-top:4px;font-size:11px;background:#ffffffb3;border:1px solid var(--tile-edge,#e3e1d6);border-radius:8px;padding:2px 7px;color:var(--tile-ink,#4d6242);white-space:normal}
@media(max-width:700px){.offer-cards{grid-template-columns:minmax(0,1fr)}.offer-card{grid-template-columns:52px minmax(0,1fr)}.offer-art{width:52px;height:52px;font-size:16px}}

/* Parent area: help centre, «Mehr» cards, voice card (18.9.2026). */
.help-center{display:grid;gap:22px}.help-search .form-input{max-width:none}
.help-block h3{font-size:18px;margin:0 0 10px}
.help-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.help-steps li{counter-increment:step;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:start;background:#fffcf6;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.help-steps li:before{content:counter(step);grid-row:1/3;width:32px;height:32px;border-radius:50%;background:var(--action,#49653d);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.help-steps strong{font-size:15px}.help-steps span{font-size:14px;color:#4f5a47;line-height:1.55}
.help-question{border:1px solid var(--line);border-radius:14px;background:#fffcf6;margin:0 0 8px;padding:0 14px}
.help-question summary{cursor:pointer;font-weight:650;font-size:15px;padding:12px 0;min-height:44px;display:flex;align-items:center;list-style-position:inside}
.help-question p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#4f5a47}
.help-offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.help-offer{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 12px;align-items:start;padding:12px;border-radius:16px;background:var(--tile,#fffcf6);border:1px solid var(--tile-edge,var(--line))}
.help-offer .offer-art{grid-row:1/4;width:48px;height:48px;font-size:15px;border-radius:12px}
.help-offer strong{font-size:14px}.help-offer span{font-size:13px;line-height:1.5;color:#4f5a47}/* Teil 36: Kontrast mindestens 4,5:1 auf jeder Kachel, auch ausgeblendet (vorher blass mit opacity). */
.help-offer small{font-size:12px;color:#4f5a47}
.help-offer.is-off{border-style:dashed;border-color:#8a917f}.help-offer.is-off .offer-art{opacity:.55}
.help-empty{font-size:14px;background:#f3f1e6;border-radius:14px;padding:12px 14px}
.help-contact p{font-size:14px}
.more-cards{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.more-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px;border-radius:20px;background:#fffcf6;border:1px solid var(--line);box-shadow:0 3px 0 #e8e9df;text-decoration:none;color:#2f3a2a;min-height:44px;transition:transform .15s}
.more-card:hover{transform:translateY(-2px)}
.more-icon{grid-row:1/3;width:48px;height:48px;border-radius:14px;background:#eef1e6;display:grid;place-items:center;font-size:22px}
.more-card strong{font-size:16px}.more-card span:not(.more-icon){font-size:13px;line-height:1.5;color:#4f5a47}
.voice-pack{background:#f3f0fa;border:1px solid #ddd5ef;border-radius:16px;padding:12px 14px;margin:10px 0 6px}
.voice-pack-name{font-weight:700;margin:0 0 4px;color:#3b3560}.voice-pack .small{margin:0 0 8px}
.guide-page{max-width:980px}.guide-page .help-center{margin-top:22px}
@media(max-width:700px){.help-offers,.more-cards{grid-template-columns:minmax(0,1fr)}}

/* Missionen zum Anfassen: their own soft clay rose, between the warm letters and the lavender language family. */
[data-go="missions"],[data-offer="missions"]{--tile:#f5dfe0;--tile-edge:#e5bfc2;--tile-ink:#974d56}
.missions{max-width:900px;margin:18px auto 0}.missions-intro{max-width:640px;margin:14px 0 20px;font-size:16px}
.mission-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mission-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:22px;background:var(--tile);border:1px solid var(--tile-edge);box-shadow:0 4px 0 var(--tile-edge)}
.mission-card .offer-art{width:64px;height:64px;font-size:17px}
.mission-card h2{font-size:20px;margin:0 0 4px}.mission-card p{margin:2px 0;font-size:14px;color:#4f5a47}
.mission-progress{font-weight:700;color:var(--tile-ink)}.mission-stamp{display:inline-grid;place-items:center;border:2px solid var(--tile-ink);color:var(--tile-ink);border-radius:999px;padding:1px 10px;font-weight:800;transform:rotate(-4deg)}
.mission-stamp.big{width:58px;height:58px;font-size:28px;padding:0}
.mission-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.mission-howto{background:#fffcf6;border:1px solid var(--line);border-radius:18px;padding:4px 16px;margin:16px 0}
.mission-howto summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.mission-howto ol{margin:6px 0 10px;padding-left:22px;font-size:15px;line-height:1.6}.mission-material,.mission-result{font-size:14px}
.mission-question{font-size:18px;font-weight:650;margin:10px 0;color:#2f3a2a;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none)}
.mission-feedback{min-height:28px;font-size:16px;font-weight:650;color:#6b4a2e;margin:10px 0}
.mission-split{display:grid;grid-template-columns:160px minmax(0,1fr);gap:22px;align-items:start}
.mission-house{border-collapse:collapse;font-size:20px;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none)}.mission-house th{border:2px solid #7c5a48;padding:6px 30px;font-size:24px}.mission-house td{border:1px solid #7c5a48;width:60px;height:32px;text-align:center}.mission-house tr.is-found td{background:var(--tile,#f5dfe0);font-weight:700}
.number-keys{display:flex;flex-wrap:wrap;gap:8px}.number-keys .character-key{min-width:52px;min-height:52px}
.mission-plates{font-size:40px;letter-spacing:8px}
.mission-flash{display:grid;place-items:center;min-height:160px}.mission-flash .ten-frames{transform:scale(1.2)}
.mission-words .form-field{max-width:320px}.mission-hunt{list-style:none;padding:0;margin:8px 0}.mission-hunt li{padding:6px 10px;border-radius:10px;margin:4px 0;font-size:15px}.mission-hunt .is-right{background:#e2f1dc}.mission-hunt .is-wrong{background:#fbe5dc}
.rhyme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.rhyme-card{display:flex;gap:6px;align-items:stretch}.rhyme-pick{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:16px;border:2px solid #e3dccf;background:#fffdf8;min-height:96px;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none);font-size:15px}
.rhyme-card.is-selected .rhyme-pick{border-color:var(--tile-ink,#9a4f58);background:#fdf1f1}.rhyme-card.is-found .rhyme-pick{opacity:.45;border-style:dashed}
.rhyme-emoji{font-size:38px;line-height:1}
.syllable-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.syllable-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:10px;align-items:center;background:#fffdf8;border:1px solid var(--line);border-radius:16px;padding:8px 12px}
.syllable-card strong{font-size:18px;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none)}.syllable-card.is-found{background:#e2f1dc}
.syllable-boxes{display:flex;gap:6px}.syllable-boxes .character-key{min-width:58px;min-height:48px;font-size:14px}
.mission-done{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--tile,#f5dfe0);border:1px solid var(--tile-edge,#e5bfc2);border-radius:20px;padding:14px 16px;margin:16px 0}.mission-done p{margin:2px 0}
.mission{--tile:#f5dfe0;--tile-edge:#e5bfc2;--tile-ink:#974d56}
@media(max-width:700px){.mission-card{grid-template-columns:52px minmax(0,1fr)}.mission-actions{grid-column:1/-1}.mission-split{grid-template-columns:minmax(0,1fr)}.syllable-card{grid-template-columns:40px minmax(0,1fr) auto}.syllable-boxes{grid-column:1/-1}}

/* Die Uhr lesen (E7): an own neutral dial in the teal of the maths family; hands clearly different
   (short wide hour hand, long slim minute hand), aids in a softer tone so they can fade. */
.clock-lesson{max-width:760px;margin:18px auto 0}
.clock-prompt{font-size:19px;font-weight:650;margin:14px 0 6px;color:#2f3a2a;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clock-feedback{min-height:1.6em;font-size:16px;margin:10px 0 0;color:#3d6f7a}
.clock-stage{display:flex;justify-content:center;margin:8px 0}
.clock-face{width:min(78vw,340px);height:auto;display:block;user-select:none;-webkit-user-select:none}
.clock-face.is-draggable{cursor:grab;outline:none}.clock-face.is-dragging{cursor:grabbing}
.clock-face:focus-visible{filter:drop-shadow(0 0 0.35rem #3d6f7a)}
.clock-rim{fill:#3d6f7a}.clock-dial{stroke:#b7d5db;stroke-width:1}
.dial-light{stop-color:#fffdf8}.dial-dark{stop-color:#eef4f2}
.tick-minute{stroke:#8aa3a8;stroke-width:1.2;stroke-linecap:round}.tick-hour{stroke:#2f4d54;stroke-width:3.2;stroke-linecap:round}
.clock-digits text{font-family:var(--child-font,'Andika',system-ui,sans-serif);font-size-adjust:var(--child-size-adjust,none);font-size:17px;font-weight:700;fill:#253b40}
.clock-minute-ring text{font-family:var(--child-font,'Andika',system-ui,sans-serif);font-size-adjust:var(--child-size-adjust,none);font-size:9.5px;fill:#6f8f95}
.clock-inner-ring text{font-family:var(--child-font,'Andika',system-ui,sans-serif);font-size-adjust:var(--child-size-adjust,none);font-size:8.5px;fill:#8aa3a8}
.clock-wedge{fill:#9fd0c7;fill-opacity:.45}
.hand-shadow{fill:#1b2b2e;fill-opacity:.16}
.hand-hour .hand-body{fill:#253b40}.hand-minute .hand-body{fill:#3d6f7a}.hand-second .hand-body{fill:#c8604f}
.clock-cap{fill:#253b40;stroke:#fffdf8;stroke-width:1.5}
.clock-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0}
.clock-option{font-size:17px;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none);min-height:52px;padding:10px 18px}
.clock-option.is-right{background:#dcecef;border-color:#3d6f7a}.clock-option.is-wrong{opacity:.55}.clock-option.is-hint{box-shadow:0 0 0 3px #9fd0c7}
.clock-drag-hint{text-align:center;margin:4px 0 0}
.day-band{list-style:none;margin:12px 0;padding:14px 10px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-radius:22px;background:linear-gradient(90deg,#fdf1d8,#fbe7b8 35%,#f6d9b8 65%,#d9d7ef)}
.day-slot{min-height:104px;border:2px dashed #c9b99a;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;font-size:13px;background:#fffdf880}
.day-slot:not(:empty){border-style:solid;border-color:#3d6f7a;background:#fffdf8}
.day-time{font-size:12px;color:#3d6f7a}
.day-emoji{font-size:30px;line-height:1}
.day-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.day-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:18px;border:1px solid var(--line);background:#fffcf6;font-size:14px;min-height:96px}
.day-card.is-placed{opacity:.35}.day-card.is-wrong{animation:clock-shake .35s}
@keyframes clock-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.day-card.is-wrong{animation:none}}
@media(max-width:560px){.day-band,.day-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Unterstützungsprofil (BAUPLAN-MARKTFUEHRUNG M2): Hilfen-Ansicht, «Zeig’s mir», Ankündigung, reizarm, grosse Ziele. */
.show-me-row{justify-content:center}.character-key.is-hinted,.listen-pick.is-hinted{outline:4px solid #d2b664;outline-offset:3px;background:#fbf3d6}
.show-me.is-pulsing{animation:show-me-pulse 1.6s ease-in-out infinite;border-color:#c9a94f;box-shadow:0 0 0 4px #f1e3b3}
@keyframes show-me-pulse{50%{box-shadow:0 0 0 10px #f1e3b300;transform:scale(1.04)}}
.schedule-note{display:inline-block;margin:10px auto 0;padding:6px 14px;border-radius:14px;background:#f2e8c9;color:#5b5a3b;font-weight:700;font-size:14px}
.context-tasks .schedule-note{display:block;width:max-content;max-width:100%}
.learn.no-trace .board-wrap,.learn.no-trace #clear,.learn.no-trace #hint{display:none}
.support-setting{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line)}.support-setting>label,.support-setting>.support-label{flex:1 1 220px;font-weight:700;font-size:14px}
.support-setting select{flex:0 1 220px}.support-setting .listen-speak{min-width:44px;min-height:44px}.support-setting fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.support-suggestion{border:1px solid #e1d6b3;background:#fbf6e6;border-radius:16px;padding:12px 14px;margin:10px 0}.support-suggestion p{margin:4px 0}
/* reizarm: keine Bewegung, keine Hintergrundmuster, gedämpfte Farben über die Farbvariablen */
html.sensory-low{--pink:#ece7e3;--lavender:#e8e6ea;--blue:#e5e9ea;--yellow:#ece8dc;--sage:#e3e7df;--sage-strong:#6f7a6c}
html.sensory-low *,html.sensory-low *:before,html.sensory-low *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.sensory-low body{background:var(--paper)}html.sensory-low body:after{display:none}html.sensory-low #confetti{display:none}
html.sensory-low button:not(:disabled):hover{transform:none}html.sensory-low .show-me.is-pulsing{box-shadow:0 0 0 4px #d2b664;transform:none}
html.sensory-low .category,html.sensory-low .category.letters{background:#f3f2ec}html.sensory-low img.reward-image,html.sensory-low .avatar{filter:saturate(.6)}
/* grosse Ziele: grössere Tasten und Antworten untereinander */
html.target-large .character-key{min-width:104px;min-height:104px;font-size:44px}html.target-large .listen-pick{min-width:180px;min-height:96px;font-size:34px}
html.target-large .listen-options{flex-direction:column;align-items:center;gap:18px}html.target-large .character-bar{gap:18px}
html.target-large .secondary,html.target-large .primary{min-height:64px;font-size:18px}html.target-large .build-frame{max-width:340px}html.target-large .icon-button{width:56px;height:56px}
.doc-section{margin:4px 0 18px;padding:16px;border-radius:22px;background:#f3f7ea;border:2px solid var(--line)}.doc-section h3{margin:0 0 4px;font-size:20px}
.doc-cards{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.doc-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:20px;background:#fffcf6;border:1px solid var(--line);box-shadow:0 3px 0 #e8e9df}
.doc-card strong{font-size:17px}.doc-card span{font-size:13px;line-height:1.5;color:#4f5a47}.doc-card .doc-meta{font-weight:700}
.doc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}.doc-actions a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:700}
@media(max-width:700px){.doc-cards{grid-template-columns:minmax(0,1fr)}}
.doc-version{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
/* Symbol-Eingabe und Schaltersteuerung (BAUPLAN-MARKTFUEHRUNG M5): Symbol über dem Text, Rahmen mit hohem Kontrast, grosse Schalterfläche */
.symbol-key{display:flex;justify-content:center;gap:2px;pointer-events:none}.symbol-key svg{width:44px;height:44px;flex:none}
.has-symbol{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:96px;height:auto;padding:8px 10px;font-size:18px}
.target-large .symbol-key svg{width:64px;height:64px}
.is-scanned{outline:5px solid #1d4f91!important;outline-offset:3px;box-shadow:0 0 0 9px #fff9c4!important;position:relative;z-index:1}
.switch-surface{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid #1d4f91}
.switch-surface button{flex:1;min-height:96px;font-size:20px;border-radius:22px}
.switch-on body{padding-bottom:128px}
.switch-build{justify-content:center}
/* Videobotschaften der Lehrperson (teacher-video-*.js) */
.teacher-message video,[data-record-live],[data-record-preview],.teacher-message-list video{display:block;width:100%;max-width:32rem;max-height:60vh;border-radius:12px;background:#222;margin:.5rem 0}
.teacher-message-text{font-size:1.1rem;line-height:1.5;max-width:32rem}
.teacher-message-list{list-style:none;padding:0}.teacher-message-list>li{padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.1)}
.teacher-message-offer{margin:.75rem 0}
/* Meine Orte (E8 E1, docs/MODULE-UHR-UND-ERDE.md 2.7–2.9): the globe stage is a fixed square so
   Modern/Legacy/Lite share one layout; markers sit in an absolutely-positioned overlay for Lite. */
.earth-lesson{max-width:760px;margin:18px auto 0}
.earth-prompt{font-size:19px;font-weight:650;margin:14px 0 6px;color:#2f3a2a;font-family:var(--child-font,'Andika',inherit);font-size-adjust:var(--child-size-adjust,none);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.earth-status{min-height:1.6em;font-size:16px;margin:6px 0 0;color:#3d6f7a}
.earth-name-field{margin-top:10px}
.globe-stage{display:flex;justify-content:center;margin:10px 0}
.globe-canvas-wrap{width:min(78vw,340px);aspect-ratio:1;display:flex}
.globe-canvas{width:100%;height:100%;border-radius:50%;touch-action:none;outline:none;background:#0b0f16}
.globe-canvas:focus-visible{box-shadow:0 0 0 4px #9fd0c7}
.globe-lite-frame{position:relative;width:min(78vw,340px);aspect-ratio:1}
.globe-lite-frame img{width:100%;height:100%;border-radius:50%;display:block;cursor:pointer}
.globe-lite-markers{position:absolute;inset:0;pointer-events:none}
.globe-marker{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;border:2px solid #fff;background:#e05a5a}
.globe-marker-home{background:#e8b84b}
.globe-marker-pending{background:#3d6f7a;animation:globe-pulse 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.globe-marker-pending{animation:none}}
@keyframes globe-pulse{50%{transform:scale(1.35)}}
.earth-list-alt{margin:14px 0}
.earth-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:6px 0}
.earth-home-time{display:flex;align-items:center;gap:8px;font-size:15px;color:#3d6f7a}
.earth-home-clock{width:40px;flex:none}
.earth-home-clock .clock-face{width:40px}
.place-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.place-list button{min-height:44px;padding:8px 14px}
/* Neue Version bereit (lifecycle.js zeigt #update-app): kein unauffälliger Fusszeilen-Link, sondern ein fest stehendes Band
   oben, das bleibt, bis man tippt (Florian 18.09.2026: «wo ist die Update-Meldung?»). Text bleibt der übersetzte Knopftext. */
#update-app:not([hidden]){position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:150;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px;border:1px solid #c1d1b5;border-bottom:3px solid #b8caaa;border-radius:17px;background:var(--sage,#dce6d2);color:var(--ink,#2f3a2c);font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 10px 36px #3e493833;max-width:calc(100vw - 32px)}
#update-app:not([hidden])::before{content:'↻';font-size:20px}
#update-app:not([hidden]):hover{transform:translateX(-50%) translateY(-2px)}
/* Mischrunden (18.9.): Frage «Zahl oder Buchstabe?» nach dem nachgefahrenen Zeichen; zwei grosse Knöpfe, klare Rückmeldung. */
.mixed-note{margin-top:8px;font-weight:700;color:#6e5a3a}.sort-question{margin-top:14px;padding:16px;border:2px dashed #d4c9b6;border-radius:20px;background:#f7f2ea;text-align:center}.sort-prompt{font-size:18px;font-weight:700;color:var(--ink)}.sort-choices{display:flex;gap:12px;justify-content:center;margin-top:12px}.sort-choice{min-width:140px;min-height:56px;font-size:18px}.sort-choice.right{background:#dce6d2;border-color:#b8caaa}.sort-choice.wrong{background:#f3dfd8;border-color:#e0b8ac}.sort-feedback{min-height:0;padding-top:12px}
@media(max-width:400px){.sort-choices{flex-direction:column}.sort-choice{width:100%}}
/* Stufenregler (BAUPLAN-STUFEN S1, public/stage-slider.js): fünf Rasten, grosse Griffzone, Zahlen unter dem Regler. */
.stage-slider{margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff8}.stage-slider h3{margin-top:0}
.stage-range{display:block;padding:6px 0 0}.stage-range input[type=range]{width:100%;max-width:520px;height:44px;margin:0;accent-color:var(--sage-strong);cursor:pointer}
.stage-marks{display:flex;justify-content:space-between;max-width:520px;padding:0 6px;font-size:14px;color:var(--muted)}.stage-marks .is-current{color:var(--ink);font-weight:700}
.stage-name{margin:10px 0 4px}
/* Fünferstreifen (S2, public/five-strip.js): Felder statt «2 / 5»; sr-only trägt den Text für Vorleser. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.five-strip{gap:4px;padding:8px 10px;min-width:74px}.five-strip i{display:block;width:12px;height:12px;border-radius:50%;background:#e7e8de;border:1px solid #d5d8c6;transition:background .25s}.five-strip i.done{background:#abc09a;border-color:#abc09a}.five-strip i.current{background:#d9c28e;border-color:#d9c28e}
@media(prefers-reduced-motion:reduce){.five-strip i{transition:none}}

.trace-levels{margin-bottom:14px}.trace-levels>label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}.trace-levels .segmented button{min-height:44px;font-size:14px}
.who-learns{margin:0 0 10px}.who-learns-title{font-weight:700;margin:0 0 4px}
.role-bar{display:grid;gap:6px;margin:4px 0 12px;padding:10px 12px;border:1px solid #d9e2cf;border-radius:14px;background:#fbfdf7}.role-bar>p{margin:0}.role-choice{display:grid;gap:8px}.role-options{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.role-option{display:grid;gap:4px;text-align:left;padding:12px;border-radius:14px}.role-option span{font-size:.9rem;font-weight:400}.start-action{border-left:4px solid #7aa35d;padding-left:12px}
.classroom-scroll{overflow-x:auto;max-width:100%}.classroom-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}.classroom-table caption{text-align:left;font-size:.85rem;color:#5b6b52;padding:4px 0}.classroom-table th,.classroom-table td{border-bottom:1px solid #e1e8d8;padding:6px 8px;text-align:left}.classroom-table thead th{font-weight:700}
.reward-card-play{display:grid;gap:10px;padding:16px;margin:10px 0;text-align:left}.reward-card-play h3{margin:0;font-size:1.4rem}.reward-card-kind{font-size:1.2rem;font-weight:700;margin:0}.open-cards{list-style:none;padding:0;display:grid;gap:6px}.open-cards li{display:flex;gap:10px;align-items:center;justify-content:space-between}
@media print{.parent-page .classroom-table{min-width:0}}
/* «Wie war's?» (Release 4) */
.feeling{margin-top:12px;text-align:center}
.feeling-question{margin:0 0 6px;font-weight:600}
.feeling-faces{display:flex;gap:10px;justify-content:center}
.feeling-face{min-width:56px;min-height:56px;font-size:28px;line-height:1}
.feeling-face[aria-pressed="true"]{outline:3px solid var(--accent,#5b8a3c)}
.feeling-hints{margin-top:12px}
.coverage-table{width:100%;border-collapse:collapse;font-size:14px}.coverage-table th,.coverage-table td{border-bottom:1px solid var(--line,#dfe5d5);padding:6px 8px;text-align:left;vertical-align:top}
/* Klare Lernbereiche und sichtbare Wege auf kleinen Bildschirmen. */
.activity-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px}.activity-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #bbc7b0;border-radius:24px;background:#fffdf7;color:#354c2e;text-decoration:none;font-size:15px;font-weight:600}.activity-jumps a:focus-visible{outline:3px solid #a96e2e;outline-offset:3px}.activity-group h2{font-size:24px;line-height:1.3;margin:30px 0 8px;scroll-margin-top:80px}.resume-lesson{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:220px}.resume-lesson strong{font-size:23px}.resume-lesson small{font-size:15px}.activity-group .activity-art{height:100px}.app-navigation{display:flex;justify-content:center;margin:20px auto}.app-navigation:has([hidden]){display:none}.startup-recovery{max-width:620px;margin:24px auto;padding:24px;border:2px solid #bbc7b0;border-radius:18px;background:#fffdf7}.startup-recovery h2{font-size:26px}.startup-recovery p{font-size:16px;line-height:1.5}.startup-recovery button,.startup-recovery a{min-height:44px}.startup-recovery .modal-actions{flex-wrap:wrap}
@media(max-width:700px){.parent-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:8px;margin:14px 0;padding:0 0 12px}.parent-tabs [role=tab]{white-space:normal;justify-content:center;text-align:center;border-radius:12px;font-size:14px;min-height:48px;padding:9px}.activity-group h2{font-size:21px}.activity-group .activity-art{height:82px;font-size:34px}.activity-jumps a{font-size:14px;flex:1 1 130px;justify-content:center;text-align:center}.resume-lesson{width:100%;min-width:0}.startup-recovery{margin:16px;padding:18px}}
/* Menu: each learning area is its own clearly separated panel with a large bold title in its colour. */
[data-all-offers]>summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700}
.activity-group[data-family]{--fam:#6b7f5e;--fam-bg:#fffdf8;background:var(--fam-bg);border:1px solid #e4e6da;border-top:6px solid var(--fam);border-radius:28px;padding:6px 20px 20px;margin:0 0 22px}
.activity-group[data-family="numbers"]{--fam:#3d6792;--fam-bg:#f7fafd}.activity-group[data-family="letters"]{--fam:#a95f31;--fam-bg:#fdf9f5}.activity-group[data-family="language"]{--fam:#6b52a6;--fam-bg:#faf8fd}.activity-group[data-family="explore"]{--fam:#2f7a62;--fam-bg:#f6fbf8}.activity-group[data-family="play"]{--fam:#5d7d3a;--fam-bg:#f9fbf4}
.activity-group[data-family] h2{margin:14px 0 14px;font-size:26px;font-weight:800;letter-spacing:.01em;color:var(--fam)}
.activity-group[data-family] .activity-cards{margin:0}
.activity-group[data-family] .activity-card strong{font-size:22px;font-weight:800;line-height:1.2}
.activity-group[data-family] .activity-card small{font-weight:700}
.activity-group[data-family]>summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;gap:10px;font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--fam)}
.activity-group[data-family]>summary::-webkit-details-marker{display:none}
.activity-group[data-family]>summary:after{content:'+';margin-left:auto;font-size:30px;line-height:1}
.activity-group[data-family][open]>summary:after{content:'−'}
.activity-group[data-family]:not([open]){padding-bottom:6px}
.feature-group>summary,.offer-family>summary,.overview-card>summary{cursor:pointer;font-size:18px;font-weight:700;min-height:44px;display:flex;align-items:center;gap:10px}
.feature-group>summary:after,.offer-family>summary:after,.overview-card>summary:after{content:'+';margin-left:auto;font-size:24px}
.feature-group[open]>summary:after,.offer-family[open]>summary:after,.overview-card[open]>summary:after{content:'−'}
.feature-group{padding-top:12px;padding-bottom:12px}.feature-group>summary{list-style:none}.feature-group>summary::-webkit-details-marker{display:none}
.offer-family{border:1px solid var(--line);border-radius:20px;padding:8px 16px;background:#fffcf6}.offer-family>summary{list-style:none}.offer-family>summary::-webkit-details-marker{display:none}.offer-family .offer-cards{margin-top:12px}
.offer-info{grid-column:2;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}.offer-info>summary{cursor:pointer;list-style:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--tile-edge,#d9dfce);background:#fff;color:var(--tile-ink,#405238);display:grid;place-items:center;font-weight:700}.offer-info>summary::-webkit-details-marker{display:none}.offer-info[open] .offer-what{flex-basis:100%}.offer-info[open] code{margin-top:4px}
.overview-card>summary{list-style:none}.overview-card>summary::-webkit-details-marker{display:none}
[data-role-first]>p.small:first-child{font-size:18px;font-weight:700;color:var(--ink);margin:4px 0 6px}
.help-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}.help-fold>summary::-webkit-details-marker{display:none}.help-fold>summary h3{margin:0}.help-fold>summary:after{content:'+';margin-left:auto;font-size:24px}.help-fold[open]>summary:after{content:'−'}
.overview-more{border:1px solid var(--line);border-radius:22px;padding:6px 20px;background:#fffcf6;margin-bottom:22px}.overview-more>summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;gap:10px}.overview-more>summary::-webkit-details-marker{display:none}.overview-more>summary h2{font-size:clamp(20px,3vw,24px);margin:0}.overview-more>summary:after{content:'+';margin-left:auto;font-size:28px;line-height:1}.overview-more[open]>summary:after{content:'−'}.overview-more[open]{padding-bottom:20px}.overview-more>summary:focus-visible{outline:3px solid #6f8f62;outline-offset:4px;border-radius:12px}
.ai-more{margin:12px 0 0}.ai-more>summary{cursor:pointer;list-style:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#fffcf6;color:#405238;font-size:23px;font-weight:700}.ai-more>summary::-webkit-details-marker{display:none}.ai-more>p{max-width:680px;line-height:1.55}.ai-more .ai-cards{margin-top:12px}
.activity-jumps a{font-weight:700}
@media(max-width:620px){.activity-group[data-family]{padding:4px 12px 14px;border-radius:22px;margin-bottom:16px}.activity-group[data-family] h2{font-size:22px;margin:12px 0 10px}.activity-group[data-family] .activity-card strong{font-size:19px}}
/* Landing motion: entrances and background decoration pause when the hero leaves the screen. */
:root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.8%,1.061 23.2%,1.066 26.4%,1.048 30.6%,1.006 40.4%,.994 47.6%,1);--ease-out-expo:cubic-bezier(.16,1,.3,1)}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}}
@keyframes line-up{from{transform:translateY(110%) rotate(3deg)}}
@keyframes art-in{from{opacity:0;transform:scale(.9) rotate(-4deg)}}
@keyframes float{50%{transform:translateY(-10px) rotate(.8deg)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.12)}100%{transform:translate(-5%,4%) scale(.94)}}
@keyframes bob{from{transform:translateY(-7px) rotate(-6deg)}to{transform:translateY(7px) rotate(6deg)}}
@keyframes glyph-in{from{opacity:0;scale:.3}}
@keyframes shine{0%,72%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes pulse-ring{0%{box-shadow:0 3px 0 #30452a,0 0 0 0 #6f9a4f66}70%,100%{box-shadow:0 3px 0 #30452a,0 0 0 16px #6f9a4f00}}
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes underline{from{transform:rotate(-2deg) scaleX(0)}}
@keyframes card-in{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes grow{from{transform:scaleX(0)}}
/* Scene: colour fields and floating glyphs behind the hero, clipped to its box. */
.hero{position:relative;isolation:isolate}
.hero-scene{position:absolute;inset:-30px 0 0;z-index:-1;pointer-events:none;overflow:hidden;contain:layout paint;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 12%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.aura{position:absolute;border-radius:50%;animation:drift 24s ease-in-out infinite alternate}
.aura.a1{width:62%;aspect-ratio:1;left:-14%;top:-18%;background:radial-gradient(closest-side,#d7e6c4cc,#d7e6c400)}
.aura.a2{width:56%;aspect-ratio:1;right:-10%;top:-6%;background:radial-gradient(closest-side,#f6d9b8b3,#f6d9b800);animation-duration:30s;animation-delay:-8s}
.aura.a3{width:50%;aspect-ratio:1;left:30%;bottom:-30%;background:radial-gradient(closest-side,#d3e4ecb3,#d3e4ec00);animation-duration:27s;animation-delay:-15s}
.glyph{position:absolute;left:var(--x);top:var(--y);font-weight:900;font-size:var(--s);line-height:1;opacity:calc(.16 + var(--z)*.1);translate:calc(var(--mx,0)*var(--z)*-9px) calc(var(--my,0)*var(--z)*-7px);transition:translate .9s var(--ease-out-expo);animation:glyph-in .9s var(--spring) calc(.5s + var(--n)*90ms) backwards,bob calc(5s + var(--n)*.7s) ease-in-out calc(var(--n)*-1.3s) infinite alternate;filter:blur(calc((3 - var(--z))*.6px))}
.glyph.t-g{color:#6f9a4f}.glyph.t-o{color:#d8913a}.glyph.t-b{color:#4d8ca3}.glyph.t-p{color:#b36f9c}
/* Headline: each line slides up out of a mask; the key word shimmers and is underlined by hand. */
.hero-copy>h1{animation:none}
.hero h1 .l{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .12em;margin:0 -.06em -.12em}
.hero h1 .l>span{display:inline-block;animation:line-up 1s var(--ease-out-expo) backwards}
.hero h1 .l:nth-of-type(2)>span{animation-delay:.12s}.hero h1 .l:last-of-type{padding-bottom:.42em;margin-bottom:-.42em}.hero h1 .l:nth-of-type(3)>span{animation-delay:.24s}
.hero h1 em{background:linear-gradient(100deg,#5f7d4a 0%,#8a9b3e 25%,#b9803c 50%,#5f7d4a 75%,#8a9b3e 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s linear 1.4s infinite}
.hero h1 em:after{transform-origin:left;bottom:-.3em;z-index:-1;animation:underline .9s var(--ease-out-expo) 1s backwards}
.hero-copy>*{animation:rise-in .8s var(--ease-out-expo) backwards}
.hero-copy>:first-child{animation-delay:0s}.hero-copy>:nth-child(3){animation-delay:.4s}.hero-copy>:nth-child(4){animation-delay:.5s}.hero-copy>:nth-child(n+5){animation-delay:.6s}
.hero-copy .primary{position:relative;overflow:hidden;animation:rise-in .8s var(--ease-out-expo) .5s backwards,pulse-ring 2.6s ease-out 2s 3;transition:transform .5s var(--spring),background .2s}
.hero-copy .primary:after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,#fff0,#ffffff55,#fff0);transform:translateX(-120%) skewX(-20deg);animation:shine 5s ease-in-out 2.4s infinite;pointer-events:none}
.hero-copy .primary:hover{transform:translateY(-2px) scale(1.03)}.hero-copy .primary:active{transform:translateY(1px) scale(.98)}
.hero-copy .primary span{display:inline-block;transition:transform .5s var(--spring)}.hero-copy .primary:hover span{transform:translateX(5px)}
.hero-art picture,.brand picture{display:contents}
 .hero-art img{animation:art-in 1.1s var(--ease-out-expo) .15s backwards}
.hero-art .art-caption{animation:rise-in .8s var(--ease-out-expo) 1s backwards}
/* Pause every loop while the hero is not visible. */
.hero.is-idle *,.hero.is-idle *:after{animation-play-state:paused!important}
/* Scroll: sections rise in with a slight blur, labels draw their line, offer cards follow one another. */
.reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s ease calc(var(--i,0)*70ms),transform 1s var(--ease-out-expo) calc(var(--i,0)*70ms),filter .7s ease calc(var(--i,0)*70ms)}
/* Blur only on large screens with a mouse; on phones it would cost frames on long text blocks. */
@media(hover:hover) and (min-width:760px){.reveal{filter:blur(5px)}}
.reveal.is-in{opacity:1;transform:none;filter:none}
.section-label.reveal{transform:none;filter:none}.section-label.reveal:after{transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease-out-expo) .15s}.section-label.is-in:after{transform:none}
.step.is-in .step-icon{animation:art-in .8s var(--spring) calc(var(--i,0)*70ms + .2s) backwards}
.step-icon{transition:transform .5s var(--spring)}.step:hover .step-icon{transform:rotate(-8deg) scale(1.12)}
.step{transition:transform .5s var(--spring),box-shadow .3s}.step:hover{transform:translateY(-4px)}
.facts strong{display:inline-block;font-variant-numeric:tabular-nums}
.offer-family.is-in .offer-card{animation:card-in .7s var(--spring) calc(var(--j,0)*45ms + .1s) backwards}
.offer-card{transition:transform .45s var(--spring),box-shadow .3s ease}.offer-card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 var(--tile-edge,#e8e9df)}
.offer-art{display:inline-block;transition:transform .5s var(--spring)}.offer-card:hover .offer-art{transform:scale(1.2) rotate(-8deg)}
/* Reading progress across the landing, driven by the scroll position where the browser supports it. */
.landing-progress{position:fixed;left:0;top:0;right:0;height:4px;z-index:50;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#6f9a4f,#d8913a,#4d8ca3);pointer-events:none;display:none}
@supports (animation-timeline:scroll()){.landing-progress{display:block;animation:grow linear both;animation-timeline:scroll(root);transform:none}
 .hero-scene{animation:scene-drift linear both;animation-timeline:scroll(root);animation-range:0 700px}
 @keyframes scene-drift{to{transform:translateY(90px);opacity:.4}}}
@media(max-width:650px){.glyph:nth-child(n+9){display:none}.glyph{font-size:calc(var(--s)*.62)}.hero-scene{inset:-20px 0 0}}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.is-in{opacity:1;transform:none;filter:none}.section-label.reveal:after{transform:none}.landing-progress{display:none}.hero-scene{animation:none}.glyph{translate:none}.hero h1 em{background-position:0 0}}
/* Uhr U6: digital time and the day band from 0 to 24 h */
.clock-digital{margin:8px auto 14px;width:max-content;padding:10px 26px;border-radius:18px;background:#26312a;color:#dff7c8;font:700 clamp(40px,11vw,64px)/1.1 ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.digital-band{position:relative;display:flex;max-width:520px;margin:14px auto 18px;border-radius:14px;border:1px solid #d9dfce;font-size:14px;font-weight:700;text-align:center}
.digital-part:first-child{border-radius:13px 0 0 13px}.digital-part:nth-last-child(2){border-radius:0 13px 13px 0}
.digital-band[hidden]{display:none}
.digital-part{display:flex;align-items:center;justify-content:center;padding:8px 2px;min-width:0;hyphens:manual;line-height:1.15}
.digital-part[data-part="night"]{background:#3d4466;color:#e8ebff}.digital-part[data-part="morning"]{background:#fbe9c4;color:#6b4d12}.digital-part[data-part="afternoon"]{background:#f6d59a;color:#6b4d12}.digital-part[data-part="evening"]{background:#e3b7a6;color:#5a2d1e}
.digital-marker{position:absolute;top:-13px;width:0;height:0;margin-left:-8px;border:8px solid transparent;border-top:11px solid #1f2a22;border-bottom:0}
@media(max-width:420px){.digital-band{font-size:12px}.digital-part{padding:8px 1px}}
/* Uhr U7: duration between two times, and a sand timer that runs one real minute (width/scale set by JS, so
   it also runs with reduced motion, where CSS animations are off) */
.clock-span{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;margin:8px 0 16px}
.clock-span .clock-digital{margin:0;font-size:clamp(24px,7.5vw,48px);padding:8px clamp(8px,2.5vw,16px)}
.clock-span-arrow{font-size:clamp(22px,6vw,30px);font-weight:800;color:#405238}
.sand-timer{width:120px;margin:10px auto 18px;padding:0 6px;display:grid;grid-template-rows:84px 84px;border-top:8px solid #8a6a3a;border-bottom:8px solid #8a6a3a;border-radius:6px}
.sand-timer[hidden]{display:none}
.sand-chamber{position:relative;display:block;overflow:hidden;background:#e4eff2}
.sand-chamber-top{clip-path:polygon(0 0,100% 0,56% 100%,44% 100%)}
.sand-chamber-bottom{clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.sand{position:absolute;left:0;right:0;bottom:0;height:100%;background:#e0b565;transform-origin:bottom}
.clock-voice-note{margin:18px auto 0;max-width:560px;color:#6b7560;text-align:center}
/* «Kleine Denkspiele»: five cards in a row left long single words such as «Buchstabenpaare» cut off at the card edge. */
.workshop-choices .category h2{font-size:clamp(21px,2.1vw,29px);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
/* Spiel-Bewegung (Teil 34, docs/IDEE-SPIELE-BEWEGUNG-2026-10-01.md). Bewegung erklärt den Inhalt oder bestätigt eine Handlung,
   keine Dauerschleifen, falsch ist nie laut. Reduzierte Bewegung, «Weniger Daten» und reizarm schalten alles global ab;
   JavaScript-Animationen fragen motion.js. Der Endzustand ist ohne Bewegung derselbe. */
@keyframes key-right{35%{transform:scale(1.12)}}
@keyframes key-wrong{40%{transform:translateY(4px) scale(.97)}}
@keyframes dot-in{from{transform:scale(0);opacity:0}}
@keyframes dot-out{to{opacity:.4;transform:scale(.82)}}
@keyframes count-bump{40%{transform:scale(1.2)}}
@keyframes slot-land{from{transform:scale(1.4)}}
@keyframes melody-draw{from{stroke-dashoffset:1}}
@keyframes letter-sound{40%{transform:translateY(-8px) scale(1.12);color:#b9803c}}
@keyframes speak-ring{from{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.3)}}
@keyframes board-glow{from{box-shadow:0 0 0 0 #f3d27acc,0 10px 40px #a5bc8f20}to{box-shadow:0 0 0 18px #f3d27a00,0 10px 40px #a5bc8f20}}
.character-key.is-right,.clock-option.is-right,.sort-choice.right{animation:key-right .5s var(--spring)}
.character-key.is-wrong,.sort-choice.wrong{animation:key-wrong .35s ease}
.fly-ghost{position:fixed;z-index:200;display:grid;place-items:center;pointer-events:none;font-weight:700;color:#405238;background:#fffdf7;border:2px solid #a3b68c;border-radius:18px;box-shadow:0 12px 26px -8px #40523866;will-change:transform}
.gap-slot{display:inline-block;min-width:.62em;text-align:center;border-radius:.16em}
.gap-slot.is-right{color:#3f6b2f;background:#e3eed8;animation:slot-land .45s var(--spring)}
.gap-slot.is-wrong{color:#8a5a3a;background:#f6e9df;animation:slot-land .45s var(--spring)}
.gap-slot.is-landing{opacity:0;animation:none}
.melody{display:block;width:min(100%,420px);height:auto;margin:6px auto -14px;overflow:visible}
.melody path{fill:none;stroke:#d8913a;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;animation:melody-draw 1.1s ease-out backwards}
.equation-picture{display:flex;justify-content:center;margin:2px 0 0}
.equation-picture .ten-frames{width:100%;max-width:225px}
.equation-picture.is-playing i.filled{animation:dot-in .38s var(--spring) calc(var(--k,0)*80ms) backwards}
.equation-picture.is-playing i.removed{animation:dot-in .38s var(--spring) calc(var(--k,0)*80ms) backwards,dot-out .5s ease calc(var(--k,0)*80ms + .7s) forwards}
.build-dot{position:relative}
.build-dot.filled:not(.fixed){animation:dot-in .32s var(--spring)}
.build-dot.counted,.build-dot.counted:disabled{opacity:1;background:#7f9f68;border-color:#6b8a55;animation:count-bump .42s var(--spring);box-shadow:0 0 0 3px #f2d48a}
.build-dot.counted:after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:clamp(11px,2.6vw,16px);color:#fffdf7;text-shadow:0 1px 1px #40523866}
.blend-line{position:relative;padding-bottom:18px;transition:gap 1.2s var(--ease-out-expo)}
.blend-line:after{content:'';position:absolute;left:50%;bottom:0;width:min(70%,260px);height:14px;border-bottom:5px solid #e4c98d;border-radius:0 0 50% 50%/0 0 100% 100%;transform:translateX(-50%) scaleX(.15);opacity:0;transition:transform 1.2s var(--ease-out-expo),opacity .4s}
.blend-line.together:after{transform:translateX(-50%) scaleX(1);opacity:1}
.blend-line.sounding .blend-letter{animation:letter-sound .6s ease calc(var(--i,0)*.45s) both}
.blend-line.solved .blend-letter{color:#3f6b2f}
.blend-line.solved:after{border-color:#9dbb88}
.is-speaking{position:relative}
.is-speaking:after{content:'';position:absolute;inset:-4px;border-radius:inherit;border:3px solid #d8b062;pointer-events:none;animation:speak-ring 1.4s ease-out forwards}
.board-wrap.success{animation:board-glow 1.1s ease-out}
.puzzle-board-wrap.is-complete{animation:board-glow 1.2s ease-out}
.day-slot.is-landing>*{opacity:0}
.day-slot.is-landed{animation:key-right .45s var(--spring)}
@keyframes stamp-down{0%{transform:scale(2.4) rotate(-22deg);opacity:0}55%{transform:scale(.92) rotate(-3deg);opacity:1}75%{transform:scale(1.06) rotate(-5deg)}100%{transform:rotate(-4deg)}}
.mission-stamp.is-new{animation:stamp-down .6s cubic-bezier(.3,.7,.4,1) .15s backwards}
/* Erdkugel (Teil 34): solange die Erdkarte lädt oder wenn sie fehlt, ein ruhiges Meer statt einer schwarzen Scheibe. */
@keyframes globe-wait{50%{opacity:.75}}
.globe-canvas-wrap.is-loading .globe-canvas,.globe-canvas-wrap.is-failed .globe-canvas{background:radial-gradient(circle at 35% 30%,#9fd0e0,#3f86a6 55%,#1f4f6a)}
.globe-canvas-wrap.is-loading .globe-canvas{animation:globe-wait 1.6s ease-in-out infinite}
.globe-stage:has(.globe-note){flex-wrap:wrap}
.globe-note{flex:0 0 100%;margin:10px 0 0;text-wrap:balance;text-align:center;color:#4f5a47}
/* Wortschatz-Karten (Teil 35): jede Antwort eine gleich grosse Bildkachel im Ton des Themas, ♫ direkt darunter.
   Nach der richtigen Antwort steht das Wort aus dem Sprachpaket unter dem Bild (vorher nicht, sonst ersetzt Lesen
   das Zuhören). Keine neuen Bilder, Emojis wie bisher. Bewegung nur als Bestätigung, global abschaltbar wie Teil 34. */
@keyframes name-in{from{transform:translateY(-6px);opacity:0}}
.context-tasks .listen-options.picture-options{display:grid;grid-template-columns:repeat(3,minmax(0,150px));justify-content:center;gap:clamp(10px,3vw,24px);margin:18px auto}
.picture-option{--tile:#fbf3e2;--tile-edge:#e7d6b4;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.picture-option[data-theme=essen]{--tile:#fcefe1;--tile-edge:#ebcfae}
.picture-option[data-theme=tiere]{--tile:#edf3e3;--tile-edge:#cbdab6}
.picture-option[data-theme=koerper]{--tile:#fbece8;--tile-edge:#e8cbc3}
.picture-option[data-theme=kleidung]{--tile:#eaf0f6;--tile-edge:#c8d4e3}
.picture-option[data-theme=schule]{--tile:#f6f0da;--tile-edge:#e0d2a3}
.picture-option[data-theme=zuhause]{--tile:#f2edf5;--tile-edge:#d7cde2}
.context-tasks .listen-pick.picture-pick{flex:none;width:100%;max-width:none;aspect-ratio:1;min-width:0;min-height:0;height:auto;padding:0;display:grid;place-items:center;font-size:inherit;letter-spacing:0;border-radius:26px;border:2px solid var(--tile-edge);background:radial-gradient(circle at 50% 44%,#fffdf7 0 36%,var(--tile) 74%);box-shadow:0 5px 0 -1px var(--tile-edge),0 14px 22px -14px #40523866;transition:transform .2s var(--spring)}
.picture-emoji{display:block;font-size:clamp(46px,13vw,78px);line-height:1;filter:drop-shadow(0 5px 3px #40523830)}
@media(hover:hover){.context-tasks .picture-pick:not(:disabled):hover{transform:translateY(-3px)}}
.context-tasks .picture-pick:not(:disabled):active{transform:translateY(2px)}
.context-tasks .picture-pick.is-hinted{background:radial-gradient(circle at 50% 44%,#fffdf7 0 36%,#fbf3d6 74%)}
.context-tasks .picture-pick.is-right{border-color:#7f9f68;background:radial-gradient(circle at 50% 44%,#fffdf7 0 36%,#e3eed8 74%);box-shadow:0 5px 0 -1px #9dbb88,0 0 0 4px #f2d48a;opacity:1}
.context-tasks .picture-pick.is-wrong .picture-emoji{opacity:.5;filter:grayscale(.5)}
.context-tasks .picture-pick:disabled:not(.is-right){opacity:.55}
.picture-option .listen-speak{min-width:56px;min-height:44px;padding:0 16px;border-radius:999px}
.picture-name{max-width:100%;font-weight:700;font-size:clamp(15px,3.8vw,19px);line-height:1.2;color:#3f6b2f;text-align:center;overflow-wrap:anywhere;hyphens:auto}
.picture-name:not([hidden]){animation:name-in .45s var(--spring)}
html.target-large .context-tasks .listen-options.picture-options{grid-template-columns:repeat(3,minmax(0,200px))}
/* Aufgaben-Überschrift (Teil 36): echte h2 für Fokus und Überschriften-Navigation, optisch wie vorher <strong> bzw. der Auftrag. */
.learn-header .task-heading{font-size:inherit;line-height:inherit;letter-spacing:normal;font-weight:700;margin:0}
@media(max-width:650px){.learn-header .task-heading{font-size:14px}}
.clock-prompt .task-heading,.earth-prompt .task-heading{font:inherit;letter-spacing:normal;margin:0;color:inherit}
.task-heading:focus,#main h1[tabindex="-1"]:focus,#main h2[tabindex="-1"]:focus{outline:none}

/* Ein Bildkonzept für die ganze PWA: freie Bilder, Beschriftungen darunter. */
.brand img,.avatar,.companion img,.buddy-card img,.upload-preview,.name-finish-art,.album-item img,.reward-image,.image-dialog .reward-image{border:0;border-radius:0;box-shadow:none}
.album-item{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;overflow:visible}
.album-item img{display:block}
.album-item button:focus-visible,.activity-card:focus-visible{outline:3px solid #365529;outline-offset:4px}
.reward .reward-caption{font-weight:700;color:#35452f;margin:10px 0 0}
.activity-art:has(img){border-radius:0;background:transparent;overflow:visible}
.activity-art:has(img) img{object-fit:contain}
.hero-art{display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:none;margin-top:0}
.hero-art img{display:block;width:min(96%,560px);max-height:560px;height:auto;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;mix-blend-mode:normal;rotate:none;animation:art-in 1.1s var(--ease-out-expo) .15s backwards}
.hero-art .art-caption{position:static;display:block;align-self:center;transform:none;bottom:auto;left:auto;margin:8px 0 0;padding:0;background:transparent;border-radius:0;text-align:center;font-style:normal;color:#405238}
.puzzle-board-wrap{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0}
.context-tasks .listen-pick.picture-pick,.context-tasks .picture-pick.is-right{border:0;border-radius:0;box-shadow:none;background:transparent}
.context-tasks .picture-pick.is-right .picture-emoji{filter:drop-shadow(0 3px 3px #40523830)}
@media(max-width:650px){.hero-art img{width:100%;max-height:390px;padding:0}.hero-art .art-caption{bottom:auto}.album-item{padding:0;border-radius:0}}