/*
   Quellcode 360 - xtc5 Responsive Override, bereinigt
   ---------------------------------------------------
   Laden NACH dem originalen stylesheet.css.

   Breakpoint:
   - Desktop / grosses Layout: ab 1100px
   - Responsive / Mobile: bis 1099px

   Hinweise:
   - Kein globales * { box-sizing: border-box; }, damit das alte xtc5-
     Spaltenlayout stabil bleibt.
   - Nur kritische Layout-Container erhalten gezielt box-sizing.
   - Mobile Header nutzt img/top_logo_mobile.jpg mit fixer Höhe 18vh.
*/

/* =========================================================
   Basis / Farben
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: url(img/bg.gif) repeat-x #f4f4f4;
  color: #2b2b2b;
  max-width: 100%;
  overflow-x: hidden;
}

img,
iframe,
object,
embed {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
.headline_big,
h2 {
  color: #1e1e1e;
}

h1,
.headline_big {
  border-color: #d6d6d6;
}

h3 {
  color: #444;
}

a:link,
a:visited,
a:active,
a:hover,
a.color_more,
a.autocomplete:link,
a.autocomplete:visited,
a.autocomplete:active,
a.autocomplete:hover {
  color: #ff6600 !important;
}

a:hover,
a:active {
  color: #1e1e1e !important;
}

.advanced_search,
.advanced_search:link,
.advanced_search:active,
.advanced_search:hover,
.advanced_search:visited {
  color: #000 !important;
  line-height: 30px;
  vertical-align: bottom;
}

/* =========================================================
   Formulare
   ========================================================= */

textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
#quick_find .search_cat_mode input[type="text"],
#quick_find input[type="text"],
#quick_find select,
div.agbframe {
  border-color: #666;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 12px 2px 4px;
  box-sizing: border-box;
  max-width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #ff6600;
}

/* =========================================================
   Header / Navigation / Breadcrumb
   ========================================================= */

#header {
  background: #1e1e1e url(img/top_logo.jpg) no-repeat left center;
  border-bottom-color: #2b2b2b;
}

#header #search,
#header #search a {
  color: #fff;
}

#breadcrumb {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: #ff6600;
  background: #fff url(img/bg_breadcrumb.gif) repeat-x;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

#breadcrumb *,
#breadcrumb a,
#breadcrumb span,
#breadcrumb span.current {
  max-width: 100%;
  color: #1e1e1e;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

#topmenuwrap,
#topmenu,
#languages {
  background: #1e1e1e url(img/bg_topmenu.gif) repeat-x;
}

#topmenu a,
#topmenu a:link,
#topmenu a:visited,
#topmenu a:active {
  color: #ff6000 !important;
}

#topmenu a:hover {
  color: #a0a0a0 !important;
}

/* =========================================================
   Boxen / Kategorien / Produktbereiche
   ========================================================= */

h2.categoryheader,
h2.boxheader,
h2.boxcartheader {
  background: #1e1e1e url(img/bg_boxheader.gif);
  color: #fff;
}

h2.boxcartheader {
  background: #ff6600 url(img/bg_boxheader_cart.gif);
}

h2.categoryheader a,
h2.boxheader a:link,
h2.boxheader a:hover,
h2.boxheader a:active,
h2.boxheader a:visited,
h2.boxcartheader a {
  color: #fff;
}

ul#categorymenu,
ul.contentmenu,
.boxbody,
.boxcartbody,
#productinfoimages,
.productoptions,
.addtobasket,
.morepics,
#tabbed_product_info .morepics,
.productnavigator,
.filter_bar,
.footer {
  background-color: #f4f4f4;
  border-color: #d8d8d8;
}

ul#categorymenu li.level1 a,
ul.contentmenu li.level1 a {
  color: #1e1e1e;
  background: #f2f2f2;
}

ul#categorymenu li.level1 a:hover,
ul.contentmenu li.level1 a:hover {
  color: #1e1e1e;
  background-color: #e8e8e8;
}

ul#categorymenu li.active1 > a,
ul#categorymenu li.active2 > a,
ul#categorymenu li.active3 > a,
ul#categorymenu li.active4 > a,
ul#categorymenu li.active5 > a,
ul.contentmenu li.active1 > a,
ul.contentmenu li.active2 > a,
ul.contentmenu li.active3 > a,
ul.contentmenu li.active4 > a,
ul.contentmenu li.active5 > a {
  background: #ffe1cc !important;
  background-image: none !important;
  color: #1e1e1e !important;
}

