:root{--blue:#1f4e79;--blue2:#2c6ea3;--gold:#e3a400;--ink:#203040;--ok:#39775a;--bad:#a62b2b}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:16px/1.55 Arial,Helvetica,sans-serif;color:var(--ink);background:#f3f6f9}
a{color:var(--blue)}
.wrap{max-width:1050px;margin:auto;padding:0 22px}
header{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:25px 0 30px;border-bottom:6px solid var(--gold)}
header a{color:#fff}.crumbs{font-size:14px;opacity:.95}.kicker{margin-top:20px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}
header h1{margin:5px 0 6px;font-size:clamp(1.7rem,5vw,2.9rem);line-height:1.08}header p{margin:0;font-size:18px}
main{flex:1 0 auto;width:100%}
.status,.mission{background:#fff;border:1px solid #d6e0e8;border-radius:16px;box-shadow:0 4px 14px #18324a0d}
.status{margin:14px 0;padding:20px}.statusline{display:flex;justify-content:space-between;gap:15px}
.bar{height:10px;background:#dce7ef;border-radius:99px;overflow:hidden;margin:10px 0}.bar i{display:block;height:100%;background:var(--ok);width:0;transition:.25s}
.navrow{display:flex;align-items:center;gap:15px}.navbtn{border:0;border-radius:9px;padding:11px 14px;background:#e8edf2;color:#203040}.navbtn[hidden]{display:none}.navhint{font-size:.95rem}
.portal-start>.intro{padding:0;border:0;box-shadow:none;margin:0 0 16px}
.portal-start>.intro h2,.portal-start>.prestart h2{font-size:clamp(1.4rem,3vw,1.75rem)}
.prestart{border-top:1px solid #d6e0e8;padding-top:16px;margin-top:16px}.prestart>em{font-style:normal;color:var(--blue);font-size:.78rem;font-weight:700;letter-spacing:.08em}
.mission{display:none;padding:20px;margin-bottom:14px}.mission.active{display:block}.mission h3{color:var(--blue)}
.merke,.actionbox,.warning,.success,.tip{padding:15px 17px;margin:16px 0;border-radius:8px}
.merke,.warning{background:#fff4d6;border-left:5px solid var(--gold)}
.actionbox{background:#eef5fa;border:1px solid #d6e0e8;border-left:5px solid var(--blue2)}.actionbox h3{margin:0 0 8px}
.success{background:#eaf6ee;border-left:5px solid var(--ok)}.tip{background:#f6f8fa;border-left:5px solid var(--blue2);padding:11px 13px}
.interactive{border:2px solid #c9dbe8;background:#f7fbfe;padding:17px;border-radius:14px;margin:18px 0}
.mcoptions{display:grid;gap:9px}.mcoptions button{font:inherit;text-align:left;background:#fff;border:2px solid #b9cad7;border-radius:10px;padding:12px;cursor:pointer}
.mcoptions button.correct{border-color:var(--ok);background:#eaf7ef}.mcoptions button.wrong{border-color:var(--bad);background:#fff0f0}
.feedback{font-weight:700;min-height:1.3em}
button{font:inherit;font-weight:700;cursor:pointer}
.bottomnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;border-top:1px solid #d6e0e8;padding-top:12px}
.bottomnav button{border:0;border-radius:9px;padding:11px 14px;font:700 1rem Arial,Helvetica,sans-serif;line-height:1.1;min-height:38px}
.bottomnav .back{background:#e8edf2;color:#203040}
.bottomnav .done{margin-left:auto;background:#1f4e79;color:#fff}
.bottomnav .done:hover{background:#2c6ea3}
details{margin:12px 0;border:1px solid #d6e0e8;border-left:5px solid var(--blue2);border-radius:8px;padding:10px 13px;background:#f7fafd}summary{cursor:pointer;font-weight:700}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fake-slide{aspect-ratio:16/9;background:#fff;border:2px solid #c9d3dc;border-radius:8px;padding:18px;box-shadow:0 2px 7px #0001}
.fake-slide h4{font-size:20px;margin:0 0 12px}.tiny{font-size:9px}.lowcontrast{color:#f2dc78}.chaos span:nth-child(2n){font-size:24px}.checklist{line-height:1.8}
.shot{margin:18px 0;text-align:center}.shot img{max-width:100%;height:auto;border:1px solid #cbd6df;border-radius:12px;box-shadow:0 2px 8px #0001}.shot figcaption{font-size:14px;color:#5c6b78;margin-top:7px}
.keycombo{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 8px;font-size:1.4rem;font-weight:800}.keycombo img{max-width:42%;max-height:62px;width:auto;height:auto}
.shortcut-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.shortcut-row>div{text-align:center;background:#fff;border:1px solid #cbd6df;border-radius:12px;padding:15px}.shortcut-row img{max-width:100%;max-height:70px;width:auto;height:auto}.shortcut-row p{margin:8px 0 0}
.sample-image img{max-height:330px;object-fit:contain}
.portal-module-finish{margin-top:14px}.competencies{display:inline-block;text-align:left;margin:0 auto 6px;padding-left:1.4rem}
footer.portal-footer{flex:none;width:100%;background:#17344d;color:#eaf0f5;padding:18px 0;font:400 .9rem/1.55 Arial,Helvetica,sans-serif}
footer.portal-footer .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 15px}
footer.portal-footer a.footerlink{color:#eaf0f5;text-decoration:underline;text-underline-offset:3px}
footer.portal-footer a.footerlink:hover,footer.portal-footer a.footerlink:focus{color:#fff}
footer.portal-footer .footersep{opacity:.6;padding:0 .45rem}
@media(max-width:650px){.wrap{padding:0 15px}.mission{padding:20px 16px}.bottomnav{flex-direction:column-reverse;align-items:stretch}.bottomnav button{width:100%;margin:4px 0;text-align:center}.bottomnav .done{margin-left:0}.shortcut-row,.compare{grid-template-columns:1fr}.keycombo img{max-height:52px}}
@media(max-width:700px){.navhint{display:none}}