/* quadratmeterglueck.de — Mobile-Optimierung.
   Überschreibt Inline-Styles nur unterhalb der Breakpoints; Desktop bleibt unverändert. */

html { -webkit-text-size-adjust: 100%; }

@media (max-width: 980px) {
  header { position: sticky !important; top: 0; z-index: 100; }
  header > div { height: 60px !important; padding: 0 20px !important; }
  header [data-desknav] { display: none !important; }
  header [data-burger] { display: flex !important; }
}

@media (max-width: 720px) {
  body { overflow-x: hidden; }
  main { padding-left: 20px !important; padding-right: 20px !important; }

  /* Alle Mehrspalten-Grids -> einspaltig (Startseite-Hero, Karten, Footer, Leit-Artikel) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Typo-Skala */
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size: 42px"] { font-size: 30px !important; }
  [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 27px"] { font-size: 22px !important; }
  [style*="font-size: 24px"] { font-size: 21px !important; }
  [style*="font-size: 23px"] { font-size: 20px !important; }
  [style*="font-size: 18px"] { font-size: 16.5px !important; }

  /* Flex-Zeilen dürfen umbrechen statt überzulaufen (Bylines, Kopfzeilen, Button-Reihen) */
  main [style*="align-items: center"], main [style*="align-items: baseline"] { flex-wrap: wrap; }

  /* Vertikale Abstände kompakter */
  [style*="padding: 72px 0"] { padding: 32px 0 44px !important; }
  [style*="margin-bottom: 72px"] { margin-bottom: 48px !important; }
  section[style*="gap: 56px"] { gap: 28px !important; }

  /* Hero-CTA: Buttons volle Breite, gut tippbar */
  main a[style*="padding: 13px 24px"] { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 14px 24px !important; }
  main a[style*="padding: 13px 24px"] + a { display: block; width: 100%; text-align: center; }

  /* Über-uns-Box / Autoren-Box stapeln */
  [style*="padding: 40px 44px"] { flex-direction: column !important; align-items: flex-start !important; padding: 28px 22px !important; }
  [style*="padding: 28px 32px"][style*="align-items: center"] { flex-direction: column !important; align-items: flex-start !important; padding: 24px 20px !important; }

  /* Kategorie: Leit-Artikel-Karte */
  [style*="min-height: 300px"] { min-height: 210px !important; border-right: none !important; border-bottom: 1px solid #E8E1D5; }
  [style*="padding: 36px 40px"] { padding: 22px 20px !important; }

  /* Produktbox: Bild + Text dürfen umbrechen, kein toter Rand rechts */
  [style*="gap: 18px"][style*="align-items: center"] { flex-wrap: wrap; }
  [style*="padding-right: 60px"] { padding-right: 0 !important; min-width: 200px; }

  /* Sektions-Kopfzeilen (h2 + Link daneben) dürfen umbrechen */
  [style*="justify-content: space-between"] { flex-wrap: wrap; }

  /* Über-uns: Textspalte darf schrumpfen */
  main [style*="min-width: 320px"] { min-width: 0 !important; }

  /* Breadcrumbs umbrechen, lange Links/URLs (Datenschutz) nie überlaufen */
  main nav { flex-wrap: wrap; }
  main p, main a, main li { overflow-wrap: break-word; word-break: break-word; }

  /* Bilder nie breiter als der Viewport */
  main img, main image-slot, main x-import { max-width: 100%; }

  /* Footer */
  footer [style*="grid-template-columns"] { gap: 32px !important; padding: 40px 20px 32px !important; }
  [style*="padding: 18px 32px"] { padding: 14px 20px !important; }
}