/* Live-Sparring-Konsole im Hero — genamespaced unter #sparHero, nutzt site.css-Variablen.
   Ersetzt das statische Persona-Mock durch die echte, interaktive Demo. */
#sparHero{
  --spar-danger:#ff6a4d;
  width:100%; max-width:560px; margin:0 auto; align-self:stretch;
  display:flex; flex-direction:column;
  height:clamp(500px, 66vh, 648px);
  border:1px solid var(--border-medium); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--bg-surface), #0b0b12);
  box-shadow:0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--font-display); color:var(--text-primary);
}
#sparHero *{box-sizing:border-box}
#sparHero .sparHero__top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
#sparHero .sparHero__live{display:inline-flex;align-items:center;gap:7px;color:var(--spar-danger)}
#sparHero .sparHero__live i{width:8px;height:8px;border-radius:50%;background:var(--spar-danger);box-shadow:0 0 10px var(--spar-danger);animation:sparBlink 1.3s infinite}
@keyframes sparBlink{50%{opacity:.35}}
#sparHero .sparHero__scen{color:var(--text-secondary)}
#sparHero .sparHero__cnt{margin-left:auto;color:var(--text-muted)}
#sparHero .sparHero__lang{display:flex;gap:4px;margin-left:10px;flex:0 0 auto}
#sparHero .sparHero__langBtn{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;padding:3px 7px;border-radius:6px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-muted);cursor:pointer;transition:.15s}
#sparHero .sparHero__langBtn:hover{color:var(--text-primary);border-color:var(--border-strong)}
#sparHero .sparHero__langBtn.is-on{color:#fff;background:var(--accent-purple);border-color:var(--accent-purple);font-weight:700}
#sparHero .sparHero__picker{display:flex;gap:8px;padding:13px 15px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
#sparHero .sparHero__pick{flex:1;min-width:104px;font-family:var(--font-mono);font-size:12px;text-align:center;padding:10px 8px;border-radius:11px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.02);color:var(--text-secondary);cursor:pointer;transition:.16s}
#sparHero .sparHero__pick:hover{color:var(--text-primary);border-color:var(--border-strong)}
#sparHero .sparHero__pick.is-on{color:var(--text-on-lime);background:var(--accent-purple);border-color:var(--accent-purple);font-weight:700;box-shadow:0 8px 22px var(--accent-purple-glow);color:#fff}
#sparHero .sparHero__pick small{display:block;font-size:10px;opacity:.75;margin-top:2px}
#sparHero .sparHero__chat{flex:1;overflow-y:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth}
#sparHero .sparHero__chat::-webkit-scrollbar{width:6px}
#sparHero .sparHero__chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
#sparHero .sparHero__k{display:flex;gap:12px;align-items:flex-start;animation:sparRise .35s ease}
@keyframes sparRise{from{opacity:0;transform:translateY(8px)}}
#sparHero .sparHero__av{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:linear-gradient(155deg,var(--accent-purple),#4b3ccf);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 0 0 4px var(--accent-purple-glow);font-family:var(--font-display)}
#sparHero .sparHero__meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-bottom:5px;display:flex;align-items:center;gap:7px}
#sparHero .sparHero__spk{color:var(--accent-blue)}
#sparHero .sparHero__bub{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:4px 15px 15px 15px;padding:11px 14px;font-size:14.5px;line-height:1.45;color:var(--text-primary);max-width:94%}
#sparHero .sparHero__bub.is-you{align-self:flex-end;border-radius:15px 4px 15px 15px;background:linear-gradient(160deg,#2a2358,#211b48);border-color:var(--accent-purple);color:#efeeff}
#sparHero .sparHero__typing{display:inline-flex;gap:4px;padding:4px 2px}
#sparHero .sparHero__typing i{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);animation:sparTp 1s infinite}
#sparHero .sparHero__typing i:nth-child(2){animation-delay:.15s}
#sparHero .sparHero__typing i:nth-child(3){animation-delay:.3s}
@keyframes sparTp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
#sparHero .sparHero__dock{border-top:1px solid var(--border-subtle);padding:12px 14px 14px;background:rgba(0,0,0,.2)}
#sparHero .sparHero__tmpl{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
#sparHero .sparHero__lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 2px}
#sparHero .sparHero__ans{text-align:left;font-size:13.5px;line-height:1.35;padding:10px 12px;border-radius:11px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.02);color:var(--text-primary);cursor:pointer;transition:.15s}
#sparHero .sparHero__ans:hover{border-color:var(--accent-purple);background:var(--accent-purple-glow);transform:translateX(3px)}
#sparHero .sparHero__inrow{display:flex;gap:9px;align-items:center}
#sparHero .sparHero__mic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);color:var(--text-primary);cursor:pointer;display:grid;place-items:center;transition:.16s}
#sparHero .sparHero__mic:hover{border-color:var(--accent-purple)}
#sparHero .sparHero__mic.is-rec{background:var(--spar-danger);border-color:var(--spar-danger);color:#fff;animation:sparPulse 1s infinite}
@keyframes sparPulse{50%{box-shadow:0 0 0 8px rgba(255,106,77,.18)}}
#sparHero .sparHero__mic svg{width:20px;height:20px;fill:currentColor}
#sparHero .sparHero__field{flex:1;height:46px;border-radius:13px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);color:var(--text-primary);padding:0 15px;font-size:14.5px;font-family:var(--font-display);outline:none;transition:.16s}
#sparHero .sparHero__field:focus{border-color:var(--accent-purple)}
#sparHero .sparHero__field::placeholder{color:var(--text-muted)}
#sparHero .sparHero__send{flex:0 0 auto;width:46px;height:46px;border-radius:13px;border:0;background:var(--accent-purple);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.16s}
#sparHero .sparHero__send:hover{filter:brightness(1.12)}
#sparHero .sparHero__send:disabled{opacity:.4;cursor:default}
#sparHero .sparHero__send svg{width:20px;height:20px;fill:currentColor}
#sparHero .sparHero__hint{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin:8px 2px 0;text-align:center}
#sparHero .sparHero__endcta{border-top:1px solid var(--border-subtle);padding:22px 20px;text-align:center;background:linear-gradient(180deg,transparent,var(--accent-purple-glow))}
#sparHero .sparHero__endcta h3{font-size:19px;letter-spacing:-.02em;margin:0 0 6px;color:var(--text-primary)}
#sparHero .sparHero__endcta p{color:var(--text-secondary);font-size:13.5px;margin:0 0 16px;line-height:1.45}
#sparHero .sparHero__btn{display:inline-block;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px;background:var(--accent-lime);color:var(--text-on-lime);text-decoration:none;box-shadow:var(--shadow-lime);transition:.15s}
#sparHero .sparHero__btn:hover{transform:translateY(-2px)}
#sparHero .sparHero__again{display:block;margin:12px auto 0;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:none;border:0;cursor:pointer}
#sparHero .sparHero__again:hover{color:var(--text-primary)}
#sparHero .sparHero--hide{display:none!important}
/* Start-Affordanz: Empty-State-Hinweis im Chat + pulsierende Picker-Buttons bis zum ersten Start */
#sparHero .sparHero__start{margin:auto;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;max-width:300px;padding:18px;color:var(--text-secondary)}
#sparHero .sparHero__startArrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--accent-lime);border:1px solid var(--accent-lime);box-shadow:0 0 0 6px var(--accent-lime-glow);animation:sparUp 1.5s ease-in-out infinite}
#sparHero .sparHero__startArrow svg{width:18px;height:18px;fill:currentColor}
@keyframes sparUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#sparHero .sparHero__start b{color:var(--text-primary);font-size:16px;font-weight:750;letter-spacing:-.01em}
#sparHero .sparHero__start span{font-size:12.5px;line-height:1.45}
#sparHero:not(.is-started) .sparHero__pick{animation:sparPickPulse 2.4s ease-in-out infinite}
#sparHero:not(.is-started) .sparHero__pick:nth-child(2){animation-delay:.35s}
#sparHero:not(.is-started) .sparHero__pick:nth-child(3){animation-delay:.7s}
#sparHero:not(.is-started) .sparHero__pick:hover{animation:none}
@keyframes sparPickPulse{0%,100%{border-color:var(--border-subtle);box-shadow:0 0 0 0 rgba(123,97,255,0)}50%{border-color:var(--accent-purple);box-shadow:0 0 14px 0 var(--accent-purple-glow)}}
@media (max-width:920px){
  #sparHero{height:min(84vh,620px);max-width:100%}
  #sparHero .sparHero__chat{min-height:150px}
  #sparHero .sparHero__tmpl{max-height:112px;overflow-y:auto;margin-bottom:8px}
  #sparHero .sparHero__ans{font-size:12.5px;padding:8px 11px;line-height:1.3}
  #sparHero .sparHero__dock{padding:9px 12px 12px}
  #sparHero .sparHero__lbl{margin-bottom:2px}
}