.elementor-kit-7{--e-global-color-primary:#FF2C87;--e-global-color-secondary:#D33FD4;--e-global-color-text:#12FFD1;--e-global-color-accent:#4DE8F5;--e-global-color-ffc4c1d:#0A1220;--e-global-color-fc9164a:#050A12;--e-global-color-b7545da:#E7F0FF;--e-global-color-a72e5d3:#7A90B0;--e-global-color-29db57b:#2A1540;--e-global-color-272702e:#3D1F5A;--e-global-color-7f33e4c:#0D1827;--e-global-typography-primary-font-family:"Saira";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Share Tech Mono";--e-global-typography-secondary-font-size:14px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Chakra Petch";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:700;--e-global-typography-accent-font-family:"Saira";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:300;background-color:var( --e-global-color-fc9164a );color:#FFFFFF;font-family:"Saira", Sans-serif;font-size:18px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{color:#FFFFFF;font-family:"Chakra Petch", Sans-serif;font-size:72px;}.elementor-kit-7 h2{color:#FFFFFF;font-family:"Chakra Petch", Sans-serif;font-size:48px;}.elementor-kit-7 h3{color:#FFFFFF;font-family:"Saira", Sans-serif;font-size:32px;}.elementor-kit-7 h4{color:#FFFFFF;font-family:"Chakra Petch", Sans-serif;font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:8%;--container-default-padding-right:8%;--container-default-padding-bottom:8%;--container-default-padding-left:8%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:32px;}.elementor-kit-7 h2{font-size:30px;}.elementor-kit-7 h3{font-size:28px;}.elementor-kit-7 h5{font-size:24px;}.elementor-kit-7 h6{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --bg:#050A12; --panel:#0A1220; --panel2:#0D1827; --vdark:#2A1540; --vdark2:#3D1F5A; --cyan:#4EE8F5; --mint:#00FFD1; --mag:#D43DD4; --pink:#FF2D87; --ink:#E8F0FF; --dim:#7A90B0; --line:rgba(122,144,176,.18); --e-gv-b0d8dba:#ffffff; }
/* Start custom CSS *//* Color Palette*/
:root{
  --bg:#050A12;         /* Seitenhintergrund */
  --panel:#0A1220;      /* Karten-Hintergrund, dunkler */
  --panel2:#0D1827;     /* Karten-Hintergrund, heller */
  --vdark:#2A1540;      /* Violett-Ton für Glows */
  --vdark2:#3D1F5A;     /* Violett-Ton, heller */
  --cyan:#4EE8F5;       /* Primärakzent */
  --mint:#00FFD1;       /* Sekundärakzent (Status/Live) */
  --mag:#D43DD4;        /* Akzent für Gradient/Hover */
  --pink:#FF2D87;       /* Akzent für Warnung/Highlight */
  --ink:#E8F0FF;        /* Haupt-Textfarbe */
  --dim:#7A90B0;        /* Gedämpfter Text */
  --line:rgba(122,144,176,.58); /* Rahmen/Trennlinien */
  --grad:linear-gradient(92deg,var(--mag),var(--cyan));
  --grad2:linear-gradient(106deg, var(--mag),var(--cyan));
  --grad3:linear-gradient(158deg, var(--mag),var(--cyan));
  --grad4:linear-gradient(186deg, var(--mag),var(--cyan));
  --grad5:linear-gradient(74deg, var(--mint),var(--cyan));
  --r:12px;             /* Standard-Radius */
}

/*
Scanline
*/

.interference{
  position:fixed;left:0;right:0;height:46px;top:-10%;z-index:9100;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,rgba(78,232,245,.06) 40%,rgba(212,61,212,.08) 60%,transparent);
  backdrop-filter:blur(1px) saturate(1.4);
  mix-blend-mode:screen;
}
.interference.run{animation:interf 1s linear}
@keyframes interf{0%{top:-8%;opacity:1}100%{top:108%;opacity:1}}

.scanline{position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(232,240,255,.012) 3px 4px);mix-blend-mode:overlay}


/* 
Primary Button 
*/
.cta{
  font-family:var(--display);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  
  background:var(--grad);
  text-decoration:none;
  border:none;
  padding:14px 26px;
  clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%);
  transition:filter .2s,transform .2s;
  display:inline-block;
}
.cta:hover{
  filter:brightness(1.15) drop-shadow(0 0 18px rgba(78,232,245,.5));
  transform:translateY(-2px);
}

