/* ===== SCROLL ANIMATIONS ===== */

/* ── Backwards-Compat ────────────────────────────────────────── */
.wh-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-fade.wh-in { opacity: 1; transform: translateY(0); }

/* ── Scroll-Trigger Varianten ────────────────────────────────── */
.wh-anim-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-anim-up.wh-in { opacity: 1; transform: translateY(0); }

.wh-anim-up-big {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-anim-up-big.wh-in { opacity: 1; transform: translateY(0); }

.wh-anim-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity .9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-anim-left.wh-in { opacity: 1; transform: translateX(0); }

.wh-anim-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity .9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-anim-right.wh-in { opacity: 1; transform: translateX(0); }

.wh-anim-scale {
  opacity: 0;
  transform: scale(0.95) translateY(14px);
  transition: opacity .9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wh-anim-scale.wh-in { opacity: 1; transform: scale(1) translateY(0); }

/* ── Hero Reveal Sequenz (CSS Keyframes, sofort beim Laden) ─── */
@keyframes wh-kf-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wh-kf-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wh-kf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wh-kf-btn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wh-hero-sub     { animation: wh-kf-down .85s cubic-bezier(0.25, 0.46, 0.45, 0.94) .2s  both; }
.wh-hero-h1      { animation: wh-kf-up   .95s cubic-bezier(0.25, 0.46, 0.45, 0.94) .35s both; }
.wh-hero-divider { animation: wh-kf-fade .7s  ease                                  .58s both; }
.wh-hero-price   { animation: wh-kf-up   .8s  cubic-bezier(0.25, 0.46, 0.45, 0.94) .68s both; }
.wh-hero-btn     { animation: wh-kf-btn  .9s  cubic-bezier(0.25, 0.46, 0.45, 0.94) .85s both; }

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wh-fade,
  .wh-anim-up, .wh-anim-up-big,
  .wh-anim-left, .wh-anim-right,
  .wh-anim-scale {
    opacity: 1; transform: none; transition: none;
  }
  .wh-hero-sub, .wh-hero-h1, .wh-hero-divider,
  .wh-hero-price, .wh-hero-btn {
    animation: none;
  }
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.wh-page-wrapper,
.wh-page-wrapper * {
  box-sizing: border-box;
}

.wh-page-wrapper {
  background: #151515;
  color: #ffffff;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}