/* OfferCards
 * version 2
 * Max. Eichen.
 */
#offercards {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  background: rgb(51, 50, 50);
  text-shadow: none;
  font-weight: 900;
}

#offercards .global-title-container {
  background: rgb(16, 57, 133);
}

#offercards .global-title {
  color: white;
  font-size: 22.2px;
}

#offercards .global-streamlined {
  display: flex;
  min-height: 50px;
  flex: wrap;
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
}

#offercards .offers {
  margin-top: 58px;
}

#offercards .card {
  display: inline-block;
  position: relative;
  z-index: 10;
  width: 312px;
  height: 406px;
  margin: 0;
  margin-bottom: 50px;
  background: rgb(217, 31, 42);
  color: white;
  margin-right: 0px;
  margin-left: 0px;
}

#offercards .card-title {
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 32px;
  font-size: 30px;
}

#offercards .programm {
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 5px;
  z-index: 15;
  width: 88px;
  height: 120px;
  filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, .5));
}

#offercards .content-container {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 347px;
  width: 260px;
  z-index: 12;
  background: black;
}

#offercards .content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 15;
  height: 347px;
  width: 260px;
  background: rgb(0, 103, 175);
  -webkit-clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
}

#offercards .content ul {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  display: inline-block;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 0.5) 100%);
  color: rgb(37, 61, 134);
  font-size: 13.2px;
}

#offercards .margin-top {
  margin-top: 10px;
}

#bruchkoebel #offercards .margin-top {
  margin-top: 10px;
}

#offercards .content .blue-square::before, #offercards .content .red-square::before, #offercards .content .no-square::before {
  font-style: normal;
  content: "\25A0";
  margin: 0 .95em;
}

#offercards .content .blue-square::before {
  color: rgb(37, 61, 134);
}

#offercards .content .red-square::before {
  color: rgb(217, 31, 42);
}

#offercards .no-square::before {
  color: rgba(255, 255, 255, 0);
}

#offercards .content li {
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  color: rgb(37, 61, 134);
  margin-bottom: 2px;
}

#bruchkoebel .content li {
  margin-bottom: 5px;
}

#offercards .withcard {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  font-weight: 800;
  text-align: left;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 0.5) 100%);
  color: rgb(37, 61, 134);
}

/* #bruchkoebel #offercards .withcard { height: 82px; } */

#offercards .withcard .washcard {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 95px;
  height: 60px;
}

#offercards .withcard .washcard-left {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 95px;
  height: 60px;
}

#offercards .withcard .line {
  display: inline-block;
  margin-left: 30px;
  width: 100%;
}

/* #bruchkoebel #offercards .withcard .line {
  margin-left: 0px;
  width: 48%;
  text-align: right;
} */

#offercards .small {
  font-size: 9.5px;
}

/* #bruchkoebel #offercards .small {
  font-size: 13px;
}*/

#offercards .big {
  font-size: 14px;
}

#bruchkoebel #offercards .big {
  font-size: 14px;
  display: inline-block;
  margin-bottom: 7px;
}

#offercards .verybig {
  font-weight: 900;
  font-size: 18px;
}

#offercards .l1 {
  display: inline-block;
  position: absolute;
  top: -4px;
}

/* #bruchkoebel #offercards .l1 {
  top: 8px;
} */

#offercards .l2 {
  display: inline-block;
  position: absolute;
  top: 10px;
}

/* #bruchkoebel #offercards .l2 {
  top: 22px;
} */

#offercards .l3 {
  display: inline-block;
  position: absolute;
  top: 24px;
}

/* #bruchkoebel #offercards .l3 {
  top: 38px;
  left: -20px;
} */

#offercards .l4 {
  display: inline-block;
  position: absolute;
  top: 35px;
}

#offercards .l5 {
  display: inline-block;
  position: absolute;
  top: 6px;
}

#offercards .l6 {
  display: inline-block;
  position: absolute;
  top: 24px;
}

#offercards .price {
  display: inline-block;
  position: relative;
  font-size: 26px;
}

/* #bruchkoebel #offercards .price {
  font-size: 26px;
} */

#offercards .price-upset {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: -20px;
  font-size: 16px;
}

