/* hero.css — mobile-first. Mobile + reduced-motion = static image hero; desktop (>=768px) = sticky-scroll journey. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 460px; background: #1b1712; }
.hero .hero-sticky { position: relative; height: 100vh; height: 100svh; min-height: 460px; overflow: hidden; }
.hero .hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero .hero-bg-layer { position: absolute; top: 0; bottom: 0; left: -6%; width: 112%; background-repeat: no-repeat; background-position: center 32%; background-size: cover; opacity: 0; will-change: opacity, transform; }
.hero .hero-bg-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(27,23,18,0) 30%, rgba(27,23,18,0.55) 62%, #1b1712 100%); }
.hero .hero-bg-berg { background-image: url('/img/scenes/scene-berg.webp'); opacity: 1; }
.hero .hero-bg-wald { background-image: url('/img/scenes/scene-wald.webp'); }
.hero .hero-bg-stadt { background-image: url('/img/scenes/scene-stadt.webp'); }
.hero .hero-stage { position: absolute; inset: 0; display: none; }
.hero .hero-stage svg { display: block; width: 100%; height: 100%; }
.hero .hero-copy { position: absolute; left: 22px; right: 22px; bottom: 60px; max-width: 560px; }
.hero .hero-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #e0a64a; margin: 0 0 12px; }
.hero .hero-heading { color: #f6efe2; font-size: 34px; margin: 0 0 12px; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.hero .hero-text { color: #d7c9b3; font-size: 16px; margin: 0; max-width: 44ch; }
.hero .hero-cta { display: inline-block; margin-top: 20px; background: #e0a64a; color: #1b1712; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; padding: 12px 22px; border-radius: 999px; }
.hero .hero-cta:hover { background: #f0b659; text-decoration: none; }
.hero .hero-caption { position: absolute; left: 50%; right: auto; top: 13%; bottom: auto; transform: translateX(-50%); width: 640px; max-width: 88vw; text-align: center; padding: 24px 40px; display: none; opacity: 0; transition: opacity 0.45s ease; background: radial-gradient(ellipse at center, rgba(10,11,16,0.58) 0%, rgba(10,11,16,0) 72%); }
.hero .hero-caption-kicker { display: block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #e0a64a; margin-bottom: 12px; }
.hero .hero-caption-name { display: block; color: #f6efe2; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 8px; text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.hero .hero-caption-note { display: block; color: #d7c9b3; font-size: 16px; margin-bottom: 18px; }
.hero .hero-caption-link { display: inline-block; color: #1b1712; background: #e0a64a; font-size: 13px; letter-spacing: 0.06em; padding: 11px 20px; border-radius: 999px; font-weight: 700; }
.hero .hero-caption-link:hover { background: #f0b659; text-decoration: none; }

@media (min-width: 768px) {
  .hero { height: 820vh; }
  .hero .hero-sticky { position: sticky; top: 0; height: 100vh; }
  .hero .hero-stage { display: block; }
  .hero .hero-cta { display: none; }
  .hero .hero-caption { display: block; }
  .hero .hero-copy { left: 56px; right: auto; bottom: 110px; transition: opacity 0.4s ease; }
  .hero .hero-heading { font-size: 60px; }
  .hero .hero-text { font-size: 19px; }
  .hero .hero-caption-name { font-size: 56px; }
}