/*
 * desktop-premium-buttons.css
 * DESKTOP FIX-RUN 1C — Stripe/Apple-Grade Buttons + Hero Visuals
 *
 * Scope:
 *   - Primary/Secondary Buttons (Gradient, Glow, Spring-Hover)
 *   - Card Hover-Lift (Spring-Easing)
 *   - Navbar Glassmorphism
 *   - Hero-Background Glow (für Pages ohne Visuals)
 *   - Preisrechner Hero-Collapse Fix
 *   - Selection-Color
 *
 * Hover-States: NUR Desktop (hover: hover) — Mobile/Touch unverändert.
 * Mobile (<1024px): vollständig unangetastet.
 */

/* =================================================================
   PREISRECHNER HERO KOLLAPS-FIX (kritisch — gilt auf allen Viewports)
   Hero collapsed auf 73px laut Audit. Min-Height + Padding hart setzen.
   ================================================================= */
html body main > section.hero,
html body section.hero {
  position: relative;
}

@media (min-width: 1024px) {
  /* Preisrechner & generelle Hero-Sektionen mit Collapse-Risiko */
  html body main > section.hero {
    min-height: clamp(600px, 80vh, 820px) !important;
    padding: clamp(80px, 10vh, 120px) 0 clamp(64px, 8vh, 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body main > section.hero > .container {
    width: 100%;
  }
}

/* =================================================================
   HERO BACKGROUND GLOW (Apple/Tesla Mesh-Gradient)
   Für 7 Pages ohne Hero-Visual: subtile Radial-Gradients overlay.
   ================================================================= */
@media (min-width: 1024px) {
  html body main > section.hero,
  html body section.hero,
  html body section.wow-hero,
  html body section.ga-hero,
  html body section.inline-lead-form,
  html body section[class*="hero"]:not(.no-glow) {
    position: relative;
  }
  html body main > section.hero::before,
  html body section.hero::before,
  html body section.wow-hero::before,
  html body section.ga-hero::before,
  html body section[class*="hero"]:not(.no-glow):not(.hero-bg-layer)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 50% at 25% 20%, rgba(56,189,248,0.10), transparent 65%),
      radial-gradient(ellipse 50% 40% at 80% 40%, rgba(14,165,233,0.08), transparent 65%),
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(2,132,199,0.06), transparent 70%);
  }
  html body main > section.hero > *,
  html body section.hero > *,
  html body section.wow-hero > *,
  html body section.ga-hero > * {
    position: relative;
    z-index: 1;
  }
}

/* =================================================================
   PRIMARY BUTTONS — Stripe Style (Desktop only)
   ================================================================= */
