html, body{
	width:100%; 
	height:100%;
	padding:0;
	margin:0;
	font-size:22px;
	line-height:140%;
	color:#464646;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	
	 font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-display: swap; /* Bei @font-face definiert */
	}
main{
	width:100%;
	height:auto;
	overflow: hidden;
	}
.readablefont01 html, .readablefont01 body{
	
	font-family: Arial, Helvetica, sans-serif !important;

	}

main { 
    -webkit-transition: 0.5s ease-in-out all;
    transition: 0.5s ease-in-out all;
}

body.toggle-on main {
    opacity: 0.5;
    transform: scale(0.98);
}




html, body {
    height: 100%;
}
main{
    min-height: 100%;
}



/* \\\\\\\\\\\\\\\\\\\\ HEADER ///////////////////// */

.menu-icon-wrapper {
    position: absolute;
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 100%;
    bottom: -50px;
    right: -50px;
	cursor: pointer;
}
.menu-icon {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
}
.menu-icon > div {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
	-webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu-icon > div > div, .menu-icon > div:nth-child(3){
    width: 20px;
    height: 20px;
    position: absolute;
    background: #ffb700;
    border-radius: 100%;
background: rgb(235,199,136);
background: radial-gradient(circle, rgba(235,199,136,1) 0%, rgba(235,181,85,1) 37%, rgba(231,164,51,1) 54%, rgba(231,164,51,1) 70%, rgba(191,130,23,1) 89%);
	
}
.menu-icon > div:nth-child(1), .menu-icon > div:nth-child(2), .js .menu-on .menu-icon > div:nth-child(1), .js .menu-on .menu-icon > div:nth-child(2), .js .menu-on .menu-icon-wrapper:hover .menu-icon > div:nth-child(1), .js .menu-on .menu-icon-wrapper:hover .menu-icon > div:nth-child(2){transform: rotate(-145deg); opacity: 0;}
.menu-icon-wrapper:hover .menu-icon > div:nth-child(1){transform: rotate(90deg); }
.menu-icon-wrapper:hover .menu-icon > div:nth-child(2){transform: rotate(135deg); }

.menu-icon > div > div:nth-child(1){top:0; left:0;}
.menu-icon > div > div:nth-child(2){bottom:0%; left:0; top: unset;}
.menu-icon > div > div:nth-child(3){top:0; right:0%; left:unset;}
.menu-icon > div > div:nth-child(4){bottom:0%; right:0%; top: unset; left:unset;}
.js .menu-icon > div:nth-child(1){transform: rotate(0deg); opacity: 1;}
.js .menu-icon > div:nth-child(2){transform: rotate(45deg); opacity: 1;}

.menu-icon > div:nth-child(3), .js .menu-on .menu-icon > div:nth-child(3){top:50%;left:50%; margin-left:-10px; margin-top:-10px; opacity: 0;}
.js .menu-icon > div:nth-child(3){opacity: 1;}


.menu-icon-wrapper .menu-icon div.menu-text, .js .menu-on .menu-icon-wrapper .menu-icon div.menu-text{
    position: absolute;
    bottom: 5px;
    left: 0;
    top: unset;
    width: 100%;
    text-align: center;
    height: 21px !important;
    font-size: 11px;
    font-weight: 500;
	opacity: 0;
	-webkit-transition:1s ease-in-out all;
	transition:1s ease-in-out all;
}
.js .menu-icon-wrapper .menu-icon div.menu-text{opacity:1;}


.menu-icon > div.close01, .menu-icon > div.close02 {
    width: 50%;
    height: 10px;
    background: rgb(235,199,136);
    top: 50%;
    margin-top: -5px;
    opacity: 0;
	-webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}



.menu-on .menu-icon > div.close01 {opacity: 1; transform: rotate(45deg)}
.menu-on .menu-icon > div.close02 {opacity: 1; transform: rotate(-45deg)}


.menu-icon-wrapper.menu-icon-wrapper-scroll {
    position: fixed;
        right: -15px;
    top: 30px;
    z-index: 10000;
	-webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu-on.scroll-menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {    right: 90px; top: 480px;}

.menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {
    top: 500px;
    right: 100px;
}
/*.scroll-menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll{ right: -15px; }*/



.js div#logo-cover {opacity:0;}
.js .loader-on div#logo-cover {opacity:.9;}
div#logo-cover {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000000;
    background: #fff;
	display: block;
-webkit-transition: all 1s ease-in-out;
  transition:         all 1s ease-in-out;
      opacity: .9;
    pointer-events: none;
}

div#logo-cover img {
    width: 280px;
    margin: 0 auto;
    padding: 0;
    display: block;
    animation: logo-cover-size infinite;
    animation-duration: 3s;
    opacity: .8;
    pointer-events: none;
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -140px;
    margin-top: -50px;
}

