/* ════════════════════════════════════════════════════════════════
   WebCV — Live-Demo overlay (/demo). Ergänzt published.css + Theme.
   Nur .wd-* Klassen → kein Konflikt mit dem gerenderten .wcv-* Site.
   ════════════════════════════════════════════════════════════════ */
.wd-root{min-height:100vh}
/* Platz für die schwebende Leiste, damit sie nichts überdeckt */
.wd-root .wcv-site{padding-bottom:5.5rem}
.wd-root .ws-foot{padding-bottom:6rem}   /* Website-Layout: Footer über der Leiste */

.wd-loading{min-height:60vh;display:flex;align-items:center;justify-content:center;
  color:#64748b;font-family:'Inter',system-ui,Arial,sans-serif;font-weight:600}

.wd-bar{
  position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:.9rem;
  max-width:calc(100vw - 1.6rem);
  padding:.55rem .6rem .55rem 1.1rem;border-radius:999px;
  font-family:'Inter',system-ui,Arial,sans-serif;
  background:rgba(12,14,26,.82);color:#f4f5fb;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px -12px rgba(10,12,26,.6),0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
}
.wd-bar-tag{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#c7ccff;white-space:nowrap}
.wd-bar-dot{width:8px;height:8px;border-radius:50%;background:#818cf8;
  box-shadow:0 0 0 4px rgba(129,140,248,.25);animation:wd-pulse 2.4s ease-out infinite}
@keyframes wd-pulse{0%{box-shadow:0 0 0 0 rgba(129,140,248,.5)}70%,100%{box-shadow:0 0 0 9px rgba(129,140,248,0)}}
@media (prefers-reduced-motion:reduce){.wd-bar-dot{animation:none}}
.wd-bar-txt{font-size:.9rem;color:rgba(244,245,251,.82);white-space:nowrap}
.wd-bar-txt b{color:#fff;font-weight:700}
.wd-bar-cta{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
  padding:.6rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 8px 20px -6px rgba(99,102,241,.6);
  transition:transform .16s,box-shadow .16s}
.wd-bar-cta svg{width:1.05em;height:1.05em}
.wd-bar-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -6px rgba(99,102,241,.75)}
.wd-bar-home{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;color:#c7ccff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:background .16s,color .16s}
.wd-bar-home svg{width:18px;height:18px}
.wd-bar-home:hover{background:rgba(255,255,255,.16);color:#fff}

@media (max-width:640px){
  .wd-bar{gap:.6rem;padding:.5rem .5rem .5rem .9rem;bottom:.7rem}
  .wd-bar-txt{display:none}
  .wd-bar-cta{padding:.55rem .95rem;font-size:.84rem}
}