ul#categorymenu li.active1 > a *,
ul#categorymenu li.active2 > a *,
ul#categorymenu li.active3 > a *,
ul#categorymenu li.active4 > a *,
ul#categorymenu li.active5 > a *,
ul.contentmenu li.active1 > a *,
ul.contentmenu li.active2 > a *,
ul.contentmenu li.active3 > a *,
ul.contentmenu li.active4 > a *,
ul.contentmenu li.active5 > a * {
  color: #1e1e1e !important;
}

ul#categorymenu li.level2 a,
ul.contentmenu li.level2 a {
  color: #1e1e1e;
  background: url(img/dotted1.gif) no-repeat 8px 9px #ebebeb;
}

ul#categorymenu li.level2 a:hover,
ul.contentmenu li.level2 a:hover {
  background-color: #dfdfdf;
}

ul#categorymenu li.level3 a {
  color: #1e1e1e;
  background: url(img/dotted1.gif) no-repeat 16px 9px #e3e3e3;
}

ul#categorymenu li.level3 a:hover {
  background-color: #d7d7d7;
}

ul#categorymenu li.level4 a {
  color: #1e1e1e;
  background: url(img/dotted1.gif) no-repeat 24px 9px #dadada;
}

ul#categorymenu li.level4 a:hover {
  background-color: #cfcfcf;
}

ul#categorymenu li.level5 a {
  color: #1e1e1e;
  background: url(img/dotted1.gif) no-repeat 32px 9px #d1d1d1;
}

ul#categorymenu li.level5 a:hover {
  background-color: #c6c6c6;
}

/* =========================================================
   Farben in Content / Checkout / Meldungen
   ========================================================= */

div.hr,
ul.address_block li {
  background-color: #1e1e1e;
  border-color: #1e1e1e;
}

div.hrlightgrey {
  background-color: #999;
}

.boxbody p,
.boxbody td,
.productPreviewContent .price,
#productinfoprice .productprice,
.popup-cont,
.checkoutconfirmationorderdetailstotal tr td.value,
.checkoutconfirmationorderdetails tr td.productprice {
  color: #1e1e1e;
}

.boxbody .productOldPrice,
.productPreviewContent .productOldPrice,
#productinfoprice .productOldPrice,
.color_ot_total,
.color_error_message,
.expires_date,
div.highlightbox h1,
span.cop_magenta,
div.checkout_infos h2,
div.checkout_infos a,
.color_edit_info {
  color: #ff6600;
}

.productPreviewContent .taxandshippinginfo,
.productPreviewContent .vpe,
.productPreviewContent .shippingtime,
.productPreviewContent .stockimagetext,
#productinfoprice .taxandshippinginfo,
#productinfoprice .shippingtime,
#productinfoprice .stockimagetext,
.box_reviews_note a,
.reviews_note,
.copyright,
.parseTime,
.footer,
.footer a {
  color: #666;
}

.productPreviewContent .taxandshippinginfo a,
#productinfoprice .taxandshippinginfo a,
.box_reviews_note a,
a.color_more:hover {
  color: #ff6600 !important;
}

a.color_more:hover {
  text-decoration: underline !important;
}

#productinfoimages,
.boxbody .productboximage,
.morepics img,
dt img,
#productinfoimages .productimage,
.hl_image,
.suggestionList li a.autocomplete .autocomplete_image {
  border-color: #cfcfcf;
  background: #fff;
}

.banner_item img,
#productinfowrap img.productimage,
.productPreviewImage img {
  border-color: transparent;
}

div.highlightbox,
table.downloadbox,
.sitemapwrap .sitemapleft,
.sitemapwrap .sitemapright,
table.medialist,
table.reviewlist,
table.orderdetails,
table.paymentblock,
table.shippingblock,
table.graduatedprice,
div.checkoutNavBoxes,
div.checkoutNav2Boxes,
div#address_block div.address,
.subcontent,
.suggestionsBox,
.suggestionList li,
.tags_icons_tooltip .tags_icons_tooltip_hover,
.tags_options_tooltip .tags_options_tooltip_hover,
.tags_values_desc_hover {
  background-color: #f8f8f8;
  border-color: #d8d8d8;
}

