@media (prefers-color-scheme: dark) {
  
  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Global ////////////////////////
  //////////////////////////////////////////////////////////////
  */

  body {
    color:#ffffff;
    background-color:#2D2F33;
  }

  h1 {
    color:#E27B0A;
  }

  h2 {
    color:#E27B0A;
  }

  h3 {
    color:#E27B0A;
  }

  a {
    color:#E27B0A;
  }

  a:hover {
    color:#ffffff;
  }

  .highlightText {
    color:#055D9A;
  }


  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Input Felder //////////////////
  //////////////////////////////////////////////////////////////
  */

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#ffffff;
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:rgba(255,255,255, 0.5);
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color:rgba(255,255,255, 0.5);
  }

  select {
    border:1px solid #E27B0A;
    background-color:#2D2F33;
    color:#ffffff;
  }

  input {
    border:1px solid #E27B0A;
    background-color:#2D2F33;
    color:#ffffff;
  }

  textarea {
    border:1px solid #E27B0A;
    background-color:#2D2F33;
    color:#ffffff;
  }





  @keyframes releaseButtonDark {
    from {
      margin-top: 0.25em;
      
      -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
         -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
              box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
    } to {
      margin-top: 0em;

      -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
         -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
              box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
    }
  }

  input[type=submit] {
    animation-duration: 0.25s;
    animation-name: releaseButtonDark;

    background-color:#055D9A;
    color:#ffffff;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
  }

  @keyframes pressButtonDark {
    from {
      margin-top: 0em;

      -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
         -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
              box-shadow: 0 0.75em 1.25em 0.25em rgba(32,32,32,0.25);
    } to {
      margin-top: 0.25em;
      
      -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
         -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
              box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
    }
  }

  input[type=submit]:hover {
    animation-duration: 0.25s;
    animation-name: pressButtonDark;
      
      -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
         -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
              box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  }



  .errorText {
    color:#E04F5D;
  }

  .errorInput {
    border-color:#E04F5D;
  }

  .successText {
    color:#78E02D;
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Buttons ///////////////////////
  //////////////////////////////////////////////////////////////
  */

  .button {
    background-color:#E27B0A;
    color:#ffffff;
  }

  .button:hover {
    background-color:#055D9A;
  }

  .highlightButton {
    background-color:#055D9A!important;
  }

  .highlightButton:hover {
    -webkit-box-shadow: 0em 0em 0.75em 0.25em rgba(5,93,154, 0.4);
       -moz-box-shadow: 0em 0em 0.75em 0.25em rgba(5,93,154, 0.4);
            box-shadow: 0em 0em 0.75em 0.25em rgba(5,93,154, 0.4);
  }

  .outlineButton {
    background-color:transparent;
    color:#E27B0A!important;
    border:1px solid #E27B0A;
  }

  .outlineButton:hover {
    background-color:#E27B0A!important;
    color:#ffffff!important;
  }


  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Navigation Bar ////////////////
  //////////////////////////////////////////////////////////////
  */

  .headerBar {
    background-color:rgba(45,47,51, 0.75);
    border-bottom:1px solid #171819;
  }

  .navigationButtonMobile svg {
    fill:#E27B0A;
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Navigation ////////////////////
  //////////////////////////////////////////////////////////////
  */

  .navigationContainer a {
    color:#ffffff;
  }

  .navigationContainer a:hover {
    color:#055D9A;
  }

  .curnav {
    color:#055D9A!important;
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Header ////////////////////////
  //////////////////////////////////////////////////////////////
  */

  .headerHeadline {
    color:#E27B0A;
  }

  .headerPictureLighter {
    background-color:rgba(45,47,51, 0.25);
  }

  .fullsizeHeaderPicture .headerHeadline {
    -webkit-filter: drop-shadow(0em 0em 0.25em rgba(45,47,51, 0.75));
       -moz-filter: drop-shadow(0em 0em 0.25em rgba(45,47,51, 0.75));
            filter: drop-shadow(0em 0em 0.25em rgba(45,47,51, 0.75));
  }


  .logoLightMode {
    display: none;
  }

  .logoDarkMode {
    display:block;
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Content ///////////////////////
  //////////////////////////////////////////////////////////////
  */

  .highlight {
    color:#E27B0A;
  }

  .highlightSubColor {
    color:#055D9A;
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Quadratic Button //////////////
  //////////////////////////////////////////////////////////////
  */

  .quadraticButton {
    background-color:#2D2F33;
  }

  .quadraticButtonIcon svg {
    fill:#E27B0A;
  }

  .quadraticButtonLink {
    color:#E27B0A;
  }

  .quadraticButton:hover .quadraticButtonLink {
    color:#055D9A;
    -webkit-filter: drop-shadow(0em 0em 0.5em rgba(5,93,154, 0.4));
       -moz-filter: drop-shadow(0em 0em 0.5em rgba(5,93,154, 0.4));
            filter: drop-shadow(0em 0em 0.5em rgba(5,93,154, 0.4));
  }

  .quadraticButton:hover .quadraticButtonIcon svg {
    fill:#055D9A;
    -webkit-filter: drop-shadow(0em 0em 1.5em rgba(5,93,154, 0.4));
       -moz-filter: drop-shadow(0em 0em 1.5em rgba(5,93,154, 0.4));
            filter: drop-shadow(0em 0em 1.5em rgba(5,93,154, 0.4));
  }

  /* 
  //////////////////////////////////////////////////////////////
  ////////////////////////////// Footer ////////////////////////
  //////////////////////////////////////////////////////////////
  */

  .footer {
    color:#ffffff;
    background-color: #171819;
  }

  .footer a {
    color:#055D9A;
  }

  .footer a:hover {
    color:#E27B0A;
  }

  .footer .highlight {
    color:#E27B0A;
  }

  .endOfPageLine {
    background-color:#E27B0A;
  }

}