body { background-color:#FBE6CA;}

#HomeButton1{
margin-top:40px;
margin-left:35px;  
width:120px;
height:50px;
background:grey;
border-radius:10px;
box-shadow: 0px 5px 20px 5px rgba(0,0,0, .4);
}

#HomeButton2{
margin-top:-70px;
margin-left:30px;   
width:120px;
height:50px;
background:brown;
border-radius:10px;
}

#HomeButton2 h1{
text-align:center;
padding-top:12px;
font-size:18px;
color:white;
}

a:link { color: green; text-decoration:none }
a:visited {color:green; }  
a:hover { color: red; -ms-transition: color 1s; }

h1{color: brown;text-align:center;}
h2{color: brown;text-align:center;}
    
.a2 {font-size: 21px; color:blue;text-align:center;}

                                           /*  css für Tabellen  */

table.rahmen1 {
    border-width: 12px;
    border-color: #FC0;
    border-style: ridge;
    padding: 5px;
    box-shadow: 20px 20px 50px grey;

    width: auto;              /* Tabelle passt sich dem Inhalt an */
    border-collapse: collapse; /* schöner, kompakter Rahmen */
    margin: 0 auto;            /* Tabelle wird zentriert */
}

    table.rahmen1 td,
    table.rahmen1 th {
    white-space: nowrap;      /* verhindert Zeilenumbruch → kompakte Tabelle */
    padding: 4px;             /* etwas Abstand für bessere Lesbarkeit */
}

                                         /* css für tonleiterprogramm  */

.container {
    margin-top: 50px;
    margin-left: 250px;
    width: 600px;
    padding: 20px;
}

.rahmen1 {
    border-collapse: collapse;
    width: 100%;
}

.rahmen1 th {
    font-size: 20px;
    color: brown;
    padding: 8px;
}

.rahmen1 td {
    font-size: 18px;
    color: black;
    text-align: center;
    padding: 8px;
}

input, select {
    margin: 4px;
}

.richtig {
    background-color: lightgreen;
}

.falsch {
    background-color: lightcoral;
}

#meldung {
    color: green;
}