/* Manfred Stelzer Website Grid */

/* MEDIA QUERIES */


/* Extra small devices (iPhones X) */
@media only screen 
and (max-device-width : 450px) 
{ 
section{
	display: flex;
	grid-template-columns: 1fr;
	grid-template-rows: 2000px 45px 1fr;
	gap: 1rem;
    z-index: 400;
    }

}




/* Extra small devices (phones, 660px and down) */
@media only screen and (max-width: 659px){
	#subtitle{display:none;
	}
	
	#placeholder{display:none;
	}
	
	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 200px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }

	
	img{
	aspect-ratio: 4 / 3;
  	object-fit: fill;
  	width:100%;
  	align-items: center;
  	border-radius: 5px;
	}

  	.container-header{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"	
  	} 	
  	
  	.container-header_about{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"
   	} 	
  	
  	.container-header_news{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"
  	} 	

  	.container-header_buch{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"
  	} 	

  	.container-header_filmo{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"
  	} 	

  	.container-header_bio{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
	grid-template-areas: 
    "item_1a item_1a"
    "item_1b item_1b"
  	} 	

  	.item_1a{
	grid-column-start: 1;
  	grid-column-end: 2;
  	grid-row-start: 1;
  	grid-row-end: 2;
  	color: rgba(216, 216, 216, 1);
	justify-content: start;

	}
	
	.item_1b{
  	justify-content: space-around;
	grid-column-start: 1;
  	grid-column-end: 2;
   	grid-row-start: 4;
   	grid-row-end: 5;
   	margin:0px;
	font-size: 0.6em;
	justify-content: start;
	}
	
	.container-filmo{
	word-spacing: 0.01rem;
    margin-left: 3vw;
    margin-right: 3vw;
	margin-bottom: 80px;
	gap: 1vw;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	padding: 20px 3px 80px 3px;
	}
	
	.container-films{
	word-spacing: 0.01rem;
    margin-left: 3vw;
    margin-right: 3vw;
	margin-bottom: 80px;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	padding: 30px 10px 80px 10px;
	}

	.container-main{
	align-content: space-around;
	display: block;
    margin-left: 3vw;
    margin-right: 3vw;
	margin-bottom: 80px;
	gap: 1vw;
	grid-template-columns: 1fr;
	grid-template-rows: auto;	
	padding: 30px 10px 80px 10px;
	}
	
	.container-main img{
	padding;0px 0px 0px 0px;
	width: 100vw;
  	height: auto;
  	object-fit: cover;

	}
	
	.container-add{
	grid-template-columns: repeat(auto-fit,minmax(min(300px, 100%), 1fr));
	grid-template-rows: auto auto auto;
	gap: 1rem;
	max-width: 659px;
	margin: 4rem auto 0;
	margin-bottom: 80px;
	padding: 5vh 3em 7vh 3em;
    z-index: 40;

	}	
	
	.container-add img{
	padding: none;
	justify-content: start;
	}

	.headOne{
    padding: 2px 2px 2px 2px;
	justify-content: start;
	display: flex;
	gap: 8px;
	border-bottom: 1px solid #cacaca;

	}
	
	.container-footer{
    padding: 30px 0.5em 60px 40px;
	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}

	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#alternativeTitel{
	margin-left: 1vw;
	padding: 10px 20px 10px 20px;
	border:none;
	}
	
	.head{
    padding: 10px 20px 5px 20px;
	}

	.detailsOne{
	font-weight: 200;
    padding: 8px 20px 30px 20px;
	}

	#filmtitel{
	text-align:left;
	}
	
	#bookPromo{
    padding: 2px 2px 2px 2px;
	}

}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 660px){

	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 220px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }
	
	img{

  	object-fit: cover;
  	width:100vw;
  	align-items: center;
  	border-radius: 5px;
	}
	
  	.container-header{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
  	} 	
  	
  	.container-header_about{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em; 	
  	} 	
  	
  	.container-header_news{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em; 	
  	} 	

  	.container-header_buch{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
  	} 	

  	.container-header_filmo{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
  	} 	

  	.container-header_bio{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 0.8em;
  	} 	

 	.item_1a{
  	color: rgba(216, 216, 216, 1);
	justify-content: start;
	}

	.item_1b{
	display:flex;
	visibility: visible;
  	color: rgba(216, 216, 216, 1);
	justify-content: start;
	}
	
	#mainBuchTextBox{
	padding-top:1em;
	}

	.container-main{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 30px 10px 80px 10px;
	grid-template-columns: 42vw 42vw;
	grid-template-rows: auto;
	}	
	
	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 20px 3px 80px 3px;
	grid-template-columns: repeat(auto-fit, minmax(42vw, 1fr));
	grid-template-rows: auto;
	}	
	
	.container-films{
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	}
	
	.container-add{
	grid-template-columns: repeat(auto-fit,minmax(min(400px, 100%), 1fr));
	grid-template-rows: auto auto auto;
	padding-left: 5em;
	padding-right: 5em;
	gap: 1vw;
	grid-auto-flow: row;
	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#alternativeTitel{
	margin-left: 1vw;
	padding: 10px 20px 10px 20px;
	border:none;
	}
	
	.head{
    padding: 10px 20px 5px 20px;
	}

	.detailsOne{
	font-weight: 200;
    padding: 8px 20px 30px 20px;
	}

	#filmtitel{
	text-align:left;
	}

	#bookPromo{
   	padding: 0px 20px 5px 20px;
	}
}





