@charset "UTF-8";
/* CATALOG */
#catalog_wrapper {
  display: inline;
  float: left;
  width: 100%;
}

#catalog_nav {
  display: inline;
  float: left;
  /*width: $catalog_nav;*/
  width: 20%;
  position: fixed;
}

#catalog_main {
  display: inline;
  float: right;
  /*width: calc(100% - 300px);*/
  width: 80%;
  background-color: greenyellow;
}

#catalog_nav li {
  float: left;
  width: 100%;
}

/* BREAKPOINTS */
/*

@include breakpoint(XXL) {		    
    
}

@include breakpoint(XL) {		    
    
}

@include breakpoint(L) {		    
    
}

@include breakpoint(M) {		    
    
}

@include breakpoint(S) {		    
    
}

*/
/* VARIABLES */
/* gutter */
/* colors */
/* RESET */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, ol, li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* BASICS */
/* TYPOGRAPHY */
body {
  font-family: clear_sans_lightregular, sans-serif;
  background-color: silver;
  color: #000000;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  line-height: 1.2;
}

h2 {
  line-height: 1.2;
}

h3 {
  line-height: 1.2;
}

h4 {
  line-height: 1.2;
}

h5 {
  line-height: 1.2;
}

h6 {
  line-height: 1.2;
}

p {
  line-height: 1.5;
}

#content li {
  line-height: 1.4;
  list-style: square;
  list-style-position: inside;
}

