/* Gemeinsame Responsive-Regeln aller Seiten (vorher als Inline-Block in jeder Seite).
   index.html behält eine eigene Fassung wegen der Hero-Überschrift. */
/* Responsive-Anpassungen fuer schmale Bildschirme */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Tablet und schmaler */
@media (max-width: 900px) {
  section, header, footer, .kwrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  section[style*="104px"], section[style*="120px"], section[style*="96px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* Handy */
@media (max-width: 760px) {
  section, header, footer, .kwrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* alle mehrspaltigen Grids auf eine Spalte */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Flex-Reihen umbrechen lassen – beide Schreibweisen */
  [style*="display:flex"]:not(nav):not([style*="flex-direction:column"]),
  [style*="display: flex"]:not(nav):not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }

  /* nichts erzwingt mehr eine Mindestbreite */
  [style*="min-width"] { min-width: 0 !important; }

  /* Grid-/Flex-Kinder dürfen schrumpfen statt zu überlaufen */
  [style*="grid-template-columns"] > *,
  [style*="display:flex"] > *,
  [style*="display: flex"] > * { min-width: 0; }

  /* Buttons dürfen umbrechen statt aus dem Bild zu laufen */
  a[style*="white-space:nowrap"], button[style*="white-space:nowrap"],
  a[style*="white-space: nowrap"], button[style*="white-space: nowrap"] {
    white-space: normal !important;
    height: auto !important;
    min-height: 49px !important;
    padding: 12px 20px !important;
    line-height: 1.25 !important;
    text-align: center;
    max-width: 100%;
  }

  /* große Überschriften verkleinern */
  h1 { font-size: 32px !important; line-height: 1.15 !important; }
  h2 { font-size: 26px !important; line-height: 1.2 !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"],
  [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:48px"], [style*="font-size: 48px"] {
    font-size: 32px !important; line-height: 1.15 !important;
  }
  [style*="font-size:44px"], [style*="font-size: 44px"],
  [style*="font-size:42px"], [style*="font-size: 42px"],
  [style*="font-size:40px"], [style*="font-size: 40px"] {
    font-size: 28px !important; line-height: 1.15 !important;
  }
  [style*="font-size:28px"], [style*="font-size: 28px"],
  [style*="font-size:26px"], [style*="font-size: 26px"] {
    font-size: 22px !important; line-height: 1.25 !important;
  }

  /* feste Maximalbreiten freigeben */
  [style*="max-width:1200px"], [style*="max-width: 1200px"],
  [style*="max-width:1100px"], [style*="max-width: 1100px"],
  [style*="max-width:820px"],  [style*="max-width: 820px"],
  [style*="max-width:640px"],  [style*="max-width: 640px"] {
    max-width: 100% !important;
  }

  /* Innenabstände großer Karten reduzieren */
  [style*="padding:48px"], [style*="padding: 48px"] { padding: 24px !important; }
  [style*="padding:32px 28px"], [style*="padding: 32px 28px"] { padding: 22px 18px !important; }

  /* lange Wörter und Zahlen umbrechen statt überlaufen */
  h1, h2, h3, p, a, li, div, span { overflow-wrap: break-word; }
}

/* sehr kleine Handys */
@media (max-width: 400px) {
  section, header, footer, .kwrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1 { font-size: 27px !important; }
}