/* schwachmaten laptop etc */
@media (min-width: 2000px) {
    body {
        -border: 1px solid rgb(0, 229, 255); /* or any other debugging style you prefer */
    }

    .referenzen-image {
        margin-bottom: -6em;
    }
}

@media screen and (max-width: 1700px) and (max-height: 900px) {
    body {
        -border: 1px solid rgb(0, 235, 129); /* or any other debugging style you prefer */
    }  
}

@media (max-width: 1440px) and (max-height: 1200px) {
    body {
        -border: 1px solid rgb(0, 235, 129); /* or any other debugging style you prefer */
    }
}  

/* tablet portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    body {
        -border: 1px solid red; /* or any other debugging style you prefer */
    }

    .hero-image {
        position: absolute;
        content: '';
        z-index: 6 !important;
        height: 100vh;
        width: 90%;
        left: 10%;
        margin-top: -2vh;
        left: clamp(0px, calc((100vw - 1440px - 0px) / 2), 9999px);
      }
  }

  /* tablet landscape */
  @media only screen and (min-device-width: 1365px) and (max-device-width: 1367px) and (orientation: landscape) {
    body {
        -border: 1px solid rgb(44, 255, 2); /* or any other debugging style you prefer */
    }
  }

@media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
    body {
        -border: 1px solid red; /* or any other debugging style you prefer */
    }

    .hero-main-container {
        height: 60%;
        margin-top: 7rem;
    }

}

/*   @media (-webkit-device-pixel-ratio: 1.25) {
    * {
      zoom: 0.4;
    }
  } */


@media (max-width: 1600px) {
    body {
      -border: 1px solid red; /* or any other debugging style you prefer */
    }

    html {
        font-size: 19px;
    }

    .hero-main {
        padding-left: 4em;
        padding-right: 4em;
    }

    .hero-addon {
        padding-left: 4em;
        padding-right: 4em;
    }

    .navigation-container {
        padding-left: 4em;
        padding-right: 4em;
    }

    .section-container, .sub-footer-container {
        padding-left: 4em;
        padding-right: 4em;
    }
}

@media (max-width: 1440px) {
    body {
      -border: 1px solid orange; /* or any other debugging style you prefer */
    }

    html {
        font-size: 16px;
    }

    .section-container, .sub-footer-container {
        max-width: 100%;
        width: 100%;
    }

    .card-container {
        width: 100%;
    }

    .referenzen-image {
        bottom: -8vh;
    }

    .footer-image {
        background-position: 100% 50%;
        background-size: 50%;
        max-width: 80%;
        height: 100%;
    }
}

@media (max-width: 1280px) {
    body {
      -border: 1px solid pink; /* or any other debugging style you prefer */
    }

    html {
        font-size: 16px;
    }

    .referenzen-image {
        bottom: -8vh;
    }

    .footer-image {
        background-position: 100% 50%;
        background-size: 50%;
        max-width: 80%;
        height: 100%;
    }
}




@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation : portrait) {
    body {
        -border: 2px solid rgb(0, 255, 170);
    }

}


