/* VoltWerk */
:root {
  --bg: #ffffff; --panel: #ffffff; --ink: #16213a; --muted: #6f7a8e; --line: #e4e8ef; --soft: #f5f7fb;
  --blue: #2563eb; --blue-ink: #1e56c5; --blue-soft: #edf4ff; --green: #16a34a; --green-soft: #e8f8ee;
  --red: #dc2626; --red-soft: #fdecec; --amber: #d97706; --amber-soft: #fff4e0;
  --cv: #f7f9fc; --grid: #e7ecf3; --cabinet: #ffffff; --cabinet-line: #ccd4df; --field: #fbfcfe; --zone: #8a95a8;
  --shadow: 0 8px 24px #1a2a4414; --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1522; --panel: #141b2a; --ink: #e7ecf5; --muted: #95a0b5; --line: #263044; --soft: #1a2233;
    --blue: #5b8cff; --blue-ink: #8fb0ff; --blue-soft: #1c2a4a; --green: #34d178; --green-soft: #133224;
    --red: #f26464; --red-soft: #3a1a1f; --amber: #f5a524; --amber-soft: #3a2a12;
    --cv: #101725; --grid: #1b2436; --cabinet: #182133; --cabinet-line: #2e3a52; --field: #131b2b; --zone: #7d89a1;
    --shadow: 0 8px 24px #0006; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1522; --panel: #141b2a; --ink: #e7ecf5; --muted: #95a0b5; --line: #263044; --soft: #1a2233;
  --blue: #5b8cff; --blue-ink: #8fb0ff; --blue-soft: #1c2a4a; --green: #34d178; --green-soft: #133224;
  --red: #f26464; --red-soft: #3a1a1f; --amber: #f5a524; --amber-soft: #3a2a12;
  --cv: #101725; --grid: #1b2436; --cabinet: #182133; --cabinet-line: #2e3a52; --field: #131b2b; --zone: #7d89a1;
  --shadow: 0 8px 24px #0006; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 13px/1.45 Manrope, system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); }
[hidden] { display: none !important; }

/* Kopfzeile */
.topbar { height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #2b71ef, #153eaf); color: #fff; font: 700 12px 'DM Mono', monospace; box-shadow: 0 5px 12px #2563eb44; }
.brand-txt { display: grid; line-height: 1.1; font-size: 15px; font-weight: 800; }
.brand-txt b { color: var(--blue); }
.brand-txt small { font: 500 8px 'DM Mono', monospace; letter-spacing: 1.4px; color: var(--muted); margin-top: 3px; }
.project-name { flex: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; height: 38px; }
.project-name input { border: 0; outline: 0; width: 100%; font-weight: 700; background: transparent; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); flex: none; transition: background .2s; }
.status-dot.busy { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.top-actions { display: flex; gap: 6px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; font-size: 17px; color: var(--muted); }
.icon-btn:disabled { opacity: .4; cursor: default; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 0 14px; min-height: 38px; font-weight: 700; font-size: 12.5px; }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.danger { color: var(--red); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--blue-ink); }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
.btn:hover { filter: brightness(.97); }

/* Grundlayout */
.shell { height: calc(100dvh - 60px); display: grid; grid-template-columns: 272px minmax(0, 1fr) 320px; }
.side { background: var(--panel); overflow: auto; }
.left { border-right: 1px solid var(--line); padding: 16px 12px; }
.right { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.sheet-handle { display: none; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 4px 12px; }
.eyebrow { font: 500 9px 'DM Mono', monospace; letter-spacing: 1.3px; color: var(--muted); margin: 0 0 4px; }
.panel-head h2 { margin: 0; font-size: 17px; letter-spacing: -.3px; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; height: 38px; color: var(--muted); }
.search input { border: 0; outline: 0; width: 100%; background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 20px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.chip.on { background: var(--blue-soft); border-color: transparent; color: var(--blue-ink); }
.lib { display: grid; gap: 6px; }
.lib-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; touch-action: none; user-select: none; }
.lib-item:hover { border-color: #9cbcff; background: var(--blue-soft); }
.lib-ico { width: 46px; height: 52px; flex: none; display: grid; place-items: center; }
.lib-ico svg { width: 46px; height: 52px; }
.lib-name { font-weight: 700; font-size: 12.5px; display: block; }
.lib-meta { font-size: 11px; color: var(--muted); display: block; }
.hint { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 14px; padding: 12px 4px; }
.lib-ghost { position: fixed; z-index: 100; pointer-events: none; background: var(--panel); border: 2px solid var(--blue); border-radius: 10px; padding: 6px 10px; font-weight: 700; box-shadow: var(--shadow); transform: translate(-50%, -120%); }

/* Arbeitsbereich */
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cv); }
.work > .toolbar, .work > .task-banner { flex: none; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 8px; padding: 0 10px; min-height: 34px; font-weight: 700; font-size: 12.5px; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--blue-ink); box-shadow: 0 1px 3px #0002; }
.seg.mode button[data-mode="sim"].on { color: var(--green); }
.ctx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.cond { display: inline-flex; align-items: center; gap: 4px; }
.cond span { font-size: 11px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.cond button { border: 2px solid transparent; border-radius: 8px; min-width: 34px; min-height: 32px; padding: 0 5px; font: 700 11px 'DM Mono', monospace; color: #fff; }
.cond button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }
.cond .c-auto { background: var(--soft); color: var(--ink); }
.c-L1 { background: #8b5a2b; } .c-L2 { background: #1f2328; } .c-L3 { background: #8d949e; } .c-N { background: #2f6fd6; }
.c-PE { background: repeating-linear-gradient(135deg, #3aa24a 0 6px, #f2cf1d 6px 12px); color: #111 !important; }
.cost-chip { font: 700 11.5px 'DM Mono', monospace; background: var(--soft); border-radius: 8px; padding: 7px 10px; color: var(--ink); }
.tool.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

.stage { position: relative; overflow: hidden; touch-action: none; flex: 1; min-height: 0; }
#cv { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.view-pane { position: absolute; inset: 0; overflow: auto; background: var(--bg); padding: 18px; touch-action: auto; }
.zoom { position: absolute; right: 14px; bottom: 14px; display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.zoom button { border: 0; background: transparent; width: 40px; height: 40px; font-size: 18px; }
.zoom span { display: grid; place-items: center; min-width: 50px; font: 500 11px 'DM Mono', monospace; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.hintbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 12px 8px 14px; border-radius: 10px; font-weight: 700; font-size: 12.5px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow); max-width: calc(100% - 24px); z-index: 5; }
.hintbar button { border: 0; background: #ffffff26; color: inherit; border-radius: 7px; padding: 4px 10px; font-weight: 700; }
.probe-out { position: absolute; top: 12px; left: 12px; background: var(--panel); border: 2px solid var(--amber); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); z-index: 5; min-width: 180px; }
.probe-out .u { font: 700 28px 'DM Mono', monospace; }
.probe-out .d { font-size: 12px; color: var(--muted); }
.simlog { position: absolute; left: 12px; bottom: 14px; max-width: min(460px, calc(100% - 180px)); max-height: 40%; overflow: auto; display: grid; gap: 6px; z-index: 4; }
.log { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 9px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); }
.log.trip { border-left-color: var(--amber); } .log.danger { border-left-color: var(--red); background: var(--red-soft); } .log.warn { border-left-color: var(--amber); }
.status { flex: none; height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; background: var(--panel); border-top: 1px solid var(--line); color: var(--muted); font: 500 10.5px 'DM Mono', monospace; gap: 10px; white-space: nowrap; overflow: hidden; }
.task-banner { background: linear-gradient(90deg, var(--blue-soft), var(--panel)); border-bottom: 1px solid var(--line); padding: 8px 14px; display: flex; gap: 12px; align-items: center; font-size: 12.5px; }
.task-banner b { font-size: 13px; }
.task-banner .prog { font: 700 11px 'DM Mono', monospace; color: var(--blue-ink); background: var(--panel); border-radius: 20px; padding: 2px 9px; border: 1px solid var(--line); }
.task-banner .sp { flex: 1; }
.task-banner { flex-wrap: wrap; overflow: hidden; }
.task-banner .prog { white-space: nowrap; }

/* SVG: Zeichenfläche */
.cv-bg { fill: var(--cv); }
.cabinet { fill: var(--cabinet); stroke: var(--cabinet-line); stroke-width: 1.5; }
.field { fill: var(--field); stroke: var(--cabinet-line); stroke-dasharray: 6 5; }
.zone-lbl { font: 500 10px 'DM Mono', monospace; letter-spacing: 1.5px; fill: var(--zone); }
.rail { fill: #b7bfca; stroke: #98a2b0; }
.te-tick { stroke: #aab3bf; }
.slot-line { stroke: var(--grid); stroke-dasharray: 3 5; }
.drop-row { fill: #2563eb14; stroke: #2563eb66; stroke-dasharray: 5 4; }
.wire path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.w-hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.w-out { stroke: #0b1220; stroke-opacity: .28; stroke-width: 6; pointer-events: none; }
.w-core { stroke-width: 4; pointer-events: none; }
.w-pe { stroke: #f2cf1d; stroke-width: 3.4; stroke-dasharray: 7 7; pointer-events: none; }
.w-halo { stroke: var(--blue); stroke-width: 12; stroke-opacity: .28; pointer-events: none; }
.wire.err .w-halo { stroke: var(--red); stroke-opacity: .45; }
.wire.dim { opacity: .35; }
.w-live { stroke: #fff; stroke-opacity: .35; stroke-width: 1.3; stroke-dasharray: 1.5 14; pointer-events: none; }
.w-live.flow { animation: flow .9s linear infinite; stroke-opacity: .6; }
@keyframes flow { to { stroke-dashoffset: -15.5; } }

.dev { cursor: grab; }
.dev .body { fill: url(#gBody); stroke: #8a94a3; stroke-width: 1.2; }
.dev.b-dark .body { fill: #2a3548; stroke: #182232; }
.dev.b-dark .d-t1, .dev.b-dark .d-t2, .dev.b-dark .t-lbl { fill: #e8eef7; }
.dev.b-red .lv { fill: #d63b3b; }
.dev.b-spd .body { fill: #f3f0e6; }
.dev.b-kl .body { fill: #aab2bc; stroke: #6b7580; }
.dev.b-kn .body { fill: #3b7be0; stroke: #2a5cb0; }
.dev.b-kpe .body { fill: #3aa24a; stroke: #2a7a37; }
.pe-stripe { fill: #f2cf1d; }
.kl-t { font: 700 8px 'DM Mono', monospace; text-anchor: middle; fill: #fff; transform-box: fill-box; }
.bar-bg { fill: #e9edf2; stroke: #a7b0bc; }
.dev.b-nbar .bar { fill: #3b7be0; } .dev.b-pebar .bar { fill: #3aa24a; }
.dev.b-pebar .bar-bg { fill: #eef6ee; }
.bar-t { font: 700 10px 'DM Mono', monospace; text-anchor: end; fill: #fff; }
.card { fill: var(--panel); stroke: var(--cabinet-line); }
.dev .sup { fill: #1d2433; stroke: #0b1220; }
.sup-t { font: 800 13px Manrope, sans-serif; fill: #fff; text-anchor: middle; }
.sup-s { font: 500 10px 'DM Mono', monospace; fill: #b8c3d6; text-anchor: middle; }
.sup-blown { font: 800 11px Manrope; fill: #ff8080; text-anchor: middle; }
.sup-lbl { font: 700 10px 'DM Mono', monospace; text-anchor: middle; fill: #fff; }
.d-t1 { font: 800 11.5px Manrope, sans-serif; fill: #1a2233; text-anchor: middle; }
.d-t2 { font: 500 8px 'DM Mono', monospace; fill: #5b6475; text-anchor: middle; }
.bmk { font: 700 10px 'DM Mono', monospace; fill: #2563eb; text-anchor: middle; }
.b-dark .bmk { fill: #9cc0ff; }
.d-lbl { font: 600 8.5px Manrope, sans-serif; fill: #4a5568; text-anchor: middle; }
.b-dark .d-lbl { fill: #c9d4e5; }
.card ~ .bmk { font-size: 9.5px; }
.lv-slot { fill: #1f2733; }
.lv { fill: #2f3a4a; }
.lever.on .lv-mark { fill: #22c55e; } .lever.off .lv-mark { fill: #ef4444; }
.coil-led { fill: #4a5568; } .coil-led.on { fill: #22c55e; filter: drop-shadow(0 0 4px #22c55e); }
.tbtn { fill: #facc15; stroke: #8a7414; cursor: pointer; }
.tbtn-t { font: 800 8px Manrope; text-anchor: middle; fill: #3a3000; pointer-events: none; }
.lcd { fill: #c7e6c2; stroke: #6c8c67; } .lcd-t { font: 500 8px 'DM Mono', monospace; text-anchor: middle; fill: #1d3a1a; }
.led { fill: #4a5568; } .led.on { fill: #22c55e; filter: drop-shadow(0 0 4px #22c55e); }
.spd-win { fill: #22c55e; }
.trip-flag { fill: #ef4444; } .trip-t { font: 800 6.5px Manrope; letter-spacing: -.2px; fill: #fff; text-anchor: middle; }
.burnt { font: 800 18px Manrope; fill: #ef4444; text-anchor: middle; }
.dev.tripped .body { stroke: #ef4444; stroke-width: 2.4; }
.dev.sel .body, .dev.sel .bar-bg { stroke: var(--blue); stroke-width: 3; }
.dev.ghost { opacity: .75; pointer-events: none; }
.dev.ghost.bad .body, .dev.ghost.bad .bar-bg { stroke: var(--red); stroke-width: 3; }
.term { cursor: crosshair; }
.t-hit { fill: transparent; }
.t-dot { fill: #fff; stroke: #2d3748; stroke-width: 1.6; }
.r-N .t-dot { stroke: #2f6fd6; } .r-PE .t-dot { stroke: #2a8a3a; } .r-A1 .t-dot, .r-A2 .t-dot { stroke: #b7791f; }
.term:hover .t-dot { fill: var(--blue); stroke: var(--blue); }
.term.pending .t-dot { fill: var(--blue); stroke: var(--blue); r: 8; }
.term.probe .t-dot { fill: #f59e0b; stroke: #b45309; r: 8; }
.t-lbl { font: 500 7.5px 'DM Mono', monospace; fill: #5b6475; text-anchor: middle; pointer-events: none; }
.badge circle { fill: var(--red); stroke: #fff; stroke-width: 2; } .badge.warn circle { fill: var(--amber); } .badge.hint circle { fill: #64748b; }
.badge text { font: 800 11px Manrope; fill: #fff; text-anchor: middle; }
.fault-ico { font: 16px sans-serif; fill: #ef4444; }
/* Verbraucher */
.ico { fill: #fff; stroke: #5b6475; stroke-width: 2; }
.hole { fill: #334155; } .clip { fill: #94a3b8; }
.ico.glow-g { stroke: #16a34a; filter: drop-shadow(0 0 6px #22c55e88); }
.ico.glow-r { stroke: #dc2626; fill: #fff1f1; }
.halo { fill: #fde68a; opacity: .6; }
.ico.lamp-on { fill: #fde047; stroke: #a16207; }
.x { stroke: #5b6475; stroke-width: 2; }
.plate { fill: #d8dde5; stroke: #6b7280; } .plate.hot { fill: #ef4444; stroke: #991b1b; filter: drop-shadow(0 0 4px #ef4444); }
.lamp-ind { fill: #3a4252; stroke: #1f2733; } .lamp-ind.on.grün { fill: #22c55e; filter: drop-shadow(0 0 6px #22c55e); } .lamp-ind.on.rot { fill: #ef4444; filter: drop-shadow(0 0 6px #ef4444); } .lamp-ind.on.gelb { fill: #facc15; filter: drop-shadow(0 0 6px #facc15); }
.wave { fill: none; stroke: #94a3b8; stroke-width: 2; } .wave.hot { stroke: #ef4444; }
.fan { stroke: #475569; stroke-width: 3; stroke-linecap: round; }
.ico-t { font: 700 10px 'DM Mono', monospace; text-anchor: middle; fill: #334155; } .ico-t.big { font-size: 16px; }
.rot-arrow { fill: none; stroke: #16a34a; stroke-width: 3; } .rot-head { fill: #16a34a; }
.rot-t { font: 800 10px Manrope; fill: #16a34a; text-anchor: middle; } .rot-t.warn { fill: #dc2626; }
.spin-r { animation: spin 1s linear infinite; } .spin-l { animation: spin 1s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.rocker { fill: #f1f4f8; stroke: #64748b; stroke-width: 1.5; cursor: pointer; } .rocker.on { fill: #dcfce7; stroke: #16a34a; }
.rk-in { fill: #cbd5e1; pointer-events: none; }
.st { font: 800 10px Manrope; text-anchor: middle; } .st.ok { fill: #16a34a; } .st.bad { fill: #dc2626; }
.wire-preview { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 6 5; fill: none; pointer-events: none; }

/* Grundriss */
.fl-bg { fill: var(--cv); }
.fl-grid { fill: url(#gGrid); }
.fl-empty { font: 700 16px Manrope; fill: var(--muted); }
.fl-tray { font: 500 10px 'DM Mono', monospace; letter-spacing: 1.5px; fill: var(--zone); }
.rm-fill { fill: #ffffff; stroke: none; cursor: pointer; }
.rt-Küche { fill: #fff7ed; } .rt-Bad { fill: #ecfeff; } .rt-Wohnzimmer, .rt-Esszimmer { fill: #f7fee7; } .rt-Schlafzimmer, .rt-Kinderzimmer { fill: #f5f3ff; }
.rt-Flur, .rt-Abstellraum { fill: #f8fafc; } .rt-Garage, .rt-Werkstatt, .rt-Technik, .rt-Keller, .rt-Gartenhaus { fill: #f1f5f9; } .rt-Büro { fill: #fefce8; }
:root[data-theme="dark"] .rm-fill { fill-opacity: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm-fill { fill-opacity: .12; } }
.rm-wall { fill: none; stroke: #334155; stroke-width: 6; pointer-events: none; }
.room.sel .rm-fill { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 8 6; }
.rm-name { font: 800 14px Manrope; fill: var(--ink); pointer-events: none; }
.rm-area { font: 500 10px 'DM Mono', monospace; fill: var(--muted); pointer-events: none; }
.rm-want { font: 700 10.5px Manrope; fill: var(--red); text-anchor: end; pointer-events: none; paint-order: stroke; stroke: #ffffffd0; stroke-width: 3px; }
.rm-want.ok { fill: var(--green); }
.rm-resize { fill: var(--blue); stroke: #fff; stroke-width: 2; cursor: nwse-resize; }
.item { cursor: grab; }
.item.unplaced { opacity: .75; }
.it-hit { fill: transparent; }
.item.sel .it-hit { fill: #2563eb22; stroke: var(--blue); stroke-width: 2; }
.sy { fill: #fff; stroke: #1e293b; stroke-width: 2; }
.sy-l { fill: none; stroke: #1e293b; stroke-width: 2; stroke-linecap: round; }
.sy-dot { fill: #1e293b; }
.sy.ok { stroke: #16a34a; fill: #dcfce7; } .sy.on { fill: #bbf7d0; stroke: #16a34a; }
.sy.lamp { fill: #fde047; stroke: #a16207; } .sy-halo { fill: #fde68a; opacity: .65; }
.sy.hot { fill: #fecaca; stroke: #dc2626; }
.sy-t { font: 800 10px 'DM Mono', monospace; text-anchor: middle; fill: #1e293b; pointer-events: none; }
.it-tag { font: 700 9px 'DM Mono', monospace; text-anchor: middle; fill: var(--blue-ink); pointer-events: none; paint-order: stroke; stroke: #ffffffd0; stroke-width: 3px; }
.it-bad { fill: var(--red); stroke: #fff; stroke-width: 1.5; } .it-bad.warn { fill: var(--amber); }
.it-fault { font: 14px sans-serif; fill: #ef4444; }
.item.ghost { opacity: .7; pointer-events: none; } .item.ghost.bad .sy { stroke: var(--red); }
.stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.stars.big { font-size: 38px; letter-spacing: 6px; }
.level { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 6px; background: var(--panel); width: 100%; text-align: left; }
.level.locked { opacity: .5; }
.level .no { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); font: 800 13px 'DM Mono', monospace; flex: none; }
.level .tt { flex: 1; } .level .tt b { display: block; font-size: 13.5px; } .level .tt small { color: var(--muted); }
.budget { height: 10px; background: var(--soft); border-radius: 6px; overflow: hidden; margin: 4px 0 10px; }
.budget i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.budget i.over { background: var(--red); }
.site-card { background: linear-gradient(135deg, #f59e0b, #b45309); color: #fff; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.site-card small { font: 500 9.5px 'DM Mono', monospace; letter-spacing: 1.2px; opacity: .85; }
.site-card h4 { margin: 4px 0; font-size: 16px; }
.site-card .btn { background: #fff; color: #92400e; border: 0; margin-top: 8px; }

/* Rechte Leiste */
.rtabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); }
.rtabs button { border: 0; background: transparent; padding: 10px 10px; font-weight: 700; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.rtabs button.on { color: var(--blue-ink); border-bottom-color: var(--blue); }
.cnt { display: inline-block; min-width: 18px; border-radius: 10px; font: 700 10px 'DM Mono', monospace; padding: 1px 5px; background: var(--soft); color: var(--muted); }
.cnt.err { background: var(--red); color: #fff; } .cnt.ok { background: var(--green); color: #fff; }
.rpanel { padding: 14px 16px 24px; overflow: auto; flex: 1; }
.rpanel h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.2px; }
.rpanel .sub { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.field-row { display: grid; gap: 4px; margin: 10px 0; }
.field-row label { font: 500 9.5px 'DM Mono', monospace; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.field-row input, .field-row select { border: 1px solid var(--line); border-radius: 8px; height: 38px; padding: 0 10px; width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--ink); margin: 12px 0; }
.info b { display: block; font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: .6px; margin-bottom: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { font-weight: 700; text-align: right; }
.faults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.faults .btn.on { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.big-toggle { width: 100%; min-height: 46px; font-size: 14px; }
.issue { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: var(--panel); }
.issue.error { border-left-color: var(--red); } .issue.warn { border-left-color: var(--amber); } .issue.hint { border-left-color: #64748b; }
.issue .m { font-weight: 700; font-size: 12.5px; }
.issue .w { font-size: 12px; color: var(--muted); margin-top: 4px; display: none; }
.issue.open .w { display: block; }
.issue .lv { font: 700 9px 'DM Mono', monospace; letter-spacing: .8px; text-transform: uppercase; }
.issue.error .lv { color: var(--red); } .issue.warn .lv { color: var(--amber); } .issue.hint .lv { color: var(--muted); }
.allgood { text-align: center; padding: 24px 10px; color: var(--green); font-weight: 800; }
.allgood span { font-size: 40px; display: block; }
.sumrow { display: flex; gap: 6px; margin-bottom: 12px; }
.sumrow div { flex: 1; border-radius: 10px; padding: 8px; text-align: center; background: var(--soft); font-size: 11px; color: var(--muted); }
.sumrow b { display: block; font: 700 20px 'DM Mono', monospace; color: var(--ink); }
.sumrow .e b { color: var(--red); } .sumrow .w b { color: var(--amber); }
/* Lernen */
.daily { background: linear-gradient(135deg, #2b71ef, #153eaf); color: #fff; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.daily small { font: 500 9.5px 'DM Mono', monospace; letter-spacing: 1.2px; opacity: .8; }
.daily h4 { margin: 4px 0; font-size: 16px; }
.daily .btn { background: #fff; color: #1d4ed8; border: 0; margin-top: 8px; }
.stats { display: flex; gap: 8px; margin-bottom: 14px; }
.stats div { flex: 1; background: var(--soft); border-radius: 10px; padding: 8px; text-align: center; font-size: 11px; color: var(--muted); }
.stats b { display: block; font: 700 18px 'DM Mono', monospace; color: var(--ink); }
.task { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 6px; background: var(--panel); width: 100%; text-align: left; }
.task .lvl { font: 700 10px 'DM Mono', monospace; color: var(--muted); width: 26px; }
.task .tt { flex: 1; } .task .tt b { display: block; font-size: 13px; } .task .tt small { color: var(--muted); }
.task .done { color: var(--green); font-size: 18px; font-weight: 800; }
.goal { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; }
.goal i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 800; flex: none; }
.goal.ok i { background: var(--green); color: #fff; }
.goal.ok span { color: var(--muted); text-decoration: line-through; }
.tip { background: var(--amber-soft); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; margin: 6px 0; }
.story { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 8px 0 12px; }
.success { background: var(--green-soft); border: 1px solid var(--green); border-radius: 12px; padding: 12px; text-align: center; font-weight: 800; color: var(--green); margin: 10px 0; }
.success span { font-size: 30px; display: block; }

/* Listen & Plan */
.lst h2 { font-size: 18px; margin: 4px 0 10px; }
.lst section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; overflow-x: auto; }
.lst table { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 640px; }
.lst th { text-align: left; font: 500 9.5px 'DM Mono', monospace; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px; }
.lst td { border-bottom: 1px solid var(--line); padding: 7px 8px; }
.lst .head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 30px 1fr 70px; gap: 8px; align-items: center; font: 700 12px 'DM Mono', monospace; }
.bar-row .tr { background: var(--soft); border-radius: 6px; height: 16px; overflow: hidden; }
.bar-row .fi { height: 100%; border-radius: 6px; }
.plan-wrap svg { display: block; min-width: 100%; }
.pl-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.pl-node rect { fill: var(--panel); stroke: var(--cabinet-line); stroke-width: 1.4; }
.pl-node.rcd rect { stroke: #7c3aed; } .pl-node.ocpd rect { stroke: var(--blue); } .pl-node.load rect { stroke: var(--green); } .pl-node.sup rect { fill: #1d2433; }
.pl-node.sup text { fill: #fff; }
.pl-node { cursor: pointer; }
.pl-b { font: 700 10px 'DM Mono', monospace; fill: var(--blue-ink); } .pl-t { font: 700 10.5px Manrope; fill: var(--ink); } .pl-l { font: 500 9.5px Manrope; fill: var(--muted); }
.pl-orph { font: 500 10px 'DM Mono', monospace; fill: var(--muted); }
.sym path, .sym circle, .sym rect, .sym ellipse { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.pl-node.sup .sym path { stroke: #fff; }
.sym-t { font: 700 9px 'DM Mono', monospace; text-anchor: middle; fill: var(--ink); stroke: none; }

/* Toast, Modal, Menü */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 12.5px; transition: .25s; z-index: 200; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed; inset: 0; background: #0b122080; z-index: 150; display: grid; place-items: center; padding: 16px; }
.dlg { background: var(--panel); border-radius: 16px; padding: 18px; width: min(460px, 100%); max-height: 86dvh; overflow: auto; box-shadow: var(--shadow); }
.dlg h3 { margin: 0 0 6px; font-size: 18px; }
.dlg p { color: var(--muted); margin: 0 0 12px; }
.menu-list { display: grid; gap: 6px; }
.menu-list button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 10px 12px; }
.menu-list button b { display: block; font-size: 13px; }
.menu-list button small { color: var(--muted); }
.menu-list h4 { margin: 8px 2px 0; font: 500 9.5px 'DM Mono', monospace; letter-spacing: 1px; color: var(--muted); }
.backdrop { display: none; }
.mnav { display: none; }
#printArea { display: none; }

/* Tablet */
@media (max-width: 1180px) { .shell { grid-template-columns: 240px minmax(0, 1fr) 290px; } }

/* Handy & kleines Tablet: Seitenleisten als Bottom-Sheets */
@media (max-width: 900px) {
  .topbar { height: 56px; gap: 8px; padding: 0 10px; }
  .brand-txt { display: none; }
  .project-name { min-width: 0; margin: 0; height: 40px; }
  .project-name input { font-size: 15px; }
  #undoBtn, #redoBtn { width: 40px; height: 40px; }
  .shell { display: block; height: calc(100dvh - 56px - 64px); }
  .work { height: 100%; }
  .status { height: 26px; }
  .toolbar { padding: 6px 8px; gap: 6px; }
  .seg button { min-height: 38px; padding: 0 9px; font-size: 12px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .seg { flex: none; }
  .cond span { display: none; }
  .cond button { min-width: 44px; }
  .hintbar { top: 8px; font-size: 12px; padding: 6px 8px 6px 10px; width: max-content; max-width: calc(100% - 16px); }
  .hintbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .probe-out { top: 8px; left: 8px; min-width: 0; padding: 8px 10px; }
  .probe-out .u { font-size: 22px; }
  .ctx-tools { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .cond button { min-height: 36px; min-width: 40px; }
  .side { position: fixed; left: 0; right: 0; bottom: 64px; max-height: 76dvh; z-index: 40; border: 0 !important; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px #0b122033; transform: translateY(calc(100% + 80px)); transition: transform .25s ease; }
  .side.open { transform: translateY(0); }
  .left { padding: 8px 14px 18px; }
  .right { display: flex; height: 76dvh; }
  .sheet-handle { display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 6px; flex: none; }
  .backdrop { display: block; position: fixed; inset: 0 0 64px 0; background: #0b122055; z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .backdrop.show { opacity: 1; pointer-events: auto; }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 45; background: var(--panel); border-top: 1px solid var(--line); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }
  .mnav button { flex: 1; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: var(--muted); min-height: 44px; position: relative; }
  .mnav button b { font-size: 17px; line-height: 1; }
  .mnav button.on { background: var(--blue-soft); color: var(--blue-ink); }
  .mnav .dot { position: absolute; top: 4px; right: 18%; width: 9px; height: 9px; border-radius: 50%; display: none; }
  .mnav .dot.err { display: block; background: var(--red); } .mnav .dot.ok { display: block; background: var(--green); }
  .search input { font-size: 16px; }
  .lib-item { min-height: 60px; }
  .field-row input, .field-row select { height: 44px; font-size: 16px; }
  .btn { min-height: 44px; }
  .zoom { right: 10px; bottom: 10px; }
  .zoom button { width: 44px; height: 44px; }
  .simlog { left: 8px; bottom: 60px; max-width: calc(100% - 16px); max-height: 35%; }
  .toast { bottom: 80px; }
  .task-banner { padding: 6px 10px; font-size: 12px; }
  .status { font-size: 9.5px; }
}
@media (max-width: 480px) {
  #themeBtn { display: none; }
  .seg button { padding: 0 8px; font-size: 11.5px; }
  .seg.mode .lbl { display: none; }
  .seg.mode button { min-width: 40px; font-size: 15px; }
  .task-banner { gap: 6px; }
  .task-banner .cost, .task-banner .goals-btn, .task-banner .sp { display: none; }
  .task-banner b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn.primary#fileBtn { padding: 0 10px; }
}

/* Druck */
@media print {
  body { overflow: visible; background: #fff; color: #000; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block; font: 11px Manrope, sans-serif; }
  #printArea h1 { font-size: 18px; margin: 0 0 4px; }
  #printArea table { border-collapse: collapse; width: 100%; margin-top: 10px; }
  #printArea th, #printArea td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
  .strip { display: flex; border: 1px solid #000; margin: 10px 0 18px; height: 16mm; }
  .strip div { border-right: 1px solid #000; font-size: 8px; padding: 1mm; overflow: hidden; }
  .strip div b { display: block; font-size: 9px; }
}