/* Hero-Variante: Arbeitsbeispiele als Loop-Videos auf einer drehenden Kugel.
   Der Graph Editor bleibt im Markup und erscheint nur, wenn das Gerät kein WebGL2 kann (Klasse hs-fallback). */
html:not(.hs-fallback) .hero-graph,
html:not(.hs-fallback) .hero .mg{display:none}
.hs-fallback .hero-sphere{display:none}

/* Die Kugel liegt unter der Headline und bleibt durch sie hindurch greifbar */
.hero-copy{pointer-events:none}
.hero-lead,.hero-ctas,.hero-sphere{pointer-events:auto}

.hero-sphere{grid-column:8/13;position:relative;justify-self:end;width:clamp(480px,49vw,720px);aspect-ratio:1;margin-right:calc(-1 * clamp(0px,3.5vw,56px))}
/* Das Canvas ragt rundum 12 % über die Bühne, damit herausfahrende Kacheln nirgends abgeschnitten werden (BLEED im Script) */
.hs-canvas{position:absolute;inset:-12%;z-index:1;display:block;width:124%;height:124%;touch-action:pan-y;-webkit-user-select:none;user-select:none}

/* Handy: Die Banderole liegt direkt unter der Headline. Die Bühne nutzt die volle Breite, damit die Karten erst am Bildrand enden. */
.hs-band .hero-sphere{width:100%;margin:calc(-23.5% - 10px) auto calc(-18% + 14px)}
.hs-band .hero-copy>*:not(.hero-sphere){position:relative;z-index:2}
.hs-front .hs-canvas{z-index:3}   /* solange eine Karte unterwegs ist, liegt sie über dem Text */

/* Highlight-Karte: Position und Größe setzt das Script. Eingeblendet wird mit dem Easing des Flugs (60 % Out, 95 % In). */
.hs-card{position:absolute;left:0;top:0;z-index:3;pointer-events:none;visibility:hidden;transition:visibility 0s linear .28s}
.hs-card.is-open{visibility:visible;transition-delay:0s}
.hs-close{position:absolute;top:0;right:0;width:32px;height:32px;padding:0;display:grid;place-items:center;appearance:none;cursor:pointer;pointer-events:auto;
  color:var(--fg);background:var(--bg);border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  clip-path:inset(0 0 100% 100%);transition:clip-path .28s var(--ease-micro),background .2s,color .2s}
.hs-close svg{width:12px;height:12px;display:block}
.hs-close:hover,.hs-close:focus-visible{color:var(--on-accent);background:var(--accent)}
.hs-card.is-open .hs-close{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.6,0,.05,1),background .2s,color .2s}

/* Pfeile zum Weiterklicken, bündig am linken und rechten Kartenrand */
.hs-arrow{position:absolute;top:50%;width:32px;height:48px;margin-top:-24px;padding:0;display:grid;place-items:center;appearance:none;cursor:pointer;pointer-events:auto;
  color:var(--fg);background:var(--bg);border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:clip-path .28s var(--ease-micro),background .2s,color .2s}
.hs-arrow svg{width:12px;height:12px;display:block}
.hs-arrow:hover,.hs-arrow:focus-visible{color:var(--on-accent);background:var(--accent)}
.hs-arrow--prev{left:0;border-right:1px solid var(--line);clip-path:inset(0 100% 0 0)}
.hs-arrow--next{right:0;border-left:1px solid var(--line);clip-path:inset(0 0 0 100%)}
.hs-card.is-open .hs-arrow{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.6,0,.05,1),background .2s,color .2s}

/* Die Textebene fährt unter der Unterkante der Karte heraus */
.hs-drawer{position:absolute;left:0;right:0;top:100%;overflow:hidden;pointer-events:auto}
.hs-info{padding:12px 14px 13px;background:var(--bg);border:1px solid var(--line);border-top:0;transform:translateY(calc(-100% - 2px));transition:transform .28s var(--ease-micro)}
.hs-card.is-open .hs-info{transform:none;transition:transform .8s cubic-bezier(.6,0,.05,1)}
.hs-lines{margin:0;color:var(--muted);line-height:1.6;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}

@media (max-width:980px){
  .hero-sphere{grid-column:1/-1;justify-self:center;width:min(100%,520px);margin:0 auto}
  .hs-close{width:40px;height:40px}
  .hs-arrow{width:40px;height:56px;margin-top:-28px}
  .hs-info{padding:10px 12px 11px}
  .hs-lines{font-size:10px;letter-spacing:.04em}
}