html
{
width: 100%; height: 100%;
background-color: #0066ff;

}
/* ---- Basis-Reset + Styling ---- */
* { margin:0; padding:0; box-sizing:border-box; }
    
body { font-family: Arial, sans-serif; 
    background-color: #C0C0C0;
    background-image: linear-gradient(to bottom, #0066ff, #0066ff, #0066ff, #0066ff, #0066ff, #6b7fff, #989aff, #bbb7ff, #dad5ff, #dad5ff, #dad5ff, #dad5ff, 
    #bbb7ff, #989aff, #6b7fff, #0066ff, #0066ff, #0066ff);
    width: 100%; height:100%; margin:  0% 0% 0% 0%;
    }
    
#div_body_01 { font-family: Arial, sans-serif;
    background-color: transparent;
    width: 90%; height: auto; margin:  0% 0% 0% 0%; float: left;
    display: inline-block;
    }
#div_nav_01 { font-family: Arial, sans-serif;
    background-color: #808080;
    width: 100%; height: auto; margin:  1% 0% 1% 0%; 
    }
nav {
  background: #0066FF; color:#fff;
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0.5rem 1rem; position:relative;
}
.brand { font-size:1.5rem; 
    color: #fff;
}

    /* Desktop-Links */
.nav-links {
    list-style:none; padding:0.5rem
    display:flex;
    }
.nav-links li { 
    margin-left:1rem; padding:0.5rem; float: left;

}
.nav-links a {
    color:#fff; text-decoration:none; padding:0.5rem;
    transition: background 0.3s;
    }
.nav-links a:hover { background:#575757; border-radius:4px; }
.nav-links .active { background:#575757; }

    /* Hamburger-Icon (versteckt auf Desktop) */
.hamburger {
    display:none; flex-direction:column;
    cursor:pointer;
    }
.hamburger span {
    width:25px; height:3px; background:#fff;
    margin:4px 0; transition: transform 0.3s, opacity 0.3s;
    }

    /* Animation bei geöffnetem Menü */
.hamburger.toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    }
.hamburger.toggle span:nth-child(2) { opacity:0; }
.hamburger.toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile-Styles */
@media (max-width:768px) {
    .nav-links {                                
    position:absolute; top:100%; right:0;
    background: #0066ff; flex-direction:column;
    width:100%; max-height:0; overflow:hidden;
    transition:max-height 0.3s ease-out;
    }
.nav-links li { margin:0; float: none; padding: 1rem; }
.nav-links a { padding:1rem; }
.hamburger { display:flex; }
    }
    /* Zustand geöffnet */
.nav-links.nav-active { max-height:500px; border-left:1px solid #ff9900; }  


#div_header_01 { 
    background-color: transparent;    
    width: 100%; height: 10%; margin:  1% 0% 1% 0%;
    }
#div_header_01 h1 { font-family: Arial, sans-serif;
    background-color: #575757;
    text-align: center; color: #FFFFFF;
    padding:  1% 0.5% 1% 0.5%;
    border-radius: 0px 38px 38px 0px; border-top : solid; border-right: solid; border-bottom: solid;
    border-color: #FF9900;
    } 
    
/* @media (max-width:960px) { #div_header_01 {
        display: none;
} 
    
}   */
   
#div_torso_01 { font-family: Arial, sans-serif;
    background-color: #575757; 
    overflow: auto;
    width: 100%; height: auto; margin:  1% 0% 1% 0%; padding: 0% 0% 5% 0%;
    border-radius: 0px 38px 38px 0px; border-top : solid; border-right: solid; border-bottom: solid;
    border-color: #FF9900;
    }
#div_torso_01_form { font-family: Arial, sans-serif;
    background-color: transparent;
    overflow: auto;
    width: 95%; height: auto; margin: auto;
    
    }
#div_torso_01 h1 { font-family: Arial, sans-serif;
    background-color: transparent; 
    font-size: 250%; margin: 0.3275% 0% 0% 0%;
    text-align: center; color: #FFFFFF; 
    } 
#div_torso_01 p { font-family: Arial, sans-serif;
    background-color: transparent;
    font-size: 100%; margin: 0% 0% 0% 0%;
    text-align: left; color: #FFFFFF; padding: 1.5% 2% 1.5% 2% ;
    }   
#div_torso_01 a { font-family: Arial, sans-serif;
    text-decoration: none;
    }    
#div_footer_01 { font-family: Arial, sans-serif;
    background-color: #0066FF;
    width: 90%; height: auto; margin:  1.5% 0% 0% 0%;
    position: fixed; bottom: 0;
    }
#footer_01 {
    width: 100%; height: auto; margin: 0% 2% 0% 0%; padding: 0.5% 2% 0.5% 2%;
    background-color: #575757; 
    border-radius: 0px 18px 18px 0px; border-top : solid; border-right: solid; border-bottom: solid; 
    border-color: #FF9900;
    font-size: small; word-spacing: 17.5px;
    /* position: fixed; bottom: 1.25%;
    display: inline-block;        */ 
}
#footer_01 a {
    text-decoration: none; 
    color: #FFFFFF;
}
#footer_01 a :hover{
    text-decoration: none;
    color: #FF9900;
}



#div_body_02 { font-family: Arial, sans-serif;
    background-color: transparent;
    width: 10%; height: 100%; margin:  0% 0% 0% 0%; float: right;
    display: inline-block;
    }

#div_nav_02 { font-family: Arial, sans-serif;
    background-color: transparent;
    width: 100%; height: 9.2%; margin:  0% 0% 0% 0%;
    }
#div_header_02 { font-family: Arial, sans-serif;
    background-color: transparent;
    width: 100%; height: 10%; margin:  0% 0% 0% 0%;
    }
#div_torso_02 { font-family: Arial, sans-serif;
    background-color: transparent;
    overflow: auto;
    width: 100%; height: auto; margin:  5% 0% 0% 0%;
    }
#div_torso_02 h1 { font-family: Arial, sans-serif;
    background-color: transparent;
    font-size: 200%; margin: 0% 0% 0% 0%;
    text-align: center;
    }
#div_torso_02 a { font-family: Arial, sans-serif;
    text-decoration: none;  margin: 0% 0% 0% 0%;   padding: 0% 0% 0% 0%;
    
    }
#div_footer_02 { font-family: Arial, sans-serif;
    background-color: #0066FF;
    width: 100%; height: auto; margin:  0% 0% 0% 0%;
    position: fixed; bottom: 0;
    }
#footer_02 {
    width: auto; height: auto; margin: 0% 2% 0% 0%; padding: 0% 2% 0% 2%;
    background-color: #575757;
    border-radius: 0px 18px 18px 0px; border-top : solid; border-right: solid; border-bottom: solid;
    border-color: #FF9900;
    word-spacing: 20px;
    position: fixed; bottom: 3.25%;
    display: inline-block;
}
#footer_02 a {
    text-decoration: none;
    color: #FFFFFF;
}
#footer_02 a :hover{
    text-decoration: none;
    color: #FF9900;
}