/* responsive.css — Mobile-Layout fürs Feniks-Redesign.
 *
 * Der Cloud-Design-Export nutzt durchgehend inline React-Styles (style={{…}}),
 * die keine Media-Queries enthalten können. Diese Datei liefert die fehlenden
 * Breakpoints als globale Overrides. Zwei Hebel:
 *   1. Design-Tokens überschreiben (Font-Skala, Container) → cascadet in alle
 *      Komponenten, da diese var(--font-display) usw. nutzen.
 *   2. Blanket-Grid-Collapse: jedes inline Grid wird einspaltig.
 * Wird NACH styles.css geladen.
 */

/* ---------- Tablet & unter (≤ 900px): mehrspaltige Raster entzerren ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  :root {
    --container-max: 100%;
    --text-4xl: 2.3rem;   /* Hero 56 → ~37 */
    --text-3xl: 1.9rem;   /* 44 → ~30 */
    --text-2xl: 1.55rem;  /* 34 → ~25 */
    --text-xl: 1.25rem;   /* 26 → ~20 */
    --text-lg: 1.15rem;   /* 21 → ~18 */
    --section-pad-y: 56px;
  }

  /* Alle inline Grids einspaltig stapeln */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Nichts darf breiter als der Viewport werden */
  html, body { overflow-x: hidden; }

  /* Fullscreen-Menü-Overlay: geschlossen (transform translateX(100%)) komplett
     ausblenden. Ein fixiertes, 100vw nach rechts verschobenes Element entkommt
     overflow-x:hidden und erzeugt sonst horizontalen Dokument-Overflow.
     Beim Öffnen setzt React translateX(0) → Selektor greift nicht mehr → Menü sichtbar. */
  header > div[style*="translateX(100%)"] { display: none !important; }

  /* Große horizontale Innenabstände auf Mobil reduzieren (96px/88px/80px → 24px) */
  [style*="padding: 96px 24px"],
  [style*="padding: 88px 24px"],
  [style*="padding: 80px 24px"],
  [style*="padding: 80px 0"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 96px 24px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Feste px-Mindesthöhen (z.B. CTA-Freisteller-Spalte) auf Mobil lösen */
  [style*="minHeight: 460px"],
  [style*="min-height: 460px"] { min-height: 0 !important; }
}

/* ---------- Sehr schmal (≤ 400px): Hero-Headline noch etwas kleiner ---------- */
@media (max-width: 400px) {
  :root { --text-4xl: 2.0rem; }
}