/* "Individual Entwicklung" (home page): three floating glass cards on the glowing grid of the NWS
   world, connected by an animated flow line – replaces the static N logo. Decorative (aria-hidden). */
.nws-build {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(81, 74, 157, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(74, 129, 211, 0.35), transparent 70%),
    #0a0b20;
  box-shadow: 0 18px 50px rgba(18, 19, 44, 0.12);
  line-height: 1.35;
}

.nws-build__grid {
  position: absolute;
  inset: 40% -20% -30%;
  background-image:
    linear-gradient(rgba(74, 129, 211, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 129, 211, 0.28) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: top;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 95%);
}

.nws-build__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nws-build__flow path {
  fill: none;
  stroke: url(#nws-build-flow);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  /* 48 steps in 3 s (16 updates per second instead of 60): the dashes move slowly (1.3 px per step), it
     looks the same – but the whole illustration is repainted 4× less often (measured: 14 % → ~4 % CPU).
     No drop-shadow filter for the same reason. */
  animation: nws-build-flow 3s steps(48) infinite;
}

@keyframes nws-build-flow {
  to {
    stroke-dashoffset: -64;
  }
}

.nws-build__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  /* opaque instead of a backdrop blur: the cards float, so the blur was recomputed every frame (CPU/GPU) */
  background: rgba(22, 23, 52, 0.94);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.76);
  animation: nws-build-float 6s ease-in-out infinite;
}

.nws-build__card > span:last-child {
  display: grid;
  line-height: 1.35;
}

.nws-build__card strong {
  color: #fff;
  font-family: 'Urbanist Variable', 'Urbanist', Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
}

.nws-build__card small {
  font-family: 'DM Sans Variable', 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

.nws-build__card--1 {
  top: 12%;
  left: 8%;
}

.nws-build__card--2 {
  top: 40%;
  right: 7%;
  animation-delay: -2s;
}

.nws-build__card--3 {
  bottom: 12%;
  left: 16%;
  animation-delay: -4s;
}

.nws-build__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(45deg, #4a81d3 0%, #514a9d 100%);
  color: #fff;
  box-shadow: 0 18px 50px rgba(74, 129, 211, 0.35);
}

.nws-build__icon svg {
  display: block;
}

.nws-build__logo {
  position: absolute;
  right: 22px;
  bottom: 20px;
  color: #5f8df1;
  opacity: 0.85;
  line-height: 0;
}

@keyframes nws-build-float {
  50% {
    transform: translateY(-10px);
  }
}

/* Narrow phones: the cards stack down the left so none is cut off. */
@media (max-width: 420px) {
  .nws-build__card {
    padding: 12px 14px 12px 12px;
  }
  .nws-build__card--1 {
    left: 6%;
  }
  .nws-build__card--2 {
    right: 4%;
  }
  .nws-build__card--3 {
    left: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nws-build__card,
  .nws-build__flow path {
    animation: none;
  }
}