/* =========================================================
   MOBILE SCROLL STABILITY – SAFE VERSION
========================================================= */

html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- iOS vh FIX ---------------- */

:root {
  --vh: 1vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }

  .hero {
    min-height: calc(var(--vh) * 100);
  }
}

/* ---------------- HEADER FIX ---------------- */
/* wichtig: KEIN zusätzliches transform auf body */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------------- CARD PERFORMANCE ---------------- */

.animate-card,
.feature,
.step-card,
.price-card,
.stat-item,
.why-feature {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Mobile: sanftere Animationen statt Kill */
@media (max-width: 768px) {
  .animate-card {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
}

/* ---------------- PRICE SLIDER ISOLATION ---------------- */
/* DAS ist wichtig gegen Ruckeln */

.price-grid {
  contain: layout paint style;
  will-change: scroll-position;
}

.price-card {
  transform: translateZ(0);
}

/* ---------------- SHADOW OPTIMIZATION ---------------- */

@media (max-width: 768px) {
  .price-card,
  .feature,
  .step-card {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
}

/* ---------------- HOVER BUGS ---------------- */

@media (hover: none) {
  a:hover,
  button:hover {
    transform: none !important;
  }
}