.dd-page{min-height:100vh;margin:0;color:#14223a;background:#eef3f6;--navy:#101c36;--cyan:#50dfcf;--green:#62e6a7;--blue:#57a8ff;--yellow:#ffe06a;--red:#ff7777}.dd-page *{box-sizing:border-box}.dd-page button,.dd-page select,.dd-page input{font:inherit}.dd-page button{touch-action:manipulation}.dd-appbar{height:58px;color:#fff;background:#101c36}.dd-appbar-inner{width:min(1480px,calc(100% - 2rem));height:100%;display:flex;align-items:center;gap:1rem;margin:auto}.dd-brand{display:flex;align-items:center;gap:.65rem;color:#fff;font-weight:900;text-decoration:none;white-space:nowrap}.dd-brand span{display:grid;width:48px;height:42px;place-items:center;border-radius:11px;color:#092524;background:var(--cyan);font-size:.8rem}.dd-tabs{height:100%;display:flex;margin-left:auto}.dd-tabs button{min-width:138px;padding:0 1rem;border:0;border-bottom:3px solid transparent;color:#b9c8dc;background:transparent;font-weight:850;cursor:pointer}.dd-tabs button:hover,.dd-tabs button[aria-selected=true]{color:#fff;border-color:var(--cyan);background:rgba(255,255,255,.05)}.dd-home{display:grid;width:40px;height:40px;place-items:center;border-radius:10px;color:#fff;background:#22314c;font-size:1.2rem;text-decoration:none}.dd-shell{width:min(1480px,calc(100% - 2rem));height:calc(100vh - 58px);height:calc(100dvh - 58px);margin:auto;padding:.65rem 0 .75rem;overflow:hidden}.dd-panel{height:100%;min-height:0}.dd-panel[hidden]{display:none!important}#panel-board{display:grid;grid-template-rows:minmax(0,1fr) auto}.dd-board{position:relative;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:clamp(.35rem,1vh,.65rem);padding:clamp(.65rem,1.5vh,1rem) 1.2rem;overflow:hidden;border-radius:22px;color:#fff;background:radial-gradient(circle at 92% 0,rgba(80,223,207,.14),transparent 22rem),var(--navy);box-shadow:0 22px 65px rgba(15,28,53,.2)}.annotation-canvas{position:absolute;inset:0;z-index:8;width:100%;height:100%;pointer-events:none;touch-action:none}.classroom-canvas.pen-active .annotation-canvas{pointer-events:auto;cursor:crosshair}.board-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#9db0c9;font-size:.72rem;font-weight:900;letter-spacing:.11em}.board-top label{display:flex;align-items:center;gap:.5rem}.board-top select{max-width:min(600px,55vw);min-height:40px;padding:.45rem 2rem .45rem .65rem;border:1px solid #40516e;border-radius:9px;color:#e8f1fb;background:#22314c;font-weight:750;letter-spacing:0}.rule-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.rule-mini{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 .65rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.15);border-left:5px solid var(--tone);border-radius:11px;background:rgba(255,255,255,.06)}.rule-mini b{grid-column:1/-1;color:var(--tone);font-size:.65rem;letter-spacing:.1em}.rule-mini strong{color:#fff;font-size:clamp(1.15rem,2.5vh,1.55rem)}.rule-mini span{color:#bdcadd;font-size:clamp(.68rem,1.4vh,.82rem);font-weight:750}.article-rule{--tone:var(--green)}.pronoun-rule{--tone:var(--blue)}.conjunction-rule{--tone:var(--yellow)}.sample-stage{position:relative;z-index:2;display:grid;align-content:center;justify-items:center;min-height:0;padding:.25rem 1rem;text-align:center}.sample-label{margin:0 0 .25rem;color:#8fa2bc;font-size:.65rem;font-weight:900;letter-spacing:.13em}.sample-sentence{font-size:clamp(1.25rem,min(3.1vw,4.2vh),2.6rem);font-weight:900;line-height:1.35}.gap-word{display:inline-block;min-width:3.4em;padding:0 .18em;color:var(--yellow);border-bottom:3px solid var(--yellow)}.probe-highlight{padding:.02em .18em;border-radius:.2em;color:#092524;background:var(--green);animation:probePulse .45s ease}.probe-highlight.blue{background:var(--blue)}.probe-highlight.yellow{background:var(--yellow)}.probe-result{min-height:2.25rem;margin-top:clamp(.3rem,1.2vh,.75rem);padding:.38rem .8rem;border-radius:9px;color:#dfe8f5;background:rgba(255,255,255,.07);font-size:clamp(.75rem,1.6vh,.92rem);font-weight:750}.probe-result.good{color:#092524;background:var(--green)}.probe-result.no{color:#2f2410;background:var(--yellow)}.probe-buttons{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.probe-buttons button{min-height:clamp(52px,7.5vh,68px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:.65rem;padding:.45rem .8rem;border:1px solid #40516e;border-radius:12px;color:#e8f1fb;background:#22314c;text-align:left;cursor:pointer}.probe-buttons button:hover,.probe-buttons button.active{border-color:var(--cyan);background:#293c5c}.probe-buttons span{grid-row:1/3;color:var(--cyan);font-size:1.35rem}.probe-buttons b{align-self:end}.probe-buttons small{align-self:start;color:#9fb0c7}.board-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:.65rem;color:#9fb0c7;font-size:.75rem;font-weight:850}.board-nav button{width:44px;height:38px;border:1px solid #40516e;border-radius:9px;color:#fff;background:#22314c;font-weight:900;cursor:pointer}.pen-dock{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;margin:.45rem auto 0;padding:.35rem .55rem;border:1px solid #d7e1e7;border-radius:13px;background:#fff;box-shadow:0 8px 26px rgba(31,48,71,.06)}.pen-dock button{min-height:38px;padding:.4rem .65rem;border:1px solid #d8e1e7;border-radius:8px;color:#48576d;background:#f4f7f9;font-weight:850;cursor:pointer}.pen-dock button[aria-pressed=true]{color:#fff;border-color:var(--navy);background:var(--navy)}.pen-colors{display:flex;gap:.35rem}.pen-colors button{width:32px;min-height:32px;padding:0;background:var(--pen)}.pen-colors button:nth-child(1){--pen:#fff}.pen-colors button:nth-child(2){--pen:#ffe06a}.pen-colors button:nth-child(3){--pen:#ff6b6b}.pen-colors button:nth-child(4){--pen:#62e6a7}.pen-colors button.active{outline:3px solid #9db0c9}.pen-dock label{display:flex;align-items:center;gap:.4rem;color:#657489;font-size:.76rem;font-weight:850}.pen-dock input{width:90px}.rules-sheet{height:100%;display:grid;grid-template-columns:minmax(260px,.7fr) minmax(440px,1.35fr);grid-template-rows:1fr auto;gap:clamp(.7rem,2vh,1.2rem);padding:clamp(1rem,3vh,2rem);border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(31,48,71,.1)}.rules-heading{display:flex;flex-direction:column;justify-content:center;padding:clamp(.8rem,2vw,1.7rem);border-radius:18px;color:#fff;background:radial-gradient(circle at 100% 0,rgba(255,224,106,.25),transparent 15rem),var(--navy)}.rules-heading span{color:var(--yellow);font-size:.72rem;font-weight:900;letter-spacing:.12em}.rules-heading h1{margin:.35rem 0;font-size:clamp(2rem,min(5vw,6vh),4.7rem);line-height:.94}.rules-heading p{margin:.7rem 0 0;color:#bdcadd}.golden-path{display:grid;align-content:center;gap:.65rem}.golden-path article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:clamp(.65rem,1.6vh,1rem);border:1px solid #dce5eb;border-radius:14px;background:#f8fafb}.path-number{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:#092524;background:var(--cyan);font-size:1.1rem;font-weight:950}.golden-path b{color:var(--navy);font-size:clamp(.88rem,1.7vh,1.05rem)}.golden-path p{margin:.1rem 0 0;color:#6d7a8d;font-size:.8rem}.golden-path strong{color:#087d78;font-size:clamp(1.15rem,2.5vh,1.55rem)}.comma-tip{grid-column:1/2;padding:clamp(.75rem,1.5vh,1.1rem);border-left:6px solid var(--yellow);border-radius:12px;background:#fff7dc}.comma-tip span{display:block;color:#8a6411;font-size:.68rem;font-weight:900;letter-spacing:.1em}.comma-tip strong{display:block;margin:.2rem 0;color:#49380e;line-height:1.35}.comma-tip p{margin:.25rem 0 0;color:#6f5b27}.comma-tip mark{padding:.05rem .25rem;background:var(--yellow)}.memory-line{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.4rem);padding:.65rem 1rem;border-radius:12px;color:#dfe8f5;background:var(--navy);font-size:clamp(.72rem,1.45vh,.9rem)}.memory-line b{color:var(--yellow);letter-spacing:.1em}.memory-line strong{padding:.18rem .55rem;border-radius:999px;color:#092524;background:var(--cyan);font-size:1rem}.practice-card{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(31,48,71,.1)}.practice-toolbar{display:grid;grid-template-columns:auto auto minmax(260px,1fr);gap:.8rem;align-items:center;padding:.65rem .8rem;border-bottom:1px solid #e3e9ee;background:#f8fafb}.mode-switch{display:flex}.mode-switch button,.random-button{min-height:44px;padding:.55rem .9rem;border:1px solid #d7e1e7;color:#526177;background:#fff;font-weight:850;cursor:pointer}.mode-switch button:first-child{border-radius:10px 0 0 10px}.mode-switch button:last-child{border-radius:0 10px 10px 0}.mode-switch button[aria-pressed=true]{color:#fff;border-color:var(--navy);background:var(--navy)}.random-button{border-radius:10px;color:#092524;border-color:var(--cyan);background:var(--cyan)}.practice-progress div{display:flex;justify-content:space-between;margin-bottom:.3rem;color:#657489;font-size:.78rem}.practice-progress strong{color:var(--navy)}.practice-progress i{display:block;height:8px;overflow:hidden;border-radius:999px;background:#dce5ea}.practice-progress i span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--yellow));transition:width .25s ease}.quick-mode,.sort-mode{min-height:0;display:grid;align-content:center;justify-items:center;padding:clamp(1rem,4vh,3rem);text-align:center}.task-kicker{margin:0 0 clamp(.5rem,2vh,1rem);color:#6b778a;font-size:.7rem;font-weight:900;letter-spacing:.12em}.practice-sentence,.sort-card{max-width:1100px;color:var(--navy);font-size:clamp(1.45rem,min(4vw,5vh),3.3rem);font-weight:900;line-height:1.35}.practice-sentence .gap-word{color:#087d78;border-color:var(--cyan)}.answer-buttons{display:flex;gap:1rem;margin:clamp(1rem,3vh,2rem) 0}.answer-buttons button{min-width:clamp(130px,18vw,230px);min-height:clamp(60px,10vh,90px);border:2px solid #d6e0e7;border-radius:16px;color:var(--navy);background:#f6f9fa;font-size:clamp(1.45rem,3vw,2.2rem);font-weight:950;cursor:pointer}.answer-buttons button:hover{border-color:var(--cyan);background:#eafbf9}.answer-buttons button:disabled{opacity:.55}.practice-message{min-height:1.8rem;color:#5f6d80;font-weight:800}.practice-message.correct{color:#087b56}.practice-message.incorrect{color:#a3402e}.hint-box{margin-top:.65rem;padding:.65rem 1rem;border-left:5px solid var(--yellow);border-radius:9px;color:#66501a;background:#fff8df;font-weight:750}.practice-actions{display:flex;gap:.65rem;margin-top:.75rem}.practice-actions button{min-height:44px;padding:.55rem 1rem;border:0;border-radius:9px;color:#44395f;background:#eee9f8;font-weight:850;cursor:pointer}.practice-actions button:last-child{color:#fff;background:var(--navy)}.sort-card{width:min(950px,100%);padding:clamp(1rem,3vh,2rem);border:2px solid #cbd8e1;border-radius:18px;background:#f8fafb;cursor:grab}.sort-card.dragging{opacity:.55}.sort-zones{width:min(1000px,100%);display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(.8rem,2vh,1.4rem)}.sort-zone{min-height:clamp(100px,18vh,160px);display:grid;place-items:center;padding:.8rem;border:3px dashed #b9c9d5;border-radius:18px;color:#5f6d80;background:#f5f8fa;cursor:pointer}.sort-zone:first-child{border-color:#74b8ff;background:#eef7ff}.sort-zone:last-child{border-color:#f0c851;background:#fff9e6}.sort-zone strong{color:var(--navy);font-size:clamp(1.7rem,4vh,2.5rem)}.sort-zone small{font-weight:750}.sort-zone.dragover{transform:scale(1.015);box-shadow:0 0 0 5px rgba(80,223,207,.22)}@keyframes probePulse{50%{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.dd-page *{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:900px){.dd-tabs button{min-width:auto;padding:0 .65rem}.rule-mini span{font-size:.68rem}.rules-sheet{grid-template-columns:.75fr 1.25fr}.pen-dock{justify-content:flex-start;overflow-x:auto}}@media(max-width:680px){.dd-page{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto}.dd-appbar{height:auto;min-height:58px}.dd-appbar-inner{width:calc(100% - 1rem);min-height:58px;gap:.35rem}.dd-brand strong{display:none}.dd-brand span{width:42px}.dd-tabs{flex:1}.dd-tabs button{min-width:0;flex:1;padding:0 .25rem;font-size:.68rem}.dd-home{width:38px}.dd-shell{width:calc(100% - 1rem);height:auto;min-height:calc(100vh - 58px);padding:.5rem 0 1rem;overflow:visible}.dd-panel{height:auto}.dd-board{min-height:850px;padding:.8rem;border-radius:16px}.board-top{align-items:flex-start;flex-direction:column}.board-top label,.board-top select{width:100%;max-width:none}.rule-strip{grid-template-columns:1fr}.sample-stage{min-height:210px;padding:.5rem}.probe-buttons{grid-template-columns:1fr}.probe-buttons button{min-height:58px}.pen-dock{width:100%;max-width:100%;justify-content:flex-start}.pen-dock label{display:none}.rules-sheet{height:auto;grid-template-columns:1fr;grid-template-rows:auto;padding:.7rem}.rules-heading{min-height:240px}.comma-tip{grid-column:auto}.memory-line{flex-wrap:wrap}.practice-card{height:auto;min-height:720px}.practice-toolbar{grid-template-columns:1fr auto}.practice-progress{grid-column:1/-1}.quick-mode,.sort-mode{min-height:570px;padding:1rem}.sort-zones{grid-template-columns:1fr}.sort-zone{min-height:115px}}@media(max-width:420px){.dd-tabs button{font-size:0}.dd-tabs button:nth-child(1)::after{content:"Tafel";font-size:.65rem}.dd-tabs button:nth-child(2)::after{content:"Regeln";font-size:.65rem}.dd-tabs button:nth-child(3)::after{content:"Üben";font-size:.65rem}}