/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px){

	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 210px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }

  	.container-header{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em;
  	} 	
  	
  	.container-header_about{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em; 	
  	} 	
  	
  	.container-header_news{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em; 	
  	} 	

  	.container-header_buch{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em;
  	} 	

  	.container-header_filmo{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em;
  	} 	

  	.container-header_bio{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 1.3em;

  	} 	
  	
  	.item_1a{
		grid-column-start: 1;
  		grid-column-end: 4;
  		grid-row-start: 1;
  		grid-row-end: 2;
  		color: rgba(216, 216, 216, 1);
		justify-content: start;
		}
	
	.item_1b{
		grid-column-start: 4;
  		grid-column-end: 8;
  		grid-row-start: 1;
  		grid-row-end: 2;
  		color: rgba(216, 216, 216, 1);
		justify-content: start;
	}
		
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 30px 10px 80px 10px;
	grid-template-columns: 42vw 42vw;
	grid-template-rows: auto;
	}
	
	.container-films{
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	}
	
	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 20px 10px 80px 10px;
	grid-template-columns: repeat(auto-fit, minmax(42vw, 1fr));
	grid-template-rows: auto;
	}	
		
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}

	#alternativeTitel{
	margin-left: 0.6vw;
	padding: 10px 20px 10px 20px;
	border:none;
	}
	
	.head{
    padding: 10px 20px 5px 20px;
	}

	.detailsOne{
	font-weight: 200;
    padding: 8px 20px 30px 20px;
	}

	#filmtitel{
	text-align:left;
	}
	
	#mainBuchTextBox{
	padding:2em;
	}
	
	#bookPromo{
   	padding: 0px 20px 5px 20px;
	}	
	
} 


@media only screen and (min-width: 851px){


.container-add{
	grid-template-columns: repeat(3, 1fr);
/*	grid-template-columns: repeat(auto-fit,minmax(min(400px, 100%), 1fr));*/
	grid-template-rows: auto auto auto;
	display: grid;
	padding-left: 5em;
	padding-right: 5em;

	}
	
	img{
	aspect-ratio: auto;
  	object-fit: cover;
  	width:100%;
  	align-items: center;
  	border-radius: 5px;
	}
	
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 30px 10px 80px 10px;
	grid-template-columns: 42vw 42vw;
	grid-template-rows: auto;
	}
	
	.container-films{
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	}
		
	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 5vw;
    margin-right: 5vw;
	margin-bottom: 80px;
	padding: 20px 10px 80px 10px;
	grid-template-columns: repeat(auto-fit, minmax(42vw, 1fr));
	grid-template-rows: auto;
	}
		
	#filmtitel{
	text-align:left;
	}
	
	#bookPromo{
   	padding: 0px 20px 5px 20px;
	}	
}


