/* Stylesheet der Seite SOULALA< */

/* ------------- allgemeingültige Formatierungen ------------- */

html { height: 101%; }


    header, section {
        position: relative;
        min-height: 100vh;
        width: 100%;
        transform-style: inherit;
        }
            
    header {
            }
    .parallax::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        background-image:url("../grafik/soulala.png");
        background-position: center top 3%;
        background-repeat: no-repeat;
        background-size: 100%;
        transform: translateZ(-2px) scale(1);
        }
            
    band {
        position: absolute;
        top: -10%;
        left: 0;
        transform: translateZ(10px) scale(.5);
        width: 100%;
        opacity: 1;
       }
            
    html {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        }
            
    body {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100%;
        perspective: 100px;
        transform-style: preserve-3d;
        }





body {
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	hyphens: auto;
    height: 100%;
    
}



/* ------------- "Social Media"  ------------- */

	#social_media { z-index:5;
        position: absolute; 
        top: 0;
        left: 13%;
        height: 40px;
        width: auto; 
        padding: 0; 
        visibility: visible; 
        opacity: 0.8  
        }


/* ------------- "Nächster Gig"  ------------- */
           
	#a { z-index:7;
        position: fixed; 
        top: 0;
        right: 10%;
        width: auto; 
        padding: 10px 15px 8px 15px;
        visibility: visible; 
        opacity: 0.9  
        }
            
	#b { z-index:6;
        position: fixed;  
        top: 0;
        right: 10%;
        width: auto; 
        background: yellow; 
        padding: 10px 15px 8px 15px;
        border-radius: 2em; 
        visibility: visible; 
        opacity: 0.6  
        }
            
     p1 {
	   	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.5em;
        color: black;
        }
   



	#inhalt { 
		margin-right: auto; 
		margin-left: auto; 
		position: absolute; 
		bottom: -60%; 
		right: 35%; 
		left: 35%; 
		width: 30%; 
        height: 100%;
        z-index: 4;
        transform: translateZ(30px) scale(.7);

		}

/* ------------- "Akordeons"  ------------- */


    #inhalt1   { 
        background-color: #25ffff; 
		visibility: visible;
        border: solid 2px #25ffff;
        border-radius: 2em;
		opacity: 0.85;
		}

    #inhalt2   { 
        background-color: #ff4dff; 
		visibility: visible;
        border: solid 2px #ff4dff;
        border-radius: 2em;
		opacity: 0.85     
		}

    #inhalt3   { 
        background-color: #f5b84e; 
		visibility: visible;
        border: solid 2px #f5b84e;
        border-radius: 2em;
		opacity: 0.85     
		}

    #inhalt4   { 
        background-color: #9ce490; 
		visibility: visible;
        border: solid 2px #9ce490;
        border-radius: 2em;
		opacity: 0.85      
		}

    #inhalt5   { 
        background-color: #46acff; 
		visibility: visible;
        border: solid 2px #46acff;
        border-radius: 2em;
		opacity: 0.85 
        z-index: 1;
		}

    #inhalt6   { 
        background-color: #a487fe; 
		visibility: visible;
        border: solid 2px #a487fe;
        border-radius: 2em;
		opacity: 0.85      
		}

    #inhalt7   { 
        background-color: #000; 
		visibility: visible;
        border: solid 2px #000;
        border-radius: 2em;
		opacity: 0.85      
		}

    #inhalt8   { 
		visibility: visible;
        border-radius: 2em;
		opacity:  0.85      
		}


   #gap {
        border: solid 0.2em #000;
		opacity: 0     
        }

    #gap2 {
        border: solid 200px #000;
		opacity: 0     
        }



    .box  {
	background: url(../grafik/pfeil_unten_2.png)
        no-repeat;
        margin-left: 1%;
}

    .box.active  {
	background-image: url(../grafik/kreuz_2.png);
}

    .box a{
	color: black;
	text-decoration:  underline	
}
    .box h1 {

	font-size: 1.5em;
	color: black;
	line-height: 1.1em;
	letter-spacing: 0.03em;
	padding-left: 10%;
	padding-right: 3%;	
    }

    .box h2 {
	font-size: 1.5em;
    font-style: italic;
    font-style:italic
    color: #000;
	line-height: 1.1em;
	letter-spacing: 0.03em;
	padding-left: 10%;
	padding-right: 3%;	
    }

    .box h3 {
	font-size: 1.2em;
    font-style: italic;
	color: #000;
	line-height: 1.1em;
	letter-spacing: 0.03em;
	padding-left: 10%;
	padding-right: 3%;	
    }

    .box p {
    color: #000;
	font-size: 1.5em;
    padding-left: 10%;
	padding-right: 10%;

}


    ul       { 
    padding-left: 50px;
   	padding-right: 3%;
    }   


    .box li {
    line-height: 1.5em;
    color: #002470;
	font-size: 1.5em;
    margin-bottom: 0.8em;
}

