/* Farben */
/* HHW-Grün: #00A387 */
/* Technotool-Rot: #E3001A */

/* Warenkorb-Animation (muss ganz oben stehen) */
li#warenkorb.animateCart > .skewEl {
  animation: cartColorAnim 1s;
  -webkit-animation-name: cartColorAnim;
  -webkit-animation-duration: 1s;
}

li#cartTop.animateCart a {
  animation: cartColorAnim 1s;
  -webkit-animation-name: cartColorAnim;
  -webkit-animation-duration: 1s;
}

div.cartWrapper .funktionsButton.animateBtn {
  animation: wishlistBtnAnim 1s;
  -webkit-animation-name: wishlistBtnAnim;
  -webkit-animation-duration: 1s;
}

@keyframes cartColorAnim {
  0% {
    background-color: #00a387;
  }

  50% {
    background-color: #f1b40f;
  }

  100% {
    background-color: #00a387;
  }
}

@-webkit-keyframes cartColorAnim {
  0% {
    background-color: #00a387;
  }

  50% {
    background-color: #f1b40f;
  }

  100% {
    background-color: #00a387;
  }
}

@keyframes wishlistBtnAnim {
  0% {
    background-color: #fff;
  }

  50% {
    background-color: #f1b40f;
  }

  100% {
    background-color: #f1b40f;
  }
}

@-webkit-keyframes wishlistBtnAnim {
  0% {
    background-color: #fff;
  }

  50% {
    background-color: #f1b40f;
  }

  100% {
    background-color: #f1b40f;
  }
}

/* ******************************************** Screen ******************************************** */
/* Mobile-First-Ansatz, d.h. zuerst die Klassen für Smartphones, später für größere Endgeräte */
/* Stufen: 320px, 480px, 600px, 768px, 980px*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, "Arial", sans-serif;
  color: #000;
  font-size: 16px;
}

.clear {
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  clear: both;
  visibility: hidden;
}

table {
  border-collapse: collapse;
}

  table td {
    vertical-align: top;
    border-collapse: collapse;
  }

h1 {
  font-size: 30px;
  color: #00a387;
  font-weight: normal;
  margin: 5px 0 5px 0;
}

  h1.h1Startseite {
    margin-top: 35px;
  }

span.subHeadline {
  font-size: 25px;
}

h2 {
  font-size: 26px;
  color: #333333;
  margin: 5px 0 5px 0;
  text-align: left !important;
}


h3 {
  font-size: 1.1em;
  font-weight: bold;
  color: #333333;
  margin: 5px 0 5px 0;
}

h4 {
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  margin: 5px 0 5px 0;
}

a {
  color: #00A387;
  text-decoration: underline;
}

  a.tblSort {
    color: #FFFFFF;
    text-decoration: underline;
  }

select {
  padding: 2px;
  height: 26px;
}

input[type="text"], input[type="password"], select, textarea { /*-webkit-appearance: none;*/
  box-shadow: none !important;
  -webkit-border-radius: 0px !important;
  font-size: 14px;
  padding: 0 3px 0 3px;
}

input.inputAnmelden {
  width: 50% !important;
}

input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
  box-shadow: none !important;
  -webkit-border-radius: 0px !important;
}

input[type="text"], input[type="password"] {
  height: 26px;
}

.formularBlock input[type="submit"] {
  height: 26px;
  margin: 0;
  color: #00a387;
}

input[type="image"] {
  padding: 1px 0 2px;
}

input[type="checkbox"],
.kostenstelle.preisAdm > span {
  -webkit-appearance: none;
  padding: 0px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-color: transparent;
  box-shadow: none !important;
  -webkit-border-radius: 0px !important;
}

  input[type='checkbox']:checked {
    position: relative;
  }

    input[type='checkbox']:checked:before {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 1px;
      left: 1px;
      background: none #00a387;
      opacity: 0.6;
    }

input, textarea {
  border: 1px solid #ABADB3;
  background-color: #fff;
}

  input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
    color: #fff !important;
  }


  /* 06.03.2017 für Sortierpfeile, die mit "input type=image" erzeugt werden */
  /* 27.04.2020 Löschen-Button für Sortimentslisten eingefügt */
  input.pfeilSortierung, input.loeschenButton {
    border: none !important;
    background: none !important;
    vertical-align: middle;
  }

ul {
  list-style: none;
  margin: 0;
}

  ul li {
    margin: 0;
    padding: 0;
  }

.menue1:after,
.artikelliste.kachel:after {
  content: ".";
  width: 100%;
  height: 0;
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
  line-height: 0;
  font-size: 0;
  display: none;
}

img {
  border: 0;
  outline: 0;
}

p a,
.mainWrapper > .inner ul li > a {
  color: #00a387;
  text-decoration: underline;
}

.kategorienFuss li > a {
  color: #fff;
}

.mainWrapper .inner ul li > a {
  padding: 6px 0;
  display: inline-block;
}

.mainWrapper .inner ul {
  padding: 0;
}

.ui-helper-hidden-accessible {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/********** Aufbau ***********/
.outterWrap {
  width: 100%;
  height: 100%;
}

.innerWrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

header {
  position: relative;
  background-color: #fff;
}

  header .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 99;
  }

div.logo {
  width: 100%;
  margin-bottom: 6px;
}

  div.logo a {
    display: block;
    width: 100%;
    height: 100%;
  }

  div.logo img {
    width: auto;
    /*width: 40%;*/
    width: 27%;
    max-width: 200px;
    display: block;
  }

.fixed-header {
  position: fixed;
  min-height: 175px;
  z-index: 9999999;
  width: 100%;
  top: 0px;
}

  .fixed-header.menOp,
  .menOp.fixed-header {
    height: 99%;
    overflow-y: auto;
  }

body.formular .fixed-header {
  position: relative;
  min-height: 175px;
  height: auto;
}

.fixed-header div.logo,
.fixed-header div.accountInfo,
.fixed-header div.contactInfo {
  display: none;
}

.top-margin {
  padding-top: 250px;
}

body.formular .top-margin {
  padding-top: 0px;
}

.sectionHeadline {
  font-size: 30px;
  color: #00A387;
}

h4.subHeadline {
  font-size: 14px;
  color: #bcbfc4;
  margin-bottom: 20px;
}

div.mainWrapper .inner table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
}

  div.mainWrapper .inner table th,
  div.mainWrapper .inner table td {
    border: 0;
  }

  div.mainWrapper .inner table th {
    color: #fff;
    background-color: #00a387;
    font-weight: normal;
    font-size: 17px;
    padding: 6px 10px;
  }

  div.mainWrapper .inner table td {
    color: #000;
    font-size: 15px;
    font-weight: normal;
    padding: 6px 10px;
  }

  /* 28.02.2018 eingefügt für Angebotstool */
  div.mainWrapper .inner table.angebotstool td {
    font-size: 13px !important;
    padding: 2px 5px;
  }

  div.mainWrapper .inner table tbody tr:nth-child(1n+2) td, div.mainWrapper .inner table tbody tr:first-child td {
    background-color: #bcbfc4;
  }

  /* 28.02.2018 Überschreibung für Angebotstool */
  div.mainWrapper .inner table.angebotstool tbody tr:nth-child(1n+2) td {
    background-color: #ffffff;
  }

  div.mainWrapper .inner table.angebotstool tbody tr:first-child td {
    background-color: #e3e3e3;
  }

  div.mainWrapper .inner table tbody tr:nth-child(2n+2) td {
    background-color: #e3e3e3;
  }

div.zoomContainer {
  display: none;
}



/* 24.05.2019 eingefügt für Reklamation */
table.reklamation tbody th {
  vertical-align: top;
}

/* nur jede zweite Zeile anders färben */
table.reklamation tbody tr:nth-child(4n+2) td,
table.reklamation tbody tr:nth-child(4n+3) td {
  background-color: #bcbfc4 !important;
}

table.reklamation tbody tr:nth-child(4n+4) td,
table.reklamation tbody tr:nth-child(4n+5) td {
  background-color: #e3e3e3 !important;
}

/* Label anders */
.formularReklamation label {
  font-size: 16px !important;
  padding-top: 3px !important;
  min-width: 20% !important;
}



/* *************************** Topmenü *************************** */
div .topmenueWrapper {
  width: 100%;
}

div.webtyp {
  position: absolute;
  left: 33%;
  top: 35px;
  z-index: 10000;
  font-weight: bold;
  color: red;
}

div.accountInfo {
  width: auto;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #00A387;
  font-size: 12px;
  font-weight: bold;
  display: block;
}

  div.accountInfo a {
    color: #00A387;
    font-size: 12px;
    text-decoration: none;
  }

  div.accountInfo span#accountDesktop {
    display: none;
  }

.topmenue {
  width: auto;
  max-width: 100%;
  padding: 0;
  position: relative;
}

  .topmenue li {
    float: left;
    text-align: right;
    /*width: 16.66666666666666%;*/
    width: 20%;
  }

    .topmenue li a,
    .topmenue li span {
      display: block;
      width: 100%;
      padding: 6px 10px;
      color: #00A387;
      font-size: 12px;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
    }

    .topmenue li#faqTop,
    .topmenue li#telTop,
    .topmenue li#cartTop,
    .topmenue li#wishlist,
    .topmenue li#showLogin,
    .topmenue li#logoutDesktop,
    .topmenue li#showQuickOrder,
    .topmenue li#showLanguage,
    .topmenue li#profilMobile {
      border-left: 1px solid #bcbfc4;
    }

    .topmenue li#telTop,
    .topmenue li#logoutDesktop {
      display: none;
    }

.loggedOut .topmenue li#profilMobile {
  display: none;
}

.topmenue li:first-child {
  border-left: 0 !important;
}

.topmenue li#faqTop {
  display: none;
}

  .topmenue li a,
  .topmenue li#wishlist a,
  .topmenue li#faqTop a,
  .topmenue li#telTop a,
  .topmenue li#cartTop a,
  .topmenue li#showLogin span,
  .topmenue li#showLogin a,
  .topmenue li#logoutDesktop a,
  .topmenue li#showQuickOrder span,
  .topmenue li#showLanguage span,
  .topmenue li#profilMobile a {
    /*text-indent: 999px;*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #00A387;
    padding: 0;
    min-height: 52px;
    height: auto;
  }

.topmenue li#showLogin span,
.topmenue li#showLogin a,
.topmenue li#profilMobile a,
.topmenue li#logoutDesktop a {
  background-image: url('../images/icons/icon_anmelden.gif');
}

.topmenue li#wishlist a {
  background-image: url('../images/icons/icon_merkliste.gif');
}

.topmenue li#cartTop a {
  background-image: url('../images/icons/icon_warenkorb2.png');
  text-indent: 0px;
}

.topmenue li#telTop a {
  background-image: url('../images/icons/icon_telefon.gif');
}

.topmenue li#showLanguage span {
  background-image: url('../images/icons/icon_sprache.gif');
}

.topmenue li#showQuickOrder span {
  background-image: url('../images/icons/icon_quick-order.gif');
}

.topmenue li#cartTop a span#warenkorbPositionen {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 52px;
  text-align: center;
  text-indent: 6px;
  color: #00a387;
  padding-top: 18px;
  font-size: 12px;
  font-weight: normal;
}

div.anmelden,
div.quickorder,
div.sprache {
  position: relative;
  background-color: #bcbfc4;
  width: 100%;
  height: auto;
  max-height: 0;
  /*opacity: 0;*/
  visibility: hidden;
  display: block;
  -transition: all .65s ease 0.1s;
  -moz-transition: all .65s ease 0.1s;
  -webkit-transition: all .65s ease 0.1s;
  transition: all .65s ease 0.1s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

  div.anmelden.show,
  div.quickorder.show,
  div.sprache.show {
    max-height: 500px;
    /*opacity: 1;*/
    visibility: visible;
    border-top: 1px solid #bcbfc4;
  }

div.anmelden,
div.quickorder,
div.sprache {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

  div.anmelden fieldset,
  div.quickorder fieldset,
  div.sprache {
    border: 0;
    text-align: right;
    padding: 0;
    margin: 0;
  }

    div.anmelden fieldset,
    div.quickorder fieldset,
    div.sprache > div {
      opacity: 0;
      -transition: all .65s ease 0.1s;
      -moz-transition: all .65s ease 0.1s;
      -webkit-transition: all .65s ease 0.1s;
      transition: all .65s ease 0.1s;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0);
    }

    div.anmelden.show fieldset,
    div.quickorder.show fieldset,
    div.sprache.show > div {
      opacity: 1;
    }




    div.anmelden a.closeWindow,
    div.quickorder a.closeWindow,
    div.sprache a.closeWindow {
      position: absolute;
      top: 5px;
      right: 10px;
      height: 26px;
      font-size: 14px;
      line-height: 20px;
      color: #fff;
      font-weight: bold;
      text-decoration: none;
    }

    div.anmelden legend,
    div.quickorder legend,
    div.sprache span {
      display: block;
      width: 100%;
      color: #fff;
      text-transform: uppercase;
      margin: 0 0 10px 0;
      text-align: left;
      background-color: #00A387;
      padding: 5px 0 4px 10px;
      font-size: 16px;
      font-weight: normal;
      height: auto;
      line-height: 21px;
    }

ul.anmelden,
ul.quickorder {
  padding: 0 16px;
  width: 100%;
}

  ul.anmelden li,
  ul.quickorder li {
    margin-bottom: 8px;
    font-size: 14px;
  }

    ul.anmelden li span,
    ul.quickorder li span {
      color: #000;
    }

    ul.anmelden li input,
    ul.quickorder li input {
      color: #000;
      width: 64%;
      font-size: 14px;
      height: 24px;
      line-height: 22px;
      padding: 0 4px;
      border: 0;
      margin-left: 6px;
    }

    ul.anmelden li a,
    ul.quickorder li a {
      margin-bottom: 8px;
      font-size: 14px;
      color: #000;
      font-size: 14px;
      text-decoration: none;
    }

    ul.quickorder li input {
      width: 43%;
    }

      ul.anmelden li input[type="submit"],
      ul.anmelden li a.linkButton,
      ul.quickorder li input[type="submit"],
      ul.quickorder li input[type="button"],
      ul.quickorder li:last-child a {
        background-color: #00A387;
        color: #fff;
        border: 0;
        font-size: 14px;
        width: auto;
        padding: 0 12px;
        cursor: pointer;
      }

    ul.anmelden li a.linkButton,
    ul.quickorder li:last-child a {
      width: auto;
      display: inline-block;
      color: #fff;
      padding: 4px 12px;
      text-decoration: none;
      margin-left: 8px;
    }

  ul.anmelden > li a {
    color: #00a387;
    text-decoration: underline;
  }

div.anmelden #B_Anmelden {
  cursor: pointer;
}