@media only screen and (max-width: 751px){
	
	img{
	object-fit: fill;
  	max-width:100%;
	}
	
}



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px){

	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 200px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }
    
	  	
  	.container-header{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	
  	
  	.container-header_about{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em; 	
  	} 	
  	
  	.container-header_news{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em; 	
  	} 	

  	.container-header_buch{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	

  	.container-header_filmo{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	

  	.container-header_bio{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	
  	
  .item_1a{
	grid-column-start: 1;
  	grid-column-end: 4;
  	grid-row-start: 1;
  	grid-row-end: 2;
  	color: rgba(216, 216, 216, 1);
	justify-content: start;
	}
	
	.item_1b{
	grid-column-start: 4;
  	grid-column-end: 8;
  	grid-row-start: 1;
  	grid-row-end: 2;
  	color: rgba(216, 216, 216, 1);
	justify-content: start;
	}
	
	.container-films {
    margin-left: 7vw;
    margin-right: 7vw;
   	margin-bottom: 80px;
	}
	
	.container-filmo {
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	grid-template-columns: repeat(auto-fit, minmax(35vw, 1fr));
	grid-template-rows: auto;
	padding: 20px 10px 80px 10px;
	}
	
	.container-main {
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	grid-template-columns: 37vw 37vw;
	grid-template-rows: auto;
	padding: 30px 10px 80px 10px;
	}

	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#alternativeTitel{
	margin-left: 0.5vw;
	padding: 10px 20px 10px 20px;
	border: none;
	font-weight: 500;
	font-size: 1.65em;
	}
			
	#mainBuchTextBox{
	padding:5em;
	}
		
	#bookPromo{
	padding: 0em 3em 1em 3em;
	}

	.headAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	
	.detailsAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	
	#newsText{
	font-size: 1.5em;
	line-height:1.85em;
	}
	
	#aboutText{
	font-size: 1.1em;
	line-height:1.5em;
	}

	.twoGridItem h4{
	font-weight: 500;
	font-size: 1.65em;
	}
	
	.twoGridItem h3{
	font-weight: 400;
	font-size: 1.35em;
	}
	
	.gridItem h4{
	font-weight: 500;
	font-size: 1.65em;
	}
	
	.gridItem h3{
	font-weight: 400;
	font-size: 1.35em;
	}
	
	.twoGridItem #newsText{
	font-weight: 200;
	font-size: 1.3em;
	}
	
	#mainBuchTextBox{
	padding:3em;
	}

	#filmtitel{
	text-align:center;
	}

} 

