/* =============================================================
   ACN-Cars Automiete — Globales Mobile-Overflow-CSS
   v2.2.35 — Hamburger-Icon endgültig sichtbar + Hero-Overflow
   -------------------------------------------------------------
   Wird auf JEDER Seite der Site geladen.
   Auf Desktop (≥ 721px) komplett unsichtbar — keine einzige
   Regel ausserhalb des @media-Blocks.

   Kritische Änderungen ggü v2.2.33 (mit Live-DOM-Inspektion
   auf acncars.ch verifiziert):

   1. HAMBURGER-FIX (v2.2.32/33 hat das Icon kaputt gemacht):
      ElementsKit-Hamburger ist <button> mit 3 <span> innen.
      v2.2.32 hat `display: inline-flex` ohne `flex-direction`
      gesetzt — die 3 Linien stapelten sich horizontal statt
      vertikal → wirkten wie ein dünnes leeres Rechteck.
      Fix: Display/Align/Justify-Overrides ENTFERNT. Nur noch
      `width: auto; flex: 0 0 auto` damit der Button nicht auf
      100% gestreckt wird (das war der v2.2.31-Fehler). Der
      Theme-eigene CSS für Layout bleibt unangetastet.

   2. FOOTER-FIX (v2.2.33 hat falsche Selektoren genutzt):
      Live-Site nutzt MODERNES Elementor v3 mit `.e-con.e-flex.
      e-parent` Containern und `.e-con.e-child` Spalten.
      v2.2.33 hat auf `.elementor-column` gezielt — die Klasse
      existiert auf acncars.ch gar nicht. Fix: Neue Selektoren
      für Elementor-3-Container-System.
   ============================================================= */