a, a:link {
  color: #000000;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* GRID */
.col_1-12, .col_2-12, .col_1-6, .col_1-5, .col_3-12, .col_1-4, .col_4-12, .col_1-3, .col_2-5, .col_5-12, .col_6-12, .col_1-2, .col_7-12, .col_3-5, .col_8-12, .col_2-3, .col_9-12, .col_3-4, .col_4-5, .col_10-12, .col_5-6, .col_11-12, .col_12-12, .col_5-5, .col_1-1 {
  float: left;
}

.col_12-12, .col_5-5, .col_1-1 {
  width: 100%;
}

.col_11-12 {
  width: 91.666666%;
}

.col_10-12, .col_5-6 {
  width: 83.333333%;
}

.col_4-5 {
  width: 80%;
}

.col_9-12, .col_3-4 {
  width: 75%;
}

.col_8-12, .col_2-3 {
  width: 66.666666%;
}

.col_3-5 {
  width: 60%;
}

.col_7-12 {
  width: 58.333333%;
}

.col_6-12, .col_1-2 {
  width: 50%;
}

.col_5-12 {
  width: 41.666666%;
}

.col_2-5 {
  width: 40%;
}

.col_4-12, .col_1-3 {
  width: 33.333333%;
}

.col_3-12, .col_1-4 {
  width: 25%;
}

.col_1-5 {
  width: 20%;
}

.col_2-12, .col_1-6 {
  width: 16.666666%;
}

.col_1-12 {
  width: 8.333333%;
}

.box_1-12, .box_2-12, .box_1-6, .box_1-5, .box_3-12, .box_1-4, .box_4-12, .box_1-3, .box_2-5, .box_5-12, .box_6-12, .box_1-2, .box_7-12, .box_3-5, .box_8-12, .box_2-3, .box_9-12, .box_3-4, .box_4-5, .box_10-12, .box_5-6, .box_11-12, .box_12-12, .box_5-5, .box_1-1 {
  float: left;
  margin: 0 15px;
  background-color: orange;
}

.box_12-12, .box_5-5, .box_1-1 {
  width: calc(100% - 30px);
}

.box_11-12 {
  width: calc(91.666666% - 30px);
}

.box_10-12, .box_5-6 {
  width: calc(83.333333% - 30px);
}

.box_4-5 {
  width: calc(80% - 30px);
}

.box_9-12, .box_3-4 {
  width: calc(75% - 30px);
}

.box_8-12, .box_2-3 {
  width: calc(66.666666% - 30px);
}

.box_3-5 {
  width: calc(60% - 30px);
}

.box_7-12 {
  width: calc(58.333333% - 30px);
}

.box_6-12, .box_1-2 {
  width: calc(50% - 30px);
}

.box_5-12 {
  width: calc(41.666666% - 30px);
}

.box_2-5 {
  width: calc(40% - 30px);
}

.box_4-12, .box_1-3 {
  width: calc(33.333333% - 30px);
}

.box_3-12, .box_1-4 {
  width: calc(25% - 30px);
}

.box_1-5 {
  width: calc(20% - 30px);
}

.box_2-12, .box_1-6 {
  width: calc(16.666666% - 30px);
}

.box_1-12 {
  width: calc(8.333333% - 30px);
}

/* Breiter | Rasterbreite 4 = XXL */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (min-width: 961px) {
  .wrapper {
    width: 96%;
  }
  .col-xxl_2-5, .col-xxl_5-12, .col-xxl_6-12, .col-xxl_1-2, .col-xxl_7-12, .col-xxl_3-5, .col-xxl_8-12, .col-xxl_2-3, .col-xxl_9-12, .col-xxl_3-4, .col-xxl_4-5, .col-xxl_10-12, .col-xxl_5-6, .col-xxl_11-12, .col-xxl_12-12, .col-xxl_5-5, .col-xxl_1-1 {
    float: left;
  }
  .col-xxl_12-12, .col-xxl_5-5, .col-xxl_1-1 {
    width: 100%;
  }
  .col-xxl_11-12 {
    width: 91.666666%;
  }
  .col-xxl_10-12, .col-xxl_5-6 {
    width: 83.333333%;
  }
  .col-xxl_4-5 {
    width: 80%;
  }
  .col-xxl_9-12, .col-xxl_3-4 {
    width: 75%;
  }
  .col-xxl_8-12, .col-xxl_2-3 {
    width: 66.666666%;
  }
  .col-xxl_3-5 {
    width: 60%;
  }
  .col-xxl_7-12 {
    width: 58.333333%;
  }
  .col-xxl_6-12, .col-xxl_1-2 {
    width: 50%;
  }
  .col-xxl_5-12 {
    width: 41.666666%;
  }
  .col-xxl_2-5 {
    width: 40%;
  }
  .col-xxl_4-12, .col-xxl_1-3 {
    width: 33.333333%;
  }
  .col-xxl_3-12, .col-xxl_1-4 {
    width: 25%;
  }
  .col-xxl_1-5 {
    width: 20%;
  }
  .col-xxl_2-12, .col-xxl_1-6 {
    width: 16.666666%;
  }
  .col-xxl_1-12 {
    width: 8.333333%;
  }
  .box-xxl_1-12, .box-xxl_2-12, .box-xxl_1-6, .box-xxl_1-5, .box-xxl_3-12, .box-xxl_1-4, .box-xxl_4-12, .box-xxl_1-3, .box-xxl_2-5, .box-xxl_5-12, .box-xxl_6-12, .box-xxl_1-2, .box-xxl_7-12, .box-xxl_3-5, .box-xxl_8-12, .box-xxl_2-3, .box-xxl_9-12, .box-xxl_3-4, .box-xxl_4-5, .box-xxl_10-12, .box-xxl_5-6, .box-xxl_11-12, .box-xxl_12-12, .box-xxl_5-5, .box-xxl_1-1 {
    float: left;
    margin: 0 15px;
    background-color: orange;
  }
  .box-xxl_12-12, .box-xxl_5-5, .box-xxl_1-1 {
    width: calc(100% - 30px);
  }
  .box-xxl_11-12 {
    width: calc(91.666666% - 30px);
  }
  .box-xxl_10-12, .box-xxl_5-6 {
    width: calc(83.333333% - 30px);
  }
  .box-xxl_4-5 {
    width: calc(80% - 30px);
  }
  .box-xxl_9-12, .box-xxl_3-4 {
    width: calc(75% - 30px);
  }
  .box-xxl_8-12, .box-xxl_2-3 {
    width: calc(66.666666% - 30px);
  }
  .box-xxl_3-5 {
    width: calc(60% - 30px);
  }
  .box-xxl_7-12 {
    width: calc(58.333333% - 30px);
  }
  .box-xxl_6-12, .box-xxl_1-2 {
    width: calc(50% - 30px);
  }
  .box-xxl_5-12 {
    width: calc(41.666666% - 30px);
  }
  .box-xxl_2-5 {
    width: calc(40% - 30px);
  }
  .box-xxl_4-12, .box-xxl_1-3 {
    width: calc(33.333333% - 30px);
  }
  .box-xxl_3-12, .box-xxl_1-4 {
    width: calc(25% - 30px);
  }
  .box-xxl_1-5 {
    width: calc(20% - 30px);
  }
  .box-xxl_2-12, .box-xxl_1-6 {
    width: calc(16.666666% - 30px);
  }
  .box-xxl_1-12 {
    width: calc(8.333333% - 30px);
  }
}

/* IPAD QUER | Rasterbreite 4 = XL */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 960px) {
  .wrapper {
    width: 96%;
  }
  .col-xl_1-12, .col-xl_2-12, .col-xl_1-6, .col-xl_1-5, .col-xl_3-12, .col-xl_1-4, .col-xl_4-12, .col-xl_1-3, .col-xl_2-5, .col-xl_5-12, .col-xl_6-12, .col-xl_1-2, .col-xl_7-12, .col-xl_3-5, .col-xl_8-12, .col-xl_2-3, .col-xl_9-12, .col-xl_3-4, .col-xl_4-5, .col-xl_10-12, .col-xl_5-6, .col-xl_11-12, .col-xl_12-12, .col-xl_5-5, .col-xl_1-1 {
    float: left;
  }
  .col-xl_12-12, .col-xl_5-5, .col-xl_1-1 {
    width: 100%;
  }
  .col-xl_11-12 {
    width: 91.666666%;
  }
  .col-xl_10-12, .col-xl_5-6 {
    width: 83.333333%;
  }
  .col-xl_4-5 {
    width: 80%;
  }
  .col-xl_9-12, .col-xl_3-4 {
    width: 75%;
  }
  .col-xl_8-12, .col-xl_2-3 {
    width: 66.666666%;
  }
  .col-xl_3-5 {
    width: 60%;
  }
  .col-xl_7-12 {
    width: 58.333333%;
  }
  .col-xl_6-12, .col-xl_1-2 {
    width: 50%;
  }
  .col-xl_5-12 {
    width: 41.666666%;
  }
  .col-xl_2-5 {
    width: 40%;
  }
  .col-xl_4-12, .col-xl_1-3 {
    width: 33.333333%;
  }
  .col-xl_3-12, .col-xl_1-4 {
    width: 25%;
  }
  .col-xl_1-5 {
    width: 20%;
  }
  .col-xl_2-12, .col-xl_1-6 {
    width: 16.666666%;
  }
  .col-xl_1-12 {
    width: 8.333333%;
  }
  .box-xl_1-12, .box-xl_2-12, .box-xl_1-6, .box-xl_1-5, .box-xl_3-12, .box-xl_1-4, .box-xl_4-12, .box-xl_1-3, .box-xl_2-5, .box-xl_5-12, .box-xl_6-12, .box-xl_1-2, .box-xl_7-12, .box-xl_3-5, .box-xl_8-12, .box-xl_2-3, .box-xl_9-12, .box-xl_3-4, .box-xl_4-5, .box-xl_10-12, .box-xl_5-6, .box-xl_11-12, .box-xl_12-12, .box-xl_5-5, .box-xl_1-1 {
    float: left;
    margin: 0 15px;
    background-color: orange;
  }
  .box-xl_12-12, .box-xl_5-5, .box-xl_1-1 {
    width: calc(100% - 30px);
  }
  .box-xl_11-12 {
    width: calc(91.666666% - 30px);
  }
  .box-xl_10-12, .box-xl_5-6 {
    width: calc(83.333333% - 30px);
  }
  .box-xl_4-5 {
    width: calc(80% - 30px);
  }
  .box-xl_9-12, .box-xl_3-4 {
    width: calc(75% - 30px);
  }
  .box-xl_8-12, .box-xl_2-3 {
    width: calc(66.666666% - 30px);
  }
  .box-xl_3-5 {
    width: calc(60% - 30px);
  }
  .box-xl_7-12 {
    width: calc(58.333333% - 30px);
  }
  .box-xl_6-12, .box-xl_1-2 {
    width: calc(50% - 30px);
  }
  .box-xl_5-12 {
    width: calc(41.666666% - 30px);
  }
  .box-xl_2-5 {
    width: calc(40% - 30px);
  }
  .box-xl_4-12, .box-xl_1-3 {
    width: calc(33.333333% - 30px);
  }
  .box-xl_3-12, .box-xl_1-4 {
    width: calc(25% - 30px);
  }
  .box-xl_1-5 {
    width: calc(20% - 30px);
  }
  .box-xl_2-12, .box-xl_1-6 {
    width: calc(16.666666% - 30px);
  }
  .box-xl_1-12 {
    width: calc(8.333333% - 30px);
  }
}

