/* =====================================================================
   PrepP — Schaltbild-Labor
   ---------------------------------------------------------------------
   Umsetzung des Bildschirms "Schaltbild" aus dem Claude-Design-Entwurf.
   Rahmen und Bedienung im Portal-Look (dunkel, Tokens --pp-*), die
   Zeichenflaeche selbst bleibt weiss: Schaltbilder sind schwarze Linien
   auf Papier, und genau so gehen sie spaeter in die Aufgabe.

   Technische Schrift: IBM Plex Sans/Mono. Ein Labor ist kein Fliesstext —
   Zahlen muessen in Spalten stehen und Einheiten eindeutig sein.
   ===================================================================== */

.lab {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  background: var(--pp-bg); color: var(--pp-text);
  font-family: var(--pp-ui);
  font-size: 13px;
}

/* ---------- Kopfzeile ---------- */
.lab-top {
  flex: 0 0 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 14px 0 8px; border-bottom: 1px solid var(--pp-line);
  background: var(--pp-bg-2);
}
.lab-back {
  border: none; background: transparent; color: var(--pp-text-3);
  font-size: 19px; line-height: 1; width: 34px; height: 34px;
  border-radius: 6px; cursor: pointer;
}
.lab-back:hover { background: var(--pp-surface); color: var(--pp-text); }
.lab-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lab-title b { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.lab-nodes { font-size: 11px; color: var(--pp-text-3); font-family: var(--pp-mono); letter-spacing: .2px; }
.lab-live {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border: 1px solid var(--pp-line);
  border-radius: 20px; background: var(--pp-surface); white-space: nowrap;
}
.lab-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-ok); box-shadow: 0 0 7px var(--pp-ok);
}
.lab-live.bad .dot { background: var(--pp-err); box-shadow: 0 0 7px var(--pp-err); }
.lab-live .txt { font-size: 11.5px; color: var(--pp-text-2); font-weight: 500; }
.lab-live .ms { font-size: 11px; color: var(--pp-text-3); font-family: var(--pp-mono); }
/* Rueckgaengig/Wiederholen sitzen links und sind bewusst gross — sie werden
   am haeufigsten gebraucht und muessen ohne Zielen treffbar sein. */
.lab-hist { display: flex; gap: 4px; flex: 0 0 auto; }
.lab-hist button {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 7px; width: 40px; height: 36px; font-size: 21px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.lab-hist button:hover { border-color: var(--pp-accent-line); color: var(--pp-accent); background: var(--pp-surface); }

/* Aufklappmenues (Bauteile, Import/Export) */
.lab-menuwrap { position: relative; flex: 0 0 auto; }
.lab-btn.parts { border-color: var(--pp-line-2); color: var(--pp-text); }
.lab-btn.parts span { color: var(--pp-accent); font-weight: 600; }
.lab-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 244px; max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--pp-line-2); background: var(--pp-surface);
  border-radius: 8px; padding: 6px; box-shadow: var(--pp-lift);
}
.lab-menu.right { left: auto; right: 0; }
/* Beim Rechtsklick erscheint dasselbe Menue direkt an der Maus */
.lab-menu.floating { position: fixed; top: 0; left: 0; }
.lab-menu .grp {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600; padding: 9px 8px 4px;
}
.lab-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: transparent; color: var(--pp-text);
  border-radius: 5px; padding: 7px 8px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; text-align: left;
}
.lab-menu button:hover { background: var(--pp-surface-2); }
.lab-menu button.active { background: var(--pp-accent-tint); color: var(--pp-accent); }
.lab-menu .cir-ico { width: 34px; height: 17px; flex: 0 0 auto; }
.lab-menu .cir-ico svg { width: 100%; height: 100%; }
.lab-menu kbd {
  margin-left: auto; font-family: var(--pp-mono); font-size: 10.5px;
  color: var(--pp-text-3); border: 1px solid var(--pp-line); border-radius: 4px;
  padding: 1px 5px; flex: 0 0 auto;
}
.lab-menu em {
  margin-left: auto; font-style: normal; font-size: 10px; color: var(--pp-text-3);
  border: 1px solid var(--pp-line); border-radius: 9px; padding: 1px 7px; flex: 0 0 auto;
}
.lab-menu kbd + em { margin-left: 6px; }

