/* 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, Feature-Spalte breiter, kompakter */
  [style*="grid-template-columns:1.7fr"], [style*="grid-template-columns: 1.7fr"] {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
  }
  [style*="grid-template-columns:1.4fr"], [style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1.7fr 1fr 1fr 1fr !important;
  }
  [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: 11px 5px !important;
    font-size: 13px !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;
    padding-right: 4px !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"],
  [style*="padding:80px 32px"], [style*="padding: 80px 32px"],
  [style*="padding:76px 32px"], [style*="padding: 76px 32px"],
  [style*="padding:72px 32px"], [style*="padding: 72px 32px"],
  [style*="padding:68px 32px"], [style*="padding: 68px 32px"],
  [style*="padding:64px 32px"], [style*="padding: 64px 32px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !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;
  }

  /* Cookie-Banner & Newsletter: Touch-Ziele ≥ 44px */
  [data-screen-label="Cookie-Banner"] button { min-height: 44px; }
  footer form button, footer form input { min-height: 44px; box-sizing: border-box; }

  /* Formularfelder (Kontakt, Partner, Affiliate, Hosting, Vertrieb, Preise): komfortable Touch-Höhe */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { min-height: 46px !important; box-sizing: border-box; }
  textarea { min-height: 96px !important; }
  form button, button[type="submit"] { min-height: 46px; }

  /* Footer-Links: komfortable Touch-Höhe (Lighthouse Tap-Targets) */
  footer a { display: inline-flex; align-items: center; min-height: 38px; }

  /* Primär-CTAs & Chips im Footer bleiben blockbündig lesbar */
  footer [style*="font-size:13px"], footer [style*="font-size: 13px"] { line-height: 1.5; }

  /* Feature-/Command-Zeilen (Funktionen & Commands, alternierend row/row-reverse): mobil untereinander */
  [style*="flex-direction:row"][style*="gap:48px"], [style*="flex-direction: row"][style*="gap: 48px"],
  [style*="flex-direction:row-reverse"][style*="gap:48px"], [style*="flex-direction: row-reverse"][style*="gap: 48px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  /* Feature-/Command-Animationen (440×352, Funktionen & Commands): herunterskalieren */
  [style*="flex:none"][style*="width:440px"], [style*="flex: none"][style*="width: 440px"], [style*="flex: 0 0 auto"][style*="width: 440px"] {
    zoom: 0.727;
    margin-left: auto;
    margin-right: auto;
  }

  /* Plattform-Mocks (548px: Windows/macOS/Browser/Phone-Spalte): herunterskalieren */
  [style*="flex:none"][style*="width:548px"], [style*="flex: none"][style*="width: 548px"], [style*="flex: 0 0 auto"][style*="width: 548px"] {
    zoom: 0.58;
    margin-left: auto;
    margin-right: auto;
  }

  /* Lange E-Mail-Adressen (Support-Karten) dürfen umbrechen */
  a[href^="mailto:"] { overflow-wrap: anywhere; }

  /* Flex-Zeilen dürfen umbrechen statt zu überlaufen */
  [style*="display:flex"][style*="gap:54px"], [style*="display: flex"][style*="gap: 54px"],
  [style*="display:flex"][style*="gap:48px"], [style*="display: flex"][style*="gap: 48px"],
  [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:11px"], [style*="display: flex"][style*="gap: 11px"],
  [style*="display:flex"][style*="gap:10px"], [style*="display: flex"][style*="gap: 10px"] {
    flex-wrap: wrap;
  }
}