/* StarBorder canvas layer adapted from React Bits, © 2026 David Haz.
   MIT + Commons Clause notice: /react-bits-LICENSE.md */
/* Homepage pill (preview-only): black pill for contrast, light text.
   Mic icons are plain white with no disc/background; coral reserved for the CTA chip. */
body #vf-launch.vf-pill{border-radius:999px!important;display:flex!important;align-items:center!important;gap:14px!important;line-height:1.4!important;font-weight:400!important;height:auto!important;max-height:none!important;min-height:72px!important;max-width:min(700px,calc(100vw - 28px))!important;padding:12px 12px 12px 16px!important;background:#0a0a0a!important;border:1px solid rgba(255,255,255,.14)!important;color:#f2f5f4!important;font-size:15px!important;isolation:isolate;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);opacity:0;animation:vf-pill-enter .5s ease .4s forwards}
body #vf-launch.vf-pill:hover{background:#161616!important;box-shadow:0 22px 60px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.28)}
body #vf-launch.vf-pill:focus-visible{outline:3px solid #fff!important;outline-offset:4px!important}
#vf-launch .star-border__light{position:absolute;top:-48px;left:-48px;z-index:-1;width:calc(100% + 96px);height:calc(100% + 96px);pointer-events:none}
body #vf-launch .vf-mini{display:flex!important;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;background:transparent!important;color:#fff!important;position:relative;overflow:visible}
body #vf-launch .vf-mini svg{flex:none}
body #vf-launch .vf-mini::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.35);animation:vf-mic-pulse 2.6s ease-out infinite;pointer-events:none}
body #vf-launch .vf-pill-text{flex:1 1 auto;text-align:left;white-space:normal;color:#f2f5f4}
body #vf-launch .vf-cta{display:inline-flex!important;align-items:center;gap:8px;flex:none;background:#F7931A!important;color:#fff!important;border-radius:999px!important;padding:11px 18px!important;font-size:14px;font-weight:800;white-space:nowrap}
body #vf-launch.vf-pill:hover .vf-cta{background:#E5830D!important}

@keyframes vf-pill-enter{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes vf-mic-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* Preview-only scroll CTA highlight. Pill hides on scroll; existing
   "Selbst testen" buttons gain a coral voice highlight. No layout shift:
   pill uses opacity/visibility only; highlight animates background + icon
   width (icon reserves vertical height, grows horizontally). */
body #vf-launch.vf-pill{transition:opacity .2s ease,visibility .2s!important}
body.vf-settled #vf-launch.vf-pill{animation:none!important;opacity:1}
body[data-vf-scrolled="1"] #vf-launch.vf-pill{opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}
body[data-vf-scrolled="1"]{padding-bottom:0!important}
@media(prefers-reduced-motion:reduce){body #vf-launch.vf-pill{transition:none!important}body[data-vf-scrolled="1"] #vf-launch.vf-pill{opacity:0!important;visibility:hidden!important}
a.jr-btn.vf-cta-highlight,a.jr-btn.vf-cta-highlight:hover{transition:none!important}
.vf-cta-highlight .vf-cta-mic{transition:none!important}}