/* IPAD HOCHKANT | Rasterbreite 3 =  L */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 780px) {
  .wrapper {
    width: 100%;
  }
  .row {
    padding-left: 0px;
    padding-right: 0px;
  }
  .col-l_1-12, .col-l_2-12, .col-l_1-6, .col-l_1-5, .col-l_3-12, .col-l_1-4, .col-l_4-12, .col-l_1-3, .col-l_2-5, .col-l_5-12, .col-l_6-12, .col-l_1-2, .col-l_7-12, .col-l_3-5, .col-l_8-12, .col-l_2-3, .col-l_9-12, .col-l_3-4, .col-l_4-5, .col-l_10-12, .col-l_5-6, .col-l_11-12, .col-l_12-12, .col-l_5-5, .col-l_1-1 {
    float: left;
  }
  .col-l_12-12, .col-l_5-5, .col-l_1-1 {
    width: 100%;
  }
  .col-l_11-12 {
    width: 91.666666%;
  }
  .col-l_10-12, .col-l_5-6 {
    width: 83.333333%;
  }
  .col-l_4-5 {
    width: 80%;
  }
  .col-l_9-12, .col-l_3-4 {
    width: 75%;
  }
  .col-l_8-12, .col-l_2-3 {
    width: 66.666666%;
  }
  .col-l_3-5 {
    width: 60%;
  }
  .col-l_7-12 {
    width: 58.333333%;
  }
  .col-l_6-12, .col-l_1-2 {
    width: 50%;
  }
  .col-l_5-12 {
    width: 41.666666%;
  }
  .col-l_2-5 {
    width: 40%;
  }
  .col-l_4-12, .col-l_1-3 {
    width: 33.333333%;
  }
  .col-l_3-12, .col-l_1-4 {
    width: 25%;
  }
  .col-l_1-5 {
    width: 20%;
  }
  .col-l_2-12, .col-l_1-6 {
    width: 16.666666%;
  }
  .col-l_1-12 {
    width: 8.333333%;
  }
  .box-l_1-12, .box-l_2-12, .box-l_1-6, .box-l_1-5, .box-l_3-12, .box-l_1-4, .box-l_4-12, .box-l_1-3, .box-l_2-5, .box-l_5-12, .box-l_6-12, .box-l_1-2, .box-l_7-12, .box-l_3-5, .box-l_8-12, .box-l_2-3, .box-l_9-12, .box-l_3-4, .box-l_4-5, .box-l_10-12, .box-l_5-6, .box-l_11-12, .box-l_12-12, .box-l_5-5, .box-l_1-1 {
    float: left;
    margin: 0 15px;
    background-color: orange;
  }
  .box-l_12-12, .box-l_5-5, .box-l_1-1 {
    width: calc(100% - 30px);
  }
  .box-l_11-12 {
    width: calc(91.666666% - 30px);
  }
  .box-l_10-12, .box-l_5-6 {
    width: calc(83.333333% - 30px);
  }
  .box-l_4-5 {
    width: calc(80% - 30px);
  }
  .box-l_9-12, .box-l_3-4 {
    width: calc(75% - 30px);
  }
  .box-l_8-12, .box-l_2-3 {
    width: calc(66.666666% - 30px);
  }
  .box-l_3-5 {
    width: calc(60% - 30px);
  }
  .box-l_7-12 {
    width: calc(58.333333% - 30px);
  }
  .box-l_6-12, .box-l_1-2 {
    width: calc(50% - 30px);
  }
  .box-l_5-12 {
    width: calc(41.666666% - 30px);
  }
  .box-l_2-5 {
    width: calc(40% - 30px);
  }
  .box-l_4-12, .box-l_1-3 {
    width: calc(33.333333% - 30px);
  }
  .box-l_3-12, .box-l_1-4 {
    width: calc(25% - 30px);
  }
  .box-l_1-5 {
    width: calc(20% - 30px);
  }
  .box-l_2-12, .box-l_1-6 {
    width: calc(16.666666% - 30px);
  }
  .box-l_1-12 {
    width: calc(8.333333% - 30px);
  }
}

