/* ═══════════════════════════════════════════════════════
   3D-Tiefe für die Startseite — Ergänzung zu styles-v2.css
   Hero: Inhalt und blaue Lichtkugel auf verschiedenen Tiefen.
   Programmkarten: Neigung zur Maus mit goldenem Lichtreflex.
   Die Bewegung selbst steuert hero-3d.js.
   ═══════════════════════════════════════════════════════ */

#hero { perspective: 1200px; }

.hero-content {
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Lichtkugel — liegt tiefer als der Text und wandert stärker mit */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.hero-orb-blau {
  width: 420px; height: 420px;
  bottom: 6%; right: 6%;
  background: rgba(36, 69, 127, 0.55);
}

/* Programmkarten */
.program-card.tilt { transform-style: preserve-3d; }
.program-card.tilt-aktiv {
  /* Kurze Übergangszeit, damit die Karte der Maus folgt statt nachzuhinken */
  transition: transform 0.12s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tilt-glanz {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(201, 168, 76, 0.18), transparent 55%);
}
.program-card.tilt-aktiv .tilt-glanz { opacity: 1; }

@media (max-width: 700px) {
  .hero-orb-blau { width: 260px; height: 260px; }
}