/* electric.css — Elektrik-Planer (/electric, /en/electric, Companion App → Tools) */
.el-wrap { max-width: 1600px; margin: 0 auto; padding: 28px 20px 60px; }
.el-hero .el-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-bright); }
.el-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px, 4vw, 46px); margin: 6px 0; line-height: 1; }
.el-hero p { color: var(--text-soft); margin: 0 0 16px; max-width: 820px; }

.el-app { --el-power: #ffb347; --el-water: #4da3ff; --el-item: #b98cff; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); overflow: hidden; display: flex; flex-direction: column; height: min(82vh, 900px); min-height: 520px; }
.el-app [hidden] { display: none !important; }
.el-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.el-file { display: grid; min-width: 140px; }
.el-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.el-file small { color: var(--text-faint); font: 11px var(--font-mono); }
.el-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.el-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.el-btn { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 600 13px var(--font-body, inherit); cursor: pointer; white-space: nowrap; }
.el-btn:hover:not(:disabled) { border-color: var(--accent); }
.el-btn:disabled { opacity: .4; cursor: default; }
.el-btn.el-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.el-btn.el-danger:hover { border-color: #d9534f; color: #ff8a7a; }
.el-btn.el-ico { width: 32px; padding: 6px 0; font-size: 15px; }
.el-btn.el-sm { padding: 3px 9px; }
.el-sel { padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 13px var(--font-mono); }
.el-env { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.el-env input { width: 80px; accent-color: var(--accent); }
.el-env output { font: 11px var(--font-mono); min-width: 34px; color: var(--text-faint); }
.el-totals { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-soft); }
.el-totals b { font-family: var(--font-mono); color: var(--text); }

.el-main { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; min-height: 0; }
.el-palette { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.el-palette input { margin: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.el-palette input:focus { outline: none; border-color: var(--accent); }
.el-plist { overflow-y: auto; padding: 0 6px 10px; }
.el-group summary { cursor: pointer; padding: 7px 6px; font: 600 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); list-style: none; }
.el-group summary::-webkit-details-marker { display: none; }
.el-group summary::before { content: '▸ '; }
.el-group[open] summary::before { content: '▾ '; }
.el-group summary small { opacity: .7; }
.el-part { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: grab; }
.el-part:hover { border-color: var(--line); background: var(--bg); }
.el-part img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.el-part span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-part small { font: 11px var(--font-mono); color: var(--text-faint); }

.el-board { position: relative; min-width: 0; min-height: 0; outline: none; background: var(--bg); color: var(--line); }
.el-board svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.el-board svg:active { cursor: grabbing; }
.el-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 420px; margin: 0; text-align: center; color: var(--text-faint); font-size: 14px; pointer-events: none; }
.el-banner { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev)); border: 1px solid var(--accent); color: var(--text); font-size: 13.5px; }

