/** Die styles für den button wurden zu navSettings.css verschoben **/


.dark-mode {
/*filter: grayscale(100%) brightness(80%);
  /* Weitere allgemeine Stile für den Dark Mode */
  /*background-color: #000!important; /* Dunkler Hintergrund */
  color: #ddd; /* Hellere Textfarbe */
}


/*.dark-mode * {
  background-color: red;
}*/


.dark-mode body {
  background-color: #000;
}


.dark-mode .page {
    border-bottom: 5px solid #FFF!important;
    background-color: #000;
  }

.dark-mode a {
  color: #FFF; /* Hellere Linkfarbe */
}


.dark-mode h1 {
  color: #FFF!important;
}



.dark-mode img {
  filter: grayscale();
}



.dark-mode nav {
    background-color: #000;
    position: fixed;
  /*  filter: grayscale(100%) brightness(80%);*/
  /*border-bottom: 3px solid #FFF;*/
  }


.dark-mode #logoIcon {
  border: 3px solid #FFF;
  border: none;
  color: #FFF!important;
}
.dark-mode #logoIcon img{
filter: grayscale();
}


.dark-mode #logoIcon span {
  color: #FFF!important;
}

  .dark-mode .fa-solid {
    color: #FFF;
  }



    .dark-mode nav #menuBtn {
        filter: grayscale(100%);
      }

      .dark-mode #navSettings {
        background-color: #000!important;
      }


      .dark-mode .linksConatiner {
        background-color: #000!important;
      }

  .dark-mode #navSettingsBtn {
    color: #FFF;
  }
  .dark-mode a {
   color: #FFF;
    }



  .dark-mode .page1-container {
    background: url("../img/OnPageImages/hintergrundDarkmode.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: grayscale();
  }



  .dark-mode .page1-container .grid-item-View {
    background-color: rgba(0, 0, 0, 0.6);
    border: 8px solid #000;
    border: none;
  }


  .dark-mode .page1-container .grid-item .displayFlexInItem .page1Heading h1 {
    color: #efefef;
  }


  .dark-mode .page1-container .grid-item .displayFlexInItem .page1Heading #gmbhRotate {
    color: #efefef;
  }


  .dark-mode .page1-container .grid-item h2 {
    color: #efefef;
  }


  .dark-mode .page1-container .grid-item .dispalyFlexH3 h3 {
    color: #efefef;
  }


  .dark-mode .page1-container .grid-item .subH3 {
    color: #efefef;
  }



  .dark-mode .page1-container .arrowBtn {
    background-color: rgba(0, 0, 0, 0.7);
  }







    .dark-mode #about .aboutPage {
      background-color: #000;
      color: #FFF;
    }








  .dark-mode #about .aboutPage .aboutPageImageContainer {
    filter: invert();
  }



  .dark-mode #services {
    background-color: #000;
    color: #FFF;
  }


  .dark-mode #services .buttonMore {
    background-color: #FFF;
    border: #FFF;
    color: #000;
  }




  .dark-mode #references {
    background-color: #000;
    color: #FFF;
  }


  .dark-mode #references .buttonMore {
    background-color: #FFF;
    border: #FFF;
    color: #000;
  }



  .dark-mode #contact {
    background-color: #000;
    color: #FFF;

  }


  .dark-mode #contact .contact-container {
  border: 5px solid #FFF;
  }



  .dark-mode #contact .contact-container .contact-item:last-child {
    border-left: 5px solid #FFF;
  }


.dark-mode #contact .contact-container #errorBox {
  color: #FFF!important;
  border: 3px solid #FFF!important;
}


  .dark-mode #contact .contact-container .contact-item:last-child input {
    border: 3px solid #FFF;
  }

  .dark-mode #contact .contact-container .contact-item:last-child input::placeholder {
    color: #FFF;
  }


  .dark-mode #contact .contact-container .contact-item:last-child textarea {
    border: 3px solid #FFF;
  }

  .dark-mode #contact .contact-container .contact-item:last-child textarea::placeholder {
    color: #FFF;
  }


  .dark-mode #contact .contact-container #dropZone {
     background-color: #000!important;
  }

  .dark-mode #contact .contact-container .contact-item:last-child button {

    border: 5px solid #FFF;

    color: #FFF;
  }







    .dark-mode #contact .contact-container .contact-list .rotatedSquare {
      background-color: #FFF;
    }


    .dark-mode #contact .contact-container .contact-list .rotatedSquare .fa-solid {
      color: #000;
    }

    .dark-mode #contact .contact-container .contact-list h3 {
    color: #FFF;
    }


    .dark-mode #contact .contact-container .contact-list p {
    color: #FFF;
    }



      .dark-mode #contact .contact-container .contact-list a {
      color: #FFF;
      }


      .dark-mode #contact .contact-container .contact-list a:hover {
      background-color: grey;
      }



      .dark-mode .footerPage {
        background-color: #000;
      }

    .dark-mode #expandButton {
   text-decoration: underline;
      }


    .dark-mode #downloads p {
      color: #FFF;
      }


    .dark-mode #visitenkarteDownload {
      border: 3px solid #FFF;
      }


      .dark-mode #visitenkarteDownload .fa-solid {
      color: #FFF;
      }


    .dark-mode #visitenkarteDownload:hover  {
        border: 5px solid #FFF;

      }

    .dark-mode #visitenkarteDownload:hover .fa-solid {
      color: #FFF;
      }


.dark-mode #expandButton {
  background-color: #FFF;
  color: #000;
  text-decoration: none;
}


.dark-mode #map-iframe-container{
  filter: grayscale();
}



      .dark-mode .footerPage .footer {
        background-color: #000;
        border-top: 3px solid #FFF;
        color: #FFF!important;
      }




      .dark-mode .footerPage .footer h1 {
        color: #FFF;

      }

      .dark-mode .footerPage .footer h2 {
        color: #FFF;

      }



    .dark-mode .footerPage .footer .footer-box .footer-item h2{
        color: #FFF;
      }


      .dark-mode .footerPage .footer .footer-box .footer-item p {
        color: #FFF;
      }


      .dark-mode .footerPage .footer .footer-box .footer-item a {
        color: #FFF;
      }


    .dark-mode .subFooter {
    background-color: #FFF;
    height: 1px;
}




      /**COOKIE BANNER*/

    .dark-mode #cookieBanner.light {
    background-color: #000;
    color: #FFF;
    filter: grayscale(100%);
    }



    .dark-mode #cookieBanner.light p, #cookieBanner.light ul {
    color: #FFF;
    }



    .dark-mode #cookieBanner.light a {
    color: #FFF!important;
}


.dark-mode #cookieBanner .btn-wrap button {
    background-color: #FFF!important;
    color: #000!important;
  }



  /*.dark-mode #cookieBanner svg {
    background-color: #FFF!important;
    color: #000!important;
}*/







    /*filter: grayscale(100%) brightness(80%)
  }
/* Hier kannst du weitere spezifische Stile für den Dark Mode hinzufügen */