* { box-sizing: border-box; }
body { 
    margin: 0px; font-family: Roboto; background-color: #333; 
    transform: scale(1); transform-origin: top;
}

#frame { width:900px; min-height: 800px; margin: auto; }
#Logo, #LeftSpacer, #RightSpacer, #Menue { display: inline-block; }
#LeftSpacer { width: 27px; }
#RightSpacer { width: 10px;  background-color: none; vertical-align: top; clear:both; }

nav { background-color: white; height: 50px; padding-right: 20px; }
nav a { display: inline-block; margin: 0px 13px; background-color: none; vertical-align: top; }
nav a:hover { cursor: pointer; color: rgb(200, 36, 63); }

#Menu { padding-top: 20px; vertical-align: top; float:right; background-color: none; }
#Menu span { display: inline-block; }
#Logo img { width: 230px; height: 90px; }

#HiddenMenu { 
    display: inline-block; clear: both; color:black; padding: 0px 0px; font-size: 24pt; 
    vertical-align: top; font-weight: bold; position: relative; top: -11px; right: -12px; 
}

#dropdownUnterricht { 
    display: none; position: absolute; width:230px;  
    margin: 0px; padding:0px;
}
#dropdownHiddenMenu { 
    display: none; position: absolute; width:230px;  
    margin: 0px; padding:0px;
}
menu li{ 
    display: block; margin-top: 1px; background-color: white;
    padding: 7px 10px; 
}

menu li:hover { background-color: antiquewhite; color: rgb(105, 9, 26); }
menu li a { color: black; text-decoration: none; }
menu li a:active { color: rgb(200, 36, 63); }
menu li a:hover { cursor: pointer; }
#Aktiv { background-color: antiquewhite; }
.Aktiv { color: rgb(200, 36, 63); font-weight: bold; }

main h1 { font: 1px Chalkduster; margin-top: 0px; margin-bottom: 0px; line-height: 1.0em; }
#Info { 
    background-image: url('../images/female-playing-piano-1000.jpg');
    background-position:bottom; 
    height: 550px; margin-top: 0px;
}

#Infobereich { 
    background-image: url('../images/female-playing-piano-1000.jpg');
    background-position: top; 
    height: 390px; margin-top: 0px;
}

#Infobereich.Impressum { height: 900px; background-size: cover; }
#Infobereich.Datenschutz {
    height: 2420px; background-color: black; background-image: none;
}

#Infobereich.Kontakt { height: 280px; background-size: cover; }

#Visitenkarte {
    background-color: rgba(255, 255, 255, 0.78); width: 380px; vertical-align: top;
    padding: 20px; position: relative; left: 50px; top: 180px; padding-bottom: 30px;
}
#Initial{ font-size: 40px; }
#Visitenkarte h2 { font: 32px Chalkduster; margin-top: 0px; margin-bottom: 20px; line-height: 1.0em; }
#Visitenkarte input[type='button'] { 
    border: solid 1px rgb(200, 36, 63); color: black; border-radius: 0px;
    font-size: 14px; padding: 4px 20px; font-weight: bold; 
}
#Visitenkarte input[type='button']:hover { cursor: pointer; }
#Visitenkarte.Impressum { top: 75px; width: 550px; }
#Visitenkarte.Impressum p{ line-height: 1.4em; }

#Visitenkarte.Datenschutz { top: 75px; width: 800px; }
#Visitenkarte.Datenschutz p{ line-height: 1.4em; }

#Startbereich {
    background-color: rgba(255, 255, 255, 0.78); width: 800px; vertical-align: top;
    padding: 20px; position: relative; left: 50px; top: 75px; padding-bottom: 30px;
    padding-top: 20px; text-align: center; height:240px;
}
#Startbereich h2 { font: 32px Chalkduster; margin-top: 0px; margin-bottom: 20px; line-height: 1.0em; }
#Startbereich input[type='button'] { 
    border: solid 1px rgb(200, 36, 63); color: black; border-radius: 0px;
    font-size: 14px; padding: 4px 20px; font-weight: bold; margin-top: 10px;
}
#Startbereich input[type='button']:hover { cursor: pointer; }
#Startbereich.Kontakt { height: 150px; }

#Tafelbereich {
    background-color: rgba(7, 122, 7, 0.9); width: 800px; vertical-align: top;
    padding: 20px; position: relative; left: 50px; top: 75px; padding-bottom: 30px;
    padding-top: 20px; text-align: center; height:260px; border: groove 7px rgb(208, 157, 46);
    color:rgb(233, 233, 233);
}
#Tafelbereich h2 { font: 32px Chalkduster; margin-top: 0px; margin-bottom: 20px; line-height: 1.0em; }
#Tafelbereich p { text-align: left; }
#Tafelbereich input[type='button']:hover { cursor: pointer; }

#Video {
    position: relative; width:800px; vertical-align:middle;
    padding: 20px; position: relative; left: 50px; top: 70px; padding-bottom: 30px;
    text-align: center; color: white;
}

