/* ============ Grundlayout ============ */
* { box-sizing: border-box; }
:root{
  --bg: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --border: #d5dde7;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #1d4ed8;
  --accent-soft: #dbeafe;
  --danger: #dc2626;
}
html, body { height: 100%; margin: 0; }
body{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============ Toolbar ============ */
#toolbar{
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  z-index: 5;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .logo{ font-size: 26px; }
.brand .title{ font-weight: 700; font-size: 16px; line-height: 1.1; }
.brand .subtitle{ font-size: 11px; color: var(--muted); }
.tool-group{ display:flex; align-items:center; gap:6px; padding-left:14px; border-left:1px solid var(--border); }
.tool-group.help{ margin-left:auto; border-left:none; }
#toolbar button{
  font: inherit; font-size: 13px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); cursor: pointer;
}
#toolbar button:hover{ background: var(--accent-soft); border-color:#b6c8f0; }
#toolbar button:active{ transform: translateY(1px); }
#zoom-label{ font-size:12px; color:var(--muted); min-width:42px; text-align:center; }
.toggle{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px; cursor:pointer; }

/* ============ Hauptbereich ============ */
#main{ flex:1; display:flex; min-height:0; }

/* ---- Palette ---- */
#palette{
  width: 220px; flex: 0 0 220px;
  background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px;
}
.palette-hint{ font-size:11px; color:var(--muted); margin-bottom:10px; line-height:1.4; }
.palette-cat{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  margin:14px 0 6px; font-weight:700; }
.stencil{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border:1px solid var(--border); border-radius:8px;
  background: var(--panel-2); margin-bottom:6px; cursor:pointer; user-select:none;
}
.stencil:hover{ border-color:#b6c8f0; background: var(--accent-soft); }
.stencil.active{ border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.stencil svg{ width:34px; height:34px; flex:0 0 34px; }
.stencil svg .shape{ fill:none; stroke:#111827; stroke-width:2; }
.stencil svg .fillable{ fill:#ffffff; }
.stencil svg text{ fill:#111827; }
.stencil .label{ font-size:12px; line-height:1.2; }

/* ---- Canvas ---- */
#canvas-wrap{ flex:1; position:relative; min-width:0; background:#eef2f7; }
#canvas{ width:100%; height:100%; display:block; cursor:default; touch-action:none; }
#canvas.placing{ cursor: crosshair; }
#canvas.panning{ cursor: grabbing; }
#canvas.connecting{ cursor: crosshair; }

.node .shape{ fill: none; stroke: #111827; stroke-width: 2; vector-effect: non-scaling-stroke; }
.node .fillable{ fill: #ffffff; }
.node text{ font-family: "Segoe UI", Arial, sans-serif; fill:#111827; }
.node.selected .select-box{ display:block; }
.select-box{ display:none; fill: rgba(29,78,216,.06); stroke: var(--accent); stroke-width:1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.handle{ fill:#fff; stroke: var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:nwse-resize; }
.handle.rot{ cursor: grab; fill: var(--accent); }
.edge path.hit{ stroke: transparent; stroke-width: 14px; fill:none; cursor:pointer; }
.edge path.line{ fill:none; stroke:#111827; stroke-width:2; vector-effect:non-scaling-stroke; }
.edge.selected path.line{ stroke: var(--accent); }
.edge text{ font-family:"Segoe UI",Arial,sans-serif; fill:#111827; }
.edge-label-bg{ fill:#ffffff; }

/* ---- Statusbar ---- */
#statusbar{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:18px; padding:4px 12px;
  background: rgba(255,255,255,.9); border-top:1px solid var(--border);
  font-size:11px; color:var(--muted);
}

/* ---- Inspector ---- */
#inspector{
  width: 250px; flex:0 0 250px;
  background: var(--panel); border-left:1px solid var(--border);
  overflow-y:auto; padding:12px;
}
#inspector h3{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.field{ margin-bottom:10px; }
.field label{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:13px; padding:6px 8px;
  border:1px solid var(--border); border-radius:6px; background:#fff; color:var(--text);
}
.field textarea{ resize:vertical; min-height:52px; }
.row2{ display:flex; gap:8px; }
.row2 .field{ flex:1; }
.color-row{ display:flex; gap:6px; flex-wrap:wrap; }
.swatch{ width:22px; height:22px; border-radius:5px; border:1px solid var(--border); cursor:pointer; }
.swatch.active{ outline:2px solid var(--accent); outline-offset:1px; }
.btn-danger{ width:100%; padding:8px; border:1px solid var(--danger); color:var(--danger);
  background:#fff; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; }
.btn-danger:hover{ background:#fef2f2; }
.inspector-empty{ font-size:12px; color:var(--muted); line-height:1.5; }

/* ---- TZ-Palette ---- */
.tz-build-btn{ width:100%; padding:8px; margin-bottom:8px; border:1px solid var(--accent);
  background: var(--accent); color:#fff; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; }
.tz-build-btn:hover{ filter:brightness(1.08); }
.tz-search{ width:100%; font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--border);
  border-radius:6px; margin-bottom:6px; }
.tz-cat{ width:100%; font:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--border);
  border-radius:6px; margin-bottom:8px; background:#fff; }
.tz-results{ display:flex; flex-direction:column; gap:4px; max-height:230px; overflow-y:auto;
  border:1px solid var(--border); border-radius:8px; padding:6px; background:var(--panel-2); margin-bottom:8px; }
.tz-item{ display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; }
.tz-item:hover{ background: var(--accent-soft); }
.tz-item.active{ background: var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft) inset; }
.tz-item img{ width:30px; height:30px; flex:0 0 30px; background:#fff; border:1px solid var(--border); border-radius:4px; }
.tz-item span{ font-size:11px; line-height:1.15; }
.tz-more{ font-size:11px; color:var(--muted); text-align:center; padding:4px; }

/* ---- TZ-Builder-Dialog ---- */
#tz-builder{ max-width:640px; width:640px; }
#tz-builder h2 small{ font-size:13px; color:var(--muted); font-weight:400; }
.tzb-grid{ display:flex; gap:18px; }
.tzb-controls{ flex:1 1 auto; min-width:0; }
.tzb-preview{ flex:0 0 200px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--panel-2); }
#tzb-preview-box{ width:180px; height:180px; display:flex; align-items:center; justify-content:center; }
#tzb-preview-box svg{ width:100%; height:100%; }
.tzb-hint{ font-size:11px; color:var(--muted); margin-top:8px; }
.chk{ display:flex; align-items:center; gap:6px; font-size:13px; margin:2px 0 10px; cursor:pointer; }
.tzb-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.btn-primary{ padding:9px 18px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:8px; cursor:pointer; font:inherit; }
.btn-light{ padding:9px 18px; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:8px; cursor:pointer; font:inherit; }
.color-row .swatch{ position:relative; }

/* ---- Dialog ---- */
dialog{ border:1px solid var(--border); border-radius:12px; padding:22px; max-width:520px;
  color:var(--text); box-shadow:0 20px 60px rgba(15,23,42,.25); }
dialog::backdrop{ background: rgba(15,23,42,.35); }
dialog h2{ margin-top:0; }
dialog ul{ padding-left:18px; line-height:1.6; font-size:14px; }
dialog kbd{ background:#f1f5f9; border:1px solid var(--border); border-radius:4px; padding:0 4px; font-size:12px; }
dialog .note{ font-size:12px; color:var(--muted); }
dialog button{ margin-top:8px; padding:8px 16px; border-radius:8px; border:1px solid var(--border);
  background:var(--accent); color:#fff; cursor:pointer; font:inherit; }
dialog h3{ margin:16px 0 4px; font-size:14px; }

/* Hilfe-/Dialog-Fußzeile */
.dialog-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--border); flex-wrap:wrap; }
.dialog-footer-btns{ display:flex; gap:8px; }
.dialog-footer .chk{ font-size:12px; color:var(--text); }

/* Recht/Datenschutz */
#legal-dialog{ max-width:640px; width:640px; max-height:82vh; overflow-y:auto; }
#legal-dialog p, #legal-dialog li{ font-size:13px; line-height:1.55; }
.legal-placeholder{ background:#fffbeb; border:1px dashed #d6a72a; border-radius:8px;
  padding:8px 10px; color:#7a5c00; font-size:13px; }
.legal-fill{ background:#fffbeb; border:1px dashed #d6a72a; border-radius:5px;
  padding:0 5px; color:#7a5c00; white-space:nowrap; }
#legal-dialog ul{ padding-left:18px; }
#legal-dialog ul li{ margin:2px 0; }