/* Bauteile auf der Fläche */
.el-node { cursor: move; }
.el-box { fill: var(--bg-elev); stroke: var(--line); stroke-width: 1.5; }
.el-node.sel .el-box { stroke: var(--accent); stroke-width: 2.5; }
.el-node.warn .el-box { stroke: #e0a13a; stroke-dasharray: 5 3; }
.el-name { fill: var(--text); font: 600 12.5px var(--font-body, sans-serif); }
.el-sub { fill: var(--text-faint); font: 11px var(--font-mono, monospace); }
.el-led { fill: #3a312b; }
.el-node.act .el-led { fill: #7bd17f; filter: drop-shadow(0 0 4px #7bd17f); }
.el-node.warn .el-led { fill: #e0a13a; }
.el-port { stroke-width: 2.5; cursor: crosshair; }
.el-port.in, .el-port.fin, .el-port.iin { fill: var(--bg); }
.el-port.power { stroke: var(--el-power); } .el-port.water { stroke: var(--el-water); } .el-port.item { stroke: var(--el-item); }
.el-port.out.power, .el-port.on.power { fill: var(--el-power); }
.el-port.fout.water, .el-port.on.water { fill: var(--el-water); }
.el-port.iout.item, .el-port.on.item { fill: var(--el-item); }
.el-port:not(.on).out, .el-port:not(.on).fout, .el-port:not(.on).iout { fill-opacity: .35; }
.el-port:hover { r: 8; }

/* Kabel */
.el-wire path { fill: none; }
.el-wire .el-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.el-wire .el-line { stroke: #5b5048; stroke-width: 3; }
.el-wire.power.on .el-line { stroke: var(--el-power); }
.el-wire.water .el-line { stroke: color-mix(in srgb, var(--el-water) 45%, #5b5048); }
.el-wire.water.on .el-line { stroke: var(--el-water); stroke-dasharray: 8 5; animation: el-flow 1s linear infinite; }
.el-wire.item .el-line { stroke: color-mix(in srgb, var(--el-item) 45%, #5b5048); stroke-width: 5; }
.el-wire.item.on .el-line { stroke: var(--el-item); stroke-dasharray: 3 7; animation: el-flow 1.4s linear infinite; }
.el-wire.sel .el-line { stroke-width: 5; filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes el-flow { to { stroke-dashoffset: -26; } }
.el-wv rect { fill: var(--bg); stroke: #5b5048; stroke-width: 1; }
.el-wire.on .el-wv rect { stroke: currentColor; }
.el-wire.power.on .el-wv { color: var(--el-power); } .el-wire.water.on .el-wv { color: var(--el-water); }
.el-wv text { fill: var(--text); font: 700 10.5px var(--font-mono, monospace); text-anchor: middle; }
.el-ghost { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }

/* Inspektor */
.el-inspect { border-left: 1px solid var(--line); padding: 14px; overflow-y: auto; font-size: 13.5px; }
.el-inspect h4 { margin: 0; font-size: 15px; }
.el-inspect h5 { margin: 14px 0 6px; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.el-ihead { display: flex; gap: 10px; align-items: center; }
.el-ihead img { width: 44px; height: 44px; object-fit: contain; }
.el-ihead small { color: var(--text-faint); font-size: 12px; }
.el-muted { color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.el-state { margin: 10px 0 0; font: 600 12.5px var(--font-mono); color: var(--text-faint); }
.el-state.on { color: #7bd17f; }
.el-props { display: grid; gap: 8px; }
.el-num { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-soft); }
.el-num input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 14px var(--font-mono); }
.el-num input:focus { outline: none; border-color: var(--accent); }
.el-lab { margin-top: 14px; }
.el-toggle { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.el-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.el-ports { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.el-ports li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-soft); }
.el-ports b { font-family: var(--font-mono); color: var(--text-faint); }
.el-ports b.on { color: var(--el-power); }
.el-val { font: 700 22px var(--font-mono); }
.el-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.el-warns { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.el-warns button { background: none; border: 0; color: #e0a13a; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; padding: 2px 0; }

/* Dialoge */
.el-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.el-modal-card { width: min(520px, 100%); max-height: 86vh; overflow-y: auto; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.el-modal-card h4 { margin: 0 0 10px; font-size: 16px; }
.el-modal-card h4 small { color: var(--text-faint); font: 12px var(--font-mono); margin-left: 6px; }
.el-modal-card h4 + p { margin-top: 0; }
.el-modal-card input[type=text], .el-modal-card textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 13px var(--font-mono); }
.el-modal-card textarea { resize: vertical; word-break: break-all; }
.el-copyrow { display: flex; gap: 8px; }
.el-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.el-plans li { display: flex; gap: 6px; align-items: center; }
.el-plan { flex: 1; display: grid; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.el-plan:hover { border-color: var(--accent); }
.el-plan small { color: var(--text-faint); font-size: 11.5px; }

@media (max-width: 1100px) {
  .el-main { grid-template-columns: 200px minmax(0, 1fr); }
  .el-inspect { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 260px; }
  .el-app { height: auto; }
  .el-main { grid-template-rows: minmax(420px, 62vh) auto; }
}
@media (max-width: 640px) {
  .el-wrap { padding: 20px 10px 50px; }
  .el-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(380px, 60vh) auto; }
  .el-palette { border-right: 0; border-bottom: 1px solid var(--line); max-height: 200px; }
  .el-env input { width: 60px; }
}
html.in-app .el-hero { display: none !important; }

/* eckige Kabel + Zwischenpunkte */
.el-wire .el-line, .el-ghost { stroke-linejoin: miter; stroke-linecap: square; }
.el-wp { fill: var(--bg-elev); stroke: #8a7d72; stroke-width: 2; cursor: move; }
.el-wire.on .el-wp { stroke: var(--el-power); }
.el-wire.water .el-wp { stroke: var(--el-water); } .el-wire.item .el-wp { stroke: var(--el-item); }
.el-wire.sel .el-wp { fill: var(--accent); stroke: #fff; }
.el-wp:hover { stroke: #fff; }

/* Kabel legen (Klick-Modus) */
.el-board.el-wiring svg { cursor: crosshair; }
.el-ghost-pt { fill: var(--accent); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.el-ghost-cur { fill: none; stroke: var(--accent); stroke-width: 2; pointer-events: none; }
#el-ghost path { pointer-events: none; }
.el-wirehint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev)); border: 1px solid var(--accent); color: var(--text); font-size: 12.5px; text-align: center; pointer-events: none; }