/*styles */
/*row-start - column-start - row-end - column-end */


@font-face {
    font-family: "Calibri";
    src:url("../fonts/Calibri.woff") format("woff"),
    url("../fonts/Calibri.ttf") format("truetype"), 
    url("../fonts/Calibri.svg") format("svg"),    
    url("../fonts/Calibri.otf") format("otf"); 
    }

@font-face {
    font-family: "Calibri Light";
    src:url("../fonts/calibril.woff") format("woff"),
    url("../fonts/calibril.ttf") format("truetype"), 
    url("../fonts/calibril.svg") format("svg"),    
    url("../fonts/calibril.otf") format("otf"); 
    }

@font-face {
	font-family: "Calibri Bold";
	src:url("../fonts/Calibrib.woff") format("woff"),
	url("../fonts/Calibrib.ttf") format("truetype"), 
	url("../fonts/Calibrib.svg") format("svg"),    
	url("../fonts/Calibrib.otf") format("otf"); 
}


body {
	background-color:#e7f4b4;
	margin:0;
	padding:0;	
    font-family: "Calibri";
}


html>body .text .headline h1,
html>body .text h2,
html>body .text h3,
html>body .text h4,
html>body .menu li a{
	font-weight:normal;
}

.headerBackground {
	width:100%;		
	background:url('https://www.uzimmermann-tcm.ch/cms/upload/bilder/uzi_head_2560.png') no-repeat;		
  	background-size:cover;  
}

.headerBackground img {	
	max-width:100%;
}


header{	
	grid-area:1 / 1 / 1 / 4;	
	max-width:1280px;
	margin:0 auto;	
	padding-top:5vw;
	/*
	border:1px solid blue;	
	*/
}


.person {	
	padding-bottom:1vw;
	/*	
	border:1px solid red;
	*/			
}

.person .name {
	/*
	border:3px solid lime;	
	*/	
}

.person .name h1 {
	font-size:3vw;
	margin-top:-4vw;	
}

.person .beruf {
	/*
	border:3px solid orange;
	*/			
}

.person .beruf h1.small {
	margin-top:-1.75vw;
	font-size:1.5vw;
}



nav {
	grid-area:1 / 1 / 1 / 4;	
	display:flex;
	align-items:baseline;	
	width:100%;
	margin:0;
	height:1.25vw;
	/*
	border:1px solid green;	
	*/
				
}

a.menu-link {
	display:none;
	
}

.menu {	
	margin:0;
	padding:0;
}

.menu ul{
	margin:0;
	padding:0;
}

.menu li{
	display:inline;
	list-style-type:none;
	background-color: rgba(255, 255, 255, 0.7);
	padding: .3vw .5vw 1vw .5vw;	
	margin: 0 .5vw 0 0;
	border:3px solid rgba(255, 255, 255, 0);
    border-radius: 10px 10px 0 0;	
	border-bottom:none;	
	
}

/*
.menu li.start,
.menu li.methoden,
.menu li.uebermich,
.menu li.kontakt,
.menu li.links {
	background-color: rgba(255, 255, 255, 1);
}
*/
.menu li.start  {
	background-color: rgba(255, 255, 255, 1);
}

.menu li.methoden {
	background-color: rgba(255, 255, 255, 1);
}

.menu li.uebermich {
	background-color: rgba(255, 255, 255, 1);
}

.menu li.kontakt {
	background-color: rgba(255, 255, 255, 1);
}

.menu li.links {
	background-color: rgba(255, 255, 255, 1);
}

.menu li [title="start"] {
	background-color: rgba(255, 255, 255, 1);
}

.menu li [title="methoden"] {
	background-color: rgba(255, 255, 255, 1);
}

.menu li a{
	color: #000;
	text-decoration:none;
	font-size:.8vw;
}

.menu li a:hover{
	color: #000;
	text-decoration:underline;
}


/*row-start - column-start - row-end - column-end */
#wrapper {
	grid-area:2 / 1 / 5 / 4;	
	margin:0 auto;	
	background-color:white;		
	max-width:1470px;	
	min-height:90vh;							
}


/*Hauptbereich*/
main {	
	width:100%;		
}

.headline {	
	margin-bottom:1vw;
	padding:2vw 5vw 0 5vw;	
}

.headline h2 {
	color:#000;
	margin:0;
	padding:0;
	color: #4F9A0F;	
}


.text {
	padding:0 5vw 0 5vw;

}


.text h3 {
	color: #4F9A0F;	
	margin-bottom:.5vw;	
}

.text h4 {
	color:#000;	
	padding:0;
	margin-bottom:.75vw;	
}

.text a {
	color: #000;
	text-decoration:underline;	
}

.text a:hover{
	color: #4F9A0F;
	text-decoration:underline;
}

.text p {
	padding:0;
	margin:0;
	padding-bottom:1vw;
}

.text ul {
	margin-top:0;
}

.text .abschnittBild {
	clear:both;
}


