*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: National Park, Arial, sans-serif;
    
}

#title{
    text-align: center;
    padding: 10px;
    font-size: 50px;
    
}
#h1{
    text-decoration: none;
    color: black;
}

/* --NAVBAR--*/
body{
  margin: 0;
  font-family: National Park, Arial, sans-serif;
  background: linear-gradient(180deg,#f6f8ff 0%,var(--bg) 100%);
  /*padding: 28px;*/
  color: #0f172a;
  --red: rgb(246, 0, 0);
  --green: rgb(0, 226, 0);
  --blue: rgb(0, 166, 255);
  --yellow: rgb(255, 255, 0);
  --orange: rgb(255, 145, 0);
  --lila: rgb(136, 0, 255);
  --pink: rgb(231, 0, 231);
  --dark-green: rgb(0, 160, 0);
  --neon-green: rgb(45, 255, 3); /*rgb(4, 255, 0)*/

  --red-hover: rgb(246, 0, 0, 0.700);
  --green-hover: rgb(0, 226, 0, 0.700);
  --blue-hover: rgb(0, 166, 255, 0.700);
  --yellow-hover: rgb(255, 255, 0, 0.700);
  --orange-hover: rgb(255, 145, 0, 0.700);
  --lila-hover: rgb(136, 0, 255, 0.700);
  --pink-hover: rgb(231, 0, 231, 0.700);
  --dark-green-hover: rgba(0, 160, 0, 0.700);

  --red-active: rgb(246, 0, 0, 0.500);
  --green-active: rgb(0, 226, 0, 0.500);
  --blue-active: rgb(0, 166, 255, 0.500);
  --yellow-active: rgb(255, 255, 0, 0.500);
  --orange-active: rgb(255, 145, 0, 0.500);
  --lila-active: rgb(136, 0, 255, 0.500);
  --pink-active: rgb(231, 0, 231, 0.500);
  --dark-green-active: rgb(0, 160, 0, 0.500);

  --rad1: 5px;
  --rad2: 10px;
  --pad: 7px;
  --brd:3px solid black;
  --font10: 10px;
  --font15: 15px;
  --font20: 20px;
  
}

input:focus-within{
outline: none;
}
textarea:focus-within{
outline: none;
}


#title{
  text-align: center;
  padding: 40px;
  font-size: 50px;
  margin: 0px;
}

#h1{
  text-decoration: none;
  color: black;
  margin: 0px;
}

.navbar{
  background: black;
  color: white;
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar a:hover{
color: var(--green);
}
.navbar button:hover{
color: var(--green);
}


.menü{
  position: relative;
  display: inline-block;
}
.menü:hover .dropdown{
  display: block;
}
.menü button{
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 20px;
}
.menü button:hover {
transition: 0.3s;
  /* background: rgba(128, 128, 128, 0.4); */
}

.rechts .btn{
  padding-right: 10px;
  padding-left: 10px;
}

/* Drehung von Pfeilen*/
.menü button .icon {
  display: inline-block;
  transition: transform 0.3s ease; /* weiche Drehung */
}


.menü:hover button .icon {
  transform: rotate(90deg);
}

.btn{
  font-family: National Park, Ubuntu, Arial, sans-serif;
}
/*Dropdown*/

.dropdown{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: black;
  overflow: hidden;
  background-color: black;
  
}


.dropdown a{
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
  
  
}

.dropdown a:hover {
  transition: 0.3s;
  /* background: rgba(128, 128, 128, 0.6); */
}
#dropdown7 a:hover{
background: rgba(128, 128, 128, 0.4);
}
#dropdown1{
  width: 114.367px
}
#dropdown2{
  width: 179.8px
}
#dropdown3{
  width: 189.75px
}
#dropdown4{
  width: 241.133px
}
#dropdown5{
  width: fit-content;
  transform: translateX(-3px);
}
#dropdown6{
  width: fit-content;
  transform: translateX(-32px);
}
#dropdown7{
  width: 70px
}
#dropdown8{
width: 123.65px;
}

/*Flaggenbilder*/

.flags{
width: 50px;
}
#dropdown7 {
  align-items: center;
  justify-content: center;
  text-align:center;
}

/* -- search bar -- */
#searchBtn {
color: black;
margin: 0px;
padding: 0px;
}
#searchBtn:hover {
color: var(--green);
}
.search:hover{
  background-color: #dcdcdc;
}
.search {
  --padding: 10px;
              
  width: max-content;
  display: flex;
  align-items: center;
  padding: var(--padding);
  border-radius: 50px;
  background: hsl(0, 0%, 92%);
  transition: background 0.3s, box-shadow 0.3s;
  transform: translateY(-2px);
}
.search:focus-within{
  background: #f1f1f1;
  box-shadow: 0 0 2px black;
}
.search-input{
  font-size: 16px;
  font-family: National Park, Arial, sans-serif;
  color: #333333;
  margin-left: var(--padding);
  outline: none;
  border: none;
  background: transparent;
}

.search-input::placeholder{
  color: rgba(0,0,0,0.4);
}

.search-input::placeholder:hover{
color: var(--green);
}
#results{
  position:absolute;
  background-color: #333;
  padding: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transform: translateY(-2px);
  transform: translateX(17px);
  margin: 0px;
}

footer{
height: 50px;
text-align: center;

}

.close{
cursor: pointer;
display: inline-block;
z-index: 9999;
}
.close:hover{
color:red;
}

/*-----------------------------------------------------------------------------------------------------------*/
section{

}
.news{
    height: 250px;
    text-align: center;
}

html, header {
  height: 100%;
  margin: 0;
}

header {
  /* Starte mit einem diagonalen Gradient */
  background: linear-gradient(135deg, #009f9a, #a5e228, #009f9a);
  background-size: 300% 300%; /* größerer Bereich für Bewegung */
  animation: wave 10s ease-in-out infinite;
  color: #043;
}

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

main{
  margin-left: 20px;
  margin-right: 20px;

}