@media (min-width: 1024px) {
  html body .btn-primary,
  html body button.btn-primary,
  html body a.btn-primary,
  html body .cta:not(.nav-cta):not(.cta-secondary):not(.btn-secondary),
  html body button.primary,
  html body a.cta:not(.nav-cta):not(.cta-secondary),
  html body a.btn.btn-primary,
  html body .hero .btn:not(.btn-secondary):not(.btn-ghost) {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    box-shadow:
      0 4px 14px rgba(14,165,233,0.32),
      0 1px 0 rgba(255,255,255,0.15) inset !important;
    border: 1px solid rgba(56,189,248,0.4) !important;
    transition:
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.2s ease,
      background 0.2s ease !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    letter-spacing: -0.005em !important;
  }

  /* Hover-Lift + Glow (nur auf Geräten mit echtem Hover) */
  @media (hover: hover) and (pointer: fine) {
    html body .btn-primary:hover,
    html body button.btn-primary:hover,
    html body a.btn-primary:hover,
    html body .cta:not(.nav-cta):not(.cta-secondary):not(.btn-secondary):hover,
    html body button.primary:hover,
    html body a.cta:not(.nav-cta):not(.cta-secondary):hover,
    html body .hero .btn:not(.btn-secondary):not(.btn-ghost):hover {
      transform: translateY(-2px) !important;
      box-shadow:
        0 8px 24px rgba(14,165,233,0.45),
        0 1px 0 rgba(255,255,255,0.25) inset !important;
      background: linear-gradient(135deg, #5BC8FA 0%, #1AB1E8 50%, #0590D0 100%) !important;
    }

    /* Glow-Halo via ::after */
    html body .btn-primary::after,
    html body a.btn-primary::after,
    html body button.btn-primary::after,
    html body .cta:not(.nav-cta):not(.cta-secondary):not(.btn-secondary)::after,
    html body .hero .btn:not(.btn-secondary):not(.btn-ghost)::after {
      content: '' !important;
      position: absolute !important;
      inset: -4px !important;
      background: linear-gradient(135deg, #38BDF8, #0EA5E9) !important;
      filter: blur(14px) !important;
      opacity: 0 !important;
      z-index: -1 !important;
      transition: opacity 0.3s ease !important;
      border-radius: 16px !important;
      pointer-events: none !important;
    }
    html body .btn-primary:hover::after,
    html body a.btn-primary:hover::after,
    html body button.btn-primary:hover::after,
    html body .cta:not(.nav-cta):not(.cta-secondary):not(.btn-secondary):hover::after,
    html body .hero .btn:not(.btn-secondary):not(.btn-ghost):hover::after {
      opacity: 0.45 !important;
    }

    html body .btn-primary:active,
    html body a.btn-primary:active,
    html body button.btn-primary:active {
      transform: translateY(0) !important;
      box-shadow:
        0 2px 8px rgba(14,165,233,0.30),
        0 1px 0 rgba(255,255,255,0.15) inset !important;
      transition-duration: 0.08s !important;
    }
  }

  /* Focus-Visible (a11y) */
  html body .btn-primary:focus-visible,
  html body a.btn-primary:focus-visible,
  html body button.btn-primary:focus-visible,
  html body .cta:focus-visible {
    outline: 2px solid #7DD3FC !important;
    outline-offset: 3px !important;
  }
}

/* =================================================================
   SECONDARY BUTTONS — Ghost Style (Desktop only)
   ================================================================= */
@media (min-width: 1024px) {
  html body .btn-secondary,
  html body a.btn-secondary,
  html body button.btn-secondary,
  html body .btn-ghost,
  html body a.cta-secondary,
  html body button.cta-secondary {
    background: rgba(255,255,255,0.05) !important;
    color: #F0F9FF !important;
    font-weight: 600 !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(125, 211, 252, 0.28) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 2px 8px rgba(0,0,0,0.10) !important;
    transition:
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.2s ease,
      border-color 0.2s ease !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    html body .btn-secondary:hover,
    html body a.btn-secondary:hover,
    html body button.btn-secondary:hover,
    html body .btn-ghost:hover,
    html body a.cta-secondary:hover {
      background: rgba(56, 189, 248, 0.10) !important;
      border-color: rgba(125, 211, 252, 0.55) !important;
      transform: translateY(-2px) !important;
      color: #FFFFFF !important;
    }
    html body .btn-secondary:active,
    html body a.btn-secondary:active {
      transform: translateY(0) !important;
      transition-duration: 0.08s !important;
    }
  }

  html body .btn-secondary:focus-visible,
  html body a.btn-secondary:focus-visible {
    outline: 2px solid #7DD3FC !important;
    outline-offset: 3px !important;
  }
}

/* =================================================================
   CARD HOVER-LIFT (Spring-Easing)
   ================================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html body .card,
  html body article.card,
  html body .feature-card,
  html body .pricing-card,
  html body .testimonial-card,
  html body [class*="-card"]:not([class*="card-"]):not(.no-hover) {
    transition:
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.25s ease,
      border-color 0.25s ease !important;
    will-change: transform;
  }
  html body .card:hover,
  html body article.card:hover,
  html body .feature-card:hover,
  html body .pricing-card:hover,
  html body .testimonial-card:hover,
  html body [class*="-card"]:not([class*="card-"]):not(.no-hover):hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  }
}

/* =================================================================
   NAVBAR GLASSMORPHISM (Desktop only)
   ================================================================= */
@media (min-width: 1024px) {
  html body header.site-header,
  html body nav#nav,
  html body header[role="banner"] {
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    background: rgba(10, 20, 40, 0.72) !important;
    border-bottom: 1px solid rgba(125, 211, 252, 0.10) !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
  }
  /* Scrolled state via JS-class — wenn vorhanden, mehr Kontrast */
  html body header.site-header.is-scrolled,
  html body header[role="banner"].is-scrolled {
    background: rgba(10, 20, 40, 0.88) !important;
    border-bottom-color: rgba(125, 211, 252, 0.18) !important;
  }
}

/* =================================================================
   SELECTION COLOR (alle Viewports)
   ================================================================= */
::selection {
  background: #38BDF8;
  color: #0A1428;
  text-shadow: none;
}
::-moz-selection {
  background: #38BDF8;
  color: #0A1428;
  text-shadow: none;
}

/* =================================================================
   REDUCED-MOTION RESPECT
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html body .btn-primary,
  html body .btn-secondary,
  html body .cta,
  html body .card,
  html body [class*="-card"] {
    transition: none !important;
  }
  html body .btn-primary:hover,
  html body .btn-secondary:hover,
  html body .card:hover {
    transform: none !important;
  }
}