.lab-topright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lab-btn {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 6px; padding: 7px 11px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.lab-btn:hover { border-color: var(--pp-line-2); color: var(--pp-text); }
.lab-btn.mono { font-family: var(--pp-mono); }
.lab-btn.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent); }
.lab-btn.primary {
  border-color: var(--pp-accent); background: var(--pp-accent-tint);
  color: var(--pp-accent); font-weight: 600; padding: 8px 15px;
}
.lab-btn.primary:hover { background: var(--pp-accent); color: var(--pp-bg); }

.lab-ms { font-size: 11.5px; color: var(--pp-ok); font-family: var(--pp-mono); }

/* ---------- Menueband ----------
   Gruppen mit Namen darunter, dazwischen Trennlinien — wie in einer
   Textverarbeitung. Was oft gebraucht wird, liegt offen statt in Menues. */
/* Breite und Richtung stehen hier ausdruecklich drin. Das Menueband trug
   frueher zusaetzlich die Klasse .cir-pal der alten senkrechten Palette, und
   deren "width: 132px; flex-direction: column" schlug durch, weil diese
   Regel sie deklariert und .lab-ribbon nicht. Ergebnis war ein schmaler
   Streifen am linken Rand statt einer Leiste ueber die volle Breite. */
.lab-ribbon {
  flex: 0 0 auto; width: auto; display: flex; flex-direction: row;
  align-items: stretch; gap: 0;
  padding: 6px 10px 3px; border-bottom: 1px solid var(--pp-line);
  background: var(--pp-bg-2); overflow-x: auto; overflow-y: visible;
}
.rb-grp {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px; border-right: 1px solid var(--pp-line); flex: 0 0 auto;
}
.rb-grp:last-child { border-right: none; }
.rb-items { display: flex; align-items: flex-start; gap: 2px; }
.rb-name { font-size: 9.5px; color: var(--pp-text-3); letter-spacing: .6px; margin-top: 2px; }
.rb-sep { width: 1px; align-self: stretch; background: var(--pp-line); margin: 2px 6px; }
button.rb {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 54px; max-width: 84px; padding: 5px 6px 4px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--pp-text-2); cursor: pointer; font-family: inherit; font-size: 10.5px;
  line-height: 1.15; text-align: center;
}
button.rb:hover { background: var(--pp-surface); color: var(--pp-text); border-color: var(--pp-line); }
button.rb.active { background: var(--pp-accent-tint); border-color: var(--pp-accent-line); color: var(--pp-accent); }
button.rb .cir-ico { width: 34px; height: 20px; display: block; }
button.rb .cir-ico svg { width: 100%; height: 100%; }
button.rb .rb-glyph { font-size: 17px; line-height: 20px; height: 20px; display: block; }

/* ---------- Rumpf ---------- */
.lab-body { flex: 1; display: flex; min-height: 0; }

/* Statuszeile schmal unter der Zeichenflaeche */
.lab-status {
  flex: 0 0 auto; padding: 5px 22px 8px; font-size: 11px;
  color: var(--pp-text-3); font-family: var(--pp-mono);
}
.lab-status b { color: var(--pp-text-2); font-weight: 600; }
.lab-props-hidden { display: none; }

/* ---------- Rechtsklickmenue ---------- */
.lab-ctx {
  position: absolute; z-index: 60; min-width: 240px; max-height: 74vh; overflow-y: auto;
  border: 1px solid var(--pp-line-2); background: var(--pp-surface);
  border-radius: 8px; box-shadow: var(--pp-lift); padding: 0 0 5px;
}
.lab-ctx-tabs { display: flex; gap: 2px; padding: 5px 5px 0; border-bottom: 1px solid var(--pp-line); }
.lab-ctx-tabs button {
  flex: 1; border: none; background: transparent; color: var(--pp-text-3);
  padding: 7px 6px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; border-bottom: 2px solid transparent;
}
.lab-ctx-tabs button.on { color: var(--pp-text); border-bottom-color: var(--pp-accent); }
.lab-ctx-body { padding: 5px; }
.lab-ctx-body .sec {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600; padding: 8px 8px 3px;
}
.lab-ctx-body .sep { height: 1px; background: var(--pp-line); margin: 5px 6px; }
.lab-ctx-body button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; color: var(--pp-text);
  border-radius: 5px; padding: 7px 9px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; text-align: left;
}
.lab-ctx-body button:hover:not([disabled]) { background: var(--pp-accent-tint); color: var(--pp-accent); }
.lab-ctx-body button[disabled] { color: var(--pp-text-3); opacity: .5; cursor: default; }
.lab-ctx-body kbd {
  margin-left: auto; font-family: var(--pp-mono); font-size: 10.5px;
  color: var(--pp-text-3); flex: 0 0 auto;
}
.lab-ctx-body em {
  margin-left: auto; font-style: normal; font-size: 9.5px; color: var(--pp-text-3);
  border: 1px solid var(--pp-line); border-radius: 8px; padding: 1px 6px; flex: 0 0 auto;
}
.lab-ctx-body em + kbd { margin-left: 6px; }

