/*#52771B*/
/* promobar */
/*#7e3bd0*/
/*#d03bc4*/
/* media up to # */
/* media from # up */
.categories > h1 {
  width: 100%; }

.categories .section-content {
  margin-left: -10px;
  margin-right: -10px; }

@media (max-width: 767px) {
  .categories > h3 {
    display: none; }
  #tdescription > h3, #tteaser > h3 {
    display: none; } }

div.treeitem {
  display: block;
  flex: 0 1;
  padding: 0 10px 10px 10px;
  background-color: #fff;
  transition: background-color 0.15s ease-in;
  margin-bottom: 10px;
  overflow: hidden; }
  div.treeitem:hover {
    background-color: rgba(235, 235, 235, 0.3); }
  @media (max-width: 543px) {
    div.treeitem {
      flex: 0 1 50%; } }
  @media (min-width: 544px) and (max-width: 767px) {
    div.treeitem {
      flex: 0 1 33.33%; } }
  @media (min-width: 768px) and (max-width: 979px) {
    div.treeitem {
      flex: 0 1 33.33%; } }
  @media (min-width: 980px) and (max-width: 1199px) {
    div.treeitem {
      flex: 0 1 25%; } }
  @media (min-width: 1200px) {
    div.treeitem {
      flex: 0 1 20%; } }
  div.treeitem .image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    padding: 10px;
    text-align: center;
    background-color: #F4F5F2;
    /*#fff; Oder, wenn die dunkleren Bilder da sind: $color-bg-product;*/ }
    @media (max-width: 543px) {
      div.treeitem .image {
        height: auto; } }
    @media (min-width: 544px) and (max-width: 767px) {
      div.treeitem .image {
        height: auto; } }
    @media (min-width: 768px) and (max-width: 979px) {
      div.treeitem .image {
        height: 150px; } }
    @media (min-width: 980px) and (max-width: 1199px) {
      div.treeitem .image {
        height: 164px;
        padding: 20px; } }
    @media (min-width: 1200px) {
      div.treeitem .image {
        height: 200px;
        padding: 20px; } }
    div.treeitem .image img {
      height: 100%;
      width: auto;
      margin-right: -50%;
      margin-left: -50%;
      -moz-transition: scale 0.3s ease-in-out;
      -webkit-transition: scale 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      filter: url(#ImageBgTone); }
  div.treeitem .treeitem-overlay {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(235, 235, 235, 0.3);
    transition: all 0.15s ease-in;
    text-align: center; }
  div.treeitem h6 {
    width: 100%;
    text-align: center;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  div.treeitem :hover .image img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  div.treeitem :hover .treeitem-overlay {
    visibility: visible;
    opacity: 1; }