/* === Hero-Sektion === */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 24, 46, .18), rgba(8, 24, 46, .56)),
    radial-gradient(circle at 50% 42%, rgba(134, 198, 255, .20), transparent 28%),
    url('/assets/img/hero-bg.jpg') center/cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 31, 59, .30) 0%,
    rgba(14, 37, 72, .62) 50%,
    rgba(14, 37, 72, .88) 100%);
}

/* --- Dekorative Layer --- */
.hero-layer,
.hero-ring,
.hero-grid-lines {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero-layer-left {
  inset: auto auto -8rem -4rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 148, 255, .22), rgba(77, 148, 255, 0) 66%);
  filter: blur(8px);
  animation: drift 18s ease-in-out infinite;
}
.hero-layer-right {
  inset: -8rem -4rem auto auto;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 115, 255, .28), rgba(52, 115, 255, 0) 66%);
  filter: blur(10px);
  animation: drift 21s ease-in-out infinite reverse;
}
.hero-ring {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  mix-blend-mode: screen;
}
.hero-ring-a {
  width: 16rem;
  height: 16rem;
  left: -2rem;
  top: 18%;
  animation: spinSlow 28s linear infinite;
}
.hero-ring-b {
  width: 12rem;
  height: 12rem;
  right: -1rem;
  top: 24%;
  animation: spinSlow 20s linear infinite reverse;
}
.hero-grid-lines {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 86%);
  opacity: .25;
  animation: gridFloat 14s linear infinite;
}

/* --- Hero Content --- */
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 108px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-logo {
  width: min(160px, 36vw);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .28));
  margin-bottom: 20px;
}
.hero-kicker {
  margin: 0 0 10px;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #cfe8ff;
  font-weight: 800;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}
.hero-subline {
  margin: 14px 0 0;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 400;
  color: rgba(255, 255, 255, .86);
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  width: 100%;
}
.hero-actions .btn {
  width: 100%;
}

/* --- Marquee --- */
.hero-marquee {
  margin-top: 40px;
  width: min(920px, 100%);
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
}
.hero-marquee-track {
  display: flex;
  gap: 34px;
  padding: 14px 24px;
  min-width: max-content;
  animation: marquee 22s linear infinite;
}
.hero-marquee-track span {
  font-weight: 800;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .84rem;
}

/* --- Scroll-Indicator --- */
.scroll-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 32px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
}
.scroll-indicator span {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: bounceArrow 1.9s ease-in-out infinite;
}

/* --- Desktop --- */
@media (min-width: 768px) {
  .hero-inner {
    padding-top: 120px;
    padding-bottom: 62px;
  }
  .hero-logo {
    width: min(190px, 36vw);
    margin-bottom: 24px;
  }
  .hero-kicker { font-size: .96rem; }
  .hero-subline { margin-top: 18px; }
  .hero-actions {
    margin-top: 34px;
    width: auto;
  }
  .hero-actions .btn { width: auto; }
  .hero-marquee {
    margin-top: 52px;
    border-radius: var(--radius-pill);
  }
  .hero-marquee-track { padding: 16px 24px; }
  .hero-marquee-track span { font-size: .88rem; }
  .hero-layer-left { width: 38rem; height: 38rem; inset: auto auto -12rem -8rem; }
  .hero-layer-right { width: 34rem; height: 34rem; inset: -14rem -8rem auto auto; }
  .hero-ring-a { width: 22rem; height: 22rem; left: 4%; }
  .hero-ring-b { width: 16rem; height: 16rem; right: 6%; }
  .hero-grid-lines { background-size: 72px 72px; }
  .scroll-indicator { width: 54px; height: 54px; margin-top: 42px; }
}

/* --- Keyframes --- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes drift { 50% { transform: translate3d(30px, -24px, 0) scale(1.06); } }
@keyframes gridFloat { 0% { transform: translateY(0); } 100% { transform: translateY(72px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bounceArrow { 50% { transform: rotate(45deg) translate(4px, 4px); } }