div.sprache a {
  display: block;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 16px;
}

  div.sprache a:hover {
    color: #00a387;
  }

  div.sprache a.closeWindow,
  div.sprache a.closeWindow:hover {
    padding: 0;
    color: #fff;
  }

/* *************************** Topcontainer *************************** */
div.utilWrapper {
  width: 100%;
  padding: 10px;
  background-color: #fff;
}

div.contactInfo {
  width: 100%;
  margin: 0;
  display: none;
}

.contactInfo p {
  padding-left: 40px;
  color: #00a387;
  font-size: 16px;
  background-position: center left;
  background-repeat: no-repeat;
  height: 30px;
  line-height: 30px;
  margin: 0;
}

  .contactInfo p.phone {
    background-image: url('../images/icons/icon_hotline.jpg');
    font-weight: bold;
  }

  .contactInfo p.delivery {
    background-image: url('../images/icons/icon_lieferung.jpg');
  }

div.search {
  width: 100%;
  position: relative;
  background-color: #fff;
  text-align: right;
}

.search a {
  color: #00a387;
  font-size: 12px;
}

.search input[type="text"] {
  width: 100%;
  border: 1px solid #00a387;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  height: 39px;
  line-height: 37px;
  padding: 0 51px 0 10px;
  text-align: left;
}

.search input[type="submit"] {
  width: 41px;
  height: 37px;
  background-image: url('../images/icons/icon_lupe.jpg');
  background-repeat: no-repeat;
  text-indent: 99999px;
  overflow: hidden;
  position: absolute;
  top: 1px;
  right: 1px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0px;
}

/* *************************** Buttonleiste *************************** */
div.btnBar {
  width: 51px;
  height: auto;
  position: absolute;
  right: 0;
  bottom: -330px;
  display: none;
}

.fixed-header div.btnBar {
  bottom: -343px;
}

.btnBar div.btn {
  border: 0;
  outline: 0;
  line-height: 1;
  height: 51px;
  display: block;
  opacity: 0.7;
}

.btnBar img {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid transparent;
}

.btnBar a:last-child img {
  border: 0;
}




/* 21.09.2017 Registrieren-Leiste links */
div.registrierenBar {
  display: none; /* zunächst unsichtbar, nur in Desktop-Ansicht sichtbar */
  position: absolute;
  left: -15px; /* zunächst aus dem Bildschirmrand schieben */
  top: 240px;
  height: 246px;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

  div.registrierenBar a {
    display: block;
    position: absolute;
    width: 230px;
    margin: 0;
    padding: 10px 0 0 0;
    /*border: 1px solid red;*/
    text-align: center;
    text-decoration: none;
    top: -30px;
    left: -185px;
    font-size: 1.4em;
    font-weight: bold;
    color: #FFFFFF;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  div.registrierenBar:hover {
    margin-left: 10px; /* ausfahren */
    opacity: 1;
  }





/* *************************** Artikelliste *************************** */
ul.artikelliste li {
  min-height: 50px;
}

/* *************************** Hauptmenü *************************** */
div.hauptmenue {
  display: block;
  width: 100%;
  background-color: #e3e3e3;
  background-color: #e3e3e3;
  background-image: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
  background-repeat: repeat-x;
  position: relative;
  z-index: 88;
  clear: both;
}

  div.hauptmenue .inner {
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
  }

.hauptmenue a,
.hauptmenue span {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  text-decoration: none;
  color: #979696;
}

.hauptmenue span {
  color: #fff;
}

.menue1 > li > div.m1Aktiv {
  background-color: #bcbfc4;
}

.menue1 > li > div > a.m1Aktiv {
  color: #00a387;
}


.menuBtn.mobile {
  display: block;
  background-image: url('../images/icons/icon_menue.png');
  height: 44px;
  background-repeat: no-repeat;
  background-position: 5px center;
  width: 100%;
  line-height: 34px;
  cursor: pointer;
  padding: 5px 0 5px 70px;
}

.menue1, .menue2, .menue3 {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.menue1 {
  position: relative;
  max-height: 0;
  /*opacity: 0;*/
  visibility: hidden;
  -transition: visibility 0s linear .9s, max-height .9s ease-in-out; /*, opacity .9s ease-in-out;*/
  -moz-transition: visibility 0s linear .9s, max-height .9s ease-in-out; /*, opacity .9s ease-in-out;*/
  -webkit-transition: visibility 0s linear .9s, max-height .9s ease-in-out; /*, opacity .9s ease-in-out;*/
  transition: visibility 0s linear .9s, max-height .9s ease-in-out; /*, opacity .9s ease-in-out;*/
}

  .menue1.showMenu {
    visibility: visible;
    max-height: 5000px;
    /*opacity: 1;*/
    transition-delay: 0s;
  }

  .menue1 > li {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    line-height: 44px;
    max-height: 56px;
    overflow: hidden;
    -transition: max-height .8s ease-in-out;
    -moz-transition: max-height .8s ease-in-out;
    -webkit-transition: max-height .8s ease-in-out;
    transition: max-height .8s ease-in-out;
  }

    .menue1 > li > div > a {
      text-indent: 10px;
    }

    .menue1 > li#warenkorb > div > a {
      text-indent: 0;
    }

    .menue1 > li.showSub {
      max-height: 5000px;
      overflow: visible;
      background-color: #bcbfc4;
    }

    .menue1 > li:hover > .skewEl {
      background-color: #bcbfc4;
    }

    .menue1 > li#warenkorb > .skewEl {
      background-color: #00a387;
      color: #fff;
    }

    .menue1 > li > .skewEl {
      display: block;
      width: 100%;
    }

      .menue1 > li > a,
      .menue1 > li > .skewEl > a {
        color: #979696;
        text-decoration: none;
        font-weight: bold;
      }

      .menue1 > li > a,
      .menue1 > li > .skewEl > a,
      .menue1 > li#warenkorb span,
      .menue1 > li#warenkorb > .skewEl > span,
      .menue1 > li#warenkorb > .skewEl > a {
        padding: 6px 0;
        font-size: 15px;
        text-transform: uppercase;
      }

    .menue1 > li#warenkorb span,
    .menue1 > li#warenkorb > .skewEl > span,
    .menue1 > li#warenkorb > .skewEl > a {
      padding: 0;
    }

      .menue1 > li:hover > a,
      .menue1 > li:hover > .skewEl > a,
      .menue2 > li:hover > a,
      .menue3 > li:hover > a,
      .menue1 > li#warenkorb span a,
      .menue1 > li#warenkorb > .skewEl > a {
        color: #00a387;
      }

    .menue1 > li#warenkorb > .skewEl span,
    .menue1 > li#warenkorb > .skewEl > a {
      display: block;
      font-size: 11px;
      text-align: center;
      text-transform: none;
      line-height: 1.9em;
      color: #fff;
    }

      .menue1 > li#warenkorb > .skewEl > a.cartHead {
        font-size: 14px;
        text-align: left;
        font-weight: normal;
        width: 100%;
        height: 56px;
        padding: 0;
      }

        .menue1 > li#warenkorb > .skewEl > a.cartHead #warenkorbTitel {
          background-image: url('../images/icons/icon_warenkorb.png');
          background-repeat: no-repeat;
          background-position: 7px 9px;
          height: 30px;
          padding: 5px 0 0 36px;
          margin-left: 8px;
          font-size: 14px;
          text-align: left;
        }

        .menue1 > li#warenkorb > .skewEl > a.cartHead #warenkorbText {
          text-align: left;
          margin-left: 44px;
        }

.menue2, .menue3, .subWrapper {
  display: block;
  z-index: 999;
}

.menue2 {
  width: 100%;
  padding: 0;
  visibility: hidden;
  /*opacity: 0;*/
  -transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
  -moz-transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
  -webkit-transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
  transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
}

  .menue1 > li.showSub > .menue2,
  .menue2 > li.showSub > .subWrapper {
    visibility: visible;
    /*opacity: 1;*/
    transition-delay: 0s;
  }

  .menue2 > li {
    width: 100%;
    padding: 0;
    line-height: 1;
    /*max-height: 42px;*/
    max-height: 40px;
    overflow: hidden;
    text-align: left;
    text-indent: 20px;
    -transition: max-height .8s ease-in-out;
    -moz-transition: max-height .8s ease-in-out;
    -webkit-transition: max-height .8s ease-in-out;
    transition: max-height .8s ease-in-out;
  }

    .menue2 > li.showSub {
      max-height: 5000px;
      overflow: visible;
      background-color: #ced0d4;
    }

    .menue2 > li:hover {
      background-color: #ced0d4;
    }

    .menue2 > li > a {
      padding: 11px 0 13px;
      color: #000;
      font-size: 16px;
    }

    .menue2 > li.hasSubmenu > a:after {
      background-image: url('../images/icons/pfeil_schwarz.gif');
      background-position: center center;
      background-repeat: no-repeat;
      width: 12px;
      height: 10px;
      padding-left: 14px;
      content: "";
    }

    .menue2 > li.hasSubmenu:hover > a:after,
    .menue2 > li.showSub > a:after {
      background-image: url('../images/icons/pfeil_gruen.gif');
    }

    .menue2 > li > .subWrapper {
      position: relative;
      width: auto;
      min-height: 100%;
      max-width: 100%;
      background-color: #ced0d4;
      visibility: hidden;
      /*opacity: 0;*/
      -transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
      -moz-transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
      -webkit-transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
      transition: visibility 0s linear .8s; /*, opacity .8s ease-in-out;*/
    }

.menue3 {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0;
}

  .menue3 > li {
    line-height: 1;
    text-indent: 0;
    text-align: left;
    text-indent: 40px;
  }

    .menue3 > li > a {
      padding: 8px 0 8px 10px;
      color: #000;
      font-size: 15px;
    }

li.showSub > div > a,
li.showSub > a {
  color: #00A387;
}




/* *************************** Mainwrapper *************************** */
div.mainWrapper .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1px 10px 0;
}

/* *************************** Kopf-Slider *************************** */
.sliderWrapper {
  background-color: #BCBFC4;
  width: 100%;
  height: auto;
  max-height: 436px;
  position: relative;
  /*margin-bottom: 30px;*/
  display: none; /** TEST ***********************************************************************************************/
}

#flexslider {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.flex-caption {
  display: none;
}

#flexslider .slides li a {
  color: #000;
  text-decoration: none !important;
  outline: 0 !important;
  border: 0;
  display: block;
}

.flex-control-nav {
  display: none;
}

/* *************************** Breadcrumb *************************** */
div.breadcrumbWrapper {
  padding: 10px 0;
  margin-bottom: 20px; /* 31.03.2020 generell von 30px auf 20px reduziert */
  /*display: none;*/
}

.breadcrumbWrapper .breadcrumb {
  padding: 0;
  margin: 0;
}

  .breadcrumbWrapper .breadcrumb li {
    display: inline-block;
  }

    .breadcrumbWrapper .breadcrumb li a,
    .breadcrumbWrapper .breadcrumb li span {
      color: #00a387;
      font-size: 14px;
      text-decoration: none;
    }

    .breadcrumbWrapper .breadcrumb li:hover a {
      text-decoration: underline;
    }

    .breadcrumbWrapper .breadcrumb li:after {
      content: "•";
      color: #00a387;
      display: inline-block;
      margin: 0 10px 0;
      font-size: 14px;
    }

    .breadcrumbWrapper .breadcrumb li.active:after,
    .breadcrumbWrapper .breadcrumb li:last-child:after,
	.breadcrumbWrapper .breadcrumb li.breadcrumbLast:after {
      content: "";
      display: none;
    }

    .breadcrumbWrapper .breadcrumb li.active a,
    .breadcrumbWrapper .breadcrumb li.active span,
    .breadcrumbWrapper .breadcrumb li:last-child a,
    .breadcrumbWrapper .breadcrumb li:last-child span,
	.breadcrumbWrapper .breadcrumb li.breadcrumbLast a,
	.breadcrumbWrapper .breadcrumb li.breadcrumbLast span {
      color: #000;
      text-decoration: none;
      cursor: default;
    }
	
	.breadcrumbWrapper .breadcrumb li.breadcrumbBack {
		display: none;
	}

/* *************************** Kategorieliste *************************** */
.kategorienWrapper {
  padding: 20px 0 30px;
  margin: 0 auto 20px;
  position: relative;
  max-height: 880px;
  overflow: hidden;
  -transition: max-height .9s ease-in-out .1s;
  -moz-transition: max-height .9s ease-in-out .1s;
  -webkit-transition: max-height .9s ease-in-out .1s;
  transition: max-height .9s ease-in-out .1s;
}

  .kategorienWrapper.unterkategorien {
    max-height: 5000px;
  }

  .kategorienWrapper.show {
    max-height: 5000px;
  }

.showArrow {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  color: #00a387;
  padding: 1% 0 24px;
  background-image: url("../images/icons/pfeil.png");
  background-repeat: no-repeat;
  background-position: center 20px;
}

.kategorienWrapper.show .showArrow {
  background-image: url("../images/icons/pfeil_up.png");
}

.kategorienWrapper div#showArrow2,
.kategorienWrapper.show div#showArrow {
  display: none;
}

.kategorienWrapper.show div#showArrow2,
.kategorienWrapper div#showArrow {
  display: block;
}

.kategorie {
  position: relative;
  width: 100%;
  height: 187px;
  margin-bottom: 20px;
}

  .kategorie a {
    text-decoration: none;
    color: #000;
    border: 0;
  }

  .kategorie .kategorieBild {
    max-width: 280px;
    margin: 0 auto;
  }

  .kategorie.sub .kategorieBild {
    overflow: hidden;
    border: 1px solid #e3e3e3;
  }

div.kategorieBild img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.kategorie .kategorieName {
  text-align: center;
  font-size: 14px;
  padding: 6px 0 0;
  margin-top: -31px;
  font-weight: normal;
}

.kategorie.sub .kategorieName {
  margin: 0 auto;
  padding: 6px 0;
  background-color: #e3e3e3;
  max-width: 280px;
  /*min-height: 46px;*/
}



/* *************************** Artikelliste *************************** */
.messageWrapper {
  width: 100%;
  position: relative;
  padding: 10px 0;
}

.prodNavWrapper,
.prodSelectWrapper {
  width: 100%;
  clear: both;
  padding-bottom: 20px;
  border-bottom: 1px solid #bcbfc4;
}

.prodNavWrapper {
  border: 0;
  padding-bottom: 0;
  margin: 10px 0 0;
}

.siteCount, .prodSort, .prodFilter, .prodTyp {
  width: auto;
}

.prodTyp {
  display: none;
}

.siteCount, .prodSort, .prodFilter {
  margin-bottom: 6px;
}

.prodNavWrapper .paging {
  padding: 0;
  width: 100%;
  margin-bottom: 6px;
}

