html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%; }

a.weiss:link {color: #fff; }
a.weiss:visited {color: #fff; }
a.weiss:hover {color: #F2F1EF; }
a.weiss:focus {color: #F2F1EF; }
a.weiss:active {color: #fff; }

a.grau:link {color: #707070; }
a.grau:visited {color: #707070; }
a.grau:hover {color: #aea49a; }
a.grau:focus {color: #aea49a; }
a.grau:active {color: #707070; }



/*Bereiche*/

.intro {
	height: 95%;
	width: 95%;
	background: URL("auswahl_19-199_-7.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover;
	margin: 2.5%; }

.inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none; }

.content {
	max-width: 90%;
	margin: 0 auto;
	text-align: center; }

.grauer-Bereich {
   	background-color: #F2F1EF;
	padding: 50px 10%; }

.dunkelgrauer-Bereich {
   	background-color: #d1d1d1;
	padding: 50px 0%; }

.beiger-Bereich {
   	background-color: #f0ede9;
	padding: 50px 0%; }

.stunde-1 {
   	background-color: #dcd6d1; }

.stunde-2 {
   	background-color: #cfc8c1; }

.stunde-3 {
   	background-color: #c8c0b9; }

.weisser-Bereich {
	color: FFF; 
	padding: 0px 0%; }

.chakra {
   	background: URL("kontakt_chakra.png") no-repeat center;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 50px; }

.bild-links {
	height: 600px;
	width: 100%;
	margin: auto;
	background: URL("uebermich_bild.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover; }

.ansatz {
	width: 100%;
	height: 450px;
    margin: 0 0 25% 0;
	background: #FFF;
	box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.2); }

.bild-ansatz {
	width: 100%; }

.intro-stunden {
	height: 95%;
	width: 95%;
	background: URL("termine_leer_hell.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover;
	margin: 2.5%;
	box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.2);}

.inner-stunden-motiv {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none; }

.content-text-ansatz {
	max-width: 100%;
	margin: 0 auto;
	text-align: center; }

.XXXstunden {
	width: 100%;
    margin: 0 0 25% 0;
	background: #FFF;
	box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.2); }

.XXXstunden-motiv {
	width: 100%;
	height: -50%;}


/* Schriften */



.h2-green-menu {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #c6d643;
	font-size: 150%;
	font-weight: 500;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 20px 0px 20px 0px;
	padding: 0 10px;}

.h1-weiss {
	font-family: montserrat, sans-serif;
	color: #FFF;
	font-size: 200%;
	text-transform: uppercase; }

.h2-weiss {
	font-family: montserrat, sans-serif;
	color: #FFF;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 20px 0 0 0; }

.h2-grau {
	font-family: montserrat, sans-serif;
	text-align: center;
	color: #707070;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 20px 20% 0 20%; }

.h2-grau-links {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #707070;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 90px 0px 8px 0px;
	padding: 0 50px;}

.h2-grau-menu {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #707070;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 10px 0px 10px 0px;
	padding: 0 10px;}

.h3-grau {
	font-family: montserrat, sans-serif;
	text-align: center;
	color: #707070;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 10px 5% 0 5%; }

.h3-grau-links {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #b0b0b0;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	margin: 0px 0px 8px 0px;
	padding: 0 50px;}

.script-weiss {
	font-family: 'Liu Jian Mao Cao', cursive;
	text-align: center;
	color: #fff;
	font-weight: 400;
	line-height: 133%;
	font-size: 230%;
	margin: 20px 10% 10px 10%; }

.script-grau {
	font-family: 'Liu Jian Mao Cao', cursive;
	text-align: center;
	color: #707070;
	font-weight: 400;
	line-height: 133%;
	font-size: 230%;
	margin: 20px 10% 10px 10%; }

.zentriert {
	font-family: montserrat, sans-serif;
	text-align: center;
	color: #707070;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.75;
	margin: 0 15% 0 15%;
	padding: 0 5px; }

.links {
	font-family: montserrat, sans-serif;
	color: #707070;
	text-align: left;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.75;
	padding: 0 50px; }



/* sociamedia */

.fa {
	padding: 18px;
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	border-radius:50%;
	margin: 50px 5px 50px 5px; }

.fa:hover {
	opacity: 0.5;
	color: white;
	text-decoration: none; }

.fa-facebook {
	background: #707070;
	color: white;
	text-decoration: none; }

.fa-instagram {
	background: #707070;
	color: white;
	text-decoration: none; }

.fa-pinterest {
	background: #707070;
	color: white;
	text-decoration: none; }

.fa-twitter {
	background: #707070;
	color: white;
	text-decoration: none; }



/*======================================================================
#=> WEBSEITE-Grundlayouteinstellungen
======================================================================*/

/* HEADER ------------------------------------------------------------*/

header{
    display: table;
    position: fixed;
    top: 3%; width: 94%; height: 40px;
    z-index:10000;
}

/* Header CHECKBOX-BUTTON FÜR HAUPTMENÜ ------------------------------*/

header #checkbox{
    display: none;
}
header #button{
    float: right;
    display: inline-block;
    width: 50px; height: 40px;
    margin-right: 0px;
    cursor: pointer;
}
header #button span{
    display: block;
    margin: 0 auto;
    width: 40px; height: 2px;
    background: #4c4c4b;
    opacity: 1;
    transition: 0.2s;
}
header #button span:nth-child(1){
    margin-top: 10px;
}   
header #button span:nth-child(2),
header #button span:nth-child(3){
    margin-top: 10px;
}
header #checkbox:checked ~ #button span:nth-child(2){ width: 60%;}
header #checkbox:checked ~ #button span:nth-child(3){ width: 30%;}
header #menu{
    position: fixed;
    top: 0; right: -100%; bottom: 0%; width: 75%;
    background: #FFF;
    opacity: 0.95;
    transition: 0.5s;
}
header #checkbox:checked ~ #menu{right: 0;}

/* HEADER HAUPTMENÜ --------------------------------------------------*/

header #menu li{
    list-style: none;
    padding: 20px;
    border-bottom: solid 1px #000;
    transition: 0.5s;
}     
header #menu li:hover{
    padding-left: 10px;
    opacity: 0.75;
}   
header #menu li a{
	color: #707070;
    text-decoration: none;
} 

/* MAIN ( HAUPTINHALT DER WEBSEITE ) ---------------------------------*/

main{
    position:fixed; top:0px; right:0; bottom:0; left:0;
    overflow-y:scroll;
}



* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
    list-style: none;
}

a {
  color: #b63b4d;
  text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/


.accordion {
  width: 100%;
  max-width: 100%;
  margin: 0px auto 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 0px;
  color: #1a1a1a;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li:last-child .link { border-bottom: 0; }

.accordion li i {
  position: absolute;
  top: -116px;
  left: 400px;
  color: #707070;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 0px;
  left: auto;
}

.accordion li.open .link { color: #872b2b; }

.accordion li.open i { color: #707070; }

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/


.submenu {
  display: none;
	background: #FFF;
	margin-top: 0px;
	margin-left: 0%;
  padding: 2% 10%;
}

.submenu li { border-bottom: 1px solid #4b4a5e; }

.submenu a {
  display: block;
  text-decoration: none;
  color: #1a1a1a;
  padding: 0px;
  padding-left: 0px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  color: #1b100b;
}






@media (min-width: 576px){
	
/*Bereiche*/
	
.intro {
	height: 97%;
	width: 97%;
	background: URL("auswahl_19-199_-9.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover;
	margin: 1.5%; }

.inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none; }

.content {
	max-width: 90%;
	margin: 0 auto;
	text-align: center; }
	
.ansatz {
	width: 100%;
	height: 480px;
	margin: 0px 0 10% 0; }
	
.zentriert {
	font-family: montserrat, sans-serif;
	text-align: center;
	color: #707070;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.75;
	margin: 0 10% 0 10%;
	padding: 0 5px; }
	
	
/* Schriften */
	
.h1-weiss {
	font-family: montserrat, sans-serif;
	color: #FFF;
	font-size: 300%;
	text-transform: uppercase; }
	
.script-weiss {
	font-family: 'Liu Jian Mao Cao', cursive;
	text-align: center;
	color: #fff;
	font-weight: 400;
	line-height: 133%;
	font-size: 330%;
	margin: 0px 10% 10px 10%; }

	
}

@media (min-width: 768px) {
	
/*Bereiche*/
	
.bild-links {
	height: 100%;
	width: 100%;
	margin: auto;
	background: URL("uebermich_bild.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover; }
	
/* Schriften */

.h1-weiss {
	font-family: montserrat, sans-serif;
	color: #FFF;
	font-size: 400%;
	text-transform: uppercase; }
	
.h2-grau-links {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #707070;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	text-transform: uppercase;
	margin: 50px 0px 8px 0px;
	padding: 0 30px 0 20px; }
	
.h3-grau-links {
	font-family: montserrat, sans-serif;
	text-align: left;
	color: #b0b0b0;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.75;
	margin: 0px 0px 8px 0px;
	padding: 0 0 0 20px;}

.links {
	font-family: montserrat, sans-serif;
	color: #707070;
	text-align: left;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.75;
	padding: 0 30px 0 20px; }

}


@media (min-width: 992px) {
	
/*Bereiche*/
	
.bild-links {
	height: 100%;
	width: 100%;
	margin: auto;
	background: URL("uebermich_bild_l.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover; }


}

@media (min-width: 1200px) {
	
/*Bereiche*/
	
.bild-links {
	height: 100%;
	width: 100%;
	margin: auto;
	background: URL("uebermich_bild_xl.jpg") no-repeat center;
	display: table;
	top: 0;
	background-size: cover; }
}