:root {
  --bg: #14181c;
  --panel: rgba(22, 27, 32, 0.82);
  --panel-solid: #1a2026;
  --line: rgba(255, 255, 255, 0.09);
  --text: #e8ecef;
  --muted: #9aa6b0;
  --accent: #ff9b3d;
  --accent-2: #39c2ff;
  --ok: #46d17a;
  --warn: #f2c037;
  --err: #ff4d3d;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
input, select { font: inherit; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap; min-height: 32px;
}
.btn:hover { background: rgba(255, 255, 255, 0.13); }
.btn.accent { background: var(--accent); color: #1b1206; border-color: transparent; font-weight: 600; }
.btn.accent:hover { filter: brightness(1.08); }
.btn.toggle.on { background: rgba(57, 194, 255, 0.22); border-color: rgba(57, 194, 255, 0.6); color: #bfeaff; }
.btn.small { padding: 4px 8px; min-height: 28px; font-size: 12px; }
.btn.small svg { width: 16px; height: 16px; }
.btn.danger:hover { background: rgba(255, 77, 61, 0.25); }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); cursor: pointer; padding: 0; font-weight: 700;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.small { width: 26px; height: 26px; }
.icon-btn.small svg { width: 15px; height: 15px; }
.muted { color: var(--muted); }

/* ---------- Kopfzeile ---------- */
#topbar {
  position: fixed; top: 10px; left: 10px; right: 10px; height: 52px;
  display: flex; align-items: center; gap: 14px; padding: 0 10px; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 8px 3px 2px; cursor: pointer; color: var(--text); }
.brand:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.05); }
#projTitle { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.brand .caret { color: var(--muted); font-size: 12px; }
#projMenu .pm-name { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.logo { width: 26px; height: 26px; border-radius: 7px; flex: none; background: conic-gradient(from 200deg, #ff9b3d, #f2c037, #46d17a, #39c2ff, #ff9b3d); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.35); }
#projName { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 600; padding: 5px 8px; width: 100%; }
#projName:focus { border-color: var(--accent); outline: none; }
.stats { display: flex; gap: 6px; margin-left: auto; }
.stat { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 10px; border-left: 1px solid var(--line); min-width: 76px; }
.stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat b { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 650; }
.stat i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 3px; }
.stat b + i { position: relative; top: -2px; }
.stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0; }
.stat span { width: 100%; }
.actions { display: flex; align-items: center; gap: 6px; }
.sel { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; }
.sel select, #selAxis {
  background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; min-height: 32px;
}
select option { background: var(--panel-solid); color: var(--text); }

/* ---------- Werkzeugleiste ---------- */
#toolbar {
  position: fixed; left: 10px; top: 72px; z-index: 9; padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
#toolbar .sep { height: 1px; background: var(--line); margin: 4px 2px; }
.tool {
  position: relative; width: 44px; height: 42px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; display: grid; place-items: center; color: #cfd8de;
}
.tool:hover { background: rgba(255, 255, 255, 0.08); }
.tool.on { background: rgba(255, 155, 61, 0.2); border-color: rgba(255, 155, 61, 0.65); color: #ffd6ad; }
.tool kbd { position: absolute; right: 3px; bottom: 1px; font: 600 9px/1 var(--font); color: var(--muted); }
.tool .tname { display: none; }
.tool:hover .tname {
  display: block; position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  background: var(--panel-solid); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; font-size: 12px;
}

#toolopts { position: fixed; left: 70px; top: 72px; z-index: 8; padding: 10px 12px; width: 240px; }
#toolopts.compact { width: 240px; }
.opt-head { margin-bottom: 6px; font-size: 13.5px; }
.opt { display: grid; grid-template-columns: 62px 1fr auto auto; align-items: center; gap: 6px; margin: 6px 0; color: var(--muted); }
.opt input[type=number] { width: 100%; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 6px; }
.opt input[type=range] { width: 100%; accent-color: var(--accent); }
.opt output { min-width: 28px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.opt i { font-style: normal; font-size: 11px; }
.opt.check { grid-template-columns: auto 1fr; color: var(--text); }
.opt.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.opt-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- Bauteilleiste ---------- */
#partbar {
  position: fixed; left: 70px; bottom: calc(10px + var(--safe-b)); z-index: 9;
  padding: 6px; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 80px - 470px);
}
.partbar-toggle { display: none; }
.parts-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.partbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 64px; height: 56px; padding: 4px 5px; border-radius: 8px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04); cursor: pointer; color: #cfd8de; font-size: 11px; line-height: 1.15; text-align: center;
}
.partbtn:hover { background: rgba(255, 255, 255, 0.1); }
.partbtn.on { background: rgba(57, 194, 255, 0.2); border-color: rgba(57, 194, 255, 0.6); color: #cfefff; }

/* ---------- Schnitt ---------- */
#sectionbar {
  position: fixed; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 9; padding: 6px; display: flex; gap: 5px; align-items: center;
}
#rngSection { width: 110px; accent-color: var(--accent-2); }

/* ---------- Inspektor ---------- */
#inspector {
  position: fixed; right: 10px; top: 72px; width: 330px; max-height: calc(100vh - 150px); overflow-y: auto; z-index: 9; padding: 12px;
}
.insp-head { display: flex; align-items: center; gap: 8px; }
.insp-head h3 { margin: 0; font-size: 15px; flex: 1; }
.insp-head > svg { color: var(--accent); }
.desc { margin: 6px 0 4px; font-size: 12px; }
.status { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-weight: 600; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.status.ok i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status.warn { color: var(--warn); } .status.warn i { background: var(--warn); }
.status.error { color: var(--err); } .status.error i { background: var(--err); box-shadow: 0 0 8px var(--err); }
.status.off { color: var(--muted); }
.status.none { display: none; }
table.vals { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.vals th { text-align: left; font-weight: 400; color: var(--muted); padding: 3px 8px 3px 0; white-space: nowrap; vertical-align: top; }
.vals td { text-align: right; font-variant-numeric: tabular-nums; padding: 3px 0; }
.vals tr + tr th, .vals tr + tr td { border-top: 1px solid var(--line); }
.vals tr.warn td { color: var(--warn); }
.row-btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.row-btns.actions { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.swatches { display: flex; gap: 8px; margin: 6px 0; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-2); }

.rules h4 { margin: 10px 0 6px; font-size: 13px; }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px; margin-bottom: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); }
.rule select, .rule input { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; min-height: 26px; }
.rule input { width: 52px; }
.rule .kw { color: var(--accent); font-weight: 650; font-size: 12px; }
.rule .unit { color: var(--muted); }
.rule .icon-btn { margin-left: auto; }
.rule-live { width: 100%; font-size: 11.5px; color: var(--muted); }
.rule-live.hit { color: var(--ok); }

.bore { display: flex; gap: 10px; margin: 8px 0; }
.bore-col { width: 26px; height: 150px; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
.bore-legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; justify-content: center; }
.bore-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bore-legend span { color: var(--muted); margin-left: 4px; }

/* ---------- Schwebende Beschriftungen ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.flabel {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: rgba(20, 24, 28, 0.85); border: 1px solid var(--line);
}
.flabel.error { background: rgba(190, 30, 20, 0.92); border-color: rgba(255, 120, 100, 0.6); }
.flabel.warn { background: rgba(120, 90, 10, 0.9); border-color: rgba(242, 192, 55, 0.6); }
.flabel.tool { background: rgba(255, 155, 61, 0.92); color: #1b1206; border: none; }
#cursorinfo {
  position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; font-size: 12px; padding: 3px 8px; border-radius: 6px;
  background: rgba(14, 17, 20, 0.85); border: 1px solid var(--line); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}

#toast {
  position: fixed; left: 50%; top: 74px; transform: translate(-50%, -10px); z-index: 20; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  background: rgba(14, 17, 20, 0.9); border: 1px solid var(--line); padding: 7px 14px; border-radius: 20px; pointer-events: none; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: rgba(70, 18, 14, 0.95); border-color: rgba(255, 110, 90, 0.7); color: #ffe1dc; font-weight: 600; white-space: normal; }

/* ---------- Touch-Umschalter ---------- */
#btnTouchMode {
  position: fixed; right: 12px; bottom: calc(86px + var(--safe-b)); z-index: 11; padding: 4px; display: flex; gap: 0; cursor: pointer; border-radius: 22px;
}
#btnTouchMode span { padding: 8px 14px; border-radius: 18px; font-weight: 600; }
#btnTouchMode .tm-cam { background: var(--accent-2); color: #04202d; }
#btnTouchMode.paint .tm-cam { background: transparent; color: var(--muted); }
#btnTouchMode.paint .tm-tool { background: var(--accent); color: #1b1206; }
#btnTouchMode .tm-tool { color: var(--muted); }
#btnTouchMode.dim { opacity: 0.45; }

/* ---------- Hilfe ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 8, 10, 0.55); padding: 16px; }
.modal-card { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px; background: rgba(22, 27, 32, 0.96); }
.modal-card h2 { margin: 0 0 12px; font-size: 19px; }
.help-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.help-cols h3 { margin: 0 0 6px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.help-cols dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.help-cols dt { font-weight: 650; white-space: nowrap; }
.help-cols dd { margin: 0; color: var(--muted); }
.hint { color: var(--muted); margin: 14px 0 0; }
.modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.modal-actions label { color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* ---------- Vorstellen ---------- */
#present { position: fixed; inset: 0; z-index: 30; isolation: isolate; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 6vh 5vw; }
#present h1 { margin: 0; font-size: clamp(30px, 6vw, 72px); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
#present .kpis { display: flex; gap: clamp(12px, 3vw, 40px); flex-wrap: wrap; }
#present .kpis div { display: flex; flex-direction: column; background: rgba(14, 17, 20, 0.55); backdrop-filter: blur(10px); border-radius: 14px; padding: 14px 20px; min-width: 150px; }
#present .kpis b { font-size: clamp(26px, 4vw, 46px); font-variant-numeric: tabular-nums; }
#present .kpis span { color: #cfd8de; }
#btnPresentExit { pointer-events: auto; position: absolute; right: 18px; top: 18px; background: rgba(14, 17, 20, 0.7); backdrop-filter: blur(8px); }
#present::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 34vh; background: linear-gradient(rgba(8, 12, 16, 0.55), rgba(8, 12, 16, 0)); z-index: -1; }
#present::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30vh; background: linear-gradient(rgba(8, 12, 16, 0), rgba(8, 12, 16, 0.45)); z-index: -1; }
body.presenting #topbar, body.presenting #toolbar, body.presenting #toolopts, body.presenting #partbar,
body.presenting #sectionbar, body.presenting #inspector, body.presenting #btnTouchMode, body.presenting #cursorinfo { display: none !important; }

