/* ============================================================
   responsive.css — Mobile-Retrofit für AI Smart Network
   Die Seiten sind mit React-Inline-Styles (feste Pixel) gebaut.
   Stylesheet-Regeln mit !important überschreiben Inline-Styles,
   daher lässt sich das Layout hier zentral mobil-tauglich machen.
   ============================================================ */

/* Grund-Schutz: kein horizontales Scrollen / Überlauf */
html, body { max-width: 100%; }

/* ---------- Tablet & darunter ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }

  /* Bild/SVG/Canvas nie breiter als der Container */
  img, svg, canvas, video { max-width: 100%; height: auto; }

  /* Jede mehrspaltige Grid → eine Spalte */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Großzügige Seitenränder (56px) deutlich reduzieren */
  nav, section, header, footer, main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  nav {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    gap: 12px 16px !important;
    flex-wrap: wrap !important;
    row-gap: 12px !important;
  }
  /* Link-/Steuer-Gruppen in der Nav umbrechen, engere Abstände */
  nav > div {
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
  }

  /* Überschriften, die inline riesig gesetzt sind, bändigen */
  h1 { font-size: clamp(32px, 8.5vw, 58px) !important; letter-spacing: -1.2px !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(26px, 6.4vw, 46px) !important; letter-spacing: -0.8px !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(19px, 4.8vw, 30px) !important; }
}

/* ---------- Telefon ---------- */
@media (max-width: 560px) {
  nav, section, header, footer, main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section { padding-top: 40px !important; }

  /* Buttons/Links, die nebeneinander stehen, dürfen umbrechen
     und volle Breite einnehmen, statt aus dem Schirm zu laufen */
  section [style*="display: flex"][style*="gap"] > a,
  section [style*="display: flex"][style*="gap"] > button {
    flex: 1 1 auto;
  }

  /* Feste Demo-/Mockup-Breiten skalieren statt überlaufen */
  [style*="width: 360"], [style*="width:360"],
  [style*="width: 380"], [style*="width:380"],
  [style*="width: 400"], [style*="width:400"] {
    max-width: 100% !important;
  }

  /* Etwas kompaktere Typo auf sehr schmalen Schirmen */
  h1 { font-size: clamp(28px, 9vw, 44px) !important; }
}