/* Mainstar Hero v3 — vollständig unter .hero-v2 gescopt (kein Leak auf den Rest der Seite).
   Detaillierter Kabelbaum: Stecker-Querschnitt links, Terminierungen rechts, Strompulse.
   Höhe content-getrieben (kein 100svh) → straffe Abstände über/unter dem Hero. */

:root { --signal:#5FC9D6; }

.hero-v2{position:relative;min-height:auto;display:flex;align-items:center;padding:clamp(44px,6vh,68px) clamp(20px,5vw,72px);isolation:isolate;overflow:hidden}
.hero-v2 .bg-grid{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(rgba(184,154,90,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(184,154,90,.07) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(120% 90% at 72% 38%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 90% at 72% 38%,#000 0%,transparent 70%)}
.hero-v2 .bg-glow{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-v2 .bg-glow::before{content:"";position:absolute;top:-12%;right:-6%;width:min(860px,82vw);height:min(860px,82vw);background:radial-gradient(circle at center,rgba(184,154,90,.20),transparent 60%);filter:blur(8px)}
.hero-v2 .bg-glow::after{content:"";position:absolute;bottom:-30%;left:-12%;width:min(620px,70vw);height:min(620px,70vw);background:radial-gradient(circle at center,rgba(95,201,214,.10),transparent 60%)}
.hero-v2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(8,15,26,.55) 100%)}

.hero-v2 .wrap{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center}
/* Grid-Items müssen unter ihren Inhalt schrumpfen dürfen (sonst zieht das SVG die Spalte auf → Clipping) */
.hero-v2 .wrap>*{min-width:0}

.hero-v2 .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);font-weight:600;margin-bottom:20px;opacity:0;animation:hv2rise .7s var(--ease-out) .05s forwards}
.hero-v2 .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,154,90,.18)}

.hero-v2 h1{font-size:clamp(36px,5.2vw,62px);line-height:1.03;letter-spacing:-.025em;font-weight:700;color:var(--w);margin-bottom:22px;text-wrap:balance}
.hero-v2 .swap{position:relative;display:inline-block;vertical-align:bottom;color:var(--gold-l)}
.hero-v2 .swap .ghost{visibility:hidden}
.hero-v2 .swap .word{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;animation:hv2wordcycle 12s var(--ease-out) infinite}
/* nth-child +1, da .ghost das erste Kind ist (Konzept-Bugfix) */
.hero-v2 .swap .word:nth-child(2){animation-delay:0s}
.hero-v2 .swap .word:nth-child(3){animation-delay:2s}
.hero-v2 .swap .word:nth-child(4){animation-delay:4s}
.hero-v2 .swap .word:nth-child(5){animation-delay:6s}
.hero-v2 .swap .word:nth-child(6){animation-delay:8s}
.hero-v2 .swap .word:nth-child(7){animation-delay:10s}
.hero-v2 h1 .tail{display:block;color:var(--w);font-size:.6em;font-weight:600;margin-top:14px;opacity:.92}
.hero-v2 .tail b{color:var(--gold-l);font-weight:600}

.hero-v2 .lead{font-size:clamp(16px,1.7vw,18px);line-height:1.6;color:var(--t);max-width:44ch;margin-bottom:30px;opacity:0;animation:hv2rise .7s var(--ease-out) .2s forwards}
.hero-v2 .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;opacity:0;animation:hv2rise .7s var(--ease-out) .3s forwards}
.hero-v2 .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:var(--font);transition:transform .2s var(--ease-out),box-shadow .2s,background .2s}
.hero-v2 .btn-primary{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#1a1207;box-shadow:0 8px 28px rgba(184,154,90,.28)}
.hero-v2 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(184,154,90,.4)}
.hero-v2 .btn-ghost{color:var(--w);border-color:var(--brd);background:rgba(255,255,255,.02)}
.hero-v2 .btn-ghost:hover{border-color:var(--brd2);background:rgba(184,154,90,.06)}
.hero-v2 .btn .arr{transition:transform .2s}
.hero-v2 .btn:hover .arr{transform:translateX(3px)}