#offercards .card .default-price {
  display: inline-block;
  position: absolute;
  right: 38px;
  bottom: 60px;
  text-shadow: 2px 2px 2px black;
  text-shadow: 0 0 3px black;
}

/* #bruchkoebel #offercards .card .default-price {
  bottom: 85px;
  right: 45px;
} */

#offercards .card .withcard-price {
  display: inline-block;
  position: absolute;
  right: 38px;
  bottom: 12px;
}

#offercards .card .oder {
  display: inline-block;
  position: absolute;
  color: rgb(217, 31, 42);
  margin-left: 10px;
  font-size: 9px;
  bottom: 20px;
  left: 0;
}

#offercards .card .margin-bottom {
  margin-bottom: 15px;
}

#offercards .extra {
  display: inline-block;
  position: relative;
  width: 312px;
  height: 116px;
  margin: 0;
  margin-bottom: 26px;
  color: rgb(23, 57, 136);
}

#offercards #extra1 {
  background: rgb(216, 26, 34);
}

#offercards .extra .background-container {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 275px;
  background: black;
}

#offercards .extra .background {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 275px;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
}

#offercards .banner {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 10px;
  padding-top: 2px;
  font-size: 22px;
  text-align: left;
  padding-left: 15px;
  width: 100%;
  height: 30px;
  color: white;
  text-transform: uppercase;
}

#offercards #extra1 .background {
    background: rgb(32, 32, 32);
}

#offercards #extra2 {
  background: rgb(0,114,187);
}

#offercards #extra2 .background {
  background: rgb(0,114,187);
  background: linear-gradient(90deg, rgba(0,114,187,1) 0%, rgba(255,255,255,1) 30%, rgba(0,114,187,1) 100%);
}

#offercards #extra1 .banner {
  background: rgb(0,114,187);
  background: -webkit-linear-gradient(bottom, rgb(216, 26, 34) 24%, rgba(0,0,0,0.9) 100%);
}

#offercards #extra2 .banner {
  background: rgb(0,114,187);
  background: -webkit-linear-gradient(bottom, rgba(0,114,187,1) 24%, rgba(0,0,0,0.9) 100%);
}

#offercards .extra .background {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#offercards .extra .symbol {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 26px;
  width: 180px;
}

#offercards .extra-title {
  display: inline-block;
  position: absolute;
  left: 25px;
  top: 2px;
  color: white;
  font-size: 23px;
}

#offercards .extra .default-price {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 30px;
  color: white;
  text-shadow: 2px 2px 2px black;
  text-shadow: .5px .5px 3px black;
}

#offercards .extra .withcard-text {
  display: inline-block;
  position: absolute;
  font-size: 14px;
  bottom: 12px;
  right: 20px;
  color: white;
  text-shadow: 2px 2px 2px black;
  text-shadow: .5px .5px 3px black;
}

#offercards .extra .withcard-price {
  display: inline-block;
  position: absolute;
  right: 30px;
  bottom: 5px;
  color: white;
  z-index: 15;
  text-shadow: 2px 2px 2px black;
  text-shadow: .5px .5px 3px black;
}

#offercards .container {
  display: inline-block;
  width: 270px;
  margin-top: 25px;
  background: black;
}

#offercards .auswahl {
  background: rgb(216, 26, 34);
  height: 35px;
  text-shadow: 2px 2px 2px black;
  text-shadow: .5px .5px 3px black;
}

#offercards .auswahl .symbol {
  display: inline-block;
  width: 30px;
  position: absolute;
  right: -240px;
  top: 4px;
}

#offercards .title {
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  text-align: left;
  font-size: 17px;
  color: white;
}


#bruchkoebel #offercards #extra2 .banner {
  font-size: 20px;
}


#offercards .subtitle {
  display: inline-block;
  position: absolute;
  top: 70px;
  left: 21px;
  width: 80%;
  text-align: left;
  font-size: 14px;
}

#offercards .wrapper {
  display: inline-block;
  position: absolute;
  z-index: 10px;
  width: 250px;
  left: 25px;
  bottom: 5px;
  font-size: 10px;
  text-align: left;
}

#oberursel #offercards .wrapper {
  line-height: 10px;
}

#offercards #extra1 .wrapper {
    color: white;
}

