.nav-link:hover {
transform: scale(1.1); 
  transition: transform 0.3s; 
  color: black;
}

  .nav-link.active {
    text-decoration: none; 
    border-bottom: 2px solid rgb(255, 165, 0); 
  }

.navbar {
  margin-top: 0;
  transition: all 1s;
  background-color: #ffffffd5;
  border-bottom: 2px solid #000; 
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); 
}

.nav-item a:hover {
    color:#000000
  }
  .nav-item{
    margin-left: 1.5vw;
    margin-right: 1.5vw;
  }

.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.984);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}


.orange-underline {
  background: linear-gradient(to bottom, transparent 93%, orange 80%);
    color: black;
    display: inline;
    padding-bottom: 2px;
}

.card-img-top {
  border-radius: 5px 5px 5px 5px;
}


#cookie-notice {
  background-color: #3333338a;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 100;
}

#accept-cookies {
  background-color: #676767;
  color: #ffffff;
  border-radius: 1rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* Übergangseffekt */
  margin-right: 10px; 
}

#decline-cookies {
  background-color: #676767;
  color: #ffffff;
  border-radius: 1rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* Übergangseffekt */
  margin-left: 10px; 
}

#accept-cookies:hover,
#decline-cookies:hover {
    background-color: #333; /* Hintergrundfarbe*/
    color: #fff; /* Textfarbe */
}

.form-container {
  height: 50vh;
  width: 50%;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: 0px 2px 10px rgba(68, 68, 68, 0.5); /* Orange Schatten */
  border-color: solid #000000;
  font-family: 'Cabin', sans-serif;
  margin-top: 0%;
  margin-bottom: 0%;
  letter-spacing: 2px;
  background-size: 500% 500%;
  
}

  .custom-border-form {
    border: 1px solid #000000; /* Hier kannst du die Rahmenfarbe und -dicke anpassen */
    padding: 20px; /* Hier kannst du den Abstand um das Formular anpassen */
    border-radius: 5px; /* Hier kannst du die Rahmenradius anpassen */
  }
  

.hidden{
  opacity: 0;
  filter: blur(4px);
  transition: all 1s;
  transform: translateY(-100%);
}

.show{
opacity: 1;
filter: blur(0);
transform: translateY(0);

}

.row {
  max-width: 100%;
}


.text-custom {
 margin-top: 0rem;
margin-bottom: 0rem;
margin-left: 11%;
margin-right: 15%;

}
.custom-margin {
  margin-left: 11%;
}

.custom-left-margin {
  margin-left: 23%; 
}

.custom-left-text {
  margin-left: 55px;
  margin-top: 20px;
}

.text-custom-last {
  margin-left: 14%;
  margin-right: 7%
}


.center-button {
  padding-top: 10px;
  

  .btn {
    width: 300px;
    height: 80px;
  }
}


.transparent-btn {
background-color: rgba(192, 192, 192, 0.053); 
border: 2px solid #444; 
color: #000; 
padding: 10px 20px; 
border-radius: 3px; 
transition: all 0.3s ease; 
font-size: 1.3rem;
}


.transparent-btn:hover {
background-color: #ffffff16; 
border-color: #151515bb; 
color: #000000d0; 
text-shadow: 0 0 10px 3px #ffbc826d; ;
box-shadow:  0 0 8px 1px #7b7b7b24; /* Glow-Effekt beim Hovern */
    transform: scale(1.05);
}


.transparent-btn-login {
  background-color: rgba(192, 192, 192, 0.053); 
  border: 2px solid #444; 
  color: #000; 
  padding: 5px 10px; /* Passe die Werte nach Bedarf an */
  border-radius: 3px; 
  transition: all 0.3s ease; 
  font-size: 1.3rem;
  max-width: 100%; /* Die maximale Breite des Buttons auf 100% des Containers begrenzen */
}

.transparent-btn-login:hover {
  background-color: #ffffff16; 
  border-color: #151515bb; 
  color: #000000d0; 
  text-shadow: 0 0 10px 3px #ffbc826d; ;
  box-shadow:  0 0 8px 1px #7b7b7b24; /* Glow-Effekt beim Hovern */
  transform: scale(1.05);
}


.card-text {
  justify-content: center;
}


.card-img-small {
  max-width: 100px; 
  height: auto; 
  margin-top: 20px;
}

.card-container {
  height: 60%;
}

.card{
  margin: 5%;
}

.icon-cards {
  background-color: rgba(51, 51, 51, 0);
  margin: 10%;
}

.icon-img-cards {
  display: block;
  margin: 8%;

  max-width: 80px;
  height: auto;
}

.custom-card {
  background-color: #00000000;
  border: #00000000;
}

.custom-text-data {
  margin-left: 30px;
  margin-right: 60px;;
}

  #mainNavigation a {
    font-family: 'Cabin', sans-serif;
    font-size:14px;
    
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 2px rgba(0, 0, 0, 0.182)
  }
  
  .dropdown-menu {
    background:#03727d
  }
  a.dropdown-toggle {
    color:#dfdfdf !important
  }
  a.dropdown-item:hover {
    color:#03727d !important
  }