/* TABLET 7" | Rasterbreite 2 =  M */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 600px) {
  .col-m_1-12, .col-m_2-12, .col-m_1-6, .col-m_1-5, .col-m_3-12, .col-m_1-4, .col-m_4-12, .col-m_1-3, .col-m_2-5, .col-m_5-12, .col-m_6-12, .col-m_1-2, .col-m_7-12, .col-m_3-5, .col-m_8-12, .col-m_2-3, .col-m_9-12, .col-m_3-4, .col-m_4-5, .col-m_10-12, .col-m_5-6, .col-m_11-12, .col-m_12-12, .col-m_5-5, .col-m_1-1 {
    float: left;
  }
  .col-m_12-12, .col-m_5-5, .col-m_1-1 {
    width: 100%;
  }
  .col-m_11-12 {
    width: 91.666666%;
  }
  .col-m_10-12, .col-m_5-6 {
    width: 83.333333%;
  }
  .col-m_4-5 {
    width: 80%;
  }
  .col-m_9-12, .col-m_3-4 {
    width: 75%;
  }
  .col-m_8-12, .col-m_2-3 {
    width: 66.666666%;
  }
  .col-m_3-5 {
    width: 60%;
  }
  .col-m_7-12 {
    width: 58.333333%;
  }
  .col-m_6-12, .col-m_1-2 {
    width: 50%;
  }
  .col-m_5-12 {
    width: 41.666666%;
  }
  .col-m_2-5 {
    width: 40%;
  }
  .col-m_4-12, .col-m_1-3 {
    width: 33.333333%;
  }
  .col-m_3-12, .col-m_1-4 {
    width: 25%;
  }
  .col-m_1-5 {
    width: 20%;
  }
  .col-m_2-12, .col-m_1-6 {
    width: 16.666666%;
  }
  .col-m_1-12 {
    width: 8.333333%;
  }
  .box-m_1-12, .box-m_2-12, .box-m_1-6, .box-m_1-5, .box-m_3-12, .box-m_1-4, .box-m_4-12, .box-m_1-3, .box-m_2-5, .box-m_5-12, .box-m_6-12, .box-m_1-2, .box-m_7-12, .box-m_3-5, .box-m_8-12, .box-m_2-3, .box-m_9-12, .box-m_3-4, .box-m_4-5, .box-m_10-12, .box-m_5-6, .box-m_11-12, .box-m_12-12, .box-m_5-5, .box-m_1-1 {
    float: left;
    margin: 0 15px;
    background-color: orange;
  }
  .box-m_12-12, .box-m_5-5, .box-m_1-1 {
    width: calc(100% - 30px);
  }
  .box-m_11-12 {
    width: calc(91.666666% - 30px);
  }
  .box-m_10-12, .box-m_5-6 {
    width: calc(83.333333% - 30px);
  }
  .box-m_4-5 {
    width: calc(80% - 30px);
  }
  .box-m_9-12, .box-m_3-4 {
    width: calc(75% - 30px);
  }
  .box-m_8-12, .box-m_2-3 {
    width: calc(66.666666% - 30px);
  }
  .box-m_3-5 {
    width: calc(60% - 30px);
  }
  .box-m_7-12 {
    width: calc(58.333333% - 30px);
  }
  .box-m_6-12, .box-m_1-2 {
    width: calc(50% - 30px);
  }
  .box-m_5-12 {
    width: calc(41.666666% - 30px);
  }
  .box-m_2-5 {
    width: calc(40% - 30px);
  }
  .box-m_4-12, .box-m_1-3 {
    width: calc(33.333333% - 30px);
  }
  .box-m_3-12, .box-m_1-4 {
    width: calc(25% - 30px);
  }
  .box-m_1-5 {
    width: calc(20% - 30px);
  }
  .box-m_2-12, .box-m_1-6 {
    width: calc(16.666666% - 30px);
  }
  .box-m_1-12 {
    width: calc(8.333333% - 30px);
  }
}

