/* 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 ── */
.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:6%;will-change:transform}
.hl3-rot.r1{animation:hl3Spin 70s linear infinite}
.hl3-rot.r2{animation:hl3SpinRueck 90s linear infinite}
.hl3-rot.r3{animation:hl3Spin 115s linear infinite}
.hl3-blob{position:absolute;inset:0;border-radius:44% 56% 58% 42% / 46% 42% 58% 54%;
  filter:blur(16px);will-change:border-radius}
.hl3-blob.b1{background:conic-gradient(from 0deg,rgba(15,118,110,.75),rgba(80,208,190,.25),
    rgba(15,118,110,.65) 55%,rgba(255,255,255,0) 78%,rgba(15,118,110,.75));
  animation:hl3Waber1 22s ease-in-out infinite alternate}
.hl3-blob.b2{background:conic-gradient(from 120deg,rgba(229,107,154,.8),rgba(248,183,212,.3),
    rgba(229,107,154,.7) 50%,rgba(255,255,255,0) 76%,rgba(229,107,154,.8));
  animation:hl3Waber2 27s ease-in-out infinite alternate}
.hl3-blob.b3{background:conic-gradient(from 240deg,rgba(124,91,209,.65),rgba(178,148,235,.25),
    rgba(124,91,209,.55) 48%,rgba(255,255,255,0) 74%,rgba(124,91,209,.65));
  animation:hl3Waber3 19s ease-in-out infinite alternate}
@keyframes hl3Spin{to{transform:rotate(360deg)}}
@keyframes hl3SpinRueck{to{transform:rotate(-360deg)}}
@keyframes hl3Waber1{
  0%{border-radius:44% 56% 58% 42%/46% 42% 58% 54%}
  50%{border-radius:58% 42% 40% 60%/52% 60% 40% 48%}
  100%{border-radius:40% 60% 55% 45%/58% 44% 56% 42%}}
@keyframes hl3Waber2{
  0%{border-radius:52% 48% 42% 58%/44% 58% 42% 56%}
  50%{border-radius:42% 58% 60% 40%/56% 42% 58% 44%}
  100%{border-radius:60% 40% 46% 54%/42% 56% 44% 58%}}
@keyframes hl3Waber3{
  0%{border-radius:48% 52% 56% 44%/58% 42% 54% 46%}
  50%{border-radius:56% 44% 42% 58%/44% 58% 40% 60%}
  100%{border-radius:42% 58% 52% 48%/54% 46% 58% 42%}}

/* Zellkern-Referenz: dunkler Mini-Blob, eigenständig wabernd */
.hl3-kern{position:absolute;left:36%;top:34%;width:26%;aspect-ratio:1;
  background:radial-gradient(circle at 38% 34%,rgba(138,107,216,.85),rgba(91,58,143,.8) 72%);
  border-radius:56% 44% 48% 52%/50% 56% 44% 50%;filter:blur(2px);opacity:.6;
  animation:hl3Kern 26s ease-in-out infinite alternate}
@keyframes hl3Kern{
  0%{transform:translate(0,0) rotate(0deg);border-radius:56% 44% 48% 52%/50% 56% 44% 50%}
  50%{transform:translate(9%,12%) rotate(40deg);border-radius:44% 56% 54% 46%/58% 44% 52% 48%}
  100%{transform:translate(-7%,5%) rotate(-30deg);border-radius:50% 50% 42% 58%/46% 54% 48% 52%}}

/* 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}
}