/*XL & XXL (HEADER)*/
@media screen and (min-width: 1460px) {
  #header-section div {
    & h1, h2 {
      margin-left: 10%;
      margin-right: 10%;
    }
  }
}
@media screen and (min-width: 1950px) {
  #header-section div {
    & h1, h2 {
      margin-left: 20%;
      margin-right: 20%;
    }
  }
}

/*MOBILE*/
@media screen and (max-width: 840px) { /* w3 recommended tablet landscape size */
  :root {
    --title-font-size-xl: 50px;
    --title-font-size-l: 50px;
    --title-font-size: 34px;
    --slide-width: 400px;
    --nav-font-size: 22px;
    --navbar-height: 90px;
    --header-height: calc(100% - 1.5 * var(--navbar-height));
    --slide-width: 330px;
    --slide-height: 240px;
  }

  .section-box {
    & .section-body {
      padding: 0;
    }
  }
  .section-heading {
    margin-bottom: var(--body-padding);

    p {
      margin: calc(var(--body-padding) / 2);
    }
  }

  #navbar {
    & img {
      height: 40%;
    }
    & #menu-hamburger {
      display: inline;
      height: 22%;
      cursor: pointer;
    }
    & #nav-items {
      height: 0;
      overflow: hidden;
      align-items: flex-start;
      flex-direction: column;
      background-color: rgba(241, 238, 226, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 0 0 0 var(--border-radius);
      transition: all .2 ease-in-out;

      position: absolute;
      right: 0;
      top: var(--navbar-height);

      & .nav-item {
        margin-left: var(--body-padding);

        p {
          margin: 5px;
        }

        &:first-of-type {
          margin-top: var(--nav-font-size);
        }
        &:last-of-type {
          margin-bottom: var(--nav-font-size);
        }
      }
    }
  }

  #header-section {
    & h1 {
      bottom: calc(0px - var(--body-padding) + 12px);
    }
    & h2 {
      bottom: calc(0px - 2 * var(--title-font-size-l) + 16px);
    }
  }
  #about-section {
    & .section-heading {
      margin-bottom: var(--body-padding);
    }
    & .about-content {
      flex-direction: column-reverse;

      & .left {
        & h3 {
          line-height: 0.98;
          margin-top: 0;
        }
        & div {
          max-width: 100%;

          & .cv {
            display: block;
            margin-top: calc(var(--body-padding) * 1.5);
          }
        }
      }
      & .right {
        margin-top: 0;

        & .cv {
          display: none;
        }
      }
    }
  }

  #angebot-section {
    & .top-bar {
      & #angebot-img {
        display: none;
      }
      & h2 {
        margin-bottom: 0;
        & p {
          margin: calc(var(--body-padding) / 2);
        }
      }
    }
    & .content {
      margin-top: var(--body-padding);
      flex-direction: column;

      & #angebot-item {
        display: none;
      }

      & .nav #angebot-mobile {
        display: block;

        & img {
          width: 100vw;
          margin-left: calc(0px - var(--body-padding));
        }
        & p {
          font-family: var(--body-font-family);
          font-size: var(--body-font-size);
          font-weight: var(--body-font-weight);
          margin: calc(2 * var(--body-padding)) 0;
        }
      }
      
      & .angebot-item {
        display: none;
      }
    }
  }

  #branchen-section {
    & .slider {
      & .slide {
        & .number {
          display: none;
        }
        &:first-of-type {
          display: none;
        }
        &:nth-child(2) {
          margin-left: var(--body-padding);
        }
      }
    }
    & .branchen-content {
      padding-right: var(--body-padding);
      flex-direction: column;

      & .branchen-highlights {
        margin: 0;
        margin-right: auto;
        margin-left: var(--body-padding);

        & h4 {
          display: none;
        }
        
        & ul li {
          margin-left: 0;
        }
      }
    }
  }

  #contact-section .section-body {
    flex-direction: column-reverse;
    
    & .contact-details {
      margin-bottom: var(--body-padding);
      font-size: var(--title-font-size);
      align-items: flex-start;

      & img {

      }
    }
  }
}