body{

  font-family: 'Barlow Condensed', sans-serif;
  font-size:auto;
  font-weight:300;
  background:#4f201b; /* Hintergrundfarbe anpassen */
}

/* alle drei Hintergrundbilder hier jeweils in die richtigen css Bereiche einbinden*/

/* For large devices */

html::before {
  content: ' ';
  display: block;
  background-image: url('../img/kroemer-bg-xl.jpg');
  background-position: top;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // This is pretty important.
}


/* For medium devices */
@media screen and (min-width: 40em) and (max-width: 63.9375em)  {
html::before {
  content: ' ';
  display: block;
  background-image: url('../img/kroemer-bg-md.jpg');
  background-position: top;
  background-size: cover;
  height: 60vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // This is pretty important.
}

  }

/* For landscape mobile devices */ 
  @media only screen and (min-width: 400px) and (max-width: 915px) and (orientation: landscape), only screen and (min-width: 400px) and (max-width: 915px) and (orientation: landscape) {
 html::before {
  content: ' ';
  display: block;
  background-image: url('../img/kroemer-bg-md.jpg') !important;
  background-position: top;
  background-size: cover;
  height: 100vh !important;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // This is pretty important.
}

  } 

/* For mobile devices */
@media only screen and (max-width: 767px) {
html::before {
  content: ' ';
  display: block;
  background-image: url('../img/kroemer-bg-kl.jpg') !important;
  background-position: top;
  background-size: cover;
  height: 50vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // This is pretty important.
}

  }
 

 p{
  color: #000;
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.3 !important;
  font-weight: 300;
}

.bg-box{
    /* Background pattern from Toptal Subtle Patterns */
  color: #222;
  cursor: auto;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0px 20px 0px;
  padding: 20px;
  background:rgba(214, 160, 105, 0.9);
  z-index: 900;
  box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.89);
  border-radius: 12px;
    border:2px solid #fff;
}

@media only screen and (max-width: 767px) {
.bg-box {
  line-height: 1.5;
  margin: 0 0px 15px 0px;
  padding: 15px;
}
}

.bg-box-hotel {
  color: #222;
  cursor: auto;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0px 20px 0px;
  padding: 20px;
  background: rgba(222, 157, 96, 0.9);
  z-index: 900;
  box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.89);
  border-radius: 12px;
  border: 2px solid #fff;
}
.bg-box-important{
    /* Background pattern from Toptal Subtle Patterns */
  color: #fff;
  cursor: auto;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0px 20px 0px;
  padding: 20px;
  background:rgba(236, 81, 79, 0.8);
  z-index: 901;
  box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.89);
 border-radius: 12px;
    border:2px solid #fff;
}


.date {
  position: relative;
  width: 52px;
  font-family: 'Open Sans', sans-serif;
  color: #333333;
  margin: 0em 8px 0px 0px;
  float: left;
  height: 54px;
  background: #dbac91;
  padding: 0em;
  -webkit-border-radius: 0.3em;
  border-radius: 0em;
  border: 1px solid #c89361;
}

.button.small, button.small {
  padding: .875rem 1.75rem .9375rem;
  font-size: .8125rem;
  background:#d38902;
}


.bg-box-ti {
     /* Background pattern from Toptal Subtle Patterns */
  color: #222;
  cursor: auto;
  font-style: normal;
  line-height: 1.5;
  margin: 0 0px 20px 0px;
  padding: 5px;
  background:rgba(251, 249, 244, 0.8);
  z-index: 900;
  box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.89);
 border-radius: 12px;
 border:2px solid #fff;
}


@media only screen and (max-width: 767px) {
.bg-box-ti {
  margin: 0 0px 15px 0px;
  padding: 5px;
}
}


.trs-tp{
  height:540px;width:100%;

}

.btn-eticker-txt, .btn-eticker-txt:visited {
  color: #000 !important;
  font-weight: 400;
  font-size: inherit;
}

/* For xlarge only */
@media only screen and (min-width: 120.063em) { 
 .trs-tp {
  height:750px;
  width:100%;
 font-weight: 400;
  }
}
 /* min-width 1441px, xlarge screens */

/* For large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
 .trs-tp {
  height:640px;
  width:100%;

  }
}


/* For medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em)  {
  .trs-tp
{
   height:450px;
   width:100%;

  }
}


/* For small only */
@media screen and (max-width: 39.9375em) {
  .trs-tp
{
   height:380px;
   width:100%;
  }
}

.img-box img {
  border-radius: 12px;
  border: 2px solid #fff;
  margin-bottom: 20px;
  box-shadow: 0 14px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.89);
}