/* Workflows (#workflows): Liste · Arbeitsfläche · Seitenleiste. Touch: große Anschlüsse, touch-action:none auf der Fläche. */
.wfv{height:100%;min-height:0}
.wf{height:100%;display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:14px;min-height:0}
.wf-list,.wf-side{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wf-list{padding:16px 12px}
.wf-lh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 4px 10px}
.wf-lh h2{font-family:var(--f-display);font-weight:500;font-size:20px;margin:4px 0 0}
.wf-items{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:60px;flex:0 1 auto}
.wf-item{position:relative;text-align:left;padding:10px 26px 10px 12px;border-radius:12px;border:1px solid transparent;display:flex;flex-direction:column;gap:2px}
.wf-item b{font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-item small{color:var(--dim);font-size:11.5px}
.wf-item:hover{background:var(--glass2)}
.wf-item.on{background:var(--glass2);border-color:var(--line2)}
.wf-led{position:absolute;right:10px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.wf-led.done{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.wf-led.error{background:var(--bad)}
.wf-led.running{background:var(--c1);animation:wfPulse 1.2s infinite}
.wf-led.interrupted,.wf-led.cancelled{background:var(--warn)}
.wf-auto{display:inline-flex;align-items:center;gap:4px;color:var(--c1)}
.wf-auto.bad{color:var(--bad)}
/* Auslöser */
.wf-master{padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.wf-tsec{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.wf-tsec .eyebrow{display:flex;align-items:center;gap:6px}
.wf-tsec .field{margin:0}
.wf-inl{display:flex;align-items:center;gap:8px;flex-direction:row}
.wf-inl .inp{width:auto;flex:0 1 130px}
.wf-days{display:flex;gap:6px;flex-wrap:wrap}
.wf-days .chip{min-width:40px;min-height:36px;justify-content:center}
.wf-tinfo{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.06)}
.wf-tinfo div{display:flex;flex-direction:column;gap:2px}
.wf-tinfo small{color:var(--dim);font-size:11.5px}
.wf-tinfo .bad{margin:0}
.wf-tl{margin:16px 4px 8px}
.wf-tpls{display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1 1 auto;min-height:0}
.wf-tpl{text-align:left;padding:10px 12px;border-radius:12px;border:1px dashed var(--line2);display:flex;flex-direction:column;gap:3px;transition:.15s}
.wf-tpl b{font-weight:500;font-size:13px}
.wf-tpl small{color:var(--muted);font-size:11.5px;line-height:1.35}
.wf-tpl:hover{border-style:solid;background:var(--glass2)}

.wf-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.wf-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wf-name{font-family:var(--f-display);font-size:16px;font-weight:500;background:transparent;border:1px solid transparent;border-radius:9px;padding:6px 8px;min-width:0;flex:0 1 320px;color:var(--fg);outline:0}
.wf-name:hover{border-color:var(--line)}
.wf-name:focus{border-color:var(--c1);background:var(--bg2)}
.wf-sp{flex:1}
.wf-bar .btn.sm{padding:6px 10px;font-size:12.5px}
.wf-stage{flex:1;min-height:0;position:relative}
.wf-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:30px;color:var(--muted)}
.wf-empty h3{font-family:var(--f-display);font-weight:500;color:var(--fg);margin:6px 0 0}
.wf-empty p{max-width:46ch;margin:0}

.wf-canvas{position:absolute;inset:0;overflow:hidden;touch-action:none;outline:0;cursor:grab;
  background-image:radial-gradient(circle,rgba(170,190,255,.13) 1px,transparent 1.2px);background-size:24px 24px}
.wf-canvas:active{cursor:grabbing}
.wf-layer{position:absolute;left:0;top:0;transform-origin:0 0}
.wf-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wf-edge{pointer-events:auto;cursor:pointer}
.wf-edge .hit{fill:none;stroke:transparent;stroke-width:16}
.wf-edge .ln{fill:none;stroke-width:2;opacity:.75;transition:opacity .15s}
.wf-edge:hover .ln{opacity:1;stroke-width:2.6}
.wf-edge.sel .ln{opacity:1;stroke-width:3;filter:drop-shadow(0 0 6px currentColor)}
.wf-edge.flow .ln{stroke-dasharray:6 6;animation:wfDash 1s linear infinite}
.wf-temp{fill:none;stroke-width:2;stroke-dasharray:5 5;opacity:.9}
.wf-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.wf-zoom .iconbtn{width:36px;height:36px;background:rgba(10,14,23,.85)}
.wf-hint{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);color:var(--muted);text-align:center;max-width:34ch;pointer-events:none}

.wf-node{position:absolute;width:228px;border-radius:14px;background:rgba(12,16,27,.92);border:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.35);user-select:none;-webkit-user-select:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.wf-node::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;border-radius:2px;background:var(--gc);opacity:.8}
.wf-node.sel{border-color:var(--c1);box-shadow:0 0 0 3px rgba(120,240,255,.15),0 10px 30px rgba(0,0,0,.35)}
.wf-nh{display:flex;align-items:center;gap:8px;padding:10px 12px 4px}
.wf-nh .i{color:var(--gc);flex:none}
.wf-nh b{font-weight:500;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-nt{padding:0 12px;font-size:10.5px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.04em}
.wf-st{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:none}
.st-running .wf-st,.wf-step.running .wf-st{background:var(--c1);animation:wfPulse 1s infinite}
.st-done .wf-st,.wf-step.done .wf-st{background:var(--ok)}
.st-error .wf-st,.wf-step.error .wf-st{background:var(--bad)}
.st-skipped .wf-st,.wf-step.skipped .wf-st{background:var(--dim)}
.wf-node.st-running{border-color:rgba(120,240,255,.6)}
.wf-node.st-error{border-color:rgba(255,111,134,.7)}
.wf-node.st-skipped{opacity:.55}
.wf-ports{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 0 10px}
.wf-ports>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.wf-port{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--muted);min-height:26px;position:relative;cursor:crosshair}
.wf-port span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-port em{font-style:normal;color:var(--dim);font-size:10px}
.wf-port.in{padding-left:2px}
.wf-port.out{flex-direction:row-reverse;padding-right:2px;text-align:right}
.wf-port .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--pc);background:var(--bg);flex:none;margin:0 -7px;transition:transform .12s}
.wf-port::after{content:"";position:absolute;top:-4px;bottom:-4px;width:30px}   /* größere Trefferfläche für Finger */
.wf-port.in::after{left:-16px}
.wf-port.out::after{right:-16px}
.wf-port:hover .dot,.wf-port.ok .dot{transform:scale(1.35);background:var(--pc)}
.wf-port.no{opacity:.35}
.wf-nd{margin:0 10px 10px;padding:6px 8px;border-radius:8px;background:var(--glass2);font-size:11px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-error .wf-nd{color:var(--bad)}

.wf-side{padding:12px}
.wf-tabs{display:flex;gap:5px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.wf-tabs::-webkit-scrollbar{display:none}
.wf-tabs .chip{padding:6px 4px;font-size:12px;flex:1 0 auto;justify-content:center;white-space:nowrap}
.wf-tabs .iconbtn{flex:none}
.wf-tabs .iconbtn{margin-left:auto}
.wf-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c1);margin-left:4px;animation:wfPulse 1s infinite}
.wf-sb{flex:1;min-height:0;overflow:auto;padding:12px 2px 6px;display:flex;flex-direction:column;gap:12px}
.wf-sb .btn,.wf-res .btn,.wf-runst .btn{flex:none}
.wf-sb .navrow .btn{flex:1}
.wf-pg{display:flex;flex-direction:column;gap:5px}
.wf-pal{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 10px;border-radius:11px;border:1px solid var(--line);transition:.15s}
.wf-pal .i{color:var(--gc);margin-top:2px;flex:none}
.wf-pal span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wf-pal b{font-weight:500;font-size:13px}
.wf-pal small{color:var(--dim);font-size:11.5px;line-height:1.35}
.wf-pal:hover{border-color:var(--line2);background:var(--glass2)}
.wf-ph{display:flex;align-items:center;gap:8px;margin:0}
.wf-ph .i{color:var(--gc)}
.wf-ph h3,h3.wf-ph{font-family:var(--f-display);font-weight:500;font-size:16px;margin:0}
.wf-ta{font-family:var(--f-body);font-size:13px;line-height:1.45;resize:vertical}
.wf-ports-info{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-ports-info small{display:block;color:var(--dim);font-size:11px;margin-bottom:4px}
.wf-pt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.wf-pt i{width:8px;height:8px;border-radius:50%;background:var(--pc);flex:none}
.wf-res{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.wf-pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--f-mono);font-size:11.5px;line-height:1.5;color:var(--fg);
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;max-height:320px;overflow:auto}
.wf-pre.sm{max-height:120px}
.wf-files{display:flex;flex-wrap:wrap;gap:6px}
.wf-file{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 9px;border-radius:8px;border:1px solid var(--line);color:var(--muted)}
.wf-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
.wf-thumbs figure{margin:0;display:flex;flex-direction:column;gap:3px}
.wf-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.wf-thumbs figcaption{font-size:10.5px;color:var(--dim);font-family:var(--f-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-det summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.wf-fl{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto;padding:8px 0}
.wf-runst{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--line)}
.wf-runst.done{border-color:rgba(93,240,166,.4)}
.wf-runst.error{border-color:rgba(255,111,134,.5)}
.wf-runst .bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.wf-runst .bar i{display:block;height:100%;background:var(--holo);transition:width .3s}
.wf-steps{display:flex;flex-direction:column;gap:4px}
.wf-step{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;text-align:left;padding:7px 9px;border-radius:9px}
.wf-step:hover{background:var(--glass2)}
.wf-step b{font-weight:500;font-size:12.5px}
.wf-step small{grid-column:2;color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-step.error small{color:var(--bad)}
.wf-approve{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid rgba(255,209,102,.45);background:rgba(255,209,102,.05)}
.wf-approve p{margin:0;color:var(--muted);font-size:12.5px}
.wf-side .bad,.wf-res .bad{color:var(--bad);margin:0;font-size:12.5px}
.wf-menu{position:fixed;z-index:80;display:flex;flex-direction:column;padding:6px;min-width:210px;background:rgba(12,16,27,.97)}
.wf-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13px;text-align:left}
.wf-menu button:hover{background:var(--glass2)}
.wf-menu button.bad{color:var(--bad)}
.wf-only-m{display:none!important}

@keyframes wfPulse{50%{opacity:.35}}
@keyframes wfDash{to{stroke-dashoffset:-12}}

@media (max-width:1180px){.wf{grid-template-columns:200px minmax(0,1fr) 290px}}
@media (max-width:980px){
  .wf{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr)}
  .wf-list{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;padding:8px 10px;overflow-x:auto}
  .wf-lh{padding:0;flex:none}.wf-lh .eyebrow{display:none}.wf-lh h2{font-size:15px;margin:0}
  .wf-items{flex-direction:row;overflow:visible;min-height:0}
  .wf-item{flex:none;padding:6px 24px 6px 10px}.wf-item small{display:none}.wf-led{top:12px}
  .wf-tl{margin:0;flex:none}.wf-tpls{flex-direction:row;overflow:visible;flex:none}
  .wf-tpl{flex:none;padding:6px 10px}.wf-tpl small{display:none}
}
@media (max-width:820px){
  .wf{grid-template-columns:minmax(0,1fr);gap:8px}
  .wf-only-m{display:inline-flex!important}
  .wf-side{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:72vh;border-radius:18px 18px 0 0;transform:translateY(105%);
    transition:transform .25s ease;background:rgba(10,13,22,.97);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wf-side.open{transform:none;box-shadow:0 -20px 50px rgba(0,0,0,.5)}
  .wf-bar{padding:8px;gap:6px;justify-content:flex-end}
  .wf-name{flex:1 1 100%;order:-1}
  #wfSave,#wfFit,.wf-sp{display:none}
  .wf-bar .btn{padding:8px 12px}
  .wf-port{min-height:32px}
  .wf-port .dot{width:14px;height:14px}
  .wf-pal,.wf-step{min-height:44px}
}