.paging a, .paging span {
  font-size: 16px;
  background-color: #e3e3e3;
  color: #000;
  line-height: 1;
  display: inline-block;
  padding: 10px 11px;
  border: 1px solid #e3e3e3;
}

.paging span {
  background-color: transparent;
}

.paging a {
  text-decoration: none;
}

  .paging a:hover {
    background-color: #bcbfc4;
    border-color: #bcbfc4;
    color: #fff;
  }

  .paging a:last-child {
    margin-left: 1%;
  }

ul.artikelliste li {
  min-height: 50px;
}

div.hauptartikel {
  width: 100%;
  border-bottom: 1px solid #00A387;
  margin: 0;
  padding: 20px 0;
  /*position: relative; am 10.05.2016 eingefügt wegen NEU*/
}

div.linieOben {
  border-top: 1px solid #00A387;
}

div.hauptartikelbild,
div.hauptartikeltext,
div.hauptartikelwarenkorb {
  float: left;
  width: 50%;
}

div.hauptartikelbild,
div.hauptartikelwarenkorb {
  width: 100%;
  max-width: 25%;
}

  div.hauptartikelbild img {
    /*width: 100%;*/
    /*max-width: 92%;*/
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

/*10.05.2016 eingefügt*/
.hauptartikel .neu {
  position: absolute;
  /*left: 50px;
  top: 50px;*/
}


.hauptartikeltext h4 {
  font-weight: normal;
  color: #000;
  font-size: 20px;
  margin: 0;
}

.hauptartikel h4.prodDesc {
  margin-bottom: 20px;
}

.hauptartikel h4.manufacture {
  font-size: 16px;
}

.hauptartikeltext a {
  color: #000;
  text-decoration: none;
}

.hauptartikeltext h4 span {
  font-size: 14px;
  display: block;
}




.variant,
.amount,
.siteCount,
.prodSort,
.prodFilter,
.prodTyp,
.kostenstelle {
  background-color: #e3e3e3;
  padding: 6px;
  width: auto;
  max-width: 100%;
  height: 36px;
}

.prodTyp {
  background-color: transparent;
  padding: 0;
}

  .prodTyp input {
    border: 8px solid #e3e3e3;
    background-color: #e3e3e3;
  }

.siteCount, .prodSort, .prodFilter, .prodTyp {
  height: auto;
}

.variant, .amount {
  float: left;
}

  .variant label,
  .amount label,
  .siteCount label,
  .prodSort label,
  .prodFilter label,
  .kostenstelle label {
    color: #00A387;
    font-size: 13px;
    line-height: 1;
    height: auto;
    display: inline-block;
    width: auto;
    padding-right: 8px;
  }

.siteCount label,
.prodSort label,
.prodFilter label {
  padding-right: 4px;
  width: 36%;
}

.siteCount select,
.prodSort select,
.prodFilter select {
  width: 62%;
}

.variant select,
.amount select,
.kostenstelle select {
  color: #000;
  width: auto;
  height: 100%;
  font-size: 14px;
  max-width: 74%;
}

.hauptartikelwarenkorb .amount {
  /*margin-right: 6%;*/
  width: auto;
  max-width: 100%;
}

.amount select {
  text-align: center;
  padding: 2px 0;
}

.hauptartikelwarenkorb .amount,
.hauptartikelwarenkorb input.cartBtn {
  float: left;
}

.hauptartikelwarenkorb input.cartBtn {
  width: 20%;
  max-width: 51px;
  height: 38px;
}

.hauptartikelwarenkorb div.price span,
.hauptartikelwarenkorb div.stock span,
.artikelliste div.gesamtpreis span {
  color: #333;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
}

.hauptartikelwarenkorb div.price span,
.artikelliste div.gesamtpreis span {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
}

  .hauptartikelwarenkorb div.price span.label,
  .artikelliste div.gesamtpreis span.label {
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    margin-right: 10px;
    min-width: 21%;
  }

  /* 17.07.2017 Preisinfo */
  .hauptartikelwarenkorb div.price span.preisinfo {
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    margin-right: 0 !important;
    min-width: 21%;
  }

div.hauptartikelbild {
  max-width: 100%;
  margin-bottom: 12px;
}

div.hauptartikeltext {
  width: 100%;
  margin-bottom: 20px;
}

div.hauptartikelwarenkorb {
  max-width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -moz-box-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -moz-box-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -ms-flex-justify-content: flex-end;
  justify-content: flex-end;
}

.hauptartikelwarenkorb div.price,
.hauptartikelwarenkorb div.stock,
.hauptartikelwarenkorb div.amount {
  width: 100%;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

.hauptartikelwarenkorb div.price,
.hauptartikelwarenkorb div.stock {
  margin-bottom: 10px;
}

.hauptartikelwarenkorb div.amount {
  width: auto;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

.hauptartikelwarenkorb .cartButton {
  margin-left: 12px;
  max-height: 36px;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

.cartButton {
  cursor: pointer;
  max-height: 36px;
}

.mainWrapper .inner > .paging {
  margin-top: 20px;
}

/* *************************** Artikeldetails *************************** */
.prodWrapper {
  margin-top: 20px;
}

.imgWrapper {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 2%;
}

.picWrapper {
  width: 100%;
  margin-bottom: 20px;
}

.imgMainWrapper {
  text-align: center; /* Align center inline elements */
  font: 0/0 a; /* Hide the characters like spaces */
  margin: 0 0 20px;
  height: 300px;
}

  .imgMainWrapper:before,
  .thumbWrapper a:before { /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
  }

.imgWrapper img,
.picWrapper img,
.imgWrapper .artMainImg {
  display: block;
  max-width: 100%;
  height: auto;
}

.picWrapper img {
  float: left;
  margin: 0 1% 1% 0;
  /*max-width: 35px;*/
}

.imgWrapper .artMainImg {
  clear: both;
  margin: 0 auto;
  vertical-align: middle;
  display: inline-block;
}

.thumbWrapper {
  width: 100%;
  text-align: center;
}

  .thumbWrapper a {
    display: inline-block;
    border: 1px solid #999999;
    width: 80px;
    height: 80px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
    font: 0/0 a; /* Hide the characters like spaces */
    text-align: center;
    padding: 0 1%;
  }

    .thumbWrapper a img {
      display: inline-block;
      width: auto;
      max-width: 100%;
      height: auto;
      vertical-align: middle;
    }

.infoWrapper {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 2%;
}

  .infoWrapper .prodDesc,
  .infoWrapper .variant,
  .infoWrapper .price,
  .infoWrapper .stock {
    margin-bottom: 20px;
  }

  .infoWrapper .price {
    clear: both;
  }

    .infoWrapper .price span {
      display: inline-block;
      font-size: 16px;
      width: 35%;
    }

    .infoWrapper .price .newPrice {
      font-size: 22px;
      font-weight: bold;
    }

    .infoWrapper .price .oldPrice {
      text-decoration: line-through;
    }

    .infoWrapper .price .newPrice,
    .infoWrapper .price .oldPrice {
      width: auto;
    }

/* 20.02.2019 für Detailseite */
div.detailsSparen {
  display: block;
  margin-top: 10px;
  color: red;
}

.stock img.bestand, #quickOrderBestand img.bestand {
  display: inline-block;
  margin-right: 10px;
}

.infoWrapper .amount {
  margin-right: 2%;
}

  .infoWrapper .amount select {
    min-width: 50px;
  }

div.cartWrapper .cartButton {
  cursor: pointer;
  max-height: 36px;
  float: left;
}

div.detailsWrapper {
  border-top: 1px solid #00a387;
  padding: 20px 2%;
  width: 100%;
  clear: both;
}

  div.detailsWrapper h5 {
    margin: 10px 0;
    font-size: 20px;
    color: #00A387;
  }

.longtxtWrapper,
.techData,
.manufacturerInfo {
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  max-height: 45px;
  overflow: hidden;
  -transition: max-height .6s ease-in-out 0s;
  -moz-transition: max-height .6s ease-in-out 0s;
  -webkit-transition: max-height .6s ease-in-out 0s;
  transition: max-height .6s ease-in-out 0s;
}

.manufacturerInfo {
  border: 0px;
}

  .longtxtWrapper.show,
  .techData.show,
  .manufacturerInfo.show {
    max-height: 5000px;
  }

  .manufacturerInfo.show {
    padding-bottom: 16px;
  }

.longtxtWrapper ul {
  padding-left: 20px;
  list-style: disc;
}

.techData p {
  margin-top: 0;
}

.manufacturerInfo p {
  margin: 0;
}

  .manufacturerInfo p a {
    color: #00A387;
  }

.tagWrapper,
.tagWrapper p,
.tagWrapper span {
  width: 100%;
  clear: both;
  padding: 20px 0 0;
  font-size: 11px;
}


/* *************************** Warenkorbseite *************************** */
div.weiter,
div.funktionsButton {
  background-color: #00a387;
  width: auto;
  float: right;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 0 !important;
}

div.funktionsButton {
  margin: 20px 6px 0;
  float: left;
}

div.cartWrapper div.funktionsButton {
  background-color: #fff;
  margin-left: 38px;
  /*float: right;*/
  margin-top: 0;
}

  div.cartWrapper div.funktionsButton.merklisteAktiv {
    background-color: #f1b40f;
  }

  div.cartWrapper div.funktionsButton:after,
  div.cartWrapper:after {
    content: '.';
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    clear: both;
    visibility: hidden;
    opacity: 0;
    font-size: 0;
    line-height: 0;
    display: block;
  }

  div.cartWrapper div.funktionsButton img.cartButton {
    display: block;
    width: 100%;
    max-width: 36px;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
  }

div.weiter.buttonRechts,
div.funktionsButton.buttonRechts {
  float: right;
}

div.weiter a,
div.funktionsButton a {
  color: #fff;
  text-align: center;
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 16px;
}

.artikelliste div.gesamtpreis {
  float: left;
  width: auto;
  padding: 0;
  margin-top: 10px;
  min-width: 18%;
}

.hinweis {
  float: left;
  clear: both;
  margin: 30px 0;
}

.kostenstelle {
  margin: 10px 0;
  height: 36px;
  width: auto;
}

  .kostenstelle > label {
    float: left;
    height: 26px;
    line-height: 26px;
  }

  .kostenstelle > span {
    width: 100%;
    display: inline-block;
    text-align: right;
  }

  .kostenstelle > .cartButton {
    float: right;
  }

  .kostenstelle > input[type="text"],
  .kostenstelle > select {
    width: auto;
    width: 60%;
    float: left;
  }

  .kostenstelle > span input[type="checkbox"] {
    background-color: #fff !important;
  }

/* *************************** Abschlussseite *************************** */
.neuerKunde,
.rechnungsadresse,
.lieferadresse,
.weitereInformationen,
.formularBlock {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.formularLinieUnten {
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e3e3;
}


.neuerKunde,
.rechnungsadresse {
  margin: 20px 0;
}

  .neuerKunde h2,
  .rechnungsadresse h2,
  .lieferadresse h2,
  .weitereInformationen h2,
  .formularBlock {
    font-size: 1.4em;
    font-weight: normal;
  }

    .neuerKunde > div,
    .rechnungsadresse > div,
    .lieferadresse > div,
    .weitereInformationen > div,
    .formularBlock > div {
      padding: 8px 0;
    }

      .formularBlock > div.newsletter {
        padding-top: 0;
        margin-top: -8px;
      }

    .neuerKunde label,
    .rechnungsadresse label,
    .lieferadresse label,
    .weitereInformationen label,
    .formularBlock label {
      color: #00a387;
      display: inline-block;
      font-size: 13px;
      height: auto;
      line-height: 1.3em;
      width: 100%;
      text-align: left;
      padding-right: 1%;
      float: left;
      padding-top: 0.7%;
    }

    .formularBlock div > label:last-child {
      width: auto;
      float: none;
      text-align: left;
    }

    .neuerKunde input[type="text"],
    .rechnungsadresse input[type="text"],
    .lieferadresse input[type="text"],
    .weitereInformationen input[type="text"],
    .formularBlock input[type="text"],
    .formularBlock select,
    .formularBlock textarea {
      width: 100%;
    }

    .formularBlock input[type="checkbox"] {
      display: inline-block;
      margin: 0 10px 0 0;
    }

    .formularBlock > div span {
      font-size: 13px;
      display: inline-block;
      min-width: 84%;
      /*padding-left: 24% !important;*/
    }

      .formularBlock > div span > label {
        padding-top: 2px;
      }

    .formularBlock.formularLinieUnten > div span {
      float: left;
      clear: both;
    }

      .formularBlock.formularLinieUnten > div:after,
      .formularBlock.formularLinieUnten > div span:after {
        content: '.';
        width: 100%;
        clear: both;
        height: 0px;
        line-height: 0px;
        font-size: 0px;
        margin: 0;
        padding: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
      }

.formularBlock {
  margin: 10px 0;
}

  .formularBlock p {
    margin-top: 0;
  }

  .formularBlock.newsletter {
    width: 100%;
    max-width: 100%;
    float: right;
    background-color: #e3e3e3;
    padding: 4px 12px;
  }

    .formularBlock.newsletter h4 {
      font-size: 16px;
      font-weight: bold;
      color: #00a387;
      margin-top: 0;
    }

    .formularBlock.newsletter p {
      font-size: 13px;
      margin-top: 0;
    }

    .formularBlock.newsletter a {
      color: #00a387;
    }

    .formularBlock.newsletter div > input {
      float: left;
      clear: both;
      /*margin: 10px 7px 0 5px;*/
      margin: 7px 7px 0 5px;
    }

  .formularBlock div > span > input {
    float: left;
    clear: both;
    margin: 2px 10px 0 2px;
  }

  .formularBlock.newsletter div > span {
    width: 100%;
  }

    .formularBlock.newsletter div > span > input {
      float: left;
      clear: both;
      margin: 5px 10px 0 5px;
    }

    .formularBlock.newsletter div > span > label,
    .formularBlock div > span > label {
      width: 90%;
    }


/* 19.12.2019 engere Formularblöcke */
.formularBlockEnger > div {
  padding: 2px 0 !important;
}

/* 20.11.2019 Anpassung für Validatoren bei RadioButtonList ***********************************************/
.rblSchmal {
  min-width: auto !important;
  width: 80px;
}

  .rblSchmal label {
    width: auto !important;
  }

div.newsletter:after {
  content: '.';
  width: 100%;
  clear: both;
  height: 0px;
  display: block;
  line-height: 0px;
  font-size: 0px;
  margin: 0;
  padding: 0;
  visibility: hidden;
  opacity: 0;
}

.formularBlock.newsletter div.zusatzhinweis {
  font-size: 14px;
  color: red;
}

div.fehler {
  clear: both;
}




/* 21.10.2016 Bestellungen / Sendungsverfolgung */
.bestellungenTab {
  float: left;
  margin: 0 20px 10px 0;
}


/* 31.03.2020 Hinweis für PSA-Produkte, 01.04.2020 Farbe nochmals geändert */
.psaHinweis {
  background-color: #E4E600;
  padding: 3px 10px;
  margin: 0 0 10px 0;
  font-size: 1.2em;
  font-weight: bold;
}


/* 08.05.2020 Button Neu für Sortimentsliste */
.buttonSeriell {
  background-color: #00a387;
  width: auto;
  height:26px;
  margin-top: 4px;
  padding: 4px 6px;
  color: white;
  font-size: 0.7em;
  text-decoration: none;
}



@media (min-width: 1024px) {
  .bestellungenTabAbstand {
    margin-right: 150px;
  }
}

.hauptartikeltext p {
  font-size: 14px;
  margin: 0;
}

  .hauptartikeltext p a {
    color: #00A387 !important;
    text-decoration: underline !important;
  }

.hauptartikelwarenkorb p {
  text-align: left;
}

.sendungsverfolgung {
  -moz-box-justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important;
  -ms-flex-justify-content: flex-start !important;
  justify-content: flex-start !important;
}


div.bestellungenSuchen input[type="text"] {
  width: 170px;
  height: 20px;
  border: 1px solid #00a387;
  background-color: #fff;
  color: #000;
  font-size: 11pt;
  vertical-align: top;
}

div.bestellungenSuchen input[type="submit"] {
  width: 22px;
  height: 20px;
  background-image: url('../images/icons/icon_lupe_klein.jpg');
  background-repeat: no-repeat;
  text-indent: 99999px;
  border: 0;
  cursor: pointer;
  border-radius: 0px;
  vertical-align: top;
}


  div.bestellungenSuchen input[type="submit"].reset {
    background-image: url('../images/icons/icon_reset_klein.jpg');
  }




/* *************************** Contentbereich *************************** */
.contentWrapper {
  background-color: #fff;
  margin: 0; /*16.01.2017 geändert, vorher: margin: 0 0 20px;*/
  padding: 0; /*16.01.2017 geändert, vorher: padding: 1% 0;*/
}

  .contentWrapper img {
    max-width: 100%;
  }


  .contentWrapper ul {
    list-style: disc;
    list-style-position: outside;
    margin: 0 0 0 18px;
    padding: 0;
  }

    .contentWrapper ul li {
      padding-bottom: 5px;
    }

      .contentWrapper ul li ul {
        list-style: disc;
        list-style-position: outside;
        margin: 5px 0 0 15px;
        padding: 0;
      }

        .contentWrapper ul li ul li {
          padding-bottom: 5px;
        }

  .contentWrapper a {
    color: #00a387;
    text-decoration: none;
  }




/* *************************** INHALTSSEITEN ************************* */
div.contentWrapper {
  display: block;
  width: 100%;
  height: auto;
}

.itemBlock {
  display: block;
  height: auto;
  padding: 0 0 20px;
  border-bottom: 1px solid #00a387;
  margin-bottom: 20px;
  position: relative;
  min-height: 100px;
}

.halfBlockWrapper {
  border-bottom: 1px solid #00a387;
  margin-bottom: 20px;
}

.halfBlock {
  width: 100%;
  float: none;
  border-bottom: 0;
  margin-bottom: 0;
}


.fullBlockTeaser .halfBlock {
  padding-right: 6%;
}

.highlightBlock .txtContent {
  background-color: #00a387;
  padding: 16px 10px;
  height: 100%;
  margin-bottom: 12px;
}

.fullBlock {
  width: 100%;
  float: none;
  clear: both;
}

.itemBlock h2 {
  margin: 0 0 20px;
  display: block;
  width: auto;
}

.highlightBlock h2 {
  color: #fff;
}

.subpage p {
  margin: 30px 0;
}

.highlighted {
  color: #00A387;
}

.subpage p:after,
.subpage .contImg:after {
  clear: both;
  content: ".";
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  opacity: 0;
}

.itemBlock p {
  width: 100%;
  margin-bottom: 12px;
}

.halfBlock p {
  padding: 0 8% 0 0;
  margin-top: 5px; /* 26.04.2016 für Benutzer-Profil rechte Seite hinzugefügt */
}

.itemBlock ul {
  padding-left: 20px !important;
  list-style: disc !important; /* 20.10.2017 geändert */
}

.halfBlock ul {
  margin: 16px 0;
}

.itemBlock a,
.subpage a {
  color: #00A387;
  text-decoration: underline;
}

.itemBlock p,
.itemBlock a,
.subpage p,
.subpage a {
  font-size: 1em;
}

.highlightBlock p {
  color: #fff;
  margin-bottom: 12px;
}

.imgBlock .blockImg,
.contImg {
  width: 100%;
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.contImg {
  display: block;
  width: auto;
  max-width: 100%;
}

.pictureBlock {
  width: 100%;
  height: auto;
  border: 0;
}

  .pictureBlock > div.picItem {
    float: left;
  }

    .pictureBlock > div.picItem a,
    .pictureBlock > div.picItem p {
      display: block;
      width: 100%;
      height: auto;
      text-align: center;
      margin: 0;
    }

    .pictureBlock > div.picItem img {
      display: block;
      width: auto;
      max-width: 98%;
      height: auto;
      margin: 0 auto;
    }

  .pictureBlock > div:first-child:nth-last-child(1) {
    width: 100%;
  }

  .pictureBlock > div:first-child:nth-last-child(2),
  .pictureBlock > div:first-child:nth-last-child(2) ~ div {
    width: 100%;
  }

  .pictureBlock > div:first-child:nth-last-child(3),
  .pictureBlock > div:first-child:nth-last-child(3) ~ div {
    width: 100%;
  }

  .pictureBlock > div:first-child:nth-last-child(4),
  .pictureBlock > div:first-child:nth-last-child(4) ~ div {
    width: 100%;
  }

  .pictureBlock > div:last-child:after,
  .pictureBlock:after {
    display: block;
    content: ' ';
    width: 100%;
    height: 0px;
    margin: 0;
    padding: 0;
    clear: both;
  }



/* 06.04.2018 für ELA-Container mit mehreren Reihen an Bildern */
.bildreihen {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

  .bildreihen img {
    margin-bottom: 5px !important;
  }




/* *************************** Marken-Slider *************************** */
section.brandWrapper {
  width: 100%;
  display: none;
}

.brandWrapper > a {
  color: #00a387;
  text-decoration: underline;
  font-size: 12px;
}

#carousel {
  padding: 0 23.2%;
  margin: 0 auto 20px;
}

  #carousel .slides li {
    border: 1px solid #e3e3e3;
    /*padding: 8px;*/
    height: 114px;
    max-height: 114px;
    text-align: center; /* Align center inline elements */
    font: 0/0 a; /* Hide the characters like spaces */
  }

    #carousel .slides li:before,
    #carousel .slides li a:before { /* create a full-height inline block pseudo=element */
      content: ' ';
      display: inline-block;
      vertical-align: middle; /* vertical alignment of the inline element */
      height: 100%;
    }

  #carousel .slides img {
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
  }


/* ************************* Alle Marken ****************************** */
div.alleMarken ul {
  width: 100%;
  height: auto;
  padding: 0;
  margin-top: 20px;
}

  div.alleMarken ul:after {
    display: block;
    content: '.';
    width: 100%;
    height: 0;
    clear: both;
    margin: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
  }

  div.alleMarken ul li {
    width: 136px;
    border: 1px solid #e3e3e3;
    height: 114px;
    max-height: 114px;
    padding: 0;
    margin: 0 auto 2%;
    font: 0px/0 a;
    text-align: center;
  }

    div.alleMarken ul li:before,
    div.alleMarken ul li a:before {
      content: ' ';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }

    div.alleMarken ul li a {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0 !important;
      margin: 0 !important;
    }

    div.alleMarken ul li img {
      display: inline-block;
      height: auto;
      margin: 0 auto;
      max-height: 80%;
      max-width: 80%;
      vertical-align: middle;
      width: auto;
    }


/* *************************** Benutzerprofil *************************** */
div.profilBild {
  float: left;
  margin: 0 20px 10px 0;
  /*border: 1px solid red;*/
}

  div.profilBild img {
    border: 1px solid #00A387;
  }

div.profilText {
}

  div.profilText p {
  }



/* *************************** Footer *************************** */
div.fuss {
  margin: 20px 0 0 0;
  background-color: #00A387;
  padding: 10px 0;
  width: 100%;
  clear: both;
}

  div.fuss .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
  }

  div.fuss ul {
    padding: 0;
    margin: 0;
  }

  div.fuss .inner > ul > li {
    margin-bottom: 10px;
  }

  div.fuss ul li, div.fuss ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
  }

  div.fuss h4 {
    color: #fff;
  }

