/* ==========================================================================
   timemywork — Funktionen-Seite
   Struktur aus Marinas Baukasten-Entwurf, optisch an Richards Seite angeglichen
   (Poppins, Marken-Tokens, Eyebrows, Buttons, Screenshot-Rahmen).
   Jede Baustein-Farbe kommt als --tc aus data/features/*.yaml.
   ========================================================================== */

/* Abgeleitete Farbtöne je Element (müssen dort stehen, wo --tc gesetzt ist) */
.bz-sticker,.bz-mtile,.bz-board-lab,.bz-tile,.bz-panel,.bz-pn-btn{
  --c-soft:color-mix(in srgb,var(--tc) 11%,var(--surface));
  --c-line:color-mix(in srgb,var(--tc) 32%,var(--border));
  --c-ink:color-mix(in srgb,var(--tc) 72%,var(--text));
}
@keyframes bzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bzPop{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

/* ------------------------------ HERO ------------------------------ */
.bz-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,96px)}
.bz-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--brand) 16%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--brand) 16%,transparent) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.bz-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.bz-crumb{display:flex;gap:8px;font-size:.84rem;color:var(--text-muted);margin-bottom:22px}
.bz-crumb a{color:var(--brand);font-weight:500}
.bz-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.bz-hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);margin-bottom:20px}
.bz-mark{display:inline-block;padding:0 .16em;border-radius:.16em;color:#fff;background:linear-gradient(120deg,var(--brand),var(--teal))}
[data-theme="dark"] .bz-mark{color:#0B1218}
.bz-hero-groups{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

.bz-sticker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--c-ink);background:var(--c-soft);border:1px solid var(--c-line);
  transition:transform .15s,box-shadow .15s;
}
a.bz-sticker:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--tc) 60%,transparent)}
.bz-sticker.sm{padding:4px 11px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* Mosaik: 13 Bausteine, Stempeluhr groß */
.bz-mosaic{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:10px}
.bz-mtile{
  position:relative;z-index:1;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;
  border-radius:18px;background:var(--surface);border:1px solid var(--c-line);color:var(--tc);box-shadow:var(--shadow);
  animation:bzFloat 6s ease-in-out infinite;animation-delay:var(--d);transition:background .2s,color .2s,box-shadow .2s;
}
.bz-mtile svg{width:28px;height:28px}
.bz-mtile span{font-size:.72rem;font-weight:600;line-height:1.2;text-align:center;color:var(--text)}
.bz-mtile:hover{background:var(--tc);color:#fff;box-shadow:0 16px 34px -14px color-mix(in srgb,var(--tc) 65%,transparent);animation-play-state:paused}
.bz-mtile:hover span{color:#fff}
.bz-mtile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.bz-mtile:first-child svg{width:56px;height:56px}
.bz-mtile:first-child span{font-size:1rem}
.bz-mq{position:absolute;z-index:0;border-radius:6px}
.bz-mq.q1{width:22px;height:22px;top:-6px;right:14%;background:var(--teal)}
.bz-mq.q2{width:14px;height:14px;bottom:4%;left:-4px;background:var(--brand)}
.bz-mq.q3{width:30px;height:30px;bottom:-10px;right:-6px;background:var(--brand-light)}

/* ------------------------------ EXPLORER ------------------------------ */
.bz-exp{padding:clamp(64px,8vw,112px) 0;background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.bz-exp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:clamp(24px,3vw,36px)}
.bz-exp-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.bz-exp-head p{color:var(--text-muted);max-width:46ch}

.bz-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.bz-board-g{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.bz-board-lab{align-self:flex-start;margin:2px 4px 6px;font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c-ink);background:var(--c-soft);padding:3px 10px;border-radius:999px}
.bz-board-tiles{display:flex;flex-direction:column;gap:3px}
.bz-tile{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:11px;border:1px solid transparent;transition:background .15s,border-color .15s}
.bz-tile:hover{background:var(--c-soft)}
.bz-tile-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--c-soft);color:var(--tc);transition:background .15s,color .15s}
.bz-tile-ic svg{width:17px;height:17px}
.bz-tile-t{font-size:.86rem;font-weight:600;line-height:1.25}
.bz-tile.on{background:var(--c-soft);border-color:var(--c-line)}
.bz-tile.on .bz-tile-ic{background:var(--tc);color:#fff}

/* Detail-Panel: Text + Screenshot */
.bz-panels{display:grid;gap:22px}
.bz-panel{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,44px);align-items:start;
  padding:clamp(22px,3vw,36px);border-radius:22px;background:var(--surface);border:1px solid var(--c-line);box-shadow:var(--shadow-hover);
  scroll-margin-top:90px;
}
.bz-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--tc) 13%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tc) 13%,transparent) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 70%);
}
.bz-panel > *{position:relative}
/* Mit JS: nur das aktive Panel zeigen */
.bz-js .bz-panel{display:none}
.bz-js .bz-panel.on{display:grid;animation:bzPop .4s cubic-bezier(.22,.61,.36,1)}
/* Kopfbereich: links Titel + Pitch, rechts Häkchen-Liste */
.bz-panel{display:block}
.bz-js .bz-panel.on{display:block}
.bz-panel-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.bz-panel-copy{display:flex;flex-direction:column;gap:12px}
.bz-panel-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bz-panel-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--tc),color-mix(in srgb,var(--tc) 70%,#000));box-shadow:0 14px 30px -14px color-mix(in srgb,var(--tc) 65%,transparent)}
.bz-panel-ic svg{width:26px;height:26px}
.bz-tier{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.bz-kicker{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tc);margin-top:6px}
.bz-title{font-size:clamp(1.9rem,3.2vw,2.7rem);margin-top:-4px}
/* Pitch: kurz, groß, mit Farbakzent am Rand */
.bz-pitch{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text);padding-left:16px;border-left:4px solid var(--tc);text-wrap:balance}
.bz-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bz-points li{
  display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:13px;
  background:var(--c-soft);border:1px solid var(--c-line);font-size:.9rem;font-weight:600;line-height:1.3;
  transition:transform .18s,box-shadow .18s;
}
.bz-points li:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--tc) 70%,transparent)}
.bz-js .bz-panel.on .bz-points li{animation:bzPop .45s both}
.bz-js .bz-panel.on .bz-points li:nth-child(2){animation-delay:.05s}
.bz-js .bz-panel.on .bz-points li:nth-child(3){animation-delay:.1s}
.bz-js .bz-panel.on .bz-points li:nth-child(4){animation-delay:.15s}
.bz-js .bz-panel.on .bz-points li:nth-child(5){animation-delay:.2s}
.bz-js .bz-panel.on .bz-points li:nth-child(6){animation-delay:.25s}
.bz-points .ck{flex:none;width:24px;height:24px;border-radius:8px;background:var(--tc);color:#fff;display:grid;place-items:center}
.bz-points .ck svg{width:14px;height:14px;stroke-width:3}
.bz-desc{color:var(--text-muted);font-size:1rem;line-height:1.6;max-width:52ch}
.bz-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.bz-count{font-size:.8rem;font-weight:600;color:var(--text-muted);letter-spacing:.06em}
.btn-tool{background:var(--tc);color:#fff;box-shadow:0 10px 26px -12px var(--tc)}
.btn-tool:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px var(--tc);filter:brightness(1.05)}

/* Screenshot groß über die volle Panel-Breite; Klick öffnet die Vollansicht */
.bz-visual{margin-top:clamp(24px,3vw,36px)}
.bz-zoom{display:block;position:relative;width:100%;padding:0;border:none;background:none;cursor:zoom-in;text-align:left;border-radius:20px}
.bz-zoom:focus-visible{outline:3px solid var(--tc);outline-offset:4px}
.bz-zoom .shot{max-height:640px}
.bz-zoom-hint{
  position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;background:#0E1822;color:#fff;font-size:.82rem;font-weight:600;
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
}
.bz-zoom-hint svg{width:15px;height:15px}
.bz-zoom:hover .bz-zoom-hint,.bz-zoom:focus-visible .bz-zoom-hint{opacity:1;transform:none}
.bz-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.bz-pn-btn{display:grid;gap:2px;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);transition:border-color .15s,background .15s,box-shadow .15s}
.bz-pn-btn.next{text-align:right}
.bz-pn-btn .dir{font-size:.74rem;color:var(--text-muted)}
.bz-pn-btn b{font-size:.9rem;font-weight:600;color:var(--c-ink)}
.bz-pn-btn:hover{border-color:var(--c-line);background:var(--c-soft);box-shadow:0 14px 30px -16px color-mix(in srgb,var(--tc) 60%,transparent)}

