@charset "UTF-8";

	/* Reset */
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

/** Kleine Monitore mobile first **/
	body {
	margin: 0 auto; 
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
	line-height: 1.4em;	text-wrap: normal;

	display: grid; gap: .4em;
	grid-template-columns: repeat(1, 1fr);
	grid-template-areas: "head" 
						"gn9" 
						"gsw25"
  						"video3" 
  						"gsw14"  
  						"gsw30"
					   	"video6"
						"gsw40"
						"growian"
					   	"gbs21"
					   	"gbs25"
					   	"video12"
                       	"foot";
      width: 380px; margin: 0 auto; text-align: center; margin-top: 2em;             	
		 }
		 
	#logo-hans{
	   display: inline-box;
	   width: 100%;
	   height: 380px;
	   background: 
		url("hans-seibold452x210.gif")  no-repeat 0 0,		
		url("growi-350x210.gif") no-repeat 0px 180px;
		background-size: contain;
		background-color: #888;
		margin-top: 20px;
		margin-bottom: 15px;}
		
	#probox{margin-top: 10px;}

	h1#Produktinfo{background-color: #e2001a; color: #fff; padding: .5em; line-height: 1.3em;border-radius: 5px;}  
	h2{background-color: #e2001a; color: #fff; padding: .5em; margin-top: 0; line-height: 1.2em;}
	p{padding: .2em; font-size: 1.3em; line-height: 1.5em;	}
	a.btn{background-color: #888; color: #fff; font-size: 1.2em;  padding: .2em; }
	a.btn:hover{background-color: #e2001a; color: #fff;}
	.pro-info{	background:#888888; color: #fff; border: medium solid #e2001a; border-radius: 5px;	}
	
	plus-link{ float: left; width: 100%; border-radius: 3px;}	

/* Tabletts */					   
	@media (min-width: 580px) {
	body {display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"head head"
                    	"gn9  gsw25"
  						"video3 video3"
           				"gsw14  gsw30"
					   	"video6 video6"
						"gsw40  growian"
					   	"gbs21  gbs25"
					   	"video12 video12"
                       	"foot foot";
      width: 530px; margin: 0 auto; text-align: center; margin-top: 2em;             	
					   }
		#logo-hans{
	   display: inline-box;
	   width: 100%;
	   height: 135px;
	   background: 
		url("hans-seibold290x135.gif")  no-repeat 0 0,		/* 2 x hintergrundbild */
		url("growi-225x135.gif") no-repeat right 0;
		background-size: contain;
		background-color: #888;
		margin-top: 20px;
		margin-bottom: 15px;}
	
		#probox{margin-top: 10px !important}
	 }
	   
/* Mittlere Monitore */
	@media only screen and (min-width: 860px) {
	body { width: 830px;  margin: 0 auto; text-align: center; margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"head head"
                    	"gn9  gsw25"
  						"video3 video3"
           				"gsw14  gsw30"
					   	"video6 video6"
						"gsw40  growian"
					   	"gbs21  gbs25"
					   	"video12 video12"
                       	"foot foot";	}
	#logo-hans{
	   display: inline-box;
	   width: 100%;
	   height: 210px;
	   background: 
		url("hans-seibold452x210.gif")  no-repeat 0 0,		
		url("growi-350x210.gif") no-repeat right 0,
		url("growi-10px.gif") ;
		margin-bottom: 15px;}
	}

/* Grosse Monitore */
	@media only screen and (min-width: 1110px) {
	body { width: 1060px;  margin: 0 auto; text-align: center; margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:"head head"
                    	"gn9  gsw25"
  						"video3 video3"
           				"gsw14  gsw30"
					   	"video6 video6"
						"gsw40  growian"
					   	"gbs21  gbs25"
					   	"video12 video12"
                       	"foot foot";	}
	#logo-hans{
	   display: inline-box;
	   width: 100%;
	   height: 210px;
	   background: 
		url("hans-seibold452x210.gif")  no-repeat 0 0,		
		url("growi-350x210.gif") no-repeat right 0,
		url("growi-10px.gif") ;
		margin-bottom: 15px;}
	}
	   
	header { grid-area: head;}
	#Spalter-gn9 { grid-area:gn9;}
	#Spalter-gsw25 { grid-area:gsw25;}
	#Video-3 { grid-area:video3;}
	#Spalter-gsw14 { grid-area:gsw14;}
	#Spalter-gsw30 { grid-area:gsw30;}
	#Video-6 { grid-area:video6;}
	#Spalter-gsw40 { grid-area:gsw40;}
	#Spalter-growian { grid-area:growian;}
	#Spalter-gbs21 { grid-area:gbs21;}
	#Spalter-gbs25 { grid-area:gbs25;}
	#Video-12 { grid-area:video12;}
	footer { grid-area: foot; clear: both !important;}
	
/* Slider ? */