/* 
Developer's note:
Were are developing desktop first.
Everything for Desktop View with a viewport of (min-width:1536px) should be enquened before this file and handles in the default style.css.
*/

/* START developer's note expeption: default-resets */
#mobile-menu,
#nav-toggle,
#nav-cancel {
  display: none;
}

/* END developer's note expeption: default-resets */

/* START Tablet (portrait & landscape tablets) */
/* @media (min-width: 768px) and (max-width: 1111px) { */
@media only screen and (min-width:1536px) {

  .honify-backbanner,
  .honify-backbanner-offset,
  #footer-inside {
    margin: 20px calc(-50vw + 50%) 0 calc(-50vw + 50%);
    padding: 25px calc(50vw - 50%) 0 calc(50vw - 50%)
  }

  .honify-backbanner-oversize {
    margin: -2vh calc(-50vw + 50%) 0 calc(-50vw + 50%);
    padding: 25px calc(50vw - 50%) 0 calc(50vw - 50%)
  }
}

@media (max-width: 1535px) {
  #nav-toggle {
    /* display: none; */
    /* float: right; */
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    /* padding: 0 1em; */
    grid-column: 2;
    cursor: pointer;
    -webkit-transition: .25s line-height ease-in-out, .25s height ease-in-out;
    transition: .25s line-height ease-in-out, .25s height ease-in-out;
    line-height: 1.25;
  }

  
  #main {
  padding: 60px 60px;
  }

  #nav-toggle span:before {
    font-family: elusive;    
    content: "\e820";
    font-size: 18pt;
  }

  #nav-cancel {
    grid-column: 2;
    cursor: pointer;
    display: none;
    cursor: pointer;
    font-size: 2em;
    background: none;
    color: var(--honify-dunkelgruen);
    padding: 0;
    justify-self: end;
    align-content: center;
    margin-right: -5px;
    margin-top: 3px;
    font-size: 18pt;
  }


  nav#mobile-menu {
    display: none;
    position: fixed;
    z-index: 999;
    overflow-x: hidden;
    top: 100px;
    left: -100%;
    line-height: 2;
    width: 100%;
    height: 90vh;
    background-color: var(--honify-weiss);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }

  /* nav#mobile-menu>div {
    padding: 111px 1.25em;
    height: auto
  } */

  nav#mobile-menu i {
    font-size: 1.em
  }

  nav#mobile-menu a {
    display: inline;
    font-size: 1.5em;
    font-weight: 300;
    text-decoration: none
  }

  nav#mobile-menu a span {
    display: inline-block
  }

  nav#mobile-menu>div ul li a:not([href]) {
    cursor: default
  }

  nav#mobile-menu>div>ul>li>a {
    position: relative;
    z-index: 9999
  }

  nav#mobile-menu ul li {
    position: relative;
    display: block;
    float: none;
    clear: both;
    white-space: normal;
    line-height: 2;
    text-align: left;
    margin: em -1em;
  }

  nav#mobile-menu ul ul li {
    letter-spacing: px;
    font-size: .85em;
  }

  #mobile-nav ul li a span {
    max-width: 85%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4
  }

  nav#mobile-menu .children,
  nav#mobile-menu .sub-menu {
    display: none;
	width: 100%;
    /* opacity: 0; */
    /* max-height: 0; */
    /* font-size: .95em; */
    /* margin: 0 auto; */
    /* -webkit-transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease; */
    /* transition: .5s max-height ease-in-out, .3s opacity ease-in-out, .3s padding ease */
  }
  

  nav#mobile-menu li:hover>ul.sub-menu {
    display: block;

    /* max-height: fit-content; */
    
  }

  #mobile-menu .menu-main-search {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 70%;
    max-width: 400px;
    margin: 40px auto 0;
    border: none;
    font-size: 1.2em
  }

  #mobile-menu .menu-main-search>a {
    display: none
  }
  .header-search {
    justify-self: center;
    margin-right: -20px;
  }
  

  /* END Tablet styles */
}

/* START Mobile (smartphones) */
@media (max-width: 800px) {
  /* START FOOTER */
  #footer-inside,   #fi-flex-r1,   #fi-flex-r2 {
    justify-content: space-evenly;

  }

  #main {
  padding: 60px 20px;
  }
  
  /* END FOOTER */
}
@media (max-width: 675px) {
  #wpforms-9388 > form#wpforms-form-9388 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "message"
      "gdpr"
      "captcha"
      "submit";
  }
  .search-form-wrapper {
    top: 13px;
    padding: 5px;
    right: -10px;
    transform: translateX(-65px);
    /* width: 100%; */
    background-image: none;
    background-color: #eefdf2;
    border-radius: 45px;
	height: 60px
  }
  .ajax-results {
    margin-top: 34px;
    margin-left: -33px;
    right: 0;
    width: 123%;
  }
}
@media (max-width: 600px) {
  /* Anruf-Button neben SENDEN fixieren */
  .call-us-container {
    top: auto;
    margin-bottom: auto;
    margin-top: 2em;
  }

  #branding {
    zoom: 0.725;
  }

  #site-header-main-inside {
    margin-top: 0.75rem;
  }
}