#Video a { display:inline-block; vertical-align: middle; }
#Video span { display:inline-block; vertical-align: middle; font-weight: bold; }

#Unterrichtsdetails {
    background-color: rgb(105, 9, 26); padding-top: 20px;
}
#Artikel h3 { 
    font: 27px Chalkduster; margin-top: 0px; margin-bottom: 0px; padding: 0px;
    color:white; 
}
#Einleitung { padding: 10px 50px; vertical-align: bottom; }
#Einleitung div, #Einleitung img { display: inline-block; }
#Einleitung div img { display: inline-block; width: 880px; margin-left:-40px; }
#Artikel p { 
    font-size: 0.8em; width: 450px; color: white; line-height: 2em; padding-right:20px;
}
#Artikel.Alles p { 
    font-size: 0.8em; width: 800px; color: white; line-height: 2em; padding-right:20px;
}
#Artikel.Alles ul { color: white; margin-top: -10px; padding-left: 20px; }
#Artikel.Alles li { margin-bottom: 18px; line-height: 1.4em;  }
#Artikel.Alles h2, #Artikel.Alles h4 { color: white; }

#Einleitung img { width: 330px; }

#Zielgruppen { 
    background-color: rgb(203, 182, 175); min-height: 200px; text-align: center;
    padding: 40px 0px;
}
#Zielgruppen img, #Zielgruppen h3 { display: inline-block; vertical-align: middle;}
#Zielgruppen img { width: 30px; margin-right: 8px; }
#Zielgruppen input[type='button'] { 
    border: solid 1px rgb(200, 36, 63); color: black; border-radius: 0px;
    font-size: 14px; padding: 4px 20px; font-weight: bold; margin-top: 10px;
}
#Zielgruppen .Links, #Zielgruppen .Links_Bild, #Zielgruppen .Links_Bild_Gal, #Zielgruppen .Rechts_Bild, #Zielgruppen .Rechts_Bild_Gal, #Zielgruppen .Mitte, #Zielgruppen .Rechts { 
    display: inline-block; width: 260px; text-align: left; padding: 10px;
}
#Zielgruppen .Links_Bild img { 
    width:400px; vertical-align: top; padding: 0px; margin-top: 10px;
    margin-left: -20px; clip-path: inset(0 0% 0% 0);
   
}
#Zielgruppen .Rechts_Bild img { 
    width:400px; vertical-align: top; padding: 0px; margin-top: 10px;
    margin-left: -20px; clip-path: inset(0 0% 0% 0);
   
}
#Zielgruppen .Links_Bild_Gal img { 
    width:400px; vertical-align: top; padding: 0px; margin-top: 10px;
    margin-left: -160px; clip-path: inset(0 0% 0% 0);
   
}
#Zielgruppen .Rechts_Bild_Gal img { 
    width:400px; vertical-align: top; padding: 0px; margin-top: 10px;
    margin-left: -10px; clip-path: inset(0 0% 0% 0);
   
}
#Zielgruppen .Links_Bild ul { margin-top: 5px;  margin-bottom: -20px; } 
#Zielgruppen .Rechts_Bild ul { margin-top: 5px;  margin-bottom: -20px; } 
#Zielgruppen .Links_Mitte { 
    display: inline-block; width: 520px; text-align: left; padding: 10px;
}
#Zielgruppen .Mitte_Rechts { 
    display: inline-block; width: 520px; text-align: left; padding: 10px;
    vertical-align: top;
}

#Zielgruppen .Alles { 
    display: inline-block; width: 800px; text-align: left; padding: 0px;
}
#Zielgruppen video { margin-left: -10px; width: 260px;}

#Zielgruppen.hat_Alles { padding-top: 10px; }
#Zielgruppen.hat_Alles div h3{ margin-bottom: 0px; }
#Zielgruppen.hat_Alles div p{ font-size: 1em; }

#Zielgruppen p { font-size: 0.9em; line-height: 1.5em; }
#Zielgruppen a { 
    font-size: 0.9em; color: black; font-weight: bolder; 
    border-bottom: solid 2px rgb(78, 117,146); text-decoration: none;
}
#Zielgruppen a:hover { cursor: pointer; }

#Zielgruppen.hat_Alles ul { padding-left: 20px; }
#Zielgruppen.hat_Alles li { margin-bottom: 18px; line-height: 1.4em; }

#Zielgruppen table { border: solid 0px black; }
#Zielgruppen caption { text-align: left; font-weight: bold; padding: 10px 6px; }
#Zielgruppen th, #Zielgruppen td { padding: 5px; }
#Zielgruppen td:first-child { vertical-align: top; white-space: nowrap; }

#Klaviatur { 
    background-image: url('../images/musical-keys-black-flat-lay-1000.jpg');
    height: 194px;
}

#Aktuelles {
    background-color: rgb(175,175,175); text-align: center; padding-bottom: 30px;
}
#Aktuelles h3 { text-align: left;}