/* SMARTPHONE | Rasterbreite 1 = S */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 420px) {
  .wrapper {
    width: 100%;
  }
  .col-s_1-12, .col-s_2-12, .col-s_1-6, .col-s_1-5, .col-s_3-12, .col-s_1-4, .col-s_4-12, .col-s_1-3, .col-s_2-5, .col-s_5-12, .col-s_6-12, .col-s_1-2, .col-s_7-12, .col-s_3-5, .col-s_8-12, .col-s_2-3, .col-s_9-12, .col-s_3-4, .col-s_4-5, .col-s_10-12, .col-s_5-6, .col-s_11-12, .col-s_12-12, .col-s_5-5, .col-s_1-1 {
    float: left;
  }
  .col-s_12-12, .col-s_5-5, .col-s_1-1 {
    width: 100%;
  }
  .col-s_11-12 {
    width: 91.666666%;
  }
  .col-s_10-12, .col-s_5-6 {
    width: 83.333333%;
  }
  .col-s_4-5 {
    width: 80%;
  }
  .col-s_9-12, .col-s_3-4 {
    width: 75%;
  }
  .col-s_8-12, .col-s_2-3 {
    width: 66.666666%;
  }
  .col-s_3-5 {
    width: 60%;
  }
  .col-s_7-12 {
    width: 58.333333%;
  }
  .col-s_6-12, .col-s_1-2 {
    width: 50%;
  }
  .col-s_5-12 {
    width: 41.666666%;
  }
  .col-s_2-5 {
    width: 40%;
  }
  .col-s_4-12, .col-s_1-3 {
    width: 33.333333%;
  }
  .col-s_3-12, .col-s_1-4 {
    width: 25%;
  }
  .col-s_1-5 {
    width: 20%;
  }
  .col-s_2-12, .col-s_1-6 {
    width: 16.666666%;
  }
  .col-s_1-12 {
    width: 8.333333%;
  }
  .box-s_1-12, .box-s_2-12, .box-s_1-6, .box-s_1-5, .box-s_3-12, .box-s_1-4, .box-s_4-12, .box-s_1-3, .box-s_2-5, .box-s_5-12, .box-s_6-12, .box-s_1-2, .box-s_7-12, .box-s_3-5, .box-s_8-12, .box-s_2-3, .box-s_9-12, .box-s_3-4, .box-s_4-5, .box-s_10-12, .box-s_5-6, .box-s_11-12, .box-s_12-12, .box-s_5-5, .box-s_1-1 {
    float: left;
    margin: 0 15px;
    background-color: orange;
  }
  .box-s_12-12, .box-s_5-5, .box-s_1-1 {
    width: calc(100% - 30px);
  }
  .box-s_11-12 {
    width: calc(91.666666% - 30px);
  }
  .box-s_10-12, .box-s_5-6 {
    width: calc(83.333333% - 30px);
  }
  .box-s_4-5 {
    width: calc(80% - 30px);
  }
  .box-s_9-12, .box-s_3-4 {
    width: calc(75% - 30px);
  }
  .box-s_8-12, .box-s_2-3 {
    width: calc(66.666666% - 30px);
  }
  .box-s_3-5 {
    width: calc(60% - 30px);
  }
  .box-s_7-12 {
    width: calc(58.333333% - 30px);
  }
  .box-s_6-12, .box-s_1-2 {
    width: calc(50% - 30px);
  }
  .box-s_5-12 {
    width: calc(41.666666% - 30px);
  }
  .box-s_2-5 {
    width: calc(40% - 30px);
  }
  .box-s_4-12, .box-s_1-3 {
    width: calc(33.333333% - 30px);
  }
  .box-s_3-12, .box-s_1-4 {
    width: calc(25% - 30px);
  }
  .box-s_1-5 {
    width: calc(20% - 30px);
  }
  .box-s_2-12, .box-s_1-6 {
    width: calc(16.666666% - 30px);
  }
  .box-s_1-12 {
    width: calc(8.333333% - 30px);
  }
}