/* END Mobile Styles */

/* -== START Honify Masonry Specials ==- */

@media only screen and (max-width:840px) {
  .honify-masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1
  }
}

@media only screen and (min-width:841px) and (max-width:1024px) {
  .honify-masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2
  }
}

@media only screen and (min-width:1025px) {
  .honify-masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3
  }
}

/* -== END Honify Masonry Specials ==- */

/* -== BELOW might be Chaos and Dragons ==- */

@media (max-width:640px) {

  #mobile-menu .menu-main-search,
  nav#mobile-menu #nav-cancel {
    margin-top: 60px
  }
}



@media (min-width:1112px) {
  .main .lp-text-title {
    margin-top: 0;
    text-align: left;
    max-width: 40%;
    position: relative;
    z-index: 6
  }

  .lp-right-column {
    position: relative;
    top: -150px;
    left: -1em
  }

  .lp-image {
    max-width: calc(100% + 2em);
    width: calc(100% + 2em)
  }

  .lp-text-content,
  .lp-text-title {
    margin-top: 30px
  }
}

@media only screen and (min-width:1024px) {
  aside.top-widget-area {
    display: none
  }

  .honify-document {
    max-width: 1024px;
    margin: 0 256px;
  }
}

@media (max-width:1456px) {

  .cryout #site-title a span {
    padding-right: 0
  }

  .cryout #nav-toggle {
    display: block;
    justify-self: end;
    align-content: center;
    margin-right: -25px;
  }

  .cryout #site-header-main-inside {
    display: grid;
    grid-template-columns: auto 66pt 66pt;
  }

  #masthead.cryout #access {
    display: none
  }

  #masthead {
    backdrop-filter: blur(5px);
  }

  .cryout #branding {
    margin: 0 0px;
  }
}

@media (min-width:641px) and (max-width:882px) {
  body.admin-bar nav#mobile-menu {
    top: 46px
  }
  

/* Responsiveness fuer KONTAKTFORMULAR 2.0 */
  .contact-modal {
    font-family: Avenir;
    display: none;
    position: fixed;
    z-index: 9998;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: var(--honify-dunkelgrau);
    backdrop-filter: blur(3px)
    }

    .modal-content {
    font-family: Avenir;
    background-color: var(--honify-weiss);
    padding: 20px;
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0,0,0,.1);
    width: 90%;
    max-width: 600px;
    position: fixed;
    top: 80px;
    right: 1.2rem;
    bottom: 1.2rem;
   overflow-y: auto;
    transition: opacity .3s ease,transform .3s ease
    }

/* Responsiveness fuer KONTAKTFORMULAR 2.0 ENDE */

  #container.two-columns-right .main,
  #secondary {
    width: 100%;
    clear: both
  }
}

@media (max-width:640px) {
  body.admin-bar nav#mobile-menu {
    top: 0
  }

.contact-button {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  margin-left: 1.5rem;
  line-height: 1.5;       /* Zeilenhöhe auf 1 setzen */
  height: 5rem;         /* feste Höhe, z.B. 4rem */
  overflow: hidden;     /* alles außerhalb abschneiden */
  cursor: pointer;
  z-index: 251;
}

#inactivityText.visible, #contactToggle:hover #inactivityText {
  margin-top: -5px;
	max-width: 90%;
}


.contact-modal {
  font-family: Avenir;
  display: none;
  position: fixed;
  z-index: 9998;
  padding-top: 80px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  /* background-color: var(--honify-dunkelgrau); */
  color: var(--honify-dunkelgrau);
  /* background: rgba(234, 252, 239, 0.8); */
  backdrop-filter: blur(3px);
}

.modal-content {
  font-family: Avenir;
  background-color: var(--honify-weiss);
  padding: 20px;
  border-radius: 45px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 600px;
  position: fixed;
  top: 80px;
  right: 1.2rem;
  bottom: 1.2rem;
  overflow-y: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


  #container.two-columns-right .main,
  #secondary {
    width: 100%;
    clear: both;
    padding: 1em;
  }

  .cryout .socials a {
    font-size: 1.2em;
    margin: 0 .15em
  }
}


@media (max-width:960px) {
  .lp-section-header .lp-section-title {
    max-width: 100%
  }
}