.text .abschnittBild img {
	float:right;
	max-width:60%;	
	padding:3vw;
	/*
	border:1px solid red;	
	*/
} 

.link {
	padding:0;
	margin:0;	
}



/*sehr gross*/
@media only screen and (min-width: 1470px) { 	

	header{	
		max-width:1280px;	

	}

	.menu li a{
		font-size:.9vw;
	}	

	nav {
		height:1.5vw;	
		/*
		border:1px solid green;	
		*/	
		font-size:12px;						
	}	
	
	#wrapper {
		max-width:1280px;		
		font-size:14px;	
		/*
		border:2px solid black;	
		*/		
	}
	
	.text p,
	.text li {
		font-size:18px;
	}		

}

/*standard*/
@media only screen and (min-width:1280px) and (max-width:1470px)  { 


	header{	
		max-width:1000px;
		padding-top:6vw;			
	}
	
	nav {
		height:1.75vw;
		/*
		border:1px solid red;	
		*/		
	}

	.menu li a{
		color: #000;
		text-decoration:none;
		font-size:1.1vw;
	}	

	#wrapper {
		max-width:1000px;	
		/*	
		border:2px solid yellow;
		*/
	}

	
}

/*19z*/
@media only screen and (min-width:1024px) and (max-width:1280px)  { 
	
	.headerBackground {
		padding: 4vw 0 0 0;
	}

	header {
		width:80%;	
		padding-top:2vw;				
	}
	
	nav {
		height:2vw;
		/*
		border:1px solid blue;
		*/			
	}
	
	.menu li a{
		font-size:1.3vw;
	}		

	#wrapper {
		width:80%;	
		/*	
		border:2px solid orange;
		*/
	}	
		

}

/*iPad landscape*/

@media only screen and (max-width:1024px){
	
	.headerBackground {
		padding: 3vw 0 0 0;
	}

	header {
		width:80%;	
		padding-top:2vw;	
	}
	
	nav {
		height:2.5vw;
		/*
		border:1px solid pink;	
		*/		
	}	
	
	.menu li a{
		font-size:1.5vw;
	}	

	#wrapper {
		width:80%;
		/*		
		border:2px solid red;
		*/
	}
		

}


/*iPad portrait new*/
@media only screen and (max-width:1024px) and (min-width:768px) and (orientation: portrait) {

	header {
		width:100%;	
		padding: 4vw 0 0 5vw;	
	}

	nav {
		height:2.5vw;
		/*
		border:1px solid lime;	
		*/		
	}
	
	.person {
		padding-bottom:3vw;
	}
	
	.menu li a{
		font-size:1.8vw;
	}	

	#wrapper {
		width:100%;	
		/*	
		border:2px solid pink;
		*/
	}
	
}


/*iPad portrait classic*/
@media only screen and (max-width:768px) {
	
	header {
		width:100%;		
		padding: 3vw 0 0 5vw;		
	}	
	
	.person {
		padding-bottom:2vw;
	}
	
	.person .beruf h1.small {
		font-size:1.8vw;
	}

	nav {
		height:3vw;
		/*
		border:1px solid red;	
		*/		
	}
	
	.menu li a{
		font-size:2.2vw;
	}
	
	#wrapper {
		width:100%;	
		/*	
		border:2px solid aqua;
		*/
	}	

	main {	
		margin-left:0;
		/*
		border:3px solid red;
		*/	
	}


	.text .headline h1 {
		padding-top:1vw;
		width:80%;
	}

/*	
	.text p,
	.text li {
		font-size:2.5vw;
		color:red;
	}
*/
	
}



@media screen and (max-width:736px) {

	#wrapper {
	min-height:90vw;	
	}

	.text p{
		font-size:2.5vw;
	}
	
	
	.text p.adresse{
		font-size:1.5vw;
	}	
	
	.text .abschnittBild img.links{
		float:none;
		width:95%;
	}
	
	.text .abschnittBild p{
		font-size:1.5vw;
	}

	
	.text ul li {
		font-size:1.5vw;
	}
	

	.text ul li a {
		font-size:1.5vw;
	}

			
}


/*smartphone landscape*/

@media screen and (max-width:667px) {
	body {
		background-color:white;	
	}
	
	.person .beruf h1.small {
		font-size:2vw;
	}
	
	.person {
		padding-bottom:1vw;
	}

	nav {
		height:4vw;
		/*
		border:1px solid black;	
		*/	
	}

	
	.menu li a{
		font-size:2.6vw;
	}			


	.text p{
		font-size:2.5vw;
	}
	
	
	.text p.adresse{
		font-size:1.5vw;
	}	
	
	.text .abschnittBild img.links{
		float:none;
		width:95%;
	}
	
	.text .abschnittBild p{
		font-size:1.5vw;
	}

	
	.text ul li {
		font-size:1.5vw;
	}
	

	.text ul li a {
		font-size:1.5vw;
	}

	
}