/* ---------- Laden ---------- */
#loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); z-index: 50; color: var(--muted); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 2D ---------- */
body.view2d #view { cursor: crosshair; }

/* ---------- Kleinere Bildschirme ---------- */
/* Platz für den Feedback-Knopf: erst Beschriftungen und Leistung einsparen */
@media (max-width: 1380px) {
  .sel span { display: none; }
  .stat { min-width: 64px; padding: 2px 7px; }
}
@media (max-width: 1280px) {
  .stats .stat:nth-child(2) { display: none; }
}
@media (max-width: 1180px) {
  .stat { min-width: 64px; padding: 2px 7px; }
  #projTitle { max-width: 150px; }
  .sel span { display: none; }
}
@media (max-width: 1180px) {
  #partbar { max-width: calc(100vw - 80px); bottom: calc(64px + var(--safe-b)); }
}
@media (max-width: 980px) {
  .stats .stat:nth-child(2) { display: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #topbar { top: 6px; left: 6px; right: 6px; height: auto; gap: 4px 6px; padding: 5px 6px; flex-wrap: wrap; }
  .brand { flex: 1 1 90px; }
  .logo { width: 22px; height: 22px; }
  #projTitle { font-size: 13px; max-width: 46vw; }
  .stats { order: 3; width: 100%; margin: 0; gap: 0; border-top: 1px solid var(--line); padding-top: 3px; }
  .stats .stat:nth-child(n) { display: flex; }
  .stat { flex: 1; min-width: 0; padding: 0 5px; }
  .stat:first-child { border-left: 0; }
  .stat span { font-size: 9.5px; }
  .stat b { font-size: 13px; }
  .actions { gap: 4px; }
  .icon-btn { width: 32px; height: 32px; }
  .sel select { padding: 3px; min-height: 30px; max-width: 66px; font-size: 12px; }
  #btnPresent { padding: 5px 8px; font-size: 12px; min-height: 30px; }
  #btnRedo { display: none; }
  #toast { top: 108px; }
  body.touch .help-cols > div:not(:last-child) { display: none; }
  body.touch .help-cols { grid-template-columns: 1fr; }

  #toolbar {
    top: auto; left: 6px; right: 6px; bottom: calc(6px + var(--safe-b)); flex-direction: row; overflow-x: auto; padding: 4px; gap: 2px;
    scrollbar-width: none;
  }
  #toolbar::-webkit-scrollbar { display: none; }
  #toolbar .sep { width: 1px; height: auto; margin: 2px 3px; }
  .tool { flex: none; width: 46px; height: 46px; }
  .tool kbd, .tool:hover .tname { display: none; }
  #toolopts { left: 6px; top: 126px; width: min(250px, calc(100vw - 12px)); padding: 8px 10px; }
  #toolopts.compact .opt-hint { display: none; }
  #toolopts.compact { width: auto; }
  .opt { margin: 4px 0; }
  #partbar { left: auto; right: 6px; transform: none; bottom: calc(64px + var(--safe-b)); flex-direction: column-reverse; align-items: flex-end; max-width: calc(100vw - 12px); }
  .partbar-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-weight: 600; }
  .parts-wrap { display: none; max-width: calc(100vw - 24px); }
  #partbar.open .parts-wrap { display: flex; }
  .parts-list { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
  .partbtn { min-width: 76px; }
  #sectionbar { left: 6px; right: auto; bottom: calc(64px + var(--safe-b)); padding: 4px; flex-wrap: wrap; max-width: 52vw; }
  #rngSection { width: 90px; }
  #sectionbar #btnXray, #sectionbar #btnSnap, #sectionbar #btnTunnel, #sectionbar #btnOutputs { display: none; }
  #inspector { left: 6px; right: 6px; top: auto; bottom: calc(118px + var(--safe-b)); width: auto; max-height: 42vh; }
  #btnTouchMode { bottom: calc(118px + var(--safe-b)); }
  body:has(#inspector:not(.hidden)) #btnTouchMode { display: none; }
  .help-cols { grid-template-columns: 1fr; }
  #present .kpis div { min-width: 120px; padding: 10px 14px; }
}

/* ---------- Schaltplan ---------- */
#schematic {
  position: fixed; left: 70px; right: 10px; top: 72px; bottom: calc(10px + var(--safe-b)); z-index: 12;
  display: flex; flex-direction: column; overflow: hidden; background: rgba(22, 27, 32, 0.94);
}
.sch-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sch-head > svg { color: var(--accent); }
.sch-head h3 { margin: 0; font-size: 15px; }
.sch-hint { color: var(--muted); font-size: 12px; flex: 1; min-width: 160px; }
.sch-actions { display: flex; gap: 6px; align-items: center; }
.sch-check { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 12px; }
#schSvg { flex: 1; width: 100%; background: #f6f5f1; cursor: default; touch-action: none; outline: none; }
body.schematic-open #inspector { z-index: 14; }
body.schematic-open.insp-open #schematic { right: 350px; }
body.schematic-open #partbar, body.schematic-open #sectionbar, body.schematic-open #toolopts, body.schematic-open #cursorinfo, body.schematic-open #labels { display: none; }
.sch-body { fill: #ffffff; stroke: #16191c; stroke-width: 2; cursor: move; }
.sch-part.sel .sch-body { stroke: #0d8fd6; stroke-width: 3; }
.sch-part.error .sch-body { stroke: #d62c1f; stroke-width: 3; fill: #fff1ef; }
.sch-part.warn .sch-body { stroke: #c79400; }
.sch-title { font: 700 11px var(--font); fill: #16191c; text-anchor: middle; letter-spacing: 0.06em; pointer-events: none; }
.sch-pinline { stroke: #16191c; stroke-width: 2; }
.sch-pinlabel { font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #33383d; pointer-events: none; }
.sch-pin { fill: #ffffff; stroke: #16191c; stroke-width: 2; cursor: crosshair; }
.sch-pin.k-plus, .sch-pin.k-switch { stroke: #c8231c; }
.sch-pin.k-gnd { stroke: #16191c; }
.sch-pin.k-signal { stroke: #c79400; }
.sch-pin.hov { fill: #ffe9a6; }
.sch-pin.start { fill: #0d8fd6; stroke: #0d8fd6; }
.sch-pin.ok { fill: #46d17a; stroke: #1c8a45; }
.sch-wire { fill: none; stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.sch-wire.sel { stroke-width: 4; }
.sch-wire-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.sch-wire-hit:hover + .sch-wire { stroke-width: 3.4; }
.sch-temp { stroke: #0d8fd6; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.sch-sym { fill: none; stroke: #16191c; stroke-width: 1.8; }
.sch-sym.thick { stroke-width: 3.2; }
.sch-sym.dash { stroke-dasharray: 4 3; stroke-width: 1.2; }
.sch-sym.run { stroke: #1c8a45; }
.sch-dot { fill: #16191c; }
.sch-symtext { font: 700 18px var(--font); fill: #16191c; text-anchor: middle; pointer-events: none; }
.sch-symtext.small { font-size: 15px; }
.sch-small { font: 600 10px var(--font); fill: #5b636b; text-anchor: middle; pointer-events: none; }
.sch-small.on { fill: #1c8a45; }
.sch-high { fill: #2fbf5f; }
.sch-live { font: 700 10px var(--font); fill: #0d6fb0; pointer-events: none; }
.sch-status { font: 600 11px var(--font); text-anchor: middle; fill: #1c8a45; pointer-events: none; }
.sch-status.error { fill: #d62c1f; }
.sch-status.warn { fill: #a07400; }
.sch-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(14, 17, 20, 0.92); color: var(--text);
  padding: 5px 9px; border-radius: 6px; font-size: 12px; border: 1px solid var(--line); white-space: nowrap;
}
.flabel.pin { font-size: 10.5px; padding: 1px 5px; font-weight: 600; background: rgba(14, 17, 20, 0.8); }
.flabel.pin.hot { background: #ffe14d; color: #1b1206; font-size: 12px; z-index: 2; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #schematic { left: 6px; right: 6px; top: 126px; bottom: calc(64px + var(--safe-b)); }
  .sch-hint { display: none; }
  body.schematic-open.insp-open #schematic { right: 6px; }
  body.schematic-open #inspector { bottom: calc(70px + var(--safe-b)); max-height: 34vh; }
}

.sch-frame { fill: rgba(31, 107, 67, 0.05); stroke: #1f6b43; stroke-width: 1.5; stroke-dasharray: 8 5; cursor: move; }
.sch-frame.sel { stroke: #0d8fd6; stroke-width: 2.5; fill: rgba(13, 143, 214, 0.06); }
.sch-frametitle { font: 700 13px var(--font); fill: #1f6b43; cursor: move; }
.modsec { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(31, 107, 67, 0.16); border: 1px solid rgba(70, 209, 122, 0.25); }
.modsec h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.modsec h4 svg { width: 18px; height: 18px; color: var(--ok); }
.modsec .opt.name { grid-template-columns: 44px 1fr; }
.modsec .opt.name input { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 7px; }
.addparts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.addparts .muted { width: 100%; font-size: 12px; }
.small { font-size: 11.5px; }
.own-list { display: contents; }
.own-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; color: var(--ok); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 2px; border-left: 1px solid var(--line); margin-left: 4px; }
.partbtn.own { position: relative; color: #c9f5d9; background: rgba(31, 107, 67, 0.22); }
.partbtn.own .own-del { position: absolute; top: 1px; right: 4px; font-style: normal; color: var(--muted); font-size: 13px; padding: 0 2px; }
.partbtn.own .own-del:hover { color: var(--err); }

.flabel.tool.good { background: rgba(40, 170, 90, 0.95); color: #04140a; }
.flabel.tool.warn { background: rgba(255, 176, 58, 0.95); color: #1b1206; }
.flabel.tool.bad { background: rgba(214, 44, 31, 0.95); color: #fff; }

/* ---------- Bauteilleiste mit Reitern ---------- */
.parts-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.part-tabs { display: flex; gap: 2px; }
.ptab { background: transparent; border: 0; color: var(--muted); padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.ptab:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ptab.on { color: #1b1206; background: var(--accent); }
.ptab i { font-style: normal; background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 0 5px; margin-left: 3px; font-size: 10.5px; }
#partbar .partbtn { height: 74px; min-width: 76px; padding: 3px 5px; gap: 2px; }
.partbtn .thumb { width: 64px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)); }
.partbtn .thumb img { width: 64px; height: 48px; object-fit: contain; }
.partbtn .pname { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partbtn.newmod { border: 1px dashed rgba(70, 209, 122, 0.6); color: #c9f5d9; }
.parts-empty { color: var(--muted); font-size: 12px; margin: 0 8px; max-width: 280px; align-self: center; }
#partbar { align-items: flex-end; }
.own-title { display: none; }

/* ---------- Schwebende Werkzeugleiste am Bauteil ---------- */
#actionbar { position: fixed; left: 0; top: 0; z-index: 11; display: flex; gap: 2px; padding: 4px; border-radius: 12px; }
#actionbar .ab {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 5px 6px 4px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; cursor: pointer; color: #dfe6ea; font-size: 10.5px;
}
#actionbar .ab svg { width: 19px; height: 19px; }
#actionbar .ab:hover { background: rgba(255, 255, 255, 0.1); }
#actionbar .ab.accent { color: #c9f5d9; background: rgba(31, 107, 67, 0.35); }
#actionbar .ab.danger:hover { background: rgba(255, 77, 61, 0.25); color: #ffd0cb; }
#actionbar::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: inherit; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }

/* ---------- Werkstatt ---------- */
.ws-head { display: none; }
#schematic.ws .sch-head { display: none; }
#schematic.ws .ws-head { display: block; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
body.workshop #schematic { left: 50%; right: 10px; }
body.workshop.insp-open #schematic { right: 10px; }
body.workshop #inspector { left: 70px; right: auto; top: auto; bottom: 10px; width: 340px; max-height: 46vh; z-index: 14; }
body.workshop #toolbar .tool:not([data-tool="select"]):not([data-tool="wire"]) { display: none; }
body.workshop #toolbar .sep { display: none; }
body.workshop #actionbar .ab[data-a="workshop"] { display: none; }
.ws-row { display: flex; align-items: center; gap: 8px; }
.ws-row > svg { color: var(--ok); }
.ws-row h3 { margin: 0; font-size: 15px; }
#wsName { flex: 1; min-width: 80px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 6px 9px; font-weight: 650; font-size: 14px; }
.ws-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ws-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #cfd8de; }
.ws-step > b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #04140a; font-size: 11px; flex: none; }
.ws-palette { display: flex; gap: 4px; flex-wrap: wrap; }
.ws-part { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(70, 209, 122, 0.35); background: rgba(31, 107, 67, 0.2); color: #e2f8ea; cursor: pointer; font-size: 12px; }
.ws-part:hover { background: rgba(31, 107, 67, 0.4); }
.ws-part svg { width: 17px; height: 17px; }
.ws-exp { display: flex; gap: 4px; flex-wrap: wrap; }
.ws-exp i { font-style: normal; font-size: 11px; background: rgba(70, 209, 122, 0.18); border: 1px solid rgba(70, 209, 122, 0.4); padding: 1px 6px; border-radius: 10px; }
.ws-exp em { color: var(--muted); font-size: 11.5px; }
.ws-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- Schaltplan: Module ---------- */
.sch-part.mod .sch-body { fill: #f0f8f2; stroke: #1f6b43; stroke-width: 2.6; }
.sch-part.mod.sel .sch-body { stroke: #0d8fd6; }
.sch-small.hint { fill: #8a9198; font-weight: 500; }
.sch-small.ext { fill: #0d6fb0; text-anchor: inherit; }
.sch-framehint { font-weight: 500; fill: #6c8f7a; font-size: 11px; }
.sch-wire.ext { stroke-dasharray: 5 4; }
.sch-expo { fill: #2fbf5f; stroke: #1c8a45; stroke-width: 1; }

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  body.workshop #schematic { left: 6px; top: 126px; bottom: 50vh; }
  body.workshop #inspector { left: 6px; right: 6px; width: auto; bottom: calc(64px + var(--safe-b)); max-height: 30vh; }
  .ws-step span { font-size: 11.5px; }
  #actionbar .ab { min-width: 50px; font-size: 10px; }
  #actionbar .ab span { display: none; }
  .part-tabs { overflow-x: auto; }
}
body.workshop.schematic-open #labels { display: block; }
body.workshop.schematic-open #cursorinfo:not(.hidden) { display: block; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .parts-wrap { display: none; }
  #partbar.open .parts-wrap { display: flex; }
}

.btn .s { display: none; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .btn .l { display: none; }
  .btn .s { display: inline; }
  body:has(#partbar.open) #sectionbar, body:has(#partbar.open) #btnTouchMode { display: none; }
  body.workshop #schematic { top: 126px; bottom: calc(64px + var(--safe-b)); }
  .ws-hint, .ws-step > span { display: none; }
  .ws-step:nth-child(2) { display: none; }
  #actionbar { flex-wrap: wrap; max-width: calc(100vw - 16px); }
}

/* ---------- Zeitleiste ---------- */
#timebar {
  position: fixed; left: 70px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 10; height: 46px;
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
}
.tb-btn { width: 36px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.tb-btn:hover { background: rgba(255, 255, 255, 0.14); }
.tb-btn.play { width: 44px; background: var(--accent); color: #1b1206; border-color: transparent; }
.tb-btn.play.on { background: #2fbf5f; color: #04140a; }
#tbSpeed { background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; min-height: 34px; font-weight: 600; }
.tb-clock { display: flex; flex-direction: column; line-height: 1.15; min-width: 150px; padding: 0 6px; }
.tb-clock b { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.tb-clock span { color: var(--muted); font-size: 11px; }
.tb-track { flex: 1; position: relative; min-width: 80px; height: 40px; cursor: grab; touch-action: none; border-radius: 8px; background: rgba(0, 0, 0, 0.18); }
.tb-track:active { cursor: grabbing; }
#tbCanvas { display: block; width: 100%; height: 100%; }
.tb-now { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 1px solid var(--accent); background: var(--panel-solid); color: var(--accent); border-radius: 12px; padding: 2px 9px; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.tb-tip { position: absolute; bottom: 46px; pointer-events: none; left: 50%; transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.tb-state { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 60px; text-align: right; }
.tb-state.manual { color: var(--warn); font-weight: 600; }
body.sim-paused .tb-state { color: var(--accent); font-weight: 600; }
#partbar, #sectionbar { bottom: calc(66px + var(--safe-b)); }
#inspector { max-height: calc(100vh - 210px); }
body.presenting #timebar { display: none; }
body.workshop #timebar { display: none; }
@media (max-width: 1180px) {
  #partbar { bottom: calc(122px + var(--safe-b)); }
}
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #timebar { left: 6px; right: 6px; bottom: calc(64px + var(--safe-b)); height: 44px; padding: 0 6px; gap: 4px; }
  .tb-clock { min-width: 0; }
  .tb-clock b { font-size: 11.5px; }
  .tb-state { display: none; }
  #tbBack, #tbFwd { width: 30px; }
  .tb-track { min-width: 40px; }
  #partbar, #sectionbar { bottom: calc(114px + var(--safe-b)); }
  #btnTouchMode { bottom: calc(166px + var(--safe-b)); }
  #inspector { bottom: calc(166px + var(--safe-b)); max-height: 36vh; }
}

.tb-wx { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; color: var(--text); cursor: pointer; white-space: nowrap; font-size: 12px; min-height: 34px; }
.tb-wx:hover { background: rgba(255, 255, 255, 0.13); }
.tb-wx .i { font-size: 16px; }
.tb-wx b { font-variant-numeric: tabular-nums; }
.tb-wx span { color: var(--muted); font-variant-numeric: tabular-nums; }
.tb-wx.manual { border-color: var(--warn); box-shadow: inset 0 0 0 1px rgba(242, 192, 55, 0.4); }
@media (max-width: 1180px) { .tb-wx span:not(.i) { display: none; } }
@media (max-width: 720px) { .tb-wx { padding: 3px 6px; } }

/* ---------- Projekt-Menü und neues Projekt ---------- */
#projMenu { position: fixed; z-index: 30; display: flex; flex-direction: column; padding: 6px; min-width: 220px; }
#projMenu button { display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 0; color: var(--text); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
#projMenu button:hover { background: rgba(255, 255, 255, 0.09); }
#projMenu button svg { width: 17px; height: 17px; }
#projMenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.newproj { width: min(1060px, 100%); }
.env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.env-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 12px; }
.env-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 155, 61, 0.35); background: rgba(255, 155, 61, 0.08); }
.env-card input { position: absolute; opacity: 0; }
.env-card b { font-size: 14px; }
.env-sw { height: 54px; border-radius: 7px; }
.env-facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.env-facts i { font-style: normal; font-size: 10.5px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 1px 6px; }
.newproj-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.newproj-row .opt { grid-template-columns: auto auto auto; margin: 0; }
.newproj-row input[type=text], .newproj-row input[type=date], .newproj-row input[type=time], .newproj-row input[type=number] { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 7px; color-scheme: dark; }
.newproj-row input[type=number] { width: 80px; }

/* ---------- Wetter-Panel ---------- */
#wxPanel { position: fixed; right: 10px; bottom: calc(66px + var(--safe-b)); z-index: 16; width: 430px; max-height: calc(100vh - 150px); overflow-y: auto; padding: 12px; }
.wx-head { display: flex; align-items: center; justify-content: space-between; }
.wx-head h3 { margin: 0; font-size: 15px; }
.wx-scen { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.wx-dur { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.wx-dur select { background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; }
.wx-row { display: grid; grid-template-columns: 118px 66px 1fr 92px; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; }
.wx-row small { grid-column: 3 / 5; color: var(--warn); font-size: 10.5px; margin-top: -4px; }
.wx-row small:empty { display: none; }
.wx-row.manual { background: rgba(242, 192, 55, 0.12); box-shadow: inset 3px 0 0 var(--warn); }
.wx-l { font-size: 12.5px; display: flex; flex-direction: column; }
.wx-l i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #1b1206; background: var(--warn); border-radius: 4px; padding: 0 4px; width: fit-content; margin-top: 2px; }
.wx-sw { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--muted); border-radius: 12px; padding: 3px 8px; cursor: pointer; font-size: 11.5px; }
.wx-sw.on { background: var(--warn); color: #1b1206; border-color: transparent; font-weight: 700; }
.wx-row input[type=range] { width: 100%; accent-color: var(--warn); }
.wx-row input:disabled { opacity: 0.45; }
.wx-row output { font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; }
@media (max-width: 720px) { #wxPanel { left: 6px; right: 6px; width: auto; bottom: calc(114px + var(--safe-b)); max-height: 60vh; } .wx-row { grid-template-columns: 90px 60px 1fr 76px; } }

/* ---------- Chip-Editor ---------- */
.chipedit { width: min(1180px, 100%); }
.ce-head, .md-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ce-head h2, .md-head h2 { margin: 0; }
.ce-grid { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 16px; margin-top: 10px; }
.ce-grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.ce-grid .opt { grid-template-columns: 82px auto auto auto; }
.ce-grid input, .ce-grid select, .ce-grid textarea, .md-props input, .md-props select, #mdName {
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 6px; font: inherit; color-scheme: dark;
}
.ce-grid input[type=number] { width: 64px; }
.ce-grid input[type=color], .md-props input[type=color] { width: 46px; height: 28px; padding: 1px; }
.ce-prev { background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 6px; margin-top: 8px; }
.ce-pins { width: 100%; border-collapse: collapse; font-size: 12px; }
.ce-pins th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 4px; }
.ce-pins td { padding: 2px 4px; }
.ce-pins input { width: 74px; }
.ce-pins td:nth-child(3) input { width: 50px; }
.ce-mode { display: flex; gap: 14px; margin-bottom: 8px; }
.ce-beh textarea { width: 100%; height: 230px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.ce-test.err { color: var(--err); }
.ce-beh .rule select, .ce-beh .rule input { max-width: 90px; }

/* ---------- Modellier-Modus ---------- */
.modeler .md-card { width: min(1320px, 100%); height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; }
.md-head { flex-wrap: wrap; }
#mdName { font-weight: 650; font-size: 14px; flex: 1; min-width: 140px; }
.md-top { display: flex; gap: 6px; flex-wrap: wrap; }
.md-body { flex: 1; display: grid; grid-template-columns: 170px 1fr 300px; gap: 10px; margin-top: 10px; min-height: 0; }
.md-tools { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.md-tools h4, .md-props h4 { margin: 8px 0 2px; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.md-modes { display: flex; flex-direction: column; gap: 4px; }
.md-view { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); min-height: 240px; }
#mdCanvas { width: 100%; height: 100%; display: block; }
.md-props { overflow-y: auto; }
.md-vec { display: grid; grid-template-columns: 62px repeat(3, 1fr) 22px; gap: 4px; align-items: center; margin: 5px 0; font-size: 12px; color: var(--muted); }
.md-vec label { display: flex; align-items: center; gap: 2px; }
.md-vec input { width: 100%; min-width: 0; }
.md-props .opt { grid-template-columns: 70px 1fr auto auto; }
.md-props .opt input[type=number] { width: 64px; }
@media (max-width: 900px) {
  .ce-grid { grid-template-columns: 1fr; }
  .md-body { grid-template-columns: 1fr; grid-template-rows: auto 300px auto; }
  .md-tools { flex-direction: row; flex-wrap: wrap; }
}

.loaddlg { width: min(640px, 100%); }
.proj-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.proj-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: center; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.proj-row span { grid-column: 1; font-size: 12px; }
.proj-row b { grid-column: 1; }
.proj-row button:first-of-type { grid-row: 1 / 3; grid-column: 2; }
.proj-row button:last-of-type { grid-row: 1 / 3; grid-column: 3; }

/* ---------- Vorstellen mit Zeitraffer ---------- */
#present { justify-content: space-between; }
.pres-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pres-clock { display: flex; flex-direction: column; align-items: flex-end; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); margin-top: 50px; }
.pres-clock b { font-size: clamp(18px, 2.4vw, 30px); font-variant-numeric: tabular-nums; }
.pres-clock span { color: #dfe6ea; font-size: clamp(12px, 1.4vw, 17px); }
.pres-bottom { display: flex; flex-direction: column; gap: 12px; }
.pres-lapse { display: flex; align-items: center; gap: 12px; color: #fff; text-shadow: 0 1px 8px #0008; }
.pres-lapse .bar { width: min(420px, 50vw); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.pres-lapse .bar i { display: block; height: 100%; background: var(--accent); }
#present .kpis div { min-width: 130px; }
.pres-ctrl { position: absolute; right: 18px; top: 18px; display: flex; gap: 8px; pointer-events: auto; }
.pres-ctrl select { background: rgba(14, 17, 20, 0.7); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
#btnPresentExit { position: static; }
#present .kpis { gap: clamp(8px, 1.4vw, 18px); }
#present .kpis div { min-width: 110px; padding: 10px 16px; }
#present .kpis b { font-size: clamp(22px, 3vw, 40px); }

.tb-clock b { white-space: nowrap; }
@media (max-width: 720px) {
  .tb-clock b .d { display: none; }
  .tb-clock { min-width: 52px; }
}
@media (max-width: 720px) { #tbSpeed { max-width: 64px; padding: 4px 2px; } .tb-wx { min-width: 0; } }

/* ---------- Ausgaben-Leiste ---------- */
#btnOutputs { position: relative; }
#btnOutputs .badge, .stat .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font: 700 10.5px/18px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
#outputs { position: fixed; right: 10px; top: 72px; bottom: calc(66px + var(--safe-b)); width: 340px; z-index: 13; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.out-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 7px; border-bottom: 1px solid var(--line); }
.out-head > svg { color: var(--accent-2); flex: none; }
.out-head h3 { margin: 0; font-size: 15px; }
.out-tabs { display: flex; gap: 2px; margin-left: auto; background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 2px; }
.out-tabs button { border: 0; background: transparent; color: var(--muted); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.out-tabs button.on { background: rgba(57, 194, 255, 0.22); color: #cfefff; }
.out-filter { display: flex; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.out-filter select { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 5px; font-size: 12px; }
.out-body { flex: 1; overflow-y: auto; padding: 6px 8px 10px; font-size: 12px; overscroll-behavior: contain; }
.out-send { display: flex; gap: 6px; padding: 7px 8px; border-top: 1px solid var(--line); }
.out-send select { max-width: 96px; background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.out-send input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.3); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.out-send input:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.out-empty { color: var(--muted); padding: 10px 4px; line-height: 1.55; }
.out-day { position: sticky; top: -6px; background: var(--panel-solid); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 2px 3px; z-index: 1; }
.out-row { display: grid; grid-template-columns: 54px auto 12px 1fr; gap: 0 6px; align-items: baseline; padding: 3px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.out-row time { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.out-dev { border: 0; background: rgba(255, 255, 255, 0.08); color: #cfd8de; border-radius: 5px; padding: 0 5px; font-size: 11px; cursor: pointer; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-dev:hover { background: rgba(57, 194, 255, 0.25); }
.out-ic { text-align: center; color: var(--muted); font-weight: 700; }
.out-txt { word-break: break-word; }
.out-row.serial .out-txt { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d9f2e3; }
.out-row.error .out-txt, .out-row.error .out-ic, .out-row.break .out-txt, .out-row.break .out-ic { color: #ff8a7a; }
.out-row.warn .out-txt, .out-row.warn .out-ic { color: var(--warn); }
.out-row.info .out-txt { color: #9fd8ff; }
.out-row:not(.serial) .out-dev + .out-ic + .out-txt { font-weight: 550; }
.out-card { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.out-card:hover { background: rgba(255, 255, 255, 0.07); }
.out-card.error, .out-card.broken { border-color: rgba(255, 77, 61, 0.55); background: rgba(255, 77, 61, 0.08); }
.out-card.warn { border-color: rgba(242, 192, 55, 0.45); }
.out-ct { display: flex; align-items: center; gap: 7px; }
.out-ct svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.out-ct b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.out-st { margin-top: 3px; font-size: 11.5px; color: var(--ok); }
.out-st.error { color: #ff8a7a; } .out-st.warn { color: var(--warn); } .out-st.off { color: var(--muted); }
.out-vals { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.out-vals span { display: flex; gap: 6px; font-size: 11.5px; }
.out-vals i { font-style: normal; color: var(--muted); min-width: 64px; }
.out-vals .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.out-lcd { margin: 4px 0 0; padding: 5px 7px; border-radius: 5px; background: #3d7dd6; color: #eaf4ff; font: 700 12px/1.3 ui-monospace, Menlo, monospace; white-space: pre; width: fit-content; }
body.out-open #inspector { right: 360px; }
body.out-open.schematic-open #schematic { right: 360px; }
body.out-open.schematic-open.insp-open #schematic { right: 700px; }
body.out-open #wxPanel { right: 360px; }
body.presenting #outputs, body.workshop #outputs { display: none; }

/* ---------- Legenden (Wind, Wärme) ---------- */
.legend { position: fixed; left: 70px; bottom: calc(200px + var(--safe-b)); z-index: 8; padding: 8px 11px; width: 230px; font-size: 12px; pointer-events: none; }
#heatLegend { bottom: calc(272px + var(--safe-b)); }
#windLegend.hidden + #heatLegend { bottom: calc(200px + var(--safe-b)); }
.lg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lg-arrow { display: inline-block; font-size: 17px; color: var(--accent-2); transition: transform 0.4s; }
.lg-bar { height: 8px; border-radius: 4px; }
.lg-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; margin-top: 3px; }
.flabel.heat { font-size: 11px; padding: 1px 6px; background: rgba(14, 17, 20, 0.78); border-color: rgba(255, 255, 255, 0.15); }
.flabel.heat.hot { background: rgba(200, 60, 20, 0.92); color: #fff; }
.sb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 2px; }
@media (max-width: 1180px) { .legend { bottom: calc(256px + var(--safe-b)); } #heatLegend { bottom: calc(328px + var(--safe-b)); } #windLegend.hidden + #heatLegend { bottom: calc(256px + var(--safe-b)); } }

/* ---------- Inspektor: Programm, Bedienen, Kaputt ---------- */
.progsec { margin-top: 10px; padding: 9px; border-radius: 9px; background: rgba(57, 194, 255, 0.07); border: 1px solid rgba(57, 194, 255, 0.22); }
.seg { display: flex; background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 5px 8px; cursor: pointer; font-weight: 600; font-size: 12px; }
.seg button svg { width: 16px; height: 16px; }
.seg button.on { background: var(--accent-2); color: #04202d; }
.progerr { margin: 8px 0 2px; padding: 6px 8px; border-radius: 7px; background: rgba(255, 77, 61, 0.16); color: #ffb3a8; font-size: 12px; }
.miniserial { margin: 6px 0 0; max-height: 92px; overflow-y: auto; padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.35); color: #d9f2e3; font: 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.brokensec { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 9px; border-radius: 9px; background: rgba(255, 77, 61, 0.12); border: 1px solid rgba(255, 77, 61, 0.45); }
.brokensec b { color: #ff8a7a; }
.brokensec .btn { align-self: flex-start; }
.brokensec p { margin: 0; }
.holdbtn { flex: 1; justify-content: center; min-height: 40px; font-weight: 700; touch-action: none; user-select: none; }
.holdbtn.on { background: var(--accent); color: #1b1206; }
.vals tr.warn th { color: var(--warn); }

/* ---------- Code-Editor ---------- */
.ced-card { width: min(1240px, 100%); height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; padding: 14px 16px; }
.ced-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ced-head h2 { margin: 0; font-size: 18px; }
.ced-sub { color: var(--muted); }
.ced-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ced-ex { background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 6px; min-height: 28px; max-width: 220px; }
.ced-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin-top: 10px; }
.ced-main { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.ced-editor { flex: 1; min-height: 160px; display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #11161b; }
.ced-gutter { flex: none; width: 44px; overflow: hidden; padding: 10px 0; background: #0c1014; color: #56616b; text-align: right; font: 13px/19px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: none; }
.ced-gutter span { display: block; padding-right: 8px; }
.ced-gutter span.err { color: #fff; background: rgba(255, 77, 61, 0.55); }
.ced-wrap { position: relative; flex: 1; min-width: 0; }
.ced-hl, .ced-ta { position: absolute; inset: 0; margin: 0; padding: 10px 12px; font: 13px/19px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 4; overflow: auto; border: 0; letter-spacing: 0; }
.ced-hl { color: #d5dde3; pointer-events: none; overflow: hidden; }
.ced-ta { color: transparent; background: transparent; caret-color: #ffd28a; resize: none; outline: none; }
.ced-ta::selection { background: rgba(57, 194, 255, 0.35); color: transparent; }
.ced-line.err { background: rgba(255, 77, 61, 0.18); text-decoration: underline wavy rgba(255, 90, 70, 0.8); text-underline-offset: 3px; }
.c-com { color: #6f8b72; font-style: italic; }
.c-str { color: #f2c27a; }
.c-num { color: #b5a0ff; }
.c-kw { color: #ff8fb3; }
.c-type { color: #6fd0ff; }
.c-fn { color: #8be0a4; }
.c-call { color: #ffe08a; }
.ced-errors { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.ced-err { text-align: left; border: 1px solid rgba(255, 77, 61, 0.4); background: rgba(255, 77, 61, 0.12); color: #ffd2cb; border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: 12.5px; }
.ced-err b { color: #fff; margin-right: 6px; }
.ced-ok { padding: 5px 8px; border-radius: 7px; background: rgba(70, 209, 122, 0.14); color: #b9f0cd; font-size: 12.5px; }
.ced-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ced-side h4 { margin: 4px 0 6px; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.ced-side h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ced-ref { flex: 1; overflow-y: auto; min-height: 120px; padding-right: 4px; }
.ced-grp { margin-bottom: 8px; }
.ced-grp > b { display: block; font-size: 11.5px; color: var(--muted); margin: 2px 0 3px; }
.ced-snip { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 4px 7px; margin-bottom: 3px; cursor: pointer; }
.ced-snip:hover { border-color: rgba(57, 194, 255, 0.5); background: rgba(57, 194, 255, 0.1); }
.ced-snip code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #8be0a4; }
.ced-snip span { font-size: 11px; color: var(--muted); }
.ced-serial { height: 170px; flex: none; overflow-y: auto; margin: 0; padding: 7px 9px; border-radius: 8px; background: #0c1014; color: #d9f2e3; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.ced-send, .mini-send { display: flex; gap: 6px; margin-top: 6px; }
.ced-send input, .mini-send input { flex: 1; min-width: 0; background: #0c1014; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ced-send input:focus, .mini-send input:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.ced-serial .info { color: #9fd8ff; }
.ced-serial .error { color: #ff8a7a; } .ced-serial .warn { color: var(--warn); }
@media (max-width: 900px) {
  .ced-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ced-side { max-height: 34vh; }
  .ced-ref { min-height: 60px; }
  .ced-serial { height: 90px; }
}
.ce-cspre { margin: 0 0 6px; max-height: 210px; overflow: auto; padding: 8px; border-radius: 7px; background: #11161b; font: 12px/1.4 ui-monospace, Menlo, monospace; color: #d5dde3; }
.ce-mode { flex-wrap: wrap; }

/* ---------- Schaltplan: Bedienen und LCD ---------- */
.sch-act { fill: transparent; stroke: transparent; cursor: pointer; }
.sch-act:hover { fill: rgba(13, 143, 214, 0.08); stroke: rgba(13, 143, 214, 0.4); stroke-dasharray: 3 3; }
.sch-lcd { fill: #20304a; stroke: #16191c; stroke-width: 2; }
.sch-lcd.on { fill: #3d7dd6; }
.sch-lcdtxt { font: 700 13px ui-monospace, Menlo, monospace; fill: #eaf4ff; white-space: pre; pointer-events: none; }
.sch-small.bad { fill: #d62c1f; }
[data-code] { cursor: pointer; text-decoration: underline; pointer-events: auto !important; }

/* ---------- Modellier-Modus: Elektronik, Wind ---------- */
.md-elec { display: flex; flex-wrap: wrap; gap: 3px; }
.md-elec .btn { padding: 3px 6px; min-height: 24px; font-size: 11.5px; }
.md-plist { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.md-pchip { border: 1px solid rgba(70, 209, 122, 0.4); background: rgba(31, 107, 67, 0.25); color: #e2f8ea; border-radius: 10px; padding: 1px 8px; font-size: 11px; cursor: pointer; }
.md-pchip.on { background: var(--ok); color: #04140a; }
.md-face { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin: 6px 0; font-size: 12px; color: var(--muted); }
.md-face span { margin-right: 4px; }
.md-face .btn { padding: 2px 7px; min-height: 24px; }
.md-wind { margin-top: 4px; padding: 7px 9px; border-radius: 8px; background: rgba(57, 194, 255, 0.08); border: 1px solid rgba(57, 194, 255, 0.2); }
.md-wind p { margin: 0; line-height: 1.45; }
.md-matnote { margin: -2px 0 6px; }

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #outputs { left: 6px; right: 6px; width: auto; top: auto; height: 46vh; bottom: calc(114px + var(--safe-b)); }
  body.out-open #inspector { right: 6px; }
  .legend { left: 6px; bottom: calc(168px + var(--safe-b)); width: 200px; }
  #heatLegend { bottom: calc(232px + var(--safe-b)); }
  #sectionbar .sb-sep { display: none; }
  #btnOutputs .l { display: none; }
}

/* ---------- Navigationsleiste ---------- */
#navbar { position: fixed; right: 10px; top: 72px; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; }
.nv { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #cfd8de; cursor: pointer; touch-action: none; user-select: none; }
.nv:hover { background: rgba(255, 255, 255, 0.1); }
.nv.on { background: rgba(57, 194, 255, 0.22); color: #cfefff; }
.nv-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.nv.compass { position: relative; }
.nv.compass .needle { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); display: block; transition: transform 0.08s linear; }
.nv.compass .needle::before { content: ''; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 9px solid var(--err); }
.nv.compass .needle::after { content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 9px solid #cfd8de; }
.nv.compass b { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); font-size: 9px; color: var(--err); }
#inspector, #outputs { top: 122px; }
#inspector { max-height: calc(100vh - 260px); }
#navHint { position: fixed; right: 10px; top: 122px; z-index: 15; width: 300px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; border-color: rgba(57, 194, 255, 0.5); }
#navHint b { font-size: 14px; color: var(--accent-2); }
#navHint i { font-style: normal; font-weight: 700; display: inline-block; min-width: 92px; color: var(--text); }
#navHint span { color: #cfd8de; }
#navHint .btn { align-self: flex-end; margin-top: 4px; }
body.presenting #navbar, body.presenting #navHint, body.view2d #navbar .compass, body.view2d #navbar [data-n=top] { display: none; }
body.schematic-open #navbar { visibility: hidden; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #navbar { flex-direction: column; top: auto; right: 6px; bottom: calc(220px + var(--safe-b)); padding: 2px; }
  .nv-sep { width: 22px; height: 1px; margin: 2px 0; }
  .nv { width: 36px; height: 36px; }
  #navbar [data-n=tiltup], #navbar [data-n=tiltdn] { display: grid; }
  #inspector, #outputs { top: auto; }
  #navHint { top: auto; bottom: calc(220px + var(--safe-b)); right: 50px; width: min(300px, calc(100vw - 70px)); }
  body:has(#inspector:not(.hidden)) #navbar { display: none; }
}

/* ---------- Prüfstand ---------- */
.tb-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.tb-m { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.tb-m span { color: var(--muted); font-size: 12px; }
.tb-m.on { border-color: var(--accent); background: rgba(255, 155, 61, 0.12); }
.tb-m.on b { color: var(--accent); }
.tb-card.limits .tb-goal, .tb-card.limits .tb-preset { display: none; }
.tb-r.limit { --c: var(--accent-2); }
.tb-p.limit i b { background: var(--accent-2); }
.tb-sum.limit { border-color: rgba(57, 194, 255, 0.45); background: rgba(57, 194, 255, 0.08); }
.tb-lims { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tb-lim { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.tb-lim svg { width: 16px; height: 16px; color: var(--accent-2); }
.tb-lim em { font-style: normal; color: var(--muted); }
.tb-lim.bad { border-color: rgba(255, 77, 61, 0.6); }
.tb-lim.bad svg { color: var(--err); }
.tb-card { width: min(980px, 100%); }
.tb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tb-head h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tb-head h2 svg { color: var(--accent); }
.tb-head p { margin: 0 0 10px; }
.tb-setup { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, 0.18); }
.tb-env { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tb-f { display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; max-width: 100%; }
.tb-f select { min-width: 0; max-width: 100%; }
.tb-f select, .tb-goal select, .tb-goal input { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 6px; min-height: 30px; }
.tb-f.dim { opacity: 0.45; }
.tb-check { display: flex; align-items: center; gap: 6px; }
.tb-check input, .tb-tl input { accent-color: var(--accent); width: 16px; height: 16px; }
.tb-pick { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; }
.tb-pick span { margin-right: auto; }
.tb-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.tb-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 155, 61, 0.35); background: rgba(255, 155, 61, 0.07); }
.tb-t.off { border-color: var(--line); background: transparent; }
.tb-t.off .tb-goal { opacity: 0.4; }
.tb-tl { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tb-tl svg { width: 20px; height: 20px; color: var(--accent-2); }
.tb-goal { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.tb-goal input { width: 64px; }
.tb-goal select { max-width: 150px; }
.tb-goal i { font-style: normal; min-width: 22px; }
.tb-go { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.tb-run { min-height: 40px; padding: 8px 20px; font-size: 14px; }
.tb-run:disabled { opacity: 0.5; cursor: default; }
.tb-progress { display: grid; gap: 4px; }
.tb-p { display: grid; grid-template-columns: 22px 110px 1fr 120px; align-items: center; gap: 8px; color: var(--muted); }
.tb-p svg { width: 18px; height: 18px; }
.tb-p i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tb-p i b { display: block; height: 100%; width: 0; background: var(--accent-2); }
.tb-p.busy { color: var(--text); }
.tb-p.busy i b { width: 100%; transition: width 0.4s linear; }
.tb-p.done i b { width: 100%; }
.tb-p.ok i b { background: var(--ok); } .tb-p.warn i b { background: var(--warn); } .tb-p.bad i b { background: var(--err); }
.tb-p.na i b, .tb-p.info i b { background: var(--muted); }
.tb-p em { font-style: normal; font-size: 12px; }
.tb-sum { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid; }
.tb-sum b { font-size: 15px; }
.tb-sum > span { color: var(--muted); flex-basis: 100%; }
.tb-sum.ok { border-color: rgba(70, 209, 122, 0.5); background: rgba(70, 209, 122, 0.1); }
.tb-sum.warn { border-color: rgba(242, 192, 55, 0.5); background: rgba(242, 192, 55, 0.1); }
.tb-sum.bad { border-color: rgba(255, 77, 61, 0.5); background: rgba(255, 77, 61, 0.1); }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.tb-r { --c: var(--muted); padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--c); background: rgba(255, 255, 255, 0.03); }
.tb-r.ok { --c: var(--ok); } .tb-r.warn { --c: var(--warn); } .tb-r.bad { --c: var(--err); } .tb-r.info { --c: var(--accent-2); }
.tb-r.na { opacity: 0.75; }
.tb-r p { margin: 6px 0 0; }
.tb-rh { display: flex; align-items: center; gap: 7px; }
.tb-rh svg { width: 18px; height: 18px; color: var(--c); }
.tb-badge { margin-left: auto; font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 10px; color: var(--c); border: 1px solid var(--c); white-space: nowrap; }
.tb-val { font-size: 17px; font-weight: 650; margin-top: 6px; }
.tb-sub { font-size: 12px; }
.tb-goaltext { font-size: 12px; margin-top: 3px; }
.tb-weak { margin-top: 8px; padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.22); line-height: 1.45; }
.tb-weak > span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c); }
.tb-weak .btn { margin-left: 4px; min-height: 24px; padding: 1px 7px; vertical-align: middle; }
.tb-tips { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.tb-tips li { margin: 2px 0; }
.tb-tips li::marker { content: '→ '; color: var(--accent); }
.tb-more { margin-top: 6px; background: none; border: 0; padding: 0; color: var(--accent-2); cursor: pointer; font-size: 12px; }
.tb-list { display: none; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 4px 0 0; font-size: 12px; }
.tb-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.tb-r.open .tb-list { display: grid; }
.tb-note { margin: 12px 0 0; }
@media (max-width: 640px) {
  .tb-tests, .tb-grid { grid-template-columns: 1fr; }
  .tb-mode { grid-template-columns: 1fr; }
  .tb-p { grid-template-columns: 22px 90px 1fr 90px; }
  .tb-t { flex-wrap: wrap; }
  .tb-goal { margin-left: auto; }
  .tb-f { flex: 1 1 100%; }
  .tb-f select { flex: 1; }
}

/* ---------------------------------------------------------------- Anlagen-Test */
body.systest #timebar, body.systest #toolbar, body.systest #toolopts, body.systest #partbar, body.systest #inspector, body.systest #topbar .actions, body.systest #sectionbar { pointer-events: none; opacity: 0.45; }
.st-card { width: min(1040px, 100%); }
.st-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.st-dur { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1; max-width: 640px; }
@media (max-width: 640px) { .st-dur { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-dur button { min-width: 0; white-space: nowrap; }
.st-incs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.st-inc { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.st-inc:has(input:checked) { border-color: rgba(255, 155, 61, 0.45); background: rgba(255, 155, 61, 0.07); }
.st-inc input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 1px; flex: none; }
.st-inc span { display: flex; flex-direction: column; gap: 1px; }
.st-inc em { font-style: normal; color: var(--muted); font-size: 12px; }
.st-inc.na { opacity: 0.5; cursor: default; }
.st-plan { margin-top: 10px; line-height: 1.5; }
.st-bar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 8px 12px; width: min(620px, calc(100% - 32px)); }
.st-bar > b { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-bar svg, .st-chip svg { width: 18px; height: 18px; color: var(--accent); }
.st-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.st-prog { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; min-width: 40px; }
.st-prog b { display: block; height: 100%; width: 0; background: var(--accent); }
.st-pct { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.st-chip { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 6px; padding: 7px 14px; cursor: pointer; color: var(--text); }
.st-chip:hover { border-color: var(--accent); }
.st-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.st-tile { padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; }
.st-tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.st-tile span { color: var(--muted); font-size: 12px; }
.st-tile.bad { border-color: rgba(255, 77, 61, 0.5); }
.st-tile.bad b::before { content: '⚠ '; font-size: 15px; color: var(--err); }
.st-charts { position: relative; padding: 10px 12px 4px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.st-ch + .st-ch { margin-top: 6px; }
.st-ct { font-weight: 600; }
.st-ct em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; }
.st-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: 3px 0 2px; }
.st-leg span, .st-tt span { display: inline-flex; align-items: center; gap: 5px; }
.st-leg i, .st-tt i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.st-leg i.pump, .st-tt i.pump { height: 6px; background: rgba(57, 194, 255, 0.55); }
.st-leg i.band { height: 10px; width: 10px; background: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.35); }
.st-leg i.brk { width: auto; height: auto; color: var(--err); font-style: normal; font-weight: 700; }
.st-svg { display: block; overflow: visible; }
.st-grid { stroke: rgba(255, 255, 255, 0.07); }
.st-ref { stroke: rgba(255, 255, 255, 0.28); stroke-dasharray: 3 3; }
.st-ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.st-band { fill: rgba(255, 255, 255, 0.07); }
.st-pump { fill: rgba(57, 194, 255, 0.55); }
.st-brk path { stroke: var(--err); stroke-width: 2.4; stroke-linecap: round; }
.st-cross { display: none; pointer-events: none; }
.st-cross line { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.st-hit { fill: transparent; cursor: crosshair; }
.st-tt { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 7px 10px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); font-size: 12px; }
.st-tt span { justify-content: flex-start; color: var(--muted); }
.st-tt em { font-style: normal; color: var(--text); margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.st-tt .inc { color: var(--warn); }
.st-h { margin: 16px 0 8px; font-size: 14px; }
.st-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.modal-actions .st-btns { margin-top: 0; }
.st-see svg, .st-btns svg { width: 14px; height: 14px; }
.st-see { margin-top: 8px; }
@media (max-width: 640px) {
  .st-tiles { grid-template-columns: repeat(2, 1fr); }
  .st-incs { grid-template-columns: 1fr; }
  .st-bar { flex-wrap: wrap; top: 56px; }
  .st-when { order: 3; }
}

/* Reparieren im Modellier-Fenster */
.md-repair { display: grid; gap: 6px; padding: 8px 12px; margin: 10px 0 0; border-radius: var(--radius); border: 1px solid rgba(255, 77, 61, 0.45); background: rgba(255, 77, 61, 0.08); }
.md-repair p { margin: 0; }
.md-rrow { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.3fr); gap: 6px 14px; align-items: start; }
.md-rdmg { display: flex; align-items: flex-start; gap: 6px; }
.md-rdmg svg { width: 16px; height: 16px; color: var(--err); flex: none; margin-top: 1px; }
.md-rdmg b { color: #ff8a7a; white-space: nowrap; }
.md-rcheck { display: flex; flex-direction: column; gap: 2px; padding: 5px 9px; border-radius: 8px; border-left: 3px solid var(--muted); background: rgba(0, 0, 0, 0.25); font-size: 12px; }
.md-rcheck b { font-size: 13px; }
.md-rcheck.ok { border-left-color: var(--ok); } .md-rcheck.ok b { color: var(--ok); }
.md-rcheck.warn { border-left-color: var(--warn); } .md-rcheck.warn b { color: var(--warn); }
.md-rcheck.bad { border-left-color: var(--err); } .md-rcheck.bad b { color: #ff8a7a; }
.md-rcheck .btn { min-height: 22px; padding: 0 7px; margin-left: 4px; }
.md-rtip { color: var(--muted); }
.md-head h2 svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
@media (max-width: 720px) { .md-rrow { grid-template-columns: 1fr; } }

/* Windkanal */
.wt-modal { z-index: 45; }
.wt-card { width: min(1180px, 100%); }
.wt-head h2 svg, .wt-card h2 svg { color: var(--accent); }
.wt-body { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.wt-main { min-width: 0; }
.wt-ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.wt-sl { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.wt-sl input { width: 130px; accent-color: var(--accent); }
.wt-sl b { color: var(--text); min-width: 92px; font-weight: 600; font-size: 12px; }
.wt-view { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #14181c; }
.wt-cv { display: block; width: 100%; height: auto; }
.wt-keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 6px; }
.wt-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-left: auto; }
.wt-ramp { width: 80px; height: 8px; border-radius: 4px; display: inline-block; }
.wt-ramp.tempo { background: linear-gradient(90deg, rgb(20, 40, 90), rgb(20, 160, 220), rgb(150, 240, 200), rgb(255, 240, 110)); }
.wt-ramp.druck { background: linear-gradient(90deg, rgb(50, 136, 254), rgb(70, 76, 84), rgb(255, 46, 44)); }
.wt-note { margin: 8px 0 0; }
.wt-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wt-res { padding: 8px 12px; border-radius: var(--radius); border: 1px solid; display: flex; flex-direction: column; }
.wt-res b { font-size: 16px; }
.wt-res span { color: var(--muted); font-size: 12px; }
.wt-res.ok { border-color: rgba(70, 209, 122, 0.5); background: rgba(70, 209, 122, 0.1); }
.wt-res.ok b::before { content: '✓ '; color: var(--ok); }
.wt-res.bad { border-color: rgba(255, 77, 61, 0.5); background: rgba(255, 77, 61, 0.1); }
.wt-res.bad b::before { content: '⚠ '; color: var(--err); }
.wt-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.wt-dl dt { color: var(--muted); }
.wt-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wt-dl em { font-style: normal; color: var(--muted); font-size: 12px; }
.wt-polar { padding: 6px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.wt-psvg { display: block; width: 100%; max-width: 230px; margin: 0 auto; }
.wt-pgrid { fill: none; stroke: rgba(255, 255, 255, 0.1); }
.wt-pax { fill: var(--muted); font-size: 8px; }
.wt-pline { fill: rgba(57, 135, 229, 0.18); stroke: #3987e5; stroke-width: 2; stroke-linejoin: round; }
.wt-pcur { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.wt-pdot { cursor: pointer; }
.wt-pdot circle { fill: #3987e5; stroke: #1a2026; stroke-width: 2; }
.wt-pdot.on circle { fill: var(--accent); }
.wt-pdot .hit { fill: transparent; stroke: none; }
.wt-pobj { fill: #5a6570; stroke: #1a2026; }
.wt-pleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); justify-content: center; }
.wt-pleg span { display: inline-flex; align-items: center; gap: 5px; }
.wt-pleg i { width: 14px; height: 0; display: inline-block; border-top: 2px solid #3987e5; }
.wt-pleg i.c { border-top: 2px dashed var(--accent); }
.wt-polar p { margin: 4px 0 0; text-align: center; }
.wt-cw summary { cursor: pointer; color: var(--accent-2); font-size: 12px; }
.wt-cw .wt-dl { margin-top: 6px; font-size: 12px; }
@media (max-width: 860px) { .wt-body { grid-template-columns: 1fr; } .wt-sl input { width: 100px; } }
.wt-ghost { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.wt-ghost i { width: 10px; height: 10px; background: rgb(120, 128, 136); border-radius: 2px; }
.st-warn { color: var(--warn); }
.wx-sw:disabled { opacity: 0.55; cursor: default; }

/* Kopfleiste: Meldungen und Kosten sind Knöpfe */
button.stat { background: transparent; border-top: 0; border-right: 0; border-bottom: 0; color: var(--text); cursor: pointer; text-align: left; position: relative; font: inherit; }
button.stat:hover { background: rgba(255, 255, 255, 0.06); }
.stat.err b { color: var(--err); }
.stat.warn b { color: var(--warn); }
.stat .badge { top: -6px; right: -2px; }
#projMenu { min-width: 250px; }
.bom-card { width: min(760px, 100%); }
table.bom { width: 100%; border-collapse: collapse; margin-top: 6px; }
.bom th, .bom td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bom th { color: var(--muted); font-weight: 500; font-size: 12px; }
.bom td small { display: block; color: var(--muted); font-size: 11.5px; }
.bom .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bom tfoot td { font-weight: 700; font-size: 15px; border-bottom: 0; }

/* Schnitt nur für ein ausgewähltes Objekt */
#sectionbar .cut-only { display: none; }
body.cutting #sectionbar .cut-only { display: inline-flex; }
body.cutting #sectionbar #rngSection { display: block; width: 140px; }
body.cutting #sectionbar { border-color: rgba(57, 194, 255, 0.5); }
.cut-name { align-items: center; padding: 0 6px; font-weight: 650; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Bauteil-Info beim Platzieren */
#partinfo { position: fixed; right: 10px; top: 72px; width: 300px; max-height: calc(100vh - 210px); overflow-y: auto; z-index: 9; padding: 12px; }
#partinfo .pi-thumb { display: grid; place-items: center; background: rgba(0, 0, 0, 0.22); border-radius: 8px; margin: 8px 0; }
#partinfo .pi-thumb img { width: 140px; height: 105px; object-fit: contain; }
#partinfo .vals th { text-align: left; color: var(--muted); font-weight: 400; padding: 3px 10px 3px 0; vertical-align: top; white-space: nowrap; }
#partinfo .vals td { padding: 3px 0; }
#partinfo .pi-how { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
#partinfo .pi-acts { margin-top: 10px; flex-wrap: wrap; }
#partinfo .pi-acts svg { width: 14px; height: 14px; }
@media (max-width: 720px) { #partinfo { display: none; } }
.st-modal .tb-mode { margin: 4px 0 10px; }
.st-fast { margin: 8px 0 2px; }
.st-first { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid; margin-bottom: 10px; }
.st-first .st-fl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.st-first > b { font-size: 24px; }
.st-first em { font-style: normal; color: var(--muted); font-size: 12px; }
.st-first.bad { border-color: rgba(255, 77, 61, 0.5); background: rgba(255, 77, 61, 0.1); }
.st-first.warn { border-color: rgba(242, 192, 55, 0.5); background: rgba(242, 192, 55, 0.08); }
.st-first.ok { border-color: rgba(70, 209, 122, 0.5); background: rgba(70, 209, 122, 0.1); }

/* Modellier-Modus: Blender-artig */
.md-ltabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
.md-ltabs button { padding: 4px 2px; font-size: 11.5px; }
.md-lpane { display: flex; flex-direction: column; gap: 4px; }
.md-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.md-grid2 .btn { padding: 4px 4px; }
.md-kit { text-align: left; justify-content: flex-start; white-space: normal; line-height: 1.25; padding: 5px 8px; }
.md-body { grid-template-columns: 200px 1fr 310px; }
.md-vbar { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.md-vgrp { display: flex; pointer-events: auto; background: rgba(20, 24, 28, 0.82); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.md-vgrp button { border: 0; background: transparent; color: var(--text); padding: 5px 9px; font-size: 12px; cursor: pointer; border-right: 1px solid var(--line); }
.md-vgrp button:last-child { border-right: 0; }
.md-vgrp button:hover { background: rgba(255, 255, 255, 0.08); }
.md-vgrp button.on { background: rgba(255, 155, 61, 0.22); color: var(--accent); }
.md-status { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20, 24, 28, 0.92); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 12px; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; max-width: calc(100% - 20px); text-align: center; }
.md-status span { color: var(--muted); font-size: 11px; }
.md-keys { position: absolute; right: 8px; top: 46px; width: min(430px, calc(100% - 16px)); background: rgba(20, 24, 28, 0.95); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; z-index: 2; }
.md-keys i { font-style: normal; font-weight: 700; color: var(--accent); }
.md-outline { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.ol-row, .ol-grp { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.ol-row:hover, .ol-grp:hover { background: rgba(255, 255, 255, 0.06); }
.ol-row.on, .ol-grp.on { background: rgba(255, 155, 61, 0.18); }
.ol-row.in { padding-left: 18px; }
.ol-row.off span { opacity: 0.45; }
.ol-row span, .ol-grp span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-row em, .ol-grp em { font-style: normal; color: var(--muted); font-size: 11px; }
.ol-grp { font-weight: 650; }
.ol-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ol-sw.el { background: #46d17a; } .ol-sw.cn { background: #35c6ff; } .ol-sw.jt { background: var(--accent); }
.ol-eye { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 2px; }
.md-ops { display: flex; flex-wrap: wrap; gap: 4px; }
.md-arr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.md-arr input { width: 54px; }
.md-arr i { font-style: normal; }
.md-joint { padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 155, 61, 0.3); background: rgba(255, 155, 61, 0.06); margin-bottom: 6px; }
.md-jh { display: flex; justify-content: space-between; gap: 6px; }
.md-jh em { font-style: normal; color: var(--muted); font-size: 11.5px; }

/* ---------------------------------------------------------------- Verbinden (Schrauben, Kleber …) */
.join-bar { position: fixed; left: 50%; top: 112px; transform: translateX(-50%); z-index: 15; width: min(560px, calc(100vw - 32px)); padding: 10px 12px; }
.md-join { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 3; width: min(560px, calc(100% - 16px)); background: rgba(20, 24, 28, 0.96); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.jp-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.jp-head b { flex: 1; font-size: 13px; }
.jp-x { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.jp-x:hover { color: var(--text); }
.jp-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.ghost { background: transparent; }
.jp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; max-height: 220px; overflow-y: auto; }
.jp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; cursor: pointer; }
.jp-opt b { font-size: 12px; font-weight: 600; }
.jp-opt span { font-size: 11px; color: var(--muted); }
.jp-opt.on { border-color: var(--accent); background: rgba(255, 155, 61, 0.14); }
.jp-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.jp-note { margin: 7px 0 4px; }
.jp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; font-size: 12px; }
.jp-row input[type=number] { width: 56px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 5px; }
.jp-row label.check { display: flex; align-items: center; gap: 4px; }
.jp-row input[type=checkbox] { accent-color: var(--accent); }
.jp-hold { margin-left: auto; color: var(--ok); font-weight: 600; }
.md-links, .joinsec { display: flex; flex-direction: column; gap: 4px; }
.md-link, .jrow { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n b x" "e e e"; align-items: center; gap: 2px 6px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }
.md-link span, .jrow span { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-link em, .jrow em { grid-area: e; font-style: normal; color: var(--muted); font-size: 11px; }
.md-link .btn:first-of-type, .jrow .btn:first-of-type { grid-area: b; }
.md-link .btn.ghost, .jrow .btn.ghost { grid-area: x; }
.md-link.loose { border-color: rgba(255, 90, 74, 0.5); }
.md-link.loose span { color: #ff8a7a; }
.md-link.bad, .jrow.bad { border-color: rgba(255, 90, 74, 0.5); }
.md-hold { margin: 6px 0; }
.md-hold .warn { color: var(--warn); }
.ol-sw.lk { background: #d8dde2; border-radius: 50%; }
.joinsec h4 { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.joinsec h4 svg { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 720px) {
  .join-bar { top: auto; bottom: calc(70px + var(--safe-b)); }
}
.ol-sw.hl { background: transparent; border: 1.5px dashed #ff5a4a; }
.md-holebtn { border-color: rgba(255, 90, 74, 0.45); }
/* Anlagen-Test im eigenen Fenster */
.st-running .st-card { width: min(760px, calc(100vw - 32px)); }
.st-live { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0d1013; aspect-ratio: 16 / 9; margin: 6px 0 10px; }
.st-livecv { width: 100%; height: 100%; display: block; }
.st-live .st-when { position: absolute; left: 10px; top: 8px; background: rgba(10, 12, 14, 0.75); padding: 3px 9px; border-radius: 12px; font-weight: 600; }
.st-liverow { display: flex; align-items: center; gap: 10px; }
.st-liverow .st-prog { flex: 1; }
.st-livelog { margin-top: 8px; min-height: 1.4em; }
.flabel.dx { pointer-events: auto; display: flex; align-items: center; gap: 4px; }
.fl-x { background: rgba(0, 0, 0, 0.25); border: 0; color: inherit; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; padding: 0; cursor: pointer; font-size: 14px; flex: none; }
.fl-x:hover { background: rgba(0, 0, 0, 0.5); }

/* Verkabeln von oben */
.wd-card { width: min(1180px, calc(100vw - 24px)); height: min(820px, calc(100vh - 24px)); display: flex; flex-direction: column; padding: 14px; }
.wd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wd-head > div:first-child { flex: 1; }
.wd-head h2 { margin: 0 0 2px; }
.wd-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.wd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 230px; gap: 12px; }
.wd-view { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); min-height: 260px; }
.wd-bg, .wd-gl, .wd-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wd-ov { cursor: grab; touch-action: none; }
.wd-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(14, 17, 20, 0.92); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.wd-side { overflow-y: auto; }
.wd-side h4 { margin: 10px 0 6px; }
.wd-cols { display: flex; flex-wrap: wrap; gap: 5px; }
.wd-cols button { min-width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 11px; padding: 0 6px; }
.wd-cols button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 155, 61, 0.35); }
.wd-list { display: flex; flex-direction: column; gap: 4px; }
.wd-dev { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.wd-dev span { color: var(--muted); font-size: 11px; }
.wd-dev.on { border-color: var(--accent); }
@media (max-width: 720px) {
  .wd-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .wd-side { max-height: 30vh; }
}

/* Beispiele */
.ex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.ex-card { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.ex-card b { font-size: 14px; }
.ex-card:hover, .ex-card:focus-visible { border-color: var(--accent); background: rgba(255, 155, 61, 0.08); outline: none; }
.start-card { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 14px 40px 14px 16px; max-width: calc(100vw - 32px); font-size: 13px; }
.start-card .sc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.start-card .sc-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted, #9aa4ae); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }

/* Einführung */
.intro-card { width: min(720px, 100%); }
.intro-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.intro-step { color: var(--muted); font-size: 12px; }
.intro-skip { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 6px; font-size: 12px; text-decoration: underline; }
.intro-skip:hover { color: var(--text); }
.intro-card p, .intro-card li { font-size: 14px; line-height: 1.55; }
.intro-lead { font-size: 15px !important; margin-top: 0; }
.intro-points { margin: 10px 0; padding-left: 18px; display: grid; gap: 6px; }
.intro-note { background: rgba(255, 155, 61, 0.1); border: 1px solid rgba(255, 155, 61, 0.35); border-radius: 8px; padding: 10px 12px; }
.intro-phone { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(57, 194, 255, 0.08); border: 1px solid rgba(57, 194, 255, 0.25); }
.intro-phone p { margin: 0 0 8px; }
.intro-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.intro-keys div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.intro-keys b { font-size: 14px; }
.intro-keys span { color: var(--muted); }
.intro-keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.intro-modes { display: grid; gap: 6px; margin: 4px 0 4px; }
.intro-modes div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(57, 194, 255, 0.08); border: 1px solid rgba(57, 194, 255, 0.25); }
.intro-modes i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--accent-2); }
.intro-modes i svg { width: 20px; height: 20px; }
.intro-dots { display: flex; gap: 6px; }
.intro-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.intro-dots i.on { background: var(--accent); }

/* Feedback */
.btn.fb-btn { border-color: rgba(255, 155, 61, 0.6); color: #ffd2a6; }
.btn.fb-btn:hover { background: rgba(255, 155, 61, 0.16); }
.fb-card { width: min(620px, 100%); }
.fb-card > p { margin: 0 0 10px; }
.fb-card h2 { margin-bottom: 6px; }
.fb-q { display: flex; flex-direction: column; gap: 5px; margin: 0 0 11px; }
.fb-l { font-weight: 600; font-size: 13.5px; }
.fb-l i { font-weight: 400; font-style: normal; color: var(--muted); font-size: 12px; }
.fb-stars { display: flex; align-items: center; gap: 2px; }
.fb-stars button { background: none; border: 0; cursor: pointer; font-size: 27px; line-height: 1; padding: 2px 3px; color: rgba(255, 255, 255, 0.22); transition: color 0.1s, transform 0.1s; }
.fb-stars button.on { color: var(--accent); }
.fb-stars button:hover { transform: scale(1.12); color: #ffbe7d; }
.fb-star-txt { margin-left: 8px; font-size: 12.5px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 12.5px; }
.fb-chip:hover { background: rgba(255, 255, 255, 0.1); }
.fb-chip.on { background: rgba(255, 155, 61, 0.2); border-color: var(--accent); color: #ffd2a6; }
.fb-q textarea { width: 100%; resize: vertical; min-height: 44px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.fb-q textarea:focus, .fb-chip:focus-visible, .fb-stars button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-privacy { margin: 4px 0 0; }
.fb-err { color: #ffb3a8; background: rgba(255, 77, 61, 0.12); border: 1px solid rgba(255, 77, 61, 0.4); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
.fb-nudge { position: absolute; right: 16px; bottom: 96px; z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 12px 40px 12px 14px; font-size: 13px; max-width: calc(100vw - 32px); }
.fb-nudge .fb-stars button { font-size: 26px; }
.fb-nudge .sc-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }

/* Impressum / Datenschutz in Einführung und Hilfe */
.legal-links { margin: 10px 0 0; text-align: center; }
.intro-card p.legal-links { font-size: 12px; margin: 12px 0 0; }
.legal-links a, .fb-privacy a { color: inherit; text-decoration: underline; }
.legal-links a:hover, .fb-privacy a:hover { color: var(--accent); }
.lang-btn { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }