/*
 Milka-Lila BG: 7D69AC
 Deep Purple #3B2774
 Alpine Blue #8BD1F0


Loerrach-Heavy
 */

/* wo kommt dieses css her, das ich hier reparieren muss? */
body {
  max-width: unset !important;
  /* standard font-size: 16px */
}

.milka-section {
  position: relative;
}

.milka-section .section-content {
  /*width: 1440px;*/
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


.logo-over-lilac {
  margin-top: 90px;
}

.logo-link {
  position: absolute;
  display: block;
}
.logo-link:focus {
  /*border: 3px solid #fff;*/
}
.milka-logo:focus {
  border: 3px solid #FFFFFF;
}

.header_nav-wrapper .milka-logo {
  top: -38px;
}
.is-mobile .header_nav-wrapper .milka-logo {
  top: -8px;
}

@media only screen and (max-width: 480px) {

  .logo-over-lilac-mobile {
    margin-top: 70px;
  }

  .header_nav-wrapper .milka-logo {
    top: -8px;
  }

  .header_nav .logo.milka-logo.w-embed svg {
    width: 80px;
  }

  .header_nav-wrapper .header_nav .milka-logo {
    left: 50%;
    width: 80px;
    margin-left: -40px;
  }

}


.page-schokohaus {
  /*background-image: url("/img-sh/schokohaus-bg.jpg");*/

}

.background-milka-lila {
  background-color: #7D69AC;
}
.background-deep-purple {
  background-color: #3B2774;
}

.milka-content h2 span.headline-blau {
  color: #8BD1F0;
}



.milka-content a.button {
  font-family: "Loerrach-Heavy";

}

.button-wrapper.centered a {
  margin-left: auto;
  margin-right: auto;
}



/* ********* */
/*    TEXT   */

.light-bg {
  background-color: #fff;
  color: #3B2772;
}

.milka-content .light-bg h1,
.milka-content .light-bg h2,
.milka-content .light-bg h3,
.milka-content .light-bg h4,
.milka-content .light-bg h5,
.milka-content .light-bg p,
.milka-content .light-bg a,
.milka-content .light-bg li {

  color: #3B2772;
}



.milka-content h3,
.milka-content .h3-lookalike {
  font-size: 2.5rem;
  text-transform: none;
}

.milka-content h4,
.milka-content .h4-lookalike{
  font-family: "Gobold Bold";
  font-size: 1.5rem;
}




.milka-content p.small-text {
  font-size: 1rem;
}




/* Footer */

 .footer_text {
   font-size: 1rem;
   line-height: 1.4;
 }
@media only screen and (max-width: 767px){
  .footer_text {
    font-size: 0.9rem;
  }
}

.page-wrapper-footer,
footer {
  background-color: #7D69AC;
}



@media only screen and (max-width: 767px){
  .scalable_text.is-sharing {
    font-size: 1.6em;
  }
}


@media only screen and (max-width: 1120px) {

  .milka-section .section-content {
    width: 960px;
  }


  /* *** */
  .milka-content h1,
  .milka-content h2 {
    font-size: 1.875rem; /*30px;*/
  }
  .milka-content h1 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .is-mobile .milka-content h1 {
    margin-left: auto;
    margin-right: auto;
  }


  .milka-content h3,
  .milka-content .h3-lookalike {
    font-size: 1.875rem;
    font-weight: 800;
  }

  .milka-content h4 span.headline-blau {
    font-size: 3.75rem; /*60px; ??? */
  }
  .milka-content h4,
  .milka-content .h4-lookalike{
    /*font-size: 1.5rem;*/
  }


  .milka-content p, .milka-content a, .milka-content li {
    font-size: 1.25rem;
  }


  /* *** Button *** */
  .button.is-secondary.w-button.blue {
    font-size: 1rem;
    font-weight: 700;
  }





   /* Footer */
  .scalable_text.is-sharing {
    line-height: 1.15;
    font-size: 2em; /* !!! */
  }
  .is-mobile .sharing_logo-wrapper {
    top: 6.9em;
  }
  .is-mobile .sharing_logo {
    height: 3em;
  }


  /* footer (for <768) */
  .footer_link-list {
    grid-column-gap: 0px;
    grid-row-gap: 1.5rem;
    grid-auto-flow: row;
    justify-items: center;
  }

}




/* < 980 */

@media only screen and (max-width: 979px) {

  .milka-section .section-content {
    width: 480px;
  }

  .milka-content h1 {
    max-width: 440px;
  }

  .milka-content .section-intro h1 {
    max-width: 340px;
  }

}



/* < 480 */
@media only screen and (max-width: 479px) {

  .milka-section .section-content {
    width: 360px;

  }

}

/* < 360 */
@media only screen and (max-width: 360px) {

  .milka-section .section-content {
    width: 320px;
  }
}




.headline-alike,
.milka-content p.headline-alike {
  font-family: "Loerrach-Heavy";
  font-weight: 800;
  text-transform: uppercase;
}



@media only screen and (max-width: 1120px) {
  .milka-content p.headline {
    font-size: 1.5rem;
  }
}