/* Fijngetekende Lees en Doe-familie: pruim, oker en blauw. Alleen8039. */
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-900.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:'Patrick Hand';src:url('assets/fonts/patrick-hand.ttf') format('truetype');font-weight:400;font-display:swap}
@media screen{
:root{--ink:#413b49;--blue:#735a7b;--paper:#fffdfa;--ground:#faf7f2;--green:#536c55;--line:#d6ced6;--gold:#e9d6ac;--pen:'Patrick Hand','Trebuchet MS',sans-serif;--edge:#86718b}
body{font-family:Nunito,'Trebuchet MS',sans-serif;font-weight:400;line-height:1.7;color:var(--ink);background:var(--ground)}button,input,select,textarea{font-family:inherit}button{font-family:var(--pen);font-size:22px;font-weight:400;line-height:1.25;border:1.3px solid #705c79;background:var(--blue);border-radius:4px 7px 3px 6px / 6px 3px 7px 4px;box-shadow:2px 2px 0 #d0c3ce;padding:10px 17px}button:hover:not(:disabled){filter:none;background:#634d6c}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #755780;outline-offset:4px}a{color:#705279}
header{max-width:1200px;padding:23px 28px 0;gap:14px;min-height:125px;border-bottom:0}.brand{font-family:Nunito,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.5px;gap:11px}.brand b{color:#76567b;font-weight:800}.brand-icon{width:42px;height:43px;flex:none;font-family:var(--pen);font-size:30px;font-weight:400;background:#e9dcea;color:#77597b;border:1.2px solid #907397;border-radius:5px 8px 4px 7px;box-shadow:2px 2px 0 #d7c7d8;transform:rotate(-2deg)}.brand small{font-family:Nunito,sans-serif;font-size:11px;letter-spacing:.3px;color:#675d6d;font-weight:400;margin-top:2px}nav{gap:9px}nav button{font-family:Nunito,sans-serif;font-size:12px;font-weight:600;border:1px solid #aa97ae;border-radius:4px 6px 3px 5px;padding:9px 12px;background:#fffdfa;color:#5f4d69;box-shadow:1px 1px 0 #e0d5df}nav button:hover:not(:disabled){background:#f0e9f1}nav button[aria-current=page]{background:#e8ddea;color:#60416c;border-color:#8b6f96}.leesstrook{flex-basis:100%;order:10;display:flex;align-items:center;gap:10px;min-width:0;height:42px;padding-bottom:13px;background:url('assets/leeslijn.svg') left bottom/100% 22px no-repeat;margin-top:2px}.leesstrook i{flex:1}.leesstrook span{font-family:var(--pen);font-size:19px;line-height:1.2;color:#695270;background:#e9e1ed;border:1px solid #a693b0;padding:2px 7px 3px;border-radius:3px 5px 2px 4px;transform:rotate(-1deg)}.leesstrook span:nth-last-child(2){background:#f2e4c9;border-color:#b5a47d;transform:rotate(1deg)}.leesstrook span:last-child{background:#e0e9f1;border-color:#a0afbf;transform:rotate(-1deg)}
main{max-width:1160px;padding:26px 28px 42px}.voice-notice{background:#f4ecdc;border:1px solid #c4af88;border-radius:5px 8px 4px 6px;padding:12px 16px;margin:0 0 25px;font-size:13px;line-height:1.7;color:#65543b}.voice-notice b{font-weight:600}.eyebrow{font-family:Nunito,sans-serif;font-size:11px;font-weight:600;letter-spacing:.9px;color:#796382}h1,h2,h3{color:var(--ink)}h1{font-family:var(--pen);font-size:42px;line-height:1.15;font-weight:400;letter-spacing:0;margin:12px 0 20px}h2{font-family:var(--pen);font-size:30px;line-height:1.25;font-weight:400;letter-spacing:0}h3{font-family:var(--pen);font-size:26px;line-height:1.25;font-weight:400;letter-spacing:0}.hero{background:#eee6f0;border:1.3px solid #a08ca8;border-radius:8px 13px 7px 11px / 12px 7px 11px 8px;box-shadow:3px 3px 0 #d7ccdb;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding:28px;gap:32px;align-items:center}.hero>div:first-child{padding:0;min-width:0}.hero h1{display:table;max-width:100%;font-family:var(--pen);font-size:48px;line-height:1.1;letter-spacing:0;font-weight:400;background:#f3e5c9;border:1.2px solid #b39d77;border-radius:3px 7px 3px 5px;box-shadow:2px 2px 0 #d9cdb6;padding:10px 17px 15px;transform:rotate(-.5deg);margin:15px 0 22px}.hero h1 em{display:block;font:inherit;color:#79537d}.hero p:not(.eyebrow){font-size:17px;line-height:1.75;font-weight:400;color:#554c5e;margin-bottom:23px}.hero button{font-family:var(--pen);font-size:22px;line-height:1.3;background:#735a7b;border:1.3px solid #705c79;border-radius:4px 7px 3px 6px;padding:11px 18px;box-shadow:2px 2px 0 #c6b8cc}.hero button:hover:not(:disabled){background:#634d6c}.hero-art{display:block;min-height:0;background:#f5f0e8;border:1.2px solid #a390a8;border-radius:5px 8px 4px 7px;box-shadow:2px 3px 0 #c9bcd0;transform:none;overflow:hidden}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.art-caption{font-family:Nunito,sans-serif;font-size:11px;font-weight:400;letter-spacing:0;color:#695b6f;background:#f2ebf2;border-top:1px solid #c5b7c9;padding:9px}
.intro-steps{gap:15px;margin:27px 0 32px}.intro-steps div{border:1px solid #af9db0;border-radius:5px 8px 4px 6px;background:#eee5ed;box-shadow:1px 2px 0 #ddd1d9;padding:17px;color:#605265;font-size:14px;font-weight:400;line-height:1.65}.intro-steps div:nth-child(2){background:#e3ebf3;border-color:#9dadbf}.intro-steps div:nth-child(3){background:#f2e8d5;border-color:#b8aa8b}.intro-steps b{font-family:var(--pen);font-size:24px;line-height:1.2;font-weight:400;color:#654f71;margin-bottom:9px}.summary{padding:26px 0 15px;background:url('assets/leeslijn.svg') left top/100% 22px no-repeat;border:0;gap:15px}.summary h2{display:inline-block;font-family:var(--pen);font-size:31px;font-weight:400;letter-spacing:0;background:#e5eaf2;border:1px solid #94a2b6;border-radius:4px 6px 3px 5px;padding:5px 14px 8px;box-shadow:2px 2px 0 #d4d9df}.summary .muted{font-size:13px;color:#695b6d}.progress-bar{height:6px;border-radius:2px;background:#e5dfe6}.progress-bar>span{background:#92779c}
.lesson-grid{gap:17px}.lesson-card{--card:#eee5ee;position:relative;overflow:hidden;background:var(--paper);border:1.2px solid #ac99ae;border-radius:5px 9px 4px 7px / 7px 4px 8px 5px;padding:21px;gap:9px;box-shadow:2px 3px 0 #ded4dd;transition:none}.lesson-card:nth-child(4n+2){--card:#e3eaf3}.lesson-card:nth-child(4n+3){--card:#f2e5cc}.lesson-card:nth-child(4n){--card:#e9e6ef}.lesson-card::before{content:'';position:absolute;left:0;right:0;top:0;height:93px;background:var(--card);border-bottom:1px solid #c5b6c9;pointer-events:none}.lesson-card>*{position:relative}.lesson-card:hover{transform:none;box-shadow:3px 3px 0 #cebdcf;border-color:#80628b}.lesson-card .icon{display:grid;place-items:center;width:48px;height:48px;padding:3px;background:#fffaf3;border:1px solid #b8a7bc;border-radius:5px 8px 4px 6px;margin:0 0 2px}.lesson-card .icon img{display:block;width:39px;height:39px;max-width:100%;object-fit:contain}.lesson-card:nth-child(3n+2) .icon,.lesson-card:nth-child(3n) .icon{background:#fffaf3}.lesson-card .eyebrow{font-size:10px;font-weight:600;letter-spacing:.6px;margin-bottom:4px}.lesson-card h3{font-family:var(--pen);font-size:28px;line-height:1.15;letter-spacing:0;margin:0;font-weight:400}.lesson-card p{font-family:Nunito,sans-serif;font-size:14px;line-height:1.7;min-height:49px;color:#635568;margin:2px 0}.badge{align-self:flex-start;border:1px solid #c4b9c4;border-radius:3px 5px 2px 4px;background:#f0ebf0;color:#67556b;font-family:Nunito,sans-serif;font-size:11px;font-weight:400;line-height:1.5;padding:3px 7px;margin:4px 0 8px}.lesson-card button{font-family:var(--pen);font-size:21px;line-height:1.25;font-weight:400;border-radius:4px 7px 3px 6px;padding:9px 13px;text-align:left;width:100%;margin-top:auto}
.quiet{font-family:Nunito,sans-serif;font-size:13px;font-weight:600;background:#eee7ef;color:#65516e;border:1px solid #b8a4be;border-radius:4px 6px 3px 5px;box-shadow:1px 1px 0 #e1d4df;padding:9px 12px}.quiet:hover:not(:disabled){background:#e3d8e9}.muted{font-family:Nunito,sans-serif;font-size:13px;color:#6b5c71}.layout{grid-template-columns:210px minmax(0,1fr);gap:27px}.sidebar{padding-top:3px;font-size:14px}.sidebar h2{font-family:var(--pen);font-size:28px;font-weight:400;background:#eee4ec;border:1px solid #b39db7;border-radius:4px 6px 3px 5px;padding:7px 11px 10px;margin:10px 0 15px}.sidebar .eyebrow{font-size:10px}.sidebar button{font-size:12px;line-height:1.6}.sidebar ol{font-size:13px;color:#6b5c71}.work-card{background:#fffdfa;border:1.3px solid #9b87a5;border-radius:6px 10px 5px 8px / 9px 5px 8px 6px;box-shadow:3px 3px 0 #ddd0df;padding:28px;min-width:0}.work-card h1{font-family:var(--pen);font-size:39px;font-weight:400;letter-spacing:0}.work-card h2{font-family:var(--pen);font-size:30px;font-weight:400;letter-spacing:0}.mentor{position:relative;background:#eee7f0;border:1px solid #bcabc3;border-radius:5px 8px 4px 6px;box-shadow:1px 2px 0 #e1d7e3;padding:9px 15px 9px 0;gap:12px;margin-bottom:22px}.mentor .avatar{--size:79px}.mentor b{font-family:var(--pen);font-weight:400;font-size:20px;color:#765c80}.mentor p{font-family:Nunito,sans-serif;font-size:14px;line-height:1.7;font-weight:400;color:#594a61}.route-line{gap:9px;margin-bottom:23px}.route-line span{border:1px solid #c4b5c9;border-radius:3px 5px 2px 4px;background:#f1edf2;color:#776980;font-size:13px;padding:6px 11px}.route-line .active{background:#e6d8ec;border:1.2px solid #9976a6;color:#5e416a}.question-title{align-items:flex-start;gap:15px;margin:18px 0 13px}.question-title h3{font-family:Nunito,sans-serif;font-size:19px;font-weight:600;line-height:1.6;letter-spacing:0}.question-title h2{font-family:var(--pen);font-size:31px;font-weight:400;line-height:1.2;background:#e8e4f1;border:1px solid #b0a4c0;border-radius:3px 5px 3px 4px;padding:6px 11px 9px}.definition{font-family:Nunito,sans-serif;font-size:20px;font-weight:400;line-height:1.8;color:var(--ink)}.tip{border:1px solid #c7b791;background:#f5eddb;border-radius:4px 7px 3px 5px;font-family:Nunito,sans-serif;font-size:14px;line-height:1.7;padding:13px 15px;color:#685b40}.audio{flex:none;font-family:Nunito,sans-serif;font-size:12px;font-weight:600;line-height:1.3;background:#e5eaf3;color:#4f637d;border:1px solid #a7b5ca;border-radius:4px 6px 3px 5px;box-shadow:1px 1px 0 #d7deea;padding:7px 10px}.audio:hover:not(:disabled){background:#dce4ef}.passage-head{gap:13px}.passage-head h2{font-family:var(--pen);font-size:29px;font-weight:400;line-height:1.2}.passage{font-family:Nunito,sans-serif;font-size:20px;font-weight:400;line-height:1.9;background:#f7f2e6;border:1px solid #d1c19b;border-left:3px solid #bd9b59;border-radius:4px 6px 3px 5px;padding:19px 21px;margin:12px 0 24px;color:#493f42}
.option{font-family:Nunito,sans-serif;font-size:17px;font-weight:400;line-height:1.75;background:#f3eef4;border:1px solid #c8b9ce;border-radius:4px 6px 3px 5px;padding:12px 14px;gap:12px;margin-bottom:9px}.option:has(input:checked){background:#e7ddec;border-color:#9c7ca8}.option input{accent-color:#805f8d;margin-top:8px}.mark-sentence{background:#f3eef4;border:1px solid #ccbdd2;border-radius:4px 6px 3px 5px;padding:16px;line-height:2.8;font-family:Nunito,sans-serif;font-size:18px}.mark-word{font-family:Nunito,sans-serif;font-size:18px;font-weight:400;border:2px solid transparent;border-radius:0;box-shadow:none;background:transparent;color:var(--ink);padding:2px 4px;margin:0 1px;line-height:1.7}.mark-word:hover:not(:disabled){background:#e9deee;color:var(--ink)}.mark-word.circle[aria-pressed=true]{border-color:#805392;border-radius:50%}.mark-word.underline[aria-pressed=true]{text-decoration-color:#805392}.pair{padding:10px 5px;border-bottom:1px solid #dfd3e1;font-family:Nunito,sans-serif;font-size:16px;font-weight:400;gap:15px}.pair select,.task input[type=text]{font-family:Nunito,sans-serif;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink);background:#fffdfa;border:1px solid #b3a0bc;border-radius:4px 6px 3px 5px;padding:11px}.order-row{border:1px solid #c8b8cf;border-radius:4px 6px 3px 5px;background:#f2ecf3;font-family:Nunito,sans-serif;font-size:17px;line-height:1.7;padding:10px 12px}.order-row button{font-family:Nunito,sans-serif;font-size:20px;font-weight:400;padding:4px 11px}.feedback{font-family:Nunito,sans-serif;font-size:15px;font-weight:400;line-height:1.7;border-radius:4px 6px 3px 5px;padding:12px 14px}.feedback.good{background:#e8efe2;color:#405f3c}.feedback.retry{background:#f5e9d1;color:#765b35}.task-actions{gap:12px}.bottom-nav{background:url('assets/leeslijn.svg') left top/100% 22px no-repeat;border:0;padding-top:25px}.notice{background:#f1e5d0;border:1px solid #c9b58c;border-radius:5px 8px 4px 6px;font-family:Nunito,sans-serif;font-size:14px;line-height:1.75;padding:16px;color:#65563c}
.print-options{gap:24px}.print-options>.print-panel,.print-panel{border:1.3px solid #a08aa9;border-radius:6px 10px 5px 8px;background:#fffdfa;box-shadow:3px 3px 0 #dfd1e1;padding:22px}.print-panel h2{font-family:var(--pen);font-size:29px;line-height:1.25;font-weight:400;padding:8px 12px 10px;background:#e9e0ed;border:1px solid #bdabc5;border-radius:4px 6px 3px 5px;margin:0 0 17px}.print-panel:nth-child(2) h2{background:#f2e7cf;border-color:#c9b68d}.print-panel label{font-family:Nunito,sans-serif;font-weight:400;font-size:15px;line-height:1.65}.print-panel input{accent-color:#805f8d}.print-panel select,.count-label input{font-family:Nunito,sans-serif;border:1px solid #b8a4c1;border-radius:4px 6px 3px 5px;background:#fffdfa;color:var(--ink)}.print-panel select{font-size:14px;padding:9px}.print-lesson-choice{border-radius:3px 5px 3px 4px;border-bottom:1px solid #e5dce7;padding:9px 5px}.print-lesson-choice:has(input[type=checkbox]:checked){background:#eee5f1;border-color:#c3b0cd}.count-label input{width:59px;padding:5px;font-size:14px}.print-toolbar .quiet{font-size:12px}.count-label small{color:#776580}.print-panel .muted{font-size:13px;line-height:1.75}.print-panel #print-bundle{width:100%;font-size:22px;margin-top:10px}.print-panel #print-summary{margin:16px 0}
footer{max-width:1200px;padding:27px 28px 32px;border:0;background:url('assets/leeslijn.svg') left top/100% 22px no-repeat;font-family:Nunito,sans-serif;font-size:12px;line-height:1.9;color:#6f6175}
@media(max-width:1000px){header{gap:13px}nav{gap:7px}nav button{padding:8px 10px}.hero{gap:25px;padding:25px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.hero h1{font-size:42px;padding:9px 14px 13px}.hero p:not(.eyebrow){font-size:16px}.lesson-grid{gap:15px}.lesson-card{padding:19px}.layout{grid-template-columns:180px minmax(0,1fr);gap:22px}.work-card{padding:24px}}
@media(max-width:780px){header{padding:19px 22px 0}.brand{font-size:22px}main{padding:23px 22px 38px}.hero{grid-template-columns:1fr;padding:25px;gap:25px}.hero h1{font-size:45px;max-width:100%;padding:10px 16px 14px}.hero-art{max-width:470px;width:100%;justify-self:start}.intro-steps{gap:12px;margin:25px 0 28px}.intro-steps div{padding:14px;font-size:13px}.intro-steps b{font-size:23px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout{grid-template-columns:1fr;gap:20px}.sidebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0}.sidebar h2{font-size:25px;margin:0}.sidebar .eyebrow{flex-basis:100%;margin:0}.sidebar ol{display:none}.sidebar button{margin:3px 0}.work-card{padding:24px}.print-options{grid-template-columns:1fr}.summary h2{font-size:30px}.question-title{gap:12px}}
@media(max-width:520px){header{padding:17px 16px 0;gap:13px}.brand{font-size:22px;line-height:1.2}.brand-icon{width:40px;height:42px}.brand small{font-size:10px;margin-top:5px}.brand b{font-weight:800}nav{width:100%;justify-content:flex-start;gap:8px;flex-wrap:wrap}nav button{font-size:12px;padding:8px 10px}.leesstrook{height:38px;margin-top:0;padding-bottom:12px}.leesstrook span{font-size:18px}main{padding:20px 16px 35px}.voice-notice{font-size:13px;line-height:1.7;padding:12px 13px;margin-bottom:22px}.hero{padding:22px 18px;gap:23px}.hero h1{font-size:39px;line-height:1.12;padding:10px 12px 14px;margin:13px 0 21px;max-width:100%}.hero p:not(.eyebrow){font-size:16px;line-height:1.75;margin-bottom:22px}.hero button{font-size:22px;width:100%;padding:11px 13px}.hero-art{border-radius:4px 7px 3px 5px;border-width:1.2px;max-width:100%}.art-caption{font-size:11px;padding:9px}.intro-steps{grid-template-columns:1fr;gap:12px;margin:24px 0 29px}.intro-steps div{padding:15px;font-size:14px}.intro-steps b{font-size:25px;margin-bottom:7px}.summary{align-items:flex-start;padding-top:28px;gap:11px}.summary h2{font-size:29px;padding:5px 11px 8px}.summary .muted{font-size:12px}.lesson-grid{grid-template-columns:1fr;gap:17px}.lesson-card{padding:21px;gap:10px}.lesson-card h3{font-size:29px}.lesson-card p{font-size:15px;min-height:0}.lesson-card button{font-size:23px;padding:9px 13px}.lesson-card .icon{width:48px;height:48px}.lesson-card .eyebrow{font-size:11px}.badge{font-size:12px}.work-card{padding:20px 15px}.work-card h1{font-size:34px}.work-card h2{font-size:29px}.mentor{padding:9px 12px 9px 0;gap:8px}.mentor .avatar{--size:66px}.mentor b{font-size:20px}.mentor p{font-size:14px;line-height:1.7}.route-line{gap:8px}.route-line span{font-size:12px;padding:6px 9px}.sidebar{gap:9px}.sidebar button{font-size:12px}.question-title{gap:10px;flex-wrap:wrap}.question-title h3{font-size:18px;line-height:1.6}.question-title h2{font-size:30px}.definition{font-size:19px;line-height:1.8}.tip{font-size:14px}.audio{font-size:12px;padding:7px 9px}.passage-head{align-items:flex-start;flex-wrap:wrap;gap:9px}.passage-head h2{font-size:28px}.passage{font-size:19px;line-height:1.9;padding:16px 14px}.option{font-size:16px;padding:12px;line-height:1.8}.mark-sentence{padding:14px;font-size:18px}.mark-word{font-size:18px;padding:2px 4px}.pair{grid-template-columns:1fr;gap:9px;font-size:16px}.order-row{font-size:16px;padding:9px;gap:7px}.order-row button{padding:4px 9px}.task-actions{gap:10px}.task-actions>button{font-size:22px}.task-actions>.quiet{font-size:13px}.feedback{font-size:15px}.print-options{gap:21px}.print-panel{padding:18px}.print-panel h2{font-size:27px;padding:8px 10px 10px}.print-panel label{font-size:14px}.print-lesson-choice{gap:4px;flex-wrap:wrap}.print-lesson-choice>label:first-child{flex-basis:100%}.count-label{padding-left:23px!important}.count-label input{width:58px}.notice{font-size:14px}footer{padding:27px 16px 30px;font-size:11px}}
}
@media print{.leesstrook{display:none!important}}
@media screen{.lesson-card::before{height:106px}}

/* Eigen STEAM-houdingen per instructie; transparant en zonder beweging. */
@media screen{.mentor .steam-action{display:block;width:112px;height:112px;object-fit:contain;flex:0 0 112px;margin:0 0 0 8px}.mentor>div:last-child{min-width:0;flex:1}.mentor:has(.steam-action){gap:15px;padding-top:12px;padding-bottom:12px}@media(max-width:520px){.mentor .steam-action{width:86px;height:96px;flex-basis:86px;margin-left:4px}.mentor:has(.steam-action){gap:10px;padding-right:12px}.mentor:has(.steam-action) p{font-size:14px}}}

/* STEAM in de bestaande106px-tegelbalk; het48px-flowvak houdt alle tegelmaten gelijk. */
@media screen{.lesson-card .icon,.lesson-card:nth-child(3n+2) .icon,.lesson-card:nth-child(3n) .icon{position:static;display:block;width:48px;height:48px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}.lesson-card .icon img{position:absolute;top:0;right:0;display:block;width:100%;height:106px;max-width:100%;object-fit:contain;object-position:right 15px center;pointer-events:none}}

/* Elke instructietegel krijgt een eigen brede actiescène in de bestaande balk. */
@media screen{.lesson-card .icon img{height:106px;object-fit:cover;object-position:center;border-bottom:1px solid #bfaec2}.lesson-card>.eyebrow{width:fit-content;background:#fffdfaed;border-radius:2px;box-shadow:3px 0 0 #fffdfaed,-3px 0 0 #fffdfaed}}