div.copy {
  clear: both;
  float: right;
  text-align: right;
}

  div.copy p, div.copy a {
    color: #fff;
    font-size: 14px;
  }

div.warten {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(188, 191, 196, 0.6);
  /*-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px); 
	-ms-filter: blur(5px); 
	filter: blur(5px);*/
  z-index: 999999 !important;
}

  div.warten #wartenText,
  div.warten #gesperrtText {
    position: absolute;
    padding: 16px;
    background-color: #f1b40f;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    width: 320px;
    max-width: 100%;
    left: 50%;
    margin-left: -160px;
    top: 40%;
    opacity: 1;
    visibility: visible !important;
    z-index: 99999999 !important;
    text-align: center;
  }

  div.warten #gesperrtText {
    top: 60%;
  }

/************************************************* DATEPICKER JQUERYUI STUFF **********************/
.ui-datepicker-trigger {
  display: inline-block;
  margin: 0 0 0 6px;
}

.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0px;
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

  .ui-helper-hidden-accessible > div:hover {
    color: #00a387;
  }

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0; /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

.ui-state-disabled {
  cursor: default !important;
}

.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker.ui-widget-content {
  border: 1px solid #ddd;
  background: #eee url(../js/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
  color: #333;
}

  .ui-datepicker.ui-widget-content a {
    color: #333;
  }

.ui-datepicker .ui-widget-header {
  border: 1px solid #00a387;
  background: #00a387;
  color: #fff;
  font-weight: bold;
}

  .ui-datepicker.ui-widget-header a {
    color: #fff;
  }

.ui-datepicker .ui-state-default {
  border: 1px solid #ccc;
  background: #f6f6f6 url(../js/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
  font-weight: bold;
  color: #1c94c4;
}

  .ui-datepicker .ui-state-default a, .ui-datepicker .ui-state-default a:link, .ui-datepicker .ui-state-default a:visited {
    color: #1c94c4;
    text-decoration: none;
  }

.ui-datepicker .ui-state-hover, .ui-datepicker .ui-state-focus {
  border: 1px solid #f1b40f;
  background: rgba(241, 180, 15, 0.7);
  font-weight: bold;
  color: #c77405;
}

  .ui-datepicker .ui-state-hover a, .ui-datepicker .ui-state-hover a:hover, .ui-datepicker .ui-state-hover a:link, .ui-datepicker .ui-state-hover a:visited {
    color: #c77405;
    text-decoration: none;
  }

.ui-datepicker .ui-state-active {
  border: 1px solid #00a387;
  background: #fff url(../js/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
  font-weight: bold;
  color: #eb8f00;
}

  .ui-datepicker .ui-state-active a {
    color: #eb8f00;
    text-decoration: none;
  }

.ui-datepicker .ui-state-highlight {
  border: 1px solid #00a387;
  background: rgba(0, 163, 135, 0.7);
  color: #fff !important;
}

  .ui-datepicker .ui-state-highlight a {
    color: #fff !important;
  }

.ui-datepicker .ui-state-error {
  border: 1px solid #cd0a0a;
  background: #b81900 url(../js/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
  color: #fff;
}

  .ui-datepicker .ui-state-error a {
    color: #fff;
  }

.ui-datepicker .ui-state-error-text {
  color: #fff;
}

.ui-datepicker .ui-priority-primary {
  font-weight: bold;
}

.ui-datepicker .ui-priority-secondary {
  opacity: .7;
  filter: Alpha(Opacity=70);
  font-weight: normal;
}

.ui-datepicker .ui-state-disabled {
  opacity: .35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

  .ui-datepicker .ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35);
  }

.ui-datepicker .ui-icon {
  width: 16px;
  height: 16px;
  background-position: 16px 16px;
}

.ui-datepicker .ui-icon {
  background-image: url(../js/images/ui-icons_222222_256x240.png);
}

.ui-datepicker-header .ui-icon {
  background-image: url(../js/images/ui-icons_ffffff_256x240.png);
}

.ui-datepicker .ui-state-default .ui-icon {
  background-image: url(../js/images/ui-icons_ef8c08_256x240.png);
}

.ui-datepicker .ui-state-hover .ui-icon, .ui-datepicker .ui-state-focus .ui-icon {
  background-image: url(../js/images/ui-icons_ffd27a_256x240.png);
}

.ui-datepicker .ui-state-active .ui-icon {
  background-image: url(../js/images/ui-icons_ef8c08_256x240.png);
}

.ui-datepicker .ui-state-highlight .ui-icon {
  background-image: url(../js/images/ui-icons_228ef1_256x240.png);
}

.ui-datepicker .ui-state-error .ui-icon, .ui-datepicker .ui-state-error-text .ui-icon {
  background-image: url(../js/images/ui-icons_ffd27a_256x240.png);
}

.ui-datepicker .ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-datepicker .ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-datepicker .ui-widget-overlay {
  background: #666 url(../js/images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
  opacity: .5;
  filter: Alpha(Opacity=50);
}

.ui-datepicker .ui-widget-shadow {
  margin: -5px 0 0 -5px;
  padding: 5px;
  background: #000 url(../js/images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
  opacity: .2;
  filter: Alpha(Opacity=20);
  border-radius: 5px;
}

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
}

  .ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
  }

  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
  }
  /*.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}*/
  .ui-datepicker .ui-datepicker-prev {
    left: 2px;
  }

  .ui-datepicker .ui-datepicker-next {
    right: 2px;
  }
    /*.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}*/
    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -8px;
      top: 50%;
      margin-top: -6px;
    }

  .ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
  }

    .ui-datepicker .ui-datepicker-title select {
      font-size: 1em;
      margin: 1px 0;
    }

  .ui-datepicker select.ui-datepicker-month,
  .ui-datepicker select.ui-datepicker-year {
    width: 45%;
  }

  .ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
  }

  .ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
  }

  .ui-datepicker td {
    border: 0;
    padding: 1px;
  }

    .ui-datepicker td span,
    .ui-datepicker td a {
      display: block;
      padding: .2em;
      text-align: right;
      text-decoration: none;
    }

  .ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

    .ui-datepicker .ui-datepicker-buttonpane button {
      float: right;
      margin: .5em .2em .4em;
      cursor: pointer;
      padding: .2em .6em .3em .6em;
      width: auto;
      overflow: visible;
    }

      .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
        float: left;
      }

  /* with multiple calendars */
  .ui-datepicker.ui-datepicker-multi {
    width: auto;
  }

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

  .ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
  }

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}