#Aktuelles .Links,  #Aktuelles .Rechts { 
    display: inline-block; height: 430px; text-align: left; margin-top: 40px;
}
#Aktuelles .Mitte { display: inline-block; width:100px; }
#Aktuelles .Alles { 
    display: inline-block; width: 800px; text-align: left; padding: 0px;
}
#Aktuelles .Alles img { width:100% }
#Aktuelles img { height: 100%; display: inline-block; }
#Aktuelles a { 
    font-size: 0.9em; color: black; font-weight: bolder; 
    border-bottom: solid 2px rgb(78, 117,146); text-decoration: none;
}
#Aktuelles a:hover { cursor: pointer; }

#Kontakt { 
    min-height: 400px; padding: 0px;
    background-image: url('../images/music-instrument-store.jpg');
    background-position: center;
}

#Kontakt a { 
    font-size: 0.9em; color: black; font-weight: bolder; 
    border-bottom: solid 2px rgb(78, 117,146); text-decoration: none;
}

.Transparent {
    background-color: rgba(255,255,255,0.8);
    min-height: 400px; 
}

.Klaviaturmenü { 
    position: relative; display: inline-block; width: 450px; top: 162px; 
    margin-left: 5px; margin-right: 0px; padding: 0px;
}

.WeißeTaste_1, .WeißeTaste_2, .WeißeTaste_3,.WeißeTaste_4 { 
    background-color: white; height: 43px; border: solid 1px black; 
    position: relative;
}

.WeißeTaste_2 { top: -34px; }
.WeißeTaste_3 { top: -72px; }
.WeißeTaste_4 { top: -108px; }

.SchwarzeTaste_1, .SchwarzeTaste_2, .SchwarzeTaste_3 { 
    position: relative; display:block; margin-left: 130px; background-color: black; 
    color: lightgrey; height: 32px; padding-left: 35px; width: 319px;
    border-radius: 30px 0px 0px 30px; z-index: 1;
    font-size: 1em;
}

.SchwarzeTaste_1:hover, .SchwarzeTaste_2:hover, .SchwarzeTaste_3:hover { background-color: #111; }
.SchwarzeTaste_1:active, .SchwarzeTaste_2:active, .SchwarzeTaste_3:active { 
    background-color: #111;
}

.SchwarzeTaste_1:hover::placeholder,
.SchwarzeTaste_2:hover::placeholder,
.SchwarzeTaste_3:hover::placeholder { color: white; }

.SchwarzeTaste_1 { top: -18px; }
.SchwarzeTaste_2 { top: -54px; }
.SchwarzeTaste_3 { top: -90px; }

.Klaviaturmenü input[type='submit'] { 
    position: relative; display: block; top: -120px;
    color: white; border-radius: 0px; border: none;
    background-color: rgb(42, 59, 65); margin-left: 320px;
    font-size: 16px; padding: 6px 20px; font-weight: normal; 
}

.Klaviaturmenü input[type='submit']:hover { 
    cursor: pointer; background-color: rgb(62, 79, 85);
}
.Klaviaturmenü input[type='submit']:active { 
    background-color: rgb(42, 59, 65); margin-left: 320px;
}

#Kontaktdetails {
    display: inline-block; position: relative; margin-left: -5px; 
    background-color: rgb(203, 182, 175); text-align: center; width: 300px;
    top: 0px; border: solid 1px black; padding: 30px 10px;
}

#Kontaktdetails h1 { font: 1em Chalkduster; margin-top: 0px; margin-bottom: 0px; line-height: 1.0em; }
#Kontaktdetails h2 { font-size: 1em; }

#Datenschutzhinweis { padding: 20px; text-align: center; font-style: italic; }

#Rezensionen { 
    min-height: 200px; background-color: rgb(105, 9, 26); color: white; text-align: center;
    padding: 20px;
}
#Rezensionen.Impressum { min-height: 40px; }

#Rezensionen h2 { 
    font: 48px Chalkduster; margin-bottom: 0px; line-height: 0.1em;
}

#Rezensionen h3 { 
    font-size: 0.9em; margin-top: 0px; margin-bottom: 0px; padding: 0px;
    color:white; 
}

#Rezensionen p { font-size: 0.8em; line-height: 1.8em; }

footer {
    text-align: center;
    height:50px; background-color: rgb(224, 206, 210);
    border-bottom: solid 2px rgb(105, 9, 26); 
}

footer #footer a { color: black; text-decoration: none; }

footer #footer { padding-top: 9px; }
footer #footer div { display: inline-block; vertical-align: middle; }
footer #footer div:first-child img{ width: 30px; margin-right: 10px; }
footer .Copyright { font-size: 0.9em; padding: 0px 15px;}
footer #footer div:last-child a{ font-weight: bold; font-size: 0.9em; margin-left:20px; }
footer #footer div a:hover{ cursor: pointer; }
footer div.Gesetzliches .Aktiv{ color: rgb(200, 36, 63)!important; font-weight: bold; }