.content {
  margin-top: 100vh;
  padding: 20px;
            margin-top: 0px;
            
            font-family: 'Cabin', sans-serif;
            letter-spacing:2px;
            
}


.masthead {
  height: 100%;
  width: 100%;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  
  overflow: hidden;
  
  background-attachment: fixed;
  text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.514);
  font-family: 'Cabin', sans-serif;
  letter-spacing:2px;
}

.bg-dark {
  background-color: rgb(0, 0, 0);
  position: relative;
  z-index: 1;
}
 
.h1{
  font-size: 3.5rem;
  font-family: 'Cabin', sans-serif;
  text-shadow:1px 1px 2px rgba(0,0,0,0.4);
  letter-spacing:2px;
  
}



.custom-container {
 
  width: 100%;
    height: 100%;
    border-top: 2px solid #01260E;
    border-bottom: 2px solid #01260E;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.279);
    border-color: solid #01260E;
    font-family: 'Cabin', sans-serif;
    margin-top: 0%;
    margin-bottom: 0%;
    letter-spacing:2px;
    background-size: 500% 500%;
    background-color: #ffffff;
}

@keyframes diagonal {
  0% {background-position: 0% 50%}
  100% {background-position: 100% 50%}
}

.main {
  max-height: 80vh;
}

.white-footer {
  background-color: rgb(19, 19, 19); 
  
  
   
  text-shadow:1px 1px 2px rgba(0,0,0,0.4);
  font-family: 'Cabin', sans-serif;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.4)
}

.white-footer a {
  color: white;
}


.container-form {
  margin: 8%;
}



@media (min-width: 1199) {

  
  .masthead {
    height: auto;
    min-height: 60vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    text-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
    font-family: 'Cabin', sans-serif;
    letter-spacing:2px;
  }
}

@media (min-width: 1026px) and (max-width: 1198px) {


.masthead {
  height: auto;
  min-height: 60vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  text-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
  font-family: 'Cabin', sans-serif;
  letter-spacing:2px;
}

}

  
  @media (min-width: 766px) and (max-width: 1025px) {
    /* CSS-Regeln für Tablet-Viewport */
  
    .nav-link:hover {
      transform: none; 
        transition: none; 
        color: black;
      }
      
        .nav-link.active {
          text-decoration: none; 
          border-bottom: none 
        }

    .card-row {

    margin: 2%;
    }

    .container-form {
      margin: 6%;
      margin-left: 10%;
    }
  
     
  


    .masthead{
    min-height: 60vh;
    height: auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
    position: relative;
    overflow: hidden;
    background-attachment: scroll;
    text-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
    font-family: 'Cabin', sans-serif;
    letter-spacing:2px;
    }

    .h1{
      font-size: calc(1.525rem + 3.3vh);

    }

    

  }



  
  @media (max-width: 765px) {
    /* CSS-Regeln für Mobile-Viewport */

    .row {
      width: 100%;
    }

    .profil-card {

      max-width: 100%;
      height: 330px;
      width: 100%
    }

    .transparent-btn {
      background-color: rgba(255, 255, 255, 0); 
      margin: auto;
      border: 2px solid #444; 
      color: #000; 
      padding: 5px 10px; 
      border-radius: 3px; 
      transition: all 0.3s ease; 
      font-size: 1.3rem;
      transform: scale(0.6); 
      }

      .center-button {
        display: flex;
        justify-content: center;
      }

      .nav-link:hover {
        transform: none; 
          transition: none; 
          color: black;
        }
        
          .nav-link.active {
            text-decoration: none; 
            border-bottom: none 
          }

    

    

    .hidden{
      opacity: 0;
      filter: blur(4px);
      transition: all 1s;
      transform: none;
    }
    
    .show{
    opacity: 1;
    filter: blur(0);
    transform: none;
    
    }

    

   
    

    .card{
      
      margin-left: 16%;
      margin-right: 10%
    }

  




.masthead{
 

    
    min-height: 60vh;
    height: auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
    position: relative;
    overflow: hidden;
    background-attachment: scroll;
    text-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
    font-family: 'Cabin', sans-serif;
    letter-spacing:2px;
    }



    .form-container {
      height: 50vh;
      width: 70%;
      margin: 0 auto;
      border-top: 2px solid #000000;
      border-bottom: 2px solid #000000;
      box-shadow: 0px 2px 10px rgba(68, 68, 68, 0.5); /* Orange Schatten */
      border-color: solid #000000;
      font-family: 'Cabin', sans-serif;
      margin-top: 0%;
      margin-bottom: 0%;
      letter-spacing: 2px;
      background-size: 500% 500%;
      
    }
    
      .custom-border-form {
        border: 1px solid #000000; /* Rahmenfarbe und -dicke anpassen */
        padding: 20px; /* Hier kannst du den Abstand um das Formular anpassen */
        border-radius: 5px; /* Hier kannst du die Rahmenradius anpassen */
      }
   
   
  }