:root{--ink:#173749;--paper:#f3f6f8;--blue:#16465e;--edge:#bdced8;--radius:10px;--gap:20px;--ankommen:#426470;--wiederholen:#795a18;--neu:#5b4286;--machen:#236c83;--merken:#366449;--speichern:#75465b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 Arial,sans-serif}header,main,footer{max-width:880px;margin:auto;padding:22px}header{background:#173b52;color:white}h1{font-size:1.8rem;line-height:1.25}h2{font-size:1.45rem}h3{font-size:1.2rem}h4{font-size:1rem;margin-bottom:4px}nav{max-width:880px;margin:auto;padding:12px;display:flex;flex-wrap:wrap;gap:7px;background:white}button,.button{font:inherit;cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:white;padding:10px 13px;border-radius:7px;text-decoration:none;display:inline-block}nav button{font-size:1rem}nav [aria-current=step]{outline:3px solid #dfac36;outline-offset:2px}button:disabled{opacity:.7;cursor:default}.phase,.task,article{background:white;border:1px solid var(--edge);border-radius:var(--radius);padding:22px;margin-bottom:var(--gap)}.phase{border-top:8px solid var(--blue)}.phase-ankommen{border-top-color:var(--ankommen)}.phase-wiederholen{border-top-color:var(--wiederholen)}.phase-neu{border-top-color:var(--neu)}.phase-machen{border-top-color:var(--machen)}.phase-merken{border-top-color:var(--merken)}.phase-speichern{border-top-color:var(--speichern)}.time{font-weight:bold}.task{padding:16px;margin-top:16px}.task-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.learnimage{width:100%;max-width:700px;height:auto;margin:12px 0}ol,ul{padding-left:26px}li{margin:9px 0}label{display:block;margin:12px 0;font-weight:bold}label.choice{font-weight:normal}input,select,textarea{font:inherit;color:var(--ink);padding:9px;border:2px solid #7d98a7;border-radius:5px;background:white}input[type=radio],input[type=checkbox]{width:22px;height:22px;vertical-align:middle;margin-right:8px}textarea{display:block;width:100%;resize:vertical}select{display:block;max-width:100%;margin:7px 0}fieldset{border:1px solid var(--edge);border-radius:8px;margin:18px 0;padding:15px}legend{font-weight:bold}details{margin:12px 0;background:#edf3f6;border-radius:7px;padding:14px}summary{font-weight:bold;cursor:pointer}.finish,.merk,.target{background:#edf5ef;border-left:5px solid #518667;padding:14px}.merk p{margin:6px 0}.sentence{display:inline;background:transparent;color:var(--ink);border:0;padding:2px;text-align:left;font:inherit;border-radius:2px}.sentence:hover,.sentence:focus-visible{background:#fff3bf}.sentence.marked{text-decoration:underline;background:#fff3bf}.feedback{min-height:1em;font-weight:bold}.next-phase{margin-top:18px}footer{padding:12px}footer a{display:block;margin-top:14px;color:var(--blue)}[hidden]{display:none!important}:focus-visible{outline:3px solid #dfac36;outline-offset:3px}@media(max-width:600px){header,main{padding:14px}.phase{padding:15px}nav button{padding:8px}.task{padding:12px}h1{font-size:1.5rem}}@media print{nav,button,.task-tabs,footer{display:none!important}.phase,.task,[hidden]{display:block!important}body{background:white;font-size:11pt}header{background:white;color:var(--ink)}.phase,.task,article{break-inside:avoid;border:1px solid #777}details{display:block}textarea{min-height:3em}.learnimage{max-width:420px}.phase{border-top:2px solid black}}

@media print{.sentence{display:inline!important;background:transparent;color:black;opacity:1}#puzzle-solution[hidden]{display:none!important}}

.instruction{margin:12px 0;background:#edf3f6;border-radius:7px;padding:14px}.instruction h3,.instruction h4{margin-top:0}

#clear{background:transparent;color:#53636d;border:1px solid #9aaab3;font-size:14px;padding:7px 10px}
