/* OMION Mobil Kopf 1.0.0
   Nur @media (max-width: 400px). Desktop unverändert.
   Keine Kollision mit omion-start-korrekturen 1.0.6 (Gronk):
   dessen Header-Regeln gelten nur ab 1199 px (Logo/Menü-Abstand)
   bzw. 768–1198 px (Hamburger erzwingen) – beide außerhalb dieses Blocks.
   Sprachschalter, Warenkorb-UI, Footer, Nics 5182/5183-CSS und Preloader
   werden nicht überschrieben. */

@media (max-width: 400px) {

  /* ----- 1) Logo-Zeile: eine Zeile, nichts abschneiden -----
     Ursache: .et_pb_row_1_tb_header hat flex-wrap:wrap. Die Logo-Spalte bleibt
     breiter als das Bild, die Menü-Spalte wird zu schmal für das 44-px-Warenkorb-
     Symbol (Header 1734/AGB/Produkt) plus 11-px-Ränder plus Hamburger. */
  .et-l--header .et_pb_row_1_tb_header {
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
  }
  .et-l--header .et_pb_column_3_tb_header {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }
  /* Links ausrichten, rechts Platz für Sprachschalter + Warenkorb (max. 44 px) + Hamburger. */
  .et-l--header .et_pb_column_2_tb_header {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 148px);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .et-l--header .et_pb_image_0_tb_header,
  .et-l--header .et_pb_image_0_tb_header .et_pb_image_wrap,
  .et-l--header .et_pb_image_0_tb_header a {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }
  .et-l--header .et_pb_image_0_tb_header img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__wrap,
  .et-l--header .et_pb_menu_0_tb_header .et_mobile_nav_menu {
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .et-l--header a.et_pb_menu__cart-button {
    margin-left: 4px;
    margin-right: 4px;
  }

  /* ----- 2) Kontaktleiste: Telefon vollständig, antippbar -----
     Ursache: Die beiden Icon-Listeneinträge teilen sich fest ~106 px,
     die Nummer +49 176 84903516 wird in der schmalen Textspalte abgeschnitten.
     Im HTML ist kein tel:-Link (kommt per JS). */
  /* Eine Zeile behalten (kein höherer Balken), Nummer und Mail nur enger setzen. */
  .et-l--header .et_pb_row_0_tb_header {
    flex-wrap: nowrap;
    align-items: center;
  }
  .et-l--header .et_pb_column_0_tb_header {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .et-l--header .et_pb_column_1_tb_header {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .et-l--header .et_pb_icon_list_0_tb_header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 6px;
  }
  .et-l--header .et_pb_icon_list_item_0_tb_header,
  .et-l--header .et_pb_icon_list_item_1_tb_header {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
    overflow: visible;
  }
  .et-l--header .et_pb_icon_list_item_0_tb_header .et_pb_icon_list_text,
  .et-l--header .et_pb_icon_list_item_1_tb_header .et_pb_icon_list_text {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
  }
  .et-l--header a.omion-mobil-kopf-tel {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  /* ----- 3) Glossar 5084: A–Z-Leiste nicht die Seite verbreitern -----
     Nic hat .om-gl-az bereits overflow-x:auto; die 40-px-Buchstaben
     erweitern trotzdem das Seiten-scrollWidth. Nur Containment, keine
     Änderung an Skripten, Sticky-Logik oder Inhalt. */
  body.page-id-5084 #main-content .om-gl-az-wrap,
  body.page-id-5084 #main-content .om-gl-az {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  body.page-id-5084 #post-5084,
  body.page-id-5084 #main-content,
  body.page-id-5084 #main-content .entry-content,
  body.page-id-5084 #main-content .om-gl,
  body.page-id-5084 #main-content .et_pb_code_0 {
    max-width: 100%;
    overflow-x: clip;
  }
  body.page-id-5084 #main-content .om-gl-item summary,
  body.page-id-5084 #main-content .om-gl-body,
  body.page-id-5084 #main-content .om-gl-body p {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}