.hero-v2 .chips{display:flex;flex-wrap:wrap;gap:12px;opacity:0;animation:hv2rise .7s var(--ease-out) .42s forwards}
.hero-v2 .chip{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--brd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-v2 .chip b{color:var(--w);font-size:15px;font-weight:700;letter-spacing:-.01em}
.hero-v2 .chip span{color:var(--m);font-size:12px}

/* ===================== HARNESS STAGE ===================== */
.hero-v2 .stage{position:relative;width:100%;aspect-ratio:1/.78;min-height:380px;opacity:0;animation:hv2rise 1s var(--ease-out) .25s forwards}
.hero-v2 .stage svg{width:100%;height:100%;overflow:visible}
.hero-v2 .shroud{fill:rgba(184,154,90,.05);stroke:var(--gold);stroke-width:1.4}
.hero-v2 .housing{fill:rgba(255,255,255,.022);stroke:var(--gold);stroke-width:1.7}
.hero-v2 .cavline{stroke:rgba(184,154,90,.16);stroke-width:1}
.hero-v2 .contact{fill:var(--gold-l);opacity:.9}
.hero-v2 .crimp{fill:var(--gold);opacity:.62}
.hero-v2 .seal{fill:none;stroke:var(--gold);stroke-width:1.1;opacity:.7}
.hero-v2 .latch{fill:none;stroke:var(--gold);stroke-width:1.6}
.hero-v2 .key{fill:rgba(184,154,90,.25)}
.hero-v2 .cond{fill:none;stroke:rgba(184,154,90,.32);stroke-linecap:round}
.hero-v2 .tie{fill:rgba(184,154,90,.12);stroke:var(--gold);stroke-width:1.2}
.hero-v2 .splice{fill:var(--gold-l)}
.hero-v2 .splice-r{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;animation:hv2ping 3.4s ease-out infinite}
.hero-v2 .pulse{fill:none;stroke-linecap:round;stroke-dasharray:30 1200;filter:drop-shadow(0 0 6px rgba(95,201,214,.55));animation:hv2flow 3.4s linear infinite}
.hero-v2 .p-gold{stroke:var(--gold-l);filter:drop-shadow(0 0 6px rgba(212,184,120,.7))}
.hero-v2 .p-sig{stroke:var(--signal)}
.hero-v2 .term{fill:var(--bg);stroke:var(--gold);stroke-width:1.6}
.hero-v2 .ring{fill:none;stroke:var(--gold);stroke-width:2.4}
.hero-v2 .term-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;animation:hv2ping 3.4s ease-out infinite}
.hero-v2 .lbl{font:600 11px/1 var(--font);fill:var(--w);letter-spacing:.03em}
.hero-v2 .lbl-sub{font:500 9px/1 var(--font);fill:var(--m);letter-spacing:.05em}
.hero-v2 .dim{stroke:rgba(168,184,200,.3)}
.hero-v2 .dim-t{font:500 9px/1 var(--font);fill:var(--f);letter-spacing:.12em}

@keyframes hv2rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hv2flow{to{stroke-dashoffset:-1230}}
@keyframes hv2ping{0%{opacity:.5;r:6}70%,100%{opacity:0;r:18}}
/* Schneller Ein-/Ausblender mit langem Halt → immer ein Wort sichtbar, keine Leerstelle */
@keyframes hv2wordcycle{0%{opacity:0;transform:translateY(10px)}1%{opacity:1;transform:none}17%{opacity:1;transform:none}18%{opacity:0;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-10px)}}

@media(max-width:980px){
  .hero-v2{padding:clamp(38px,7vw,58px) clamp(20px,5vw,72px)}
  .hero-v2 .wrap{grid-template-columns:1fr;gap:10px}
  .hero-v2 .stage{aspect-ratio:1/.64;min-height:300px;margin-top:8px}
}

@media(prefers-reduced-motion:reduce){
  .hero-v2 *,.hero-v2 *::before,.hero-v2 *::after{animation:none!important;transition:none!important}
  .hero-v2 .swap .word{opacity:0}
  .hero-v2 .swap .word:nth-child(2){opacity:1}
  .hero-v2 .pulse{opacity:0}
  .hero-v2 .eyebrow,.hero-v2 .lead,.hero-v2 .cta-row,.hero-v2 .chips,.hero-v2 .stage{opacity:1}
}