.errormessage {
  border-color: #ff6600;
  background-color: #fff0e5;
}

.errormessage a {
  color: #1e1e1e;
}

.messageStackSuccess,
.infomessage {
  background-color: #eaf7ea;
  border-color: #5c9f5c;
}

.footer {
  background-color: #e9e9e9;
  border-bottom-color: #cfcfcf;
}

span.cop_grey {
  color: #6d6d6d;
}

div.checkoutbox {
  border-color: #ff6600 !important;
  background: #fff5ee !important;
}

div.checkoutbox td.main_row,
div.checkoutbox div.hr {
  border-top-color: #d8d8d8;
  background-color: #fff5ee;
  color: #1e1e1e;
}

div.checkoutbox .details {
  color: #1e1e1e;
}

table.paymentblock tr td.header,
table.shippingblock tr td.header,
table.orderdetails tr.headerrow td,
table.reviewlist tr.header td,
.sitemapheader {
  background-color: #2b2b2b;
  color: #fff;
}

.sitemapheader a:link,
.sitemapheader a:visited,
.sitemapheader a:hover {
  color: #fff;
}

table.orderdetails tr td.subtotal,
body.popupprintorder .products tr.header td {
  background-color: #f4f4f4;
}

ul#checkoutnavigation li.active {
  background-color: #fff5ee;
  border-color: #ff6600;
}

ul#checkoutnavigation li.inactive {
  color: #888;
  background-color: #ededed;
  border-color: #bbb;
}

.filter_bar,
.sort_bar,
.tags_bar,
.tags_block,
.tags_row,
.tags_bg1,
.tags_bg2,
.subcontent,
.autocomplete_error {
  color: #2b2b2b;
}

.tags_values_name_tooltip {
  border-bottom-color: #999;
}

.tags_row,
.tags_block,
.subcontent ul li a,
.contentlist a,
.suggestionList li,
ul.address_block li {
  border-color: #ddd;
}

#address_block_new > li.selected .address_inner {
  background: #ededed;
}

#address_block_new > li .address_inner,
#address_block_new .address_actions,
#address_block_new .address_inner_block {
  border-color: #d8d8d8;
}

.productPreviewContent h2,
.productPreviewContent h2 a,
.productPreviewContent h2 a:link,
.productPreviewContent h2 a:visited,
.productPreviewContent h2 a:hover,
.productPreviewContent h2 a:active {
  color: #ff6600 !important;
}

.productPreviewContent h2 a:hover,
.productPreviewContent h2 a:active {
  color: #e65c00 !important;
}

/* =========================================================
   Grundlegende Breiten-Sicherheit
   ========================================================= */

#wrap,
#wrapper,
#container,
#main,
#contentwrap,
#content,
#contentfull,
#leftcol,
#rightcol {
  max-width: 100%;
  min-width: 0 !important;
}

/* =========================================================
   Desktop ab 1100px
   ========================================================= */