/* ---------- Wertefenster (Bauteilkarte) ----------
   Kleines Fenster neben dem Bauteil: verschiebbar, schliessbar, und die
   Zeichenflaeche daneben bleibt bedienbar.
   Bewusst OHNE Einblend-Animation. Das Fenster erscheint bei jedem
   gestempelten Bauteil — eine Bewegung bei jedem Klick macht die
   Zeichenflaeche unruhig. (Die .modal-Regel in dynexite.css bringt so eine
   Animation mit; deshalb ist dieses Fenster kein .modal.)
   Inhalt so knapp wie moeglich: ein Wert = ein Feld, Beispielwert ausgegraut
   im Feld, Einheit dahinter. Ueberschriften braucht es nicht — die
   Beschriftung im Kopf sagt, um welches Bauteil es geht. */
.lab-card {
  position: absolute; z-index: 55; width: 208px;
  border: 1px solid var(--pp-line-2); background: var(--pp-surface);
  border-radius: 10px; box-shadow: var(--pp-lift); overflow: hidden;
  animation: none;
}
.lab-card.hidden { display: none; }
.lab-card-head {
  display: flex; align-items: center; gap: 6px; cursor: move;
  padding: 5px 6px 5px 10px; background: var(--pp-bg-2);
  border-bottom: 1px solid var(--pp-line);
}
/* Die Beschriftung ist gleich das Eingabefeld — sie steht ohnehin hier, ein
   zweites Feld mit Ueberschrift darunter waere dasselbe doppelt. */
.lab-card-head .lb {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--pp-accent);
  font-family: var(--pp-mono); font-size: 12.5px; font-weight: 600;
  padding: 3px 0; outline: none;
}
.lab-card-head .lb:focus { color: var(--pp-text); }
.lab-card-head .mini {
  flex: 0 0 auto; border: none; background: transparent; color: var(--pp-text-3);
  border-radius: 5px; width: 22px; height: 22px; cursor: pointer;
  font-size: 11px; line-height: 1; font-family: inherit;
}
.lab-card-head .mini:hover { background: var(--pp-surface-2); color: var(--pp-text); }
.lab-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.lab-card-body .row { display: flex; align-items: center; gap: 6px; }
/* Groessensymbol vor dem Feld, in der Schrift des Schaltbilds. Nur dort, wo
   eine Zeile allein an der Einheit nicht zu erkennen waere (f, φ, u(0), …). */
.lab-card-body .row .q {
  flex: 0 0 auto; min-width: 14px; text-align: right;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 13px; color: var(--pp-text-2);
}
.lab-card-body .row .q sub { font-size: 9px; }
.lab-card-body .row .q span { font-style: normal; } /* Zahlen aufrecht: u(0), i(0) */
.lab-card-body input {
  flex: 1; min-width: 0; border: 1px solid var(--pp-line); background: var(--pp-bg-2);
  color: var(--pp-text); border-radius: 6px; padding: 6px 8px;
  font-size: 12.5px; font-family: var(--pp-mono); outline: none;
}
.lab-card-body input:focus { border-color: var(--pp-accent); }
.lab-card-body input::placeholder { color: var(--pp-text-3); opacity: .7; }
.lab-card-body .row .u {
  flex: 0 0 auto; font-size: 11.5px; color: var(--pp-text-3); font-family: var(--pp-mono);
}
.lab-card-body .sig { display: flex; gap: 3px; }
.lab-card-body .sig button {
  flex: 1; border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 5px; padding: 4px 0; font-size: 11px; cursor: pointer; font-family: inherit;
}
.lab-card-body .sig button:hover { border-color: var(--pp-line-2); color: var(--pp-text); }
.lab-card-body .sig button.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent); }