hr {
    width: 100%; 
    border: 1px solid black;
    }


.accordion .ac{
	display:none;
	padding-top:5px;
}


.referenzen_bild {
	padding-left: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px, solid, blue;
}


/* ------------- Lightbox  ------------- */


/* CSS Document */

/* lightboxbefehle */

/*Diese Anweisung gilt für alle Listenelemente ungeordneter Listen der Klasse lightbox: 
Alles, was innerhalb von Listenpunkten der Klasse lightbox steht, 
wird mit diesem Befehl auf 0 gesetzt;*/

ul.lightbox li {    
    position: absolute; /* Absolute Positionierung */
	width: 0;    		/*Breite auf 0 */
	height: 100;   		/*Höhe auf 0 */ 
	left: 0;     		/*Position von Links 0 */
	top: 0;     		/*Position von Oben: 0 */
	opacity: 1;			/*Transparenz ausgeschaltet */  
	list-style:none;
}


/* Durch die Pseudoklasse "target" (:target) am Listenpunkt li wird definiert, was passiert, wenn 
man auf den Bereich klickt, der von dem Listenpunkt umschlossen wird. Klickt man noch mal darauf, kommt diese Einstellung
nicht mehr zur Anwendung. */

ul.lightbox li:target {
	position: absolute;
    top: 5%;
    width: 140%;
	height: 1000px;
	opacity: 1; 						/* Transparenz 100% */


}

/* so wird das Bild angezeigt */
ul.lightbox li:target a {
	position: absolute;
	top: 20%; 							/*zentriert das Bild von oben */
	left: -120px;
    right: 10%;
    border: 14px solid #fff;			/* weißer Rand mit einer Breite von 14px um das geöffnete Bild */
	border-radius: 1em; 
    -moz-box-shadow:0 1px 200px #000000;	/* Schattenbox Mozilla Firefox */
	-o-box-shadow:0 1px 200px #000000;	/* Opera */
	-webkit-box-shadow:0 1px 200px #000000; /* Google */
	box-shadow:0 1px 200px #000000;
    z-index: 10;
	}

/*schaltet den Listenpunkt aus bei allen Elementen der Klasse "lightboxliste" */
.lightboxliste li  {
	list-style:none; /* Anzeige ohne Listenpunkte */
} 
.lightbox img {
    width:100%; /* Anzeige aller Bilder auf die gleiche Höhe bringen */
    height: 100%;
}

/* gestaltet einen Button close */
ul.lightbox li a.close{ 
	position: absolute;
    text-align: center;
    color:#000;
	border:2px;
	text-decoration:none;
	padding:0 7px;
	margin:10px;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: 3px 3px 6px 0px #000;
	border-radius: 5px;
	position:absolute;
	top: 20%;
	left: -120px;
    width: 0.8em

}

 p3 {
	font-size: 1.5em;

}





/* ------------- Formatierungen 2000 ------------- */

@media only screen and (max-width: 2000px) 
{
    body {
        font-size: 0.9em;
        background-color: 
        }
    
    
   band {
        top: -20%
        } 
    
    
    #social_media { z-index:5;
       height: 30px;
        }
    
    
    #inhalt {
		margin-right: auto; 
		margin-left: auto; 
		position: absolute; 
		top: 55% ; 
		right: 25%; 
		left: 25%; 
		width: auto; 
		}
    
} 



/* ------------- Formatierungen 1600 ------------- */

