/* 3D-Szene im Hero der Startseite (Quelle: tools/hero3d.js, gebaut mit tools/hero3d-build.sh) */
.hero { overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; pointer-events: none; }
.hero > .wrap a, .hero > .wrap button { pointer-events: auto; }
.hero3d { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s ease; }
.hero3d.ready { opacity: 1; }
.hero3d canvas { width: 100%; height: 100%; display: block; }
/* leichter Schleier hinter dem Text, damit er über der Szene lesbar bleibt */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 38%, transparent 62%); }
.hero .scroll-hint { z-index: 3; }
@media (min-width: 961px) {
  .hero h1 { font-size: clamp(2.6rem, 5.1vw, 4.9rem); max-width: 11ch; }
  .hero-sub { max-width: 26ch; }
  .claim { max-width: 34ch; }
}

@media (max-width: 960px) {
  .hero { justify-content: flex-start; padding-top: calc(50svh + 1rem); }
  .hero3d { bottom: auto; top: 3.5rem; height: 48svh; }
  .hero::after { display: none; }
}