.decostyle {
  --color-light: #FFFFFF;
  --color-middle: #FFFFFF;
  --color-dark: #B3C4C7;
  --color-primary: #B3C4C7;
  --color-font: #7F7F7F;
  --color-font-dark: #7F7F7F;

  --wallpaper-border-radius: 100%;
  --wallpaper-border-width: 0;
}

.decostyle * {
  font-family: 'Rasch Sans Light', 'Open Sans', sans-serif;
}

.decostyle a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.decostyle #logo-right {
  position: relative;
  /* align-content: center; */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* align-items: flex-start; */
  width: 100%;
  top: 0;
}

.decostyle #logo-left img {
  width: 455px;
}

.decostyle #logo-right img {
  width: 170px;
}

@media all and (max-width: 550px) {
  .decostyle #logo-left {
    top: 11rem;
    display: block;
    position: relative;
    margin: 0 auto;
    width: 300px;
  }

  .decostyle #logo-right {
    position: absolute;
    top: .1rem;
    left: 1rem;
    width: 100%;
    justify-content: flex-end;
  }

  .decostyle #logo-right img {
    width: 100px !important;
  }
}

.decostyle h1, .decostyle h1 *,
.decostyle h2, .decostyle h2 *,
.decostyle h3, .decostyle h3 *,
.decostyle h4, .decostyle h4 *,
.decostyle h5, .decostyle h5 * {
  font-family: 'Poiret One', 'Rasch Sans Bold', 'Rasch Sans', sans-serif;
  color: var(--color-primary);
  font-weight: 400;
}

.decostyle .wrapper-inner h2 {
  text-transform: none;
}

/*.decostyle h2 {*/
/*  font-family: 'RecifeDisplay', 'Open Sans', sans-serif;*/
/*  letter-spacing: 5px;*/
/*}*/

.decostyle .light:not(.is-child-paragraph) {
  background-color: var(--color-light);
}

.decostyle .middle:not(.is-child-paragraph) {
  background-color: var(--color-middle);
}

.decostyle .dark:not(.is-child-paragraph) {
  background-color: var(--color-dark);
}

.decostyle .primary:not(.is-child-paragraph) {
  background-color: var(--color-primary);
}

.decostyle .light p,
.decostyle .middle p {
  color: var(--color-font);
}

.decostyle .primary p,
.decostyle .primary h1,
.decostyle .primary h2,
.decostyle .primary h3,
.decostyle .primary h4,
.decostyle .primary h5,
.decostyle .dark p,
.decostyle .dark h1,
.decostyle .dark h2,
.decostyle .dark h3,
.decostyle .dark h4,
.decostyle .dark h5 {
  color: var(--color-light);
}

.decostyle h1 {
  font-size: 80px;
}

.decostyle h2 {
  font-size: 80px;
}

.decostyle h3 {
  font-size: 80px;
}

.decostyle .dark:not(.is-child-paragraph) .media .description p,
.decostyle .primary:not(.is-child-paragraph) .media .description p {
  color: #F0F1F3;
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

.decostyle .light:not(.is-child-paragraph) .media .description p,
.decostyle .middle:not(.is-child-paragraph) .media .description p {
  color: var(--color-font-dark);
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
  font-weight: 300;
}

.decostyle article.media.image[view_mode = 'tapete_1_1'] img {
  border-radius: var(--wallpaper-border-radius);
  border: none;
  margin: 0 auto;
}

.decostyle .slick-prev {
  background: url(../decostyle/arrow_left_black.svg) 50% 43% no-repeat;
  width: 3rem;
  left: 5rem;
}

.decostyle .slick-next {
  background: url(../decostyle/arrow_right_black.svg) 50% 43% no-repeat;
  width: 3rem;
  right: 5rem;
}

.decostyle .dark .slick-prev,
.decostyle .primary .slick-prev {
  background: url(../decostyle/arrow_left_white.svg) 50% 43% no-repeat;
}

.decostyle .dark .slick-next,
.decostyle .primary .slick-next {
  background: url(../decostyle/arrow_right_white.svg) 50% 43% no-repeat;
}

.front.decostyle .scroll-down {
  width: 42px;
  right: 9vw;
  top: 85vh;
}

.front.decostyle .scroll-down img {
  width: 42px;
}

.decostyle footer #block-footertext span {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.decostyle footer nav#block-fusszeile ul li a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
  color: var(--color-light);
}

.decostyle #block-brandingderwebsite img {
  width: 400px;
}

.decostyle.not-front #logos {
  display: none;
}

.decostyle #block-sprachumschalter ul li a {
  text-decoration: none;
  color: var(--color-font);
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

.decostyle #block-sprachumschalter ul li:hover a,
.decostyle #block-sprachumschalter ul li.is-active a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.decostyle .narrow > * {
  max-width: 159rem;
}

.decostyle #logos {
  top: 4em;
}