@media only screen and (max-width: 1600px) 
{
    body {
        font-size: 0.8em;
        background-color: 
    }
    
    band {
        top: -10%;
        transform: translateZ(10px) scale(.6);
       }
    
    #social_media {
       height: 25px;
        }
    
    #inhalt {
		top: 55% ; 
		right: 25%; 
		left: 25%; 
		}
    
} 


    
/* ------------- Formatierungen 1000 ------------- */

@media only screen and (max-width: 1000px) 
{
    body {
        font-size: 0.7em;
        background-color: 
    }
    
  band {
        transform: translateZ(20px) scale(.7);
        top: 5%
    }
    
    #social_media {
        left: 11%;
        height: 25px;
        }
    
    #inhalt {
		top: 50% ; 
		right: 20%; 
		left: 20%; 
		width: auto; 
		}
    
    
     .box  {
    background-size: 2.0em;
    margin-left: 3%;
    background-position: left center 
    } 
    
    .box.active  {
    background-size: 2.0em;
    background-position: left top 
} 
}
    


/* ------------- Formatierungen 700 ------------- */

@media only screen and (max-width: 700px) 
{
    body {
        font-size: 0.5em;
    }
    
  band {
        transform: translateZ(20px) scale(.8);
        top: 11%
    }
    
       #social_media {
        left: 6%;
        height: 15px;
        }
    
    #a {
        width: 20%; 
        }
            
	#b { 
        width: 20%; 
        }
            
     p1 {
        font-size: 1em;
        }
    
    #inhalt {
		top: 50% ; 
		right: 10%; 
		left: 10%; 
		width: auto; 
		}
    
      #gap {
        border: solid 0.4em #000;
        }
    
    .box h1 {
	font-size: 170%;
    padding-left:30px;
	padding-right: 3%;	
    }  
    
    .box h2 {
	font-size: 150%;
    padding-left: 40px;
	padding-right: 3%;	
    }  
    
    .box h3 {
	font-size: 120%;
    padding-left: 40px;
	padding-right: 3%;	
    }  
    
    .box p {
	font-size: 150%;
    padding-left: 30px;
	padding-right: 3%;
}
    
   
    
    .box  {
    background-size: 2.2em;
    margin-left: 2%;
    background-position: left center 
    } 
    
    .box.active  {
    background-size: 2.2em;
    background-position: left top 
    }
    
    
   ul.lightbox li:target {
	position: absolute;
    top: 5%;
    width: 110%;
	height: 1000px;
    }

    ul.lightbox li:target a {
	top: 10%; 							
	left: -20px;
    right: 10%;
	}
    
    
    
}



/* ------------- Formatierungen 450 ------------- */

@media only screen and (max-width: 450px)  
{
    body {
        font-size: 0.5em;
    }
    
     .parallax::before {
        top: 3%;
        }
    
    band {
        transform: translateZ(20px) scale(.8);
        top: 16%
    }
    
      #social_media {
        left: 6%;
        height: 20px;
        }
    
    #a {
        width: 35%; 
        }
            
	#b { 
        width: 35%; 
        }
            
     p1 {
        font-size: 1.5em;
        }
    
    
       #inhalt {
		top: 50% ; 
		right: 10px; 
		left: 10px; 
		}
    
      #gap {
        border: solid 0.3em #000;
        }

    
    .box h1 {
	font-size: 170%;
    padding-left:25px;
	padding-right: 3%;	
    }  
    
    .box h2 {
	font-size: 150%;
    padding-left: 25px;
	padding-right: 3%;	
    }  
    
    .box h3 {
	font-size: 120%;
    padding-left: 25px;
	padding-right: 3%;	
    }  
    
    .box p {
	font-size: 150%;
    padding-left: 25px;
	padding-right: 5%;
    }
        .box  {
    background-size: 2.2em;
    margin-left: 2%;
    background-position: left center 
    } 
    
    .box.active  {
    background-size: 2.2em;
    background-position: left top 
    }
    
   
    
    ul.lightbox li:target {
	position: absolute;
    top: 5%;
    width: 110%;
	height: 1000px;
    }

    ul.lightbox li:target a {
	top: 10%; 							
	left: 4%;
    right: 10%;
	}
    
    
    
}

#footer {
    background: #000;
    width: 100%;
    justify-content: flex-end;
    opacity: 0.6  ;

    }
 p {
	color: white   
}