/* ==========================================================================
   Sonnenuntergang-Hero – Phase 1
   Gilt ausschließlich für #home und dessen eigene Unterelemente.
   ========================================================================== */

#home.hero-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #14263a;
  color: #fff;
}

#home .hero-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100vh * 4 / 3));
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
}

#home .hero-background,
#home .hero-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#home .hero-background {
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#home .hero-overlay {
  overflow: visible;
}

#home .hero-name,
#home .hero-tagline {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  fill: rgba(255, 255, 255, 0.92);
}

#home .hero-name {
  font-size: 72px;
}

#home .hero-tagline {
  font-size: 30px;
  fill: rgba(245, 248, 252, 0.82);
}

#home .hero-identity-art {
  transform-box: view-box;
  transform-origin: 768px 585px;
}

#home .hero-scroll-arrow {
  fill: none;
  stroke: rgba(235, 242, 249, 0.68);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke 0.2s ease, transform 0.2s ease;
  transform-origin: 768px 1023px;
}

#home a:hover .hero-scroll-arrow,
#home a:focus-visible .hero-scroll-arrow {
  stroke: rgba(255, 255, 255, 0.94);
  transform: translateY(3px);
}

#home a:focus-visible {
  outline: none;
}

@media (max-width: 768px) {
  #home.hero-section {
    min-height: 600px;
  }

  #home .hero-identity-art {
    transform: scale(0.7);
  }
}

@media (max-width: 430px) {
  #home .hero-identity-art {
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  #home .hero-scroll-arrow {
    transition: none;
  }
}