/* Fluid-Orb-Loader v3 — wabernd rotierend, ruhig, präzise (Apple-Anmutung) */
.vqm-hl3{position:absolute;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,#fafbfc 0%,#f1f5f6 100%);
  opacity:1;transition:opacity .5s ease;overflow:hidden}
.vqm-hl3.fertig{opacity:0;pointer-events:none}
.hl3-buehne{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:44px;padding:24px}

/* ── Der Orb — transform-only, flackerfrei ── */
.hl3-orb{position:relative;width:min(300px,56vw,34vh);aspect-ratio:1;border-radius:50%;
  filter:drop-shadow(0 26px 60px rgba(15,118,110,.22))}
.hl3-basis{position:absolute;inset:3%;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#ffffff 0%,#fdf1f6 55%,#f3e6f2 100%)}
.hl3-rot{position:absolute;inset:4%;border-radius:50%;overflow:hidden;will-change:transform}
.hl3-rot.r1{animation:hl3Spin 46s linear infinite}
.hl3-rot.r2{animation:hl3SpinRueck 61s linear infinite}
.hl3-rot.r3{animation:hl3Spin 83s linear infinite}
.hl3-blob{position:absolute;inset:-12%}
.hl3-blob.b1{background:radial-gradient(closest-side at 34% 38%,rgba(15,118,110,.55),
  rgba(15,118,110,.28) 46%,rgba(15,118,110,0) 74%)}
.hl3-blob.b2{background:radial-gradient(closest-side at 66% 60%,rgba(229,107,154,.6),
  rgba(229,107,154,.3) 48%,rgba(229,107,154,0) 76%)}
.hl3-blob.b3{background:radial-gradient(closest-side at 46% 72%,rgba(124,91,209,.5),
  rgba(124,91,209,.24) 44%,rgba(124,91,209,0) 72%)}
@keyframes hl3Spin{to{transform:rotate(360deg)}}
@keyframes hl3SpinRueck{to{transform:rotate(-360deg)}}

/* Zellkern: kreist langsam mit (transform-only) */
.hl3-kern{position:absolute;left:37%;top:35%;width:24%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(138,107,216,.7),rgba(91,58,143,.55) 60%,rgba(91,58,143,0) 100%);
  transform-origin:60% 65%;animation:hl3SpinRueck 52s linear infinite}
/* Glas-Schale + Glanz */
.hl3-glas{position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),
             inset 0 10px 28px rgba(255,255,255,.5),
             inset 0 -14px 30px rgba(15,118,110,.12)}
.hl3-glanz{position:absolute;left:14%;top:8%;width:44%;height:26%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  filter:blur(6px);transform:rotate(-18deg)}

/* ── Text ── */
.hl3-info{text-align:center;max-width:760px;width:100%}
.hl3-text{font:600 17px/1.45 system-ui,-apple-system,sans-serif;color:#0b3f3a;min-height:25px}
.hl3-text.wechsel{animation:hl3Txt .5s ease}
@keyframes hl3Txt{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.hl3-sub{margin-top:16px;font:400 12.5px/1.5 system-ui,sans-serif;color:#8a979c}

/* ── Kontrollpunkte, zeitlich äquidistant, Linien füllen im Takt ── */
.hl3-stationen{margin:22px auto 0;display:flex;align-items:flex-start;justify-content:center;
  max-width:720px}
.hl3-st{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:64px}
.hl3-st .pkt{width:13px;height:13px;border-radius:50%;background:#fff;
  border:2.5px solid #c3cfd2;transition:all .35s ease;box-sizing:border-box}
.hl3-st .lbl{font:600 11.5px/1.2 system-ui,sans-serif;color:#8a979c;transition:color .3s;
  white-space:nowrap}
.hl3-lin{flex:1 1 44px;height:2.5px;background:#dde5e7;border-radius:2px;margin:5px 6px 0;
  min-width:22px;overflow:hidden}
.hl3-lin i{display:block;height:100%;width:0;background:#0f766e;border-radius:2px;
  transition-property:width;transition-timing-function:linear}
.hl3-st.aktiv .pkt{border-color:#0f766e;background:#0f766e;
  box-shadow:0 0 0 5px rgba(15,118,110,.16);animation:hl3Puls 1.5s ease-in-out infinite}
.hl3-st.aktiv .lbl{color:#0f766e}
.hl3-st.fertig .pkt{border-color:#0f766e;background:#0f766e;position:relative}
.hl3-st.fertig .pkt::after{content:"✓";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font:700 8.5px/1 system-ui;color:#fff}
.hl3-st.fertig .lbl{color:#134e4a}
@keyframes hl3Puls{0%,100%{box-shadow:0 0 0 5px rgba(15,118,110,.16)}
  50%{box-shadow:0 0 0 10px rgba(15,118,110,.06)}}

@media (max-width:700px){
  .hl3-st .lbl{display:none}
  .hl3-buehne{gap:30px}
}
@media (prefers-reduced-motion: reduce){
  .hl3-blob,.hl3-kern,.hl3-st.aktiv .pkt{animation:none}
}