@keyframes logo-cover-size{ 
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

picture#logo {
    position: fixed;
    z-index: 10;
    top: 0px;
    width: 10%;
    height: auto;
    padding: 10px 30px;
    left: 5%;
    background:#f2f2f2;
    border-bottom-right-radius: 15px;
	 border-bottom-left-radius: 15px;
	z-index: 1001;
	-webkit-transition:1s ease-in-out all;
	transition:1s ease-in-out all;
}


picture#logo {
    position: fixed;
    z-index: 10;
    top: 0px;
    width: 120px;
    height: 120px;
    padding: 3%;
        top: -50px;
    left: 5%;
    background: #fff;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    z-index: 1001;
    -webkit-transition: 1s ease-in-out all;
    transition: 1s ease-in-out all;
    border-radius: 100%;
    z-index: 5;
}

.home picture#logo img, .page picture#logo img {
    position: relative;
    top: 18px;
}

#logo img{
	width:100%;
	position: relative;
	}
a.kontakt {
    position: fixed;
    width: 65px;
    height: 65px;
    background: linear-gradient(90deg, #1782be, #1fb4b6, #1782be);
    background-size: 200% 200%;
    background-position: left center;
    padding: 11px;
    box-sizing: border-box;
    border-radius: 6px;
    right: 60px;
    top: 60px;
	z-index: 10000
}
@media screen and (max-width:1660px){ 
picture#logo {
    top: -36px;
}

}

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

    
	.header-con {
		width: 100%;
		padding: 0px 0 0 20px;
	}
	.head-btn {
		width: 175px;
	}
	#logo {
		width: 200px;
	}
    picture#logo {
        /* left: 8%; */
        /* width: 19%; */
        top: -30px;
    }
	
	html, body{
	    font-size:18px;
	}
    .menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {
        top: 300px;
        right: 100px;
    }
}

@media screen and (max-width:1080px){ 
	
}
@media screen and (max-width:768px){ 
	header#head {
		width: 100%;
		height: auto;
		padding-left: 36%;
	}
	a.studio-button-head.head-btn, a.termin-button-head.head-btn {
		display: none;
	}

	html, body{
	font-size:22px;
	}



       .hide-nav picture#logo, picture#logo {
        width: 100px;
        left: 30px;
        padding: 20px;
        height: 100px;
        top: -15px;
    }
.menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {
    top: 30px;
    right: 30px;
}

  
}


	
	
/* \\\\\\\\\\\\\\\\\\\\ NAVIGATION ///////////////////// */	

	
/* \\\\\\\\\\\\\\\\\\\\ NAVIGATION ///////////////////// */	

nav#navi {
    position: fixed;
    top: -1200px;
    right: -1200px;
    width: 1200px;
    height: 1200px;
    background: #fff;
    z-index: 10000;
    border-radius: 100%;
	-webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu-on nav#navi {
    top: -600px;
    right: -600px;
}
#navigation {
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    top: 600px;
    position: absolute;
    left: 0;
    padding-right: 41%;
    width: 49%;
    text-align: right;
}

#navi li {
    list-style: none;
    font-size: 28px;
    display: inline-block;
    line-height: 300%;
    font-family: 'Kalam', 'Titillium Web' ,Helvetica, Helvetica Neue, Arial, sans-serif;    margin-right: 17px;

}
#navi li a {
    padding: 10px;
    background: #ffb700;
    padding: 15px 30px 10px;
	color:#fff;
background: rgb(235,199,136);
background: linear-gradient(180deg, rgba(235,199,136,1) 0%, rgba(235,181,85,1) 37%, rgba(231,164,51,1) 54%, rgba(231,164,51,1) 70%, rgba(191,130,23,1) 89%);}