@media screen and (max-width:640px) {
	
	.person .name h1 {
		font-size:3.5vw;
	}	

	.person .beruf h1.small {
		font-size:2.5vw;
	}	

	nav {
		height:4vw;
		/*
		border:1px solid blue;	
		*/		
	}

	.text p{
		font-size:18px;
	}
	
	
	.text p.adresse{
		font-size:10px;
	}	
	
	.text .abschnittBild img.links{
		float:none;
		width:95%;
	}
	
	.text .abschnittBild p{
		font-size:10px;
	}

	
	.text ul li {
		font-size:10px;
	}
	

	.text ul li a {
		font-size:10px;
	}

}

@media only screen and (max-width: 480px) {	
	
    
	.person .name h1 {
		font-size:4.5vw;
		margin-top:-4vw;	
	}


	.person .beruf h1.small {
		margin-top:-1.75vw;
		font-size:3vw;
	}

	
	nav {
		height:5vw;
		/*
		border:1px solid orange;
		*/			
	}


	 main {
		display:block;			
		margin:0 5%;
	}

	
	.menu li a {
		font-size:3vw;	
	}

	.headline h2 {
		line-height:5vw;
	}	
	
	.text .abschnittBild  {
		clear:none;		
	}

	.text .abschnittBild img  {
		float:none;
		display:block;
		max-width:95%;
		width:95%;		
		padding:0;
		margin:0;

	}
	
	.text .abschnittBild img.moxa  {
		float:none;
		display:block;
		max-height:95%;
		height:95%;		
		padding:0;
		margin:0;

	}		
	
	.text p{
		font-size:3.5vw;
	}
	
	.text .abschnittBild img{
		margin: 3vw 0;
	}
	
	.text .abschnittBild p{
		font-size:2.5vw;
	}
	
	
	.text ul li {
		font-size:2.5vw;
	}
	

	.text ul li a {
		font-size:2.5vw;
	}		
		
}


@media only screen and (max-width:576px) and (orientation: portrait){
	
	.headerBackground {
		width:100%;		
		background:url('https://www.uzimmermann-tcm.ch/cms/upload/bilder/uzi_head_smartphone_portrait.png') no-repeat;			
	  	background-size:cover;  
	}
	
	header {
		padding: 5vw 0 0 5vw;	
		
	}

	.person {
		width:60%;
	}

	.person .name h1 {
		font-size:5vw;
	}	

	.person .beruf h1.small {
		font-size:4vw;
	}	


	nav {
		grid-area:2 / 1 / 2 / 4;		
		display:block;		
		height:2vw;		
		margin:0 0 0 -1em;	
		/*
		border:1px solid blue;	
		*/		
	}

	
	
	a.menu-link {
		display:block;
		float:right;
		background:url("https://www.uzimmermann-tcm.ch/cms/upload/bilder/uzi_toggle_black.png") no-repeat;
		background-size:cover; 	
		width:30px;
		height:30px;
		margin-top:-50px;
		margin-right:15px;		
		color:#fff;
		
	}
		
	
	.menu {
		float:left;		
		min-width: inherit;
		margin:7px 0 30px -3px;
		padding:0;		
		/*zugeklappt*/
		overflow: hidden;
		/*wichtig!*/
		line-height:0;		
		max-height: 0;	
		width:100%;	
		/*
		border-top:1px solid #8BB600;	
		*/	
		/*
		border:1px solid orange;
		*/
		
	}	

	.menu ul{
		display: block;		
		margin:0;
		padding:0;
		width:100%;	
		/*
		border:1px solid aqua;
		*/				
	}


	/*Menusymbol*/
	.menu.active {		
		max-height: 200em;					
	}

	.menu {
		
	}

	.menu li {
		width:90%;		
		margin:0;
		padding:15px;		
		display:block;						
    	border-radius: 0;
		background-color:#E6FF96;
		border-bottom:1px solid #8BB600;		
	}


	.menu li.aktiv{				
		background-color:#fff;	
			
	}
	
	.menu li a{
		color:#000;
		font-size:120%;
	}

	#wrapper {
		grid-area:2 / 1 / 5 / 4;		
	}

	
	main {
		width:100%;		
		margin:25px 0 0 0;
		padding:0;
		/*		
		border:1px solid blue;	
		*/
			
	}

	.headline h2 {
		line-height:8vw;
	}
	
	.text .abschnittBild  {
		clear:none;		
	}

	.text .abschnittBild img  {
		float:none;
		display:block;
		max-width:95%;
		width:95%;		
		padding:0;
		margin:0;

	}
	
	.text .abschnittBild img.moxa  {
		float:none;
		display:block;
		max-height:95%;
		height:95%;		
		padding:0;
		margin:0;

	}

	
	.text p{
		font-size:5vw;
	}
	
	.text p.adresse{
		font-size:5vw;
	}	
	
	.text .abschnittBild img{
		margin: 3vw 0;
	}
	
	.text .abschnittBild p{
		font-size:5vw;
	}
	
	
	.text ul li {
		font-size:5vw;
	}
	

	.text ul li a {
		font-size:5vw;
	}		

}