body {
  font-family: 'roboto_condensed',Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
B, STRONG{font-weight:600;}
P {margin:0; margin-bottom: 5px;}
#wrapper{overflow: hidden;}
/*********************************************************************/
.TitelBilder2{clear:both;height:400px;margin-bottom:20px;}
.TitelBilder2 .TitelBlockL,
.TitelBilder2 .TitelBlockR{
  position:relative;
  box-sizing: border-box;
  background-color:#eee;
  overflow:hidden;
}
.TitelBlockR {float:right;}
.TitelBlockL {float:left;}


.TitelBlockL,
.TitelBlockR{width:calc(50% - 20px); height:400px;}

.TitelBlockL IMG,.TitelBlockR IMG{
  position:absolute;
  width:100%; height:400px;
  object-fit: cover;
  /*padding-bottom:80px;
  background-color:rgba(0,0,0,0.5);*/
}

/*Überblendeten Farbbalken hinter link*/
.TitelBlockL:before,.TitelBlockR:before {
  content: "";
  display: block;
  position: absolute;
  height:60px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:1;
  background: rgba(0,0,0, 0.8);
  transition: background .3s linear;
}

.TitelBlockL .Link,.TitelBlockR .Link{
  box-sizing: border-box;
  position:absolute; z-index:2;
  top:25px;
  left:25px;
  right:25px;
  bottom:2500px;
  display:block;
  color:#fff;
  font-size:230%;
  font-weight:600;
  /*text-shadow: -1px -1px #000,-1px 0px #000,-1px 1px #000,
               0px -1px #000,0px 0px #000,0px 1px #000,
               1px -1px #000,1px 0px #000,1px 1px #000,
               0px 0px 1px #000,1px 1px 2px #000,0px 0px 5px #FFF;
  */
  text-shadow: -1px -1px #000,-1px 0px #000,-1px 1px #000,
               0px -1px #000,0px 0px #000,0px 1px #000,
               1px -1px #000,1px 0px #000,1px 1px #000;
  text-decoration:none;
  padding:0px;
  padding-top:320px;
}
.TitelBlockR .Link {text-align:right;}


@media screen and (max-width:991px) {
  .TitelBilder2{height:300px;}
  .TitelBlockL IMG,.TitelBlockR IMG{ height:300px;}
  .TitelBlockL,.TitelBlockR{height:300px;}
  .TitelBlockL .Link,.TitelBlockR .Link{font-size:180%;padding-top:230px;}
  .TitelBlockL:before,.TitelBlockR:before {height:50px}
}

@media screen and (max-width:580px) {
.TitelBilder2{height:auto;}
.TitelBlockL,.TitelBlockR{width:100%;}
.TitelBlockL .Link {text-align:right;}
.TitelBlockR,.TitelBlockL {float:none;margin-bottom:20px;}
.TitelBlockL .Link,.TitelBlockR .Link{font-size:150%;padding-top:240px;}
.TitelBlockL:before,.TitelBlockR:before {height:35px}
}

/**************************************************************/
/*  3er Block mit Bild und text unter Bild
<div class="TitelBlock3er">
  <div><img src="/td/leer.jpg" /><a href="http://www.rollitex.de"><u>Titel bearbeiten &#x27A7;</u></a> <h3>Titel 1</h3> Text Spalte 1</div>
  <div><img src="/td/leer.jpg" /><a href="http://www.rollitex.de"><u>Titel bearbeiten &#x27A7;</u></a> <h3>Titel 2</h3> Text Spalte 2</div>
  <div><img src="/td/leer.jpg" /><a href="http://www.rollitex.de"><u>Titel bearbeiten &#x27A7;</u></a> <h3>Titel 3</h3> Text Spalte 3</div>
</div>
*/
.TitelBlock3er{
   display: grid; grid-template-columns: 31% 31% 31%; grid-gap: 3.5%;
   &>div{overflow:hidden;position: relative; text-align: center; margin-top:20px;margin-bottom:20px;padding-bottom:40px;
     &>IMG{width: 100%; aspect-ratio: 2 / 2;object-fit: cover;height: auto;}
     &>IMG+A{position: absolute; left: 10px; right: 10px;  top: 10px; aspect-ratio: 2 / 2; text-align: center; padding-top:10px;}
     &>A:last-child{position: absolute; left: 10px; right: 10px;  bottom: 10px; text-align: center;font-weight: 900; text-decoration: underline;}
   }
}
@media screen and (max-width:580px) {
  .TitelBlock3er{ grid-template-columns: 100%; grid-gap: 0%;}
}
/**************************************************************/
/*
<div class=\"TitelBilder1\"><div class=\"TitelBlock\"><img src=\"/td/leer.jpg\" /><a href=\"http://www.rollitex.de\"><u>Titel bearbeiten &#x27A7;</u></a></div></div>
*/
.TitelBild{clear:both;  position:relative;margin-bottom:20px;}

.TitelBild IMG{
  /*position:absolute;*/
  width:100%; height:600px;
  object-fit: cover;
}
.TitelBild .Link{
  box-sizing: border-box;
  position:absolute;
  top:25px;
  left:25px;
  right:25px;
  bottom:25px;
  display:block;
  color:#fff;
  font-size:200%;
  font-weight:600;
  text-shadow: 1px 1px #000,-1px -1px #000,-1px 1px #000,1px -1px #000,0px 0px 5px #000,1px 1px 5px #000;
  padding:0px;
  text-align:right;
  u{text-decoration: none;display: block; position: absolute;bottom: 0px;right: 0px;text-align: right;}
}
/**************************************************************/
/*
<div class=\"TitelBilder1\"><div class=\"TitelBlock\"><img src=\"/td/leer.jpg\" /><a href=\"http://www.rollitex.de\"><u>Titel bearbeiten &#x27A7;</u></a></div></div>
*/
.TitelBildFullWidth{clear:both;  position:relative;margin-bottom:20px;
  margin-left: calc( calc(100% /2) - calc(100vw / 2));width: calc(100vw);
  & IMG,& video{
    width: 100%;height: auto; object-fit: cover;
    aspect-ratio: 5 / 2;  max-height: 600px;
  }
  & .Link{
    box-sizing: border-box;
    position:absolute;
    top:25px;
    left:25px;
    /*right:25px;*/ width:calc(100vw - 50px);
    bottom:25px;
    display:block;
    color:#fff;
    font-size:200%;
    font-weight:600;
    text-shadow: 1px 1px #000,-1px -1px #000,-1px 1px #000,1px -1px #000,0px 0px 5px #000,1px 1px 5px #000;
    padding:0px;
    text-align:right;
    u{text-decoration: none;display: block; position: absolute;bottom: 0px;right: 0px;left: 0px;text-align: center;}
  }
}
/**************************************************************/
/*
<div class="TitelBildFullWidth2er">
  <div><img src="/td/leer.jpg" /><a href="http://www.rollitex.de">Titel bearbeiten &#x27A7;</a></div>
  <div><img src="/td/leer.jpg" /><a href="http://www.rollitex.de">Titel bearbeiten &#x27A7;</a></div>
</div>
*/

.TitelBildFullWidth2er{clear:both; display:flex; position: relative;margin-bottom:20px;
  margin-left: calc( calc(100% /2) - calc(100vw / 2));width: calc(100vw);
  &>DIV{width:50%;padding:20px;float:left;position: relative;overflow:hidden;
    &>IMG{width:100%;height:auto; aspect-ratio: 3 / 2;object-fit: cover;}
    &>A{box-sizing: border-box;display:block; position:absolute; z-index:2;
        left:35px;
        right:35px;
        bottom:35px;
        padding-top:3200px;
        color:#fff;font-size:230%;font-weight:600;
        text-shadow: -1px -1px #000,-1px 0px #000,-1px 1px #000,
                    0px -1px #000,0px 0px #000,0px 1px #000,
                    1px -1px #000,1px 0px #000,1px 1px #000;
        text-decoration:none; text-align: center;
    }
    &::before{ content: ""; display: block; position: absolute;z-index: 1;
      height: 70px;bottom: 20px;left: 20px; right: 20px;
      background: rgba(0,0,0, 0.5); transition: background .3s linear;
    }
  }
}
@media screen and (max-width:991px) {
  .TitelBildFullWidth2er>DIV{font-size: 70%;}
}
@media screen and (max-width:580px) {
  .TitelBildFullWidth2er{display:block;}
  .TitelBildFullWidth2er>DIV{width:100%;float: none;}
}
/**************************************************************/

.Infoblock1{
  clear:both;
  box-sizing: border-box;
  background-image: url("linie.png");
  background-repeat:repeat-x;
  background-position: center center;
  font-size:200%;
  margin-bottom:20px;
  margin-top:40px;
  text-align:center;
}
.Infoblock1 DIV {text-align:center;display:inline;margin:auto;background:#fff; padding-left:20px;padding-right:20px;}

/**************************************************************/

.Infoblock2{
  /*border:1px solid;*/
  clear:both;
  box-sizing: border-box;
  font-size:110%;
  height:60px;
}
.Infoblock2 .L,.Infoblock2 .R{
  box-sizing: border-box;border-top:1px solid;border-bottom:1px solid; padding:10px;text-align:center; width: 50%;display:block;float:left;font-size:150%;
}
.Infoblock2 .R {float: right;}
.Infoblock2 .Link{text-decoration: none; color:#000;}


/***************************************/
.InfoTitel2{
  box-sizing: border-box;
  display:block;
  width:100%;
  border-top:3px solid #6F7578;
  border-bottom:3px solid #6F7578;
  padding:5px;
  overflow: auto;
  font-size:110%;
  margin-bottom:40px;
}
.InfoTitel2 .Link{
  padding:2px;
  box-sizing: border-box;
  color:#24456A;
  display:block;
  width:50%;
  float:left;
  text-align:center;
}

/***************************************/

/*
IMG.Vorlage-left{float:left; margin-right:25px;margin-bottom:15px;max-width:40%; clear:both}
IMG.Vorlage-right{float:right; margin-left:25px;margin-bottom:15px;max-width:40%; clear:both}

@media screen and (max-width:580px) {
  IMG.Vorlage-left,IMG.Vorlage-right{width:100%;max-width:100%; margin-left:0;margin-right:0;}

}
*/

.block2er-left, .block2er-right{/*float:left;*/ box-sizing: border-box; width:49%;padding-left:25px;padding-right:25px; display:inline-block;vertical-align: middle;}
.block2er-right IMG{float:left;margin-right:25px;margin-bottom:15px;max-width:100%; clear:both}
.block2er-left IMG{float:right;margin-left:25px;margin-bottom:15px;max-width:100%; clear:both}

@media screen and (max-width:580px) {
  .block2er-left, .block2er-right{width:100%;padding:0;}
  .block2er-right{margin-bottom:25px;}

  .Infoblock2 .L,.Infoblock2 .R{ width:100%;}
}

#tinymce .block2er-left{border-right:1px dotted #F0F;}
#tinymce .block2er-right{border-left:1px dotted #F0F;}