@media (min-width: 1100px) {

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0 !important;
  }

  #wrap,
  #wrapper,
  #container,
  #main {
    box-sizing: border-box !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #header,
  #topmenuwrap,
  #breadcrumb,
  #contentwrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #topmenuwrap {
    text-align: left !important;
    overflow: hidden !important;
  }

  #topmenu,
  #topmenu ul {
    float: left !important;
    clear: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  #topmenu li {
    float: left !important;
    display: block !important;
    width: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  #topmenu li:first-child,
  #topmenu li.first,
  #topmenu li:first-child a,
  #topmenu li.first a {
    margin-left: 0 !important;
    padding-left: 10px !important;
    text-align: left !important;
  }

  #breadcrumb {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #contentwrap {
    clear: both;
    display: grid !important;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(190px, 220px);
    column-gap: 18px;
    align-items: start;
    overflow-x: hidden !important;
  }

  #leftcol,
  #left,
  .leftcol,
  .box_left {
    grid-column: 1;
    float: none !important;
    width: auto !important;
    max-width: 220px !important;
    min-width: 0 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #content {
    grid-column: 2;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px 0 !important;
    overflow-x: hidden !important;
  }

  #rightcol,
  #right,
  .rightcol,
  .box_right {
    grid-column: 3;
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 220px !important;
    min-width: 0 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  #contentfull {
    grid-column: 1 / -1;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 15px 0 !important;
    overflow: hidden;
  }

  #content table,
  #content tbody,
  #content tr,
  #content td,
  #content div,
  #content form,
  #content fieldset,
  #content ul,
  #content ol,
  #content p,
  #content h1,
  #content h2,
  #content h3 {
    max-width: 100%;
  }

  #content img,
  #content iframe,
  #content object,
  #content embed,
  #rightcol table,
  #rightcol img,
  #rightcol select,
  #rightcol input {
    max-width: 100% !important;
  }

  #content img {
    height: auto;
  }

  #content #productinfowrap,
  #content #productinfoimages,
  #content #productinfoprice,
  #content #productinfopricewithimages,
  #content #productinfopricewithoutimages,
  #content #tabbed_product_info,
  #content .productPreview,
  #content .productPreviewContent,
  #content .productPreviewImage,
  #content .productlisting,
  #content .listing,
  #content .product_box,
  #content .productbox,
  #content .productoptions,
  #content .addtobasket,
  #content .morepics,
  #content .filter_bar,
  #content .sort_bar,
  #content .tags_bar {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #content table.orderdetails,
  #content table.paymentblock,
  #content table.shippingblock,
  #content table.reviewlist,
  #content table.graduatedprice,
  #content table.downloadbox,
  #content table.medialist {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
  }

  #content,
  #content a,
  #content p,
  #content td,
  #content li,
  #rightcol,
  #rightcol a,
  #rightcol p,
  #rightcol td,
  #rightcol li,
  #rightcol .boxbody {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #rightcol h2.boxheader,
  #rightcol h2.boxcartheader,
  #rightcol .boxbody,
  #rightcol .boxcartbody,
  #rightcol .box,
  #rightcol .boxcontent,
  #rightcol form,
  #rightcol table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  #rightcol img,
  #rightcol select,
  #rightcol input,
  #rightcol textarea,
  #rightcol .productboximage,
  #rightcol .productPreviewImage {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #rightcol select,
  #rightcol input[type="text"],
  #rightcol input[type="password"],
  #rightcol input[type="email"],
  #rightcol input[type="search"] {
    width: 100% !important;
  }
}

/* =========================================================
   Responsive / Mobile bis 1099px
   ========================================================= */

