div.teaser {width: 100%; height: 400px;}
div.teaser.blue { background: rgba(0,72,132,1); }
div.teaser.blue { background: rgba(0,72,132,1); }
div.teaser.bordeux {background: rgba(128,32,32,1);}
div.teaser.grey { background: rgba(74,74,73,1); }
div.teaser.lightblue { background: rgba(0,177,235,1); }
div.teaser.lightbordeux { background: rgba(224, 133, 133,1); }

div.teaser div.wrap {opacity: 0.5; width: 100%; height: 100%; background-size: cover; background-position: center center;}
div.teaser div.content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div.teaser div.content a {position: absolute; bottom: 30px; left: 40px; max-width: calc(100% - 80px); background: rgba(255,255,255,1); padding: 8px 15px; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.05em;}
div.teaser div.content a:hover {background: rgba(255,255,255,0.7);}
div.teaser div.content h3 {color: rgba(255,255,255,1); text-transform: uppercase;}
div.teaser div.content div.text {color: rgba(255,255,255,1); line-height: 150%; padding: 10px 10px 10px 40px; display: inline-block; }
div.teaser div.content div.text ul {padding: 0;    margin: 0px 20px;}

div.teaser.col12 div.content h3 {font-size: 2.2em !important; line-height: 150%; padding: 10px 180px 10px 40px; }
div.teaser.col14 div.content h3,
div.teaser.col1414 div.content h3 {font-size: 1.3em !important;line-height: 150%; padding: 10px 40px; }
div.col-md-12 div.teaser.col1414 div.content h3 {font-size: 2.2em !important; line-height: 150%; padding: 10px 180px 10px 40px; }

/* ANFANG: Anpassungen von Daniel Kurzweg 4. August 2016 – 09:50 */
div.col-md-12 div.teaser.col1414 div.content h3 {padding: 10px 40px 10px 40px; }
/* ENDE */

div.teaser.col1414 {width: 50%; border-right: 5px solid white;}
div.teaser.col1414 div.wrap {width: calc(50% - 12px); opacity: 1;    position: absolute;    left: 50%;}
div.teaser.col1414 div.content {width: calc(50% - 6px);}
div.teaser.col1414 div.content a {max-width: calc(100% - 70px);}

div.teaser div.content a p {padding: 0px;margin: 0px;}

/*responsive finetuning */
@media (max-width: 990px) {
  div.teaser.col1414 div.content {width: calc(100% - 6px);}
  
  div.teaser {margin-bottom: 50px;height: auto; min-height: 400px;}
  div.teaser div.content {position: relative; padding-bottom: 80px;}
  div.teaser.col14 div.content a { bottom: 20px;}
  div.teaser.col14 div.content h3, 
  div.teaser.col1414 div.content h3,
  div.col-md-12 div.teaser.col1414 div.content h3{padding: 10px 20px;}
  div.teaser div.content div.text,
  div.teaser.col14 div.content div.text {padding: 10px 20px;}
  div.teaser div.content a,
  div.teaser.col14 div.content a { left: 20px;}
  div.teaser.col14  div.content a{
    max-width: calc(100% - 40px);
  }
}

@media (max-width: 768px) {
  div.teaser {min-height: 250px;}
  div.teaser.col14 div.content a { bottom: 40px;}
  div.teaser.col1414 div.wrap {opacity: 0.3; position: relative; left: 0;}
  div.teaser.col1414 div.wrap,
  div.teaser.col1414,
  div.teaser.col1414 div.content {width: 100%;}
  div.teaser.col1414 {border-right: 0px solid white;}
}
@media (max-width: 479px) {
  div.teaser.col12 div.content h3 {font-size: 1.3em !important;}
  div.col-md-12 div.teaser.col1414 div.content h3 {font-size: 1.7em !important;
}