/* vpx-verwaltung.de – Darstellung auf schmalen Bildschirmen (ergänzt am 15.11.2026).
   Die Seite kommt als Desktop-Entwurf ohne eigenes Handy-Layout: Spalten blieben nebeneinander,
   die Kopfzeile war breiter als ein Handy und der Browser verkleinerte die ganze Seite.
   Diese Datei greift NUR unterhalb der genannten Breiten; die Desktop-Ansicht bleibt unverändert.
   Die Regeln hängen an den Inline-Stilen der Seite (so, wie der Browser sie ausgibt). Ändert der
   Entwurf diese Werte, muss die passende Zeile hier mitgezogen werden. */

@media (max-width: 860px) {
  /* Mehrspaltige Raster untereinander */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Ausnahme: PLZ / Ort bleiben nebeneinander */
  [style*="grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr)"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; }
  [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap: 64px"] { gap: 40px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }

  /* Seitenränder und Abschnittsabstände */
  [style*="padding: 0px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 120px 40px"] { padding: 64px 20px !important; }
  [style*="padding: 128px 40px"] { padding: 72px 20px !important; }
  [style*="padding: 96px 40px 120px"] { padding: 48px 20px 72px !important; }
  [style*="padding: 80px 40px 40px"] { padding: 56px 20px 32px !important; }
  [style*="padding-top: 42px"] { padding-top: 0 !important; }
  section[style*="min-height: 640px"] { min-height: 0 !important; }

  /* Hero: Bild unter dem Text statt dahinter – sonst liegt der Text auf den Fenstern */
  section[data-screen-label="Hero"] { display: flex !important; flex-direction: column-reverse !important; }
  section[data-screen-label="Hero"] > div:first-child { position: static !important; width: 100% !important; height: 300px !important; }
  section[data-screen-label="Hero"] > div:first-child img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%) !important;
    -webkit-mask-composite: source-over !important; mask-composite: add !important;
  }
  [style*="padding: 104px 0px 112px"] { padding: 48px 0 40px !important; }

  /* Überschriften */
  h1[style*="font-size: 68px"] { font-size: 44px !important; }
  h1[style*="font-size: 60px"], h1[style*="font-size: 56px"] { font-size: 38px !important; }
  h2[style*="font-size: 44px"] { font-size: 32px !important; }
  h2[style*="font-size: 32px"] { font-size: 26px !important; }

  /* Lange Wörter und Adressen brechen um statt die Seite zu verbreitern */
  h1, h2, h3, p, a, li, span { overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  /* Kopfzeile: passt auf ein Handy. Die beiden Sprungmarken entfallen – ihre Abschnitte
     liegen direkt darunter auf der Startseite; Kontakt und Mieterportal bleiben. */
  header > div { height: 64px !important; }
  header img { height: 22px !important; }
  header nav { gap: 14px !important; }
  header nav a[href="#ueber"], header nav a[href="#leistungen"] { display: none !important; }
  header nav a[target="_blank"] { padding: 6px 10px !important; }

  /* Knöpfe am Formularende untereinander und in voller Breite */
  form [style*="display: flex"][style*="gap: 20px"] { flex-wrap: wrap !important; }
}