/* swiss-overrides.css
 * Single source of truth for visual overrides that kill old-CSS residue
 * on pages migrated to the Swiss styleguide. Loaded AFTER swiss.css so
 * swiss tokens are available and we win by source order. Only loads on
 * pages that explicitly link this file — no ripple to legacy pages.
 *
 * Migrated pages as of 2026-06-02:
 *   - gmaps.html
 *   - website.html
 *   - website-redesign.html
 *
 * Delete this file once all webevolve.ch pages use swiss-native markup
 * (no .text-gradient, .gradient-cta-bg, .section-gradient classes).
 */

/* 1. Flatten animated text gradients on headlines. ------------------- */
.text-gradient,
.text-gradient-brand {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--swiss-red, #DC143C) !important;
  animation: none !important;
}

/* 2. Flatten the 100-stop animated CTA gradient. -------------------- */
.gradient-cta-bg,
.btn-primary,
.form-submit.gradient-cta-bg,
.sticky-mobile-cta-btn.gradient-cta-bg {
  background: var(--swiss-red, #DC143C) !important;
  background-image: none !important;
  color: #fff !important;
  animation: none !important;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
              background 220ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.gradient-cta-bg:hover,
.btn-primary:hover,
.form-submit.gradient-cta-bg:hover,
.sticky-mobile-cta-btn.gradient-cta-bg:hover {
  background: #B8102F !important;
  transform: translateY(-1px);
}

/* 3. Flatten the section-gradient form background. ------------------ */
.section-gradient,
.section-gradient.form-section {
  background: var(--paper, #FFFFFF) !important;
  background-image: none !important;
  color: var(--ink, #1A1A1A) !important;
}
.section-gradient h2,
.section-gradient h3,
.section-gradient label,
.section-gradient p {
  color: var(--ink, #1A1A1A) !important;
}
.section-gradient input,
.section-gradient textarea,
.section-gradient select {
  background: #fff !important;
  color: var(--ink, #1A1A1A) !important;
  border: 1px solid var(--rule, #E5E2E2) !important;
}
.section-gradient input:focus,
.section-gradient textarea:focus,
.section-gradient select:focus {
  border-bottom: 3px solid var(--swiss-red, #DC143C) !important;
  outline: none;
}

/* 4. Stop the hero image / inline SVG from flashing huge before CSS arrives.
 *    styles.css is print-deferred; without this, the hero box has no
 *    intrinsic size on first paint and the image renders at full natural width. */
.hero-image,
.hero-image img,
.hero-image svg {
  max-width: 100%;
  height: auto;
  display: block;
}
.hero-image {
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
}

/* 5. Atmosphere SVG overlay — clamp to its container during load. ---- */
.atmosphere > svg,
.atmosphere-spot,
.atmosphere::before,
.atmosphere::after {
  max-width: 100%;
  max-height: 100%;
}

/* 6. Defensive override against the LCP animations-ready JS hook.
 *    src/website.html adds `animations-ready` to body after LCP to start
 *    animated gradients. Already neutralized by rules 1-2 (!important wins)
 *    but pin the override here in case styles.css adds higher-specificity
 *    rules in the future. */
body.animations-ready .text-gradient,
body.animations-ready .text-gradient-brand,
body.animations-ready .gradient-cta-bg,
body.animations-ready .btn-primary {
  background-image: none !important;
  animation: none !important;
}

/* 7. Kill decorative SVG watermarks on legacy sections.
 *    The .mehrkunden-*-bg pseudo-elements render large decorative
 *    SVGs (map-pin, target, line chart, stairs) behind section
 *    content. They live in styles.css which is print-deferred, so
 *    they flash at intrinsic size during FOUC before the proper
 *    width/height kicks in. Hide them entirely. */
.mehrkunden-pin-bg::before,
.mehrkunden-pin-bg::after,
.mehrkunden-target-bg::before,
.mehrkunden-target-bg::after,
.mehrkunden-chart-bg::before,
.mehrkunden-chart-bg::after,
.mehrkunden-steps-bg::before,
.mehrkunden-steps-bg::after {
  display: none !important;
  content: none !important;
}

/* 9. Clamp the handwritten curved-text SVG (.hand-text-curved) so it
 *    doesn't flash at its intrinsic viewBox size (1400x80) before
 *    print-deferred styles.css applies. Same defensive pattern as the
 *    .hero-image clamp. */
.hand-text-curved {
  width: 100% !important;
  max-width: 100% !important;
  height: 65px !important;
  display: block;
  overflow: visible;
}
.hand-arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.25rem;
}
.hand-arrow {
  width: 35px !important;
  height: 28px !important;
  flex-shrink: 0;
}

/* 8. Pricing tile typography — smaller price + compact tagline.
 *    Old .pricing-price was var(--text-h2) (peaks at 3rem / 48px) which
 *    forced "ab 3'690.-" to wrap to two lines inside the card. Tagline
 *    (".pricing-note") was too tall with default line-height + 1.5rem
 *    bottom margin, so it never sat tight under the price.
 *    Card horizontal padding tightened from 40px to 28px so the longer
 *    KMU tagline ("Business-Website mit unbegrenzt Seiten", 38ch) fits
 *    on one line at a readable size. */
.pricing-card {
  padding-inline: 28px !important;
}
.pricing-price {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  margin-bottom: 0.5rem !important;
}
.pricing-note {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.005em;
  color: var(--ink, #1A1A1A) !important;
  opacity: 0.7;
}