.symphony {
  --color-light: #FFFFFF;
  --color-middle: #FFFFFF;
  --color-dark: #667C89;
  --color-primary: #667C89;
  --color-font: #7F7F7F;
  --color-font-dark: #404040;

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

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

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

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

.symphony #logo-left img {
  width: 500px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.symphony h1 {
  font-size: 64px;
}

.symphony h2 {
  font-size: 64px;
}

.symphony h3 {
  font-size: 56px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.symphony #logos {
  top: 4em;
}

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

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

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

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

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

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

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

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

.symphony #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next,
.symphony #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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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