XXdiv {border: 0px solid black;}
XXtd, li {border: 0px dotted red;}
ul {border: 0px solid green;}
img {border: 0px dotted red;}

html {height: 100%;}
body { 	
	background: #f1f4f5;
	/*background: #fff url(img/bodybg.png) repeat-x 0 0;*/
	margin: 0; padding: 0;
	height:100%;
	width:100%;	
}

/* Popup */
#overlay {
	position: fixed; top: 0;	bottom: 0;  left: 0;  right: 0;
	z-index: 9999;	
	width: 100%; height: 2000px;  
	transition: opacity 200ms;
  visibility: none;
  background: rgba(0,0,0,0.5);
  /* background: rgba(255,255,255,0.5); */
}
.infobox-container {
	position: fixed; top: 30px; 
  z-index: 9999;  
  width: 100%;   
}
.infobox-long {
	display: block;
	position: relative;
  overflow-x: hidden; overflow-y: scroll;
  margin: 0 auto;
  width: 92%; max-width: 1000px; 
  height: 70%; max-height: 70vh;
  padding: 50px 4%;
  text-align: center;
  background: #fff;
}

.infobox-long h2 {margin: 80px 0 5px 0; font-size: 30px; color: #00898f; font-weight: 700;}
.infobox-long h3 {margin: 0px 0 20px 0;  font-size: 24px; color: #00898f; font-weight: 400; line-height: 24px;}
.infobox-long p {font-size: 17px;}

.header-outer {display: inline-block; width: 100%; background-color: #e5a100;}
.header-wrapper {display: block; margin: 0 auto; width: 100%; max-width: 1280px; height: 40px;}
.headerbox {text-align: right; width: 100%; max-width: 1280px; padding: 0px 0% 0px 0%;}
.headerbox p, .headerbox a {margin-top: 10px; font-size: 24px; color: #fff; /*color: #00898f;*/ font-weight: 500;}

	
#topspacerbox {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; margin: 0 auto; margin-top: 0px;  padding: 0; transition: 0.5s all;}	
.wrapper-content.page-id-1 #topspacerbox {margin-top: 250px;}

.topspacer {width: 100%; max-width: 1280px; margin: 0 auto;}
/*#topspacerbox {width: 100%; margin: 0 auto; margin-top: 0px; padding: 0;}	*/
/*.topspacer {display: none;} */
/*.topspacer img {padding-top: 120px !important; display: block; height: auto !important; max-width: 100%; width: auto !important;}*/	

/* Navigation oben-rechts */
#nav-right {position: absolute; top: 30px; right: 0%; text-align: right; margin: 0; padding:0; }
/*#topmenubox.page-id-1 #nav-right {position: absolute; top: 70px; right: 0%;}*/
#nav-right a, #nav-right {color: #555354; font-size: 14px; line-height: 20px;}
#nav-right a:hover, 
#nav-right a.active {color: #79295b;}
#nav-right li {list-style: none; margin: 0; padding: 0; line-height: 20px;}

.pic {display: none;}
.slider-wrapper.page-id-2 {display: block;}


/* Mini Slider */
#slideshow {
  /*margin: 80px auto;*/
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 0px;
  /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);*/
}
#slideshow > div {
  position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.outer {width: 100%;  /* margin: 0 auto 0 auto;*/ background-color: transparent;}

.wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; position: relative;}
.wrapper-content {position: relative; width: 100%; max-width: 1280px; margin: 0 auto; margin-top: 50px; padding: 0; background: #fff;}
.wrapper-content.page-id-1 {margin-top: 0px;}

.prozess-trenner img, .contentbox-wrapper img, .infobox-long img, #slider img, .m_inner img, .button-box a img, .topspacer img, img.spacer-img, img.bg_content, .header img, img.logo, .gallery-box a img, #button-kontakt img, .content img, img.img-start, .aktuell-content img, .logo.mobile-only img {
	margin: 0px; padding: 0; display: block; height: auto !important; max-width: 100%; width: auto !important; /*max-height: 880px;*/}
img.bg_content {padding-top: 35px;}
.topspacer img {margin-top: -10px;}

#topmenubox.page-id-1 .logo.mobile-only img, 
.contentbox.contentblock6 .content51 img.mobile-only, 
.contentbox.contentblock6 .content52 img.mobile-only,
img.mobile-only {display: none;}

.topheader {position:relative;  padding-bottom: 12%; width:100%; background: #fff url(img/header.jpg) no-repeat fixed center top; background-size: 100% auto, auto;}
.topheader p {bottom:10%; width:90%; position:absolute; text-align: center; padding: 0 5%; font-size:1.6em; line-height:110%; color:#fff; text-shadow: 0px 2px 30px #000; }

#static_headerbox {width:100%; height: 550px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover;}

/*frontpage*/
#topparallax {width:100%; position:relative; padding-top:40%; background: #fff url(img/parallaxheader.jpg) no-repeat; background-position: center 0; background-size: 100% auto, auto;}
.ptext {bottom:20%; width:90%; position:absolute; text-align: center; padding: 3% 5%; background: rgba(0,0,0,0.1); border-top: 1px solid #fff; border-bottom: 1px solid #fff;  }
.ptext * {text-shadow: 0px 2px 30px #000;  color: #fff ! important;}
#topparallax a.topdown img {width:100px; margin-top: 20px}




/*=== Contentbereich */
.container {/*margin: 0 auto 0 auto;*/ width: 100%; padding-top: 0px;}


/*====================================================
Alles rechts neben left
ab hier: 1/3 grid
*/
.contentbox {/*min-height: 1000px;*/ width: 72%; margin-top: 0px; padding: 30px 13% 70px 15%; }
.contentbox.relative, .contentbox-wrapper.relative {position: relative;}
.contentbox.contentblock1 {width: 100%; margin-top: 0px; padding: 65px 0% 50px 0%; font-size: 23.5px; line-height: 110%; background: #fff; /* background: url(img/bc_Webseite_1280-1) no-repeat;*/}
.contentbox.contentblock1 h1 {padding: 0 10%; text-align: center;}
.contentbox.contentblock1 h3 {margin-bottom: 49px;}
.contentbox.contentblock1 h5 {font-size: 32px; font-weight: 400; margin: 40px 0 0 0; line-height: 120%;}

.contentbox.contentblock2 {position: absolute; top: 0; left: 0; width: 85%; margin-top: 0px; padding: 65px 7% 70px 8%;}
.contentbox.contentblock2 h2 {color: #005960;}

.contentbox.contentblock3 {z-index: 0; width: 77%; margin-top: -10px; padding: 70px 11.5% 70px 11.5%; background: #fff url(img/hg-3.png) no-repeat; /*background: url(img/bc_Webseite_1280-3) no-repeat;*/}

.contentbox.contentblock4 {position: absolute; top: -10px; left: 0; width: 84%; margin-top: 0px; padding: 70px 7% 70px 8.5%;}
.contentbox.contentblock4 h3 {margin-bottom: 40px;}

.contentbox.contentblock5{width: 80%; margin-top: 0px; padding: 55px 10% 90px 10%; background: url(img/hg-5.png) no-repeat; /* background: url(img/bc_Webseite_1280-5) no-repeat; */}
.contentbox.contentblock5 h2 {color: #005960;}

.contentbox.contentblock6 {width: 100%; margin-top: 0px; padding: 35px 0% 30px 0%; background: url(img/hg-6.png) no-repeat; /*background: url(img/bc_Webseite_1280-6) no-repeat;*/}
.contentbox.contentblock6 .content {width: 80%; margin-top: 0px; padding: 0px 10% 30px 10%;}
.contentbox.contentblock6 p {font-size: 22px;}
.contentbox.contentblock6 .two-column {padding-top: 15px;}
.contentbox.contentblock6 .two-column p {margin: 0;}

.contentbox.contentblock6 .content51 {display: inline-block;}
.contentbox.contentblock6 .content51 img {float: left; width: 24%; padding-top: 50px;}
.contentbox.contentblock6 .content51 img.image_left {display:none;}
.contentbox.contentblock6 .content51 div.text {padding: 100px 10% 0 30%;}

.contentbox.contentblock6 .content52 {display: inline-block;}
.contentbox.contentblock6 .content52 img {float: right; width: 24%; padding-top: 50px;}
.contentbox.contentblock6 .content52 img.image_right {display:none;}
.contentbox.contentblock6 .content52 div.text {padding: 100px 30% 0 9.5%;}

.contentbox.contentblock6 .content51 h4, .contentbox.contentblock6 .content52 h4 {margin: 0; padding: 0; line-height: 0;}

.content, .top_content {display:inline-block; padding-right: 0%; margin-left: 0; }
.content.narrow {width: 28%; margin-top: 90px; padding-right: 0%; }
.content.contentnarrow {float: left; width: 60%;}
.contentbox.page-id-1 .content.contentnarrow {width: 60%;}
.contentbox.page-id-2 .content {display: inline-block;}
.contentbox.page-id-3 .content {display: inline; padding-bottom: 50px;}
.contentbox.page-id-5 h3 {margin: 30px 0 30px 0; font-weight: 700; color: #79295b;}

.top_content {display:block; margin-top: 0; /*color: #fff;*/}
.top_content.ref h2 {margin-top: 0; padding-top: 20px; /*color: #fff;*/}
.top_content.kunden h2 {margin: 0 0 20px 0; padding-top: 50px; }
._top_content p {margin: 0;}

.content.desktop, .gallery-text-box.desktop, span.desktop {display: block;}
 
.slogan {text-align: center; padding-top: 20px; color: #79295b; font-weight: bold;}


.content.contentwide  {width: 100%; margin:0 0 0 0; }
.page-id-9 .contentwide, .page-id-8 .contentwide {width: 94%; margin:0 3% 0 3%; }
.contentwide.center {text-align: center;}

.two-column {column-count: 2; column-gap: 25px;}

.content.narrow img { max-width:100%; height:auto ! important;}

/* Kacheln */
.kachel {
	position: relative;
  float: left;
  width: 28.8%;
  min-height: 250px;
  margin-top: 70px; margin-left: 3%;
  padding: 0 0 0 0;
  text-align: center;
  color: #005960;
  font-size: 22px;
  font-weight: 400;
  background: #eee;
  border: 4px solid transparent;
}
.contentblock2 .kachel {margin-top: 50px;}
.kachel p {font-family: 'Source Serif 4', Helvetica, serif; font-size: 24px; color: #fff;}
.kachel.verlauf {width: 28.8%; margin-left: 3%; margin-right: 3%; margin-top: 70px;}
.kachel.box58, .kachel.box61, .kachel.box64, .kachel.verlauf {margin-right: 0;}

.verlauf {
  /* Use transparent so the background image is visible */
  border: 4px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(to bottom, #005960, white);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.verlauf p {font-family:'Source Sans 3', Arial, sans-serif; color: #005960;}
.kachel-content {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
.kachel.box56, .kachel.box61 {background: #d5ad00;}
.kachel.box57, .kachel.box60 {background: #005a5f;}
.kachel.box58, .kachel.box59 {background: #262626;}

/* breite Box */
.kachel.box65 {float: none; display: block; width: 93.6%; margin: 0 3% 70px 3%; padding: 20px 0; min-height: auto; }
.verlauf1 {
  /* Use transparent so the background image is visible */
  border: 4px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(to top, #005960, white);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.kachel.box65 p {
	font-size: 40px;
	font-weight: 500;
	line-height: 45px;
	font-family:'Source Sans 3', Arial, sans-serif;
	color: #00898f;
}



/* flipbox */
.flipbox .flip-content {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  XXheight: 100%;
}


/* Button-Boxen */
.button-box-outer {display: inline-block; width: 100%; margin: 0; padding: 100px 0 70px 0;}
.button-box-wrapper {margin: 0 auto; width: 85%; margin-bottom: 50px;}

.button-box {float: left; width: 27%; min-height: 0px; margin: 0 9% 0 0; padding: 0 0 0 0; text-align: center; color: #005960; font-size: 22px; font-weight: 400;}
.button-box.box13 {margin: 0 9% 0 0; }
.button-box.box14 {margin-right: 0; padding-right: 0;}
.button-box h4 {margin-bottom: 25px; color: #fff; color: #005960;}
.button-box img {padding: 30px 0 20px 0;}
.button-box .textbox {min-height: 300px; padding: 10px 1%; background: #81bbb6;}

.button-box2 {position: relative; width: 83%; margin: 0 0 20px 0; padding: 60px 4.5% 0 4.2%; }
.button-box2.box14 {margin-right: 0; padding-right: 0;}
.button-box2 h4 {margin-bottom: 25px; color: #272a29;}
.prozess-img {position: absolute; top: 25px; left: 0; z-index:-1; width: 16%; height: 100px; }


.beispiele {position: absolute; left: 15%; top: -140px; z-index: 9; height: 50px; width: auto; padding: 0 0 0 5%; background: left url(img/prozess-mini.png) no-repeat; background-size: contain; background-position: 0% 5px;}
.beispiele h4 {font-size: 30px; color: #005960;}

.prozess-trenner {position: relative; display: inline-block; width: 100%; height: auto;}

.trenner {width: 100%; height: 1px; display:inline;}


/*
.button-box-outer { margin-left: 10%; width: 90%}
.button-box-wrapper {float: left; width: 92%; margin-bottom: 50px;}
table.box-table {border-spacing: 40px; border-collapse: separate;}
td.button-box {width: 220px; height: 220px; margin: 0 2% 0 2%; vertical-align: middle; text-align: center;}
.button-box.one   {background: #79295b;}
.button-box.two   {background: #ae4f8f;}
.button-box.three {background: #e5a100;}
.button-box.four  {background: #bcbeba;}
.button-box a {color: #fff;}
.button-box.four a {color: #00898f;}
.button-box a:hover {opacity:0.6;}
*/


/* Leistungen */
/*
.leistungsbox-wrapper {display: inline-block; width: 100%; padding-top: 50px;}
.leistungsbox-wrapper .spacer {clear: both; width: 100%; height: 1px; }
.leistungsbox {float: left; position: relative; display: block; position: relative; width: 29.75%; min-height: 230px;  margin: 0 5.0% 0 0; padding: 10px 0 10px 0; text-align: center; font-size: 19px;}
.leistungsbox.last-box, .team-box.last-box, .team-box.page-id-4.last-box {margin: 0 0 0 0;}
.leistungsbox-label {width: 100%; height: 25px; padding: 7px 0% 2px 0%; color: #f89d00; font-size: 21px; line-height: 25px; font-weight: 500;}
.leistungsbox-short p {display: inline;} 
.leistungsbox-full {position: relative;  padding: 0 0 30px 0;}

.contentbox.page-id-2 .arrow {width: 100%; padding: 5px 0; text-align: center;}
.contentbox.page-id-5 .arrow {position: absolute; bottom: 0px; right: 20px;}
a.more, .arrow a {font-weight: 500;}

.leistungsbox img {margin: 0 auto; padding: 0 0 10px 0; height: auto !important; max-width: 100%; width: auto !important;}	
.leistungsbox .title {padding: 10px 0 0 0; font-weight: 500;}
.leistungsbox p {margin: 0;}
.leistungsbox p.lineheight {line-height: 50px;}
.leistungsbox #post25 li {list-style: none;}
.leistungsbox ul {margin-top: 0; margin-bottom: 0; margin-left: 0; padding-left: 0;}
.leistungsbox li {padding: 3px 0;}
.leistungsbox  br {line-height: 150%;}
.leistungsbox span.list-style {font-size: 30px;}
*/
/*
.leistungsbox p strong {line-height: 35px;}
.leistungsbox #down25, .leistungsbox #post25 {padding: 8px 0;}
*/
.abrev {text-align: center;}
.abrev p {margin: 5px 0; font-size: 16px; font-style: italic;}

/* =========================== Teambox =============================== */

.teambox-wrapper {position: relative; margin-top: 100px;}
.teambox-wrapper.mobile-only {display: none;}

.team-box.section-id-21 {position: absolute; top:0; left: 4%;}
.team-box.section-id-23 {position: absolute; top:385px; left: 55.5%;}
.team-box.section-id-25 {position: absolute; top:655px; left: 66.5%;}
.team-box.section-id-27 {position: absolute; top:305px; left: -2.5%; z-index: 1;}
.team-box.section-id-29 {position: absolute; top:575px; left: 34.5%;}
.team-box.section-id-31 {position: absolute; top:210px; left: 27.5%; z-index: 1;}
.team-box.section-id-33 {position: absolute; top:-10px; left: 47.5%;}
.team-box.section-id-35 {position: absolute; top:600px; left: 3.5%;}
.team-box.section-id-37 {position: absolute; top:155px; left: 72.5%;}

.team-box {
  XXfloat: left;
  width: 325px; height: 325px; /* height erforderlich, sonst zittern */
  min-width: 165px; XXmin-height: 450px;
  XXmargin: 0px 4.0% 80px 0%; padding: 0px;
}
.team-box2 {
	float: left;
	width: 325px; height: 325px; /* height erforderlich, sonst zittern */
  min-width: 165px; XXmin-height: 450px;
  margin: 0px 4.0% 80px 0%; padding: 0px;
}
 
.team-box2 {
  width: 30.4%;
  margin: 0px 4.0% 80px 0%; padding: 0px;
}

.XXteam-box img {
	display: block;
	width: auto !important; XXmax-width: 325px; 
	margin: 0px; padding: 0;
}
.XXteam-box img {
  margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
  max-width: 325px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.team-box .mobile-content {display: none;}


/* hover mit Text */
.imageWrapper {
  position: relative;
  width: 100%;
  height: auto;
}
.imageWrapper img {
  display: block;
}
.imageWrapper .hoverLink {
  opacity: 0;
  position: absolute;top: 0;left: 0;  
  -webkit-backface-visibility:hidden;
  backface-visibility: hidden;
  
  XXbackground: #000000;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;    
}
.imageWrapper:hover .hoverLink {
  opacity: 0.9;
}
.imageWrapper .flip-content {
	position: absolute; top: 50%; left: 0%; 
	transform: translateY(-50%);
	text-align: center; 
  width: 100%; height: 100%; 
  
}


.flipbox {
  perspective: 2000px; 
}
.flipbox:hover .flipper, 
.flipbox.hover .flipper { 
  transform: rotateY(180deg); 
}

.flipper {	
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
}
.flipbox .front, 
.flipbox .back {
  position: absolute;top: 0;left: 0;  
  -webkit-backface-visibility:hidden;
  backface-visibility: hidden;
}

.flipbox .flip-content {
	position: absolute; top: 50%; left: 0%; 
	transform: translateY(-50%);
	text-align: center; 
  width: 100%; XXheight: 100%;   
}
.flipbox .flip-content,
.flipbox .flip-content a {font-size: 19px; color: #fff; font-weight: 400;}
.flipbox .flip-content h2 {color: #fff;}

.front {transform: rotateY(0deg);}
.back  {transform: rotateY(180deg);}

.flip-content p {
	font-family:'Source Serif 4', Helvetica, serif;
	font-size: 24px;	font-weight: 600; letter-spacing: 0px;
	color: #fff;
}
.flipbox-mobile {display: none;}	
	
	
	
/* -- Accordeon "Aus der Praxis" --	*/
.box-leistung {clear: both;	display: block;	position: relative; width: 75%; margin-right: 30px; margin-bottom: 25px; padding: 0px;}
/*.box-leistung.section-id-40 {width: 100%;} */
.box-leistung, .box-leistung a, .box-leistung p {font-size: 22px; line-height: 110%;}
.box-leistung a {color: #1d1d1b; font-weight: 600;}
.box-leistung p {margin: 0;}
.box-leistung-top {display: block; width: 100%; margin-top: 0px; color: #000; line-height: 15px; }

.box-leistung-top-left, 
.box-leistung .content-short,
.box-leistung-bottom {
	width: 96%; padding: 0px 0% 5px 4%;
}

.box-leistung-top-right {position: absolute; top: 2px; left: -4px; width: 20px; height: 20px;background-image: url("img/arrow-down.png"); background-repeat: no-repeat;}
.box-leistung-top-right.arrow-up {background-image: url("img/arrow-up.png"); background-repeat: no-repeat; display: none;}
/*.box-leistung-top-right.arrow-down {}*/
.box-leistung .content-short p {display: inline;}

.box-leistung-bottom a {color: #005960;}

.button-blog {position: absolute; bottom: -45px; right: 0; z-index: 1; width: 25%; height: 500px; background-image: url("img/button-erfahren2.png"); background-size: contain; background-repeat: no-repeat; background-position: center bottom;}
.button-blog-mobile {display: none; }
.button-blog-mobile {position: absolute; bottom: -45px; right: 0; z-index: 1; width: 32%; height: 500px; background-image: url("img/button-erfahren-mobile2.png"); background-size: contain; background-repeat: no-repeat; background-position: center bottom; }

/* ====================================================================== */



img.news_post_image {float: right; padding-left: 20px;}

.post_short_img img{max-width: 300px;}
.post_short {padding: 20px;}
.news-more {padding: 0 0 12px 0; text-align: right; }
.news-more a {font-size: 15px; color: #2a6065;}	

a.section_anchor {}


/* Infos */
.yellow-box {padding: 20px 3%; font-size: 22px; background: #e5a100;}
.contentbox.page-id-5 .yellow-box h3 {margin-top: 10px; font-weight: 500; color: #00898f;}

.infobox {position: relative; display: block; position: relative; width: 94%; mXXin-height: 250px;  margin: 0 5.0% 0 0; padding: 10px 3% 10px 3%; font-size: 19px;}
.infobox p.inline {display: inline;}
.infobox a.more {font-weight: 500;}
.infobox h4 {margin-bottom: 5px; font-size: 22px; color: #00898f;}




/* Impressum, Datenschutz */
.contentbox.page-id-8 h2, .contentbox.page-id-9 h2 {font-weight: 700;}
.contentbox.page-id-9 li {padding: 5px 0;}


img.initiale {float: left;  margin-top: 0px;  padding: 0px 5px 0px 0px;}


.dummy-block {width: 100%; position: absolute; top: -70px;}
hr.hr-bottom {margin: 50px 0px 0px 0px;}

.clearcontent {clear:both; }


.bottomspacer {display: block; padding-bottom: 0px;  width:100%; }
.bottomspacerbox {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0;}


/* ------ Footer ------ */
.footer-outer {width: 100%; background-color: #e3eaec;}
.footerbox {display: inline-block; margin: 0px auto; width: 100%; max-width: 1280px; padding: 0px 0% 20px 0%; /*background: url(img/bc_Webseite_1280-7) no-repeat;*/ background: url(img/hg-7.png) no-repeat; background-size: cover;}
.footerbox, .footerbox a, .footerbox p {font-size: 14px;line-height: 125%;  font-weight: 300;}
.footerbox p {/*margin: 0;*/}

.footerbox .left, .footerbox .center {float:left; padding-top: 120px;}
.footerbox .left {padding-left: 38%;}
.footerbox .center {padding-left: 4.55%; width: auto;}
.footerbox .right {float: right; width: auto; margin: 0; padding: 130px 8% 0 0; }
.footerbox .right li {text-align: right; list-style: none; line-height: 100%;}

.footerbox .mobile-only, img.logo-footer {display: none;}




.back {text-align: right;}
.back p {color: #272a29;}
.backLink {padding: 10px 0 0 0;}

#gototopswitch {float:right; margin: 10px 10px 0 0}



/* --- Top and Menu Box --- */

#topmenubox {width: 100%; /*height:250px;*/ margin:0; position:fixed; z-index:5000; top:0; left:0%;  transition: 0.5s all; background: transparent; /* border-bottom: 2px solid #a8afb6;*/}

#topmenubox .m_inner {margin: 0 auto; position:relative; /*height:190px;*/ XXwidth: 100%; max-width: 1280px; padding: 0; background: #00898f; transition: 0.5s all;}
#topmenubox.page-id-1 .m_inner {height: auto; background: transparent;}
#topmenubox .m_inner {height: 80px;  transition: 0.5s all;}

#topmenubox a.logo.desktop-only {display: none;}

#topmenubox a.logo.mobile-only img {position: absolute; z-index: 1; top: 10px; left: 2%;/*padding: 10px 0px 0px 2%*/}
#topmenubox.page-id-1 a.logo.desktop-only {display: block; transition: 0.5s all;}
#topmenubox.page-id-1 a.logo.mobile-only  {display: none; transition: 0.5s all;}
#topmenubox a.logo.special, #topmenubox.page-id-1 a.logo.special {display: none; transition: 0.5s all;}

#topmenubox .nav-wrapper {position: absolute; bottom: 0px; width: 100%; /*background: #00898f;*/}

#topmenubox.page-id-1 .nav-wrapper {position: fixed; top: 0px; left: 0px; height:80px;  transition: 0.5s all; }
/*#topmenubox.page-id-1 .nav-wrapper {position: absolute; bottom: 20px; background: transparent;}*/


/* reduced */
#topmenubox.reduced {height: 80px; transition: 0.5s all;}

.wrapper-content #topspacerbox.reduced {margin-top: 250px; transition: 0.5s all;}

#topmenubox.page-id-1.reduced a.logo.desktop-only {display: none; transition: 0.5s all;}
#topmenubox.page-id-1.reduced a.logo.mobile-only  {display: block; transition: 0.5s all;}
#topmenubox.page-id-1.reduced a.logo.mobile-only img {display: block; transition: 0.5s all;}

#topmenubox.page-id-1.reduced .m_inner {height: 80px;  transition: 0.5s all; background: #00898f;}
#topmenubox.page-id-8,
#topmenubox.page-id-9 {height: 80px;  transition: 0.5s all; }

#topmenubox.reduced .nav-wrapper {position: fixed; top: 0px; left: 0px; height:80px;  transition: 0.5s all; }

#topmenubox.page-id-8 .nav-wrapper,
#topmenubox.page-id-9 .nav-wrapper {position: fixed; top: 0px; left: 0px; height:80px; background: #00898f;}
#topmenubox.page-id-8.reduced .nav-wrapper, 
#topmenubox.page-id-9.reduced .nav-wrapper {position: fixed; top: 0px; left: 0px; height:80px; }


/* Search Box in header */
li.search_box_li a {border: none ! important;}

.menuebox {width: 75%; height:100%; float:left; position:relative;} 
.toggleMobileMenu {display:none;}
#openrightboxswitch, #closerightboxswitch{display:none;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	####	Header Menu #####
	#######################

	Horizontal Drop-Down Menu based off :
	http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
#nav {text-align: center; border: 0;	padding: 0;}
#XXtopmenubox.page-id-1 #nav {position: absolute;	right: 0%; bottom: 45px;}

#nav ul,  #nav2 ul {	
  display: inline-block;
  top: 0px;
  list-style-type: none;
  list-style-image: none;
  width: auto;
  position: relative;
  z-index: 800;
  margin-left: 0px;
  padding-left: 0px; 
}
#topmenubox.page-id-8 #nav ul, 
#topmenubox.page-id-9 #nav ul {top: -15px;}
#topmenubox.page-id-8.reduced #nav ul, 
#topmenubox.page-id-9.reduced #nav ul {top: 0px;}

#nav ul li,  #nav2 ul li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}

/* Root Level Link Formatting */
#nav ul li {float: left; display:inline; color: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}
#topmenubox #nav ul li a {display: block; padding: 0px 30px 0px 30px; font-size: 20px; border-right:0px #ddd solid; color: #fff; text-decoration: none; /*font-weight: bold;*/ text-transform: uppercase; letter-spacing: 0px; background-repeat: no-repeat;}
#topmenubox.page-id-1 #nav ul li a {padding: 0px 52px 0px 52px; font-size: 23px; line-height: 0px;}
#topmenubox.reduced   #nav ul li a {padding: 0px 30px 0px 30px; font-size: 20px; line-height: 0px;}


#nav ul li a span {display:block; padding: 9px 0px 5px 0px; }

/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus , #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent  {color: #000; /*background: #fff;*/ border: none;}
/* #nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent {color: #fff; background: #2a6065 ; } */
/*
#nav ul li.menu-first a:hover span, #nav ul li.menu-first a.menu-current span {border-bottom: 2px solid #ecc111; padding-bottom: 4px;}
*/
#nav ul li.Home,
#nav ul li.Kontakt,
#nav ul li.Blog,
#nav ul li.Impressum, 
#nav ul li.Datenschutz {display: none;}

/*Current page Customisations*/
/* #nav a.menu-current		{font-weight: bold;} */

/* 2nd Child menu */
#nav  li ul {position: absolute; right:10000px; width: 180px; margin-top: 0px; opacity:0.0; border-bottom: 0px solid #fff; border-left: 0px solid #fff; background: transparent; /* box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);*/}
#nav  li ul li {text-align: left; font-weight: normal; margin: 0; margin-left: 37px; padding: 0; line-height: 1.2em; background: #fff }
#nav  li ul li a {width: 180px; margin:0; padding: 0px 20px 0px 20px; text-align:left; background: none;}
#nav  li ul li a span {display:block; padding:0px; text-shadow: none;  color: #333;  font-weight: normal; font-size: 14px; line-height:45px; text-transform: uppercase; border-top: 2px solid #ecc111; }

/* 2nd Child menu: kurze Trennlinie oben */
#nav  li ul li.menu-first a span {border: none;}
#nav  li ul li.menu-first a span:after {content: ""; display: block; position:absolute; top: 0; left: 20px; width: 38%; border-top: 2px solid #ecc111; }

#nav ul li.menu-first ul li a:hover span {border-bottom: none; padding-bottom: 0px; color: #ecc111;}
#nav ul li ul li.menu-last { border-bottom: 5px solid #fff; }



/* 2nd Child link hover */
#nav  li ul a:hover,  #nav  li ul a.menu-current { /* text-shadow: 1px 2px 4px #000;*/}
#nav  li ul li a:hover span {color: #ecc111;}
#nav  li ul a.menu-expand {background: transparent url(img/arr-right.png) no-repeat right 5px ; }
#nav  li ul a.menu-parent {background: #2a6065 url(img/arr-right.png) no-repeat right 5px; }

/* Show and hide */
#nav  li:hover ul, #nav  li a:focus ul, #nav li.tabselected ul {right:-20px; XXmargin: -3px 0 0 0; opacity:1; transition:0.5s opacity;}
#nav  li ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover ul ul, #nav  li.subMenu ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav  li:hover>ul, #nav  li li:hover>ul { opacity:1; margin-left: 0;  transition:0.5s opacity; z-index: 1000;}
#nav  ul li ul li:hover>ul {margin-left: -30%;  opacity:0.9;}

/* 3rd Child Menu Appreances */
#nav  li ul li ul	{ width: 180px; margin: 10px 0 0 -40%; z-index: 2000; }
#nav  li ul li ul li	{width: 100%;}
#nav  li ul li ul li a 	{ width: 100%;}

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
	position: absolute;
	top: 1px;
	left: 100%;
}

/* Better: */
#nav li:hover {
	z-index: 1000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */													
}

.nav_kontakt {float: right; text-align: right; width: 10%; padding: 18px 6% 0 0;}	
.nav_kontakt a {font-size: 14px; color: #fff; text-transform: uppercase;}

/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer_menu {padding-bottom: 10px;}
#footer_menu a { display: inline-block; padding: 2px 10px; border-right: 1px solid #999;}
#footer_menu a:first-child {border-left: 1px solid #999;}
#footer_menu a.menu-current {font-weight:bold;}



/*COuld bee visible on Desktop*/
#nav2 {width:250px; height: auto; position:absolute; left:-300px; }	

.showonmobiles {display:none;}

i.fas {font-size: 11px; color: #000;}

i.fa-redo-alt {position: absolute; bottom: 20px; left: 47%; color: #fff; font-size: 20px;}


/* ============================= Responsive =================== */

@media screen and (max-width: 1280px) {
	div {border: 0px solid red;}
	
	.headerbox p, .headerbox a {font-size: 20px; line-height: 30px;}
	
	.box-leistung, .box-leistung a, .box-leistung p, .box-leistung h4 {font-size: 20px; line-height: 130%;}

	.outer, .mainbox {width:100%; margin: 0 0 0 0;}
	.contentbox,
	.contentbox.contentblock2 {width: 84%; padding: 20px 8%;}
	.contentbox.contentblock2 { background: #8cbeb9;}
	
	#topmenubox #nav, 
	#topmenubox.page-id-1 #nav,
	#topmenubox.page-id-1.reduced #nav,
	#topmenubox.page-id-1.reduced #nav-right {
  	/*position: absolute; right: 3%;*/
  }
  
	
	#topmenubox.page-id-1 #nav ul li a {padding: 0px 30px 0px 30px; font-size: 20px;}
	
	#nav-right {position: absolute; right: 3%;}
	#nav-right a, #nav-right {XXfont-size: 17px;}
	
	.contentbox h1, .contentbox h2 {font-size: 36px;}	
	.contentbox h3 {font-size: 24px; margin-top: 5px;}
	.contentbox h4 {font-size: 24px; margin-top: 0px;}
	.contentbox.contentblock1 h5 {margin: 40px 0 0 0; line-height: 120%; font-size: 30px;}
	.contentbox p, .kachel p {font-size: 20px;}	
	.flip-content p {margin: 5px 0; font-size: 20px;}
	
	.contentblock4 {padding-bottom: 50px;}
	.footerbox {width: 100%; padding: 0px 0%;}
}



@media screen and (max-width: 1170px) {	
	div {border: 0px solid blue;}
	
	img.hg-2 {padding-top: 50px;}
	.contentbox h1, .contentbox h2 {font-size: 36px;}	
	.contentbox h3 {font-size: 24px; margin-top: 5px;}
	.contentbox h4 {font-size: 24px; margin-top: 0px;}
	.contentbox.contentblock1 h5 {margin: 40px 0 0 0; line-height: 120%; font-size: 30px;}
	.contentbox p {font-size: 20px;}	
	.flip-content p {margin: 5px 0; font-size: 20px;}	
	.infobox-container {width: 94%; padding: 0 3%;}
	
	.contentbox.contentblock3 {padding-bottom: 70px;}
	.contentblock4 {padding-bottom: 200px;}	
}



@media screen and (max-width: 1024px) {
	div {border: 0px solid yellow;}
	
	.headerbox {text-align: center;}
	
	#logo-wrap, #nav-right, .flex-direction-nav, .content.desktop, .zusatz-text, img.desktop-only {display: none;}	
	img.mobile-only, .content51 img, .content52 img {display: block;}
		
	#topmenubox {height: 80px; background: #008a90;}
	#topmenubox #nav {display:none;}
	
	/*.topmenubar {width: 70%; margin: 0 auto; padding-top: 15px;}*/
	.topmenubar ul#topmenu {float: right; padding-top: 35px;}
		
	.toggleMobileMenu {display:block; position: absolute; top: 30px; right: 7%; width: 20px; height:20px; /*margin: 50px 8% 0 0; padding-right: 20px;*/ background: url(img/menuswitch.png) no-repeat top right; }
	.toggleMobileMenu2 {display:block; position: absolute; top: 20px; right: 20px;
	 width:50px; height:50px; margin: 0; padding: 0; background: url(img/button_close_nav.png) no-repeat top right; }
	
	/*.topspacer {padding-top: 60px;}*/
	#XXtopparallax {padding-top: 50%; }
	
	.topmenubar ul.gallery_menu li a {font-size: 18px; line-height: 40px;}
	
	#topspacerbox, 
	.wrapper-content.page-id-1 {margin-top: 100px;}
	.wrapper-content.page-id-1 #topspacerbox,
	.wrapper-content.page-id-1 #topspacerbox.reduced {margin-top: 80px;}
	
	#topspacerbox {margin-top: 80px;}
	.wrapper-content, .wrapper-content.page-id-1 {margin-top: 80px;}

	
	#topmenubox.reduced, 
	#topmenubox .m_inner, 
	#topmenubox.reduced .m_inner, 
	#topmenubox.page-id-1 .m_inner,
	#topmenubox.page-id-1.reduced .m_inner {height: 100px; XXwidth: 100%; background: #008a90;}
	#topmenubox .m_inner, #topmenubox.page-id-1 .m_inner {background: transparent;}

	#topmenubox a.logo.mobile-only img, 
	#topmenubox.reduced a.logo.mobile-only img {
		position: absolute; left: 3%; bottom: 0px;
	  XXmax-height: 100%;
	  max-width: 50%;    
	  padding: 10px 0;
	}
	#topmenubox.page-id-1 a.logo.desktop-only img {display: none;}
	#topmenubox.page-id-1 a.logo.mobile-only img,
	#topmenubox.page-id-1 a.logo.mobile-only {display: block;}
	
	#topmenubox.reduced, 
	#topmenubox .m_inner, 
	#topmenubox.reduced .m_inner, 
	#topmenubox.page-id-1 .m_inner,
	#topmenubox.page-id-1.reduced .m_inner {/*display: inline-block;*/ height: 80px; XXwidth: 100%;}
	
	#topmenubox a.logo.mobile-only img, 
	#topmenubox.reduced a.logo.mobile-only img {
		position: absolute; left: 3%; bottom: 0px;
	  max-width: 45%;    
	  padding-bottom: 15px;
	}
	
	#topmenubox.page-id-1 a.logo.mobile-only img, 
	#topmenubox.page-id-1 a.logo.mobile-only {display: none;}
		
	#topmenubox a.logo.mobile-only img, 
	#topmenubox.reduced a.logo.mobile-only img {padding: 0;}
	
	#topmenubox.page-id-8 .nav-wrapper,
	#topmenubox.page-id-9 .nav-wrapper {position: fixed; top: 0px; left: 0px; height:80px; background: #00898f;}

	
	/* --- Nav2 --- */	
	
	#nav2 {width:100%; height: auto; position:fixed; left:-100%; top:0px; z-index:2000; transition: left 1s; background: #8cbeb9;}	
	#nav2 ul {width: 100%; margin-top: 70px; } /* mux */
	
	#nav2 li {width:100%;  padding: 0 0 0 0;  border-bottom: 1px solid #00898f;}
	#nav2 li.menu-first, #nav2 li.Wirklichkeit {border-top: 1px solid #00898f;}
	#nav2 li.menu-current {background: #8cbeb9;}
	#nav2 li.Home, #nav2 li.Blog {display: none;}
	#nav2 li a {display:block; margin: 0 20px 0 20px; padding: 10px 0 10px 10px; font-size:20px; color:#fff; text-decoration: none; text-align: center; /*border-bottom: 1px solid #fff;*/}
	#nav2 li:hover {background: #00898f;}
	/*#nav2 li a:hover {color: #000;}*/
	
	#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px;}
	#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px;}
	#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px;}
	
	#nav2 li ul {display:none;}
	#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}
	#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}
	
	#nav2 li a.menu-expand {background: transparent url(img/arr-down.png) no-repeat left center ;}
	#nav2 li a.menu-current {color:#fff; /* text-shadow: 1px 2px 4px #000;*/}
	
	#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {font-weight:bold; background: #ddd url(img/arr-right.png) no-repeat 2px center ; }
	#nav2close {display:none; z-index:1990; position:absolute; top:0; width:100%;  height: 900px; background-image:none;}
	
	.dummy-block {width: 100%; position: absolute; top: -1.0em0px;}
	/* */
	
	
	.prozess-img {position: absolute; top: 40px; left: 0;}
	
	.mobilemenuopen #nav2 {left: 0%;}
	.mobilemenuopen #nav2close {display:block;} 
	
	.mini-menu {display:block;} 	
		
	
	.contentbox h1 {font-size: 1.2em; margin: 00px 0; }
	.contentbox h2 {font-size: 1.2em;}
	.contentbox h3 {font-size: 1.0em; margin-bottom: 30px;}
	.contentbox.contentblock1 h5 {margin: 40px 0 0 0; line-height: 120%; font-size: 24px;}
	
	p, li, .box-faq p, .box-faq a, .box-faq h4, .headerbox p, .leistungsbox {font-size: 20px; line-height: 150%;}
	.leistungsbox-short p {display: block;}	
	
	
	.container {padding-top: 2px;}		
	.mainbox .contentwide  {width:96%; margin:0 0 0 2%; padding-top: 50px;}
	.content, .top_content {width:100%; margin:0; padding:0; float: none; }
	

	
	.contentbox.contentblock2 .content {}
	.contentbox.contentblock2 {position: relative; padding: 20px 8% 50px 8%;}
	img.hg-2 {display: none;}
		
	.contentblock2 .kachel {margin-top: 30px;}
	.kachel, .verlauf.kachel {margin-top: 50px;}
	.kachel.box65 p {font-size: 1.2em;}
	
	.contentbox.contentblock4 {width: 84%; padding: 20px 8%;}
	.contentblock4 {padding-bottom: 400px;}
	.contentbox.contentblock6 .content {width: 84%; padding: 0px 8% 30px 8%;}
	
	.mainbox, .contentwide, .contentwidenarrow, .main, .content.mobile {float: none; width:80%; border-left:none; display:block;}
	
	.content.contentnarrow {float: none; width: 96%;}
	.content.narrow {float: none; width:100%; margin-top: 0;}
	.content.mobile {text-align: center; margin: 0;}

	.wrapper-content {margin-top: 170px;}	
	.wrapper-content.page-id-8,
	.wrapper-content.page-id-9 {margin-top: 80px;}


	
	.leistungsbox {min-height: 50px; width: 100%; margin: 0; padding: 0 0 50px 0; }
	.leistungsbox img {max-width: 15%;}
	p, li, .box-leistung p, .box-leistung a, .box-leistung h4 {font-size: 18px; line-height: 150%;}
	.box-leistung p {margin-bottom: 5px;}
	.contentbox.contentblock2 p, .contentbox.contentblock6 p {font-size: 20px; line-height: 120%;}	
	
	.box-leistung-top-right {position: absolute; top: 10px; left: 0px; width: 14px; height: 14px; background-size: contain;}
	.box-leistung-top-left {width: 92%; padding: 6px 0% 6px 8%;}
	.box-leistung-bottom {padding: 0px 0px 15px 8%;}
	
	.button-box, .button-box.box13 {width: 27%; min-height: 160px; margin: 0 9% 0 0; padding: 0 0 0 0; font-size: 16px; line-height: 100%}	
	
	.teambox-wrapper.page-id-4 {padding-top: 0px;}
	.team-box,
	.team-box.page-id-3, 
	.team-box.page-id-3.last-box,
	.team-box.page-id-4, 
	.team-box.page-id-4.last-box {
		float: none; width: 45%; margin: 0 auto; margin-bottom: 20px; padding: 0px;
	} 
	.XXteam-box {padding: 0 30%;}
	
	.XXteam-box .imageWrapper {text-align: center;}
	.XXteam-box img, .img {margin: 0 auto;}
	.flip-content p {margin: 5px 0; font-size: 16px;}	
	
	
	.leistungsbox-wrapper {padding-top: 20px;}
	
	
	.team-box {
	  XXfloat: left;
	  width: 250px;
	  height: 250px;
	  min-width: 165px;
	  XXmin-height: 450px;
	  XXmargin: 0px 4.0% 80px 0%;
	  padding: 0px;
	}	
	
	
	.contentbox.contentblock6 .content51 img,
	.contentbox.contentblock6 .content52 img {padding-top: 50px;}
		
	.adress-bottom-box {float: none; width: 100%; padding: 0 0 15px 0; text-align: center;}
	
	.footerbox {text-align: center; background: none;}
	/*.footerbox .right {float: none; width: 100%; padding: 0; text-align: center;}*/
	.footerbox p, .footerbox td, .footerbox i.fas, .footerbox i.fab {font-size: 14px;}
	
	.footerbox .left, .footerbox .center, .footerbox .right, .footerbox .right li {float: none; width: 100%; text-align: center; margin-bottom: 20px; padding: 0;}
	.footerbox .right li {width: 98%; margin: 0; padding: 0;}
	
	img.logo-footer {display: block; margin: 0 auto; width: 30%;}
		
	/* Turn off parallax scrolling for tablets and phones */
  .bgimg {background-attachment: scroll; }
  
  i.fa-redo-alt {position: absolute; bottom: 15px; left: 47%; font-size: 16px;}
}




@media screen and (max-width: 900px) {
	div {border: 0px dotted green;}	
	
	.contentbox.contentblock6 p {font-size: 18px; line-height: 100%;}
	
	.team-box {
	  XXfloat: left;
	  width: 200px;
	  height: 200px;
	  min-width: 165px;
	  XXmin-height: 450px;
	  XXmargin: 0px 4.0% 80px 0%;
	  padding: 0px;
	}	
	.flip-content p {margin: 5px 0; font-size: 14px;}
	.contentbox.contentblock2 p, .contentbox.contentblock6 p {font-size: 16px; line-height: 120%;}	
}	
	
	

/* ======================================================================
Smaller Screens */
@media screen and (max-width: 768px) {
	div {border: 0px solid green;}		
	
	p, li, td, .footerbox i.fas, .footerbox i.fab, input.mpform_email, span.captcha_text, .abrev p {font-size: 18px;}
	p, li, .box-faq p, .box-faq a, .box-faq h4, .preview-box-bottom .box-title, .preview-box-bottom p {font-size: 18px; line-height: 120%;}
	p, li, .box-leistung p, .box-leistung .content-short p, .box-leistung a, .box-leistung-bottom, .box-leistung h4, .preview-box-bottom .box-title, .preview-box-bottom p {font-size: 16px; line-height: 120%;}
	
	.headerbox {height: 30px;  overflow: hidden;}
	.headerbox p, .headerbox a {margin: 12px 0 0 0; font-size: 16px !important; line-height: 100%;}	
	
	
	#nav2 ul {margin-top: 55px;}
	
	.XXtoggleMobileMenu {width: 10px; height: 30px; margin: 25px 6% 0 0;   }
	
	.XXfrontpage .outer  {background-position: center top;}
	.topheader  {padding-bottom: 30%;  background-size:  100% auto, auto; background-image: url(img/header-mobile.jpg);}
	
	#topmenubox a.logo img {width:35%; position: absolute; left: 5%; bottom:20px;}
	#topmenubox.reduced a.logo img {position: absolute; left: 5%; bottom:20px; max-height:100%; max-width:100%;}	
		
	.contentbox, 
	.contentbox.page-id-3, 
	.contentbox.page-id-6 {padding-top: 10px;}			
	.contentbox h1, .contentbox h2 {font-size: 20px; line-height: 30px;  margin-bottom: 0px;}	
	.contentbox.contentblock3 h2 {margin-top: 0; padding-top: 50px;}
	.contentbox.contentblock5 h2 {padding-top: 50px;}
	.contentbox h3 {font-size: 20px; margin-top: 0px; margin-bottom: 0px;}
	.contentbox.contentblock1 h3 {margin-bottom: 20px;}
	.contentbox h4 {font-size: 24px; margin-top: 0px;}
	.contentbox.contentblock1 h5 {margin: 20px 0 0 0; line-height: 120%; font-size: 20px;}
	.contentbox p {font-size: 20px;}	
	.flip-content p {margin: 5px 0; font-size: 20px;}		
	.two-column {column-count: 1; column-gap: 0px;}	

	/*
	.team-box,
	.team-box.page-id-3, 
	.team-box.page-id-3.last-box,
	.team-box.page-id-4, 
	.team-box.page-id-4.last-box {float: none; width: 45%; margin: 0 auto; margin-bottom: 20px; padding: 0px;	}
	*/
	
	.desktop-only, .flipbox-desktop, .teambox-wrapper.desktop-only {display: none;}	
	.teambox-wrapper.mobile-only {display: block;}
	
	.teambox-wrapper {margin-top: 10px;}
	
	.flipbox-mobile  {display: inline-block; width: 100%; margin: 0;}
	.team-box-mobile {float: left; display: inline; width: 100%; height: 200px;}
	
	.flipbox-mobile .front, .flipbox-mobile .back {width: 100%; height: 200px;}
	
	
	.flip-content p {margin: 5px 0; font-size: 20px;}		
	
	.flipbox.team-box-mobile.section-id-21 .front {background: #1d1d1b;}
	.flipbox.team-box-mobile.section-id-21 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-23 .front {background: #00898f;}
	.flipbox.team-box-mobile.section-id-23 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-25 .front {background: #8cbeb9;}
	.flipbox.team-box-mobile.section-id-25 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-27 .front {background: #005960;}
	.flipbox.team-box-mobile.section-id-27 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-29 .front {background: #d5ad00;}
	.flipbox.team-box-mobile.section-id-29 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-31 .front {background: #8cbeb9;}
	.flipbox.team-box-mobile.section-id-31 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-33 .front {background: #005960;}
	.flipbox.team-box-mobile.section-id-33 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-35 .front {background: #00898f;}
	.flipbox.team-box-mobile.section-id-35 .back  {background: #efe2b5;}
	
	.flipbox.team-box-mobile.section-id-37 .front {background: #1d1d1b;}
	.flipbox.team-box-mobile.section-id-37 .back  {background: #efe2b5;}
	
	
		
	.contentbox.contentblock2 {position: relative; background: #8cbeb9;}
	.contentblock2 img.hg-2 {display: none; }
	
	.button-box, .button-box.box13, .button-box.box14 {float: none; width: 40%; margin: 0 auto; padding: 0 0 0 0; height: auto;}
	.button-box .textbox {min-height: auto;}
	
	.contentbox.contentblock3 {width: 84%; padding: 0px 8% 30px 8%;}	
	.button-box2 {width: 92%; padding-top: 20px;}
	.box17 {margin-bottom: 150px;}
	.beispiele h4 {font-size: 24px; margin-top: 12px; padding-left: 25px;}
	
	.contentbox.contentblock4 {position: relative;}
	.contentblock4 {padding-bottom: 0;}
	.contentblock4 img {display: none;}

	
	/* Praxis */
	.button-blog {display: none; }
	.button-blog-mobile {display: block; position: absolute; bottom: -120px; right: 5%; z-index: 1; width: 32%; height: 500px; background-image: url("img/button-erfahren-mobile2.png"); background-size: contain; background-repeat: no-repeat; background-position: center bottom; }
	
	.contentbox.contentblock5 {width: 84%; padding: 0px 8% 70px 8%;}
	.box-leistung.mobile,
	.box-leistung-top-left.mobile, 
	.box-leistung .content-short.mobile, 
	.box-leistung-bottom.mobile {width: 97.5%; padding: 0px 0% 5px 2.5%;}
	
	
	
	/* Ueber uns */	
	.content51 img, .content52 img {display: none;}
	.contentbox.contentblock6 .content51 img.mobile-only, .contentbox.contentblock6 .content52 img.mobile-only {
    float: none;
    display: block;
    width: 60%;
    padding: 30px 20% 0 20%;
  }
  
  .kachel, .verlauf.kachel, .kachel.box65 {
  	float: none; 
  	width: 78%;
	  min-height: 200px;
	  margin-top: 50px; margin-left: 10%; 
	  padding: 0;	
	  font-size: 20px;	
	  background: #eee;
	  border: 4px solid transparent;
	}
	.verlauf.kachel {
		background: #fff;
		border: 4px solid #008a90;
	}
	.kachel.box65 {  	
	  min-height: 0px;
	  margin-top: 50px; margin-bottom: 50px;
	  background: transparent;
	  border: 4px solid transparent;
	}

  .kachel.box65 p {font-size: 18px; line-height: 120%;}
  
  .prozess-img {position: absolute; top: 20px; left: 0;}
	
	.contentbox.contentblock6 .content51 img.mobile-only, 
	.contentbox.contentblock6 .content52 img.mobile-only {float: none; display: block; width: 50%; padding: 30px 25% 10px 25%;}
	
	.contentbox.contentblock6 h5 {margin: 0 0 20px 0; color: #1d1d1b; font-weight: 600; font-size: 18px;}
	.contentbox.contentblock6 .content51 div.text,	
	.contentbox.contentblock6 .content52 div.text {padding: 0 8% 0 8%;}
	
	.button-blog-mobile {position: absolute; bottom: -90px; right: 5%;}	
		
	.footerbox .left, .footerbox .center, .footerbox .right, .footerbox table  {float: none; width: 100%; text-align: center; margin-bottom: 20px;}
	img.logo-footer {margin: 0 auto; width: 80%;}

}



/* ================================== blue ====================================
Smaller Screens */
@media screen and (max-width: 480px) {
	div {border: 0px dotted blue;}
	
	#topmenubox {width: 100%;}
	/*
	#topmenubox a.logo.mobile-only img, #topmenubox.page-id-1 a.logo.mobile-only img,
	#topmenubox a.logo.mobile-only.reduced img, #topmenubox.page-id-1.reduced a.logo.mobile-only {display: none;}
	
	#topmenubox a.logo.special, #topmenubox.page-id-1 a.logo.special,
	#topmenubox.page-id-1 a.logo.special img {display: block;}
	*/
		
	#button-kontakt {position: absolute; right: 5.6%; top: -65px;}	
	.contentbox.page-id-1 {width: 88%; padding: 20px 6% 10px 6%;}
	.contentbox.page-id-1.contentbox2 {padding-top: 0;}
	
	.contentbox h1, .contentbox h2 {font-size: 24px; line-height: 120%; margin-bottom: 0px;}
	.wrapper-content.page-id-1 h1 {padding: 0 3%;}
	.wrapper-content.page-id-1 h1, 
	.wrapper-content.page-id-1 h2 {font-size: 20px;}	
	.wrapper-content.page-id-1 h1 {padding: 0 3%;}	
	.contentblock3.contentbox h2, .contentblock5.contentbox h2 {padding-top: 50px;}
	.contentbox h3 {font-size: 16px; line-height: 120%; margin-top: 0px; margin-bottom: 10px;}
	.contentbox.contentblock4 h3 {margin-bottom: 20px;}
	.contentbox.contentblock1 h3 {margin-bottom: 20px;}
	.contentbox h4 {font-size: 18px; margin-top: 0px;}
	.beispiele h4 {font-size: 18px; margin-top: 15px; padding-left: 25px;}
	.contentbox.contentblock1 h5 {margin: 20px 0 0 0; line-height: 120%; font-size: 18px; font-weight: 400;}
	.contentbox p {font-size: 18px;}
	.flip-content p {font-size: 18px;}	
	
	.two-column {column-count: 1; column-gap: 0px;}	
	
	/*.contentblock2 p, .contentbox.contentblock6 p {font-size: 30px; line-height: 120%;}*/

	.beispiele {position: absolute; left: 7%; top: -140px; padding-left: 30px;}

	/*
	.teambox-wrapper {margin-top: 50px; width: 100%;}
	.team-box-mobile {float: left; margin-left: 0; width: 300px; height: 300px;}
	.flipbox-mobile .front, .flipbox-mobile .back {width: 100%; height: 300px; background: #00f;} 	
	*/
	.infobox {width: 100%; padding: 10px 0% 10px 0%;}	
	
	
	.button-box, .button-box.box13, .button-box.box14 {width: 75%; margin: 0 auto; padding: 50px 0 0 0;}
  .button-box .textbox {min-height: auto; padding: 10px 5%; background: #81bbb6;}

  
  .prozess-img {position: absolute; top: 20px; left: 0;}
  
  .box-leistung-top-right {position: absolute; top: 2px; left: 0px;}
  
  .XXcontentbox.contentblock5 {padding-bottom: 150px;}
  
  .button-blog-mobile { position: absolute; bottom: -50px; right: 10%;}
}



/* ====================================================================== */
#return-to-top {
	z-index: 9000;
    position: fixed;
    bottom: 120px;
    right: 50px;
		/* background: rgb(0, 0, 0); */
    /* background: rgba(0, 0, 0, 0.7); */
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    /*
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    */
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
	opacity:0.6;
    /* background: rgba(0, 0, 0, 0.9);*/
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
@media screen and (max-width: 1024px) {
	#return-to-top {position: fixed; bottom: 100px; right: 30px; }
	#return-to-top img {width: 50px;}
}
	


/* ====================================================================== */
/* Hover Effekt */




/* ---------- Kontakt-Bar ---------- */
.kontakt-outer {position: fixed; top: 550px; z-index: 9; width: 100%;}
.kontakt-wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; position: relative;}
.kontakt-bar {	
	position: absolute; top: 0px; right: 0px;
	display: block;
	width: 108px; 
	border:0px solid red;
}
.kontakt-bar a {
	display: block;
	width: 108px; height: 220px;
	background: url(img/button-kontakt.png) 0 0 no-repeat;	
	background-position: 0px 0px;	
	background-size: contain;	
	transition:0.5s all;
}
.kontakt-bar a:hover {width: 108px; background-position: 10px 0px; transition:0.5s all;	}

@media screen and (max-width: 1200px) {
	.kontakt-outer {position: fixed; top: 500px;}	
	.kontakt-bar {
		width: 72px; 
		border:0px solid red;
	}
	.kontakt-bar a {width: 72px; height: 147px;}
}	

@media screen and (max-width: 480px) {	
	.kontakt-outer {position: fixed; top: 150px;}	
	.kontakt-bar {
		position: absolute; top: 250px; right: 0px;
		width: 48px; 
		border:0px solid red;
	}
	.kontakt-bar a {width: 48px; height: 110px;}
}	
/* ---------- End Kontakt-Bar ---------- */




/*.mask a.info:before {padding-right: 5px; font-size: 32px; display: inline-block; content: '> ';  }*/
/*.spacer {display; block; width: 100%; height: 1px; clear: both;}*/




#button-close, .button-close {
  z-index: 2;
  position: absolute; right: 20px; top: 20px;
}

.cc-window {
    -moz-box-shadow: 0 0 5px 2px #fff;
    -webkit-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
.cc-btn {
    padding: 0.4em 0.8em;
    font-size: 1.0em !important;
    font-weight: normal !important;
}
.cc-floating.cc-theme-classic {
    border-radius: 0px !important;

}


/* ===================== Scroll to Top 250717 =============== */
.myBtn-outer {position: fixed; bottom: 30px; z-index: 9; width: 100%;}
.myBtn-wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; position: relative;}

#myBtn {
  display: none; /* Hidden by default */
  
  position: absolute; /* mux */
  /*position: fixed;*/ /* Fixed/sticky position */
  
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  background: transparent;
 }
#myBtn i {font-size: 40px; color: #d5ad00;}
#myBtn:hover i {opacity:0.8}