.decostyle .paragraph:not(.is-child-paragraph) > .p-big {
  /*padding-top: 12rem !important;*/
  /*padding-bottom: 12rem !important;*/
}

.decostyle footer, .decostyle footer a {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.decostyle footer #block-brandingderwebsite {
  align-items: center;
}

.decostyle [data-items-in-a-row="8"] > div {
  align-items: baseline;
}

.decostyle [data-items-in-a-row="8"] article.media.image[view_mode = 'tapete_1_1'] {
  padding: 1em;
}

.decostyle footer > div > nav {
  justify-content: flex-end;
}

/*
first slider
 */
.decostyle #block-client-content > article > div > div.paragraph:first-of-type {
  min-height: 100vh;
  padding-bottom: 12rem;
}
.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
  max-width: 137rem;
  top: 14rem;
}
.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-list .is-child-paragraph img {
  width: 100%
}

.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
  right: -5rem;
}
.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
  left: -5rem;
}

.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next,
.decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
  background-position-y: 50%;
}

/*
In case the slider images should have a box-shadow, you can add this to the CSS:

.decostyle article.media.image[view_mode = 'tapete_1_1'] img {
  box-shadow: 0 20px 35px #00000029;
}
.decostyle .wide .slick-list {
  max-width: calc(170rem - 25px);
  margin: 0 auto;
  padding: 0;
}
*/

@media screen and (min-width: 1501px) {
  .front.decostyle .scroll-down {
    right: 5vw;
  }
}

@media screen and (max-width: 1500px) {
  .front.decostyle .scroll-down {
    right: 3rem;
  }

  .decostyle .slick-prev {
    width: 2rem;
    left: 2rem;
  }

  .decostyle .slick-next {
    width: 2rem;
    right: 2rem;
  }

  .decostyle h1 {
    font-size: 48px;
  }

  .decostyle h2 {
    font-size: 80px;
  }

  .decostyle h3 {
    font-size: 55px;
  }
}

@media screen and (max-width: 1400px) {
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 125rem;
  }

  .decostyle .slick-prev {
    width: 2.5rem;
    left: 1rem;
  }

  .decostyle .slick-next {
    width: 2.5rem;
    right: 1rem;
  }

  .decostyle h1 {
    font-size: 43px;
  }

  .decostyle h2 {
    font-size: 70px;
  }

  .decostyle h3 {
    font-size: 50px;
  }

}

@media screen and (max-width: 1330px) {
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type {
    min-height: unset;
    padding-bottom: 20rem;
  }

  .decostyle #logos {
    max-width: 94vw;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 90vw;
  }

  .decostyle h1 {
    font-size: 40px;
  }

  .decostyle h2 {
    font-size: 60px;
  }

  .decostyle h3 {
    font-size: 47px;
  }
}

@media screen and (max-width: 1050px) {
  .decostyle h1 {
    font-size: 36px;
  }

  .decostyle h2 {
    font-size: 55px;
  }

  .decostyle h3 {
    font-size: 42px;
  }
}

@media screen and (max-width: 900px) {
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
    right: -3rem;
    width: 2rem;
  }
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
    left: -3rem;
    width: 2rem;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 85vw;
  }

  .decostyle #block-sprachumschalter ul {
    height: 16px;
  }

  .decostyle h1 {
    font-size: 32px;
  }

  .decostyle h2 {
    font-size: 50px;
  }

  .decostyle h3 {
    font-size: 40px;
  }

}

@media screen and (max-width: 786px) {
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
    right: -3rem;
    width: 2rem;
  }
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
    left: -3rem;
    width: 2rem;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 85vw;
  }

  .decostyle #logo-right img {
    width: 200px;
    margin: 0 auto;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    top: 17rem;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type {
    padding-bottom: 23rem;
  }

  .decostyle #logos {
    max-width: 90vw;
  }

  .decostyle h1 {
    font-size: 27px;
  }

  .decostyle h2 {
    font-size: 40px;
  }

  .decostyle h3 {
    font-size: 33px;
  }
}

@media screen and (max-width: 550px) {
  .decostyle #block-client-content > article > div > div.paragraph:first-of-type > .row {
    top: 25rem;
  }

  .decostyle #block-client-content > article > div > div.paragraph:first-of-type {
    padding-bottom: 33rem;
  }

  .decostyle #block-sprachumschalter ul.active {
    height: 100%;
  }

  .decostyle #block-sprachumschalter {
    z-index: 999999;
  }

  .decostyle h1 {
    font-size: 22px;
  }

  .decostyle h2 {
    font-size: 30px;
  }

  .decostyle h3 {
    font-size: 27px;
  }
}

.decostyle #block-client-local-tasks ul li a {
  color: var(--color-dark);
}

.decostyle .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .wrapper-inner {
  align-items: stretch;
}
.decostyle .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image > div,
.decostyle .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image article {
  height: 100%;
}
.decostyle .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image img {
  height: 100%;
  object-fit: cover;
}