/* Spalte der geschlossenen Wertefenster */
.lab-cards {
  flex: 0 0 auto; width: 132px; border-left: 1px solid var(--pp-line);
  background: var(--pp-bg-2); padding: 10px 8px; display: flex;
  flex-direction: column; gap: 6px; overflow-y: auto;
}
.lab-cards.empty { display: none; }
.lab-cardchip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text);
  border-radius: 6px; padding: 7px 9px; cursor: pointer; font-family: inherit; text-align: left;
}
.lab-cardchip:hover { border-color: var(--pp-accent); }
.lab-cardchip span { font-size: 12px; font-weight: 600; }
.lab-cardchip i { font-style: normal; font-size: 10.5px; color: var(--pp-text-3); font-family: var(--pp-mono); }

/* Griff der rechten Leiste — eigener Streifen, damit ihn das Neuzeichnen
   des Docks nicht mit wegwirft. */
.lab-dock-grip {
  flex: 0 0 7px; position: relative; cursor: col-resize;
  background: var(--pp-bg-2); border-left: 1px solid var(--pp-line);
}
.lab-dock-grip::after {
  content: ""; position: absolute; top: 0; left: 2px; width: 2px; height: 100%;
  background: transparent; transition: background .12s ease;
}
.lab-dock-grip:hover::after { background: var(--pp-accent); }
.lab-dock { border-left: none; }

/* Werkzeugleiste: nur Symbole, der Name steht im Tooltip */
.lab-rail {
  flex: 0 0 52px; border-right: 1px solid var(--pp-line); background: var(--pp-bg-2);
  padding: 8px 0; display: flex; flex-direction: column; align-items: center;
  gap: 3px; overflow-y: auto;
}
.lab-rail .cir-tool {
  width: 38px; height: 32px; border: 1px solid transparent; background: transparent;
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--pp-text-2); font-size: 12px;
  position: relative; flex: 0 0 auto;
}
.lab-rail .cir-tool:hover { background: var(--pp-surface); color: var(--pp-text); }
.lab-rail .cir-tool.active {
  border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent);
}
.lab-rail .cir-ico { display: block; width: 30px; height: 18px; }
.lab-rail .cir-ico svg { width: 100%; height: 100%; }

/* ---------- Mitte ---------- */
.lab-center { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--pp-bg); }
.lab-canvas {
  flex: 1; min-height: 0; padding: 18px 20px 4px;
  display: flex; justify-content: center; overflow: auto;
}
/* Die ID muss mit in den Selektor: dynexite.css setzt #cir-svg auf feste
   1600 x 1020 px, und eine ID schlaegt jede Zahl von Klassen. Ohne das
   sprengt das Schaltbild die Zeichenflaeche. */
.lab-canvas svg, .lab-canvas svg#cir-svg {
  width: 100%; max-width: 900px; height: auto; margin: auto;
  background: #fff; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .28);
  outline: none;
}
.lab-hintrow { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 22px 0; }
.lab-hint { font-size: 11px; color: var(--pp-text-3); font-family: var(--pp-mono); min-width: 0; }
.lab-hint b { color: var(--pp-text-2); font-weight: 600; }
.lab-zoom { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.lab-zoom button {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 5px; height: 24px; min-width: 26px; padding: 0 8px;
  font-size: 12px; cursor: pointer; font-family: var(--pp-mono);
}
.lab-zoom button:hover { border-color: var(--pp-line-2); color: var(--pp-text); }

/* Schwebender Inspektor: was ausgewaehlt ist, laesst sich hier sofort aendern */
.lab-inspector { flex: 0 0 auto; padding: 10px 22px 16px; display: flex; justify-content: center; }
.lab-insp {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--pp-line); background: var(--pp-surface);
  border-radius: 9px; padding: 8px 12px; box-shadow: var(--pp-shadow); min-height: 44px;
}
.lab-insp .sym { width: 34px; height: 20px; flex: 0 0 auto; }
.lab-insp .sym svg { width: 100%; height: 100%; }
.lab-insp .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; min-width: 26px; }
.lab-insp .fld {
  display: flex; align-items: baseline; gap: 4px;
  border: 1px solid var(--pp-line); background: var(--pp-bg-2);
  border-radius: 6px; padding: 5px 10px;
}
.lab-insp .fld:hover { border-color: var(--pp-accent-line); }
.lab-insp .fld input {
  border: none; background: transparent; color: var(--pp-text);
  font-family: var(--pp-mono); font-size: 13.5px; font-weight: 500;
  width: 74px; outline: none; text-align: right; padding: 0;
}
.lab-insp .fld .unit { font-size: 12.5px; color: var(--pp-text-3); font-family: var(--pp-mono); }
.lab-insp .sep { width: 1px; height: 22px; background: var(--pp-line); }
.lab-insp .empty { color: var(--pp-text-3); font-size: 12.5px; }