/* Vollansicht (Lightbox) */
.bz-lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,4vw,48px);background:rgba(6,12,18,.86);backdrop-filter:blur(6px);cursor:zoom-out;animation:bzFade .2s ease}
.bz-lightbox img{max-width:100%;max-height:calc(100vh - 2*clamp(12px,4vw,48px));width:auto;height:auto;border-radius:14px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.bz-lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
@keyframes bzFade{from{opacity:0}to{opacity:1}}

/* Screenshot-Platzhalter (falls ein Bild fehlt) */
.ph{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--border);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tc) 9%,var(--surface)) 0 14px,color-mix(in srgb,var(--tc) 4%,var(--surface)) 14px 28px);box-shadow:var(--shadow)}
.ph .ph-top{position:absolute;top:0;left:0;right:0;height:42px;background:color-mix(in srgb,var(--tc) 14%,var(--surface));border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 16px}
.ph .ph-top i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--tc) 55%,var(--surface))}
.ph .ph-mark{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:20px;background:var(--tc);color:#fff;display:grid;place-items:center}
.ph .ph-mark svg{width:34px;height:34px}
.ph .ph-label{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:.74rem;color:var(--text-muted);background:var(--surface);padding:5px 12px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}

/* ------------------------------ ZUSAMMENSPIEL: Ablauf + Suite ------------------------------ */
.bz-flow{padding:clamp(64px,8vw,112px) 0}
.wf-steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
/* Verbindungslinie durch alle Schritte */
.wf-steps::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand-light),var(--brand) 45%,var(--teal))}
.wf-step{position:relative;display:flex;flex-direction:column;gap:6px}
.wf-node{
  position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:var(--surface);border:3px solid var(--brand);font-size:.82rem;font-weight:700;color:var(--brand);
  box-shadow:0 0 0 6px var(--bg);
}
.wf-step:last-child .wf-node{border-color:var(--teal);color:var(--teal)}
.wf-when{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.wf-step h3{font-size:1.05rem;line-height:1.25}
.wf-step p{font-size:.86rem;color:var(--text-muted);line-height:1.5}
.wf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wf-chip{
  --c-soft:color-mix(in srgb,var(--tc) 11%,var(--surface));--c-line:color-mix(in srgb,var(--tc) 32%,var(--border));
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border-radius:999px;
  font-size:.72rem;font-weight:600;background:var(--c-soft);border:1px solid var(--c-line);color:var(--text);transition:transform .15s;
}
.wf-chip svg{width:13px;height:13px;color:var(--tc)}
.wf-chip:hover{transform:translateY(-2px)}

/* Suite: Customers → TimeTracker → Planning, darunter ein Login */
.wf-suite{margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,34px);border-radius:24px;color:#F0FBF8;background:linear-gradient(150deg,#0D8686 0%,#0A6B6B 60%,#085757 100%);position:relative;overflow:hidden}
.wf-suite-h{font-size:1.15rem;margin-bottom:20px;color:#FFFFFF}
.wf-suite-grid{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"cust hub plan" "login login login";gap:16px;align-items:center}
.wf-customers{grid-area:cust}
.wf-planning{grid-area:plan}
.wf-login{grid-area:login;justify-self:center;max-width:560px}
.wf-hub{grid-area:hub;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 22px;border-radius:20px;background:var(--surface);color:var(--text);font-weight:700;font-size:.9rem;box-shadow:0 20px 50px -24px rgba(0,30,30,.7)}
.wf-hub .logo-mark{height:64px;width:auto}
.wf-node-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.wf-node-card b{display:block;font-size:1rem;color:#FFFFFF}
.wf-node-card p{font-size:.86rem;color:rgba(240,251,248,.82);margin-top:3px}
.wf-cube svg{width:40px;height:auto;flex:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.wf-dir{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.14);color:#CFF3F3;vertical-align:middle}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width:980px){
  .bz-hero-grid{grid-template-columns:minmax(0,1fr)}
  .bz-mosaic{max-width:520px;width:100%;margin-inline:auto}
  /* Board wird zur klebenden, horizontal scrollbaren Chip-Leiste */
  .bz-board{position:sticky;top:74px;z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -28px 18px;padding:10px 28px;background:color-mix(in srgb,var(--surface-2) 92%,transparent);backdrop-filter:blur(10px)}
  .bz-board::-webkit-scrollbar{display:none}
  .bz-board-g,.bz-board-tiles{display:contents}
  .bz-board-lab{display:none}
  .bz-tile{flex:none;padding:5px 12px 5px 5px;border-radius:999px;background:var(--surface);border-color:var(--border)}
  .bz-tile.on{border-color:var(--c-line);background:var(--c-soft)}
  .bz-tile-ic{width:26px;height:26px;border-radius:99px}
  .bz-tile-ic svg{width:15px;height:15px}
  .bz-tile-t{white-space:nowrap;font-size:.8rem}
  .bz-panel-top{grid-template-columns:minmax(0,1fr)}
  .wf-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .wf-steps::before{display:none}
  .wf-suite-grid{grid-template-columns:1fr;grid-template-areas:"cust" "hub" "plan" "login"}
  .wf-hub{flex-direction:row;justify-self:center}
  .wf-hub .logo-mark{height:40px}
}
@media (max-width:560px){
  .bz-hero h1{font-size:clamp(1.9rem,9.4vw,2.5rem)}
  .bz-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 0}
  .bz-mtile{padding:4px}
  .bz-mtile span{font-size:.66rem;overflow-wrap:anywhere;hyphens:auto}
  .bz-mtile:first-child span{font-size:1rem}
  .bz-mosaic .bz-mtile .tier-badge{right:-2px}
  .bz-mq.q2{left:4px}
  .bz-mq.q3{right:0}
  .bz-actions .btn{padding-inline:12px;font-size:.88rem;white-space:normal;text-align:center}
  .bz-mtile:first-child{grid-column:span 3;grid-row:auto;aspect-ratio:3/1;flex-direction:row}
  .bz-board{margin:0 -20px 18px;padding:10px 20px}
  .wf-steps{grid-template-columns:1fr;row-gap:22px}
  .bz-points{grid-template-columns:1fr}
  .bz-actions{flex-direction:column;align-items:stretch}
  .bz-pn{grid-template-columns:1fr}
  .bz-pn-btn.next{text-align:left}
  .bz-zoom .shot{max-height:420px}
}
@media (max-width:359px){.bz-board{margin:0 -16px 18px;padding:10px 16px}}
@media (prefers-reduced-motion:reduce){.bz-mtile{animation:none}.bz-js .bz-panel.on{animation:none}}

/* Editions-Badges in Mosaik und Board */
.bz-mtile .tier-badge{position:absolute;top:-9px;right:-6px;z-index:2}
.bz-mtile .tier-badge svg{width:11px;height:11px}
.bz-tile .tier-badge svg,.bz-panel-meta .tier-badge svg{width:12px;height:12px}
.bz-mtile:hover .tier-badge{box-shadow:none}
.bz-tile .tier-badge{margin-left:auto}
@media (max-width:980px){.bz-tile .tier-badge{margin-left:2px}}

/* ------------------------------ ABLAUF-ANIMATION ------------------------------ */
/* Leuchtspur läuft von links nach rechts; jeder Schritt leuchtet auf, wenn sie ihn erreicht.
   Startet per features.js (.wf-run), sobald der Abschnitt sichtbar ist. */
/* Spanne vom ersten bis zum letzten Knoten: 5 von 6 Spalten inkl. Lücken (gap 18px) */
.wf-steps{--wf-dur:9s;--wf-span:calc((100% + 18px) * 5 / 6)}
.wf-steps::before{background:var(--border);right:auto;width:var(--wf-span)}
.wf-steps::after{content:"";position:absolute;left:22px;top:21px;height:3px;border-radius:3px;width:0;
  background:linear-gradient(90deg,var(--brand-light),var(--brand) 45%,var(--teal));box-shadow:0 0 12px color-mix(in srgb,var(--brand) 60%,transparent)}
.wf-run.wf-steps::after{animation:wfFill var(--wf-dur) linear infinite}
@keyframes wfFill{0%{width:0;opacity:1}75%{width:var(--wf-span);opacity:1}90%{width:var(--wf-span);opacity:1}96%,100%{width:var(--wf-span);opacity:0}}
@keyframes wfLit0{0%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}5%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(1) .wf-node{animation:wfLit0 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(1) h3{animation:wfText0 var(--wf-dur) linear infinite}
@keyframes wfText0{0%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@keyframes wfLit1{0%,14.5%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}15%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}20%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(2) .wf-node{animation:wfLit1 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(2) h3{animation:wfText1 var(--wf-dur) linear infinite}
@keyframes wfText1{0%,14.5%{color:var(--text-muted)}15%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@keyframes wfLit2{0%,29.5%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}30%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}35%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(3) .wf-node{animation:wfLit2 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(3) h3{animation:wfText2 var(--wf-dur) linear infinite}
@keyframes wfText2{0%,29.5%{color:var(--text-muted)}30%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@keyframes wfLit3{0%,44.5%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}45%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}50%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(4) .wf-node{animation:wfLit3 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(4) h3{animation:wfText3 var(--wf-dur) linear infinite}
@keyframes wfText3{0%,44.5%{color:var(--text-muted)}45%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@keyframes wfLit4{0%,59.5%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}60%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}65%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(5) .wf-node{animation:wfLit4 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(5) h3{animation:wfText4 var(--wf-dur) linear infinite}
@keyframes wfText4{0%,59.5%{color:var(--text-muted)}60%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@keyframes wfLit5{0%,74.5%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}75%{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 6px var(--bg),0 0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}80%,90%{background:var(--brand);color:#fff;border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}96%,100%{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:none;box-shadow:0 0 0 6px var(--bg)}}
.wf-run .wf-step:nth-child(6) .wf-node{animation:wfLit5 var(--wf-dur) linear infinite}
.wf-run .wf-step:nth-child(6) h3{animation:wfText5 var(--wf-dur) linear infinite}
@keyframes wfText5{0%,74.5%{color:var(--text-muted)}75%,90%{color:var(--text)}96%,100%{color:var(--text-muted)}}
@media (max-width:980px){.wf-steps::after{display:none}}
@media (prefers-reduced-motion:reduce){.wf-run.wf-steps::after,.wf-run .wf-step .wf-node,.wf-run .wf-step h3{animation:none}.wf-steps::after{width:var(--wf-span)}}