/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile-first → 480px → 768px → 1024px → 1440px
   Konsistente Stufen: S ≤480, M ≤767, T ≤1023, D ≥1024
   ============================================ */

/* ---- SMALL PHONES (≤ 480px) — engere Abstände, kleinere Hero-Spielräume ---- */
@media (max-width: 480px) {
  :root {
    --nav-height: 60px;
  }
  .section {
    padding: var(--sp-10) 0;
  }
  .container {
    padding-inline: var(--sp-4);
  }
  /* Hero CTAs voll-breit auf sehr schmalen Screens */
  .hero__ctas .btn,
  .btn--block-mobile {
    width: 100%;
    max-width: none;
  }
}

/* ---- MOBILE (base, < 768px) ---- */

/* Nav: show hamburger, hide menu */
@media (max-width: 767px) {
  :root {
    --nav-height: 64px;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-6);
    background: var(--c-bg-deep);
    padding: max(var(--nav-height), env(safe-area-inset-top)) var(--sp-6) env(safe-area-inset-bottom);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility var(--dur-base);
  }
  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Header auf Mobile deckend halten: KEIN backdrop-filter auf dem
     Header (sonst wird er zum Containing-Block und fängt das
     position:fixed Mobile-Menü ein). !important, weil luxury-v2.css
     nach responsive.css lädt und sonst blur(24px) gewinnt. Solider
     Hintergrund verdeckt zudem durchscrollenden Text sauber. */
  .site-header,
  .site-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .site-header.is-scrolled {
    background: rgba(18, 18, 18, 0.98);
  }

  /* Chat-FAB (z-index 9999) nicht über das offene Vollbild-Menü legen */
  body.nav-open .chatbot-float {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .nav__list {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .nav__link {
    font-size: var(--fs-xl);
    padding: var(--sp-3) var(--sp-4);
  }

  .nav__cta {
    margin-left: 0;
    font-size: var(--fs-lg);
  }

  /* Hero */
  .hero__ctas {
    flex-direction: column;
    align-items: center;
  }
  .hero__ctas .btn {
    width: 100%;
    max-width: 320px;
  }

  .hero__hint {
    bottom: var(--sp-4);
  }

  /* Sections: less vertical padding */
  .section {
    padding: var(--sp-12) 0;
  }

  /* Problem */
  .problem__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Leistungen-Sektion: Sektionsnummer "05 — Leistungen" (absolut, top ~2rem)
     braucht Platz über der Überschrift; das generische .section-Padding (sp-12)
     drückte das Heading zu nah an die Nummer. */
  .pricing {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }
  /* Lücke Subtitle → erste Karte verkleinern (sp-12 war mobil zu groß). */
  .pricing__header {
    margin-bottom: var(--sp-6);
  }
  /* Pricing grid: 1 column on mobile */
  .pricing__grid {
    max-width: 420px;
    margin-inline: auto;
  }
  /* Subgrid-Spanning ist nur für nebeneinanderliegende Karten (Tablet/Desktop)
     nötig. Im Einspalter beschnitt es die höchste Karte (Maßlösung) –
     daher hier auf normales, inhaltshohes Layout umstellen. */
  .pricing-card {
    grid-template-rows: none !important;
    grid-row: auto !important;
    overflow: visible !important;   /* verhindert das Abschneiden der inhaltsreichen Maßlösung-Karte */
    height: auto !important;
  }

  .branchen__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Trust */
  .trust__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Numbers */
  .numbers__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Cases */
  .cases__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Testimonials */
  .testimonial-carousel__stack {
    width: 290px;
    height: 310px;
  }

  /* Blog */
  .blog__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  /* Grid-Items dürfen schrumpfen (min-width:auto = max-content ließ die
     Überschrift „Lassen Sie uns sprechen" über den Rand ragen). */
  .contact__info,
  .contact__form {
    min-width: 0;
  }
  #kontakt .section-heading__title {
    font-size: clamp(1.75rem, 7vw, 2.3rem);
  }

  /* Footer – entzerrt: mehr Luft zwischen den Gruppen, Links je Gruppe bleiben eng */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-6);
    row-gap: var(--sp-10);
    padding-bottom: var(--sp-8);
  }
  .footer__brand {
    grid-column: 1 / -1;
    margin-bottom: var(--sp-2);
  }
  /* Slogan als Einheit mit der PROPERUS-Wortmarke, aber etwas luftiger */
  .footer__tagline {
    margin-top: var(--sp-2);
    white-space: normal;
  }
  .footer__heading {
    margin-bottom: var(--sp-5);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center;
  }
}