/* Der Eigenschaften-Editor (props() in circuit.js) schreibt direkt hier
   hinein. Er bringt mehr Bedienelemente mit als der Entwurf zeigt — statt
   Funktionen zu streichen, legt er sich in einer Zeile aus und bricht um. */
.lab-insp { max-width: 100%; }
.lab-insp h4 {
  margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  white-space: nowrap; flex: 0 0 auto;
}
.lab-insp label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11px; color: var(--pp-text-3); white-space: nowrap;
}
.lab-insp label.cp-check { font-size: 11.5px; color: var(--pp-text-2); cursor: pointer; }
.lab-insp input[type="text"], .lab-insp input:not([type]), .lab-insp select {
  border: 1px solid var(--pp-line); background: var(--pp-bg-2); color: var(--pp-text);
  border-radius: 6px; padding: 5px 9px; font-size: 12.5px;
  font-family: var(--pp-mono); width: 110px; outline: none;
}
.lab-insp input:focus, .lab-insp select:focus { border-color: var(--pp-accent); }
.lab-insp input[type="checkbox"] { width: auto; accent-color: var(--pp-accent); }
.lab-insp .vd-row { display: flex; align-items: center; gap: 5px; }
.lab-insp .vd-unit { font-size: 12px; color: var(--pp-text-3); font-family: var(--pp-mono); }
.lab-insp .sig-toggle { display: flex; gap: 3px; }
.lab-insp .sig-toggle button, .lab-insp .btn-ghost, .lab-insp button {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-2);
  border-radius: 5px; padding: 5px 9px; font-size: 11.5px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.lab-insp .sig-toggle button.active {
  border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-accent);
}
.lab-insp button:hover { border-color: var(--pp-line-2); color: var(--pp-text); }
.lab-insp .cir-p-empty { color: var(--pp-text-3); font-size: 12.5px; }
.lab-insp .cir-p-empty .cir-p-hint { display: none; }
.lab-probe {
  border: 1px solid var(--pp-line); background: transparent; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--pp-text-2); display: flex; align-items: center; gap: 6px; font-family: inherit;
}
.lab-probe .sw { width: 9px; height: 2.5px; border-radius: 2px; }
.lab-probe.on { border-color: var(--pp-accent-line); background: var(--pp-accent-tint); color: var(--pp-text); }

/* Netzliste unter der Zeichenflaeche */
.lab-netlist {
  flex: 0 0 auto; border-top: 1px solid var(--pp-line);
  background: var(--pp-bg-2); padding: 12px 22px 14px; max-height: 32vh; overflow: auto;
}
.lab-netlist .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lab-netlist .cap {
  font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600;
}
.lab-netlist .sub { font-size: 11px; color: var(--pp-text-3); }
.lab-netlist textarea {
  width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical;
  border: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text-2);
  border-radius: 6px; padding: 10px 12px;
  font-family: var(--pp-mono); font-size: 12.5px; line-height: 1.7; outline: none;
}
.lab-netlist textarea:focus { border-color: var(--pp-accent); }
.lab-netlist .msg { margin-top: 8px; font-size: 12px; }
.lab-netlist .msg.err { color: var(--pp-err); }
.lab-netlist .msg.ok { color: var(--pp-ok); }

