#app-container {
    height: 800px;
    width: 414px;
    background-color: rgb(205, 255, 207);
    padding: 2px;
    margin-top: 5px;
    margin: 2px;
    border-radius: 30px;
    background-image: url(building-9568428_1920.jpg);
    background-size: cover;
    background-color: transparent;
    height: 100%;
 
    background-position: px px;
    background-repeat: no-repeat;
    background-size: cover;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

     }


  

 p  {
    color: rgb(15, 1, 1);
    background-color: rgba(255, 235, 205, 0.450);
    margin-top: 0px;
    border-radius: 4px;
    padding: 4px;
    margin-left: 200px;
  
}

h1, h5  {
    margin-top: 2px;
    margin-bottom: 2px;
    color: rgb(240, 235, 235);
    background-color: rgb(14, 14, 13);
    border: 20px;
    border-radius: 14px;
    padding: 7px;
    display: flex;
    overflow: hidden;
    font-size: 30px;
}

h2  {
    color: rgb(9, 9, 9);
   background-color: rgba(255, 235, 205, 0.680);
 
    border-radius: 14px;
    padding: 14px;
}

h3 {
    margin: 3px;
}

#send-button-delayzeit-sechzehntelnote, #send-button-delayzeit-achtelnote,
#send-button-delayzeit-viertelnote, #send-button-delayzeit-halbenote {
    margin-left: 180px;
    position: sticky;
    top: -23.2px;
    right: -50px;
    margin-top: -20px;
  
}

form {
   background-color: rgba(255, 235, 205, 0.450);
   border-radius: 5px;
   
   border-width: 2px;
   padding: 2px;
   margin-left: px;
   margin-bottom: 0px;
   color: rgb(13, 0, 0); // Schriftfarbe
   
}

label {
    margin-right: 40px;
}

input {
    border-radius: 9px;
    background-color:rgba(20, 46, 46, 0.5);
    color:rgba(255, 254, 252, 0.9);
    border-color:rgb(26, 2, 2);
   padding: 10px
    
}


.legal-text  {
  font-size: 1rem;
}


    @media(max-width: 428px) {
      
        #app-container {
        
            width: fit-content;
            height: calc(100vh - 20px);
            min-width: 50vw;
            max-width: 95vw;
           
            margin-top: 2px;
            background-size: cover;  
            font-size: 66%; 
            overflow: hidden; 

h1 {
    font-size: 200%;
}

     }  
    } 


@media screen and (min-width: 769px) {
    #app-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: calc(100vh - 20px);
        min-width: 0;
        max-width: none;
        margin-top: 4px;
    
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        font-size: 1rem; 
        overflow: hidden;

      
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: calc(0.90rem - 0.05vw);
      
    }

}