/* ============================================================
   CT Formpolster — site.css
   Responsive-Overrides für Mobilgeräte + globale Basisregeln.
   Desktop-Layout liegt inline in den Seiten (unverändert);
   diese Datei greift NUR unter den Breakpoints ein.
   Pflege: Ein Grid bekommt data-rgrid="N" (N = Spaltenzahl
   auf Desktop) und stapelt dann automatisch auf Mobil.
   ============================================================ */

html, body { overflow-x: hidden; }

img { max-width: 100%; }

/* ---------- Header: Desktop-Nav vs. Burger ---------- */
@media (max-width: 960px) {
  [data-hdr="nav-desktop"] { display: none !important; }
  [data-hdr="burger"] { display: flex !important; }
  [data-hdr="topbar-right"] { display: none !important; }
}
@media (min-width: 961px) {
  [data-hdr="burger"] { display: none !important; }
  [data-hdr="drawer"] { display: none !important; }
}

/* ---------- Raster stapeln ---------- */
@media (max-width: 900px) {
  [data-rgrid] { grid-template-columns: 1fr !important; }
  [data-rgrid="3"], [data-rgrid="4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  [data-rgrid="3"], [data-rgrid="4"] { grid-template-columns: 1fr !important; }
}

/* ---------- Typografie & Abstände mobil ---------- */
@media (max-width: 700px) {
  h1[style] { font-size: 30px !important; line-height: 1.2 !important; }
  h2[style] { font-size: 23px !important; }
  [style*="padding:80px 24px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding:72px 24px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding:64px 24px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="columns:2"] { columns: 1 !important; }
}

/* ---------- Startseiten-Hero (Trapez) ---------- */
@media (max-width: 700px) {
  [data-hero] { height: 520px !important; }
  [data-hero] > div[style*="clip-path"] { max-width: 88% !important; padding: 26px 48px 26px 0 !important; }
}