/* SECTIONS */
#above {
  float: left;
  width: 100%;
  /*border-bottom: 1px dotted black;*/
}

#hero {
  float: left;
  position: relative;
  width: 100%;
  height: 60vh;
  /*border-bottom: 1px dotted black;*/
  background-size: cover;
  background-position: center;
}

#header {
  float: left;
  width: 100%;
  /*border-bottom: 1px dotted black;*/
}

#content {
  float: left;
  position: relative;
  width: 100%;
  /*border-bottom: 1px dotted black;*/
}

#footer {
  float: left;
  width: 100%;
  /*border-bottom: 1px dotted black;*/
}

#below {
  float: left;
  width: 100%;
  /*border-bottom: 1px dotted black;*/
}

/* */
.wrapper {
  width: 96%;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
}

.wrapper-fw {
  width: 96%;
  margin: 0 auto;
  padding: 0;
  /*max-width: 980px;*/
}

.row {
  float: left;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/*#hero .wrapper {
	width: 100%!important;
	max-width: 100%!important;
}
*/
/* LAYOUT */
/*h1, h2, h3, h4, h5, h6, p, ul, ol, .box {*/
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0px 15px 10px 15px;
}

.col_12-12 {
  padding-bottom: 25px;
}

.block {
  display: flex;
  flex-wrap: wrap;
}