/*************** 20.04.2016 Bestellabschlusseite zunächst mit geschlossener Lieferadresse ***************************************/
.hideBlock {
  position: relative;
  max-height: 70px;
  overflow: hidden;
  -transition: max-height .9s ease-in-out .1s;
  -moz-transition: max-height .9s ease-in-out .1s;
  -webkit-transition: max-height .9s ease-in-out .1s;
  transition: max-height .9s ease-in-out .1s;
}

  .hideBlock.show {
    max-height: 500px; /*vorher 5000px*/
  }

  .hideBlock h2 {
    background-image: url("../images/icons/pfeil.png");
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .hideBlock.show h2 {
    background-image: url("../images/icons/pfeil_up.png");
  }

  /* 17.10.2016 neu um das Tabulator-Problem zu beheben */
  .hideBlock input {
    visibility: hidden;
  }

  .hideBlock.show input {
    visibility: visible;
  }




.plusArtikel {
  display: none;
}






/********************************************** Piktogrammtabelle 09.02.2017 *****************************************************************/
table.piktogramme td {
  background-color: #fff !important;
  font-size: 15px !important;
}

table.piktogramme td, table.piktogramme th {
  text-align: left;
}

table.piktogramme tr td:first-child {
  padding: 5px 10px 5px 0;
  width: 60px;
}



/********************************************** Tabelle mit farbigen Zellen 13.02.2017 *****************************************************************/
.colorTbl {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

  .colorTbl tr th,
  .colorTbl tr td,
  .colorTbl thead tr td {
    padding: 5px 8px 5px 8px !important;
    background-color: #fff !important;
    color: #000 !important;
  }

  .colorTbl .colorTblYellow,
  .colorTbl .colorTblGreen,
  .colorTbl .colorTblRed {
    border-right: 1px solid #000 !important;
  }

  .colorTbl .colorTblYellow {
    background-color: #FFEC00 !important;
  }

  .colorTbl .colorTblGreen {
    background-color: #00A286 !important;
  }

  .colorTbl .colorTblRed {
    background-color: #E00A1E !important;
  }

  .colorTbl .colorTblBrown {
    background-color: #A06100 !important;
  }

  .colorTbl .colorTblGray {
    background-color: #A4A5A5 !important;
  }

  .colorTbl .bolded {
    font-weight: bold !important;
  }

  .colorTbl .aligned {
    vertical-align: middle !important;
  }

  .colorTbl tr th,
  .colorTbl thead tr td {
    font-weight: bold !important;
    text-align: left !important;
    border: 0 !important;
    font-size: 15px !important;
  }

  .colorTbl tbody tr td {
    border: 1px solid #000 !important;
    border-right: 0 !important;
    font-size: 15px !important;
  }

    .colorTbl tbody tr td:first-child {
      border-left: 0 !important;
      border-right: 1px solid #000 !important;
    }

  .colorTbl thead tr td {
    border: 0 !important;
  }

/* 23.02.2017 für links und rechts geschlossene Tabellen */
.kontur tbody tr td:first-child {
  border-left: 1px solid #000 !important;
}

.kontur tbody tr td {
  border-right: 1px solid #000 !important;
}



/********************************************** Einfache Tabelle 28.02.2017 *****************************************************************/

.simpleTbl {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: auto !important;
}

  .simpleTbl tbody tr td,
  .simpleTbl tr th,
  .simpleTbl tr td,
  .simpleTbl thead tr td {
    padding: 5px 8px 5px 8px !important;
    background-color: #fff !important;
    color: #000 !important;
    font-size: 15px !important;
    border: 1px solid #000 !important;
  }

  .simpleTbl tbody tr th,
  .simpleTbl tr th {
    font-weight: bold !important;
    border: none !important;
  }




/********************************************** 02.05.2017 Drop-Down-Menü für Profil-Link **********************************************/
span#accountDesktop > a {
  padding-right: 10px;
}

span#accountDesktop:hover .menuProfil,
li#wishlist:hover .menuProfil {
  display: block;
}

ul.menuProfil {
  display: none;
  position: absolute;
  z-index: 10000;
  background-color: #bcbfc4; /*#e3e3e3;*/
  border-left: 1px solid #bcbfc4;
  border-right: 1px solid #bcbfc4;
  margin: 0;
  padding: 0;
  min-width: 200px;
}

  ul.menuProfil li {
    margin: 0;
    padding: 0;
    margin-right: -12px;
    float: none !important;
    text-align: left !important;
    max-width: 100%;
  }

    ul.menuProfil li a {
      color: black;
      font-weight: normal;
      display: block;
      width: 100%;
      padding: 5px 5px 5px 5px;
      margin-left: -12px;
      border-left: 10px solid transparent;
    }

#wishlist ul.menuProfil li a {
  margin-left: -12px;
  padding: 5px !important;
}

ul.menuProfil li a:hover {
  color: #00A387;
  background-color: #CED0D4;
  border-left: 10px solid #00a387;
  border-right: 10px solid transparent;
  width: auto !important;
}

/* 22.10.2019 Trennlinie nach diesem Listenelement*/
ul.menuProfil li.linieUnten {
  border-bottom: 1px solid #666666;
}




/* 18.07.2017 Newsletter abonnieren */
table.newsletter {
  width: auto !important;
}

  table.newsletter tbody tr td {
    background-color: transparent !important;
    padding: 0 20px 10px 0 !important;
  }





/********************************************** 22.12.2017 Drop-Down-Menü für Warenkorb **********************************************/
li#warenkorb:hover ul#menuWarenkoerbe {
  display: block;
}


/* 11.01.2018 für Warenkörbe-Seite */
.formularBlock p.ddlHinweis {
}


.kostenstelle {
  max-width: 100%;
}



/* 30.04.2020 ADM-Aktivitäten mit Tab-Leiste */
div.tabs {
}

.tabButton, .tabButtonAktiv {
  float: left;
  background-color: #AAAAAA;
  color: #fff;
  font-size: 20px;
  width: auto;
  height: 34px;
  margin: 10px 0 20px 0;
  padding: 6px 12px;
  text-align: center;
  display: block;
  text-decoration: none;
  border-right: 1px white solid;
}

.tabButtonAktiv {
  background-color: #00A387;
}



/******************************************************************************************************************************/
/************************************************  M E D I A   Q U E R I E S  **********************************************/
/******************************************************************************************************************************/
/**************************************************** ab 480 Pixel Breite ****************************************************/
@media (min-width: 480px) {
  .top-margin {
    padding-top: 304px;
  }

  body.formular .top-margin {
    padding-top: 0px;
  }

  #carousel {
    padding: 0 12.9%;
  }

    #carousel .slides img {
      /*width: 162px;*/
      height: auto;
    }

  div.alleMarken ul li {
    width: 49%;
    float: left;
    margin-right: 2%;
  }

    div.alleMarken ul li:nth-child(2n+2) {
      margin-right: 0;
    }

  .kostenstelle {
    max-width: 100%;
  }

  .hideBlock {
    max-height: 51px;
  }

  div.webtyp {
    top: 5px;
  }
}
/**************************************************** ab 600 Pixel Breite ****************************************************/
@media (min-width: 600px) {

  /*body.formular .fixed-header,
body.formular .fixed-header.menOp {
	position: fixed;
  height: 175px;
  z-index: 9999999;
  width: 100%;
}*/

  .top-margin,
  body.formular .top-margin {
    padding-top: 304px;
  }

  div.logo img {
    width: 100%;
  }

  div.contactInfo {
    display: block;
    position: absolute;
    left: 240px;
    top: 56px;
    width: auto;
  }

  .flex-caption {
    display: block;
    z-index: 95;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 30px solid #00A387;
    padding: 20px 0;
  }

    .flex-caption h3 {
      font-size: 28px;
      line-height: 32px;
      margin: 0 0 20px;
      color: #000;
      padding: 0 20px;
      text-decoration: none;
    }

    .flex-caption p {
      font-size: 16px;
      line-height: 20px;
      margin: 0;
      color: #000;
      padding: 0 20px;
      text-decoration: none;
    }

  #flexslider .flex-direction-nav a {
    top: 32%;
  }

  .kategorienWrapper {
    max-height: 466px;
    padding-bottom: 34px;
  }

  .kategorie {
    width: 49%;
    float: left;
    margin: 0 2% 3% 0;
  }

  .kategorienWrapper > div:nth-child(2n+2) {
    margin-right: 0;
  }

  .showArrow {
    margin: 0 !important;
  }

  #carousel {
    padding: 0 20.47%;
  }

  .pictureBlock > div:first-child:nth-last-child(1) {
    width: 100%;
  }

  .pictureBlock > div:first-child:nth-last-child(2),
  .pictureBlock > div:first-child:nth-last-child(2) ~ div {
    width: 50%;
  }

  .pictureBlock > div:first-child:nth-last-child(3),
  .pictureBlock > div:first-child:nth-last-child(3) ~ div {
    width: 33.3333%;
  }

  .pictureBlock > div:first-child:nth-last-child(4),
  .pictureBlock > div:first-child:nth-last-child(4) ~ div {
    width: 50%;
  }

  .variant select,
  .amount select,
  .kostenstelle select {
    max-width: 100%;
  }
}
/**************************************************** ab 768 Pixel Breite ****************************************************/
/*** Tablet Portrait Breakpoint ***/
@media (min-width: 768px) {
  header {
    top: 0px;
    width: 100%;
    /*height: 173px;*/
    z-index: 999;
  }

  .top-margin,
  body.formular .top-margin {
    padding-top: 304px;
  }

  .mainWrapper {
    /*margin-top: 285px;*/
  }

  .kategorienWrapper {
    max-height: 480px;
  }

    .kategorienWrapper:after {
      content: '.';
      display: block;
      width: 100%;
      height: 0;
      opacity: 0;
      visibility: hidden;
      margin: 0;
      padding: 0;
      clear: both;
    }

  .showArrow {
    margin: 0 !important;
    background-position: center 24px;
  }

  .prodNavWrapper,
  .prodSelectWrapper {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .siteCount, .prodTyp {
    float: right;
    width: auto;
  }

  .prodFilter {
    float: left;
    width: auto;
  }

  .prodSort {
    float: right;
  }

  .prodFilter, .prodTyp, .prodSort {
    margin-right: 1%;
  }

    .siteCount label,
    .prodSort label,
    .prodFilter label,
    .siteCount select,
    .prodSort select,
    .prodFilter select {
      width: auto;
    }

  .prodNavWrapper .paging {
    width: auto;
    min-width: 39%;
    float: left;
  }

  div.hauptartikelbild {
    max-width: 35%;
    padding-right: 2%;
  }

  div.hauptartikeltext {
    width: 65%;
    margin-bottom: 20px;
  }

  div.hauptartikelwarenkorb {
    max-width: 65%;
    float: right;
  }

  .hauptartikeltext .variant {
    max-width: 80%;
  }

  .hauptartikelwarenkorb div.price,
  .hauptartikelwarenkorb div.stock,
  .hauptartikelwarenkorb div.amount {
    float: left;
    width: 50%;
  }

  .hauptartikelwarenkorb div.amount {
    width: auto;
    float: left;
  }

  .hauptartikelwarenkorb div.price,
  .hauptartikelwarenkorb div.stock {
    height: 37px;
    line-height: 37px;
  }

  #carousel {
    padding: 0 14.97%;
  }

  div.alleMarken ul li {
    width: 32%;
  }

    div.alleMarken ul li:nth-child(2n+2) {
      margin-right: 2%;
    }

    div.alleMarken ul li:nth-child(3n+3) {
      margin-right: 0;
    }
}
/**************************************************** ab 980 Pixel Breite ****************************************************/
@media (min-width: 980px) {
  .flex-caption {
    position: absolute;
    top: 10px;
    bottom: 40px;
    right: 10.6%;
    max-width: 300px;
    height: 90%;
    padding: 60px 0 60px;
    border-bottom: 10px solid transparent;
  }


    .flex-caption:after {
      position: absolute;
      bottom: -50px;
      max-width: 300px;
      margin: 0;
      width: 100%;
      height: 30px;
      content: ".";
      color: #00A387;
      background-color: #00A387;
    }

    .flex-caption h3 {
      margin: 0 0 50px;
    }

  .flex-control-nav {
    display: block;
  }

  #flexslider .flex-direction-nav a {
    top: 50%;
  }

  .kategorienWrapper {
    max-height: 232px;
    padding-bottom: 5%;
  }

  .kategorie {
    width: 23.5%;
    margin: 0 2% 2% 0;
    height: auto;
    min-height: 151px;
  }

  .kategorienWrapper > div:nth-child(2n+2) {
    margin: 0 2% 2% 0;
  }

  .kategorienWrapper > div:nth-child(4n+4) {
    margin-right: 0;
  }

  .showArrow {
    /*padding: 1% 0 28px;*/
    background-position: center 27px;
  }

  #carousel {
    padding: 0 129px;
  }

  .prodSort {
    clear: both;
  }

  /* *************************** INHALTSSEITEN ************************* */
  .subpage h2 {
    clear: both;
  }

  .halfBlock {
    width: 50%;
    float: left;
  }

  .highlightBlock .txtContent {
    width: 48%;
  }

  .imgBlock .blockImg,
  .contImg {
    width: 50%;
    margin-bottom: 0;
  }

  .txtContent p,
  .fullBlock p,
  .imgBlock p {
    max-width: 100%;
    margin-top: 0px;
    margin-bottom: 12px;
  }

  .contImg {
    width: auto;
    margin-bottom: 12px;
  }

  .rightFlt {
    float: right;
  }

  .leftFlt {
    float: left;
  }

  .blockImg.rightFlt {
    margin-left: 0;
    max-width: 50%;
  }

  p .blockImg.rightFlt {
    margin-left: 4%;
  }

  .contImg.rightFlt {
    margin-left: 4%;
    max-width: 48%;
  }

  .blockImg.leftFlt {
    margin-right: 0;
    max-width: 50%;
  }

  p .blockImg.leftFlt {
    margin-right: 4%;
  }

  .contImg.leftFlt {
    margin-right: 4%;
    max-width: 48%;
  }

  .halfTxt p {
    max-width: 50%;
    padding-right: 4%;
    margin-top: 0px;
    margin-bottom: 12px;
  }

  .kostenstelle {
    max-width: 60%;
  }
}