@media (max-width: 720px) {

  /* =========================================================
     NUCLEAR CORE — jedes Element kleiner-gleich Viewport
     ---------------------------------------------------------
     Höhere Spezifität via `html body *` damit auch gegen
     Inline-Styles ohne !important sicher gewonnen wird.
     ========================================================= */
  html body * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* min-width: 0 nur auf Block-Container */
  html body div,
  html body section,
  html body article,
  html body main,
  html body header,
  html body footer,
  html body aside,
  html body p,
  html body ul,
  html body ol,
  html body li {
    min-width: 0 !important;
  }

  /* --- Hartstop: niemals horizontal scrollen --- */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* --- Bilder dürfen nie breiter als ihr Container --- */
  img,
  video,
  iframe,
  object,
  embed,
  picture,
  svg {
    max-width: 100% !important;
    height: auto;
  }

  /* --- Theme-Header-Logo --- */
  #site-header img,
  #site-header-inner img,
  .site-header img,
  header .elementor-widget-image img,
  header .custom-logo,
  header img.attachment-full,
  header a img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* =========================================================
     v2.2.35 — HAMBURGER: KOMPLETT SELBER STYLEN (defensiv)
     ---------------------------------------------------------
     v2.2.34 hat `width: auto !important` auf
     `.elementskit-menu-hamburger-icon` gesetzt — das hat die
     22px-Breite aus ElementsKit-CSS überschrieben → die 3
     Linien hatten keine Breite mehr → leeres Rechteck.

     v2.2.35 macht das Gegenteil: ich definiere den kompletten
     Hamburger-Look HIER mit !important. Egal was Theme/
     ElementsKit/OceanWP macht — das hier gewinnt. Die 3
     Linien sind explizit 24px×2px schwarz, übereinander,
     5px Gap. Hamburger-Symbol ☰ funktioniert garantiert.
     ========================================================= */
  button.elementskit-menu-hamburger,
  button.elementskit-menu-toggler,
  .elementskit-menu-hamburger,
  .elementskit-menu-toggler {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    border: none !important;
    background: transparent !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
  }

  .elementskit-menu-hamburger-icon {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    min-width: 24px !important;
    min-height: 2px !important;
    background-color: currentColor !important;
    background: currentColor !important;
    border-radius: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Theme-andere Hamburger-Toggle (OceanWP, Astra, etc.) */
  .oceanwp-mobile-menu-icon,
  .oceanwp-mobile-menu-icon a,
  #mobile-menu-search,
  .mobile-menu-toggle,
  .mobile-menu-bar,
  .mobile-menu,
  button.mobile-menu-toggle,
  .navbar-toggle,
  .menu-toggle,
  .ekit-menu-hamburger,
  [class*="hamburger"]:not(.elementskit-menu-hamburger):not(.elementskit-menu-hamburger-icon),
  [class*="mobile-toggle"] {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* --- Theme-Wrapper auf volle Breite zwingen --- */
  #wrap,
  #main,
  #content-wrap,
  #content-wrap.container,
  .site-main,
  .single-page-article,
  .single-page-article > .entry,
  #site-header,
  #site-header-inner,
  #site-header-inner.container,
  .site-header {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Elementor v2 (Legacy) und v3 Container auf volle Breite --- */
  .e-con,
  .e-con.e-con-boxed,
  .e-con.e-con-full,
  .e-con > .e-con-inner,
  .e-con.e-con-boxed > .e-con-inner,
  .elementor-section,
  .elementor-section.elementor-section-boxed,
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-column-wrap,
  .elementor-widget-wrap,
  .elementor-widget,
  .elementor-widget-container {
    --content-width: 100% !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- ElementsKit-Container --- */
  .ekit-wid-con,
  .elementskit-section,
  .elementskit-container,
  [class*="ekit-section"],
  [class*="elementskit-section"] {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     v2.2.34 — FOOTER-SPALTEN STAPELN (modernes Elementor v3)
     ---------------------------------------------------------
     Live-DOM auf acncars.ch:
       .elementor.elementor-3636                  ← Footer-Template
         .elementor-element-326d9be3 .e-flex
           .e-con.e-parent                        ← Parent-Container (row)
             .e-con-inner                         ← Inner-Wrapper
               .e-con.e-child .e-flex .e-con-full ← SPALTEN (hier 4)
               .e-con.e-child ...
               .e-con.e-child ...
               .e-con.e-child ...

     Fix: Den Parent-Flex-Container auf column-direction zwingen
     UND jede e-child-Spalte auf 100% Breite.
     ========================================================= */

  /* Spezifischer Fix für DIE Footer-Template-ID auf acncars.ch */
  .elementor-3636 .e-flex,
  .elementor-3636 .e-con.e-parent,
  .elementor-3636 .e-parent.e-flex > .e-con-inner,
  body[class*="-3636"] .e-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .elementor-3636 .e-con.e-child,
  .elementor-3636 .e-parent > .e-con-inner > .e-con,
  .elementor-3636 .e-parent.e-flex > .e-con-inner > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-bottom: 24px !important;
  }

  .elementor-3636 .e-con.e-child:last-child {
    margin-bottom: 0 !important;
  }

  /* Generischer Fallback: jeder Elementor-v3-Footer mit data-Attribut */
  [data-elementor-type="wp-footer"] .e-flex,
  [data-elementor-type="footer"] .e-flex,
  [data-elementor-type="wp-footer"] .e-con.e-parent > .e-con-inner,
  [data-elementor-type="footer"] .e-con.e-parent > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  [data-elementor-type="wp-footer"] .e-con.e-child,
  [data-elementor-type="footer"] .e-con.e-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-bottom: 24px !important;
  }

  /* Legacy-Elementor-Footer (alte Sites) */
  footer .elementor-column,
  footer.site-footer .elementor-column,
  #footer .elementor-column,
  #footer-widgets .elementor-column,
  #colophon .elementor-column,
  .footer-widgets .elementor-column,
  .footer-widget,
  #footer-widgets > .container > .row > div,
  #footer-widgets .footer-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px !important;
  }
  footer .elementor-column:last-child,
  #footer-widgets .footer-box:last-child {
    margin-bottom: 0 !important;
  }
  footer .elementor-container,
  #footer-widgets > .container > .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* --- Lange Wörter umbrechen statt Container sprengen --- */
  body,
  p,
  h1, h2, h3, h4, h5, h6,
  span,
  a,
  li,
  td,
  th,
  div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* --- Tabellen scrollen statt sprengen --- */
  table {
    max-width: 100vw !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* --- Fixed-position Elemente --- */
  [style*="position:fixed"],
  [style*="position: fixed"],
  .elementor-sticky--active {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* --- Plugin-eigene Hero-Texte --- */
  .acn-app-root .hero-lead,
  .acn-app-root .lead,
  .acn-app-root p {
    max-width: 100% !important;
    width: auto !important;
  }

  /* --- Plugin-Hero-Container Padding links/rechts --- */
  .acn-app-root .hero,
  .acn-app-root .hero-content,
  .acn-app-root .hero-inner,
  .acn-app-root section.hero,
  .acn-app-root .home-hero,
  .acn-app-root .page-hero,
  .acn-app-root .hero-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  .acn-app-root > section,
  .acn-app-root > main,
  .acn-app-root .page-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     v2.2.36 — HERO-LEAD/TITLE: aggressiv auf Viewport klemmen
     ---------------------------------------------------------
     v2.2.35 hatte zwei neue Probleme:
       a) `hyphens: auto` auf .hero-title hat "fahren" zu
          "fah-/ren" silbentrennt — sah hässlich aus.
       b) Inline-Style `maxWidth: 52ch` auf p.lead schlägt
          irgendwie trotz !important durch und Text "aus der"
          wird zu "aus de" rechts abgeschnitten.
     v2.2.36-Fix:
       - Title: KEIN hyphens:auto mehr (nur normaler Wortbruch).
       - Lead+Title: max-width per calc(100vw - 36px) hartcodiert
         und alle Eltern (section.hero, .hero-content) bekommen
         overflow-x: clip + max-width 100vw — egal was JSX inline
         setzt, kann nicht mehr aus dem Viewport rauskommen.
     ========================================================= */
  .acn-app-root .hero,
  .acn-app-root section.hero,
  .acn-app-root .hero-content,
  .acn-app-root .hero-content.container {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .acn-app-root .hero-title,
  .acn-app-root h1.h-display,
  .acn-app-root .hero .hero-title,
  .acn-app-root .hero h1 {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: manual !important;          /* KEINE Auto-Silbentrennung */
    -webkit-hyphens: manual !important;
  }

  .acn-app-root .hero-lead,
  .acn-app-root p.lead,
  .acn-app-root .hero p.lead,
  .acn-app-root .hero .hero-lead {
    max-width: calc(100vw - 36px) !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  /* Sledgehammer: KEIN Kind in .hero darf breiter als der
     padded Container sein. Inline-maxWidth-Inline-Styles aus
     React-JSX werden so sicher überstimmt. */
  .acn-app-root .hero > *,
  .acn-app-root .hero-content > *,
  .acn-app-root section.hero > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     v2.2.35 — HERO-CURRENT-CARD: "Im Bild"-Buttons stapeln
     ---------------------------------------------------------
     User-Bug: ANSEHEN + JETZT BUCHEN (CTAs auf der Mercedes-
     E63-S-AMG-Karte) gehen über beide Viewport-Ränder hinaus.
     Ursache: `.hero-current-actions { flex-wrap: wrap }` mit
     `.btn { flex: 1 1 calc(50% - 4px) }` aus styles.css —
     bei `white-space: nowrap` auf den Buttons reicht 50% des
     Viewports oft nicht (z.B. "JETZT BUCHEN" + Padding+Icon
     ≈ 180px > 175px verfügbar). Lösung: Buttons vertikal
     stapeln statt nebeneinander auf Mobile.
     ========================================================= */
  .acn-app-root .hero-current-card {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  .acn-app-root .hero-current-thumb {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 64px !important;
    height: 44px !important;
    min-width: 0 !important;
  }

  .acn-app-root .hero-current-meta {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .acn-app-root .hero-current-meta .hero-current-brand,
  .acn-app-root .hero-current-meta .hero-current-model {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    min-width: 0 !important;
  }

  .acn-app-root .hero-current-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  .acn-app-root .hero-current-actions .btn,
  .acn-app-root .hero-current-cta,
  .acn-app-root .hero-current-cta-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =============================================================
   Notfall-Fallback für sehr schmale Phones (≤ 380px)
   ============================================================= */
@media (max-width: 380px) {
  body {
    font-size: 15px;
  }
  .acn-app-root .hero,
  .acn-app-root .hero-content,
  .acn-app-root .hero-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}