/* Neon Primary Rotating*/
.cta.cta--neon-orbit{position:relative;isolation:isolate}
.cta.cta--neon-orbit::before{
  content:'';
  position:absolute;
  inset:-9px;
  z-index:-1;
  background:conic-gradient(from 0deg,var(--mag),var(--cyan),var(--mag));
  filter:blur(13px);
  opacity:.75;
  animation:neonOrbit 3s linear infinite;
}
@keyframes neonOrbit{to{transform:rotate(360deg)}}



/* Orbit Primary Glow */
@property --cta-orbit-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

.cta-orbit-glow{
  --cta-orbit-angle:0deg;
  --cta-orbit-cut:12px;
  --cta-orbit-edge:2px;

  position:relative;
  isolation:isolate;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;

  padding:14px 26px;
  border:0;

  color:#fff;
  background:transparent;

  font-family:var(--display);
  font-weight:700;
  font-size:13.5px;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;

  cursor:pointer;
  overflow:visible;

  transition:transform .2s ease;
}

.cta-orbit-glow::before{
  content:'';

  position:absolute;
  z-index:-2;
  inset:0;

  pointer-events:none;

  clip-path:polygon(
    var(--cta-orbit-cut) 0,
    100% 0,
    calc(100% - var(--cta-orbit-cut)) 100%,
    0 100%
  );

  background:conic-gradient(
    from var(--cta-orbit-angle),

    transparent 0deg 172deg,
    rgba(78,232,245,.08) 190deg,
    var(--cyan) 222deg,
    #fff 244deg,
    var(--mag) 266deg,
    rgba(255,45,135,.25) 290deg,
    transparent 318deg 360deg
  );

  filter:
    drop-shadow(0 0 5px rgba(78,232,245,.6))
    drop-shadow(0 0 12px rgba(78,232,245,.3))
    drop-shadow(0 0 18px rgba(212,61,212,.28));

  animation:ctaOrbitGlowSpin 2.7s linear infinite;

  transition:
    filter .25s ease,
    opacity .25s ease;
}

.cta-orbit-glow::after{
  content:'';

  position:absolute;
  z-index:-1;

  inset:var(--cta-orbit-edge);

  pointer-events:none;

  clip-path:polygon(
    calc(var(--cta-orbit-cut) - var(--cta-orbit-edge)) 0,
    100% 0,
    calc(100% - var(--cta-orbit-cut) + var(--cta-orbit-edge)) 100%,
    0 100%
  );

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      transparent 45%
    ),
    linear-gradient(
      105deg,
      var(--panel) 0%,
      var(--panel2) 46%,
      var(--vdark) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.24);

  transition:filter .2s ease;
}

.cta-orbit-glow:hover{
  transform:translateY(-2px);
}

.cta-orbit-glow:hover::before{
  filter:
    drop-shadow(0 0 7px rgba(78,232,245,.8))
    drop-shadow(0 0 17px rgba(78,232,245,.45))
    drop-shadow(0 0 25px rgba(212,61,212,.42));
}

.cta-orbit-glow:hover::after{
  filter:brightness(1.15);
}

.cta-orbit-glow b{
  display:inline-block;

  font-size:1.1em;
  font-weight:700;

  transition:transform .2s ease;
}

.cta-orbit-glow:hover b{
  transform:translateX(4px);
}

.cta-orbit-glow:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:6px;
}

@keyframes ctaOrbitGlowSpin{
  to{
    --cta-orbit-angle:360deg;
  }
}

@media (prefers-reduced-motion:reduce){
  .cta-orbit-glow::before{
    animation:none;
  }

  .cta-orbit-glow,
  .cta-orbit-glow::after,
  .cta-orbit-glow b{
    transition-duration:.01ms;
  }
}



