/* --- Hero (dunkler Auftakt, Three.js-Struktur) --------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #1A2324; color: #F4F2EF;
  min-height: min(88dvh, 820px);
  display: flex; align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 80% 10%, rgba(65,113,115,.40), transparent 62%),
    radial-gradient(40rem 30rem at 6% 96%, rgba(229,96,55,.16), transparent 65%);
}
/* CSS-Fallback-Muster: sichtbar, bis das 3D-Element steht (oder auf Mobilgeräten) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 55 16.5v32.4L28 64.4 1 48.9V16.5z' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 75%);
  mask-image: linear-gradient(to left, #000 20%, transparent 75%);
}
.hero.has-3d::after { display: none; }
.hero__visual {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 55%);
  mask-image: linear-gradient(to right, transparent 8%, #000 55%);
}
.hero__visual canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero__visual { display: none; }
  .hero::after { -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 90%); mask-image: linear-gradient(to bottom, #000 10%, transparent 90%); }
}