/**************************************************** ab 1024 Pixel Breite ****************************************************/
/*** Tablet Landscape/Small Laptop Breakpoint ***/
/* 10.08.2016 von 1025 auf 1024 geändert */
@media (min-width: 1024px) {
  header,
  body.formular header,
  .fixed-header.menOp,
  .menOp.fixed-header {
    position: fixed;
    height: 205px; /*168px; vorher 205px; ???*/
  }

  /*29.05.2017 für Anker-Sprünge, 20px mehr als Header-Höhe*/
  .anchor {
    display: block;
    height: 225px; /*same height as header*/
    margin-top: -225px; /*same height as header*/
    visibility: hidden;
  }

  header .inner {
    position: static;
  }

  .fixed-header div.logo,
  .fixed-header div.accountInfo,
  .fixed-header div.contactInfo {
    display: block;
  }

  .mainWrapper {
    margin-top: 205px;
  }

  .top-margin,
  body.formular .top-margin {
    padding-top: 0;
  }

  div.logo {
    position: absolute;
    z-index: 99;
    top: 0;
    width: auto;
  }

  .topmenue {
    float: right;
    max-width: 50%;
    margin-top: 98px;
    max-height: 26px;
  }


  div.contactInfo,
  div.search {
    width: 50%;
    margin: 0;
    float: left;
  }

  div.contactInfo {
    position: relative;
    top: 0;
    left: 0;
  }

  .sliderWrapper {
    display: block;
  }

  .flex-caption {
    right: 10%;
  }

  .kategorienWrapper {
    max-height: 249px;
  }

  .kategorie {
    margin-bottom: 2%;
    min-height: 158px;
  }


    .kategorie .kategorieName {
      -transition: all .65s ease 0s;
      -moz-transition: all .65s ease 0s;
      -webkit-transition: all .65s ease 0s;
      transition: all .65s ease 0s;
    }

    .kategorie.main:hover .kategorieName {
      color: #00A387;
    }

    .kategorie.sub .kategorieBild img {
      transition: all 0.6s ease 0s;
    }

    .kategorie.sub:hover .kategorieBild img {
      -ms-transform: scale(1.15);
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
    }


  .messageWrapper {
    width: auto;
    position: absolute;
    right: 80px;
    top: 100px;
  }

  div.hauptartikel {
    padding: 20px 0;
  }

  div.artikelliste.liste div.hauptartikelbild {
    padding-right: 20px;
  }

  div.hauptartikeltext {
    width: 52%;
    margin: 0;
    padding-right: 1.5%;
  }

  div.hauptartikelwarenkorb,
  div.hauptartikelbild {
    max-width: 25%;
  }

  div.hauptartikelwarenkorb {
    float: left;
    max-width: 23%;
    text-align: right;
  }

  .hauptartikelwarenkorb div.price,
  .hauptartikelwarenkorb div.stock {
    float: none;
    width: 100%;
    margin-bottom: 6px;
  }

    .hauptartikelwarenkorb div.price span,
    .hauptartikelwarenkorb div.stock span,
    .artikelliste > div.price span {
      line-height: 1;
    }

      .hauptartikelwarenkorb div.price span:first-child,
      .hauptartikelwarenkorb div.stock span:first-child,
      .artikelliste > div.price span:first-child {
        width: auto;
        text-align: right;
        margin-right: 4%;
      }

      .hauptartikelwarenkorb div.stock span:first-child {
        margin-right: 0;
      }

  .hauptartikelwarenkorb div.amount {
    width: auto;
  }

  .hauptartikelwarenkorb div.stock,
  .hauptartikelwarenkorb div.price {
    text-align: right;
  }


  .imgWrapper {
    width: 60%;
    float: left;
    margin-bottom: 20px;
    padding: 0 2% 0 0;
  }

  .picWrapper img {
    margin: 0 0 1% 1%;
  }

  .infoWrapper {
    width: 40%;
    float: left;
    padding: 0;
  }

    .infoWrapper .price span {
      width: 25%;
    }

    .infoWrapper .price .newPrice,
    .infoWrapper .price .oldPrice,
    .infoWrapper .price #preisSparen {
      width: auto;
    }

  div.detailsWrapper {
    padding: 20px 0;
  }

    div.detailsWrapper h5 {
      margin: 0 0 10px;
    }

  .longtxtWrapper,
  .techData,
  .manufacturerInfo {
    width: 20%;
    float: left;
    border: 0;
    max-height: 5000px;
    padding: 0 2% 0 0;
  }

  .techData {
    width: 25%;
  }

  .longtxtWrapper {
    width: 55%;
  }

  section.brandWrapper {
    display: block;
  }

  #carousel {
    padding: 0 125px;
  }

  /************************************** NEU *******************************/

  div.topmenueWrapper {
    position: relative;
  }

  div.webtyp {
    left: 217px;
    top: 5px;
  }

  div.accountInfo {
    position: relative;
    float: right;
    padding: 6px 10px;
    top: 0px;
    max-height: 14px;
  }

    div.accountInfo span#accountDesktop {
      display: block;
    }

    div.accountInfo span#logoutMobile {
      display: none;
    }

  .topmenue {
    margin-top: 0;
    max-width: 40%;
    padding-left: 40px;
    padding: 0;
  }

    .topmenue li {
      width: auto;
      text-align: center;
      display: block;
    }

      .topmenue li a,
      .topmenue li#wishlist a,
      .topmenue li#cartTop a,
      .topmenue li#telTop a,
      .topmenue li#faqTop a,
      .topmenue li#showLogin span,
      .topmenue li#showLogin a,
      .topmenue li#logoutDesktop a,
      .topmenue li#showQuickOrder span,
      .topmenue li#showLanguage span {
        padding: 6px 10px;
        text-indent: 0px;
        background-image: none;
        height: auto;
        background-color: transparent;
        min-height: 1px;
      }

    .topmenue > li#wishlist a {
      padding: 6px 10px 0 10px;
    }

    .topmenue li,
    .topmenue li#telTop,
    .topmenue li#cartTop,
    .topmenue li#faqTop,
    .topmenue li#wishlist,
    .topmenue li#showLogin,
    .topmenue li#logoutDesktop,
    .topmenue li#showQuickOrder,
    .topmenue li#showLanguage {
      border: 0;
      width: auto;
    }

      .topmenue li#faqTop,
      .topmenue li#showLogin,
      .topmenue li#logoutDesktop {
        display: inline;
      }

      .topmenue li#cartTop,
      .topmenue li#telTop,
      .topmenue li#profilMobile {
        display: none;
      }

  div.anmelden,
  div.quickorder,
  div.sprache {
    position: absolute;
    top: 10px;
    right: 0;
    padding: 8px 16px;
    border-top: 26px solid #00A387;
    width: 100%;
    max-width: 460px;
    z-index: 9999;
    height: auto;
    margin-right: -24px;
    opacity: 1;
  }

  div.quickorder {
    right: 128px;
  }

  div.anmelden {
    right: 158px;
  }

  div.sprache {
    right: 0;
    max-width: 230px !important;
  }

    div.anmelden.show,
    div.quickorder.show,
    div.sprache.show {
      max-height: 500px;
      max-width: 460px;
      top: 25px;
      margin-right: 0;
      border-top: 26px solid #00A387;
    }

    div.anmelden > div,
    div.quickorder > div,
    div.sprache > div {
      position: relative;
    }

    div.anmelden legend,
    div.quickorder legend,
    div.sprache span {
      padding: 0;
      margin: 0;
      background-color: transparent;
      width: auto;
      position: absolute;
      /*top: -23px;
      left: 16px;*/
      top: -31px;
      left: 0px;
    }

    div.anmelden a.closeWindow,
    div.quickorder a.closeWindow,
    div.sprache a.closeWindow {
      /*top: -23px;
      right: 16px;*/
      top: -31px;
      right: 0px;
    }

  ul.anmelden,
  ul.quickorder {
    padding: 0;
    width: 100%;
  }

    ul.quickorder li input {
      width: 54%;
    }

  div.sprache a {
    padding: 4px 0;
  }

    div.sprache a.closeWindow {
      padding: 0;
    }

  div.utilWrapper {
    max-height: 86px;
  }

  div.search {
    float: right;
    /*width: 52%;*/
    /*width: 44%;*/
    /*Anpassung 16.10.2017*/
    width: 38%;
    margin-top: 10px;
  }

  div.contactInfo {
    float: left;
    width: auto;
    /*margin: 0 60px 0 200px;*/
    margin: 0 20px 0 200px;
  }

  div.hauptmenue {
    display: block;
    margin-top: -40px;
    width: 100%;
    background-color: #e3e3e3;
    position: relative;
    max-height: 56px;
    z-index: 88;
    clear: both;
  }

    div.hauptmenue .inner {
      width: 100%;
      margin: 0 auto;
      max-width: 1200px;
      max-height: 56px;
      position: relative;
    }

  .hauptmenue a,
  .hauptmenue span {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    text-decoration: none;
    color: #979696;
  }

  .hauptmenue span {
    color: #fff;
  }

  .menuBtn.mobile {
    display: none;
  }


  .menue1, .menue2, .menue3 {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menue1 {
    margin: 0 -20px 0 0;
    max-height: 56px;
    position: relative;
    opacity: 1;
    transition: none;
    visibility: visible;
  }

    .menue1 > li {
      float: left;
      display: block;
      width: 10.599%;
      text-align: center;
      padding-left: 0;
      font-size: 16px;
      line-height: 44px;
      max-height: 56px;
      overflow: visible;
    }

      .menue1 > li > div > a {
        text-indent: 0;
      }

      .menue1 > li.showSub {
        background-color: transparent;
      }

      .menue1 > li:hover > .skewEl {
        background-color: #bcbfc4;
      }

      .menue1 > li#warenkorb > .skewEl {
        background-color: #00a387;
        color: #fff;
      }

      .menue1 > li > .skewEl {
        display: block;
        width: 100%;
        /*height: 100%;*/
        height: 56px;
        border-left: 2px solid #fff;
      }

      .menue1 > li:first-child > .skewEl {
        border: 0;
      }

      .menue1 > li > a,
      .menue1 > li > .skewEl > a {
        color: #979696;
        text-decoration: none;
        font-weight: bold;
      }

      .menue1 > li > a,
      .menue1 > li > .skewEl > a,
      .menue1 > li#warenkorb span,
      .menue1 > li#warenkorb > .skewEl > span,
      .menue1 > li#warenkorb > .skewEl > a {
        padding: 6px 0;
        font-size: 15px;
        text-transform: uppercase;
      }

      .menue1 > li#warenkorb span,
      .menue1 > li#warenkorb > .skewEl > span,
      .menue1 > li#warenkorb > .skewEl > a {
        padding: 0;
      }

        .menue1 > li:hover > a,
        .menue1 > li:hover > .skewEl > a,
        .menue2 > li:hover > a,
        .menue3 > li:hover > a,
        .menue1 > li#warenkorb span a,
        .menue1 > li#warenkorb > .skewEl > a {
          color: #00a387;
        }

      .menue1 > li#warenkorb > .skewEl span,
      .menue1 > li#warenkorb > .skewEl > a {
        display: block;
        font-size: 11px;
        text-align: center;
        text-transform: none;
        line-height: 1.9em;
        color: #fff;
      }

        .menue1 > li#warenkorb > .skewEl > a.cartHead {
          font-size: 14px;
          text-align: left;
          font-weight: normal;
          width: 100%;
          height: 56px;
        }

          .menue1 > li#warenkorb > .skewEl > a.cartHead #warenkorbTitel {
            background-image: url('../images/icons/icon_warenkorb.png');
            background-repeat: no-repeat;
            background-position: 7px 9px;
            height: 30px;
            padding: 5px 0 0 16px;
            margin-left: 8px;
            font-size: 14px;
            text-align: center;
          }

          .menue1 > li#warenkorb > .skewEl > a.cartHead #warenkorbText {
            margin-top: 3px;
            margin-left: 0px;
            text-align: center;
          }

  .menue2, .menue3, .subWrapper {
    display: none;
    z-index: 999;
  }

  .menue2 {
    position: absolute;
    width: 100%;
    /*max-width: 1200px;*/
    padding: 0;
    border-left: 2px solid #fff;
    visibility: visible;
    opacity: 1;
    display: none;
  }

  .menue1 > li:first-child > .menue2 {
    border-left: 0;
  }

  li#menu1_1 > .menue2 {
    max-width: 1034px;
  }

  li#menu1_2 > .menue2 {
    max-width: 778px;
  }

  li#menu1_3 > .menue2 {
    max-width: 649px;
  }

  li#menu1_4 > .menue2 {
    max-width: 645px;
  }

  li#menu1_5 > .menue2 {
    max-width: 390px;
  }

  li#menu1_6 > .menue2 {
    max-width: 282px;
  }

  li#menu1_7 > .menue2 {
    max-width: 907px;
  }
  /* 01.11.2018 Abgeaenderte Breite fuer Warenkorb-Menue */
  .menue2 > li {
    text-align: left;
    /*max-width: 20%;*/
    max-width: 21%;
    width: auto;
    padding: 0;
    line-height: 1;
    background-color: #bcbfc4;
    text-indent: 0;
    overflow: visible;
  }

  li#menu1_1 > .menue2 > li {
    max-width: 21%;
  }

  li#menu1_2 > .menue2 > li {
    max-width: 25%;
  }

  li#menu1_3 > .menue2 > li {
    max-width: 30%;
  }

  li#menu1_4 > .menue2 > li {
    max-width: 35%;
  }

  li#menu1_5 > .menue2 > li {
    max-width: 55%;
  }

  li#menu1_6 > .menue2 > li {
    max-width: 70%;
  }

  .menue2 > li:hover {
    background-color: #ced0d4;
  }

  .menue2 > li > a {
    border-right: 2px solid #e3e3e3;
    border-left: 10px solid transparent;
    padding: 8px 0;
    color: #000;
    font-size: 14px;
    /*text-indent: 6px;*/
  }

  .menue2 > li:hover > a {
    border-right: 2px solid #ced0d4;
    border-left: 10px solid #00a387;
    margin-left: -12px;
    padding-left: 12px;
  }

  .menue2 > li:first-child > a {
    /*padding-top: 20px;*/
  }

  .menue2 > li:last-child > a {
    /*padding-bottom: 20px;*/
  }

  .menue2 > li.hasSubmenu > a:after {
    background-image: url('../images/icons/pfeil_schwarz.gif');
    background-position: center center;
    background-repeat: no-repeat;
    width: 12px;
    height: 10px;
    padding-left: 14px;
    content: "";
  }

  .menue2 > li.hasSubmenu:hover > a:after {
    background-image: url('../images/icons/pfeil_gruen.gif');
  }

  .menue2 > li > .subWrapper {
    position: absolute;
    top: 0;
    width: auto;
    min-height: 100%;
    max-width: 100%;
    background-color: #ced0d4;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  li#menu1_1 > .menue2 > li > .subWrapper {
    left: 21%;
  }

  li#menu1_2 > .menue2 > li > .subWrapper {
    left: 25%;
  }

  li#menu1_3 > .menue2 > li > .subWrapper {
    left: 30%;
  }

  li#menu1_4 > .menue2 > li > .subWrapper {
    left: 35%;
  }

  li#menu1_5 > .menue2 > li > .subWrapper {
    left: 55%;
  }

  li#menu1_6 > .menue2 > li > .subWrapper {
    left: 70%;
  }

  .menue3 {
    position: relative;
    width: auto;
    min-height: 100%;
    height: auto;
    padding: 0 20px 0 10px;
    display: block;
    float: left;
  }

  .menue2 > li ul:first-child:nth-last-child(1) {
    width: 100%;
  }

  .menue2 > li ul:first-child:nth-last-child(2),
  .menue2 > li ul:first-child:nth-last-child(2) ~ ul {
    width: 50%;
  }

  .menue2 > li ul:first-child:nth-last-child(3),
  .menue2 > li ul:first-child:nth-last-child(3) ~ ul {
    width: 33.3333%;
  }

  .menue2 > li ul:first-child:nth-last-child(4),
  .menue2 > li ul:first-child:nth-last-child(4) ~ ul {
    width: 25%;
  }

  .menue3 > li {
    line-height: 1;
    text-indent: 0;
  }

    .menue3 > li > a {
      padding: 6px 0 6px 10px;
      color: #000;
      font-size: 14px;
    }

    .menue3 > li:first-child > a {
      padding-top: 10px;
    }

    .menue3 > li:last-child > a {
      /*padding-bottom: 20px;*/
    }

  div.hauptmenue {
    margin: 37px 0 0;
    display: block;
  }

  .menue1 {
    width: 100%;
    position: relative;
  }

    .menue1 > li {
      width: 12.5%;
    }

      .menue1 > li:hover > .menue2 {
        display: block;
      }

  .menue2 > li:hover > .menue3,
  .menue2 > li:hover > .subWrapper {
    display: block;
  }

  .siteCount, .prodSort, .prodFilter, .prodTyp {
    margin-bottom: 0;
  }

  .prodSort, .prodFilter {
    margin-right: 1%;
    clear: none;
  }

  .prodTyp {
    display: block;
  }

  .siteCount, .prodTyp {
    float: right;
    width: auto;
  }

  .prodNavWrapper .paging {
    width: 30%;
  }

  .mainWrapper .inner > .paging {
    clear: both;
    margin-top: 20px;
  }

  .artikelliste.kachel {
    margin: 20px 0;
  }

  div.artikelliste.kachel .variant,
  div.artikelliste.kachel .amount {
    display: none;
  }

  .artikelliste.kachel div.hauptartikel {
    float: left;
    width: 23.5%;
    margin-right: 2%;
    border: 1px solid #00a387;
    padding: 1%;
    min-height: 325px;
    margin-bottom: 2%;
  }

  .artikelliste.kachel > div.hauptartikel:nth-child(8n+8) {
    margin-right: 0;
  }

  .artikelliste.kachel .hauptartikelbild,
  .artikelliste.kachel .hauptartikeltext {
    width: 100%;
    max-width: 100%;
    float: none;
  }

  .artikelliste.kachel .hauptartikelbild {
    min-height: 110px;
    height: 110px;
    text-align: center; /* Align center inline elements */
    font: 0/0 a; /* Hide the characters like spaces */
    margin-bottom: 10px;
  }

    .artikelliste.kachel .hauptartikelbild a {
      text-align: center; /* Align center inline elements */
      font: 0/0 a; /* Hide the characters like spaces */
      min-height: 110px;
      height: 110px;
    }

      .artikelliste.kachel .hauptartikelbild a:before { /* create a full-height inline block pseudo=element */
        content: ' ';
        display: inline-block;
        vertical-align: middle; /* vertical alignment of the inline element */
        height: 100%;
      }

    .artikelliste.kachel .hauptartikelbild img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 110px;
      margin: 0 auto;
      vertical-align: middle;
      display: inline-block;
      transition: all 0.6s ease 0s;
    }

  .artikelliste.kachel div.hauptartikel:hover .hauptartikelbild img {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  .artikelliste.kachel .hauptartikeltext {
    border-top: 1px solid #00a387;
    padding-top: 8px;
  }

    .artikelliste.kachel .hauptartikeltext a {
      display: block;
      /*word-break: break-all;*/
    }

  .artikelliste.kachel h4.manufacture {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .artikelliste.kachel h4.prodDesc {
    margin-bottom: 0;
    padding-right: 16px;
  }

    .artikelliste.kachel h4.prodDesc span {
      margin-top: 4px;
    }

  .artikelliste.kachel .hauptartikelwarenkorb {
    display: none;
  }

  .artikelliste div.gesamtpreis {
    float: right;
    /*min-width: 26%;*/
    min-width: 1%;
    margin-bottom: 20px;
  }

    .artikelliste div.gesamtpreis:after,
    .artikelliste:after {
      content: '.';
      width: 100%;
      clear: both;
      height: 0px;
      line-height: 0px;
      font-size: 0px;
      margin: 0;
      padding: 0;
      display: block;
      visibility: hidden;
      opacity: 0;
    }

  div.funktionsButton.buttonRechts {
    /*clear: both;*/
    margin-bottom: 8px;
  }

  div.weiter {
    float: right;
    clear: both;
  }

  .formularBlock {
    max-width: 100%;
  }

    .formularBlock.formularLinieUnten {
      width: 100%;
      max-width: 100%;
    }

  .artikelliste {
    clear: both;
  }

  .hinweis {
    float: left;
    clear: none;
    max-width: 60%;
  }

  .formularBlock label {
    width: auto;
    min-width: 14%;
    text-align: right;
  }

  .formularBlock.newsletter div > span {
    width: 100%;
  }

    .formularBlock.newsletter div > span > label, .formularBlock div > span > label {
      text-align: left;
      max-width: 100%;
    }

  .formularBlock.formularLinieUnten > div span {
    clear: none;
    float: none;
  }

  .formularBlock input[type="text"],
  .formularBlock select,
  .formularBlock textarea {
    width: 72%;
    max-width: 400px;
  }

  div.fuss .inner {
    padding: 0;
  }

    div.fuss .inner > ul > li {
      float: left;
      margin-right: 2%;
      min-width: 18%;
    }

  div.copy {
    margin-top: -50px;
  }

  .ui-menu {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 90% !important;
    max-width: 100%;
    padding: 10px;
    background-color: #ced0d4;
    border-left: 1px solid #00a387;
    border-right: 1px solid #00a387;
    border-bottom: 1px solid #00a387;
    z-index: 9999;
    height: 320px;
    overflow: auto;
    text-align: left;
  }

  .ui-menu {
    border-top: 1px solid #00a387;
    text-align: left;
    min-width: 406px !important;
    max-width: 500px;
  }

    .ui-menu .ui-menu-item a {
      color: #000;
      text-align: left;
      background-color: transparent !important;
      cursor: pointer !important;
    }

    .ui-menu .ui-menu-item:last-child a {
      margin: 0;
      padding: 0;
    }

    .ui-menu .ui-menu-item:hover,
    .ui-menu .ui-menu-item.ui-state-focus,
    .ui-menu .ui-menu-item:hover a,
    .ui-menu .ui-menu-item a:hover {
      color: #00a387 !important;
      cursor: pointer !important;
    }

  div.alleMarken ul li {
    width: 23.5%;
    margin-right: 2%;
  }

    div.alleMarken ul li:nth-child(3n+3) {
      margin-right: 2%;
    }

    div.alleMarken ul li:nth-child(4n+4) {
      margin-right: 0;
    }

  .mainWrapper .inner ul li > a {
    padding: 3px 0;
  }

  .formularBlock > div span {
    /*padding-left: 24% !important;*/
    /*display: inline-block !important;*/
  }

  .formularBlock.newsletter {
    max-width: 40%;
    float: right;
  }

    .formularBlock.newsletter div > span > label,
    .formularBlock div > span > label {
      width: auto;
    }

  div.warten #wartenText,
  div.warten #gesperrtText {
    width: 400px;
    margin-left: -200px;
  }

  .pictureBlock > div:first-child:nth-last-child(1) {
    width: 100%;
  }

  .pictureBlock > div:first-child:nth-last-child(2),
  .pictureBlock > div:first-child:nth-last-child(2) ~ div {
    width: 50%;
  }

  .pictureBlock > div:first-child:nth-last-child(3),
  .pictureBlock > div:first-child:nth-last-child(3) ~ div {
    width: 33.3333%;
  }

  .pictureBlock > div:first-child:nth-last-child(4),
  .pictureBlock > div:first-child:nth-last-child(4) ~ div {
    width: 25%;
  }

  div.zoomContainer {
    display: block;
    z-index: 988;
  }

  .formularBlock > div span {
    /*min-width: 18%;*/
    min-width: 32%;
  }

  .hideBlock {
    max-height: 51px;
  }

  div.warten #gesperrtText {
    top: 40%;
  }




  /***************************** 03.05.2016 Plus-Artikel *****************************/
  .plusArtikel {
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #00a387;
    /*03.02.2020 auskommentiert: min-height: 240px;*/
  }

  .plusArtikelContainer {
    margin-top: 20px; /*11.02.2020 von 10 auf 20px erhöht*/
    padding-bottom: 10px;
    /*03.02.2020 auskommentiert: border-top: 1px solid #00a387;*/
  }

    .plusArtikelContainer h3 {
      color: #333333; /*11.02.2020 schwarz statt grün*/
      float: left;
      width: 80%; /*11.02.2020 von 70 auf 80% erhöht*/
      /*11.02.2020 entfernt: line-height: 1.5em;*/
      font-size: 1.5em; /*11.02.2020 von 1.1 auf 1.5em erhöht*/
    }

  .plusArtikelSeitenzahl {
    float: left;
    width: 20%; /*11.02.2020 von 30 auf 20% verringert*/
    text-align: right;
    line-height: 1.5em; /*11.02.2020 von 1.1 auf 1.5em erhöht*/
    margin: 5px 0;
  }

  .plusArtikelElementContainer {
    width: 86%;
    margin: 0 auto;
    float: left;
  }

  .plusArtikelNavigation {
    float: left !important;
    width: 5% !important;
    clear: none !important;
    margin-top: 3%; /*03.02.2020 geändert*/
  }

    .plusArtikelNavigation a {
      display: block;
      padding: 0 !important;
      width: 100%;
      height: auto;
    }

    .plusArtikelNavigation.zurueck {
      margin-right: 2%;
    }

    .plusArtikelNavigation.weiter {
      background-color: #fff;
      margin: 3% 0 0 2% !important; /*03.02.2020 geändert*/
    }

      .plusArtikelNavigation.weiter a {
        text-align: right !important;
      }

  .plusArtikelElement {
    width: 20%;
    height: auto;
    padding: 10px 1% 5px;
    float: left;
    margin: 0;
    border: 1px solid #fff;
  }

    .plusArtikelElement:last-child:after,
    .plusArtikelObjektContainer > div:last-child:after {
      content: ".";
      width: 100%;
      height: 0;
      clear: both;
      margin: 0;
      padding: 0;
      visibility: hidden;
      line-height: 0;
      font-size: 0;
      display: none;
    }

  .plusArtikelObjektContainer {
    overflow: hidden;
    clear: both;
  }

  .plusArtikelElement:hover {
    border: 1px solid #00a387;
  }

  .plusArtikelElement .vorschaubild {
    width: auto;
    max-width: 100%;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
  }

  .plusArtikelElement a {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    /*03.02.2020 auskommentiert: height: 160px;*/
    color: #000;
    text-decoration: none;
    text-align: center; /*neu*/
  }

    .plusArtikelElement a > div:before {
      content: " ";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      max-height: 100px;
      height: 100px;
    }

    .plusArtikelElement a > div {
      text-align: center;
      margin-bottom: 10px;
    }

  /*Preis*/
  .plusArtikelElement > span {
    display: inline-block;
    width: 100%;
    text-align: left; /*vorher right*/
    font-size: 18px; /*vorher 24px*/
    text-align: center; /*neu*/
    margin-top: 4px; /*neu*/
    font-weight: bold;
  }



  /** TEST **********************************************************************************************/
  .sliderWrapper {
    display: block;
  }


  /* 11.01.2018 für Warenkörbe-Seite */
  .formularBlock p.ddlHinweis {
    padding-left: 14%;
  }

  /* 20.11.2019 Anpassung für Validatoren bei RadioButtonList ***********************************************/
  .rblSchmal {
    min-width: auto !important;
    width: 80px;
  }
  
  
  /* 03.07.2020 Zurückbutton Breadcrumb *********************************************************************/
  .breadcrumbWrapper .breadcrumb li.breadcrumbBack {
	  display: block;
	float: right;
	cursor: pointer;
  }
  
  .breadcrumbWrapper .breadcrumb li.breadcrumbBack a {
	color: #00a387 !important;
	text-decoration: underline !important;
	cursor: pointer !important;
  }
  
}