/* 
Secondary Button 
*/
.cta.ghost{
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.cta.ghost:hover{
  box-shadow:inset 0 0 0 1.5px var(--cyan);
  color:var(--cyan);
}

/* Perimeter Orbit */
.cta-orbit-wrap{position:relative;display:inline-block}
.cta-orbit-wrap .cta{position:relative;z-index:1}
.cta-orbit-wrap svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.cta-orbit-wrap svg polygon{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:60 210; /* 60 = Kometenlänge, 210 = unsichtbare Lücke */
  filter:drop-shadow(0 0 4px var(--cyan));
  animation:orbitRun 3.5s linear infinite;
}
@keyframes orbitRun{to{stroke-dashoffset:-270}}

/* Breathing Glow*/
.cta.cta--breathe{animation:breatheGlow 3s ease-in-out infinite}
@keyframes breatheGlow{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 10px rgba(78,232,245,.55))}
}



/* 
Tertiary Button 
*/
.cta.pink{
  background:linear-gradient(92deg,var(--pink),var(--mag));
  color:#fff;
}

/* Glitch Flicker*/
.cta.cta--glitch{animation:glitchFlicker 4s infinite}
@keyframes glitchFlicker{
  0%,95%{filter:none;transform:translate(0,0)}
  96%{filter:brightness(1.4) saturate(1.6);transform:translate(-2px,1px)}
  97%{filter:brightness(.75);transform:translate(2px,-1px)}
  98%{filter:brightness(1.25) saturate(1.3);transform:translate(-1px,0)}
  100%{filter:none;transform:translate(0,0)}
}

/* Scan Effekt Button */
.cta.cta--scan{position:relative;overflow:hidden}
.cta.cta--scan::after{
  content:'';
  position:absolute;left:0;right:0;height:50%;top:-60%;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  mix-blend-mode:overlay;
  animation:scanDown 3.4s ease-in-out infinite;
}
@keyframes scanDown{0%,70%{top:-60%}100%{top:110%}}

/* Live Pill */
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--pink);
  border:1px solid rgba(255,45,135,.4);
  padding:8px 16px;
  border-radius:99px;
  text-transform:uppercase;
}
.live-pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink);
  animation:pulse 1.1s infinite;
}
@keyframes pulse{50%{opacity:.25}}

.live-pill{position:relative}
.live-pill::after{
  content:'';position:absolute;inset:0;border-radius:99px;
  border:1px solid var(--pink);
  animation:sonarPing 2.4s ease-out infinite;
}
@keyframes sonarPing{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(1.35)}
}

/* Highlight Text*/
.hl{
  display:inline-block;
  background:var(--grad);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}

.hl2{
  background:var(--grad2);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent; /* Fallback für Browser ohne background-clip:text Support */
}

.hl3{
  background:var(--grad3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent; /* Fallback für Browser ohne background-clip:text Support */
}

.hl4{
  background:var(--grad4);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent; /* Fallback für Browser ohne background-clip:text Support */
}

.hl5{
  background:var(--grad5);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent; /* Fallback für Browser ohne background-clip:text Support */
}

@supports (-webkit-touch-callout:none){
  .hl,.hl2,.hl3,.hl4,.hl5{
    background:none;
    -webkit-text-fill-color:var(--cyan);
    color:var(--cyan);
  }
}

/* Truss Divider */
.truss{
  height:34px;
  border-block:1px solid var(--line);
  background:
    repeating-linear-gradient(-55deg,transparent 0 26px,rgba(122,144,176,.12) 26px 28px),
    var(--panel);
}


/* Card */
.card{
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:border-color .25s;
}
.card:hover{border-color:rgba(78,232,245,.45)}
.card .tag{
  position:absolute;
  top:20px; right:20px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--mag);
}
.card .ic{
  width:50px; height:50px;
  border-radius:10px;
  display:grid; place-items:center;
  margin-bottom:20px;
  background:rgba(78,232,245,.08);
  border:1px solid rgba(78,232,245,.3);
}
.card .ic svg{width:25px;height:25px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.card h3{font-size:18px;margin-bottom:11px;letter-spacing:.04em}
.card p{color:var(--dim);line-height:1.65;font-size:15px}


/* Kicker */
.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--mint);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:12px;
}
.kicker::before{
  content:'';
  width:38px;
  height:1.5px;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
}

.kicker2{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--mint);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:12px;
}



