:root{color:#10233f;font-synthesis:none;text-rendering:optimizelegibility;background:#eef4fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}.site-header{background:linear-gradient(135deg,#fff 0%,#e8f4ff 100%);border-bottom:1px solid #13518f2e;justify-content:space-between;align-items:center;gap:18px;min-height:78px;padding:14px clamp(16px,3vw,34px);display:flex}.brand{color:#073b78;align-items:center;gap:16px;min-width:0;text-decoration:none;display:flex}.brand img{object-fit:contain;max-width:min(260px,48vw);height:48px}.brand span{white-space:nowrap;border-left:2px solid #1663a740;padding-left:16px;font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800;line-height:1}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.example-picker{color:#35506f;align-items:center;gap:8px;font-size:.86rem;font-weight:800;display:flex}.example-picker select{color:#073b78;background:#fff;border:1px solid #13518f38;border-radius:999px;padding:9px 12px;font-weight:800}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:999px;padding:11px 18px;font-weight:800}.primary-button{color:#fff;background:#075aa5;box-shadow:0 10px 22px #075aa540}.secondary-button{color:#073b78;background:#dceafe}.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px;min-height:calc(100vh - 78px);padding:18px;display:grid}.code-grid{grid-column:1/-1}.workspace-card,.simulator-card,.code-card{background:#ffffffe0;border:1px solid #13518f26;border-radius:24px;overflow:hidden;box-shadow:0 18px 38px #17416c1c}.workspace-card,.simulator-card{height:calc(100vh - 114px);min-height:620px}#blocklyDiv{width:100%;height:100%;min-height:0}.side-panel{grid-template-rows:auto auto;gap:18px;min-height:0;display:grid}.simulator-card,.code-card{padding:18px}.card-title-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.sim-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.mini-button{color:#073b78;cursor:pointer;background:#eef6ff;border:1px solid #13518f2e;border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:900}.header-select-control{color:#073b78;background:#eef6ff;border:1px solid #13518f2e;border-radius:999px;align-items:center;gap:7px;padding:5px 8px;font-size:.78rem;font-weight:900;display:flex}.header-select-control select{color:#073b78;background:#fff;border:1px solid #13518f29;border-radius:999px;padding:4px 7px;font-weight:900}.battery-badge{color:#11723a;background:#dcfce7;border-radius:999px;align-items:center;gap:3px;padding:7px 10px;font-size:.78rem;font-weight:900;display:inline-flex}.edit-mode .mini-button:first-child{color:#fff;background:#075aa5}h1,h2{color:#073b78;margin:0}h1{font-size:1.35rem}h2{margin-bottom:10px;font-size:1rem}.status-badge{color:#0d4a88;text-transform:uppercase;background:#eaf1fb;border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:800}.status-badge.running{color:#11723a;background:#dcfce7}.stage{aspect-ratio:1;background:radial-gradient(circle at 50% 30%,#fff 0,#f5f9fe 50%,#dbeafe 100%);border:1px solid #13518f29;border-radius:20px;width:100%;max-width:min(100%,520px,100vh - 250px);height:auto;min-height:0;margin:0 auto;position:relative;overflow:hidden}.grid{background-image:linear-gradient(#075aa514 1px,#0000 1px),linear-gradient(90deg,#075aa514 1px,#0000 1px);background-size:10% 10%;position:absolute;inset:0}.line-canvas{pointer-events:none;touch-action:none;z-index:1;position:absolute;inset:0}.sensor-overlay{pointer-events:none;z-index:2;position:absolute;inset:0}.sensor-cone{fill:#22a7ff21;opacity:0;stroke:#22a7ff52;stroke-width:.45px}.sensor-ray{opacity:0;stroke:#075aa5b8;stroke-dasharray:2 2;stroke-linecap:round;stroke-width:.55px}.sensor-origin{fill:#22a7ff;opacity:0;stroke:#fff;stroke-width:.45px}.sensor-cone.active,.sensor-ray.active,.sensor-origin.active{opacity:1}.edit-mode .line-canvas{cursor:crosshair;pointer-events:auto}.line-track{fill:none;opacity:.2;stroke:#111923;stroke-linecap:round;stroke-linejoin:round;stroke-width:10px;vector-effect:non-scaling-stroke}.line-track.active{opacity:.62}.line-track.detected{filter:drop-shadow(0 0 4px #31d67bf2);opacity:.96;stroke:#06111d}.obstacle{z-index:2;background:linear-gradient(135deg,#ffcf4a,#e46c2f);border:3px solid #fff;border-radius:16px;width:48px;height:48px;transition:left .25s;position:absolute;transform:translate(-50%);box-shadow:0 10px 18px #753b1838}.edit-mode .obstacle,.edit-mode .sammy{cursor:grab;outline-offset:6px;outline:3px dashed #075aa559}.edit-mode .obstacle:before,.edit-mode .sammy:before{color:#fff;white-space:nowrap;background:#075aa5;border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:900;position:absolute;top:-28px;left:50%;transform:translate(-50%)}.edit-mode .obstacle:before{content:"Hindernis verschieben"}.edit-mode .sammy:before{content:"SAMmy verschieben"}.obstacle:after{color:#703500;content:"!";text-align:center;font-size:1.35rem;font-weight:900;line-height:42px;display:block}.obstacle[data-type=box]{background:linear-gradient(135deg,#b77a36,#7b4b24);border-radius:8px}.obstacle[data-type=box]:after{color:#ffffffb8;content:"KISTE";letter-spacing:.04em;font-size:.62rem}.obstacle[data-type=wall]{background:repeating-linear-gradient(0deg,#a94332 0 10px,#7f2e25 10px 13px),repeating-linear-gradient(90deg,#0000 0 20px,#ffffff59 20px 23px);border-radius:6px;width:74px;height:54px}.obstacle[data-type=wall]:after{content:""}.obstacle[data-type=cone]{box-shadow:none;background:0 0;border:0;width:54px;height:58px}.obstacle[data-type=cone]:after{color:#0000;content:"";border-bottom:52px solid #f97316;border-left:23px solid #0000;border-right:23px solid #0000;width:0;height:0;margin:0 auto;line-height:0}.sammy{--eye-color:#22a7ff;transform-origin:50%;z-index:3;width:88px;height:132px;transition:left .45s,top .45s,transform .35s;position:absolute;top:52%;left:50%}.head{background:linear-gradient(135deg,#fff,#d9dde3);border-radius:38px;width:76px;height:48px;padding:8px;position:absolute;top:0;left:6px;box-shadow:inset -8px -8px 14px #2d3a4b29,0 10px 18px #0f233d29}.face{background:#111923;border-radius:28px;justify-content:center;align-items:center;gap:13px;height:32px;display:flex}.eye{border:4px solid var(--eye-color);box-shadow:0 0 11px var(--eye-color);border-radius:50%;width:17px;height:17px}.sammy[data-blinking=true] .eye{box-shadow:none;background:0 0;border-color:#0000;height:4px}.sammy[data-expression=neugierig] .head{transform:rotate(-10deg)translateY(2px)}.sammy[data-expression=konzentriert] .eye{height:13px}.sammy[data-expression=fröhlich] .head{transform:translateY(-5px)}.sammy[data-line=true] .base{box-shadow:0 0 16px #31d67bb3}.floor-sensor{z-index:4;background:#2f4055;border:2px solid #fff;border-radius:50%;width:13px;height:13px;position:absolute;bottom:6px}.sensor-left{left:19px}.sensor-right{right:19px}.sammy[data-line-left=true] .sensor-left,.sammy[data-line-right=true] .sensor-right{background:#31d67b;box-shadow:0 0 12px #31d67bf2}.neck{background:#111923;border-radius:10px 10px 4px 4px;width:38px;height:27px;position:absolute;top:43px;left:25px}.body{background:linear-gradient(140deg,#fff 0%,#edf1f5 80%);border-radius:48px 48px 30px 30px;width:88px;height:75px;position:absolute;top:57px;left:0;box-shadow:inset -9px -11px 20px #2333481f,0 12px 22px #0f233d29}.chest-logo{background:radial-gradient(circle at 35% 35%,#fff 0 10%,#0000 11%),linear-gradient(135deg,#1b66ab,#0b4386);border:3px solid #dbeafe;border-radius:50%;width:40px;height:40px;position:absolute;top:17px;left:24px}.base{background:linear-gradient(90deg,#0a3f7d,#1663a7);border-radius:0 0 24px 24px;width:88px;height:19px;position:absolute;bottom:0;left:0}.speech-bubble{color:#073b78;z-index:3;background:#fff;border:2px solid #075aa533;border-radius:18px 18px 18px 4px;max-width:210px;padding:10px 13px;font-weight:800;position:absolute;transform:translate(-50%,-50%);box-shadow:0 10px 18px #0f233d1f}.tone-bubble{color:#ffd84d;z-index:4;background:#0d1b2a;border:2px solid #fffc;border-radius:999px;padding:8px 12px;font-size:.86rem;font-weight:900;position:absolute;transform:translate(-50%,-50%);box-shadow:0 10px 18px #0f233d2e}.code-card{min-height:0}.code-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;display:grid}#codeOutput{color:#cde9ff;white-space:pre-wrap;background:#0d1b2a;border-radius:16px;height:220px;margin:0;padding:14px;font-size:.83rem;overflow:auto}#arduinoOutput{color:#d9e8f6;white-space:pre-wrap;background:#10233f;border-radius:16px;height:220px;margin:0;padding:14px;font-size:.8rem;overflow:auto}@media (width<=980px){.layout{grid-template-columns:1fr;height:auto}.side-panel{grid-template-rows:auto auto}.code-grid{grid-template-columns:1fr}#blocklyDiv{height:62vh}}@media (width<=680px){.site-header{flex-direction:column;align-items:stretch}.brand{flex-direction:column;align-items:flex-start;gap:10px}.brand span{border-left:0;padding-left:0}.header-actions{justify-content:stretch}.primary-button,.secondary-button{flex:1}.layout{padding:10px}}