nav li {
  float: left;
  margin-right: 20px;
}

figure {
  display: block;
  float: left;
  width: 100%;
  /* IE11 Bilder nicht zu gross*/
  line-height: 0;
  /* Ungewünschten whitespace unter figure entfernen */
  border-bottom: 2px solid red;
}

/* ELEMENTS */
/* ICONS */
.caret-right:after {
  content: '';
  display: inline-block;
  margin-top: 1.05em;
  margin-right: 0.6em;
  width: 60px;
  height: 60px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.caret-left:after {
  content: '';
  display: inline-block;
  margin-top: 1.05em;
  margin-left: 0.6em;
  width: 60px;
  height: 60px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* BUTTONS */
a.button, a:link.button {
  padding: 11px 40px;
  border: 1px solid silver;
  display: inline-block;
  color: black;
  text-decoration: none;
}

a:hover.button {
  border: 1px solid black;
}

/* TABLET HOCHKANT | Rasterbreite 4 = XL */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* IPAD HOCHKANT | Rasterbreite 3 =  L */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* TABLET 7" | Rasterbreite 2 =  M */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* SMARTPHONE | Rasterbreite 1 = S */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* COMPONENTS */
.box {
  background-color: silver;
}

.teaser {
  float: left;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.teaser a, .teaser a:link {
  text-decoration: none;
  display: flex;
  flex-flow: column wrap !important;
  justify-content: space-between;
  flex-basis: 100%;
}

.teaser a:first-child {
  /* SAFARIF need flex value */
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

.teaser a:nth-child(4) {
  /* SAFARIF need flex value */
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

.teaser:hover {
  background-color: orange;
}

/*.teaser span img {
	flex-shrink: 0;
}*/
/*img {
  min-height: 1px;
}*/
.teaser-image figure {
  /*display:flex;
	flex-direction: column;
	flex-wrap:wrap;*/
  position: relative;
}

.teaser-image a, .teaser-image a:link {
  text-decoration: none;
  /*overflow: auto;*/
  background-color: orange;
}

.teaser-image figcaption {
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  top: 50%;
  /* Vertikal zentrieren */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /* Vertikal zentrieren */
  width: 100%;
}

.teaser-image:hover img {
  opacity: 0.5;
}

/* VERLAUF VOR IMAGE */
.banderole {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: white;
  background: -moz-linear-gradient(left, white 0%, white 47%, rgba(255, 255, 255, 0.65) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, white), color-stop(47%, white), color-stop(100%, rgba(255, 255, 255, 0.65)));
  background: -webkit-linear-gradient(left, white 0%, white 47%, rgba(255, 255, 255, 0.65) 100%);
  background: -o-linear-gradient(left, white 0%, white 47%, rgba(255, 255, 255, 0.65) 100%);
  background: -ms-linear-gradient(left, white 0%, white 47%, rgba(255, 255, 255, 0.65) 100%);
  background: linear-gradient(to right, white 0%, white 47%, rgba(255, 255, 255, 0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

/* MAINNAV */
/*ul.mainnav li {
	float:left;
	padding:4px;
	margin:1px;
	background:white;
}*/
nav {
  float: right;
}

/* TABLET HOCHKANT | Rasterbreite 4 = XL */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* IPAD HOCHKANT | Rasterbreite 3 =  L */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 780px) {
  nav {
    float: left;
    width: 100%;
  }
}

/* TABLET 7" | Rasterbreite 2 =  M */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* SMARTPHONE | Rasterbreite 1 = S */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
/* MAINNAV SUPERFISH */
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu li {
  position: relative;
}

.sf-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.sf-menu > li {
  float: left;
}

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
  display: block;
}

.sf-menu a {
  display: block;
  position: relative;
}

.sf-menu ul ul {
  top: 0;
  left: 100%;
}

/*** DEMO SKIN ***/
.sf-menu {
  float: left;
  margin-bottom: 1em;
}

.sf-menu ul {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  min-width: 12em;
  /* allow long menu items to determine submenu width */
  *width: 12em;
  /* no auto sub width for IE7, see white-space comment below */
}

.sf-menu a {
  border-left: 1px solid #fff;
  border-top: 1px solid #dFeEFF;
  /* fallback colour must use full shorthand */
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding: .75em 1em;
  text-decoration: none;
  zoom: 1;
  /* IE7 */
}

.sf-menu a {
  color: #13a;
}

.sf-menu li {
  background: #BDD2FF;
  white-space: nowrap;
  /* no need for Supersubs plugin */
  *white-space: normal;
  /* ...unless you support IE7 (let it wrap) */
  -webkit-transition: background .2s;
  transition: background .2s;
}

.sf-menu ul li {
  background: #AABDE6;
  width: 100%;
}

.sf-menu ul ul li {
  background: #9AAEDB;
}

.sf-menu li:hover,
.sf-menu li.sfHover {
  background: #CFDEFF;
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em;
  /* no CSS arrows for IE7 (lack pseudo-elements) */
}

/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  /* order of following 3 rules important for fallbacks to work */
  border: 5px solid transparent;
  border-top-color: #dFeEFF;
  /* edit this to suit design (no rgba in IE8) */
  border-top-color: rgba(255, 255, 255, 0.5);
}

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: white;
  /* IE8 fallback colour */
}

/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF;
  /* edit this to suit design (no rgba in IE8) */
  border-left-color: rgba(255, 255, 255, 0.5);
}

.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: white;
}

/* MAINNAV STACK */
#mobnav-btn {
  display: none;
  font-size: 16px;
  font-weight: normal;
  background-color: #EFEFEF;
  color: #666;
  padding: 10px;
  cursor: pointer;
}

