.starter{background:var(--cream);border:2px solid;padding:22px;box-shadow:var(--shadow)}
.mini-tree{height:115px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:44px;justify-items:center;padding:4px 22% 0}.mini-tree span{grid-column:1/3}.mini-tree span,.mini-tree b{display:grid;place-items:center;width:44px;height:44px;border:2px solid;border-radius:50%;background:#fff;z-index:2}.mini-tree i{position:absolute;top:44px;width:160px;height:45px;border-top:2px solid;transform:rotate(0)}.mini-tree i:before,.mini-tree i:after{content:"";position:absolute;top:0;width:85px;border-top:2px solid}.mini-tree i:before{left:-3px;transform:rotate(-27deg);transform-origin:right}.mini-tree i:after{right:-3px;transform:rotate(27deg);transform-origin:left}
.tree-stage{position:relative;max-width:700px;height:330px;margin:18px auto;background:#eef4e7;border:2px solid;overflow:hidden}.branches{position:absolute;inset:0;width:100%;height:100%}.branches path{fill:none;stroke:var(--line);stroke-width:4}.node{position:absolute;width:58px;height:58px;border:3px solid;border-radius:50%;background:var(--cream);font-weight:800;cursor:pointer;z-index:2;transform:translate(-50%,-50%);box-shadow:3px 3px 0 var(--ink)}.node:hover,.node:focus-visible{background:var(--sun);outline:4px solid #2b67a055;outline-offset:3px}.node.done{background:#d8f0df}.node.wrong{animation:shake .2s 2;background:#ffe1d3}.n8{left:50%;top:14%}.n4{left:27%;top:42%}.n12{left:73%;top:42%}.n2{left:15%;top:76%}.n6{left:39%;top:76%}.n10{left:61%;top:76%}.n14{left:85%;top:76%}.avatar{position:absolute;left:50%;top:3px;transform:translateX(-50%);background:var(--red);color:white;border:2px solid var(--ink);padding:3px 6px;font-size:.7rem;font-weight:bold;z-index:3;transition:.25s}.trace-strip{max-width:700px;margin:auto;border:2px solid;background:#17231e;color:#edf5df;padding:14px}.trace-strip span{color:#f4bd3a}.trace-strip output{font-weight:bold}.help-row{display:flex;gap:10px;margin-top:14px}.locked{opacity:.52;pointer-events:none}.locked:after{content:"Erst den Schritt davor abschließen";position:absolute;right:18px;top:18px;background:var(--ink);color:#fff;padding:7px;font-size:.72rem}.code-builder{display:grid;gap:12px;max-width:780px}.code-builder label{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:12px}.code-builder select,.answer-line{border:2px solid;padding:12px;background:#fff;min-width:0}.action-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.action-card{border:2px solid;background:#fff;padding:18px;text-align:left;cursor:pointer;box-shadow:4px 4px 0}.action-card strong,.action-card code{display:block}.action-card code{margin-top:12px;padding:10px;background:#17231e;color:#edf5df}.action-card.opened{background:#d8f0df}.answer-line{width:100%;margin:6px 0 16px}.solution-gate{margin-top:18px}.full-solution{margin-top:18px;border-top:3px solid;padding-top:18px}.state-btn.active{outline:4px solid var(--blue);outline-offset:3px}
@keyframes shake{50%{transform:translate(-55%,-50%)}}
@media(max-width:700px){.code-builder label{grid-template-columns:1fr}.action-cards{grid-template-columns:1fr}.tree-stage{height:300px}.branches{height:90%}.node{width:50px;height:50px}.n2,.n6,.n10,.n14{top:70%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}