/* Werkzeug Pro – Bausteine, die auch in /helfer/ und /formeln/ geladen werden (Knopf, Dialog, Hinweise, Projektleiste),
   und die Farbwerte aller Pro-Seiten. Die Seiten selbst stehen in pro.css, das Protokoll in protokoll.css.
   Hell/Dunkel: die --p-* Werte lesen die gemeinsamen Werte aus /assets/thema.css (--ink, --raised …), mit den hellen
   Standardwerten als Rückfall; Fachgrafiken und das Protokollblatt bleiben auf heller Papier-Karte (.p-papier).
   Alle Klassen beginnen mit pro-/p-, damit nichts mit helfer.css oder formeln.css kollidiert. Farben der Größen nur über --c-*. */
@font-face{font-family:"Archivo";src:url("/fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --p-paper:var(--paper,#f3f5fa);--p-raised:var(--raised,#fff);--p-line:var(--line,#dbe1ee);--p-line-2:var(--line-2,#c3cbe0);
  --p-ink:var(--ink,#0a1540);--p-muted:var(--muted,#4f5a7d);--p-soft:var(--soft,#5d6788);
  --p-navy:var(--navy,#0a1540);--p-navy-2:var(--navy-2,#14215a);--p-blue:var(--blue,#1f3fe0);--p-blue-hover:var(--blue-hover,#1733c4);
  --p-blue-soft:var(--blue-soft,#e6ebff);--p-blue-rand:var(--info-rand,#c9d3ff);--p-auf-blau:var(--auf-blau,#fff);--p-volt:#c4ff1a;--p-auf-volt:#0a1540;
  --p-ok:var(--ok,#2f7a45);--p-ok-bg:var(--ok-bg,#e7f6ec);--p-warn:var(--warn,#8a5a00);--p-warn-bg:var(--warn-bg,#fff1cc);
  --p-err:var(--err,#b3202a);--p-err-bg:var(--err-bg,#ffe4e5);--p-err-rand:var(--err-rand,#f0b9bd);
  --p-el:var(--el,#2c47d8);--p-el-bg:var(--el-bg,#e8edff);--p-wg:var(--wg,#0c7c74);--p-wg-bg:var(--wg-bg,#dcf3ef);--p-gr:var(--gr,#6a48cf);--p-gr-bg:var(--gr-bg,#eee9ff);
  --p-spur:#e4e8f3;--p-aus:#a3abc4;--p-volt-flaeche:#f6ffd9;--p-volt-rand:#d5ef85;--p-volt-zelle:#f8ffe6;--p-tisch:#d9dde8;
  --p-font:"Archivo","Segoe UI",system-ui,sans-serif;--p-focus:var(--focus,0 0 0 2px #fff,0 0 0 4px #1f3fe0);
  --p-schatten:0 1px 2px rgba(10,21,64,.06),0 8px 24px rgba(10,21,64,.07);--p-schatten-gross:0 30px 80px rgba(10,21,64,.35);
  --p-ease:cubic-bezier(.2,.8,.2,1)}
/* Dunkel: nur die Werte, die es in thema.css nicht gibt (mit JS über data-theme, ohne JS über die Systemeinstellung) */
:root[data-theme="dark"]{--p-spur:#273150;--p-aus:#5f6a8f;--p-volt-flaeche:#1b2611;--p-volt-rand:#46601a;--p-volt-zelle:#161f10;--p-tisch:#070b16;
  --p-schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);--p-schatten-gross:0 30px 80px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--p-spur:#273150;--p-aus:#5f6a8f;--p-volt-flaeche:#1b2611;--p-volt-rand:#46601a;--p-volt-zelle:#161f10;--p-tisch:#070b16;
  --p-schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);--p-schatten-gross:0 30px 80px rgba(0,0,0,.6)}}
@media print{:root[data-theme="dark"],:root:not([data-theme="light"]){--p-spur:#e4e8f3;--p-aus:#a3abc4;--p-volt-flaeche:#f6ffd9;--p-volt-rand:#d5ef85;--p-volt-zelle:#f8ffe6;--p-tisch:#fff}}
/* Helle Papier-Karte (Protokollblatt, Bühnenblatt): immer helle Werte, auch im Dunkelmodus */
.p-papier{color-scheme:light;
  --p-paper:#f3f5fa;--p-raised:#fff;--p-line:#dbe1ee;--p-line-2:#c3cbe0;--p-ink:#0a1540;--p-muted:#4f5a7d;--p-soft:#5d6788;
  --p-navy:#0a1540;--p-blue:#1f3fe0;--p-blue-soft:#e6ebff;--p-auf-blau:#fff;--p-ok:#2f7a45;--p-warn:#8a5a00;--p-err:#b3202a;--p-spur:#e4e8f3;--p-aus:#a3abc4;
  --p-volt-flaeche:#f6ffd9;--p-volt-rand:#d5ef85;
  --c-strom:var(--c-strom-papier,#af3d36);--c-spannung:var(--c-spannung-papier,#2855ad);--c-leistung:var(--c-leistung-papier,#6c489a);--c-widerstand:var(--c-widerstand-papier,#447838);
  --c-volumenstrom:var(--c-volumenstrom-papier,#247885);--c-druck:var(--c-druck-papier,#a3621c);--c-temperatur:var(--c-temperatur-papier,#aa4673);
  --c-neutral1:var(--c-neutral1-papier,#364452);--c-neutral2:var(--c-neutral2-papier,#5e6a77);--c-neutral3:var(--c-neutral3-papier,#6b7580)}

/* ---------- Bausteine (überall) ---------- */
.pro-marke{display:inline-flex;align-items:center;justify-content:center;font:800 11px/1 var(--p-font);font-stretch:118%;letter-spacing:.06em;text-transform:uppercase;color:var(--p-auf-volt);background:var(--p-volt);border-radius:6px;padding:4px 7px 3px}
.pro-marke.klein{font-size:9.5px;padding:3px 5px 2px;border-radius:5px}
.pro-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:600 14px var(--p-font);border-radius:9px;padding:8px 13px;border:1px solid #9fb52a;background:var(--p-volt);color:var(--p-auf-volt);transition:transform .15s var(--p-ease),box-shadow .15s}
.pro-btn:hover{box-shadow:0 4px 14px rgba(124,160,0,.35);transform:translateY(-1px)}
.pro-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pro-btn-fs{margin-left:8px;height:38px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 14px var(--p-font);color:var(--p-ink);background:var(--p-raised);border:1px solid var(--p-line-2);border-radius:10px;padding:9px 15px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .15s var(--p-ease);white-space:nowrap}
.pbtn:hover{border-color:var(--p-ink)}.pbtn:active{transform:scale(.98)}
.pbtn.pri{background:var(--p-blue);border-color:var(--p-blue);color:var(--p-auf-blau)}.pbtn.pri:hover{background:var(--p-blue-hover);border-color:var(--p-blue-hover)}
.pbtn.volt{background:var(--p-volt);border-color:#9fb52a;color:var(--p-auf-volt)}.pbtn.volt:hover{background:#d6ff5c}
.pbtn.leise{background:transparent;border-color:transparent;color:var(--p-muted)}.pbtn.leise:hover{background:var(--p-paper);color:var(--p-ink)}
.pbtn.gefahr{color:var(--p-err);border-color:var(--p-err-rand)}.pbtn.gefahr:hover{background:var(--p-err-bg)}
.pbtn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.pbtn svg,.p-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pbtn:focus-visible,.pro-btn:focus-visible,.pfeld input:focus-visible,.pfeld select:focus-visible,.pfeld textarea:focus-visible{outline:none;box-shadow:var(--p-focus)}

/* Hinweise unten */
.pro-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:1000;pointer-events:none}
.pro-toast-eintrag{font:500 14px var(--p-font);background:var(--p-navy);color:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(10,21,64,.3),inset 0 0 0 1px var(--navy-rand,transparent);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s var(--p-ease);max-width:min(560px,calc(100vw - 32px))}
.pro-toast-eintrag.an{opacity:1;transform:none}
.pro-toast-eintrag.ok{border-left:4px solid var(--p-volt)}.pro-toast-eintrag.err{border-left:4px solid #ff5a64}

/* Dialog */
.pro-dialog{border:0;padding:0;border-radius:18px;width:min(480px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:var(--p-schatten-gross),inset 0 0 0 1px var(--navy-rand,transparent);font:15px/1.5 var(--p-font);color:var(--p-ink);background:var(--p-raised)}
.pro-dialog.breit{width:min(680px,calc(100vw - 24px))}
.pro-dialog::backdrop{background:rgba(10,21,64,.45);backdrop-filter:blur(3px)}
.pro-dialog[open]{animation:pro-auf .25s var(--p-ease)}
@keyframes pro-auf{from{opacity:0;transform:translateY(12px) scale(.98)}}
.pro-dialog-form{display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.pro-dialog header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 4px}
.pro-dialog h2{margin:0;font-size:19px;font-weight:750;font-stretch:112%;letter-spacing:-.01em}
.pro-x{border:0;background:none;font-size:26px;line-height:1;color:var(--p-soft);cursor:pointer;border-radius:8px;padding:0 8px 2px}.pro-x:hover{background:var(--p-paper);color:var(--p-ink)}
.pro-dialog-inhalt{padding:8px 22px 6px;overflow:auto}
.pro-dialog-inhalt>p{margin:0 0 10px;color:var(--p-muted)}
.pro-dialog footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 22px 18px}
.pfeld{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.pfeld>span{font-size:13px;font-weight:600}.pfeld i{font-style:normal;font-weight:400;color:var(--p-soft)}
.pfeld input,.pfeld select,.pfeld textarea{font:inherit;color:inherit;padding:9px 11px;border:1px solid var(--p-line-2);border-radius:10px;background:var(--p-raised);width:100%;min-width:0}
.pfeld textarea{resize:vertical}
.pzwei{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pro-vorschau{background:linear-gradient(125deg,#2238c4,#2f4de6 55%,#4f6bff);color:#fff;border-radius:14px;padding:14px 16px;margin:4px 0 14px;display:flex;flex-direction:column}
.pro-vorschau .pro-vk{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#c9d3ff;font-weight:600}
.pro-vorschau b{font-size:28px;font-weight:750;font-stretch:118%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.pro-vorschau b small{font-size:14px;font-weight:500;color:#e3e8ff}
.pro-vorschau>span:last-child{font-size:13px;color:#dfe5ff}
.pro-hinweis{font-size:13.5px;background:var(--p-blue-soft);border-radius:10px;padding:9px 12px;margin:0 0 12px}
.pro-frei{font-size:12.5px;color:var(--p-muted);margin:2px 0 0}
.pro-upsell{text-align:left}.pro-upsell>p{color:var(--p-muted);margin:12px 0}
.pro-haken{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.pro-haken li{padding-left:28px;position:relative;font-weight:550}
.pro-haken li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--p-volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230a1540' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pro-preis{font-size:14px;color:var(--p-muted)}.pro-preis b{font-size:20px;color:var(--p-ink)}

/* Projektleiste in Helfern und Formeln */
.pro-leiste{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:9px;max-width:min(360px,calc(100vw - 36px));background:var(--p-navy);color:#fff;text-decoration:none;font:600 13.5px var(--p-font);padding:9px 10px 9px 12px;border-radius:99px;box-shadow:0 10px 30px rgba(10,21,64,.3),inset 0 0 0 1px var(--navy-rand,transparent);transition:transform .2s var(--p-ease)}
.pro-leiste:hover{transform:translateY(-2px)}
.pro-leiste .pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pro-leiste .pl-zahl{min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-variant-numeric:tabular-nums}
.pro-bearb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px 10px 14px;border-radius:12px;background:var(--p-volt-flaeche);border:1px solid var(--p-volt-rand);font:14px var(--p-font);color:var(--p-ink)}
.pro-bearb>span:nth-child(2){flex:1;min-width:200px}
.pro-bearb a{font-weight:600}.pro-bearb button{border:0;background:none;font-size:20px;cursor:pointer;color:var(--p-soft);border-radius:6px;padding:0 6px}
@media print{.pro-leiste,.pro-btn,.pro-bearb,.pro-toast{display:none!important}}


/* „Abo startet in Kürze“ – solange das Produkt „pro“ nicht im Angebot ist */
.pro-bald{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1.2 var(--p-font);color:var(--p-ink);background:var(--p-volt-flaeche);border:1px solid var(--p-volt-rand);border-radius:99px;padding:4px 10px 4px 8px;white-space:nowrap}
.pro-bald::before{content:"";width:7px;height:7px;border-radius:50%;background:#8fb300;box-shadow:0 0 0 3px rgba(159,181,42,.22);animation:pro-puls 2.2s ease-in-out infinite;flex:none}
@keyframes pro-puls{50%{opacity:.35}}
.pro-bald-text{font-size:13.5px;color:var(--p-muted);margin:10px 0 0}
@media (prefers-reduced-motion:reduce){.pro-bald::before{animation:none}}
@media (max-width:560px){.pro-btn-fs{margin-left:0}}