.mobnav-subarrow {
  display: none;
}

/* TABLET 7" | Rasterbreite 2 =  M */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 600px) {
  #mobnav-btn {
    display: block;
  }
  .mobnav-subarrow {
    display: block;
    background-color: #0f3975;
    opacity: .3;
    border-bottom: 1px solid white;
    border-top: 1px solid black;
    height: 20px;
    width: 30px;
    background-position: top left !important;
    position: absolute;
    top: 8px;
    right: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  .sf-menu {
    width: 100% !important;
    display: none;
  }
  .sf-menu.xactive {
    display: block !important;
  }
  .sf-menu li {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }
  .sf-menu li a {
    float: none !important;
  }
  .sf-menu ul {
    position: static !important;
    display: none !important;
  }
  .xpopdrop ul {
    display: block !important;
  }
}

/* MODULES */
/* SIZES */
/* DEVICESIZE XXL > 1280px */
.size:after {
  content: " | XXL";
}

/*}*/
/* TABLET HOCHKANT | Rasterbreite 4 = XL */
/* DEVICESIZE XL <= 1280px */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 960px) {
  .size:after {
    content: " | XL";
  }
}

/* IPAD HOCHKANT | Rasterbreite 3 =  L */
/* DEVICESIZE L <= 1024px */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 780px) {
  .size:after {
    content: " | L";
  }
}

/* TABLET 7" | Rasterbreite 2 =  M */
/* DEVICESIZE M <= 768px */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 600px) {
  .size:after {
    content: " | M";
  }
}

/* SMARTPHONE | Rasterbreite 1 = S */
/* DEVICESIZE S <= 568px */
/* TABLET QUER */
/* DEVICESIZE XXL > 1280px */
@media screen and (max-width: 420px) {
  .size:after {
    content: " | S";
  }
}