/**************************************************** ab 1200 Pixel Breite ****************************************************/
/*** Desktop Breakpoint ***/
@media (min-width: 1200px) {
  header,
  body.formular header {
    height: 168px;
  }

  .mainWrapper {
    margin-top: 168px;
  }

  /*29.05.2017 für Anker-Sprünge, 20px mehr als Header-Höhe*/
  .anchor {
    display: block;
    height: 188px; /*same height as header*/
    margin-top: -188px; /*same height as header*/
    visibility: hidden;
  }

  div.hauptmenue {
    margin: 0;
    clear: none;
    -webkit-box-shadow: 0px 3px 10px 0px rgba(112,112,112,0.6);
    -moz-box-shadow: 0px 3px 10px 0px rgba(112,112,112,0.6);
    box-shadow: 0px 3px 10px 0px rgba(112,112,112,0.6);
  }

  .menue1 {
    float: right;
    width: 87%;
  }

    .menue1 > li {
      width: 12.39%;
    }

      .menue1 > li:first-child > .skewEl {
        border-left: 2px solid #fff;
      }

      .menue1 > li > .skewEl {
        -ms-transform: skew(-18deg);
        -webkit-transform: skew(-18deg);
        transform: skew(-18deg);
      }

        .menue1 > li > a,
        .menue1 > li > .skewEl > a,
        .menue1 > li#warenkorb > .skewEl > a {
          -ms-transform: skew(18deg);
          -webkit-transform: skew(18deg);
          transform: skew(18deg);
        }

  .menue2 {
    margin-left: -9px;
  }

  .menue1 > li:first-child > .menue2 {
    border-left: 2px solid #fff;
  }

  div.mainWrapper .inner {
    padding: 1px 0 0;
  }

  .flex-caption {
    right: 10.6%;
  }

  .kategorienWrapper {
    max-height: 265px;
    padding-bottom: 28px;
  }

  .kategorie {
    min-height: 187px;
    margin-bottom: 28px;
  }

  .prodNavWrapper .paging {
    width: 30%;
  }

  #carousel {
    padding: 0 64px;
  }

  div.alleMarken ul li {
    width: 15%;
  }

    div.alleMarken ul li:nth-child(4n+4) {
      margin-right: 2%;
    }

    div.alleMarken ul li:nth-child(6n+6) {
      margin-right: 0;
    }
}
/*** Buttonbar Breakpoint ***/
@media (min-width: 1320px) {
  div.btnBar {
    overflow: visible;
    width: 51px;
    min-width: 51px;
    display: block;
  }

  .btnBar div.btn {
    width: 281px;
    margin-left: 0;
    -transition: all .85s ease 0s;
    -moz-transition: all .85s ease 0s;
    -webkit-transition: all .85s ease 0s;
    transition: all .85s ease 0s;
  }

  .btnBar a {
    display: inline-block;
    color: #00a387;
    text-decoration: none;
    font-size: 16px;
    width: 100%;
    height: 100%;
  }

  .btnBar .btn:first-child a,
  .btnBar .btn:nth-child(2) a {
    width: auto;
  }

  .btnBar div.btn img {
    float: left;
  }

  .btnBar div.btn .btnContent {
    width: 230px;
    height: 51px;
    background-color: #e3e3e3;
    text-decoration: none;
    color: #000;
    float: left;
    line-height: 51px;
    padding-left: 14px;
  }

  .btnBar div.btn:hover {
    margin-left: -230px;
    opacity: 1;
  }

    .btnBar div.btn:hover img {
      border: 0px;
    }


  /* 21.09.2017 Registrieren-Leiste links */
  div.registrierenBar {
    display: block;
  }
}

