@charset "utf-8";

#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 40%;
height: auto;
padding: 4em;
background: #FFFFFF;
position: relative;
margin: auto;
top:10%;
}



.mobilweg {display: block;}
		.webweg{display: none;}

.icontermin{
	position: fixed;
	bottom: 10vh;
	right: 10vw;
	z-index: 1000;
}

body {
  max-width: 100vw;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;

}
#karte{
	
	display: block;
}

	.webweglink {display: none;}
#phone{
display:none;
position: fixed;
right: 30px;
top:19px;
width: 24px;}



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

.icon{ max-width: 12em;
	padding-top: 1em;
	
}

.iconsmall{height: 15px;

margin-right: 5px;}


div{margin: 0; padding: 0;}


.formalitaeten{
	text-align: left;
	background-color: rgba(198,183,161,1.00);
	float: bottom;
	padding:3% 6%;
	margin:0;
	max-width: 100%;
	display:flex;

}

.formalitaeten a {
font-family: mr-eaves-modern, sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.2em;
color:rgba(83,71,65,1.00);
font-size: 12px;
text-decoration: none;
padding: 0;
margin: 0;


}
.datenschutz a:hover{color:black;}


nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
} 
.nav-links{
	display: flex;
	justify-content: space-around;
	width: 90%;	
	margin-right: 20%;
	
}

.whitebg
{width: 100%;
background-color: white;
z-index: 100;}

.burger{display: none}

.burger div{
	width: 25px;
	height: 3px;
	background-color:rgba(83,71,65,1.00);
	margin: 5px;
	transition: all 0.3s ease;
}

.mobile-break{display:none;}

nav ul li {
font-family: mr-eaves-modern, sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.15em;
list-style-type: none;
margin: 0;
padding:  0;
white-space: nowrap;
}

nav ul li a {
color:rgba(83,71,65,1.00);
font-size: 16px;
text-decoration: none;
padding-right: 0em;
padding-left: 1em;
margin: 0;
float: right;
}

nav ul li a:hover {
 color: black;
 text-decoration: none;
	transform: scale(1.1);
}

/*SCHRIFTEN*/

h2{
font-family: mr-eaves-modern, sans-serif;
font-weight: 300;
font-size: 1.7em;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.1em;
color:rgba(198,183,161,1.00);

}

p, .weiter{
z-index: 999;
justify-content: space-between;
font-family: mr-eaves-modern, sans-serif;
font-weight: 200;
font-size: 22px;
line-height: 25px;
color:rgba(83,71,65,1.00);
hyphens: auto;
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: mr-eaves-modern, 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: 999;
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: 999;	line-height: 1.5em;	}


p2, p5 {font-family: mr-eaves-modern, sans-serif;
font-weight: 300;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.1em;
}

p5{color:rgba(198,183,161,1.00); font-weight: 400; padding-top: 20px; margin-bottom: 20px;}

p3 {font-family: mr-eaves-modern, sans-serif;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
white-space: normal;
	hyphens: auto; white-space: nowrap;
	
}


p4 {font-family: mr-eaves-modern, sans-serif;
font-weight: 200;
font-size: 32px;
color:rgba(83,71,65,1.00);
line-height: 33px;
}



.uppercase{
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fat{
	font-weight: 400;
}




/*BANNER*/

.banner{

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

}

#wilkommen{
text-align: center;
top: 45%;
z-index: 999;
width:100%;
display: block;
font-size: 22px;
letter-spacing: 0.1em;
color:rgba(83,71,65,1.00);
line-height: 1.3em;
}






/*NEUE EINTEILUNG*/
.halfgrid{
	margin:6% 0%;
	padding: 6% 6%;
	display: grid;
	grid-template-columns: 44% 44% ;
	grid-column-gap: 6em;
	grid-auto-rows: auto;
		
}

.zentriert {
  display: table-cell;
  vertical-align: middle;
text-align: center;
	width: 80%;
}

.einteiligundlinks {
  display: table-cell;
  vertical-align: middle;
text-align: left;
	
}

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

.halbbild {position:relative; object-fit:cover; width: 100%; height: 40em; 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;}

/*Übermich*/

.uebermich{
	margin:6% 0%;
	padding: 6% 6%;
	display: grid;
	grid-template-columns: 50% 37% ;
	grid-column-gap: 6em;
	grid-auto-rows: auto;
}

.uebermich h2{letter-spacing: 0.2em;}


.text, .auflistung {
	display: grid;
	grid-template-rows: 30% 70% ;
	position: relative;
	z-index: 999;
	margin: 0; padding: 0;
}

.text2 {
	display: grid;
	grid-template-rows: 10% 50% 40% ;
	position: relative;
	z-index: 999;
	margin: 0; padding: 0;
}
.info{position: absolute; bottom: 0em; width: 100%; padding-right: 3em;}

.uebermich p {line-height: 0; margin-bottom: 0,4em;}
.uebermichbild{display: inline;width: 100%;}


.haendebild{display: inline;width: 100%;min-height: 28em;object-fit: cover;}


/*OSTEOPATHIE*/