/* Extra large devices (large laptops and desktops, 1000px and up) */
@media only screen and (min-width: 1000px){
	
	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 260px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }
	
  	.container-films{
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	}

	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	grid-template-columns: repeat(auto-fit, minmax(24vw, 1fr));
	grid-template-rows: auto;
	padding: 20px 10px 80px 10px;
	}
	
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	grid-template-columns: 37vw 37vw;
	grid-template-rows: auto;
	padding: 30px 10px 80px 10px;
	}
	
	#alternativeTitel{
	margin-left: 0.6vw;
	padding: 10px 20px 10px 20px;
	font-weight: 500;
	font-size: 1.65em;
	}
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px){
	
	section{
	display: block;
	grid-template-columns: 1fr;
	grid-template-rows: 220px 45px 1fr;
	gap: 1rem;
    z-index: 40;
    }
		
  	.container-header{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	
  	
  	.container-header_about{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em; 	
  	} 	
  	
  	.container-header_news{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em; 	
  	} 	

  	.container-header_buch{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	

  	.container-header_filmo{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
  	} 	

  	.container-header_bio{
  	display:grid;
  	padding: 0.8em 0.8em 0.8em 2em;
	} 
  	
  	.container-films{
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	}

	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	grid-template-columns: repeat(auto-fit, minmax(24vw, 1fr));
	grid-template-rows: auto;
	padding: 20px 10px 80px 10px;
	}
	
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	grid-template-columns: 37vw 37vw;
	grid-template-rows: auto;
	padding: 30px 10px 80px 10px;
	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#alternativeTitel{
	margin-left: 0.6vw;
	padding: 10px 20px 10px 20px;
	font-weight: 500;
	font-size: 1.65em;
	}
			
	#bookPromo{
	padding: 0em 5em 1em 5em;
	}
	
	.headAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	.detailsAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	
	#newsText{
	font-size: 1.5em;
	line-height:1.85em;
	}
	
	#aboutText{
	font-size: 1.1em;
	line-height:1.5em;
	}

	.twoGridItem h4{
	font-weight: 500;
	font-size: 1.65em;
	}
	
	.twoGridItem h3{
	font-weight: 400;
	font-size: 1.35em;
	}
	
	.gridItem h4{
	font-weight: 500;
	font-size: 1.65em;
	}
	
	.gridItem h3{
	font-weight: 400;
	font-size: 1.35em;
	}
	
	.twoGridItem #newsText{
	font-weight: 200;
	font-size: 1.3em;
	}

	#mainBuchTextBox{
	padding:5em;
	}
	
	#filmtitel{
	text-align:center;
	}
	
	
}

/* Extra large devices (large laptops and desktops, 1600px and up) */
@media only screen and (min-width: 1600px){

	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 10vw;
    margin-right: 10vw;
	margin-bottom: 80px;
	grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
	grid-template-rows: auto;
	padding: 20px 10px 80px 10px;

	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#alternativeTitel{
	margin-left: 0.6vw;
	padding: 10px 20px 10px 20px;
	font-weight: 500;
	font-size: 1.65em;
	}

	#filmtitel{
	text-align:center;
	}

	#bookPromo{
	padding: 0em 5em 1em 5em;
	}	


}



/* based on iPad 10 ) */


@media only screen 
	and (min-device-width : 830px) 
	and (max-device-width : 1195px) 
	and (orientation : landscape) 
	{ 
	
	body{
	font-size:200;
	}

  	.container-films{
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	}

	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	padding: 20px 10px 80px 10px;
	}
	
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	grid-template-columns: 37vw 37vw;
	grid-template-rows: auto;
	padding: 30px 10px 80px 10px;
	}

		
	#mainBuchTextBox{
	padding:5em;
	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}
	
	
	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
	
	#bookPromo{
   	padding: 0px 20px 5px 20px;
	}	
	
	.headAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	
	.detailsAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}
	
	#alternativeTitel{
	padding: 20px 20px 10px 22px;
	}

}


@media only screen 
and (min-device-width : 1040px) 
and (max-device-width : 830px) 
and (orientation : portrait) 
{ 

	body{
	font-size:200;
	}
	
  	.container-films{
	margin-top: 800px;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	}

	.container-filmo{
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	padding: 20px 10px 80px 10px;
	}
	
	.container-main{
	word-spacing: 0.03rem;
    margin-left: 7vw;
    margin-right: 7vw;
	margin-bottom: 80px;
	grid-template-columns: 37vw 37vw;
	grid-template-rows: auto;
	padding: 30px 10px 80px 10px;
	}
		
	#mainBuchTextBox{
	padding:5em;
	}
	
	.twoGridItem{
   	padding: 0px 20px 5px 20px;
	}


	.elementfilm{
   	padding: 0px 20px 5px 20px;
	}

	.elementserie{
   	padding: 0px 20px 5px 20px;
	}
		
	#bookPromo{
   	padding: 0px 20px 5px 20px;
	}	

	
	.headAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}

	.detailsAboutOne{
    padding: 0em 0.5em 0.5em 1.1em;
	}

	#alternativeTitel{
	padding: 0px 20px 10px 22px;
	}


}