@charset "utf-8";



body {
  max-width: 100vw;
  margin: 0;
  padding: 0;
font-family: forma-djr-display, sans-serif;

font-weight: 400;

font-style: normal;
}


.impressum{padding: 6vh 12vw;}

header {
position: fixed;
z-index: 10000;
top: 0;
left:0;
width: 100%;
margin: 0;
padding:  0;
	
}

.icon{ width:60px;
	display: block;
	margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

.iconsmall{height: 15px;	
margin-right: 5px;}


.line1{width: 170px;
height:7px;
background-color: #8D1631;
border-radius: 10px;
margin-bottom: 7px;
}


div{margin: 0; padding: 0;}

a{margin: 0; padding: 0;}

.formalitaeten{
	text-align: left;
	background-color: #ECECEC;
	float: bottom;
	padding:3% 6%;
	margin:0;
	max-width: 100%;
	display:flex;
}


.datenschutz a:hover{color:black;}


/*SCHRIFTEN*/

h2 {
font-family: forma-djr-display, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 30pt;
	margin:0;
	padding:0;	
	line-height: 32pt;
	color: #4D4D4D;
	letter-spacing: 0.6pt;
}

h4 {
font-family: forma-djr-display, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 20pt;
margin:0;
padding:0;	
line-height: 21pt;
color: #4D4D4D;
letter-spacing: 0.6pt;
}

p, .weiter, a{
font-family: forma-djr-display, sans-serif;
font-weight: 400;
font-style: normal;
color:#4D4D4D;
font-size: 14pt;
letter-spacing: 0.5pt;
line-height: 20pt;
	padding:0;
	margin:0;
}

a{text-decoration: none; paddint:0; margin:0;}

#hier{font-size: 18px;}

li{justify-content: space-between;
font-family: mr-eaves-modern, sans-serif;
font-weight: 300;
font-size: 18px;
color:rgba(83,71,65,1.00);
line-height: 1.2em;
}


h1{
font-family: forma-djr-display, sans-serif;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
font-size: 2.5em;
letter-spacing: 0.2em;
text-align: center;
top: 30%;
width:100%;
color: white;
z-index: 10000;
display: block;
}

h3 {font-family: mr-eaves-modern, sans-serif;font-weight: 300;font-style: normal;text-align: center;font-size: 20pt;letter-spacing: 0.1em;	color: white;z-index: 1000;	line-height: 1.5em;	}


p2 {font-family: forma-djr-display, sans-serif;
font-weight: 400;
font-style: normal;
color: #4D4D4D;
font-size: 19pt;
margin:0;
letter-spacing: 1pt;
padding:0;

}

p3 {font-family: forma-djr-display, sans-serif;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.1em;
	display: block;
	
}

.bottom{ display: flex;
  align-items: flex-end;
  justify-content: flex-end;}





/*BANNER*/

.banner{
	width:100%;
	margin: 0;
	padding:0;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	background-image: url("images/Banner_PraxisTobiasPhilippzig.png");
	background-position: 50% 50%; 
	z-index: 0;
}






/*NEUE EINTEILUNG*/



.zentriert {
  	padding: 5% 20% 5% 20%;
	pading-top:0%;
	margin: auto;
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-column-gap: 10%;
	height:auto;
  	background-color: #ECECEC;

}


.icontermin{
	position: absolute;
	width: 300px;
	top: 89%;
	right: 20vw;
	z-index: 1000;
}

.icontermin2{margin: auto;
	
width: 300px;
height:auto;
}

.buttonschluss{text-align: center;
margin-bottom: 6em;}

.parent {
  position: relative; 
  top: 0;
  left: 0;
	margin:0;
	padding:0;
	 height: 50vh;
}
.image1 {

	width: 100vw;
	height:100%;
	  object-fit: cover;
	margin: 0;
	padding:0;
	object-position: 75% 10%;
	position: relative;
	background-image: url("images/Banner_PraxisTobiasPhilippzig.png");
	background-position: 50% 50%; 
	z-index: 0;

}
.image2 {
  position: absolute;
  top: 9%;
  left: 14%;
height: 40vh;
  
}

.anzeige {padding: 5% 20%;
text-align: center;
background-color: white;}

.zentriert p {text-align: center;}
.icontext{text-align: center;}



.abstandmobil{display: none;}
.abstand, .abstandmobilweg {
	height: 2em;
}

.halbbild {position:relative; object-fit:cover; width: 100%; height: 30em; object-position: 10px 10; margin: 0; padding: 0; }
.mobilewegfoto{position:relative; object-fit:cover; width: 100%; height: 30em; object-position: 10% 0; margin: 0; padding: 0; }
.mobileweglink{dislay:block;}




.info{position: absolute; bottom: 0em; width: 90%; padding-right: 3em;}






.zweiteiler{
	padding: 7% 12%;
	pading-top:0%;
	margin: auto;
	display: grid;
	grid-template-columns: 45% 45%;
	grid-column-gap: 10%;
	grid-auto-rows: auto;
	height:auto;
	position: relative;
	
}




.zweiteiler img{width:100%;
object-fit: cover;
height: 400px;}
/*Kostenübernahme*/

.zweiteilertext {padding-right: 30%;
}



#karte{
	
	display: block;
}

