/* Mobile-Overrides fuer elmoz.de — greift nur unter 768px.
   Canvas-Seiten (Home/Blog-Index) nutzen inline styles; der Renderer
   normalisiert sie ("width: 1364px", rgb-Farben). Selektoren deshalb:
   strukturell (:has, href-Anker) oder Einzel-Property in beiden Formen.
   Produkt-Mockups werden NICHT umgebrochen, sondern horizontal
   scrollbar gemacht (Grafik bleibt intakt). */
@media (max-width: 767px) {

  /* ---------- global ---------- */
  img { max-width: 100%; height: auto; }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- Canvas-Rahmen (Home + Blog-Index) fluid ---------- */
  [style*="width:1364px"], [style*="width: 1364px"] { width: 100% !important; }
  [style*="width:1280px"], [style*="width: 1280px"] { width: 100% !important; min-width: 0 !important; }
  /* schraffierte Seiten-Gutter ausblenden */
  [style*="repeating-linear-gradient(315deg"] { display: none !important; }

  /* Headings (style-attr enthaelt Ursprungsgroesse) */
  h1[style*="72px"] { font-size: clamp(34px, 10.5vw, 46px) !important; line-height: 1.06 !important; }
  h1[style*="52px"], h2[style*="50px"] { font-size: clamp(27px, 8vw, 36px) !important; line-height: 1.1 !important; }
  h2[style*="32px"] { font-size: clamp(22px, 6.5vw, 28px) !important; }

  /* Navigation: Anker-Link-Gruppe ausblenden, Brand + CTA bleiben */
  div:has(> a[href="/#platform"]), div:has(> a[href="#platform"]) { display: none !important; }
  /* Footer-Linkspalten bleiben (eigene Struktur, li-artig) — nur die Topnav-Gruppe matcht, weil dort die Anker direkte Kinder sind */

  /* Karten-/Inhalts-Grids -> 1 Spalte (Quell- + normalisierte Form) */
  [style*="grid-template-columns:1.05fr"], [style*="grid-template-columns: 1.05fr"],
  [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.2fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer: 4 Spalten -> 2, Brand-Spalte volle Breite */
  [style*="grid-template-columns:1.8fr"], [style*="grid-template-columns: 1.8fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1.8fr"] > div:first-child,
  [style*="grid-template-columns: 1.8fr"] > div:first-child { grid-column: 1 / -1; }

  /* Feature-Sektionen (Textspalte + Grafik): untereinander stapeln,
     Grafik-Zelle darf intern scrollen, falls ihr Inhalt breiter ist */
  [style*="grid-template-columns:300px"], [style*="grid-template-columns: 300px"] {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
  [style*="grid-template-columns:300px"] > div, [style*="grid-template-columns: 300px"] > div {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reine Grafik-Mockups (Issue-Tabelle, Data-Model):
     Proportionen behalten, Container scrollt horizontal */
  [style*="grid-template-columns:24px"], [style*="grid-template-columns: 24px"],
  [style*="grid-template-columns:2.3fr"], [style*="grid-template-columns: 2.3fr"] {
    min-width: 720px;
  }
  div:has(> [style*="grid-template-columns:2.3fr"]), div:has(> [style*="grid-template-columns: 2.3fr"]),
  div:has(> div > [style*="grid-template-columns:24px"]), div:has(> div > [style*="grid-template-columns: 24px"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Newsletter-Sektion: Text + Formular untereinander, Input schrumpfbar */
  [style*="grid-template-columns:1fr auto"], [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }
  div:has(input[type="email"]) { flex-wrap: wrap !important; }
  input[type="email"] { min-width: 0 !important; flex: 1 1 160px !important; max-width: 100%; }

  /* Footer-Bottom-Zeile (© + Legal-Links) */
  [style*="padding-top:22px"], [style*="padding-top: 22px"] { flex-wrap: wrap !important; gap: 10px !important; }

  /* Announcement-Bar oben */
  [style*="padding:9px 20px"], [style*="padding: 9px 20px"] { font-size: 11px !important; }

  /* ---------- Blog-Artikel + Legal (class-basiert) ---------- */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .topnav .in { padding: 12px 16px !important; }
  .navlinks { gap: 10px !important; font-size: 12px !important; flex-wrap: wrap; }
  .foot .in { padding: 24px 20px !important; }
}