/*---------- CSS Responsiv ----------*/
@media screen and (max-width:98rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #masthead .mini-kontakt p:first-child {
    display: none;
  }
}
@media screen and (max-width:87.5rem) {
  /*--- Class ---*/
  .primary-navigation {
    width: 24rem;
  }
  /*---- IDs ----*/
  #masthead > .flexbox {
    background-image: url('../../../../uploads/2021/08/header-background_2.png');
  }
}
@media screen and (max-width:1369px) {
  /*--- Class ---*/
  .tabs, .tabs img, #leistungen .back-weiss p, #leistungen .tabs .flexbox {
    transform: unset;
  }
  .tabulatoren {
    width: calc(100% - 1.33rem);
  }
  /*---- IDs ----*/
  #leistungen {
    padding: 4rem 10vw 5rem 20vw;
  }
  #leistungen .back-weiss {
    min-height: unset;
  }
}
@media screen and (max-width:76rem) {
  /*--- Class ---*/
  .referenz div {
    height: calc(30vw - 2.5rem);
  }
  .referenz p {
    margin-left: -3vw;
    width: 85%;
  }
  /*---- IDs ----*/
  #referenzen {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #kontakt {
    padding-left: 5vw;
  }
  #maps {
    width: 67vw;
    margin-left: -25.5vw;
  }
}
@media screen and (max-width:74rem) {
  /*--- Class ---*/
  .primary-navigation {
    margin-left: 5vw;
  }
  /*---- IDs ----*/
  #masthead .mini-kontakt p {
    display: none;
  }
  #masthead .mini-kontakt p:first-child {
    display: block;
  }
}
@media screen and (max-width:64.5rem) {
  /*--- Class ---*/
  .tabulatoren {
    width: calc(100% - 1.275rem);
  }
  .tabs img {
    left: -5vw;
    top: 3rem;
    height: 15vw !important;
    width: 15vw !important;
  }
  /*---- IDs ----*/
  #leistungen .back-weiss {
    padding: 2rem 5vw 5rem calc(10vw + 1.5rem);
  }
  #leistungen {
    padding-left: 10vw;
    padding-right: 5vw;
  }
}
@media screen and (max-width:63rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #header-foermlich .mini-kontakt p:first-child {
    display: none;
  }
}
@media screen and (max-width:60rem) {
  /*--- Class ---*/
  .kontakt {
    width: 100%;
  }
  .nf-form-content nf-fields-wrap nf-field {
    width: 100% !important;
  }
  .maps {
    display: none;
  }
  /*---- IDs ----*/
  #masthead > .flexbox {
    min-height: 7rem;
  }
  #masthead .mini-kontakt p:first-child {
    display: none;
  }
  #banner h1 {
    width: 48.5vw;
    max-width: none !important;
  }
  #banner .flex-control-nav {
    width: 51vw;
    max-width: none;
  }
  #kontakt {
    padding-right: 5vw;
  }
}
@media screen and (max-width:49rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #logo-img {
    width: 10vw;
    height: 10vw;
    margin: 0.75rem 0 0.75rem 2.5vw;
  }
  #masthead > .flexbox {
    width: 90vw;
  }
  #banner .slides li {
    background-position: -30vw top;
  }
  #banner h1 {
    font-size: 2.25rem;
    width: 65vw;
    bottom: 3rem;
  }
  #banner .flex-control-nav {
    width: 67.5vw;
    bottom: 1rem;
  }
}
@media screen and (max-width:43.875rem) {
  /*--- Class ---*/
  .tabs img {
    display: none;
  }
  /*---- IDs ----*/
  #leistungen {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
  }
  #leistungen .back-weiss {
    padding: 1rem 2.5vw 5rem;
  }
  #leistungen .tabs .flexbox {
    right: 1rem;
  }
}
@media screen and (max-width:768px) {
  /*--- Class ---*/
  .referenz, .referenz:nth-child(3n) {
    width: calc(50% - 4rem);
    margin: 0 2rem 2rem;
  }
  .referenz div {
    height: calc(50vw - 12rem);
  }
  .referenz p {
    width: 90%;
  }
  /*---- IDs ----*/
}
@media screen and (max-width:45rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #header-foermlich .mini-kontakt p {
    display: none;
  }
  #header-foermlich .mini-kontakt p:first-child {
    display: block;
  }
}
@media screen and (max-width:650px) {
  /*--- Class ---*/
  .referenz, .referenz:nth-child(3n) {
    width: 60%;
    margin: 0 auto 2.5rem;
  }
  .referenz div {
    height: 50vw;
  }
  .referenz p {
    width: 92%;
    margin-left: -10vw;
  }
  /*---- IDs ----*/
}
@media screen and (max-width:39.25rem) {
  /*--- Class ---*/
  .tabulatoren, .tabs {
    display: none !important;
  }
  .tab-head-mobile, #leistungen .back-weiss.tabs-mobile {
    display: block;
  }
  /*---- IDs ----*/
}
@media screen and (max-width:37rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #banner h1 {
    font-size: 2.25rem;
    width: 78.5vw;
    bottom: 3rem;
  }
  #banner .flex-control-nav {
    width: 81vw;
    bottom: 1rem;
  }
}
@media screen and (max-width:35rem) {
  /*--- Class ---*/
  .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    left: -55%;
  }
  .primary-navigation .sub-menu .menu-item > a {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  /*---- IDs ----*/
  #banner, #banner .slides li {
    height: 70vw;
  }
  #banner .slides li {
    background-size: auto 100%;
    background-position: -58vw bottom;
  }
}
@media screen and (max-width:33rem) {
  /*--- Class ---*/
  /*---- IDs ----*/
  #header-foermlich img {
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 3.25rem);
    object-fit: contain;
    object-position: center center;
    padding-top: 0.25rem;
  }
  #header-foermlich .mini-kontakt {
    width: 100%;
    height: 9rem;
  }
  #header-foermlich .mini-kontakt p:first-child {
    display: none;
  }
}
@media screen and (max-width:481px) {
  h2 {
    font-size: 1.25rem;
  }
  /*--- Class ---*/
  .menu-button-container #primary-mobile-menu {
    color: var(--blau);
  }
  .primary-navigation .primary-menu-container > ul > .menu-item > a, .primary-navigation .sub-menu .menu-item > a {
    padding: 0.15em 0;
    font-size: 1.15rem;
  }
  .primary-navigation > .primary-menu-container {
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5vw;
    height: max-content;
  }
  .primary-navigation > div > .menu-wrapper {
    padding-bottom: 0;
  }
  .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    display: unset;
    top: 0;
    left: 1rem;
    margin: 0;
  }
  .primary-navigation .sub-menu .menu-item > a {
    color: var(--schwarz) !important;
  }
  .referenz p {
    width: 90vw;
    margin-left: -18vw;
  }
  .foermlich h1.haupt-headline {
    font-size: 1.75rem;
  }
  .foermlich h1 {
    font-size: 1.5rem;
  }
  /*---- IDs ----*/
  #logo-img {
    position: absolute;
    margin: 0;
    left: 7vw;
    top: 0.25rem;
    height: 5rem;
    width: 5rem;
  }
  #masthead > .flexbox {
    width: 100vw;
    min-height: 8rem;
  }
  #banner, #banner .slides li {
    height: 100vw;
  }
  #banner .slides li {
    background-size: auto 100%;
    background-position: -90vw bottom;
  }
  #banner h1 {
    font-size: 1.75rem;
  }
}