/* ── IbetMax Hero-Loader („Hafen-Instrument") ──
   Namespace: .hl-*   ·   Laufzeit: anime.js v4 (anime.umd.min.js)
   Das Overlay liegt absolut über dem Hero (z-index 30, unter dem
   LinkedIn-Hinweis mit z-index 40). */

.hl{
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hl[hidden]{display:none}

/* Abdunklung, damit das Instrument auch auf hellen Tag-Videos trägt */
.hl-dim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(3,7,14,.82), rgba(3,7,14,.58) 62%, rgba(3,7,14,.42));
}

.hl-stage{
  position:relative;
  /* nie unter die Kopfleiste (ca. 110–120 px) ragen, auch im Querformat */
  width:max(220px, min(80vmin, 640px, calc(100vh - 230px)));
  width:max(220px, min(80vmin, 640px, calc(100svh - 230px)));
  aspect-ratio:1/1;
  pointer-events:none;
}
.hl-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.hl-svg .hl-tilt{ transform-box:fill-box; transform-origin:center; }
.hl-arc-layer{ will-change:transform; }

/* HTML-Texte (skalieren lesbar, auch auf dem Handy) */
.hl-label{
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  font:700 clamp(9px, 1.55vmin, 12px)/1 'Courier New', Courier, monospace;
  letter-spacing:.32em;
  padding-left:.32em;
  text-transform:uppercase;
  color:rgba(124,230,255,.82);
  white-space:pre;
  opacity:0;
}
.hl-coord{ top:25.5%; }
.hl-count{
  bottom:24.5%;
  font-size:clamp(11px, 2vmin, 15px);
  color:rgba(232,184,122,.95);
}
.hl-word{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-58%);
  text-align:center;
  font:800 clamp(24px, 5.6vmin, 50px)/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:.22em;
  padding-left:.22em;
  text-transform:uppercase;
  color:#fff;
  white-space:pre;
  text-shadow:0 0 22px rgba(18,197,188,.7), 0 0 2px rgba(255,255,255,.9);
  opacity:0;
}

.hl-skip{
  position:absolute;
  left:50%;
  bottom:clamp(22px, 6vh, 64px);
  transform:translateX(-50%);
  padding:.7em 1.25em;
  border:1px solid rgba(124,230,255,.35);
  border-radius:999px;
  background:rgba(4,10,18,.55);
  color:rgba(255,255,255,.78);
  font:700 11px/1 'Courier New', Courier, monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  opacity:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .2s, color .2s, border-color .2s;
}
.hl-skip:hover,
.hl-skip:focus-visible{
  background:rgba(18,197,188,.2);
  border-color:rgba(124,230,255,.8);
  color:#fff;
  outline:none;
}