#navi #navigation > div ul li a:hover, #navi #navigation > div ul li.current_page_item > a:link, #navi #navigation > div ul li.current_page_item > a:visited, #navi #navigation > div ul li.current_page_item > a:active, #navi #navigation > div ul li.current_page_ancestor > a:active, #navi #navigation > div ul li.current_page_ancestor > a:link,  #navi #navigation > div ul li.current_page_ancestor > a:visited 
, #navi #navigation > div ul li.current_page_item > a:link, #navi #navigation > div ul li.current_page_item > a:visited, #navi #navigation > div ul li.current_page_item > a:active, #navi #navigation > div ul li.current_page_ancestor > a:active, #navi #navigation > div ul li.current_page_ancestor > a:link,  #navi #navigation > div ul li.current_page_ancestor > a:visited {
		background-color:#88be0e;
	color:#fff;
	}
	
#navi #navigation > div ul li.menu-item-has-children a.hover ~ ul.sub-menu, #navi #navigation > div ul li.menu-item-has-children a:hover ~ ul.sub-menu{
    display:block !important;
}

	
/*========== UNTERMENU ==========*/
#navi #navigation > div ul li ul.sub-menu {
	width:400px;
	position:absolute;
	margin:0;
    padding: 35px 0 0 0;	
	border:none;
	display:none;
	z-index:105;
	}	
#navi #navigation > div ul li ul.sub-menu li{
	clear:both;
	margin:0;
	border-bottom:1px solid #fff;
	}	
#navi #navigation > div ul li:hover ul.sub-menu{
	display:block;
	}	


	
/*========== untermenü Farbe, Größe, Border und Textausrichtung ==========*/
#navi #navigation > div ul li ul.sub-menu li a{
	background-color:#88be0e;
	padding: 15px 15px;
	margin-bottom:0px;
	font-size:16px;
	border:none;
	height:auto;
	color:#ffffff;
	border-bottom:1px solid #ffffff;
	width:394px;	/*+m										<---Festebreite für unterpunkte */
	display:block;
	text-align:left;	/*+m									<---Text links Anschlage */
	margin:0;
	}
#navi #navigation > div ul li ul.sub-menu li.current_page_item a:hover, #navi #navigation > div ul li ul.sub-menu li.current_page_item a:active, #navi #navigation > div ul li ul.sub-menu li.current_page_item a:link, #navi #navigation > div ul li ul.sub-menu li.current_page_item a:visited{
	background-color:#88be0e;
	border:none  !important;
	color:#fff;
	}
	
/*========== MOBILE MENU-BUTTON ==========*/
.menu-button {
    width: 60px;
    position: absolute;
    right: 96px;
    top: 12px;
    padding: 15px 0 15px 0;
    /* background-color: #fff; */
    display: none;
}
.menu-toggle{
	color:#eee;
	background-color:#88be0e;
	border:1px solid #88be0e;
	display:block;
	cursor:pointer;
	border-radius:50%;	
	width:2.5em;
	height:2.5em;
	margin:0 auto;
	text-align:center;
	line-height:2.5em;
	font-weight:normal;
	}
[data-icon]:before{
	content: attr(data-icon);
	speak:none;
	display:inline-block;
	font-size:200%;
	}	



li#menu-item-257 {
    display: block;
    background-color: transparent;
}

#navi li#menu-item-257 a {
    background: #fff;
    color: #000;
    padding-left: 60px;
	background-image: url("../images/ukraine-flag.png");
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 50px;
}
	
@media screen and (max-width:1400px){


	
	nav#navi {
    top: -800px;
    right: -800px;
    width: 800px;
    height: 800px;
}
.menu-on nav#navi {
    top: -400px;
    right: -400px;
}
	
#navi li a {
    padding: 9px 15px 0px;
   }
#navigation {
    top: 400px;
    padding-right: 0;
}	
	
	    #navi li {
        font-size: 19px;
    }
}	




@media screen and (max-width:768px){ 
	.header-con {
    padding: 0;
}

	.wpml-ls-first-item {
	border-bottom: none;	
    border-right: 1px solid #000;
}
	.wpml-ls-legacy-list-horizontal a {
    padding: 0px 10px !important;
}
.menu-button {
    right: 50%;
    top: 95px;
    margin-right: -30px;
    z-index: 100;
}

	#header-right {
    right: 30px;
    top: 86px;
    position: static;
    clear: both;
    width: 100%;
    text-align: center;
    padding: 0 30px 30px 30px;
}
	
