@font-face { font-family: mitdabei; src: url(freesans_1zge.otf); }

html {
 font-family: mitdabei, time, sans-serif ;
 }

@media screen and (max-width: 690px)      /*    schmal    */
{  html {
 font-size: calc(10.5px + 2vw);
         } }

@media screen and (min-width: 690px)   /*        breit           */
{  html {
 font-size: calc(15.5px + 0.8vw);         /*    war:     calc(14px + 0.7vw);       */
         } }



.pointer:hover { cursor: pointer; }

.relative { position: relative; }
.absolute { position: absolute; }


.quadrat {
	width: 95%;
	height: 20rem;
	margin-top: auto;
	margin-bottom: auto;
	padding: 0.0rem;
	border: 0px solid #DDDDDD;
 	}


.linie 
	{
	height: 0rem;
	border-top: 0.12rem solid black;           /*    Linienstaerke    */
	}
.hilfslinie 
	{
	width: 2.0rem; margin-left: 0.12rem;
	height: 0rem;
	border-top: 0.15rem solid black;           /*    Linienstaerke    */
	display: none;
	}

.ho_b { top: calc(6rem + (0.85rem * -3) ); }          /*    Hilfslinien oben    */
.ho_g { top: calc(6rem + (0.85rem * -2) ); }  
.ho_e { top: calc(6rem + (0.85rem * -1) ); } 
.ho_c { top: calc(6rem + (0.85rem * 0) ); } 
.ho_a { top: calc(6rem + (0.85rem * 1) ); } 

.notenlinie5 { top: calc(6rem + (0.85rem * 2) ); }
.notenlinie4 { top: calc(6rem + (0.85rem * 3) ); }
.notenlinie3 { top: calc(6rem + (0.85rem * 4) ); }
.notenlinie2 { top: calc(6rem + (0.85rem * 5) ); }
.notenlinie1 { top: calc(6rem + (0.85rem * 6) ); }

.hm_v { top: calc(6rem + (0.85rem * 7) ); }          /*    Hilfslinien Mitte    */
.hm_b { top: calc(6rem + (0.85rem * 8) ); }  

.notenlinie_bass5 { top: calc(6rem + (0.85rem * 9) ); }
.notenlinie_bass4 { top: calc(6rem + (0.85rem * 10) ); }
.notenlinie_bass3 { top: calc(6rem + (0.85rem * 11) ); }
.notenlinie_bass2 { top: calc(6rem + (0.85rem * 12) ); }
.notenlinie_bass1 { top: calc(6rem + (0.85rem * 13) ); }

.hu_e { top: calc(6rem + (0.85rem * 14) ); }          /*    Hilfslinien unten    */
.hu_c { top: calc(6rem + (0.85rem * 15) ); }  
.hu_a { top: calc(6rem + (0.85rem * 16) ); } 
.hu_f { top: calc(6rem + (0.85rem * 17) ); } 
.hu_d { top: calc(6rem + (0.85rem * 18) ); } 

.notenzeile { width: 100%; }
.opacity { opacity: 0.0; }

.notenkopf {  height: 0.97rem;  width: auto;   border: 0.5rem solid transparent; }

.platz1 {  left: 16%;  }
.platz2 {  left: 28%;  }
.platz3 {  left: 40%;  }
.platz4 {  left: 52%;  }
.platz5 {  left: 64%;  }
.platz6 {  left: 76%;  }
.platz7 {  left: 88%;  }

.notennamen {          /*    fuer Notenkopf und Namen     */
	width: 2.5rem; 
	height: auto;
	background-color: transparent;
	margin: -0.65rem -0.65rem;     
	font-size: 1.25rem;
	text-align: center;
	font-weight: bold;
	line-height: 0.9;
	opacity: 0.8;
	border: 0.5rem solid transparent;
	}

.abstandnamenote {padding-top: 5.8rem; }    /*    Buchstaben ausrichten    */


/*  .namenhoehe { top: 5.0rem; }   */


.textumrandung_klein {
   margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 1px solid;
    border-radius: 0.3rem;
    padding: 0.0rem 0.2rem 0.0rem 0.2rem;
    box-shadow: 0.08rem 0.08rem #CCCCCC;
  background: transparent;				/*  gegen Button-Default   */
  opacity: 0.50 ;
transition-duration: 0.15s;
            }
.textumrandung_klein:hover {
 cursor: pointer;
 border: 2px solid #66de4a;
    box-shadow: 0.11rem 0.11rem #EEEEEE;
  opacity: 1.00 ;
transition-duration: 0.15s;
            }


.fuss {
	position: absolute;
	bottom: 0.75rem; 
	right: 0.0rem;
	width: 100%;
	text-align: center;
	font-size: 80%;
	border: 0px solid pink;
	}


.neuenote_anim	{
  animation: textmove2 1s ;    /*  8s optimal   */
  animation-delay: 0s ;    /*  0s optimal   */
  animation-fill-mode: forwards;    /*  verhindert Schlussruck/*  
  animation-timing-function: cubic-bezier(1.0, 1.0, 0.0, 0.0);    /*  must be in the range [0, 1]   */
  border: 0px solid white;
  opacity: 1.0;
				}
@keyframes textmove2	{
     0%  {color: black; font-size: 10%; }
  100% {color: color:green; font-size: 400%; }   
					}