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



body {
  background-color: #77ba89;
  position: absolute;
  width: 800px;
  height: 300px;
  top: 5px;
  left: 10px;
   
}


#box1 { 
  background-color: #77ba89;
  position: relative;
  width: 1550px;
  height: 700px;
  top: 150px;
  left: 50px;
	border: green 10px solid;/*Rahmen*/
	padding: 10px; /*Innenabstand*/
	 z-index: 1;
   }

#Material {
    background-color: #77ba89;
	position: absolute;
	 z-index: 2;
    width: 620px;
    height: 260px;
	top: 650px;
    left: 1250px;
	border: green 3px solid;/*Rahmen*/
	padding: 15px; /*Innenabstand*/
}
#box2 {
    background-color: #77ba89;
	position: absolute;
	 z-index: 3;
    width: 620px;
    height: 260px;
	top: 850px;
 	left: 1250px;
	border: green 3px solid;/*Rahmen*/
	padding: 15px; /*Innenabstand*/
}
  th { background-color: #77ba89;
		font-size:10pt;  /* Schrift Größe    */
		font-weight: bold ;
		 
		
	}
	
	td {
	    background-color: #77ba89;
	    font-size:10pt;  /* Schrift Größe    */
	}
	
	input { 

			  font-size: 10pt /* Schrift Größe    */
}

  

section {
	padding-top: 4rem;
	width: 100%;
	margin: auto;
  }
  h1 {
	font-size: 2rem;
	font-weight: 500;
  }
  details[open] summary ~ * {
	animation: open 0.3s ease-in-out;
  }
  
  @keyframes open {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  details summary::-webkit-details-marker {
	display: none;
  }
  
  details summary {
	width: 100%;
	padding: 0.5rem 0;
	border-top: 1px solid black;
	position: relative;
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 300;
	list-style: none;
  }
  
  details summary:after {
	content: "+";
	color: black;
	position: absolute;
	font-size: 1.75rem;
	line-height: 0;
	margin-top: 0.75rem;
	right: 0;
	font-weight: 200;
	transform-origin: center;
	transition: 200ms linear;
  }
  details[open] summary:after {
	transform: rotate(45deg);
	font-size: 2rem;
  }
  details summary {
	outline: 0;
  }
  details p {
	font-size: 0.95rem;
	margin: 0 0 1rem;
	padding-top: 1rem;
  }
  

/* Input-Felder Design*/
input[type=text],input[type=date], input[type=checkbox], input[type=select], input[type=number] {
	
	padding: 3px 20px;
	margin: 4px 0;
	box-sizing: border-box;
  }

  input[type=checkbox] {
	width: 20px;
	height: 20px; 
	
  }
 
  h2{

	font-size: 20px;
  }

  th {
	display: table-cell;
	vertical-align: inherit;
	text-align: center;
	font-weight: bold;
	font-size: larger;

  }

  td {
	display: table-cell;
	vertical-align: inherit;
	font-size:medium;
  }


  .result {

	background-color : transparent;
	border-radius: 1px;
  }


  a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

  input[type=button], input[type=submit], a.button {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
input[type=button]:hover, input[type=submit]:hover, a.button:hover {
	background-color:#f6f6f6;
}
input[type=button]:active, input[type=submit]:active, a.button:active {
	position:relative;
	top:1px;
}

}

/*-----------------------------------------------------------------------------*/




@media (max-device-width: 768px) or (max-width: 768px)  {

	* { /* all element selector */
		box-sizing: border-box; /* border, within the width of the element */
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;



	  }
	  input, select {
		display: block;
		width: 100%;
		font-size: 4.5vw /* Schrift Größe    */
	  } 
	  


	  /*Pfeile aus Number Field ausblenden*/
	  
	  input::-webkit-outer-spin-button,
	  input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	  }







body {
	background-color: #77ba89;
	
	width: 100%;
	height: 100%;

	 
  }
  
  
	th { background-color: #dfdfdf;
		  font-size:4vw;  /* Schrift Größe    */
		  font-weight: normal ;
		 
		   
		  
	  }
	  
	  td {
		  background-color: #77ba89;
		  font-size:4.5vw;  /* Schrift Größe    */
		 
	  }
	  

  
	
  
  section {
	  padding-top: 4rem;
	  width: 100%;
	  margin: auto;
	}
	h1 {
	  font-size: 5vw;
	  font-weight: 700;
	  
	  
	}
	details[open] summary ~ * {
	  animation: open 0.3s ease-in-out;
	}
	
	@keyframes open {
	  0% {
		opacity: 0;
	  }
	  100% {
		opacity: 1;
	  }
	}
	details summary::-webkit-details-marker {
	  display: none;
	}
	
	details summary {
	  width: 95%;
	  padding: 0.5rem 0;
	  border-top: 1px solid black;
	  position: relative;
	  cursor: pointer;
	  font-size: 5vw;
	  font-weight: 500;
	  list-style: none;
	}
	
	details summary:after {
	  content: "+";
	  color: black;
	  position: absolute;
	  font-size: 1.75rem;
	  line-height: 0;
	  margin-top: 0.75rem;
	  right: 0;
	  font-weight: 200;
	  transform-origin: center;
	  transition: 200ms linear;
	}
	details[open] summary:after {
	  transform: rotate(45deg);
	  font-size: 2rem;
	}
	details summary {
	  outline: 0;
	}
	details p {
	  font-size: 0.95rem;
	  margin: 0 0 1rem;
	  padding-top: 1rem;
	}
	
  
  /* Input-Felder Design*/
  input[type=text],input[type=date], input[type=checkbox], input[type=select], input[type=number] {
	  
	  padding: 1px 10px;
	  margin: 1px 0;
	  box-sizing: border-box;
	}
  
	input[type=checkbox] {
	  width: 5vw;
	  height: 5vw; 
	  
	}
   
	h2{
  
	  font-size: 20px;
	}
  

  

  
  
	.result {
  
	  background-color : transparent;
	  border-radius: 1px;
	  font-size: 3vw;
	}
  
  
	a.button {
	  -webkit-appearance: button;
	  -moz-appearance: button;
	  appearance: button;
  
	  text-decoration: none;
	  color: initial;
	  display:inline-block;
	 

  }
  
	input[type=button], input[type=submit], a.button {
	  box-shadow:inset 0px 1px 0px 0px #ffffff;
	  background-color:#ffffff;
	  border-radius:6px;
	  border:1px solid #dcdcdc;
	  display:inline-block;
	  cursor:pointer;
	  color:#666666;
	  font-family:Arial;
	  font-size: 5vw;
	  
	  font-weight:bold;
	  padding:6px 24px;
	  text-decoration:none;
	  text-shadow:0px 1px 0px #ffffff;
  }
  input[type=button]:hover, input[type=submit]:hover, a.button:hover {
	  background-color:#f6f6f6;
  }
  input[type=button]:active, input[type=submit]:active, a.button:active {
	  position:relative;
	  top:1px;
  }


 /*Classes*/



tr {

width: 95%;


}

table {

width: 95%;
border-color: #dcdcdc;


}




}