#offercards .extra-collection {
  display: inline-block;
  width: 100%;
  margin: 0;
  display: flex;
  min-height: 50px;
  flex: wrap;
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
}

#offercards .text-red {
  color: rgb(217, 31, 42);
}

@media all and (max-width: 1000px) {
  #offercards .global-title {
    width: 700px;
  }

  #offercards .card {
    margin-left: 5px;
    margin-right: 5px;
  }

  #offercards .extra-collection {
    display: inline-block;
    width: 312px;
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
  }

  #offercards .global-streamlined {
    justify-content: space-around;
    max-width: 760px;
  }
}

@media all and (max-width: 360px) {
  #offercards .card {
    margin-left: 0;
    margin-right: 0;
  }

  #offercards .extra-collection {
    margin-left: 0;
    margin-right: 0;
  }
}

/*
 #offercards {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;

  background: rgb(51,50,50);

  text-shadow: none;
 }

 #offercards .global-title-container {
    background: rgb(16,57,133);
 }

 #offercards .global-title {
   color: white;
   font-size: 22.4px;
 }

 #offercards .global-streamlined {
   display: flex;

   min-height: 50px;

   flex: wrap;
   flex-flow: row wrap;
   justify-content: space-between;

   text-align: center;
 }


#offercards .offers {
  margin-top: 20px;
}


 /* OFFER_CARDS - START *

 #offercards card {
   display: inline-block;
   position: relative;
   z-index: 10;
   width: 320px;
   width: 320px;
   width: 350px;
   width: 312px;
   min-height: 470px;
   min-height: 500px;
   min-height: 406px;
   margin: 0;
   margin-bottom: 30px;

   background: rgb(217,31,42);
   color: white;

   margin-right: 0px;
   margin-left: 0px;
 }

 card .card-title {
   position: absolute;
   top: .25em;
   left: -0.75em;
   width: 100%;
   color: white;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 2.25em;
   font-size: 29px;
   text-shadow: 7.5px 5px 7.5px rgba(0,0,0,0.5);
 }-

 card .programm {
   right: .2em;
   z-index: 20;
   color: white;
   font-size: 6em;
   font-weight: bold;
   position: absolute;
   text-shadow: 7.5px 5px 7.5px rgba(0,0,0,0.5);
 }

 card .inhalt {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 15;
   height: 395px;
   height: 405px;
   height: 425px;
   height: 347px;
   width: 280px;
   width: 310px;
   width: 260px;
   background: rgb(0,103,175);
   -webkit-clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
   clip-path: polygon(0 0, 98.5% .85%, 100% 100%, 0% 100%);
 }

 card .hintergrund {
 	display: inline-block;
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	height: 395px;
  height: 405px;
  height: 425px;
  height: 347px;
 	width: 280px;
  width: 310px;
  width: 260px;
 	z-index: 12;
 	background: black;
 }

 .inhalt .blue-square {
   display: inline-block;
   margin-right: .75em;
   width: 8px;
   height: 8px;
   vertical-align: middle;
   background: rgb(37,61,134);
   box-shadow: 2px 2px 2px rgba(0,0,0,0.75);
 }

 .inhalt .red-square {
   display: inline-block;
   margin-right: .75em;
   width: 8px;
   height: 8px;
   vertical-align: middle;
   background: rgb(217,31,42);
   box-shadow: 2px 2px 2px rgba(0,0,0,0.75);
 }

 .inhalt ul {
   list-style: none;
 	margin: 0 auto;
 	padding: 0;
   text-align: left;
   display: inline-block;
   width: 100%;
   background: rgba(255,255,255,1);
   background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(237,237,237,0.5) 100%);
   color: rgb(37,61,134);
   font-size: 1.025em;
   font-size: 13.2px;
 }

 .inhalt li {
   display: inline-block;
   margin-left: 1em;
   margin-bottom: .35em;
 }

 .inhalt .keep-space {
   margin-top: 1em;
 }


 withcard {
   display: inline-block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 80px;
   text-align: left;
   background: rgba(255,255,255,1);
   background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(237,237,237,0.5) 100%);
   color: rgb(37,61,134);
 }

 card .price {
   display: inline-block;
   vertical-align: top;
   top: .25em;
   left: 2.1em;
   position: relative;
   font-size: 2em;
   font-weight: bold;
   text-shadow: 2px 2px 5px rgba(0,0,0,0.75);
 }

 card .price-upset {
   position: absolute;
   top: 0;
   margin-top: .1em;
   font-size: .75em;
 }

 card .price-inline {
   display: inline-block;
   position: relative;
   font-size: 2em;
   font-weight: bold;
   text-shadow: 2px 2px 5px rgba(0,0,0,0.75);
 }

 card .price-upset-inline {
   position: absolute;
   top: 0;
   margin-top: .1em;
   font-size: .75em;
 }

 withcard .position-information {
 	display: inline-block;
 	position: relative;
 	bottom: 10px;
 }

 withcard .position-price {
 	display: inline-block;
 	position: absolute;
 	right: 4.2em;
 }

 withcard .nano {
   display: inline-block;
   font-weight: bold;
   font-size: .55em;
 }

 withcard .small {
   display: inline-block;
   font-weight: bold;
   font-size: .75em;
 }

 withcard .big {
   display: inline-block;
   font-weight: bold;
   font-size: 1.05em;
   position: relative;
   bottom: 5px;
   width: 100%;
   /* line-height: .9em; *
 }

 withcard .top {
   display: inline-block;
   font-weight: bold;
   font-size: 1.05em;
   position: relative;
   bottom: 2px;
   width: 100%;
   /* line-height: .9em; *
 }

 withcard .space-bar {
   display: inline-block;
   min-height: 100%;
   width: 15px;
 }

 withcard #washcard {
   top: -1.2em;
   left: .75em;
   text-shadow: none;
 }

 card .backdrop-long {
   display: inline-block;
   position: relative;
   width: 100%;
   min-height: 120px;
   margin-top: 2em;
   text-align: left;
   background: url("../../graphics/elements/offercards/gradient_swatch-additional-offer-background.png") no-repeat;
   background-size: cover;
   color:rgb(23,57,136);
   font-weight: bold;
 }

 card .backdrop-topdown {
   display: inline-block;
   min-width: 120px;
   min-height: 120px;
   position: absolute;
   top: 0;
   right: 0;
   -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
   clip-path: polygon(100% 0, 0 100%, 100% 100%);
 }

 card .brand-programm {
   display: inline-block;
   position: relative;
   top: .5em;
   width: 240px;
   text-align: left;

 }

 .backdrop-long .extra-small {
 	font-size: .8em;
 }

 .backdrop-long .price-inline {
 	top: -.4em;
 	right: .3em;
 	font-size: 1.8em;
 	color: white;
 }

 .backdrop-topdown .position-price {
 	display: inline-block;
 	position: relative;
 	top: 2.2em;
 	left: 2em;
 	color: white;
 }

 .backdrop-topdown .position-information {
 	display: inline-block;
 	position: relative;
 	top: 7.5em;
 	right: .2em;
 	font-size: .7em;
 }

 .backdrop-long .text-block {
 	display: inline-block;
 	position: relative;
 	top: 0em;
 	margin-left: 1em;
 	font-size: .8em;
 }

 /* OFFER_CARDS - END */
/*
 @media all and (max-width: 1270px)
 {
   #offercards .middle-one {
     margin-left: 0;
     margin-right: 0;
   }

   #offercards card {
     margin-left: 15px;
     margin-right: 15px;
   }
 }

 @media all and (max-width: 500px)
 {
   #offercards card {
     margin-left: 0;
     margin-right: 0;
   }
 }
 *

@media all and (max-width: 960px)
{
  #offercards .global-streamlined {
    justify-content: space-around;
  }
  #offercards card {
    margin-right: 5px;
    margin-left: 5px;
  }
}

@media all and (max-width: 720px)
{
  #offercards .global-title {
    font-size: 22px;
  }
}

@media all and (max-width: 550px)
{
  #offercards .global-title {
    font-size: 20px;
  }
}

@media all and (max-width: 450px)
{
  #offercards .global-title {
    font-size: 18px;
  }
}

@media all and (max-width: 360px)
{
  #offercards .global-title {

  }
}

@media all and (max-width: 400px)
{
  #offercards .global-streamlined {
    width: 100%;
  }

  withcard .position-information {
   display: inline-block;
   position: relative;
   bottom: 15px;
  }
}
*/