/* Text 
css-file für index*/

*{
	box-sizing:  border-box;
}



/*html{
	box-sizing:  border-box;*/


body {
	min-height: 200vh;
	background-color: rgb(255,255,204) ;
	text-align: center;
	margin: auto;
}


	
.seitenheader {
	/*padding: 0.5rem; */
	text-align: center;
	color: red;
 }
 
 .section01 {
	 border: 1px solid blue;
	 /*position: relative;*/
	 text-align: center;
	 /*top: 20px;*/
	 /*padding: 1rem;*/
 }
 
 

 .article01 {
	/*border: 1px solid green;*/
	 color: black;
	 font-size : 1.5rem;
	 /*margin: 1rem;*/
	 text-align: center;
 }
 
 .article02 {
	 /*border: 2px solid green;*/
	 color: black;
	 font-family: Arial, Helvetica, Sans-serif;
	 font-size : 2.5rem;
	 /*margin: 2rem;*/
	 text-align: center;
 }
 
 .article03 {
	/*border: 2px solid black;*/
	display: flow-root;
	text-align: left;
	font-size : 1.5rem;
}
 
 p {
	 font-family: Arial, Helvetica, Sans-serif;
	 font-size : 1.5rem;
	 color : black;
	 line-height : 1.8rem;
	 text-align: justify;
	 margin: 1rem;
 }
 
 
 
 h1 {
	 font-family: Arial, Helvetica, Sans-serif;
	 font-size : 2rem;
	 color : rgb(255, 0, 0);
 }
 
h2 {
	 margin: 0px;
	 font-family: Arial, Helvetica, Sans-serif;
	 font-size : 1.5rem;
	 text-align: center;
 }
 
 h3 {
	 font-family: Arial, Helvetica, Sans-serif;
	 font-size: 1.0rem;
	 font-weight : bold ;
}
 
footer {
	font-family: Arial, Helvetica, Sans-serif;
	font-size : 1.5rem;	
	text-align: center;
}

.float-left {
	float: left;
}


img {
	display: block;
	margin-left: auto;
	margin-right: auto;
  }
 
.imgleft{
	float: left;
}
#punkt{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 1rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}
#baum{
	display: flex-inline;
	position: relative;
	top: 6rem;
	left: -7rem;
	float: left;
	/*align-items: left;*/
	/*border: solid blue;*/
}
#rahmen{
	display: flex-inline;
	position: relative;
	top: 6rem;
	left: -9.5rem;
	float: left;
	
	/*align-items: left;*/
	/*border: solid blue;*/
}
.ablage {
	display: flex;
	align-items: left;
	/*border: 2px solid green;*/
}

#kerze2{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 4rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#stock1{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 5rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#stock2{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 5rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#kkugel{
	display: flex-inline;
	position: relative;
	top: 2rem;
	left: 8rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#schleife{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 10rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#wstern{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 13rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#stargold{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 16rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#star2{
	display: flex-inline;
	position: relative;
	top: 1rem;
	left: 18rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#packet{
	display: flex-inline;
	position: relative;
	top: 5rem;
	left: 24;
	/*align-items: left;*/
	/*border: solid blue;*/
}

#packet2{
	display: flex-inline;
	position: relative;
	top: 5rem;
	left: 28rem;
	/*align-items: left;*/
	/*border: solid blue;*/
}

/*#outer div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 100px;
}*/

.draggable {
	position: relative;
	/*background-color:magenta;*/
}

.draggable p {
	border: 1px dashed black;
	padding: .5em;
}

.draggable button,
.fixed button {
	position: absolute;
	padding: .5em;
	right: 0;
	top: 0;
}

.fixed {
	position: relative;
}

button {
	padding: .5em;
}

area:visited {
	font-family: Arial, Helvetica, Sans-serif;
	font-size : 1.5rem;
	line-height : 1.8rem;
	text-align: justify;
	color:red;
	
}

a :active {
	font-family: Arial, Helvetica, Sans-serif;
	font-size : 1.5rem;
	line-height : 1.8rem;
	text-align: justify;
	color:blueviolet;
}




/* Anpassung an Geräte*/

/*55rem = 880px*  45rem = 720px */
@media screen and (max-width: 55rem) {
	body {
	 max-width: 45rem;
	}
   }
   
   /*30rem = 480px* 20rem = 320px * --- Handy/
   @media screen and (min-width: 30rem) {
	body {
	  max-width: 20rem;
	 /* padding: 0.2rem;*/
	}
   }
   
   /*90rem = 1440px*  85rem = 1360px */
   @media screen and (min-width: 90rem) {
	body {
	  max-width: 85rem;
	 /* padding: 2.5rem;*/
	}
   }
   
   /*120rem = 1920px*  110rem = 1760 */
   @media screen and (min-width: 120rem) {
	body {
	  max-width: 45rem;
	 /* padding: 3rem;*/
	}
   }