/* gmatic.eu - Anpassungen fuer Tablets und Smartphones.
   Greift nur bei schmalen Bildschirmen (<= 1060 px); die Desktop-Darstellung bleibt unveraendert. */
/* Einheitliche Schriftgroesse fuer Fliesstext (Desktop und mobil, DE und EN): 13px */
#jsn-mainbody p, #jsn-mainbody li, #jsn-mainbody td, #jsn-mainbody th, #jsn-mainbody dd, #jsn-mainbody dt,
#jsn-mainbody .item-page, #jsn-mainbody .item-page div, #jsn-mainbody .item-page span,
#jsn-mainbody .blog-featured, #jsn-mainbody .jsn-mod-custom { font-size: 13px; }
@media only screen and (max-width: 1060px) {
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  #jsn-pos-topbar, #jsn-topheader-inner, #jsn-header_inner, #jsn-menu_inner, #jsn-promo_inner,
  #jsn-content-top_inner, #jsn-content-top-below_inner, #jsn-content, #jsn-content-bottom_inner,
  #jsn-content-bottom-over_inner, #jsn-usermodules3-inner, #jsn-bottom_inner, #jsn-footer-inner {
    width: auto !important; max-width: 100%; box-sizing: border-box;
  }
  #jsn-content_inner, #jsn-maincontent, #jsn-mainbody, #jsn-centercol, #jsn-pos-mainmenu {
    max-width: 100%; box-sizing: border-box;
  }
  /* vom Template per JS berechnete Spalten-Verschiebung (nur fuer 1061 px) */
  #jsn-content_inner1, #jsn-content_inner2, #jsn-content_inner3 { left: 0 !important; right: auto !important; }
  img, video, iframe, embed, object { max-width: 100%; }
  img { height: auto; }
  table { max-width: 100%; }
  .container_skitter, .box_skitter, .jsn-themeslider-container { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-wrap: break-word; }
}

/* Smartphones: Spalten untereinander */
@media only screen and (max-width: 900px) {
  .row-fluid [class*="span"], .row-fluid .jsn-modulecontainer, div.jsn-horizontallayout div.jsn-modulecontainer {
    float: none !important; display: block; width: 100% !important; margin-left: 0 !important; box-sizing: border-box;
  }
  .row-fluid::after, .row-fluid::before { display: table; content: ""; clear: both; }
  .items-row .item { margin-bottom: 20px; }
  #jsn-logo img, #jsn-logo-desktop img { max-width: 100%; height: auto; }
  div.jsn-modulecontainer table { display: block; overflow-x: auto; }
  input[type="text"], input[type="search"], input[type="email"], textarea, select { max-width: 100%; box-sizing: border-box; }
  /* Bilder im Text: nicht mehr umflossen */
  img.image-right, img.image-left, span.image-right, span.image-left, .wf_caption {
    float: none !important; display: block; margin: 0 auto 12px !important; max-width: 100% !important;
  }
  .item-page img, .blog-featured img, .jsn-mod-custom img { max-width: 100%; height: auto; }
  h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; }
  .page-header, .page-header h1, .page-header h2 { height: auto !important; min-height: 0; }
  .page-header { padding-bottom: 4px; margin-bottom: 8px; }

  /* Lesbarkeit */
  body, p, li, td, th, dd, dt, .item-page, .blog-featured { font-size: 13px; line-height: 1.55; }
  p, li, td, th, dd, h1, h2, h3, h4, a { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  h1 { font-size: 22px; line-height: 1.25; }
  h2 { font-size: 19px; line-height: 1.3; }
  h3, h4 { font-size: 17px; line-height: 1.3; }
  ul, ol { padding-left: 0; }

  /* Bilder mit Beschriftung: volle Breite, ohne Einzug */
  span.wf_caption, .wf_caption { width: auto !important; padding: 0 !important; margin: 0 0 12px !important; box-sizing: border-box; }
  .wf_caption img, img.image-right, img.image-left { margin: 0 auto 12px !important; width: auto; max-width: 100% !important; height: auto; }

  /* Produktseiten: Datentabellen untereinander, Leerzeilen entfernen */
  .product_desc_full > table, .product_desc_full > table > tbody, .product_desc_full > table > tbody > tr,
  .product_desc_full > table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
  .product_desc_full table.table-style { width: 100% !important; }
  .product_desc_full table.table-style td { padding: 6px 8px; }
  .redSHOP_product_box > br, .product > br, .redSHOP_product_box_right ~ br { display: none; }
  .redSHOP_product_box_left, .redSHOP_product_box_right, .product_box_outside, .product_desc { float: none !important; width: 100% !important; margin-left: 0 !important; }
  .redSHOP_product_box_right .product_image { text-align: center; }
  .product_main_toolbar, .product_title, .product_sup_toolbar, .componentheading { height: auto !important; min-height: 0; }
}