.kontakt-icons {
    right: 0;
	top: 107px;
}
	
	
.menu-icon-wrapper {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 100%;
    bottom: -52px;
    right: -6px;
}
	
.menu-icon > div {
    width: 46%;
    height: 46%;
    top: 27%;
    left: 27%;
}	
	
.menu-icon > div > div, .menu-icon > div:nth-child(3) {
    width: 10px;
    height: 10px;
}	
	.menu-icon > div:nth-child(3), .js .menu-on .menu-icon > div:nth-child(3) {
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
}
.menu-icon-wrapper .menu-icon div.menu-text, .js .menu-on .menu-icon-wrapper .menu-icon div.menu-text {
    bottom: 0px;
    height: 21px !important;
    font-size: 9px;
}	
	
	.menu-on nav#navi {
    top: -100px;
    right: -100px;
}
	nav#navi {
    top: -800px;
    right: -800px;
    width: 500px;
    height: 500px;
}
	
	#navigation {
    top: 100px;
    left: 0;
    padding-right: 0;
    right: 10px;
}
	#navi li {
    font-size: 20px;
}
#navi li a {
    padding: 10px;
    padding: 10px 15px 5px;
    color: #fff;
}
	.menu-on.scroll-menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {
    right: 65%;
    top: 50px;
}
	
    .menu-icon-wrapper.menu-icon-wrapper-scroll {
        top: 0;
    }
	.scroll-menu-on .menu-icon-wrapper.menu-icon-wrapper-scroll {
    right: -10px;
}
nav#navigation {
    width: 61% !important;
    padding-top: 131px;
    font-size: 18px !important;
    line-height: 0;
}
	    #navi li {
        font-size: 16px;
    }

    ul#menu-hauptmenue {
    padding: 0;
}
}		

	
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT /////////////////////////*/



#wrapper{
	width:100%;
	min-height:100%;
	float:left;
	}	
#content {
    width: 1280px;
    height: auto;
    padding: 180px 0 30px 0;
    margin: 0 0 0 100px;
    overflow: hidden;
}
.page-template-default #content .con,  .page-template #content .con{ width: 850px; }
.blog #content .con{width:1280px;}

@media screen and (max-width:1340px){ 
	#content{
		width:100%;     
		padding: 40px 30px 30px 30px;
	}
	
	#content {
		margin: 0 0 0 0px;
	}
}


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

	.page-template-default #content .con, .page-template #content .con {
		width: 100%;
	}
	#content{
		width:100%;     
		padding: 100px 30px 30px 30px;
	}
}





/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  LIGHTBOX ///////////////////////// */

.kontakt-icons {
    position: fixed;
    right: 12px;
    top: 105px;
    z-index: 1000;
}
.kontakt-icon {
    width: 60px;
    height: 60px;
    background: #666666;
    padding: 12px;
    cursor: pointer;
    border-radius: 3px;
}
.kontakt-icon img{width: 100%;}
.lightbox-kontakt-wrapper, .lightbox-info-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: #fff;
    z-index: 9999;
	    overflow: scroll;
    padding: 30px;
	-webkit-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
}
.kontakt-visible .lightbox-kontakt-wrapper {
    left: 0;
    padding-top: 120px;
}
.info-visible .lightbox-info-wrapper{left:0;}
.lightbox-kontakt.con h2 {
    text-align: center;
}
.lightbox-kontakt.con {
    width: 850px;
	text-align: center;
}
.lightbox-kontakt input.wpcf7-form-control.wpcf7-submit {
    margin: 0 auto;
}
.close {
    position: absolute;
    right: 20px;
    top: 110px;
    width: 40px;
}
.close img {
    width: 100%;
}

@media screen and (max-width:1140px){ 
	.lightbox-kontakt.con {
		width: 100%;
	}
}



/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  FOOTER ///////////////////////// */


button#search-toggle {
    position: fixed;
    top: 7px;
    width: 26px;
    right: 60px;
	z-index: 1000;
}
button.searchicon {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    line-height: 0; /* optional: verhindert Lücken unter dem Bild */
}

section#search {
    position: fixed;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(255, 255, 255, .8);
    padding: 10%;
    box-sizing: border-box;
	-webkit-transition:1s ease-in-out all;
	transition:1s ease-in-out all;
}
.search-on section#search{left:0;}
section#search #searchsubmit {
    width: 20%;
}

