*{box-sizing:border-box}body{margin:0;font:14px system-ui,Arial;background:#eef2f7;color:#17243b}header,nav{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#fff;border-bottom:1px solid #dce2eb;flex-wrap:wrap}header strong{font-size:19px;margin-right:15px}header input{padding:9px;border:1px solid #cbd5e1;border-radius:8px;min-width:210px}button,select,.upload{border:1px solid #d6dce7;background:#fff;padding:8px 11px;border-radius:8px;cursor:pointer;color:#223047}button:hover,.upload:hover{background:#eaf1ff}button.active{background:#dbeafe;border-color:#60a5fa}nav label{display:flex;align-items:center;gap:5px}#stage{height:calc(100vh - 155px);min-height:350px;overflow:hidden;background:#f8fafc;background-image:radial-gradient(#cbd5e1 1px,transparent 1px);background-size:22px 22px}footer{padding:6px 15px;background:white;border-top:1px solid #ddd;color:#64748b}.canvas-container{touch-action:none}

#saveState{font-size:12px;color:#64748b;white-space:nowrap}nav{gap:6px}nav button{white-space:nowrap}#stage{height:calc(100vh - 200px)}

#workspace{display:flex;min-height:350px;height:calc(100vh - 200px)}#stage{height:100%;flex:1;min-width:0}#sidebar{width:285px;flex:0 0 285px;overflow:auto;background:#fff;border-left:1px solid #dce2eb;padding:12px}#sidebar h3{font-size:14px;margin:10px 0}#layers{display:flex;flex-direction:column;gap:4px;max-height:45vh;overflow:auto}.layer{display:flex;gap:6px;align-items:center;width:100%;text-align:left}.layer.selected{background:#dbeafe;border-color:#60a5fa}.layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0}.propRow input{width:105px;min-width:0;padding:6px;border:1px solid #cbd5e1;border-radius:5px}.propRow input[type=color]{padding:1px;height:32px}.hint{font-size:12px;color:#64748b;line-height:1.5}dialog{border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 20px 70px #0004;width:min(520px,90vw);padding:22px}dialog::backdrop{background:#17243b88}#noteForm{display:flex;flex-direction:column;gap:12px}#noteText{font:16px system-ui;padding:12px;resize:vertical;border:1px solid #94a3b8;border-radius:8px}.dialogActions{display:flex;justify-content:flex-end;gap:10px}@media(max-width:800px){#sidebar{width:190px;flex-basis:190px}}

/* V1.5.1: force a visible right-hand inspector */
#workspace{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;width:100%;height:calc(100dvh - 200px);min-height:400px}#stage{min-width:0;width:100%;height:100%}#sidebar{display:block!important;visibility:visible!important;width:300px!important;min-width:300px!important;height:100%;overflow-y:auto;position:relative;z-index:2;background:#fff;border-left:2px solid #cbd5e1}#sidebar:before{content:'Objektverwaltung';display:block;font-weight:700;color:#2563eb;margin:0 0 10px}@media(max-width:650px){#workspace{grid-template-columns:minmax(0,1fr) 210px!important}#sidebar{width:210px!important;min-width:210px!important}}

/* V1.5.3 */
#stage{position:relative}#inlineEditor{display:none;position:absolute;z-index:15;resize:none;overflow:auto;border:2px solid #2563eb;outline:none;border-radius:5px;padding:0;background:transparent;line-height:1.22;box-sizing:border-box;transform-origin:top left}#contextMenu{display:none;position:absolute;z-index:30;min-width:175px;padding:5px;background:#fff;border:1px solid #cbd5e1;border-radius:9px;box-shadow:0 10px 30px #0003}#contextMenu button{display:block;width:100%;text-align:left;border:0}#stage.grid-off{background-image:none}#stage.grid-on{background-image:radial-gradient(#cbd5e1 1px,transparent 1px)}

/* V1.5.4: opaque editing surface prevents double text while typing */
#inlineEditor{z-index:25;background:#fff1a8;border:1px solid #2563eb;overflow:hidden;resize:none;padding:0 2px;white-space:pre-wrap;overflow-wrap:break-word;min-height:40px}
#portLayer{position:absolute;inset:0;pointer-events:none;z-index:18}
.connection-port{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;border:2px solid white;background:#2563eb;box-shadow:0 0 0 1px #2563eb;pointer-events:auto;padding:0;cursor:crosshair;touch-action:none}
.connection-port:hover{background:#1d4ed8;transform:translate(-50%,-50%) scale(1.3)}
#portLayer.connecting{pointer-events:none}

/* V1.5.5: connection preview remains visible while dragging */
#portLayer .connection-preview{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;overflow:visible}