/* ---------- Analyse-Dock ---------- */
.lab-dock {
  flex: 0 0 404px; width: 404px; border-left: 1px solid var(--pp-line);
  background: var(--pp-bg-2); display: flex; flex-direction: column; overflow-y: auto;
}
.lab-tabs { display: flex; gap: 2px; padding: 10px 12px 0; flex: 0 0 auto; }
.lab-tabs button {
  flex: 1; border: none; border-bottom: 2px solid transparent; background: transparent;
  color: var(--pp-text-3); padding: 8px 4px 9px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; letter-spacing: .1px; font-family: inherit;
}
.lab-tabs button.on { color: var(--pp-text); border-bottom-color: var(--pp-accent); font-weight: 600; }
.lab-plot { padding: 14px 14px 0; }
.lab-plot .frame {
  background: #fff; border-radius: 6px; padding: 8px 8px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); overflow: hidden;
}
/* Vorschau anklicken oeffnet dieselbe Analyse im grossen Fenster */
.lab-plot .frame.pick { cursor: pointer; position: relative; transition: box-shadow .13s ease; }
.lab-plot .frame.pick:hover { box-shadow: 0 0 0 2px var(--pp-accent), 0 6px 18px rgba(0, 0, 0, .4); }
.lab-plot .openhint {
  position: absolute; right: 8px; bottom: 6px; opacity: 0;
  background: var(--pp-accent); color: #fff; border-radius: 5px;
  padding: 3px 9px; font-size: 11px; font-weight: 600;
  transition: opacity .13s ease; pointer-events: none;
}
.lab-plot .frame.pick:hover .openhint { opacity: 1; }
.lab-plot svg { width: 100%; height: auto; display: block; }
.lab-readout {
  margin: 12px 14px 0; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--pp-line); background: var(--pp-surface);
  border-radius: 7px; padding: 8px 11px; min-height: 34px;
}
.lab-readout .cap {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600; flex: 0 0 auto;
}
.lab-readout .val { font-family: var(--pp-mono); font-size: 12.5px; color: var(--pp-text); font-weight: 500; }
.lab-sec { padding: 14px 14px 0; }
.lab-sec .cap {
  font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--pp-text-3); font-weight: 600; margin-bottom: 2px;
}
.lab-meas { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--pp-line); }
.lab-meas .lbl { color: var(--pp-text-2); font-size: 13px; min-width: 84px; }
.lab-meas .val { margin-left: auto; font-family: var(--pp-mono); font-size: 13px; color: var(--pp-text); font-weight: 500; }
.lab-meas .ins {
  border: 1px solid var(--pp-line); background: transparent; color: var(--pp-text-3);
  border-radius: 4px; width: 24px; height: 22px; font-size: 11px; cursor: pointer; flex: 0 0 auto;
}
.lab-meas .ins:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.lab-model { padding: 16px 14px 22px; }
.lab-model .box {
  border: 1px solid var(--pp-line); background: var(--pp-surface);
  border-radius: 7px; padding: 13px 14px; overflow-x: auto; margin-top: 9px;
  color: var(--pp-text); font-size: 13px;
}
.lab-empty { padding: 18px 14px; color: var(--pp-text-3); font-size: 12.5px; line-height: 1.7; }

@media (max-width: 1100px) {
  .lab-dock { flex: 0 0 320px; width: 320px; }
}
@media (max-width: 860px) {
  .lab-body { flex-direction: column; }
  .lab-dock { flex: 0 0 auto; width: auto; border-left: none; border-top: 1px solid var(--pp-line); }
}

/* ---- Vorlagen-Bibliothek (Knopf „Vorlage laden" oben rechts) ----
   Zwei Klassen (.modal.tpl-modal), weil die Basisregel .modal { max-width:480px }
   in dynexite.css SPÄTER steht — Fallstrick 4 in CLAUDE.md. Karten sind selbst
   die Knöpfe (Fläche = Knopf, wie im Portal). Vorschau bleibt weiß: Schaltbilder
   sind schwarze SVGs und wären auf dunklem Grund unlesbar. */
.modal.tpl-modal {
  max-width: 1020px; width: 94vw; max-height: 90vh;
  display: flex; flex-direction: column;
}
.tpl-hint { font-size: 12.5px; color: #556; margin: 0 0 10px; }
.tpl-scroll { overflow: auto; flex: 1; min-height: 0; padding: 2px 6px 8px 2px; }
.tpl-grp {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: #667; margin: 16px 0 8px;
}
.tpl-scroll .tpl-grp:first-child { margin-top: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
.tpl-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  border: 1px solid #d5dae0; border-radius: 9px; background: #fff;
  padding: 8px; cursor: pointer; font: inherit; color: #223;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tpl-card:hover { border-color: #2e7fc2; box-shadow: 0 3px 14px rgba(30, 60, 90, .13); transform: translateY(-1px); }
.tpl-card b { font-size: 13px; line-height: 1.3; }
.tpl-prev {
  height: 116px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #eceff2; border-radius: 6px; overflow: hidden;
}
.tpl-prev svg { max-width: 96%; max-height: 110px; width: auto; height: auto; }
.tpl-note { font-size: 11.5px; color: #566; line-height: 1.45; }
.tpl-warn { font-size: 11px; color: #a05a00; line-height: 1.4; }