/* ==========================================================================
	@imports.scss
	Imports
============================================================================= */
/* ==========================================================================
	@variables.scss
	Variablen 
============================================================================= */
/* ==========================================================================
	@mixins.scss
	Mixins / Functions
============================================================================= */
@media (max-width: 767px) {
  .block-box-bg {
    margin-left: -24px;
    margin-right: -24px;
    background-color: white !important;
  }
}
@media (min-width: 768px) {
  .block-box-bg .content-container {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) {
  .block-box-bg.bg-white .content-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (min-width: 768px) {
  .block-box-bg .has-image {
    display: grid;
    align-items: center;
    grid-template-columns: 50% 50%;
  }
}
@media (min-width: 1200px) {
  .block-box-bg .has-image {
    grid-template-columns: 50% 55%;
  }
}
.block-box-bg .has-image .box-img {
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 29px 40px 0px rgba(97, 66, 77, 0.2), 0px 12px 12px 0px rgba(97, 66, 77, 0.13);
  overflow: hidden;
}
.block-box-bg .has-image .box-img img {
  width: 100%;
}
@media (max-width: 767px) {
  .block-box-bg .has-image .box-img {
    margin: 40px 24px -90px 24px;
  }
}
@media (min-width: 768px) {
  .block-box-bg .has-image .box-img {
    width: 605px;
    max-width: 110%;
  }
}
@media (max-width: 767px) {
  .block-box-bg .has-image .content-container .box-bg {
    padding-top: 120px;
  }
}
@media (min-width: 768px) {
  .block-box-bg .has-image .content-container {
    margin-left: -5%;
  }
  .block-box-bg .has-image .content-container .box-bg {
    padding-left: 90px;
  }
}
@media (min-width: 1024px) {
  .block-box-bg .has-image .content-container .box-bg {
    padding-left: 120px;
  }
}
@media (min-width: 768px) {
  .block-box-bg .has-image.img-right {
    grid-template-columns: 50% 50%;
  }
}
@media (min-width: 1200px) {
  .block-box-bg .has-image.img-right {
    grid-template-columns: 55% 50%;
  }
}
@media (min-width: 768px) {
  .block-box-bg .has-image.img-right .box-img {
    grid-column-start: 2;
    grid-row-start: 2;
    margin-left: -15%;
  }
  .block-box-bg .has-image.img-right .content-container {
    position: relative;
    margin-left: 0;
    grid-row-start: 2;
  }
  .block-box-bg .has-image.img-right .box-bg {
    padding-left: 40px;
  }
}
.block-box-bg .box-bg {
  padding: 40px 24px;
}
@media (min-width: 768px) {
  .block-box-bg .box-bg {
    border-radius: 12px;
    box-shadow: 0px 29px 40px 0px rgba(97, 66, 77, 0.2), 0px 12px 12px 0px rgba(97, 66, 77, 0.13);
    padding: 40px;
  }
}
.block-box-bg .box-bg.bg-red, .block-box-bg .box-bg.bg-kirsch, .block-box-bg .box-bg.bg-aubergine {
  color: white;
}
.block-box-bg .box-bg.bg-red .title-linie, .block-box-bg .box-bg.bg-kirsch .title-linie, .block-box-bg .box-bg.bg-aubergine .title-linie {
  color: white;
  border-color: white;
}
.block-box-bg .box-bg.bg-kirsch a.btn:hover {
  color: #E0301F;
}
.block-box-bg .box-bg.bg-aubergine a.btn:hover {
  color: #7D1935;
}
.block-box-bg .box-bg.bg-sand .d4 {
  color: #E0301F;
}