/*
 * EM-dent mobile typography fixes.
 * Upload as a WordPress plugin. The active main theme remains unchanged.
 */

@media (max-width: 680px) {
  html {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .em-header__inner {
    min-height: 108px;
    padding: 14px 16px 13px;
  }

  .em-logo {
    min-height: 72px;
  }

  .em-logo img {
    width: min(246px, 66vw);
    max-height: 76px;
  }

  .em-nav {
    top: 118px;
  }

  .em-hero {
    padding-top: 136px;
  }

  .em-section {
    padding: 48px 18px;
  }

  .em-section h2 {
    max-width: 100%;
    font-size: clamp(1.78rem, 7.2vw, 2.18rem);
    line-height: 1.13;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  .em-section__lead {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.58;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .em-enhanced .em-section__lead {
    padding-left: 14px;
    border-left-width: 3px;
  }

  #ueber {
    padding-top: 54px;
  }

  #ueber .em-wrap {
    width: 100%;
    max-width: 100%;
  }

  #ueber h2 {
    font-size: clamp(1.82rem, 7.5vw, 2.08rem);
    line-height: 1.14;
    max-width: 10.8em;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
  }

  #ueber p,
  #ueber li,
  #ueber h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #ueber .em-section__lead {
    max-width: 100%;
    padding-left: 13px;
    font-size: 0.98rem;
    line-height: 1.55;
  }

  #ueber p:not(.em-kicker):not(.em-section__lead),
  #ueber li {
    font-size: 0.98rem;
    line-height: 1.62;
  }
}

@media (max-width: 420px) {
  .em-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .em-section h2 {
    font-size: clamp(1.62rem, 7vw, 1.92rem);
  }

  #ueber h2 {
    font-size: clamp(1.66rem, 7.1vw, 1.92rem);
    max-width: 10.5em;
  }

  .em-section__lead,
  #ueber .em-section__lead,
  #ueber p:not(.em-kicker):not(.em-section__lead),
  #ueber li {
    font-size: 0.95rem;
  }
}

@supports (-webkit-touch-callout: none) {
  .em-scroll-reveal-enabled .em-reveal,
  .em-scroll-reveal-enabled .em-section {
    transform: translate3d(0, 34px, 0);
    backface-visibility: hidden;
    will-change: opacity, transform;
  }

  .em-scroll-reveal-enabled .em-reveal.is-visible,
  .em-scroll-reveal-enabled .em-section.is-visible,
  .em-reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}