/* ---- MOBILE HERO CAPS (vermeidet endlose Höhen + iOS Address-Bar-Jumps) ---- */
@media (max-width: 767px) {
  .properus-hero,
  .cinematic-hero,
  .cl-hero,
  .lh-globe {
    min-height: min(100dvh, 720px);
  }
  .lh3d-hero {
    height: auto;
    min-height: min(100dvh, 720px);
  }
  /* Section-Indikator (rechts fixed) verdeckt Content auf Mobile */
  .section-indicator,
  .section-indicators,
  .scroll-indicator-side {
    display: none !important;
  }
}

/* ---- TOUCH-TARGETS — mind. 44px auf Mobile ---- */
@media (max-width: 767px) {
  .btn,
  .nav__link,
  .nav__cta,
  .footer a,
  button:not(.icon-only) {
    min-height: var(--touch-target);
  }
}

/* ---- HOVER-FALLBACK: Aktive States für Touch ---- */
@media (hover: none) {
  /* Sticky-Hover auf Touch-Geräten verhindern — Hover-Transforms deaktivieren */
  .card--problem.is-revealed:hover,
  .card--branche.is-revealed:hover,
  .pricing-card:hover::before,
  .lh-globe__btn--primary:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Stattdessen sanftes Touch-Feedback */
  .btn:active,
  .card:active,
  .card--problem:active,
  .card--branche:active,
  .pricing-card:active,
  .lh-globe__btn:active,
  .nav__link:active {
    transform: scale(0.98);
    transition: transform 120ms var(--ease-out);
  }
}

/* ---- PERFORMANCE DOWNGRADE auf Mobile ---- */
@media (max-width: 767px) {
  /* Heavy Background-Effekte deaktivieren */
  .ch__orbs,
  .ch__grain,
  .ch__spotlight,
  .hero__orbs,
  .hero__grain,
  .hp__mesh-far,
  .hp__orbs,
  #sparkles-canvas {
    display: none !important;
  }
  /* Backdrop-Blur reduzieren (Performance).
     WICHTIG: .nav NICHT bluren – ein backdrop-filter-Vorfahr wird zum
     Containing-Block und macht das position:fixed Mobile-Menü an .nav
     (64px) statt am Viewport fest → Menü kollabierte auf Leistenhöhe. */
  .glass {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ---- REDUCED MOTION: alle dekorativen Animationen aus ---- */
@media (prefers-reduced-motion: reduce) {
  .ch__orbs,
  .ch__grain,
  .ch__spotlight,
  #sparkles-canvas,
  .hp__mesh-far,
  .hp__orbs {
    display: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- TABLET (768px+) ---- */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--sp-6);
  }

  .section {
    padding: var(--sp-20) 0;
  }

  .problem__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .branchen__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

/* ---- DESKTOP (1024px+) ---- */
@media (min-width: 1024px) {
  .section {
    padding: var(--sp-24) 0;
  }

  .section-heading {
    text-align: center;
  }
  .section-heading__subtitle {
    margin-inline: auto;
  }

  .contact__info .section-heading {
    text-align: left;
  }
  .contact__info .section-heading .section-heading__subtitle {
    margin-inline: 0;
  }

  .problem__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .branchen__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- WIDE (1440px+) ---- */
@media (min-width: 1440px) {
  .container {
    padding-inline: var(--sp-8);
  }
}