b .gesperrt {
  color: red;
  font-weight: normal;
}


/* 01.12.2017 Zahlen rechts ausgerichtet */
input.menge {
  text-align: right;
}


/* 09.01.2018 Warenkorb-Menü */
li.aktiverWarenkorb a {
  color: #00A387 !important;
  font-weight: bold;
}

/* 15.04.2019 Anzahl in Pulldown-Menü ändern (aktive Merkliste) */
span#merklisteAnzahl2 {
  display: inline;
  width: inherit;
  padding: 0px;
}





/* Cookie-Hinweis */
#cookieHinweis {
  position: fixed;
  bottom: 0px;
  z-index: 10000;
  width: 100%;
  background-color: #BCBFC4;
  border-top: solid 1px #00A387;
  padding: 10px;
  text-align: left;
}

  #cookieHinweis a {
    color: #333;
  }

#cookieHinweisText {
  margin: 0 50px 0 0;
}

#cookieHinweisZustimmen {
  position: absolute;
  top: 8px;
  right: 10px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  background-color: #00A387;
  color: #FFFFFF;
  padding: 2px 6px 2px 6px;
  border-radius: 0px;
}




/* 06.07.2018 für Newsletter2Go-Formular in newsletter.aspx */
div.newsletter2go button {
  background-color: #00a387 !important;
  font-size: 16px !important;
}

div.newsletter2go input[type="text"],
div.newsletter2go input[type="email"] {
  width: 280px;
}


/* 07.03.2019 für Karriere */
a.kategorieliste {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}

h3.karriere {
  margin: 20px 0 5px 0 !important;
}


table.konsi {
  margin: 20px 0;
}

  table.konsi th {
    text-align: left;
    vertical-align: top;
  }



/* 23.07.2019 Rangeslider */
.rangeBlock {
  display: block;
  width: 100%;
}

.toodleContainer h3,
.toodleContainer .inputContainer {
  margin-bottom: 20px;
}

.toodleContainer .inputContainer {
  margin-bottom: 20px;
}

  .toodleContainer .inputContainer label {
    color: #00A387;
  }

  .toodleContainer .inputContainer input {
    margin-right: 10px;
  }

  .toodleContainer .inputContainer #RBL_Auswahl_1 {
    margin-left: 30px;
  }

  .toodleContainer .inputContainer label,
  .toodleContainer .inputContainer input {
    margin-bottom: 10px;
  }

#toodleAusgabe {
  margin-top: 20px;
}

  #toodleAusgabe .toodleWert {
    display: inline-block;
    color: #00A387;
    width: 185px;
    text-align: left;
    margin: 0 20px 6px 0;
  }

.rangeHidden {
  display: none !important;
}

.irs-min,
.irs-max {
  border: 1px solid #000;
}

.irs--round .irs-line {
  /*height: 7px !important;*/
}

@media (min-width: 768px) {
  .rangeBlock {
    width: 60%;
  }
}

/********************************** NEU 03.09.2019 Fuer Neukundenanlage ****************************************************/
.subSpan, .childSpan, span.neukundenanlage {
  min-width: 100% !important;
}

.spanContainer > span:first-child {
  margin-top: 7px !important;
}

.subSpan > label,
.childSpan label,
span.neukundenanlage label {
  float: none !important;
  text-align: left !important;
  max-width: 80% !important;
}

.childSpan {
  padding-left: 15px;
}

  .childSpan > .childSpan {
    padding-left: 6px;
  }

    .childSpan > .childSpan label,
    .childSpan.kataloge label {
      width: auto !important;
      min-width: 35px !important;
    }

    .childSpan > .childSpan input[type="radio"] {
      margin-left: 14px;
    }

    .childSpan > .childSpan input[type="text"] {
      max-width: 49%;
    }

  .childSpan.kataloge input[type="radio"] {
    margin-left: 4px !important;
  }

  .childSpan.kataloge input.katalogAdresse {
    max-width: 46% !important;
  }

  .childSpan.kataloge .spanAnzahl {
    padding-left: 5px;
  }


/********************************** NEU 23.09.2019 Fuer Kundenanbindung ****************************************************/
.kundenanbindung h5 {
  margin-bottom: 5px;
}

.formularBlock.kundenanbindung > div span {
  padding-top: 0.7%;
}

.formularBlock.kundenanbindung table {
  min-width: 32%;
  float: left;
  max-width: 40%;
}

.formularBlock.kundenanbindung > div:after {
  content: ".";
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
  visibility: hidden;
  margin: 0;
  padding: 0;
  clear: both;
}

.formularBlock.kundenanbindung table td {
  background-color: #fff !important;
  padding: 3px 0 3px 0 !important;
}

.formularBlock.kundenanbindung table label {
  float: none !important;
  text-align: left !important;
  margin-top: 3px !important;
  width: 60% !important;
}

input.andere {
  display: block;
  margin-left: 24px;
  width: 28% !important;
}

@media (min-width: 1024px) {
  input.andere {
    margin-left: 16%;
    width: 18% !important;
  }
}


/* ******************************************** 24.10.2019 *************************************** */
.formularBlock div > span {
  color: #00a387 !important;
}

  /* ******************************************** 19.11.2019 *************************************** */
  /* Korrektur für Fehlermeldungen, die von oberem CSS gruen gefaerbt wurden */
  .formularBlock div > span[id^="ContentPlaceHolder1_RFV_"],
  .formularBlock div > span[id^="ContentPlaceHolder1_REV_"],
  .formularBlock div > span[id^="ContentPlaceHolder1_RV_"], /* 03.06.2020 RangeValidator */
  .formularBlock div > span[id^="ContentPlaceHolder1_CV_"] {
    color: #f00 !important;
  }


/* ******************************************** 12.11.2019 *************************************** */
/* Tooltip */
.toolTipContainer {
  display: none;
  position: absolute;
  top: 0;
  width: auto;
  max-width: 280px;
  padding: 10px 20px 10px 10px;
  border: 1px solid #00a387;
  background-color: #BCBFC4;
  z-index: 999;
}

.toolTipInner {
  position: relative;
  width: 100%;
  height: 100%;
}

  .toolTipInner p {
    font-size: 14px;
    margin: 0;
  }

.toolClose {
  position: absolute;
  top: -10px;
  right: -20px;
  width: 13px;
  height: 13px;
  background-image: url("/images/icons/close.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  cursor: pointer;
  border-left: 1px solid #00a387;
  border-bottom: 1px solid #00a387;
}

.toolTipIcon {
  cursor: pointer;
}

/************ 05.12.2019 für iFrame *********/
iframe > #content {
  margin-left: 0 !important;
}











/******************************* Newsletterseiten *****************************************/
/* Kategorien */
ul.newsletterKategorien.spalten1,
ul.newsletterKategorien.spalten2 {
	overflow: hidden;
}

ul.newsletterKategorien.spalten1 li {
	display: block;
	width: 100%;
	margin: 0 0 1% 0;
}

ul.newsletterKategorien.spalten2 li {
	display: block;
	width: 100%;
	margin: 0 0 1% 0;
}

ul.newsletterKategorien.spalten1 li img,
ul.newsletterKategorien.spalten2 li img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	
}

div.newsletterArtikelListe.spalten1,
div.newsletterArtikelListe.spalten2,
div.newsletterArtikelListe.spalten3 {
	overflow: hidden;
}

div.newsletterArtikelListe {
	margin-top: 20px;
}

.newsletterArtikel {
	width: 100%;
	height: auto;
	margin: 0 0 2% 0;
	padding: 2% 2% 0 2%;
	border: 1px solid #00A387;
}

.newsletterHersteller {
	width: 100%;
	height: 60px;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	text-align: center;
}

.newsletterHersteller:before,
.newsletterArtikel a > div:first-child:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.newsletterHersteller img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 60px;
	margin: 0 auto 10px;
	vertical-align: middle;
}

.newsletterArtikelHersteller {
	font-size: 24px;
	font-weight: bold;
	width: 100%;
	height: 60px;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}

.newsletterArtikel a {
	text-align: center;
}

.newsletterArtikel a > div:first-child {
	height: 250px;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

.newsletterArtikelBild {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 250px;
	margin: 0 auto 10px;
	vertical-align: middle;
}

.newsletterArtikel > a span {
	display: inline-block;
	width: 100%;
	height: 65px;
	text-align: center;
	font-size: 18px;
}

.newsletterArtikelPreis {
	font-size: 44px;
	color: #00A387;
	font-weight: bold;
	width: 100%;
	text-align: center;
	margin: 20px 0;
	transform: rotate(-2deg);
}

.newsletterArtikelKatalogPreis {
	font-size: 30px;
	color: #888;
	font-weight: bold;
	text-decoration: line-through;
	width: 114.3%;
	text-align: center;
	margin: 10px 0 0 -7%;
	background-color: yellow;
}

@media (min-width: 1024px) {
	ul.newsletterKategorien.spalten2 li {
		display: block;
		float: left;
		width: 48%;
		margin: 0 4% 1% 0;
	}
	
	ul.newsletterKategorien.spalten2 li:nth-child(2n) {
		margin: 0 0 1% 0;
	}
	
	div.newsletterArtikelListe.spalten2 .newsletterArtikel {
		float: left;
		width: 48%;
		height: auto;
		margin: 0 4% 1% 0;
	}
	
	div.newsletterArtikelListe.spalten2 .newsletterArtikel:nth-child(2n) {
		margin: 0 0 2% 0;
	}
	
	div.newsletterArtikelListe.spalten3 .newsletterArtikel {
		float: left;
		width: 32%;
		height: auto;
		margin: 0 2% 2% 0;
	}
	
	div.newsletterArtikelListe.spalten3 .newsletterArtikel:nth-child(3n) {
		margin: 0 0 2% 0;
	}
}












/* ******************************************** Print ******************************************** */
@media print {
  body {
    width: 100%;
    font-size: 12pt;
  }

  #mainHead,
  .sliderWrapper,
  .breadcrumbWrapper,
  .prodNavWrapper,
  .thumbWrapper,
  .amount,
  .cartButton,
  .paging,
  .btnBar,
  .fuss {
    display: none !important; /* 21.02.2018 important dazu gesetzt wegen Fehler auf der Detailseite */
  }

  .top-margin {
    margin-top: 0;
    padding-top: 0;
  }

  .longtxtWrapper, .techData, .manufacturerInfo {
    max-height: 5000px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 16px;
  }

  .imgWrapper,
  .infoWrapper,
  .manufacturerInfo,
  .techData,
  div.hauptartikelbild,
  div.hauptartikeltext,
  div.hauptartikelwarenkorb div.price,
  div.hauptartikelwarenkorb div.stock {
    max-width: 50%;
    height: auto;
    float: left;
  }

  div.artikelliste div:nth-child(10n+10) {
    page-break-after: always;
  }

  div.hauptartikelbild,
  div.hauptartikeltext,
  div.hauptartikelwarenkorb div.stock {
    width: 63%;
    max-width: 63%;
    margin-bottom: 8px;
  }

  div.hauptartikelwarenkorb div.stock {
    width: 50%;
  }

  div.hauptartikelbild,
  div.hauptartikelwarenkorb div.price {
    width: 35%;
    max-width: 35%;
    margin-right: 2%;
  }

  div.hauptartikelwarenkorb {
    width: 100%;
  }

  div.hauptartikel {
    padding: 10px 0;
  }

  .hauptartikel h4.manufacture {
    font-size: 12px;
  }

  .hauptartikel h4.prodDesc {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .hauptartikeltext h4 span {
    font-size: 12px;
  }

  .variant {
    padding: 6px 0;
  }

    .variant label {
      font-size: 14px;
    }

  div.weiter {
    display: none;
  }

  .manufacturerInfo, .techData {
    border: 0;
    margin-bottom: 20px;
  }

  .formularBlock {
    max-width: 100%;
  }

    .formularBlock > div {
      padding: 0;
    }

    .formularBlock h2 {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .formularBlock.formularLinieUnten {
      width: 100%;
      max-width: 100%;
    }

  .artikelliste {
    clear: both;
  }

  .hinweis {
    float: left;
    clear: none;
    max-width: 60%;
  }

  .formularBlock label {
    width: auto;
    min-width: 14%;
    text-align: right;
    padding-top: 9px;
  }

  .formularBlock.formularLinieUnten > div span {
    clear: none;
    float: none;
  }

  .formularBlock input[type="text"],
  .formularBlock select,
  .formularBlock textarea {
    width: 72%;
    max-width: 380px;
    height: 24px;
    border: 1px solid #bcbfc4;
  }

  div#content {
    width: 100%;
    margin: 0;
    float: none;
  }

  h1, h2 {
    color: black;
  }
}
/* ENDE @media print */