/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -      */
/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -      */
/*    - - - - - - - - - - - - - - -   PROJEKT-LILA:  #8e9eff   - - - - - - - - - - - - - -     */


@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);       */
         } }


a, a:visited  {
	font-size: 100%;
	color: #333333;
	text-decoration-style: underline;
	text-decoration-color: white;
	border: 0px;
	}
a:hover, a:active { text-decoration-style: solid; border: 0px; }


.pointer:hover { cursor: pointer; }


.absolute {
 position: absolute;
 }


.gesperrt { letter-spacing: 0.50rem; }
.gesperrt_wenig { letter-spacing: 0.35rem; }      /*     fuer 90 Grad   */


@media screen and (max-width: 890px)   /*      schmal      */
 {  .deckung { opacity: 0.85; } }
@media screen and (min-width: 890px)   /*       breit         */
 {  .deckung { opacity: 0.65; } }


.quadrat {
	position: relative;
	width: 20rem;
	height: 20rem;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid #DDDDDD;
 	}


@media screen and (max-width: 890px)   /*          schmal      */
{  .schmal_aus { display: none; } }
@media screen and (min-width: 890px)   /*           breit             */
{  .breit_aus { display: none; } }


/*          UEBERSCHRIFT       */
/*          UEBERSCHRIFT       */

.uebersch {
	top: 1.5rem;
	left: 0.0rem;
	width: 100%;
	font-size: 1rem; 
	border: 0px solid green;
	}



/*          BILDER       */
/*          BILDER       */

.bild1 {                        /* Floete quer  */
	top: 10.09rem; 
	left: 2.50rem; 
	width: 5.4rem; 
	height: auto;
	 }

.bild2 {                       /* Floete horizontal  */
	top: 2.42rem; 
	left: 2.69rem; 
	width: 5.5rem; 
	height: auto;
	border: 0px solid green;
	 }

.bildschrift {                        /* mit D...  */
	top: 2.08rem; 
	left: 8.32rem; 
	width: 9.2rem; 
	height: auto;
	border: 0px solid green;
	 }

.bild3 {                        /* Gitarre quer  */
	top: 8.0rem; 
	right: 0.62rem;
	width: 7.45rem; 
	height: auto;
	padding: 0.25rem 0.1rem 0.1rem 0.1rem;
	 }

.bild4 {                       /* Gitarre horizontal  */
	top: 2.65rem; 
	left: 3.7rem; 
	width: 3.75rem; 
	height: auto;
	border: 0px solid green;
	 }




/*          TEXTE       */
/*          TEXTE       */

.beschriftung {
 letter-spacing: 0.10rem;
 }
@media screen and (max-width: 890px)     /*      schmal   0.75rem   */
{  .beschriftung { font-size: 0.85rem; } }
@media screen and (min-width: 890px)    /*        breit      0.55, 0.80        */
{  .beschriftung { font-size: 0.75rem; } }

.text {
	top: 4.8rem; 
	left: 1.45rem; 
	width: 17.2rem; 
	height: auto;
	background-color: white;
	text-align: left;
	border: 0px solid pink;
	}
@media screen and (max-width: 890px)     /*      schmal   0.75rem   */
{  .text { 
		font-size: 0.85rem;
		letter-spacing: 0.05rem;
		line-height: 1.1;
 	    } 
 }
@media screen and (min-width: 890px)    /*        breit      0.55, 0.80        */
{  .text { 
		font-size: 0.8rem;
		letter-spacing: 0.02rem;
		line-height: 1.3;
 	    } 
 }


/*          NAVIAGATION  VOR - ZURUECK ECT.      */
/*          NAVIAGATION  VOR - ZURUECK ECT.      */


.navi_index {
	top: 13.0rem; 
	width: 4.4rem; 
	height: 1.2rem;
	padding: 0.13rem 0.2rem 0.1rem 0.2rem;
	border: 3px solid transparent;
	}

.navi {
	top: 16.3rem; 
	width: 4.4rem; 
	height: auto;
	padding: 0.12rem 0.0rem;
	background-color: white;
	border: 3px solid #8e9eff;
	opacity: 0.7;
	}
@media screen and (max-width: 890px)     /*      schmal   0.75rem   */
{  .navi { font-size: 0.75rem; } }
@media screen and (min-width: 890px)    /*        breit      0.65rem        */
{  .navi { font-size: 0.65rem; } }

.zruck {
	left: 3.5rem; 
	}

.vor {
	right: 3.5rem; 
	}

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



/*          ALT  ODER  AUS       */
/*          ALT  ODER  AUS       */
/*          ALT  ODER  AUS       */