@media (max-width: 1099px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    margin: 0 !important;
    background: #f4f4f4 !important;
    font-size: 16px;
    line-height: 1.45;
  }

  #wrap,
  #wrapper,
  #container,
  #main,
  .main,
  .content,
  .page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
  }

  /* Mobile Header: eigenes Logo, fixe Höhe 18% der Screenhöhe */
  #header {
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 8vh !important;
    min-height: max(70px, 8vh) !important;
    max-height: 8vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: #1e1e1e !important;
    background-image: url(img/top_logo_mobile.jpg?v=2.1) !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: auto 100% !important;
    overflow: hidden !important;
  }

  #header .header,
  #header #logo,
  #header .logo {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header img {
    display: none !important;
  }

  #header #search,
  #header .search,
  #quick_find,
  #quick_find_box,
  .search_box,
  .header_search {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Breadcrumb mobil entfernen */
  #breadcrumb {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* Top-Navigation mobil */
  #topmenuwrap,
  #topmenu,
  #topmenu li,
  #topmenu a {
    background-image: none !important;
    box-sizing: border-box !important;
  }

  #topmenuwrap {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 3px !important;
    overflow: hidden !important;
    background: #1e1e1e !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
  }

  #topmenu,
  #topmenu ul {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #topmenu li {
    float: none !important;
    display: block !important;
    flex: 1 1 calc(33.333% - 3px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #topmenu li a,
  #topmenu a,
  #topmenu a:link,
  #topmenu a:visited,
  #topmenu a:active,
  #topmenu a:hover {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    line-height: 1.12 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    color: #ff6600 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
  }

  #topmenu li a:hover,
  #topmenu a:hover,
  #topmenu li a:focus,
  #topmenu a:focus,
  #topmenu li a:active,
  #topmenu a:active {
    color: #ff8533 !important;
    background: rgba(255, 102, 0, 0.08) !important;
    text-decoration: none !important;
  }

  #nav a,
  #menu a,
  .nav a,
  .menu a {
    color: #ff6600 !important;
  }

  #nav a:hover,
  #menu a:hover,
  .nav a:hover,
  .menu a:hover {
    color: #ff8533 !important;
  }

  /* Rechte Spalte mobil entfernen */
  #rightcol,
  #right,
  .rightcol,
  .box_right,
  #rightcol * {
    display: none !important;
  }

  #header,
  #topmenuwrap,
  #topmenu,
  #contentwrap,
  #content,
  #contentfull,
  #middle,
  #maincontent,
  .maincontent,
  .content_center,
  #leftcol,
  #left,
  .leftcol,
  .sidebar,
  .box_left {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #topmenuwrap,
  #contentwrap,
  #content,
  #contentfull {
    width: 100% !important;
  }

  #contentwrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    overflow-x: hidden !important;
  }

  #content,
  #contentfull,
  #middle,
  #maincontent,
  .maincontent,
  .content_center {
    order: 1;
    float: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px 0 !important;
    padding: 16px !important;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    background: #fff;
    overflow-x: hidden !important;
  }

  #leftcol,
  #left,
  .leftcol,
  .sidebar,
  .box_left {
    order: 2;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  #leftcol h2.categoryheader,
  #leftcol h2.boxheader,
  #left h2.categoryheader,
  #left h2.boxheader {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 12px 12px 0 0;
  }

  #leftcol ul#categorymenu,
  #leftcol ul.contentmenu,
  #left ul#categorymenu,
  #left ul.contentmenu {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }

  #leftcol ul#categorymenu a,
  #leftcol ul.contentmenu a,
  #left ul#categorymenu a,
  #left ul.contentmenu a {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 15px;
  }

  /* Linke Zusatzboxen mobil ausblenden, Kategorien und Contentmenu bleiben sichtbar */
  #leftcol h2.boxheader:has(+ .boxbody),
  #leftcol h2.boxcartheader,
  #leftcol .boxbody,
  #leftcol .boxcartbody,
  #left h2.boxheader:has(+ .boxbody),
  #left h2.boxcartheader,
  #left .boxbody,
  #left .boxcartbody {
    display: none !important;
  }

  #leftcol h2.boxheader:has(+ ul.contentmenu),
  #left h2.boxheader:has(+ ul.contentmenu) {
    display: block !important;
  }

  /* Allgemeine Navigation */
  #nav,
  #menu,
  .nav,
  .menu,
  .categories {
    width: 100% !important;
  }

  #nav ul,
  #menu ul,
  .nav ul,
  .menu ul {
    display: block;
    padding-left: 0;
  }

  #nav li,
  #menu li,
  .nav li,
  .menu li {
    display: block;
    width: 100%;
  }

  #nav a,
  #menu a,
  .nav a,
  .menu a {
    display: block;
    padding: 10px 12px;
  }

  /* Produktlisten */
  .productlisting,
  .product-list,
  .listing,
  .product_box,
  .productbox {
    width: 100% !important;
  }

  .productlisting .product,
  .listing .product,
  .product_box,
  .productbox,
  .productListing-even,
  .productListing-odd {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 14px !important;
    border-radius: 14px;
  }

  .productPreview,
  .productPreview tbody,
  .productPreview tr,
  .productPreview td,
  .productPreviewImage,
  .productPreviewContent {
    display: block !important;
    width: 100% !important;
  }

  .productPreview {
    margin: 0 0 18px 0 !important;
    padding: 14px !important;
    border: 1px solid #ededed;
    border-radius: 14px;
    background: #fff;
  }

  .productPreviewImage {
    text-align: center !important;
    padding: 0 0 12px 0 !important;
  }

  .productPreviewImage img {
    max-height: 220px;
    object-fit: contain;
  }

  .productPreviewContent h2,
  .productPreviewContent h2 a {
    font-size: 1.15rem !important;
    line-height: 1.25;
  }

  .productPreviewContent .price,
  #productinfoprice .productprice,
  .productprice,
  .price,
  .product_price {
    font-size: 1.35rem !important;
    line-height: 1.25;
    margin: 10px 0 !important;
  }

  /* Produktdetailseite */
  #productinfowrap,
  .product_info,
  .productinfo,
  .product-detail,
  .productdetails {
    display: block !important;
    width: 100% !important;
  }

  #productinfoimages,
  #productinfopricewithimages,
  #productinfopricewithoutimages,
  .product_info_image,
  .productimage,
  .product_image,
  .product-images,
  .product-info-image,
  .product_info_content,
  .productcontent,
  .product_info_data,
  .product-info-data {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  #productinfoimages,
  .product_info_image,
  .productimage,
  .product_image,
  .product-images,
  .product-info-image {
    text-align: center;
  }

  #productinfoimages {
    padding: 12px !important;
    border-radius: 14px;
  }

  .addtobasket {
    text-align: left !important;
    border-radius: 12px;
  }

  .cart,
  .shopping_cart,
  .checkout,
  .account,
  .address,
  .formcontent {
    width: 100% !important;
  }

  .table-wrapper,
  .responsive-table {
    width: 100%;
    overflow-x: auto;
  }

  table {
    max-width: 100%;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    max-width: 100%;
    min-height: 38px;
    font-size: 16px;
  }

  #footer,
  .footer {
    width: 100% !important;
    text-align: center;
  }

  #footer .box,
  .footer .box {
    width: 100% !important;
    float: none !important;
    margin-bottom: 16px;
  }

  .copyright,
  .parseTime,
  #footer .copyright,
  .footer .copyright,
  #footer .parseTime,
  .footer .parseTime,
  #footer p:has(a[href*="modified"]),
  .footer p:has(a[href*="modified"]),
  #footer div:has(a[href*="modified"]),
  .footer div:has(a[href*="modified"]),
  #footer p:has(a[href*="modified-shop"]),
  .footer p:has(a[href*="modified-shop"]),
  #footer div:has(a[href*="modified-shop"]),
  .footer div:has(a[href*="modified-shop"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #content table,
  #content tbody,
  #content tr,
  #content td,
  #content div,
  #content form,
  #content fieldset,
  #content ul,
  #content ol,
  #content p,
  #content h1,
  #content h2,
  #content h3,
  #leftcol table,
  #left table {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #content img,
  #content iframe,
  #content object,
  #content embed,
  #leftcol img,
  #left img {
    max-width: 100% !important;
  }

  #content,
  #content a,
  #content p,
  #content td,
  #content li,
  #leftcol,
  #leftcol a,
  #leftcol p,
  #leftcol td,
  #leftcol li {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* =========================================================
   Sehr kleine Screens
   ========================================================= */

@media (max-width: 600px) {
  #topmenu li {
    flex-basis: calc(50% - 3px) !important;
  }

  #topmenu li a,
  #topmenu a,
  #topmenu a:link,
  #topmenu a:visited,
  #topmenu a:active,
  #topmenu a:hover {
    min-height: 29px !important;
    padding: 5px 6px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.55rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  #wrap,
  #wrapper,
  #container,
  #main,
  .main,
  .content,
  .page {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #content,
  #contentfull {
    padding: 12px !important;
    border-radius: 12px;
  }

  .productlisting .product,
  .listing .product,
  .product_box,
  .productbox,
  .productPreview {
    padding: 12px !important;
  }
}