.outer {
  display: table;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}
.middle2 {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
padding: 3em 0em;
	z-index: 90;
	text-align: center;
}


.inner2{
	 margin-left: auto;
  margin-right: auto;
  width: 76%;
	padding: 0em;
	text-align: left;
	
}




/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: rgba(229,221,208,0.50);
  color: #444;
  cursor: pointer;
  padding: 22px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: rgba(229,221,208,1.00);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 2em;
  background-color: white;
  display: none;
  overflow: hidden;
	text-align: left;
}


#osteopathie{background-color: rgba(198,183,161,1.00); z-index: 90}

.osteo{padding: 12% 6%;margin-bottom: 0;height: 150%;display: grid;grid-template-columns: 60% 30%;grid-column-gap: 3em;grid-auto-rows: auto;}



/*teamnamen*/

.teamnamen{
	padding: 3% 10%;
	pading-top:0%;
	margin: 0%;
	display: grid;
	grid-template-columns: 45% 45%;
	grid-column-gap: 6%;
	grid-auto-rows: auto;
	height:auto;
}

.teamnamen p{
	margin-bottom: 20px;
}
.bereiche{
	padding: 3% 12%;
	pading-top:0%;
	margin: 0%;
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-column-gap: 20%;
	grid-auto-rows: auto;
	height:auto;	
}

.bereiche p, p3 {hyphens: none; white-space: nowrap;}


.teamnamenbild{
	
	width: 80vw;
	height:auto;
	align-items: center;
	justify-content: center;
	padding-left: 10%;
}

.teamnamenbild img{
	width:100%;
}

.teamheadline{width: 80vw;padding-left: 10%;}

/*Kostenübernahme*/

#background {padding: 12% 6%;margin: 0em;display: grid;grid-template-columns: 60% 30%;grid-column-gap: 6%;grid-auto-rows: auto;}

#image{background-image: url('/images/banner-vase2.png');background-size: cover;overflow: hidden;min-height: 30em;}

.white{color: white; position: absolute;  padding:0;  margin:0;}

.dark{color:rgba(83,71,65,1.00);}

.schmal{position: absolute;bottom: 0;column-count: 2;column-gap: 10%;margin-right: 3em;}

#schmal2{width: 70%;}

.logo{display:block;

width: 18em;
padding: 2em 0em;
padding-right: 1em}

#karte{
	
	display: block;
}

.kontakt2{display: flex; flex-direction: row; justify-content: space-between;align-items: center; background-color: rgba(255,255,255,1.00); padding: 3% 6%}








/*TERMIN BUCHEN*/


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

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









/*----------ZWISCHENVERSION_______________________ */





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






@media (max-width: 1000px){

	.termintool{margin: 0;}
	body{overflow-x: hidden;}
	nav ul li {white-space:pre-wrap;}
	.nav-links{position: absolute;
	right: 0px;
	height: 50vh;
	top: 8vh;
	background-color: rgba(198,183,161,1.00);
	opacity: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 60%;
	transform: translateX(100%);
	transition: transform 0.5s ease-in;
	margin:0;
	padding:2em;
	}
	
	.nav-links li{opacity: 0;}
	.burger{display: block;
	cursor: pointer;
	
		padding-right: 7vw;
	}
	
	
	.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);
	}




/*----------MOBILEVERSION_______________________ */


@media (max-width: 950px){
	
	.auflistung{grid-template-rows: 18% 82% ;}
}

	
	
	
	
	
	
	
	
	
	
	
	
@media (max-width: 800px){
	

	
	.icontermin{left:15vw;
		
}
	.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;}
	p4{font-size: 30px;
line-height: 32px;}

	body{width: 100%;}
	#phone{display: block;}
	#popup h2{font-size:20px;
	}
	
	#popup{width:auto;
	position: relative;
	padding: 2.5em;}
	
	#wilkommen{
		font-size: 18px;
	}
	
	.teamnamen{
	padding: 3% 12%;
	pading-top:0%;
	margin: auto;
	display: block;}
	.kontakt2{display: block; padding-left: 12%;}
	.text{text-align: center;}
	.zentriert{text-align: left; vertical-align: left;}
	.inner{width:70%; text-align: left;}
	.auflistung{text-align: left;}
	.halbbild{padding: 3em 0em;}
	li{text-align: left;
}
	

	.bereiche{display: block;}
	
	
	
	@media (max-width: 700px){
		.middle2{vertical-align: top;padding-top: 17vh;}
		#popup p {font-size: 16px;}
		#popup h2 {font-size: 20px;}
		h2{font-size: 25px;}
		p3{font-size: 14px;  hyphens: auto;}
		.mobile-break{display: static;}
		.panel {
  padding: 2em 1em ;}
		.mobilweg {display:none;}
		.webweg{display: block;}
		.whitebg {background-color: rgba(0,0,0,0.00);}
		.halbbild{height: 20em; width: 100%;}
	}}
	
	@media (max-width: 500px){
		.mobilweg {display:none;}
	}
	
	
	
	li.nav-item {
width: 24px;
	}