.kontakt2{display: flex; flex-direction: row; justify-content: space-between;align-items: center; background-color: #ECECEC; padding: 3% 12%}








/*TERMIN BUCHEN*/


.terminbuchen{
	padding: 12% 6% 12% 6%;
	pading-top:0%;
	margin: 0%;
}

.termintool{margin-left: -3em;}









/*----------ZWISCHENVERSION_______________________ */
@media (max-width: 1150px){
	


/*----------TABLETVERSION_______________________ */

@media (max-width: 1100px){
	
	.zentriert{ padding: 5% 12%;}
	

@media (max-width: 1000px){


	body{overflow-x: hidden;}
	
	.nav-links{position: absolute;
	right: 0px;
	height: 82vh;
	top: 8vh;
	background-color: white;
	opacity: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 30%;
	transform: translateX(100%);
	transition: transform 0.5s ease-in;
	margin:0;
	padding:2em;
	}
	
	.nav-links li{opacity: 0;}
	.burger{display: block;
	cursor: pointer;
	}
	
	
	.nav-active{
		transform: translateX(0%);
	}
	
	
	@keyframes navLinkFade{
		from{
			opacity: 0;
			transform: translateX(50px);
		}
		to{
			opacity:1;
			transform: translateX(0px);
		}
	}
	
	.toggle .line1{
		transform:rotate(-45deg) translate(-5px,6px);
		
	}
	
	.toggle .line2{
		opacity: 0;
	}
	
	.toggle .line3{
		transform:rotate(+45deg) translate(-5px,-6px);
	}




	
	/*----------______________________ */
	
	@media (max-width: 900px){
		
		.zweiteiler{display: block;
	width: 70vw;
	}
		
		.zentriert {
			padding: 0% 20%;}

		.zentriert p {font-size: 12pt;
		line-height: 15pt;}
		.zentriert a{font-size: 12pt;
		line-height: 15pt;
		}
		
	}
	
	
	
	
	
	
/*----------MOBILEVERSIONhandyhandyhandy_______________________ */



	.zweiteiler{display: grid;
	 grid-template-columns: 90%; 
	}
	
	#a{order:2;}
	
	#b{order:1;}
	.bottom{margin-bottom: 2em;
	
}
	
	
	.parent{margin-bottom: 4em;}
	.zweiteiler img{margin-bottom: 0em;}
	.zentriert{display:block;
	padding-top: 0%;
	padding-bottom: 0%;}
	
	.icontermin{margin: auto; right:0;
	left:0;
	}
	
	
	.icontext p { text-align: left;
		font-size: 12pt;}
	.icontext a { text-align: left;
		font-size: 12pt;}
	.linksalign{text-align: left;}
	
	.icontext{	display: grid;
		grid-template-columns: 40% 40%;}
	
	.icon{margin-left: 0;
		width: 60px;
		display: none;
		padding-right: 2em;}

	
	.abstandmobilweg{display:none;}
	.abstandmobil{height:2em; display: block;}
	.mobileweglink {display: none; margin: 0; padding: 0;}
	.mobilewegfoto{display: none;}
	.webweglink{display:block; max-width: 40vw; margin:auto;  padding: 0;}
	nav{text-align: left; padding-top: 0.8em;}
	
	h2{font-size: 32px; line-height: 35px;}
	p4{font-size: 30px;
line-height: 32px;}

	body{width: 100%;}
	#phone{display: block;}
	

	
	.behandlung{
	padding: 3% 12%;
	pading-top:0%;
	margin: 0%;
	display: block;}
	.kontakt2{display: block;}
	.text{text-align: center;}
	.zentriert{text-align: left; vertical-align: left;}
	.auflistung{text-align: left;}
	li{text-align: left;
}
	
	
	@media (max-width: 750px){
		
		
		.image2{display: none;}
			.zweiteiler{
	width: 90vw;
	}
		
		.zweiteilertext {padding-right: 0%;
}
	
	
	}
	
	@media (max-width: 600px){
		
		
		.icontext{display:block;}
		#popup p {font-size: 16px;}
		#popup h2 {font-size: 20px;}
	}