@media (max-width: 360px) {
  #topmenu li a,
  #topmenu a,
  #topmenu a:link,
  #topmenu a:visited,
  #topmenu a:active,
  #topmenu a:hover {
    min-height: 28px !important;
    padding: 4px 5px !important;
    font-size: 13px !important;
    line-height: 1.08 !important;
  }
}

/* =========================================================
   Mobile Warenkorbtabelle: echte Tabelle mit internem Scroll
   ========================================================= */

@media (max-width: 1099px) {

  #content form[name="cart_quantity"],
  #content form[action*="shopping_cart"],
  #content .shopping_cart,
  #content .shoppingcart,
  #content .cart,
  #content .cartcontents,
  #content .cart_content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  #content form[name="cart_quantity"] table,
  #content form[action*="shopping_cart"] table,
  #content table.shopping_cart,
  #content table.shoppingcart,
  #content table.cart,
  #content .shopping_cart table,
  #content .shoppingcart table,
  #content .cart table,
  #content .cartcontents table,
  #content .cart_content table {
    display: table !important;
    width: 100% !important;
    min-width: 620px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    overflow: visible !important;
  }

  #content form[name="cart_quantity"] table thead,
  #content form[action*="shopping_cart"] table thead,
  #content table.shopping_cart thead,
  #content table.shoppingcart thead,
  #content table.cart thead {
    display: table-header-group !important;
  }

  #content form[name="cart_quantity"] table tbody,
  #content form[action*="shopping_cart"] table tbody,
  #content table.shopping_cart tbody,
  #content table.shoppingcart tbody,
  #content table.cart tbody {
    display: table-row-group !important;
  }

  #content form[name="cart_quantity"] table tr,
  #content form[action*="shopping_cart"] table tr,
  #content table.shopping_cart tr,
  #content table.shoppingcart tr,
  #content table.cart tr,
  #content form[name="cart_quantity"] table tr.headerrow,
  #content form[name="cart_quantity"] table tr.header,
  #content form[action*="shopping_cart"] table tr.headerrow,
  #content form[action*="shopping_cart"] table tr.header,
  #content table.shopping_cart tr.headerrow,
  #content table.shopping_cart tr.header,
  #content table.shoppingcart tr.headerrow,
  #content table.shoppingcart tr.header,
  #content table.cart tr.headerrow,
  #content table.cart tr.header {
    display: table-row !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #content form[name="cart_quantity"] table th,
  #content form[action*="shopping_cart"] table th,
  #content table.shopping_cart th,
  #content table.shoppingcart th,
  #content table.cart th {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: #2b2b2b !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  #content form[name="cart_quantity"] table td,
  #content form[action*="shopping_cart"] table td,
  #content table.shopping_cart td,
  #content table.shoppingcart td,
  #content table.cart td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: content-box !important;
    float: none !important;
    padding: 7px 6px !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #content form[name="cart_quantity"] td img,
  #content form[action*="shopping_cart"] td img,
  #content table.shopping_cart td img,
  #content table.shoppingcart td img,
  #content table.cart td img {
    max-width: 72px !important;
    height: auto !important;
  }

  #content form[name="cart_quantity"] input[name*="cart_quantity"],
  #content form[name="cart_quantity"] input[name*="qty"],
  #content form[name="cart_quantity"] input[type="number"],
  #content form[action*="shopping_cart"] input[name*="cart_quantity"],
  #content form[action*="shopping_cart"] input[name*="qty"],
  #content form[action*="shopping_cart"] input[type="number"] {
    width: 54px !important;
    max-width: 54px !important;
    min-width: 44px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  #content form[name="cart_quantity"] input[type="image"],
  #content form[action*="shopping_cart"] input[type="image"],
  #content form[name="cart_quantity"] a img,
  #content form[action*="shopping_cart"] a img {
    max-width: 110px !important;
    height: auto !important;
  }
}

