/* NewGalaxie Spitzenniveau — additive motion layer. Does not change copy or prices. */

/* View Transitions between home and /immobilien/ */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:ngVtOut .38s cubic-bezier(.16,1,.3,1) both}
::view-transition-new(root){animation:ngVtIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes ngVtOut{to{opacity:0;filter:blur(8px)}}
@keyframes ngVtIn{from{opacity:0;filter:blur(10px);transform:scale(1.02)}to{opacity:1;filter:none;transform:none}}

/* Lenis helpers */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

#ng-galaxy{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none
}
html.ng-no-webgl #ng-galaxy,
html.ng-reduce #ng-galaxy{display:none}
html.ng-webgl #space-grid{opacity:.22}
html.ng-webgl #space-glow{opacity:.7}

/* Dark scrim behind hero copy so muted text stays WCAG AA over the galaxy */
html.ng-webgl .hero .wrap,
html.ng-webgl section.hero .wrap{position:relative;z-index:1}
html.ng-webgl .hero .wrap::before,
html.ng-webgl section.hero .wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-8px;right:-4px;top:-10px;bottom:-14px;border-radius:22px;
  background:
    radial-gradient(ellipse 82% 72% at 30% 40%,rgba(10,10,11,.86) 0%,rgba(10,10,11,.64) 50%,rgba(10,10,11,.2) 78%,transparent 100%),
    linear-gradient(180deg,rgba(10,10,11,.28) 0%,rgba(10,10,11,.74) 24%,rgba(10,10,11,.8) 68%,rgba(10,10,11,.42) 100%)
}
@media (min-width:900px){
  html.ng-webgl .hero .wrap::before,
  html.ng-webgl section.hero .wrap::before{left:-28px;right:-18px;top:-16px;bottom:-20px}
}
html.ng-webgl .hero .lead,
html.ng-webgl section.hero .lead{
  text-shadow:0 0 18px rgba(10,10,11,.96),0 1px 10px rgba(10,10,11,.92),0 0 2px rgba(10,10,11,.85)
}
html.ng-webgl .hero h1,
html.ng-webgl section.hero h1{text-shadow:0 2px 22px rgba(10,10,11,.55)}
html.ng-webgl .s .lead,
html.ng-webgl section .lead{text-shadow:0 0 16px rgba(10,10,11,.9),0 1px 8px rgba(10,10,11,.85)}
html.ng-webgl .banner{background:rgba(14,14,16,.94)}
html.ng-webgl .promise{background:rgba(24,10,13,.9)}
html.ng-webgl .card,
html.ng-webgl .ncard,
html.ng-webgl .step,
html.ng-webgl .box,
html.ng-webgl .p,
html.ng-webgl .sticky .txt{background:rgba(14,14,16,.95)}

#ng-system{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none
}

/* Taller hero so the galaxy has room — desktop only */
@media (min-width:900px){
  .s.hero,section.hero{
    min-height:calc(100svh - var(--anchor-shift));
    display:flex;flex-direction:column;justify-content:center;
    padding:56px 0 80px
  }
  .s.hero .scrolldown{display:flex}
}

/* Split characters */
.ng-word{display:inline-block;white-space:nowrap}
.ng-ch{display:inline-block;will-change:transform}
.hero h1 .mask,.hero h1.giant .mask{overflow:hidden}
.hero h1 .w,.hero h1{overflow:hidden}

/* When GSAP runs, drop the old CSS rise to avoid a double fade */
html.ng-motion .s.in:not(.hero) .k,
html.ng-motion .s.in:not(.hero) .kx{animation:none}

/* Magnet buttons: JS sets --mx/--my; keep hover readable */
html.ng-motion .btn.ng-magnet{
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:background .25s var(--ease),border-color .25s,transform .18s var(--ease)
}

/* Sticky bausteine become a pinned story on large screens */
html.ng-sticky-on .s.sticky{
  padding:0
}
html.ng-sticky-on .sticky .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  min-height:calc(100svh - var(--anchor-shift));
  padding:48px 0
}
html.ng-sticky-on .sticky .left{
  display:block;
  position:relative;
  min-height:280px;
  grid-template-columns:1fr
}
html.ng-sticky-on .sticky .txt{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
  display:flex
}
html.ng-sticky-on .sticky .txt.is-on{
  opacity:1;
  transform:none;
  pointer-events:auto
}
html.ng-sticky-on .sticky .words span{opacity:.28;transition:opacity .4s,color .4s}
html.ng-sticky-on .sticky .words span.on{opacity:1;color:#fff}
html.ng-sticky-on .sticky .cnt{letter-spacing:.18em}

/* System section gets stage height for the orbit morph */
html.ng-motion #three.three{
  min-height:min(78vh,760px);
  display:flex;
  align-items:center
}
html.ng-motion #three.three .wrap{
  max-width:min(1120px,100% - 48px)
}

/* Grow: GSAP scales the wordmark while pinned */
html.ng-motion .s.grow{
  min-height:150vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
html.ng-motion .grow .gtxt{
  will-change:transform
}

/* Text mask over the local Hubble field */
#maskS.maskS{
  position:relative;
  min-height:min(78vh,680px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:0
}
#maskS .pic{
  display:block;
  position:absolute;
  inset:0;
  background:
    url("../space-bg-desktop.webp") center/cover no-repeat,
    #0a0a0b
}
@media (max-width:760px){
  #maskS .pic{background:url("../space-bg-mobile.webp") center/cover no-repeat,#0a0a0b}
}
#maskS svg{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}
#maskS .cap{
  position:relative;
  z-index:2;
  padding:48px 0 56px;
  text-shadow:0 2px 24px rgba(0,0,0,.55)
}
#ng-wipe{
  position:absolute;inset:0;width:100%;height:100%;display:block
}

/* Arrow tracks as a quiet marquee */
html.ng-motion .s.arrows{overflow:hidden}
html.ng-motion .s.arrows .track{
  display:block;
  position:absolute;
  left:0;right:0;
  white-space:nowrap;
  overflow:hidden;
  opacity:.14;
  pointer-events:none;
  font-weight:700;
  letter-spacing:.12em;
  font-size:18px;
  color:#fff
}
html.ng-motion .s.arrows .track.t1{top:18%}
html.ng-motion .s.arrows .track.t2{bottom:18%;color:var(--red-bright);opacity:.22}
html.ng-motion .s.arrows .track span{
  display:inline-block;
  animation:ngMarquee 22s linear infinite
}
html.ng-motion .s.arrows .track.t2 span{animation-direction:reverse;animation-duration:28s}
@keyframes ngMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Package cards: a thin red glint on the recommended one */
html.ng-motion .p.hot,html.ng-motion .card.hl{
  background:
    linear-gradient(180deg,rgba(200,16,46,.08),transparent 42%),
    rgba(17,17,19,.86)
}

@media (prefers-reduced-motion:reduce){
  #ng-galaxy,#ng-system,#ng-wipe{display:none!important}
  html.ng-motion .s.arrows .track span{animation:none}
  .ng-ch{transform:none!important;opacity:1!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

@media (max-width:900px){
  html.ng-sticky-on .sticky .wrap,
  html.ng-sticky-on .sticky .left,
  html.ng-sticky-on .sticky .txt{
    display:flex;position:static;inset:auto;opacity:1;transform:none;min-height:0;grid-template-columns:1fr
  }
  html.ng-motion #three.three{min-height:0}
  html.ng-motion .s.grow{min-height:0}
}