/* -- TICKER -- */
.ticker{border-block:1px solid var(--line);background:var(--panel);overflow:hidden;padding:13px 0}
.ticker-track{display:flex;gap:54px;white-space:nowrap;width:max-content;animation:tick 26s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.ticker span b{color:var(--cyan)}
.ticker span i{font-style:normal;color:var(--mag)}
@keyframes tick{to{transform:translateX(-50%)}}


/* --- MISSION --- */
.mi-sec{background:radial-gradient(60% 80% at 50% 0%,rgba(255,45,135,.07),transparent 60%),var(--bg);position:relative}
.dossier{max-width:880px;margin:0 auto;position:relative;background:linear-gradient(170deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,5vw,54px);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.dossier::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 32px,rgba(255,45,135,.03) 32px 34px)}
.stamp{position:absolute;top:20px;right:-10px;transform:rotate(6deg);border:2px solid var(--pink);color:var(--pink);
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:7px 28px 7px 16px;
  text-shadow:0 0 10px rgba(255,45,135,.5)}
.dhead{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;display:flex;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.dhead b{color:var(--pink)}
.type{position:relative;font-family:var(--mono);font-size:clamp(14px,1.5vw,16px);line-height:2;transition:opacity .9s,filter .9s}
.type-ghost{visibility:hidden}
.type-visible{position:absolute;inset:0}
.type .caret{display:inline-block;width:9px;height:1.1em;background:var(--mint);vertical-align:text-bottom;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.redact{background:#1a2435;color:transparent;border-radius:2px;padding:0 8px;user-select:none}
.dossier.burn .type{opacity:.05;filter:blur(4px)}
.destruct{display:flex;align-items:center;gap:14px;margin-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--pink);text-transform:uppercase;opacity:0;transition:opacity .4s}
.destruct.on{opacity:1}
.destruct .n{font-size:18px;min-width:1.3em;text-align:center}
.fuse{flex:1;height:2px;background:linear-gradient(90deg,var(--pink),var(--mag),var(--cyan));transform-origin:left}
.destruct.on .fuse{transition:transform 5s linear;transform:scaleX(0)}
.mi-cta{margin-top:28px;opacity:0;transform:translateY(14px);transition:.6s;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mi-cta.show{opacity:1;transform:none}
.replay{background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:none;border-bottom:1px dashed var(--line);padding-bottom:2px}
@media (hover:none),(pointer:coarse){.replay{cursor:pointer}}
.replay:hover{color:var(--pink)}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;width:32px;height:32px;z-index:9999;pointer-events:none;transform:translate(-50%,-50%)}
.cursor::before,.cursor::after{content:'';position:absolute;background:var(--cyan)}
.cursor::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.cursor::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.cursor .ring{position:absolute;inset:6px;border:1.5px solid var(--cyan);border-radius:50%;transition:.15s}
.cursor.hot .ring{border-color:var(--mag);inset:2px;box-shadow:0 0 14px rgba(212,61,212,.5)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}



/* =====================================================
   STANDORT HUD-RING
   Äußerer Elementor-Container:
   location-hud-section
   ===================================================== */

.location-hud-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}


/*
 * Der eigentliche Standort-Ring.
 * Er liegt absolut hinter dem Inhalt.
 */
.location-hud-ring {
  position: absolute;
  z-index: 0;

  left: -16%;
  bottom: -40%;

  width: min(700px, 80vw);
  aspect-ratio: 1;

  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}


/* SVG füllt seinen Container vollständig aus */
.location-hud-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* Äußerer Cyan-Ring */
.location-hud-ring .location-ring-slow {
  color: var(--cyan, #4EE8F5);

  transform-origin: 50% 50%;
  transform-box: view-box;

  animation:
    locationHudSpin 60s linear infinite;
}


/* Innerer Magenta-Ring */
.location-hud-ring .location-ring-mid {
  color: var(--mag, #D43DD4);

  transform-origin: 50% 50%;
  transform-box: view-box;

  animation:
    locationHudSpinReverse 38s linear infinite;
}


/*
 * Der normale Standort-Inhalt muss
 * vor dem dekorativen Ring liegen.
 */
.location-hud-section > .e-con-inner,
.location-hud-section > .elementor-container,
.location-hud-section > .elementor-widget,
.location-hud-section .location-content {
  position: relative;
  z-index: 2;
}


@keyframes locationHudSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes locationHudSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}


/* Auf kleineren Displays etwas kompakter */
@media (max-width: 767px) {
  .location-hud-ring {
    left: -48%;
    bottom: -18%;

    width: min(620px, 135vw);
    opacity: 0.11;
  }
}


/* Systemeinstellung für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .location-hud-ring .location-ring-slow,
  .location-hud-ring .location-ring-mid {
    animation: none;
  }
}


/* =====================================================
   HERO HUD
   Hauptcontainer: arena-hero-hud-section
   HTML-Widget:    arena-hero-hud-widget
   Inhalt:         arena-hero-content
   ===================================================== */


/* Hero ist das Positionierungsfenster */
.arena-hero-hud-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}


/*
 * Das Elementor-HTML-Widget wird über den
 * gesamten Hero gelegt und aus dem Layout genommen.
 */
.arena-hero-hud-widget {
  position: absolute !important;
  z-index: 0;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* Elementor-Wrapper ebenfalls auf volle Größe setzen */
.arena-hero-hud-widget > .elementor-widget-container {
  width: 100%;
  height: 100%;
}


/* Der eigentliche große HUD-Ring */
.arena-hero-hud-ring {
  position: absolute;

  right: -12%;
  top: 50%;

  width: min(820px, 70vw);
  aspect-ratio: 1;

  transform: translateY(-50%);

  opacity: 0.5;

  pointer-events: none;
  user-select: none;
}


/* SVG vollständig ausfüllen */
.arena-hero-hud-ring svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/* Langsamer äußerer Ring */
.arena-hero-hud-ring .arena-ring-slow {
  transform-origin: 50% 50%;
  transform-box: view-box;

  animation:
    arenaHeroHudSpin 60s linear infinite;
}


/* Mittlerer Ring läuft rückwärts */
.arena-hero-hud-ring .arena-ring-mid {
  transform-origin: 50% 50%;
  transform-box: view-box;

  animation:
    arenaHeroHudSpinReverse 38s linear infinite;
}


/* Schneller innerer Ring */
.arena-hero-hud-ring .arena-ring-fast {
  transform-origin: 50% 50%;
  transform-box: view-box;

  animation:
    arenaHeroHudSpin 22s linear infinite;
}


/* Hero-Inhalt vor den Ring legen */
.arena-hero-content {
  position: relative;
  z-index: 3;
}


@keyframes arenaHeroHudSpin {
  to {
    transform: rotate(360deg);
  }
}


@keyframes arenaHeroHudSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}


/* Originalähnliche Mobile-Position */
@media (max-width: 760px) {
  .arena-hero-hud-ring {
    right: -46%;

    width: min(820px, 118vw);

    opacity: 0.3;
  }
}


/* Sehr schmale Geräte */
@media (max-width: 480px) {
  .arena-hero-hud-ring {
    right: -62%;

    width: 135vw;

    opacity: 0.24;
  }
}


/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .arena-hero-hud-ring .arena-ring-slow,
  .arena-hero-hud-ring .arena-ring-mid,
  .arena-hero-hud-ring .arena-ring-fast {
    animation: none;
  }
}



