/* VoicePilot — Mobile-Overrides für die Website.
   Die Seiten sind inline gestylt; Overrides laufen deshalb über
   [style*=…]-Attribut-Selektoren mit !important.
   Jeder Selektor existiert in ZWEI Varianten: "prop:wert" (Quelltext) und
   "prop: wert" (CSSOM-Serialisierung der Laufzeit) — beide müssen gepflegt werden!
   Wird von JEDER website/-Seite im <helmet> nach colors_and_type.css geladen. */

/* ---------- Tablet: 3er/4er-Kartenraster → 2 Spalten ---------- */
@media (max-width: 1080px) and (min-width: 761px) {
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; }
  section { overflow-x: clip; }
  img { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Seitencontainer: schmalere Seitenränder */
  [style*="max-width:1200px"], [style*="max-width: 1200px"],
  [style*="max-width:1180px"], [style*="max-width: 1180px"],
  [style*="max-width:1120px"], [style*="max-width: 1120px"],
  [style*="max-width:1100px"], [style*="max-width: 1100px"],
  [style*="max-width:1080px"], [style*="max-width: 1080px"],
  [style*="max-width:1000px"], [style*="max-width: 1000px"],
  [style*="max-width:920px"], [style*="max-width: 920px"],
  [style*="max-width:860px"], [style*="max-width: 860px"],
  [style*="max-width:840px"], [style*="max-width: 840px"],
  [style*="max-width:820px"], [style*="max-width: 820px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Karten-, Formular- und Split-Layouts → 1 Spalte */
  [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.04fr"], [style*="grid-template-columns: 1.04fr"],
  [style*="grid-template-columns:1.05fr"], [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns:1.1fr"], [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns:1.18fr"], [style*="grid-template-columns: 1.18fr"],
  [style*="grid-template-columns:1.22fr"], [style*="grid-template-columns: 1.22fr"],
  [style*="grid-template-columns:1.25fr"], [style*="grid-template-columns: 1.25fr"],
  [style*="grid-template-columns:0.85fr"], [style*="grid-template-columns: 0.85fr"],
  [style*="grid-template-columns:1fr 1.05fr"], [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns:1fr 1.15fr"], [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns:1fr 388px"], [style*="grid-template-columns: 1fr 388px"],
  [style*="grid-template-columns:230px 1fr"], [style*="grid-template-columns: 230px 1fr"],
  [style*="grid-template-columns:1.6fr"], [style*="grid-template-columns: 1.6fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 4er-Raster (Plattformen, Schritte, Terminslots) → 2 Spalten */
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Ausnahme: Mini-Logo-Raster (Windows-Mock) unangetastet */
  [style*="gap:2.5px"], [style*="gap: 2.5px"] { grid-template-columns: 1fr 1fr !important; }

  /* Rechtsseiten (AGB/Datenschutz/…): Inhalts-TOC ausblenden */
  [style*="grid-template-columns:230px 1fr"] > *:first-child,
  [style*="grid-template-columns: 230px 1fr"] > *:first-child { display: none !important; }

  /* Vergleichstabellen (1.7fr/1.4fr + 3×1fr): 4 Spalten behalten, kompakter */
  [style*="grid-template-columns:1.7fr"] > span, [style*="grid-template-columns: 1.7fr"] > span,
  [style*="grid-template-columns:1.4fr"] > span, [style*="grid-template-columns: 1.4fr"] > span {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
  [style*="grid-template-columns:1.7fr"] > span:first-child, [style*="grid-template-columns: 1.7fr"] > span:first-child,
  [style*="grid-template-columns:1.4fr"] > span:first-child, [style*="grid-template-columns: 1.4fr"] > span:first-child {
    padding-left: 14px !important;
  }

  /* Typo-Skalierung */
  [style*="font-size:56px"], [style*="font-size: 56px"],
  [style*="font-size:55px"], [style*="font-size: 55px"],
  [style*="font-size:54px"], [style*="font-size: 54px"],
  [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:48px"], [style*="font-size: 48px"],
  [style*="font-size:46px"], [style*="font-size: 46px"],
  [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: 30px !important;
    line-height: 1.16 !important;
  }
  [style*="font-size:38px"], [style*="font-size: 38px"],
  [style*="font-size:36px"], [style*="font-size: 36px"],
  [style*="font-size:34px"], [style*="font-size: 34px"] {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  [style*="font-size:32px"], [style*="font-size: 32px"],
  [style*="font-size:30px"], [style*="font-size: 30px"] {
    font-size: 24px !important;
    line-height: 1.22 !important;
  }

  /* Große Sektionsabstände etwas straffen */
  [style*="padding:92px 32px"], [style*="padding: 92px 32px"],
  [style*="padding:88px 32px"], [style*="padding: 88px 32px"],
  [style*="padding:84px 32px"], [style*="padding: 84px 32px"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* Große Desktop-Mocks: auf dem Phone ausblenden bzw. eindämmen */
  [style*="width:1116px"], [style*="width: 1116px"] { display: none !important; }
  [style*="aspect-ratio"] { overflow: clip; }

  /* Demo-Fenster-Toolbar (Ausprobieren): Buttons dürfen in zweite Zeile */
  [style*="height:46px"][style*="display:flex"], [style*="height: 46px"][style*="display: flex"] {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 46px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    row-gap: 6px;
  }

  /* Flex-Zeilen dürfen umbrechen statt zu überlaufen */
  [style*="display:flex"][style*="gap:24px"], [style*="display: flex"][style*="gap: 24px"],
  [style*="display:flex"][style*="gap:20px"], [style*="display: flex"][style*="gap: 20px"],
  [style*="display:flex"][style*="gap:16px"], [style*="display: flex"][style*="gap: 16px"],
  [style*="display:flex"][style*="gap:14px"], [style*="display: flex"][style*="gap: 14px"],
  [style*="display:flex"][style*="gap:12px"], [style*="display: flex"][style*="gap: 12px"],
  [style*="display:flex"][style*="gap:10px"], [style*="display: flex"][style*="gap: 10px"] {
    flex-wrap: wrap;
  }
}