html{overflow-x: hidden;}
    body{margin: 0;background: #181818;font-family: sans-serif;line-height: 1.4;overflow-x: hidden;font-size: 16px;}
    a{text-decoration: none;color:black}

    header{display:flex;width:100%;height:100px;background-color: #f1f1f1;z-index: 999;position: fixed;align-items: center;justify-content: space-between;transition: all 0.5s ease-out;}
    .nav_logo{width: 160px;margin-left: 80px;transition: all 0.5s ease-out;}
    .nav_text{margin-right: 80px;}
    .nav_text ul{list-style: none;margin: 0;padding: 0;display: flex;align-items: center;}
    .nav_text a{padding: 10px 20px;margin: 0 5px;}
    .nav_text a:hover{background-color: #846036;cursor: pointer;color: #f1f1f1;border-radius:10px;}
    .nav_logo svg{fill: #181818;}
    .nav_logo svg:hover{fill: #e1b27a;cursor: pointer;}
    .scrolling{height:70px;transition: all 0.5s ease-out;}
    .scrolling .nav_logo{width: 120px;transition: all 0.5s ease-out;}
    
    .half{width: 100%;display: grid;grid-template-columns: 1fr 1fr;position: sticky;}
    .half_image{width: 100%;height: 500px;background-size: cover;background-repeat: no-repeat;background-position: center;background-attachment: fixed;}
    .half_image.pos{grid-column: 1 / 3;height: 700px;}
    .half_text{height: 500px;width: 100%;display: flex;align-items: center;}
    .half_text.pos{position: absolute;width: 50%;height: 100%;right: 0;bottom: 0;}
    .dark{background-color: #181818;color: #f1f1f1;}
    .dark_tran{background: #181818cc;color: #f1f1f1;}
    .light{background-color: #f1f1f1;color: #181818;}
    .content_area{padding: 0 150px;line-height: 1.75;}
    .color_button_1{border: none;background: #e1b27a;color: #181818;font-weight: 600;padding: 15px 40px;border-radius: 10px;}
    .color_button_1:hover{background: #846036;color: #f1f1f1;}

    .nxsite{height:70vh;}
    .image_banner{width: 100%;height: 100vh;background-size: cover;background-repeat: no-repeat;background-position: center;background-attachment: fixed;display: flex;align-items: center;justify-content: center;overflow: hidden;}
    .banner_content{display: grid;justify-items: center;width: 50%;}
    .banner_content h1{margin: 0;text-shadow: 5px 5px 5px black;color: #f1f1f1;text-transform: uppercase;font-size: 2em;text-align: center;}
    .banner_content h2{margin: 0;text-shadow: 5px 5px 5px black;color: #e1b27a;text-transform: uppercase;font-size: 4em;text-align: center;}

    .image_banner_img{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;min-height: 90vh;overflow: hidden;}
    .image_banner_video {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.5);
}
    .image_banner_img .bg_image{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;z-index: 0;filter: brightness(0.5);}
    .banner_content_img {position: relative;z-index: 1;color: #ffffff;max-width: 800px;padding: 0 20px;}
    .banner_content_img h1{margin: 0;text-shadow: 5px 5px 5px black;color: #f1f1f1;text-transform: uppercase;font-size: 2em;text-align: center;}
    .banner_content_img h2{margin: 0;text-shadow: 5px 5px 5px black;color: #e1b27a;text-transform: uppercase;font-size: 4em;text-align: center;}
    .color_button_2{text-align: center;margin-top: 80px;border: 3px solid #e1b27a;background: #0000007a;color: #f1f1f1;padding: 15px 40px;border-radius: 10px;text-transform: uppercase;transition: all 0.2s ease-out;cursor: pointer;width: 70%;font-size: 16px;font-weight: 600;font-family: sans-serif;display: inline-block;}
    .color_button_2:hover{transition: all 0.3s ease-out;background-color: #e1b27a;color: #181818;}


    .shortInfo{display: grid;grid-template-columns: repeat(3, 1fr);justify-items: center;margin: 25px 150px;}
    .shortInfo .detailInfo{display: grid;justify-items: center;}
    .detailInfo img{margin-bottom: 10px;}
    .detailInfo .number{font-size: 3em;}
    .detailInfo .text{font-size: 1.3em;}

    .about{padding: 100px 150px;display: flex;height: auto;}
    .about .content{width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr;position: sticky;}
    .person{height: auto;width: 100%;display: grid;grid-column: 1 / 2;justify-items: center;align-content: center;}
    .person .image{padding: 0;border-radius: 100%;background-size: cover;background-repeat: no-repeat;background-position: top;height: 200px;width: 200px;}
    .person strong{margin-top: 15px;}
    .about .text{height: auto;grid-column: 2 / 4;}
    .about .content_area{padding: 0;}

    .client{padding: 50px 75px;display: flex;height: auto;}
    .client .content{width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr;position: sticky;}
    .client svg{padding: 30px;width: 80%;height: auto;}

    .speedInfoBox{box-sizing: border-box;padding: 50px 100px;display: grid;grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));grid-template-rows: repeat(auto-fit, minmax(0px, 1fr));}
    .speedInfo{display: grid;justify-items: center;align-content: center;margin: 40px 80px;}
    .speedInfo svg{width: 85px;height: 85px;fill: #ffffff;}
    .speedInfo h3{text-align: center;color: #e1b27a;}
    .speedInfo p{text-align: center;margin: 0;}

    .kontaktBox{height: auto;padding: 100px 300px;}
    .kontaktBox h3{color: #181818;background-color: #f1f1f1;}
    .moreKontakt{color:rgb(0, 0, 0);}
    .moreKontakt:hover{color: #e1b27a;}
    .kontaktBox fieldset{display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 20px;margin: 0;padding: 0;}
    legend{visibility: hidden;}
    .kontaktBox .form-group.drop{grid-column: 1 / 3;}
    .kontaktBox .form-group.text{grid-column: 1 / 3;}

    .vBoxSize{height: auto;padding: 0 150px;display: flex;box-sizing: border-box;}
    .faq-container{width: 100%;max-width:800px;margin: auto; padding: 40px 0;}

    
input[type="checkbox"] {
    display: none; /* Verstecke die Standard-Checkbox */
}

input[type="checkbox"] + label {
    position: relative;
    padding-left: 30px; /* Platz für das benutzerdefinierte Design */
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    line-height: 1.5;
    transition: all 0.3s ease;
}

input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #f1f1f1;
    border: 2px solid #181818;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

input[type="checkbox"]:checked + label::before {
    background-color: #e1b27a; /* Blau, wenn ausgewählt */
    border-color: #e1b27a;
    box-shadow: 0 0 8px rgba(225, 179, 122, 0.6);
}

input[type="checkbox"]:checked + label::after {
    content: '✓'; /* Häkchen-Symbol */
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #f1f1f1;
}

input[type="checkbox"]:hover + label::before {
    border-color: #e1b27a;
}

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 6px rgba(225, 179, 122, 0.8); /* Fokus-Effekt */
}

sup{font-weight: normal;font-size: 11px;}
    


    .social-sidebar {position: fixed;top: 50%;left: 20px;transform: translateY(-50%);display: flex;flex-direction: column;gap: 10px;z-index: 1000;}
    .social-btn {display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;background: #282828cc;color: white;text-decoration: none;border-radius: 100%;transition: background 0.3s ease;}
    .social-btn:hover {background: #555;}
    #scrollTopBtn {position: fixed;bottom: 30px;right: 30px;z-index: 980;background-color: #e1b27a;color: white;border: none;padding: 12px 16px;border-radius: 50%;cursor: pointer;display: none;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);transition: background-color 0.3s ease;}
    #scrollTopBtn:hover {background-color: #846036;}
    form {margin: auto;background: none;padding: 20px;border: none;}
    fieldset {border: none;}
    .form-group {margin-bottom: 16px;}
    label {display: block;margin-bottom: 5px;font-weight: bold;}
    input, textarea, select {width: 100%;padding: 10px;border: 2px solid #181818;border-radius: 4px;background-color: #f1f1f1;color: #181818;box-sizing: border-box;font-family: sans-serif;}
    input:focus, textarea:focus, select:focus {outline: 2px solid #e1b27a;border-color: #e1b27a;background-color: #e1b27a22;}
    button {background-color: #e1b27a;color: #fff;border: none;padding: 12px 20px;border-radius: 4px;cursor: pointer;}
    button:hover, button:focus {background-color: #e1b27a;outline: none}
    .invalid {border-color: #ff0000;background-color: #fff0f0;}
    .form-help {font-size: 0.9em;color: #555555;}
    .form-help-error {color: #ff0000;font-weight: bold;}
    option {background-color: white;color: #000000;}
    option:hover {background-color: #e1b27a;color: #000000;}
    .mobile-nav, .menu_bnt, .overlay, #moreSocialSidebar{display:none;}

    .message {padding: 1em;border-radius: 5px;}
    .message.success {background-color: #e1b27a;color: #181818;}
    .message.error {background-color: #ffdddd;color: #900;border: 1px solid #f5c2c2;}

    .scroll_text_left {opacity: 0;transform: translateX(-100px);transition: all 1s ease-out;}
    .scroll_text_left.show {opacity: 1;transform: translateX(0);}

    .scroll_text_right {opacity: 0;transform: translateX(100px);transition: all 1s ease-out;}
    .scroll_text_right.show {opacity: 1;transform: translateX(0);}

@media screen and (max-width: 1350px){
    .banner_content{width: 80%;}

    .shortInfo{margin: 25px auto;width: 90%;}
    .detailInfo .number{font-size: 30px;}
    .detailInfo .text{font-size: 17px;text-align: center;}

    .half_image{height: auto;}
    .half_image.pos{height: 500px;}
    .half_text{height: auto;padding: 50px 0;}
    .half_text.pos{width: 100%;height: 100%;box-sizing: border-box;}
    .content_area{padding: 30px 80px;}

    .about{padding: 50px 5%;}

    .speedInfoBox{grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));}
    .speedInfo{margin: 30px 20px;}

    .kontaktBox{padding: 40px 80px;}
}


@media screen and (max-width: 800px){

    .shortInfo{margin: 25px auto;width: 90%;}
    .detailInfo img{width: 50px;height: 50px;}
    .detailInfo .number{font-size: 25px;}
    .detailInfo .text{font-size: 12px;text-align: center;}

    .nxsite{height:60vh;}
    .banner_content{width: 90%;}
    .nxsite .banner_content h1{font-size: 15px}
    .nxsite .banner_content h2{font-size: 40px;} 

    .half{display: block;}
    .half_image{height: 200px;}
    .half_image.pos{height: 750px;}
    .half_text{height: auto;padding: 50px 0;}
    .half_text.pos{width: 100%;height: 100%;box-sizing: border-box;}
    .content_area{padding: 0 5%;}

    .about{padding: 50px 5% 0;}
    .about .content{display: block;}
    .about .color_button_1, .kontaktBox .color_button_1{width:100%;}

    .client{padding: 25px;}
    .client .content{display: grid;justify-items: center;grid-template-columns: 1fr;}

    .speedInfoBox{grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));grid-template-rows: repeat(auto-fit, minmax(0px, 1fr));padding: 0;}
    .speedInfo{margin: 35px 90px;}
    .speedInfo svg{width: 60px;height: auto;}
    .speedInfo h4{font-size: 18px;}
    .speedInfo p{font-size: 15px;}

    .kontaktBox{padding: 75px 5%;}
    .kontaktBox fieldset{display: block;}

    #scrollTopBtn{bottom: 140px;transition: bottom 0.3s ease;}
    #moreSocialSidebar{display: block;position: fixed;right: 30px;z-index: 980;background-color: #e1b27a;border: none;border-radius: 50%;bottom: 90px;box-sizing: border-box;padding: 10px;cursor: pointer;display: flex;}
    #moreSocialSidebar svg{fill: #ffffff;width: 24px;height:24px;}
    .social-sidebar{top: unset;bottom: 140px;right: 30px;left: unset;transform: none;transition: all 0.3s ease;display: none;}
    .social-btn{width: 44px;height: 44px;}
    .social-sidebar.active {bottom: 140px;opacity: 1;pointer-events: auto;transform: translateY(0);display: flex;}

    .vBoxSize{height: auto;padding: 0 25px;display: flex;box-sizing: border-box;}
    .faq-container{width: 90%;margin: auto; padding: 40px 0;}

    .nav_logo{margin-left: 5%;}
    .menu_bnt {width: 80px;display: flex;height: 80px;align-items: center;justify-content: center;margin-right: 5%;}
    .menu_bnt svg{width: auto;height: 35px;}
    .nav_text{display:none;}
    .mobile-nav {position: fixed;top: 0;right: -100%;width: 60%;height: 100%;background: #000000BF;padding: 2rem 1rem;transition: left 0.3s ease;z-index: 1001;display: block;}
    .mobile-nav .close-btn {background: none;border: none;font-size: 2rem;position: absolute;top: 1rem;right: 1rem;cursor: pointer;color: #FFFFFF;}
    .mobile-nav ul {list-style: none;padding: 0;}
    .mobile-nav .nav {height: 45px;margin: 1rem 0;width: 100%;border-radius: 10px;}
    .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(5px);background: rgba(0, 0, 0, 0.4);opacity: 0;visibility: hidden;transition: opacity 0.3s ease;z-index: 1000;display: block;}
    .overlay.active {opacity: 1;visibility: visible;}
    .mobile-nav.active {right: 0;}
    .mobileLogo{display: grid;justify-items: center;}
    .mobileLogo a{width: 70%;margin: 50px 0;}
    .mobileLogo svg{fill:#ffffff;}
    .mobile-nav .nav a {text-decoration: none;color: #FFFFFF;width: 90%;display: flex;height: 100%;align-items: center;justify-content: flex-start;padding-left: 20px;}
    .mobile-nav .nav svg{width:23px;height:23px;}
    .mobile-nav .nav span {font-size: 20px;margin-left: 15px;}
}


/* Safari: überschreibt mit scroll */
@supports (-webkit-touch-callout: none) {
  .half_image {
    background-attachment: scroll;
  }
}

div.half_image_p{-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  top: 0;
background-image: url(image/party.jpeg);}

.stycky{margin-top: -100vh;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, red, blue);
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 0;}