/* --- ENERGY BORDER --- */
@property --eb-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

.energy-border{
  --eb-angle:0deg;
  --eb-width:2px;        /* Dicke der Umrandung */
  --eb-speed:4s;         /* Umlaufzeit des Impulses */
  --eb-radius:var(--r);  /* an deine Card anpassen */

  position:relative;
  border-radius:var(--eb-radius);
  isolation:isolate;
}

/* gedimmte Grundlinie */
.energy-border::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:var(--eb-width);
  background:rgba(0, 0, 0, 0.0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}

/* wandernder Impuls */
.energy-border::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:var(--eb-width);
  background:conic-gradient(
    from var(--eb-angle),
    transparent 0deg 300deg,
    rgba(78,232,245,.15) 316deg,
    var(--cyan) 336deg,
    #fff 346deg,
    var(--mag) 353deg,
    transparent 360deg
  );
  filter:drop-shadow(0 0 6px rgba(78,232,245,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:ebSpin var(--eb-speed) linear infinite;
  pointer-events:none;
  z-index:2;
}

@keyframes ebSpin{to{--eb-angle:360deg}}

/* Varianten */
.energy-border.eb--pink::before{
  background:conic-gradient(
    from var(--eb-angle),
    transparent 0deg 300deg,
    rgba(255,45,135,.15) 316deg,
    var(--pink) 336deg,
    #fff 346deg,
    var(--mag) 353deg,
    transparent 360deg
  );
  filter:drop-shadow(0 0 6px rgba(255,45,135,.6));
}
.energy-border.eb--slow{--eb-speed:8s}
.energy-border.eb--fast{--eb-speed:2s}
.energy-border.eb--thick{--eb-width:3px}

/* nur beim Hover laufen lassen */
.energy-border.eb--hover::before{animation-play-state:paused;opacity:.35}
.energy-border.eb--hover:hover::before{animation-play-state:running;opacity:1}

@media (prefers-reduced-motion:reduce){
  .energy-border::before{animation:none;opacity:.5}
}



/* Interfere Simple*/
.fx-interfere{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* das Störband */
.fx-interfere::before{
  content:'';
  position:absolute;
  inset:0;
  border:none;
  height:34%;
  opacity:0;
  pointer-events:none;
  z-index:3;
  mix-blend-mode:screen;
  background:linear-gradient(180deg,
    transparent,
    rgba(78,232,245,.11) 42%,
    rgba(212,61,212,.13) 58%,
    transparent);
}

.fx-interfere.in-view::before{
  animation:interfRun 5s steps(1,end) infinite;
}

/* seltenes Zucken: 86% der Zeit passiert nichts */
@keyframes interfRun{
  0%,86%{opacity:0;transform:translateY(-40%)}
  87%{opacity:1;transform:translateY(20%)}
  89%{opacity:0;transform:translateY(60%)}
  91%{opacity:1;transform:translateY(150%)}
  93%,100%{opacity:0;transform:translateY(300%)}
}

/* Inhalt versetzt sich kurz mit */
.fx-interfere.in-view>*{
  animation:interfShift 5s steps(1,end) infinite;
}

@keyframes interfShift{
  0%,86%{transform:translateX(0)}
  87%{transform:translateX(-3px)}
  88%{transform:translateX(2px)}
  89%,100%{transform:translateX(0)}
}



/* Background Grid*/
.fx-grid{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* das Raster, nach außen ausgeblendet */
.fx-grid::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(78,232,245,.09) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(78,232,245,.09) 27px 28px);
  -webkit-mask:radial-gradient(120% 80% at 50% 50%,#000 30%,transparent 78%);
  mask:radial-gradient(120% 80% at 50% 50%,#000 30%,transparent 78%);
}

/* die Welle */
.fx-grid::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:150%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(78,232,245,.16),transparent 62%);
  pointer-events:none;
  z-index:1;
}

.fx-grid.in-view::after{
  animation:gridPulse 4.2s ease-out infinite;
}

@keyframes gridPulse{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  12%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* Inhalt über die Ebenen heben */
.fx-grid>*{position:relative;z-index:2}



/* Sweep */
.fx-sweep{
  position:relative;
  overflow:hidden;
}

.fx-sweep::before{
  content:'';
  position:absolute;
  top:-60%;
  left:-120%;
  width:60%;
  height:220%;
  background:linear-gradient(100deg,
    transparent,
    rgba(232,240,255,.14) 45%,
    rgba(78,232,245,.3) 50%,
    transparent);
  transform:rotate(12deg);
  pointer-events:none;
  z-index:2;
}

/* einmaliger Durchlauf */
.fx-sweep.in-view::before{
  animation:sweepRun 1.5s cubic-bezier(.35,0,.25,1) .2s forwards;
}

/* Dauerschleife: zusätzlich class="loop" */
.fx-sweep.loop.in-view::before{
  animation:sweepRun 4.5s linear infinite;
}

@keyframes sweepRun{to{left:150%}}



/* Text Decrypt */
.fx-decrypt{
  font-family:var(--mono);
  letter-spacing:.02em;
  cursor:pointer;
}
.fx-decrypt .scramble{
  color:var(--mag);
  opacity:.75;
}



/* Flicker Text */
.fx-flicker{
  color:var(--mint);
  text-shadow:0 0 12px rgba(0,255,209,.55);
}

.fx-flicker.in-view{
  animation:flickerRun 6s steps(1,end) infinite;
}

/* 89% der Zeit stabil, dann kurzes Zucken */
@keyframes flickerRun{
  0%,89%{opacity:1}
  90%{opacity:.25}
  91%{opacity:1}
  92%{opacity:.4}
  93%,100%{opacity:1}
}/* End custom CSS */