/* ============================================================
   MALERPLUS LANDING — TABLET (768-1024px) RESPONSIVE FIX
   Behebt Android Tablet Hochformat Layout-Jitter.
   Minimal-invasiv — nur Overrides, kein Struktur-Umbau.
   ============================================================ */


/* ============================================================
   1. GLOBAL — Anti-Jitter Fundament
   ============================================================ */

html {
  /* Cross-Browser overflow-x clip (Android Chrome stabiler als overflow:hidden) */
  overflow-x: clip;
}

html, body {
  /* Verhindert horizontales "Bewegen" bei 100vw Elementen + Scrollbar */
  max-width: 100%;
}


/* ============================================================
   2. FIX: Android Chrome "floating" Background
   Der fixed Gradient-Layer (body::before) verschiebt sich auf
   Android Chrome waehrend die URL-Bar ein-/ausfaehrt → Inhalt
   und Background scrollen auseinander.
   Loesung: auf Tablets statisch halten, statt fixed.
   ============================================================ */

@media (max-width: 1100px) {
  body::before {
    position: absolute !important;
    height: 200vh;  /* gross genug dass er beim Scrollen nicht endet */
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    pointer-events: none;
  }
}


/* ============================================================
   3. TABLET BREAKPOINT (769-1024px) — fehlte komplett
   Android Lenovo Tablet Hochformat = typisch 800-820px
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* -- HERO: Stack wie Mobile (Text ueber Visual) -- */
  .hero {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding-bottom: 48px;
  }
  .hero-visual {
    order: 2;
    padding: 0;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
  }
  .hero-visual::before {
    display: none;  /* schwere Decoration auf Tablet vereinfachen */
  }
  .hero-video-wrap {
    transform: none;
  }
  .hero-video-wrap:hover {
    transform: none;
  }
  .hero-notif-row {
    display: none;  /* optional Decoration, bricht Layout auf Tablet */
  }

  /* -- Feature Grid: klar 2-spaltig mit richtigem Padding -- */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* -- Pricing: single column Card fuer Lesbarkeit -- */
  .pricing-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
  }

  /* -- Step-List: 2-spaltig, keine horizontale Linie -- */
  .step-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .step-list::before {
    display: none;
  }

  /* -- Trade-Tags: 2-3 spaltig statt 4 -- */
  .trade-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* -- Who-Block: 1-spaltig mit mehr Luft -- */
  .who-block {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  /* -- Contact: 1-spaltig -- */
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* -- Reviews: Form 1-spaltig -- */
  .rv-form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* -- AI-Main-Card: 1-spaltig, Phone-Mockup zentriert -- */
  .ai-main-card {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 32px 28px;
  }
  .ai-phone {
    width: 260px !important;
    margin: 0 auto;
  }

  /* -- Wrap-Padding leicht erhoehen fuer Luft links/rechts -- */
  .wrap {
    padding: 0 32px;
  }

  /* -- Nav ausblenden auf Tablet (war nur bis 980 definiert) -- */
  nav {
    display: none;
  }

  /* -- Header Actions: kompakter -- */
  .header-inner {
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* -- Proof-Strip: nicht zu eng, mit Wrap -- */
  .proof-strip {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .proof-divider {
    display: none;
  }

  /* -- Sections: weniger vertikales Padding -- */
  section,
  .features,
  .reviews-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* -- Footer -- */
  footer {
    flex-wrap: wrap;
    gap: 12px;
    text-align: center;
    justify-content: center;
  }
  footer a {
    margin: 0 8px;
  }
}


/* ============================================================
   4. HOVER-STATES nur auf echten Pointer-Geraeten
   Android Tablet feuert :hover auf Touch → Layout-Sprung
   beim Touch-End. Besser: Hover nur bei hover-faehigen Geraeten.
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .hero-video-wrap:hover,
  .feature-card:hover,
  .pricing-card:hover,
  .step:hover,
  .trade-tag:hover {
    transform: none !important;
  }
}


/* ============================================================
   5. FLOATING CONTACT BUTTON — Tablet anpassen
   Auf Tablet etwas kleiner + weniger aufdringlich.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .float-btn {
    bottom: 20px;
    right: 20px;
  }
}


/* ============================================================
   6. SAFE-AREA / DVH FIX (Android URL-Bar-Jitter)
   100vh im Mobile-Block explizit nicht nutzen.
   ============================================================ */

@media (max-width: 1024px) {
  /* Mobile-Nav nutzt inset:0 — das ist okay.
     Wichtig: keine height:100vh auf scrollbaren Containern. */
  .mobile-nav {
    min-height: 100dvh;
  }
}


/* ============================================================
   7. REDUCED MOTION + PERFORMANCE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  .hero-video-wrap,
  .feature-card,
  .trade-tag {
    transition: none !important;
  }
}