/* myWerkzeug.de · Verteilerplaner. Baut auf /helfer/helfer.css (Kopf, Schrift) und /assets/thema.css (Hell/Dunkel).
   Die Frontansicht und die Klemmenleiste sind Fachgrafiken auf heller Karte (.papier), auch im Dunkelmodus; ihre Farben stehen als
   Variablen auf .vp-board/.papier. Größenfarben nur nach Konvention: Strom rot (A), Spannung blau (ΔU), Leistung lila (W, kW),
   Widerstand grün (Ω), Temperatur rosa (°C). */
:root{--vp-akz:#2c47d8;--vp-akz-bg:#e8edff;--zebra:rgba(10,21,64,.035);--vp-ph1:#7a4b2a;--vp-ph-text:#fff;--vp-ph2:#1f2328;--vp-ph3:#8a9099}
:root[data-theme="dark"]{--vp-akz:#8ea3ff;--vp-akz-bg:#222d5a;--zebra:rgba(255,255,255,.035)}
.papier,.vp-geist,.vp-pal-bild,.vp-eig-bild,.vp-druck{--vp-wand:#e6e9ef;--vp-wand2:#dde1e8;--vp-geh:#fbfbfc;--vp-geh-rand:#b8bfca;--vp-innen:#eceff4;--vp-feld:#e3e7ee;--vp-feld-an:#dfe6ff;
  --vp-sch-a:#aeb6c1;--vp-sch-b:#f1f3f6;--vp-sch-c:#9aa3af;--vp-koerper-a:#eef0f4;--vp-koerper-b:#fdfdfe;--vp-koerper-c:#e6e9ee;--vp-koerper-rand:#9aa3af;
  --vp-schulter:#ffffff;--vp-hebel:#2f3a48;--vp-griff:#8792a2;--vp-schraube:#cfd4db;--vp-schraube-rand:#8a939f;--vp-text:#18212f;--vp-leise:#5e6a77;
  --vp-schild:#fffbe8;--vp-schild-rand:#c9c2a0;--vp-lcd:#c8d4c2;--vp-lcd-t:#24321f;--vp-led:#2f9e5a;--vp-pruef:#e9edf3;
  --vp-ph1:#7a4b2a;--vp-ph-text:#fff;--vp-ph2:#1f2328;--vp-ph3:#8a9099;--vp-ph123:#4b5563;--vp-err:#b42318;--vp-warn:#b7791f;--vp-sel:#2c47d8;
  --vp-kl-l:#c3c8cf;--vp-kl-n:#6fa8dc;--vp-kl-pe:#d4c83a;--vp-kl-pe-rand:#3f8a4a;--vp-kl-rand:#7d8794}

.vp{flex:1;width:100%;max-width:1680px;margin:0 auto;padding:22px clamp(16px,2.6vw,32px) 64px}
.vp h1{font-size:clamp(26px,3.3vw,38px);line-height:1.08;margin:6px 0 8px;font-stretch:115%;letter-spacing:-.02em}
.vp h2{font-size:16.5px;margin:0;font-stretch:108%}
.vp h3{font-size:15px;margin:0;font-stretch:106%}
.vp-kopf{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.vp-titel{max-width:760px}
.vp-titel p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
.vp-marke-v{display:inline-flex;padding:2px 10px;border-radius:999px;background:var(--vp-akz-bg);color:var(--vp-akz);font-size:12px;font-weight:700}
.vp-werkzeuge{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vp-vorlage select{width:auto;min-width:190px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.knopf{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--raised);color:var(--ink);padding:7px 12px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;min-height:36px;font-family:inherit;box-shadow:var(--glanz-knopf,none)}
.knopf:hover{border-color:var(--blue);color:var(--blue)}
.knopf:disabled{opacity:.45;cursor:default;color:var(--ink);border-color:var(--line-2)}
.knopf.rot:hover{border-color:var(--err);color:var(--err)}
.knopf .i{width:17px;height:17px}
.knopf.klein{padding:5px 10px;min-height:32px;font-size:13.5px}
.knopf.nur-icon{padding:5px;min-width:34px;justify-content:center}
.knopf.haupt{background:var(--blue);border-color:var(--blue);color:var(--auf-blau,#fff)}
.knopf.haupt:hover{filter:brightness(1.08);color:var(--auf-blau,#fff)}
.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:none}
.leise{color:var(--soft);font-size:13px;margin:0}
.leer{color:var(--muted);margin:6px 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vp input.sr{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.karte{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:16px clamp(12px,1.8vw,20px);margin:0;box-shadow:var(--schatten,0 1px 2px rgba(10,21,64,.04));min-width:0}

/* Größenfarben */
.gr-strom{color:var(--c-strom)}.gr-spannung{color:var(--c-spannung)}.gr-leistung{color:var(--c-leistung)}.gr-wid{color:var(--c-widerstand)}.gr-temp{color:var(--c-temperatur)}

/* Felder */
.vp input,.vp select{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:9px;background:var(--raised);color:var(--ink);padding:6px 9px;min-height:36px;font-size:14.5px;outline:none;font-family:inherit;box-shadow:var(--feld-innen,none)}
.vp select{cursor:pointer}
.vp select option{background:var(--raised);color:var(--ink)}
.vp input:focus,.vp select:focus{border-color:var(--blue);box-shadow:var(--focus)}
.vp-feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.vp-feld>span:first-child{font-size:12px;font-weight:650;color:var(--muted)}
.vp-einheit{position:relative;display:block}
.vp-einheit input{padding-right:36px}
.vp-einheit i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12.5px;color:var(--soft);pointer-events:none}
.vp-paar{display:grid;grid-template-columns:62px 1fr;gap:6px}
.vp-haken{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-height:36px;cursor:pointer;align-self:end}
.vp input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--blue);box-shadow:none;flex:none}

/* Einstellungen */
.vp-einst{margin-bottom:14px;padding-top:12px;padding-bottom:12px}
.vp-einst summary{display:flex;align-items:baseline;gap:14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.vp-einst summary::-webkit-details-marker{display:none}
.vp-einst summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(-45deg);margin-right:2px;align-self:center;transition:transform .15s}
.vp-einst[open] summary::before{transform:rotate(45deg)}
.vp-einst[open] summary .leise{display:none}
.vp-einst-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px;margin-top:12px;align-items:end}
.vp-einst-raster+.vp-einst-raster{padding-top:12px;border-top:1px dashed var(--line)}
.vp-abgeleitet{margin:0;font-size:13px;color:var(--muted);align-self:center}

/* Raster */
.vp-raster{display:grid;grid-template-columns:236px minmax(0,1fr) 336px;grid-template-areas:"pal board rechts" "pal tabs rechts";grid-template-rows:auto 1fr;gap:14px;align-items:start}
.vp-palette{grid-area:pal;position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;padding:12px 10px}
.vp-board-karte{grid-area:board;padding:10px;position:relative}
.vp-rechts{grid-area:rechts;position:sticky;top:10px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 20px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.vp-tabs-karte{grid-area:tabs}

/* Palette */
.vp-pal-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 4px 6px}
.vp-pal-gruppe{margin-top:8px}
.vp-pal-titel{font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin:6px 4px 4px}
.vp-pal-liste{display:flex;flex-direction:column;gap:3px}
.vp-pal{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:10px;padding:4px 6px;color:var(--ink);cursor:grab;font-family:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.vp-pal:hover{background:var(--blue-soft);border-color:var(--line)}
.vp-pal:active{cursor:grabbing}
.vp-pal:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
.vp-pal-bild{display:flex;justify-content:center;align-items:center;height:42px;border-radius:7px;background:linear-gradient(180deg,#e9edf2,#dfe3ea);box-shadow:inset 0 0 0 1px rgba(10,21,64,.08)}
.vp-pal-bild svg{height:36px;filter:drop-shadow(0 1px 1px rgba(10,21,64,.18))}
.vp-pal-text{display:flex;flex-direction:column;min-width:0}
.vp-pal-text b{font-size:13.5px;font-weight:650;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-pal-text small{font-size:11.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-pal-te{font-size:11px;font-weight:700;color:var(--muted);background:var(--paper);border-radius:6px;padding:1px 5px;white-space:nowrap}

/* Frontansicht */
.vp-board{border-radius:12px;padding:clamp(10px,2vw,22px);background:radial-gradient(120% 90% at 50% 0%,var(--vp-wand),var(--vp-wand2));display:flex;justify-content:center;overflow:auto;min-height:220px}
.vp-svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;overflow:visible}
.vp-svg text{font-family:"Archivo","Segoe UI",system-ui,sans-serif}
.g-gehaeuse{fill:var(--vp-geh);stroke:var(--vp-geh-rand);stroke-width:1.2;filter:drop-shadow(0 6px 8px rgba(10,21,64,.18))}
.g-innen{fill:var(--vp-innen);stroke:var(--vp-geh-rand);stroke-width:.6}
.g-titel{font-size:9px;font-weight:800;fill:var(--vp-text);letter-spacing:.01em}
.g-leise{font-size:6.5px;font-weight:600;fill:var(--vp-leise)}
.g-reihenfeld{fill:transparent;stroke:none}
.reihe{cursor:pointer}
.reihe:hover .g-reihenfeld{fill:var(--vp-feld)}
.reihe.gewaehlt .g-reihenfeld{fill:var(--vp-feld-an);stroke:var(--vp-sel);stroke-width:.6;stroke-dasharray:3 2}
.reihe.ueber .g-reihenfeld{fill:rgba(180,35,24,.08);stroke:var(--vp-err);stroke-width:.6;stroke-dasharray:3 2}
.g-reihennr{font-size:7.5px;font-weight:800;fill:var(--vp-leise)}
.sch-a{stop-color:var(--vp-sch-a)}.sch-b{stop-color:var(--vp-sch-b)}.sch-c{stop-color:var(--vp-sch-c)}
.k-a{stop-color:var(--vp-koerper-a)}.k-b{stop-color:var(--vp-koerper-b)}.k-c{stop-color:var(--vp-koerper-c)}
.g-schiene{stroke:var(--vp-sch-c);stroke-width:.5}
.g-sickung{stroke:var(--vp-sch-c);stroke-width:.7;opacity:.7}
.schraff{stroke:var(--vp-err);stroke-width:1.6;opacity:.5}
.g-ueberlauf{stroke:var(--vp-err);stroke-width:.8;stroke-dasharray:3 2}
.geraet{cursor:grab;outline:none}
.geraet:active{cursor:grabbing}
.g-treffer{fill:transparent}
.g-koerper{fill:url(#vpKoerper);stroke:var(--vp-koerper-rand);stroke-width:.6}
.g-schulter{fill:var(--vp-schulter);stroke:var(--vp-koerper-rand);stroke-width:.4}
.g-abdeckung{fill:var(--vp-koerper-c);stroke:var(--vp-koerper-rand);stroke-width:.5;stroke-dasharray:2 1.5;opacity:.8}
.g-schraube{fill:var(--vp-schraube);stroke:var(--vp-schraube-rand);stroke-width:.4}
.g-schlitz{stroke:var(--vp-schraube-rand);stroke-width:.6}
.g-hebel{fill:var(--vp-hebel)}
.g-griff{stroke:var(--vp-griff);stroke-width:.6;fill:none}
.g-koppel{fill:var(--vp-hebel);opacity:.85}
.g-pruef{fill:var(--vp-pruef);stroke:var(--vp-koerper-rand);stroke-width:.5}
.g-pruef-t{font-size:4.2px;font-weight:800;fill:var(--vp-text)}
.g-led{fill:var(--vp-led)}
.g-text,.g-wert{font-size:6.6px;font-weight:800;fill:var(--vp-text)}
.g-klein{font-size:4.6px;font-weight:650;fill:var(--vp-leise)}
.g-kappe{fill:#e9e5da;stroke:var(--vp-koerper-rand);stroke-width:.6}
.g-kappe-punkt{fill:var(--vp-leise)}
.g-modul{fill:var(--vp-koerper-b);stroke:var(--vp-koerper-rand);stroke-width:.4}
.g-fenster{fill:#dfe7dd;stroke:var(--vp-koerper-rand);stroke-width:.4}
.g-taste{fill:var(--vp-koerper-a);stroke:var(--vp-koerper-rand);stroke-width:.5}
.g-lcd{fill:var(--vp-lcd);stroke:var(--vp-koerper-rand);stroke-width:.4}
.g-lcd-t{font-size:5.4px;font-weight:800;fill:var(--vp-lcd-t);font-variant-numeric:tabular-nums}
.g-knopf{fill:var(--vp-koerper-a);stroke:var(--vp-hebel);stroke-width:.7}
.g-symbol{fill:none;stroke:var(--vp-text);stroke-width:.7}
.g-lampe{fill:#f3e3b6;stroke:var(--vp-koerper-rand);stroke-width:.5}
.g-dose{fill:var(--vp-koerper-a);stroke:var(--vp-koerper-rand);stroke-width:.6}
.g-loch{fill:var(--vp-hebel)}
.g-schild{fill:var(--vp-schild);stroke:var(--vp-schild-rand);stroke-width:.35}
.g-kz{font-size:5.2px;font-weight:800;fill:var(--vp-text)}
.g-phase{stroke:none}
.g-phase.ph1{fill:var(--vp-ph1)}.g-phase.ph2{fill:var(--vp-ph2)}.g-phase.ph3{fill:var(--vp-ph3)}.g-phase.ph123{fill:var(--vp-ph123)}
.g-phase-t{font-size:4.6px;font-weight:800;fill:#fff}
.g-marke.err{fill:var(--vp-err)}.g-marke.warn{fill:var(--vp-warn)}
.g-marke-t{font-size:6px;font-weight:900;fill:#fff;pointer-events:none}
.g-auswahl{fill:none;stroke:var(--vp-sel);stroke-width:1.6;filter:drop-shadow(0 0 3px rgba(44,71,216,.45))}
.geraet:focus-visible .g-koerper{stroke:var(--vp-sel);stroke-width:1.4}
.geraet:hover .g-koerper{stroke:var(--vp-sel)}
.geraet.wird-gezogen{opacity:.35}
.g-einfuege rect{fill:var(--vp-sel);filter:drop-shadow(0 0 3px rgba(44,71,216,.6))}
.g-endhalter{fill:#7d8794;stroke:#5e6a77;stroke-width:.4}
.g-klemme{stroke:var(--vp-kl-rand);stroke-width:.4}
.g-klemme.l{fill:var(--vp-kl-l)}.g-klemme.n{fill:var(--vp-kl-n)}.g-klemme.pe{fill:var(--vp-kl-pe);stroke:var(--vp-kl-pe-rand);stroke-width:.9}
.g-klemm-oeff{fill:rgba(10,21,64,.28)}
.g-klemm-nr{font-size:3.6px;font-weight:800;fill:var(--vp-text)}
.vp-board-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:0 4px}
.vp-board-fuss .leise{flex:1;min-width:200px}
.vp-ablage{position:absolute;left:50%;bottom:58px;transform:translate(-50%,12px);display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--raised);border:1.5px dashed var(--err);color:var(--err);font-weight:700;font-size:14px;opacity:0;pointer-events:none;box-shadow:var(--schatten-gross,0 8px 24px rgba(10,21,64,.18))}
.vp-ablage.an{opacity:1;transform:translate(-50%,0)}
.vp-ablage.drauf{background:var(--err-bg,#fdecea)}
.vp-geist{position:fixed;left:0;top:0;z-index:50;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(10,21,64,.35));opacity:.92}
.vp-geist svg{display:block}
body.vp-zieht,body.vp-zieht *{cursor:grabbing!important;user-select:none}

/* Eigenschaften */
.vp-eig{padding:14px}
.vp-eig-kopf{display:flex;gap:12px;align-items:center}
.vp-eig-bild{flex:none;display:flex;justify-content:center;align-items:center;min-width:56px;height:84px;border-radius:10px;background:linear-gradient(180deg,#e9edf2,#dfe3ea);padding:4px}
.vp-eig-bild svg{height:76px}
.vp-eig-kz{margin:0;font-size:12px;font-weight:800;color:var(--vp-akz);letter-spacing:.03em}
.vp-eig-kopf h3{font-size:15px;line-height:1.25}
.vp-eig-kopf .leise{margin-top:3px;font-size:12.5px}
.vp-eig-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.vp-eig-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;margin-top:10px}
.vp-eig-felder .breit,.vp-haken.breit{grid-column:1/-1}
.vp-eig-abschnitt{margin:16px 0 0;font-size:12px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.05em;padding-top:10px;border-top:1px solid var(--line)}
.vp-eig-pruef{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.vp-eig-pruef li{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.35}
.vp-eig-pruef .i{width:16px;height:16px;margin-top:1px}
.vp-eig-pruef li.ok .i{color:var(--ok)}.vp-eig-pruef li.warn .i{color:var(--warn)}.vp-eig-pruef li.err .i{color:var(--err)}
.vp-eig-werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.vp-eig-werte span{display:flex;flex-direction:column;font-size:11.5px;color:var(--soft);background:var(--paper);border-radius:8px;padding:6px 8px}
.vp-eig-werte b{font-size:14px;font-variant-numeric:tabular-nums}
.vp-eig-leer p{margin:0 0 10px;font-size:14px;line-height:1.45}
.vp-reihenliste{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.vp-reihe-knopf{display:grid;grid-template-columns:70px 1fr 74px;align-items:center;gap:10px;border:1px solid var(--line);background:var(--raised);border-radius:10px;padding:7px 10px;color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;text-align:left}
.vp-reihe-knopf:hover{border-color:var(--blue)}
.vp-reihe-knopf.an{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.vp-reihe-knopf small{font-size:12px;color:var(--soft);text-align:right;font-weight:600}
.vp-mini-balken{height:7px;border-radius:9px;background:var(--paper);overflow:hidden}
.vp-mini-balken i{display:block;height:100%;background:var(--c-neutral2);border-radius:9px}
.vp-mini-balken i.voll{background:var(--err)}

/* Kennzahlen */
.vp-kz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vp-kz-kachel{background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:11px 12px;box-shadow:var(--glanz,none),var(--schatten,none);min-width:0}
.vp-kz-kachel.breit{grid-column:1/-1}
.vp-kz-t{margin:0 0 4px;font-size:12px;font-weight:750;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vp-kz-t .leise{font-size:11.5px;font-weight:600}
.vp-kz-wert{margin:0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.vp-kz-wert b{font-size:21px;color:var(--ink);font-stretch:108%}
.vp-kz-wert b.gr-leistung{color:var(--c-leistung)}
.vp-kz-wert .gr-temp{font-weight:750}
.vp-kz-u{margin:6px 0 0;font-size:11.5px;color:var(--soft)}
.vp-balken{display:block;height:8px;border-radius:9px;background:var(--paper);overflow:hidden;margin-top:7px;box-shadow:inset 0 1px 2px rgba(10,21,64,.08)}
.vp-balken i{display:block;height:100%;border-radius:9px;background:var(--c-neutral2);transition:width .25s}
.vp-balken i.warn{background:var(--warn)}.vp-balken i.err{background:var(--err)}
.vp-balken i.leistung{background:var(--c-leistung)}.vp-balken i.leistung.warn{background:linear-gradient(90deg,var(--c-leistung),var(--warn))}.vp-balken i.leistung.err{background:linear-gradient(90deg,var(--c-leistung),var(--err))}
.vp-balken i.strom{background:var(--c-strom)}
.vp-phase{display:grid;grid-template-columns:28px 1fr 58px 54px;align-items:center;gap:8px;margin-top:6px;font-size:13px;font-variant-numeric:tabular-nums}
.vp-phase .vp-balken{margin:0}
.vp-phase b{text-align:right}
.vp-phase .gr-leistung{text-align:right;font-size:12px}
.vp-ph{display:inline-grid;place-items:center;height:18px;border-radius:9px;font-size:10.5px;font-weight:800;color:var(--vp-ph-text)}
.vp-ph.ph1{background:var(--vp-ph1)}.vp-ph.ph2{background:var(--vp-ph2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.vp-ph.ph3{background:var(--vp-ph3);color:var(--vp-ph2)}
.vp-zaehler{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.vp-zaehler .z{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--paper)}
.vp-zaehler .z .i{width:15px;height:15px}
.z.err{color:var(--err);background:var(--err-bg)}.z.warn{color:var(--warn);background:var(--warn-bg)}.z.ok{color:var(--ok);background:var(--ok-bg)}.z.info{color:var(--vp-akz);background:var(--vp-akz-bg)}
.vp-kurz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.vp-kurz button{display:flex;gap:7px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;color:var(--ink);font-family:inherit;font-size:13px;padding:5px 6px;border-radius:8px;cursor:pointer;line-height:1.35}
.vp-kurz button:hover{background:var(--paper)}
.vp-kurz .i{width:16px;height:16px;margin-top:1px}
.vp-kurz .err .i{color:var(--err)}.vp-kurz .warn .i{color:var(--warn)}.vp-kurz .info .i{color:var(--vp-akz)}

/* Reiter */
.vp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px -4px 14px;padding:0 2px;overflow-x:auto;scrollbar-width:none}
.vp-tabs button{border:0;background:none;color:var(--muted);font-family:inherit;font-size:14.5px;font-weight:700;padding:9px 12px 10px;border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap}
.vp-tabs button:hover{color:var(--ink)}
.vp-tabs button[aria-selected="true"]{color:var(--vp-akz);border-bottom-color:var(--vp-akz)}
.vp-befunde{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px}
.vp-befunde li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px 12px;border-radius:11px;background:var(--paper);border-left:4px solid var(--soft);font-size:13.5px;line-height:1.45}
.vp-befunde li p{margin:0}
.vp-befunde li .i{width:18px;height:18px;margin-top:1px}
.vp-befunde li.ok{border-left-color:var(--ok)}.vp-befunde li.ok>.i{color:var(--ok)}
.vp-befunde li.info{border-left-color:var(--vp-akz)}.vp-befunde li.info>.i{color:var(--vp-akz)}
.vp-befunde li.warn{border-left-color:var(--warn);background:var(--warn-bg)}.vp-befunde li.warn>.i{color:var(--warn)}
.vp-befunde li.err{border-left-color:var(--err);background:var(--err-bg)}.vp-befunde li.err>.i{color:var(--err)}
.vp-thema{font-size:11px;font-weight:700;color:var(--soft);margin-left:4px}
.vp-quelle{font-size:11.5px;color:var(--soft);margin-top:2px!important}
.vp-fuss-hinweis{margin-top:12px}
.vp-tabelle-rahmen{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.vp-tabelle{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.vp-tabelle th{background:var(--raised-2,var(--paper));text-align:left;font-size:12px;font-weight:750;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
.vp-tabelle td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.vp-tabelle tbody tr:nth-child(even){background:var(--zebra)}
.vp-tabelle tr:last-child td{border-bottom:0}
.vp-tabelle .z{text-align:right;white-space:nowrap}
.vp-tabelle tr.gruppe td{background:var(--paper);font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.vp-tabelle tr.klickbar{cursor:pointer}
.vp-tabelle tr.klickbar:hover{background:var(--blue-soft)}
.vp-tabelle td.st .i{width:16px;height:16px}
.vp-tabelle td.st.ok{color:var(--ok)}.vp-tabelle td.st.warn{color:var(--warn)}.vp-tabelle td.st.err{color:var(--err)}
.vp-tabelle td.kz{color:var(--soft);font-size:12.5px}
.vp-tabs-karte>.leise,#vp-tab>.leise{margin-top:8px}
.vp-leiter{display:inline-block;min-width:30px;text-align:center;border-radius:6px;padding:0 6px;font-size:12px;font-weight:800;background:#c3c8cf;color:#18212f}
.vp-leiter.n{background:#6fa8dc}.vp-leiter.pe{background:repeating-linear-gradient(135deg,#d4c83a 0 5px,#3f8a4a 5px 9px);color:#18212f;text-shadow:0 0 2px #fff}
.vp-klemmstreifen{border-radius:12px;padding:12px;overflow-x:auto;margin-bottom:10px;background:linear-gradient(180deg,#eceff4,#e3e7ee)}
.vp-klemmstreifen svg{display:block;height:auto}
.vp-kl-summe{margin:0 0 10px;font-size:13.5px}
.vp-weiter{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.vp-weiter-karte{border:1px solid var(--line);border-radius:13px;padding:14px;background:var(--raised);box-shadow:var(--glanz,none)}
.vp-weiter-karte p{margin:6px 0 12px;font-size:13.5px;color:var(--muted);line-height:1.45}
.vp-weiter-karte .knopf{margin:0 6px 6px 0}

/* Hinweis unten */
.vp-hinweis{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:var(--navy,#0a1540);color:#fff;font-size:14px;box-shadow:var(--schatten-gross,0 10px 30px rgba(10,21,64,.3));z-index:60;max-width:calc(100vw - 32px)}
.vp-hinweis.an{transform:translate(-50%,0)}
.vp-hinweis .knopf{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}

/* Druck (nur Druck) */
.vp-druck{display:none}

/* Tablet und Handy */
@media (max-width:1320px){
  .vp-raster{grid-template-columns:214px minmax(0,1fr) 312px}
}
@media (max-width:1120px){
  .vp-raster{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"pal pal" "board rechts" "tabs rechts";grid-template-rows:auto auto 1fr}
  .vp-palette{position:static;max-height:none;overflow:visible;padding:10px}
  #vp-pal{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .vp-pal-gruppe{flex:none;margin:0}
  .vp-pal-liste{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:3px}
  .vp-pal{width:200px}
}
@media (max-width:820px){
  .vp-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"pal" "board" "rechts" "tabs";grid-template-rows:none}
  .vp-rechts{position:static;max-height:none;overflow:visible}
  .vp-pal{width:204px;grid-template-columns:38px minmax(0,1fr) auto}
  .vp-board{padding:8px}
  .vp-befunde{grid-template-columns:1fr}
}
@media (max-width:520px){
  .vp-kz{grid-template-columns:1fr 1fr}
  .vp-eig-werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-werkzeuge{width:100%}
  .vp-vorlage{flex:1}
  .vp-vorlage select{min-width:0}
  .vp-einst-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-befunde li{grid-template-columns:20px minmax(0,1fr)}
  .vp-befunde li .knopf{grid-column:2;justify-self:start}
}

@page{size:A4 portrait;margin:10mm}
@media print{
  html,body{background:#fff!important}
  .kopf,.fuss,.no-print,#vp-hinweis{display:none!important}
  .vp{padding:0;max-width:none;margin:0}
  .vp-druck{display:block;color:#0a1540;font-size:9pt}
  .dr-seite{break-after:page}
  .dr-seite:last-child{break-after:auto}
  .dr-kopf{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #0a1540;padding-bottom:5px;margin-bottom:8px;font-size:9pt}
  .dr-kopf b{font-size:14pt}
  .dr-board{display:flex;justify-content:center;margin:4mm 0}
  .dr-board .vp-svg{max-width:100%;max-height:150mm;width:auto}
  .dr-kz{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font-size:9pt}
  .dr-kz p{margin:0}
  .vp-druck h2{font-size:12pt;margin:6mm 0 2mm}
  .vp-befunde{grid-template-columns:1fr 1fr;gap:4px}
  .vp-befunde li{padding:5px 7px;font-size:8.5pt;break-inside:avoid;background:#fff!important;border:1px solid #cfd5dd;border-left-width:3px}
  .vp-tabelle-rahmen{border:0;overflow:visible}
  .vp-tabelle{font-size:8.5pt}
  .vp-tabelle th{background:#eef1f8;color:#0a1540;position:static}
  .vp-tabelle th,.vp-tabelle td{border:1px solid #b9c0ca;padding:3px 5px}
  .vp-druck .leise{color:#5e6a77;font-size:8pt}
  .gr-strom{color:#af3d36}.gr-spannung{color:#2855ad}.gr-leistung{color:#6c489a}.gr-wid{color:#447838}.gr-temp{color:#aa4673}
}
@media (prefers-reduced-motion:no-preference){
  .knopf,.vp-pal,.vp-reihe-knopf,.vp-tabs button{transition:border-color .15s,background-color .15s,color .15s}
  .vp-ablage{transition:opacity .15s,transform .15s}
  .vp-hinweis{transition:transform .25s}
}
@media (prefers-reduced-motion:reduce){.vp-balken i{transition:none}}
.vp-gut{margin-top:12px}
.vp-gut>summary{cursor:pointer;font-weight:700;padding:8px 2px;color:var(--muted);list-style-position:inside}
.vp-gut>summary:focus-visible{outline:2px solid var(--vp-akz);outline-offset:2px;border-radius:6px}
.vp-alles-ok{font-weight:700;margin:4px 0 8px}