@media (max-width: 600px) {
  #content form[name="cart_quantity"] table,
  #content form[action*="shopping_cart"] table,
  #content table.shopping_cart,
  #content table.shoppingcart,
  #content table.cart,
  #content .shopping_cart table,
  #content .shoppingcart table,
  #content .cart table,
  #content .cartcontents table,
  #content .cart_content table {
    min-width: 560px !important;
  }

  #content form[name="cart_quantity"] table th,
  #content form[action*="shopping_cart"] table th,
  #content table.shopping_cart th,
  #content table.shoppingcart th,
  #content table.cart th,
  #content form[name="cart_quantity"] table td,
  #content form[action*="shopping_cart"] table td,
  #content table.shopping_cart td,
  #content table.shoppingcart td,
  #content table.cart td {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }

  #content form[name="cart_quantity"] td img,
  #content form[action*="shopping_cart"] td img,
  #content table.shopping_cart td img,
  #content table.shoppingcart td img,
  #content table.cart td img {
    max-width: 56px !important;
  }
}

/* =========================================================
   Responsive Checkout: "Mehr"-Links / Detail-Buttons entfernen
   ========================================================= */

@media (max-width: 1099px) {

  body.postfinance-launch-page a.thickbox.details,
  body.postfinance-launch-page a[href*="print_product_info.php"],
  .checkoutbox a.thickbox.details,
  .checkoutbox a.details,
  .checkoutbox a[href*="print_product_info.php"],
  table.orderdetails a.thickbox.details,
  table.orderdetails a.details,
  table.orderdetails a[href*="print_product_info.php"],
  .checkoutconfirmationorderdetails a.thickbox.details,
  .checkoutconfirmationorderdetails a.details,
  .checkoutconfirmationorderdetails a[href*="print_product_info.php"] {
    display: none !important;
  }
}