section#search input {
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 100px;
}

img.close_search {
    position: absolute;
    top: 30px;
    right: 30px;
}



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

button#search-toggle {
    top: 7px;
}
	section#search {
    padding: 220px 32px;
}
	    img.close_search {
        top: 120px;
        right: 30px;
        width: 50px;
    }
}

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

	    .toggle-on button#search-toggle {
        right: 25px;
        top: 85px;
    }
		button#search-toggle {
    right: -100px;
}
	 .toggle-on  button#search-toggle {

    top: 85px;
    width: 26px;
    right: 30px;
    z-index: 1000002;
}
	section#search #searchsubmit {
    width: 100%;
    padding: 10px !important;
    height: auto;
}
	
section#search input#s {
    width: 100%;
}


}







.menu-footer-menue-container {
    width: 100%;
    text-align: left;
    padding: 30px 30px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding-left: 0;
}



.menu-footer-menue-container ul, .menu-footer-menue-container li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.menu-footer-menue-container li {
    padding: 0 30px;
}

.menu-footer-menue-container li a {
    color: #464646;
    font-weight: 600;
    font-size: .8rem;
}

.c66.kontakt-btn {
    padding: 0 120px;
}





.kontakt-footer, .kontakt-footer h2, .kontakt-footer h3, .kontakt-footer a:link, .kontakt-footer a:hover, .kontakt-footer a:active, .kontakt-footer a:visited { color: #fff !important; }

.kontakt-footer { clear: both; overflow: hidden; background: #f2f2f2; padding: 200px; }

.kontrast01 .kontakt-footer {
    background: #000000;
}

.c03.kontakt-btn {
	padding: 100px 60px 0px 120px;
}
.c03.kontakt-btn a.btn {
    width: 100%;
    box-sizing: border-box;
    background-color: #00847e;
    color: #fff;
    font-size: .8rem;
	-webkit-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
}

.c03.kontakt-btn a.btn:hover{
	color:#000;
	 background-color: #d3f504;
}


img.kontakt_img {
    border-radius: 100%;
    width: 260px;
    float: right;
    vertical-align: bottom;
    display: inline-block;
    position: absolute;
    right: 9%;
    border: 15px solid #87be0e;
    bottom: 18%;
	    z-index: 2;
}
.c03.kontakt-img {
    position: relative;
}
img.kontakt_bg {
    width: 80%;
    float: right;
}
.c03.kontakt-daten_footer {
	line-height: 140%;
}



.c03.kontakt-daten_footer {
    padding-top: 10px;
}
footer {
    padding: 30px;
    width: 50%;
    float: right;
}


@media screen and (max-width:1660px){ 
	.c03.kontakt-daten_footer {
		padding-top: 70px;
	}
	.c03.kontakt-btn {
		padding: 50px 60px 0px 120px;
	}
}

@media screen and (max-width:1340px){ 
    .c03.kontakt-btn {
        padding: 30px 30px 0px 30px;
    }
	    .c03.kontakt-daten_footer {
        padding-top: 30px;
    }
.c03.kontakt-daten_footer {
    font-size: 1rem;
    line-height: 140%;
}
	img.kontakt_img {
    width: 160px;
    right: 23%;
    bottom: 41%;
}
img.kontakt_bg {
    width: 100%;
    float: right;
    position: relative;
    right: 0;
    top: -60px;
}

.menu-footer-menue-container li {
    padding: 0 15px;
}
nav.menu-footer-menue-container {
    padding: 30px 0;
}

}

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

.kontakt-footer {
    clear: both;
    overflow: hidden;
    padding-left: 0;
    padding-top: 50px;
}
	
    .c03.kontakt-daten_footer {
        padding-right: 30px;
    }
}



@media screen and (max-width:768px){
 footer {
        padding: 20px 10px;
        width: 100%;
        float: right;
        box-sizing: border-box;
    }
.c03.kontakt-img {
    clear: both;
    overflow: hidden;
}
       img.kontakt_img {
        width: 54%;
        right: 16%;
        bottom: 14%;
    }
	    img.kontakt_bg {
        position: static;
    }
.c03.kontakt-daten_footer {
    padding: 0 30px 100px;
}

nav.menu-footer-menue-container {
    padding: 0;
}


}







li.lek-el_nav.aktiv {
    font-weight: 700;
    color: #87be0e;
}