/* Mobiles Menue */
.gm-menu-button, .gm-sub-toggle { display: none; }
@media only screen and (max-width: 900px) {
  #jsn-menu { padding: 0; }
  .gm-menu-button {
    display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0; padding: 14px 16px;
    background: #399e7e; color: #fff; border: 0; border-radius: 0; font: inherit; font-size: 17px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-align: left;
  }
  .gm-bars, .gm-bars::before, .gm-bars::after { display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; content: ""; position: relative; }
  .gm-bars::before { position: absolute; top: -7px; }
  .gm-bars::after { position: absolute; top: 7px; }
  .gm-bars { margin-right: 14px; }
  #jsn-pos-mainmenu { display: none; }
  body.gm-menu-open #jsn-pos-mainmenu { display: block; }
  #jsn-menu-toggle-parent, .jsn-menu-mobile-control, span.jsn-menu-toggle { display: none !important; }
  ul.menu-mainmenu, ul.menu-mainmenu ul { list-style: none; margin: 0; padding: 0; width: 100% !important; float: none !important; position: static !important; display: block; box-shadow: none; background: transparent; }
  ul.menu-mainmenu li { display: block !important; float: none !important; width: 100% !important; position: relative; margin: 0 !important; padding: 0; background: #fff; border-bottom: 1px solid #e3e3e3; }
  ul.menu-mainmenu li a { display: block !important; box-sizing: border-box; width: 100% !important; margin: 0 !important; padding: 13px 52px 13px 16px !important; background: transparent !important; }
  ul.menu-mainmenu li a span { display: inline !important; padding: 0 !important; margin: 0 !important; background: none !important; }
  ul.menu-mainmenu .jsn-menutitle { font-size: 16px !important; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  ul.menu-mainmenu .jsn-menudescription { display: none !important; }
  ul.menu-mainmenu li.active > a, ul.menu-mainmenu li.current > a { background: #e5f1ee !important; }
  ul.menu-mainmenu ul li a { padding-left: 32px !important; }
  ul.menu-mainmenu ul ul li a { padding-left: 48px !important; }
  ul.menu-mainmenu ul .jsn-menutitle { font-size: 15px !important; font-weight: 400; text-transform: none; }
  ul.menu-mainmenu li > ul { display: none !important; }
  ul.menu-mainmenu li.gm-open > ul { display: block !important; }
  .gm-sub-toggle {
    display: block; position: absolute; right: 0; top: 0; width: 48px; height: 46px; margin: 0; padding: 0;
    background: transparent; border: 0; border-left: 1px solid #e3e3e3; cursor: pointer; z-index: 2;
  }
  .gm-sub-toggle::before { content: ""; position: absolute; left: 18px; top: 15px; width: 9px; height: 9px; border-right: 2px solid #166f55; border-bottom: 2px solid #166f55; transform: rotate(45deg); transition: transform .15s; }
  li.gm-open > .gm-sub-toggle::before { transform: rotate(-135deg); top: 19px; }

  /* Kopfbereich: Logo kompakt */
  #jsn-logo, #jsn-header_inner { text-align: left; }
  #jsn-logo img { max-width: 220px; height: auto; }
}

/* Ueberschriften: Das Template nutzt line-height:0 mit Polsterung (bricht bei Zeilenumbruch) */
@media only screen and (max-width: 900px) {
  [class*="page-header_content"], .page-header { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  [class*="page-header_content"] h1, [class*="page-header_content"] h2, [class*="page-header_content"] h3, [class*="page-header_content"] h4,
  .page-header h1, .page-header h2, #jsn-mainbody h1, #jsn-mainbody h2, #jsn-mainbody h3, #jsn-mainbody h4 {
    line-height: 1.3 !important; padding-top: 0 !important; margin-top: 12px; margin-bottom: 8px;
  }
  #jsn-mainbody h1 { font-size: 22px !important; }
  #jsn-mainbody h2 { font-size: 19px !important; }
  #jsn-mainbody h3 { font-size: 17px !important; }
  #jsn-mainbody h4 { font-size: 16px !important; }
  ul.menu-mainmenu ul, ul.menu-mainmenu li li, ul.menu-mainmenu li li * {
    visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important;
    overflow: visible !important; left: auto !important; top: auto !important; clip: auto !important; transform: none !important;
  }
}

/* Menue: Template-Dekoration der Untermenues zuruecksetzen */
@media only screen and (max-width: 900px) {
  ul.menu-mainmenu ul, ul.menu-mainmenu li {
    border: 0 !important; border-left: 0 !important; margin: 0 !important; box-shadow: none !important;
    position: relative !important; width: 100% !important; min-width: 0 !important; background-image: none !important;
  }
  ul.menu-mainmenu li { border-bottom: 1px solid #e3e3e3 !important; background-color: #fff !important; }
  ul.menu-mainmenu ul { padding: 0 !important; background: #fff !important; }
  ul.menu-mainmenu li a, ul.menu-mainmenu li a *, ul.menu-mainmenu li a:hover { color: #002620 !important; text-shadow: none !important; }
  ul.menu-mainmenu li a::before, ul.menu-mainmenu li a::after, ul.menu-mainmenu li::before, ul.menu-mainmenu li::after { display: none !important; }
  ul.menu-mainmenu li li li a { padding-left: 48px !important; }
}

@media only screen and (max-width: 900px) {
  #jsn-pos-mainmenu .jsn-modulecontainer, #jsn-pos-mainmenu .jsn-modulecontainer_inner, #jsn-pos-mainmenu .jsn-modulecontent { width: 100% !important; max-width: none !important; margin: 0 !important; }
  ul.menu-mainmenu li .gm-sub-toggle { height: 46px !important; width: 48px !important; }
}

/* Artikelbilder: nicht seitlich umflossen (inline-Styles des Editors ueberschreiben) */
@media only screen and (max-width: 900px) {
  .item-page img, .blog-featured img, .blog img, .jsn-mod-custom img, #jsn-mainbody .items-leading img, #jsn-mainbody .items-row img {
    float: none !important; display: block; margin: 0 auto 14px !important; max-width: 100% !important; height: auto !important;
  }
  .item-page a.jcepopup, .blog-featured a.jcepopup, .blog a.jcepopup, #jsn-mainbody a.jcepopup { display: block; }
  .item-page p, .blog-featured p, .blog p { margin-bottom: 12px; }
}

/* Layout-Tabellen (Bild links/rechts neben Text): auf dem Handy untereinander */
@media only screen and (max-width: 900px) {
  #jsn-mainbody table:not(.table-style), #jsn-mainbody table:not(.table-style) > tbody, #jsn-mainbody table:not(.table-style) > tbody > tr,
  #jsn-mainbody table:not(.table-style) > tbody > tr > td, #jsn-mainbody table:not(.table-style) > tbody > tr > th,
  #jsn-mainbody table:not(.table-style) > tr, #jsn-mainbody table:not(.table-style) > tr > td {
    display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; height: auto !important;
  }
  #jsn-mainbody table:not(.table-style) td { padding-left: 0 !important; padding-right: 0 !important; }
  #jsn-mainbody table img { max-width: 100% !important; height: auto !important; }
  /* Spalten-Container im Artikeltext */
  #jsn-mainbody div[style*="float"], #jsn-mainbody div[style*="width"] { float: none !important; width: auto !important; max-width: 100% !important; }
}

@media only screen and (max-width: 900px) {
  a.link-button, .link-button { white-space: normal !important; max-width: 100%; box-sizing: border-box; height: auto !important; line-height: 1.35; }
}

/* Cookie-Banner auf kleinen Bildschirmen: hoechstens 60 % der Hoehe, bei Bedarf scrollbar */
@media only screen and (max-width: 600px) {
  .cc-window.cc-banner, .cc-window.cc-floating { max-height: 60vh; overflow-y: auto; }
  .cc-window .cc-message { font-size: 13px; }
  .cc-window .cc-compliance { flex-wrap: wrap; }
  .cc-window .cc-compliance .cc-btn { min-width: 0; flex: 1 1 140px; }
}

/* Seitenrand: Text und Bilder nicht direkt am Browserrand */
@media only screen and (max-width: 900px) {
  #jsn-content_inner, #jsn-usermodules3, #jsn-usermodules3-inner, #jsn-footer-inner, #jsn-pos-bottom, #jsn-logo {
    padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box;
  }
  #jsn-usermodules3-inner, #jsn-usermodules3 #jsn-usermodules3-inner { padding-left: 0 !important; padding-right: 0 !important; }
  #jsn-usermodules3 { padding-left: 16px !important; padding-right: 16px !important; }
  #jsn-footer { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Leistung / Service: Bild und Text untereinander statt nebeneinander */
@media only screen and (max-width: 900px) {
  .box-image-left, .box-image-right, .box-text-left, .box-text-right, .content_image, .content_box, .content_box > table {
    float: none !important; clear: both; display: block; width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
  }
  .box-image-left, .box-image-right, .content_image { margin-top: 4px !important; margin-bottom: 14px !important; text-align: center; padding: 0 !important; }
  .box-text-left, .box-text-right { margin-bottom: 14px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .box-image-left img, .box-image-right img, .content_image img { display: block; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
  .content_box { padding: 12px !important; }
  .content_box table, .content_box tbody, .content_box tr, .content_box td { display: block; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
  ul.list-square { padding-left: 20px !important; margin-left: 0 !important; }
  section { display: block; overflow: hidden; }
}

/* Cookie-Buttons sauber untereinander/nebeneinander ohne Versatz */
@media only screen and (max-width: 600px) {
  .cc-window .cc-compliance { display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; }
  .cc-window .cc-compliance .cc-btn { margin: 0 !important; }
  .cc-window.cc-banner { padding: 12px 16px !important; }
}

@media only screen and (max-width: 900px) {
  .box-text-left, .box-text-right, .box-image-left, .box-image-right, .content_box, .content_image { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .box-text-left, .box-text-right { padding-top: 0 !important; padding-bottom: 0 !important; }
  .box-text-left h3, .box-text-right h3 { margin-top: 4px; }
}

/* Erstes Inhaltselement der Startseite (Promo-Text) mit Seitenrand */
@media only screen and (max-width: 900px) {
  #jsn-pos-promo .jsn-mod-custom { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}

/* Zweite Menueleiste (Unterpunkte) ist mobil doppelt, das Menue-Button-Menue enthaelt alles */
@media only screen and (max-width: 900px) {
  #jsn-pos-content-top ul.menu-mainmenu { display: none !important; }
  #jsn-pos-content-top .jsn-modulecontainer:has(ul.menu-mainmenu) { display: none !important; }
  #jsn-content-top_inner { padding: 0 !important; }
  .gm-model-overview, .gm-model-overview ul { list-style: none; padding-left: 0 !important; }
  .gm-model-overview a { display: inline-block; padding: 4px 0; }
}

/* Kategorie-Produktkacheln (Kurzdaten, ATEX-Spezifikation): kleine Datentabellen auf Mobilgeraeten als Tabelle darstellen */
@media (max-width: 900px) {
  #jsn-mainbody .category_box_inside table { width: 100% !important; max-width: 100% !important; }
  #jsn-mainbody .category_box_inside table table { display: table !important; width: 100% !important; table-layout: auto; }
  #jsn-mainbody .category_box_inside table table > tbody { display: table-row-group !important; width: auto !important; }
  #jsn-mainbody .category_box_inside table table > tbody > tr { display: table-row !important; width: auto !important; }
  #jsn-mainbody .category_box_inside table table > tbody > tr > td { display: table-cell !important; width: auto !important; padding: 3px 8px 3px 0 !important; text-align: left; }
  #jsn-mainbody .category_box_inside table table > tbody > tr > td:last-child { text-align: right; }
}
@media (max-width: 900px) {
  #jsn-mainbody .category_box_outside { float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; }
  #jsn-mainbody .category_box_inside { width: 100% !important; box-sizing: border-box; padding-left: 0 !important; padding-right: 0 !important; }
  #jsn-mainbody .category_box_inside img { max-width: 100%; height: auto; }
}