/* --- Custom-Properties-Import ---*/

html {
 height: 100%;
 width: 100%;
 position: absolute;
 color: white;
 text-align: center;
}

body {
  position: relative;
  background: white; 
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

header {
  position: relative;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(2rem,5rem,10vh);
  background: var(--clr-grau-700);
}

ul {
  list-style: none;
}

.nav-right a {
  position: absolute;
  right: 0px;
  top: 0px;

  display: flex;
  height: 100%;
  width: clamp(3rem, 8rem, 10vw);
  border-radius: 20px 0px 0px 20px;

  align-items: center;
  justify-content: center;

  font-size: clamp(1.5rem, 3rem, 7vh);
  color: var(--clr-light-200);
  text-decoration: none;

  background:  var(--clr-accent-300);
  box-shadow: -8px 0px 16px rgba(0, 0, 0, 0.75);
  
}

.nav-button{
  position: absolute;
  display: flex;
  height: 100%;
  left: 15%;
  align-items: center;
  justify-content: center;
}

.nav-button a{
  
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 15%;
  background: var(--clr-accent-300);
  flex-grow: 0;
  font-family: 'Raleway', sans-serif;
  color: var(--clr-light-200);
  font-size: clamp(1rem, 1.25rem, 3vh);
  font-weight: 500;
  text-decoration: none;


  border-radius: 1.5rem;
  transition: 200ms ease-in-out;
}

.nav-button a:hover{
  transform: scale(1.05);
  transition: 150ms ease-in-out;
}

.website-content{
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--clr-hintergrund-blau);
 
}

.container{
  font-family: var(--ff-normalschrift);
  color: black;
  height: 80%;
  width: min(95%,1600px);
  /* background-color: rgba(0, 0, 0, 0.95); */
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.bg{
  background-color: rgb(220,220,220);
  height: 100%;
}

.bg-3 {
  background: linear-gradient(360deg, rgba(226, 226, 226, 0.1) 20.31%, #323232 100%), url(/resources/img/background3.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.geplankel-text{
  position: relative;
  font-family: var(--ff-normalschrift);
  font-style:  italic;
  font-size:  1.5rem;
}

.button:hover{
  cursor: pointer;
}

.no-show{
  display: none !important;
}

@media only screen and (max-width: 600px){
  .container {
    height: 98%;
    width: 98%;
  }




}