/* ============================================================
   Mobil-Fix  |  hauptstadt-elektriker.de
   Stand: 07.09.2026
   Zweck: beseitigt das seitliche Verrutschen (horizontales
   Scrollen) auf Handys von 320 bis 430 px Breite.
   Einbau: diese Datei ins Web-Verzeichnis legen und in JEDER
   HTML-Datei als LETZTE Zeile vor </head> einbinden:
     <link rel="stylesheet" href="/mobile-fix.css">
   ============================================================ */

@media (max-width: 900px) {

  /* 0) Grundschutz gegen seitliches Scrollen */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, table, pre { max-width: 100% !important; height: auto; }

  /* 1) Hauptursache: zwei Blöcke stehen per Inline-Style fest
        auf zwei Spalten und brechen deshalb auf dem Handy nicht um
        (Abschnitt "Ihre Service-App" und "Elektriker in Ihrer Nähe") */
  #app   > .wrap,
  #naehe > .wrap { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* 2) Raster- und Flex-Kinder dürfen schmaler werden als ihr Inhalt */
  .wrap > *, .grid > *, .contact-grid > * { min-width: 0 !important; }
  .wrap, .container { max-width: 100% !important; }

  /* 3) Kontaktbereich: Formularkarte und Kontaktliste waren 380 px breit */
  .contact-grid { grid-template-columns: 1fr !important; }
  .form-card    { padding: 22px !important; }
  .consent      { flex-wrap: wrap !important; }
  .consent, .consent * { min-width: 0 !important; overflow-wrap: anywhere; }

  /* 4) Zeilen umbrechen statt schieben */
  .menu, .nav-cta, .feat-list { flex-wrap: wrap !important; max-width: 100% !important; }
  h1, h2, h3, p, a, li, span, b, label { overflow-wrap: break-word; }

  /* 5) Buttons und Formularfelder passen sich der Breite an */
  .btn { max-width: 100% !important; white-space: normal !important; text-align: center; }
  form { flex-wrap: wrap !important; }
  input, select, textarea { max-width: 100% !important; min-width: 0 !important; }
}

/* 6) Sehr schmale Geräte (iPhone SE u. ä.) */
@media (max-width: 380px) {
  .wrap    { padding-left: 16px !important; padding-right: 16px !important; }
  .nav-cta { gap: 8px !important; }
}