/* ============================================================
   Responsive Regeln für den Claude-Design-Export
   ------------------------------------------------------------
   Zielt auf data-Attribute, die responsive.js nach dem
   React-Render setzt (String-Matching auf style-Attribute ist
   wegen CSSOM-Neuserialisierung unzuverlässig).
   !important ist nötig, um die Inline-Styles zu überschreiben.
   Breakpoints: 1120px (Navigation), 1024px (Tablet), 760px (Mobil)
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
img { max-width: 100%; }

/* ---------- Navigation: unter 1120px stapeln + umbrechen ---------- */
@media (max-width: 1120px) {
  [data-r~="nav"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  [data-rnav="links"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px !important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [data-r~="cols4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r~="cols5"],
  [data-r~="cols6"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* 2x2-Statistikleiste: linke Trennlinien stören im Umbruch */
  [data-r~="cols4"] > * { border-left: none !important; }

  [data-rfs="92"] { font-size: 72px !important; }
  [data-rfs="62"] { font-size: 52px !important; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  /* Seitenränder von 48px auf 20px reduzieren */
  [data-r~="pad"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Grids stapeln bzw. reduzieren */
  [data-r~="stack"] { grid-template-columns: 1fr !important; }
  [data-r~="cols4"],
  [data-r~="cols5"],
  [data-r~="cols6"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r~="timeline"] { grid-template-columns: 84px 1fr !important; }

  /* Typografie herunterskalieren */
  [data-rfs="92"] { font-size: 48px !important; }
  [data-rfs="62"] { font-size: 38px !important; }
  [data-rfs="52"] { font-size: 32px !important; }
  [data-rfs="22"] { font-size: 18px !important; }

  /* Flex-Zeilen (Abschnittsköpfe, Button-Reihen, Footer) umbrechen lassen */
  [data-r~="flexsb"] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  [data-r~="flexc"] { flex-wrap: wrap !important; }
  [data-r~="flexrow"] { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* Menü-Pills kompakter */
  [data-rnav="links"] > a {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
}