header{
    padding: 20px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:30px;
    flex-wrap: wrap ;/*Responsive --> untereinander statt nebeneinander*/
    
}

.header_text{
    width: 700px;
    height: 365px;
    background-color: gainsboro;
}

.circle{
    width: 700px;
    height: 365px; /**/
    max-height: 80vw;/*Responsive --> kreis soll bei Hnady nicht verformt werden*/
    max-width: 80vw;/*vw --> viewport width*/
position: relative;
    overflow: hidden;
    /*border-radius: 50%; */
    border: 0px solid white;

       display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 3px rgba(3, 7, 18, 0.04),
  0px 5px 12px rgba(3, 7, 18, 0.08),
  0px 12px 28px rgba(3, 7, 18, 0.12),
  0px 20px 49px rgba(3, 7, 18, 0.16),
  0px 32px 77px rgba(3, 7, 18, 0.20);
}

.circle img{
    width: 120%;
   
}
nav{
    font-size: 50px;
    margin-bottom: 120px;
}

nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
}
nav a:hover{
    color: black;
    font-size: 42px;
}

#toggle_button{
    display: none;
}

label[for="toggle_button"] {
    display: none;
}

label[for="toggle_button"] span{
    font-size: 40px;
}

/*@media(max-width: 800px){
    nav{
        position:absolute;
        top: 0;
        left: 0;
        background: rgb(161, 144, 238);
        padding: 15px;
        border-radius: :0 0 25px 0;
    }
    nav ul{
        display: none;
        flex-direction: column;
    }
    #toggle_button:checked ~ ul{
        display: flex;
    }
    label[for="toggle_button"]{
        display: block;
    }
}*/

.top-img{
    width: 700px;
    height: 365px; /**/
    max-height: 30vw;/*Responsive --> kreis soll bei Hnady nicht verformt werden*/
    max-width: 40vw;/*vw --> viewport width*/

    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.7s ease ;
}
.top-img:hover{
    opacity: 1;
}