@media only screen and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation : portrait) {

    body {
        -border: 2px solid rgb(0, 255, 170);
    }

    html {
        font-size: 10px;
    }

    .hero-main, .navigation-container, .hero-addon, .section-container, .sub-footer-container {
        padding-left: 3em;
        padding-right: 3em;
    }

    .sub-footer-container {
        flex-wrap: wrap;
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .sub-footer-container h6 {
        margin-bottom: 1em;
        width: 100%;
    }

    .blackcloud-logo {
        cursor: pointer;
        height: 32px;
        opacity: 0.4;
        transition: all 0.4s ease-in-out;
    }

    .col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{
        width: 100%;
        max-width: 100%;
        flex: 100%;
    }

    p {
        font-size: 1.6rem;
    }

    h1 {
       line-height: 1.2;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 2em;
        line-height: 1.4;
        color: 212528;
        font-weight: 400;
    }

    h5 {
        font-size: 1.8rem;
        margin-top: 2em;
    }
    h6 {
        font-size: 1.6rem;
    }

    .logo {
        width: 40px;
        transition: all 0.8s ease-in-out;
    }

    .hamburger {
        display: inline-block;
        cursor: pointer;
        -padding: 10px;
        transition: transform 0.5s;
    }
      
    .hamburger span {
        display: block;
        width: 32px;
        height: 3px;
        margin-bottom: 6px;
        background-color: #dadddf;
        transition: transform 0.5s, opacity 0.5s;
    }
      
    .hamburger span:last-child {
        margin-bottom: 0;
    }

    .hamburger.active span:first-child {
        transform: translateY(9px) rotate(45deg);
    }
      
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
      
    .hamburger.active span:last-child {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero {
        display: flex;
        -height: 100vh;
        -background: rgba(23, 97, 126, 1);
        -border: 4px solid red;
        height: 130vh;
        height: auto;
        -height: 100%;
        align-content: flex-start;
    }

    .hero-main {
        height: 60vh;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        -padding: 4em 4em 0 4em;
        justify-content: center;
        -border: 4px solid greenyellow;
        height: auto;
    }

    .hero-addon {
        -height: 39.2%;
        height: auto;
        background: linear-gradient(400deg, #101518 0%, #272123 90%);
        -border: 3px solid green;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .hero-main-container {
        display: flex;
        width: 100%;
        z-index: 100;
        margin-top: 0;
        padding: 2em 0 8em 0; 
        background: none;  
        justify-content: flex-start; 
        height: auto;
    }

    .hero-image {
        background: none;
    }

    .hero-image {
        height: auto;
        width: 100%;
        max-width: 100%;
        margin-top: 4vh;
        position: relative;
        padding-left: 0em;
    }

    .hero-main-text {
        text-align: left;  
    }

    .hero-sub-text {
        width: 100%;
        text-align: left;
        margin-top: -2em;
        line-height: 1.5;
        font-family: 'PT Sans', sans-serif;
    }

    .hero-call-action {
        width: 64%;
        text-align: left;
        margin-top: 0.4em;
        font-size: 2em;
    }

    nav {
        height: 70px;
        opacity: 1;
        z-index: 1000 !important;  
        -background-color: #101518;
        transition: all 0.5s;
    }

    .nav-set-color {
        background-color: #101518;
        transition: all 0.5s;
    }

    .navigation-container {
        -background-color: cornflowerblue;
    }

    .menu {
        height: 100vh;
        width: 100%;
        position: fixed;
        right: -100%; /* position it outside of the window */
        top: 70px;
        bottom: 0;
        transition: all 0.5s ease-in-out; /* animate the slide-in/out effect */
    }

    .menu.show {
        transition: all 0.5s ease-in-out;
        right: 0; 
    }

    .mobile-additional-menu {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        bottom: 20%;
        padding: 3em;
        width: 100%;
        height: 30%;
        justify-content: flex-end;
        align-content: flex-start;
    }

    .menu-add {
        text-align: right;
        width: 80%;
        display: inline-block;
        font-size: 1.6rem;
        color: #bdc0c2;
        line-height: 1.3;
    }
    
    .menu.show li {
        opacity: 1; /* hide the li elements initially */
        -transform: translateX(-200px); /* move the li elements to the right */
        transition: all 0.5s ease-in-out; /* animate the slide-in effect */
    }
      
    .menu.show li:nth-child(1) {
        transition-delay: 0.1s; /* add a delay of 0.1s to the first li element */
    }
      
    .menu.show li:nth-child(2) {
        transition-delay: 0.2s; /* add a delay of 0.2s to the second li element */
    }
      
    .menu.show li:nth-child(3) {
        transition-delay: 0.3s; /* add a delay of 0.3s to the third li element */
    }
      
    .menu.show li:nth-child(4) {
        transition-delay: 0.4s; /* add a delay of 0.4s to the fourth li element */
    }

    .menu.show li:nth-child(5) {
        transition-delay: 0.5s; /* add a delay of 0.4s to the fourth li element */
    }

    .menu ul {
        flex-direction: column;
        background-color: #101518;
        -height: 100vh;
        -background-color: rgb(16, 184, 38);
        padding: 3em;
        width: 100%;
    }

    .menu ul::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 3em;
        bottom: 13%;
        right: 2em;
        width: 30%;
        height: 30%;
        background-image: url("../img/logo_menu.png");
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center center;  
    }

    .menu li {
        position: relative;
        width: 100%;
        text-align: right;
        margin: 10px 0;
        -background-color: aquamarine;
        -right: -200px;
        opacity: 0;
        opacity: 1;
    }
  
    .menu a {
        color: white;
        text-decoration: none;
        display: block;
        -padding: 2px 0;
        font-size: 2.6em;
    }  

    .no-scroll {
        overflow: hidden;
    }

    .show-menu {
        -display: flex;
        transition: all 1.5s;
    }

    .section-main-container {
        width: 100%;
        height: auto;
    }

    .section1-height   {
        height: auto;
    }

    .h4-minus-margin {
        margin-top: 0;
      }

    .section1-image {
        display: flex;
        align-items: flex-end;
        align-content: flex-end;
        margin-left: 0;
        z-index: 4;
        width: 100%;
        max-width: 100%;
        height: 100%;
        -background: green;
        overflow: hidden;
        position: relative;
        margin-top: -4em;
    }

    .section1-image img {
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .footer-image {
        background-size: 80%;
        background-size: 20%;
        max-width: 100%;
        max-width: 50%;
        width: 100%;
        width: 50%;
        bottom: 0;
        left: 0;
        margin-left: 0;
        z-index: 4;
        height: 100%;
        height: 50%;
    }

    .card-container {
        flex-wrap: wrap;
    }

    .card {
        width: 100%;
    } 

    .referenzen-image {
        display: none;
    }

    .logo-footer {
        width: 20%;
    }

    .icon-social, .icon-social-footer {
        padding-right: 2em;
    }

    label, input, textarea {
        font-size: 2rem;
    }

    label {
        padding-left: 0em;

    }

    input, textarea {
    padding: 0.6em;
    margin-bottom: 1em;
    }

/*      #scroll-to-top {
        background-color: red;
        width: 80px;
        height: 80px;
    }  */

    #scroll-to-top i {
        font-size: 2.4rem;
        padding: 0.4rem 0.6rem;
    }

    .card-container .card {
        height: auto;
        margin-bottom: 1em;
    }

    .card-container h4 {
        -background-color: red;
        font-size: 2.4rem;
        margin-bottom: 1em;
        height: auto;
    }

    .card-container .card-subtitle {
        -background-color: rgb(36, 169, 80);
        font-size: 1.8rem;
    }
    .card-container .card-body {
        -background-color: rgb(36, 169, 80);
        -width: 80px;
    }
    
    #standort {
        margin-top: 2em;
        margin-bottom: -0.2em;
    }

    #myForm button {
        font-size: 2rem;
        padding: 0.6em;
        width: 100%;
        width: auto;
        text-align: left;
        margin-top: 0.2em;
    }

    #myForm textarea {
        height: 10rem;
    }



    .scroll-div.small {
        padding: 0.8em;
        width: 54px;
        height: 45px;
        -background-color: #225e92;
        color: #dadddf;
        transition: all 0.8s ease-in-out;
        border-radius: 9px 0 0 9px ;
    }

    .hand.enlarge {
        height: 90%;
        width: 90%;
        padding-left: 0.5em;
    }

    .expandable p {
        font-size: 1.4rem;
        margin-bottom: 1em;
    }

    .container-faq {
        padding-bottom: 16px;
        margin-top: 1.2em;
    }

    #messageReply {
        font-size: 2rem;
    }

    .cookie-consent {
        width: calc(100% - 6.2em);
        right: 0;
        bottom: 0;
        padding-left: 3em;
        padding-right: 3em;
    }

    .cookie-consent p {
        font-size: 1.6rem;
    }

    .cookie-consent button {
        font-size: 1.6rem;
      
    }

    .video-frame {
        top: 10%;
        top: 50%;
        left: 5%;
        left: 5%;
        max-width: 100%;
        max-height: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translate(-2.5%, -40%);
      }
      
      .video-frame video {
        width: 100%;
        max-height: 100%;
      }
      
      .close-button {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 20px;
      }

      .floating-img {
        display: none;
        height: 300px;
        width: auto;
        position: absolute;
        bottom: 90%;
        left: 50%;
        transform: translate(-50%, 0);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        display: none;
        left:0;
        bottom:0;
        height: 0;
        width: 0;
      }

}