/*Höhe der Elemente*/
.canvasBox .menucontent .marker {height: 850px;}	/*Höhe*/
.canvasBox .menucontent .marker > div > div.menu .center {top: 425px;}	/*Höhe / 2*/
.canvasBox .menucontent .marker > div > div.infobox {height: 550px;margin: 150px 0 150px;}	/*Höhe - Margin*/
.canvasBox .menucontent .marker > div > div.infobox div.box {height: 550px;}	/*Höhe - Margin der Infobox*/

.canvasBox .menucontent .marker.singleObject {height: 200px;}	/*Höhe*/
.canvasBox .menucontent .marker.singleObject > div > div.menu .center {top: 100px;}	/*Höhe / 2*/
@media (min-width: 1281px){
.canvasBox .menucontent .marker > div > div.infobox div.box .image {height: 510px;width: 50%;top: 0;left: 0;}	/*Höhe - Margin der Infobox - Linkfeld*/
.canvasBox .menucontent .marker > div > div.infobox div.box .text {height: 510px;width: 50%;top: 0;right: 0;}	/*Höhe - Margin der Infobox - Linkfeld*/
}
@media (max-width: 1280px){
.canvasBox .menucontent .marker {height: 700px;}	/*Höhe*/
.canvasBox .menucontent .marker > div > div.menu .center {top: 350px;}	/*Höhe / 2*/
.canvasBox .menucontent .marker > div > div.infobox {height: 600px;margin: 50px 0;}	/*Höhe - Margin*/
.canvasBox .menucontent .marker > div > div.infobox div.box {height: 600px;}	/*Höhe - Margin der Infobox*/
.canvasBox .menucontent .marker > div > div.infobox div.box .image {height: 0;width: 100%;padding-bottom: 50%;}
.canvasBox .menucontent .marker > div > div.infobox div.box .text {width: 100%;}
}
@media (max-width: 870px){
.canvasBox .menucontent .marker {height: 100%;}
.canvasBox .menucontent .marker > div {position: relative;height: 100%;}
.canvasBox .menucontent .marker > div > div.menu .center {top: 90px;}
.canvasBox .menucontent .marker > div > div.infobox {height: auto;margin: 200px 0 50px;}
.canvasBox .menucontent .marker > div > div.infobox div.box {height: auto;}

.canvasBox .menucontent .marker > div > div.mobileBackground {position: absolute;top: 0;left: 50%;height: 100%;width:0px;box-sizing: border-box;}
.canvasBox .menucontent .marker:first-Child > div > div.mobileBackground {padding-top: 100px;}
.canvasBox .menucontent .marker:last-Child > div > div.mobileBackground {padding-bottom: 100px;}
.canvasBox .menucontent .marker > div > div.mobileBackground .inner {position: relative;right: 3px;width: 5px;height: 100%;}
}

.canvasBox {position: relative;}
.canvasBox #pagemenu {position: absolute;top: 0;}
@media (max-width: 870px){.canvasBox #pagemenu {display: none;}}
.canvasBox .menucontent {max-width: 1776px;margin: auto;padding: 0 20px 50px 20px;box-sizing: border-box;}
.canvasBox .menucontent .marker > div hr {clear: both;margin: 0; border: none;}
.canvasBox .menucontent .marker > div > div {width: 100%;}
@media (min-width: 871px){.canvasBox .menucontent .marker > div > div {width: 50%;}}

.canvasBox .menucontent .marker > div > div.menu {float: left;}
@media (min-width: 1281px){.canvasBox .menucontent .marker.right > div > div.menu {float: right;}}

.canvasBox .menucontent .marker > div > div.menu .center {width: 0; height: 0;position: relative;}
.canvasBox .menucontent .marker > div > div.menu .center {left: 50%;}
@media (min-width: 871px) and (max-width: 1280px){.canvasBox .menucontent .marker > div > div.menu .center {left: 20%;}}
.canvasBox .menucontent .marker > div > div.menu .center * {position: absolute;}
.canvasBox .menucontent .marker > div > div.menu .center span {display: block;width: 190px;height: 180px;background-size: 190px 180px;top: -90px;left: -95px;}
.canvasBox .menucontent .marker.singleObject > div > div.menu .center span {width: 86px;height: 86px;background-size: 86px 86px;top: -43px;left: -43px;}
.canvasBox .menucontent .marker > div.orange_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerBigOrange.svg")}
.canvasBox .menucontent .marker.singleObject > div.orange_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerSmallOrange.svg")}
.canvasBox .menucontent .marker > div.yellow_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerBigYellow.svg")}
.canvasBox .menucontent .marker.singleObject > div.yellow_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerSmallYellow.svg")}
.canvasBox .menucontent .marker > div.blue_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerBigBlue.svg")}
.canvasBox .menucontent .marker.singleObject > div.blue_normal > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerSmallBlue.svg")}
.canvasBox .menucontent .marker > div.blue_light > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerBigLightblue.svg")}
.canvasBox .menucontent .marker.singleObject > div.blue_light > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerSmallLightblue.svg")}
.canvasBox .menucontent .marker > div.blue_dark > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerBigDarkblue.svg")}
.canvasBox .menucontent .marker.singleObject > div.blue_dark > div.menu .center span {background-image: url("/fileadmin/templates/images/marker/markerSmallDarkblue.svg")}
.canvasBox .menucontent .marker > div > div.menu .center a {color: #fff;width: 190px;top: 75px;text-align: center;font-size: 20px;}
.canvasBox .menucontent .marker.singleObject > div > div.menu .center a {color: #000;width: 0;top: 28px;text-align: left;left: 90px;}

@media (max-width: 870px){.canvasBox .menucontent .marker > div > div.menu .submarker {display: none;}}
.canvasBox .menucontent .marker > div > div.menu .submarker .outer {position: absolute;display: block;width: 0;height: 0;}
.canvasBox .menucontent .marker > div > div.menu .submarker .inner {position: relative;right: 43px;bottom: 43px;display: block;width: 86px;height: 86px;background-size: 86px 86px;background-image: url("/fileadmin/templates/images/marker/markerSmallGray.svg");cursor: pointer;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.canvasBox .menucontent .marker > div.orange_normal > div.menu .submarker .active .inner,.canvasBox .menucontent .marker > div.orange_normal > div.menu .submarker .inner:hover {background-image: url("/fileadmin/templates/images/marker/markerSmallOrange.svg")}
.canvasBox .menucontent .marker > div.yellow_normal > div.menu .submarker .active .inner,.canvasBox .menucontent .marker > div.yellow_normal > div.menu .submarker .inner:hover {background-image: url("/fileadmin/templates/images/marker/markerSmallYellow.svg")}
.canvasBox .menucontent .marker > div.blue_normal > div.menu .submarker .active .inner,.canvasBox .menucontent .marker > div.blue_normal > div.menu .submarker .inner:hover {background-image: url("/fileadmin/templates/images/marker/markerSmallBlue.svg")}
.canvasBox .menucontent .marker > div.blue_light > div.menu .submarker .active .inner,.canvasBox .menucontent .marker > div.blue_light > div.menu .submarker .inner:hover {background-image: url("/fileadmin/templates/images/marker/markerSmallLightblue.svg")}
.canvasBox .menucontent .marker > div.blue_dark > div.menu .submarker .active .inner,.canvasBox .menucontent .marker > div.blue_dark > div.menu .submarker .inner:hover {background-image: url("/fileadmin/templates/images/marker/markerSmallDarkblue.svg")}
.canvasBox .menucontent .marker > div > div.menu .submarker p {font-size: 16px;margin: 0;}

@media (min-width: 871px){.canvasBox .menucontent .marker > div > div.menu .submarker p {position: absolute;left: 18px;}}
@media (min-width: 871px) and (max-width: 1280px){.canvasBox .menucontent .marker > div > div.menu .submarker p {top: 23px;padding: 5px;background-color: rgba(255,255,255,0.4);max-width: 220px;border-radius: 5px;box-sizing: border-box;white-space: nowrap;}}
@media (min-width: 1281px){
	.canvasBox .menucontent .marker > div > div.menu .submarker p {left: 0;width: 86px;text-align: center;}
	.canvasBox .menucontent .marker > div > div.menu .submarker .up p {bottom: 90px;/*white-space: nowrap;*/}
	.canvasBox .menucontent .marker > div > div.menu .submarker .down p {top: 90px;}
}

.canvasBox .menucontent .marker > div > div.infobox {position:relative;overflow: hidden;}
.canvasBox .menucontent .marker > div > div.infobox {float: right;}
@media (min-width: 1281px){.canvasBox .menucontent .marker.right > div > div.infobox {float: left;}}
@media (min-width: 871px){.canvasBox .menucontent .marker > div > div.infobox {box-shadow: 0 0 5px 3px #888;}}
.canvasBox .menucontent .marker > div > div.infobox > a {position: absolute;display: block;width: 50px;height: 100px;z-index: 11;cursor: pointer;}
.canvasBox .menucontent .marker > div > div.infobox > a:before,
.canvasBox .menucontent .marker > div > div.infobox > a:after {content: '';position: absolute;display: block;width: 4px;height: 50px;background-color: rgba(200,200,200,1.0);left: 25px;border-radius: 2px;}
.canvasBox .menucontent .marker > div > div.infobox > a:before {top: 5px;}
.canvasBox .menucontent .marker > div > div.infobox > a:after {bottom: 4px;}
.canvasBox .menucontent .marker > div > div.infobox > a.prev:before,
.canvasBox .menucontent .marker > div > div.infobox > a.next:after {transform: rotate(-30deg);}
.canvasBox .menucontent .marker > div > div.infobox > a.next:before,
.canvasBox .menucontent .marker > div > div.infobox > a.prev:after {transform: rotate(30deg);}
@media (min-width: 1281px){
	.canvasBox .menucontent .marker > div > div.infobox > a {top: 175px;}
	.canvasBox .menucontent .marker > div > div.infobox > a.prev {right: 0;}
	.canvasBox .menucontent .marker > div > div.infobox > a.next {left: 50%;}
}
@media (max-width: 1280px){
	.canvasBox .menucontent .marker > div > div.infobox > a {bottom: 150px;}
	.canvasBox .menucontent .marker > div > div.infobox > a.prev {left: 0;}
	.canvasBox .menucontent .marker > div > div.infobox > a.next {right: 0;}
	.canvasBox .menucontent .marker > div > div.infobox > a.prev:before,
	.canvasBox .menucontent .marker > div > div.infobox > a.next:after {transform: rotate(30deg);}
	.canvasBox .menucontent .marker > div > div.infobox > a.next:before,
	.canvasBox .menucontent .marker > div > div.infobox > a.prev:after {transform: rotate(-30deg);}
}
@media (max-width: 870px){
	.canvasBox .menucontent .marker > div > div.infobox > a {display: none;}
	.canvasBox .menucontent .marker > div > div.infobox {box-shadow: unset;padding: 0 5px;}
}
@media (max-width: 560px){.canvasBox .menucontent .marker > div > div.infobox > a.prev {left: 0;}}
.canvasBox .menucontent .marker > div > div.infobox div.box {position: absolute;top: 0;width: 100%;background: #fff;opacity: 0;z-index: 1;transition: z-index 0.8s ease-in-out, opacity 0.8s ease-in-out;}
.canvasBox .menucontent .marker > div > div.infobox div.box.active {opacity: 1;z-index: 10;}
.canvasBox .menucontent .marker > div > div.infobox div.box .image {display: block;box-sizing: border-box;}
.canvasBox .menucontent .marker > div > div.infobox div.box .image .inner{width: 100%;background-color: #ccc;background-repeat: no-repeat;background-position: center;background-size: cover;}
@media (min-width: 1281px){.canvasBox .menucontent .marker > div > div.infobox div.box .image .inner {height: 100%;}}
@media (max-width: 1280px){.canvasBox .menucontent .marker > div > div.infobox div.box .image .inner {padding-bottom: 50%;}}
.canvasBox .menucontent .marker > div > div.infobox div.box .text {padding: 0 60px;box-sizing: border-box;}
@media (min-width: 1281px){.canvasBox .menucontent .marker > div > div.infobox div.box .text {position: absolute;}}
@media (max-width: 870px){.canvasBox .menucontent .marker > div > div.infobox div.box .text {padding: 0 20px;}}
.canvasBox .menucontent .marker > div > div.infobox div.box h3 {font-size: 28px;margin: 20px 0;}
.canvasBox .menucontent .marker > div.orange_normal > div.infobox div.box h3 {color: #DC5F15;}
.canvasBox .menucontent .marker > div.yellow_normal > div.infobox div.box h3 {color: #E29607;}
.canvasBox .menucontent .marker > div.blue_normal > div.infobox div.box h3 {color: #0069b4;}
.canvasBox .menucontent .marker > div.blue_light > div.infobox div.box h3 {color: #00b1eb;}
.canvasBox .menucontent .marker > div.blue_dark > div.infobox div.box h3 {color: #233362;}
.canvasBox .menucontent .marker > div > div.infobox div.box p {}
.canvasBox .menucontent .marker > div > div.infobox div.box  a.more_link {width: 100%;height: 40px;line-height: 40px;text-align: center;background-color: #000;color: #fff;cursor: pointer;}
@media (min-width: 871px){.canvasBox .menucontent .marker > div > div.infobox div.box  a.more_link {position: absolute;bottom: 0;left: 0;}}
@media (max-width: 870px){.canvasBox .menucontent .marker > div > div.infobox div.box  a.more_link {display: block;}}
.canvasBox .menucontent .marker > div.yellow_normal > div.infobox div.box  a {background-color: #E29607;text-decoration: none;text-transform: uppercase;}
.canvasBox .menucontent .marker > div.orange_normal > div.infobox div.box  a {background-color: #DC5F15;text-decoration: none;text-transform: uppercase;}
.canvasBox .menucontent .marker > div.blue_dark > div.infobox div.box  a {background-color: #233362;text-decoration: none;text-transform: uppercase;}
.canvasBox .menucontent .marker > div.blue_normal > div.infobox div.box  a {background-color: #0069b4;text-decoration: none;text-transform: uppercase;}
.canvasBox .menucontent .marker > div.blue_light > div.infobox div.box  a {background-color: #00b1eb;text-decoration: none;text-transform: uppercase;}
.canvasBox .menucontent .marker > div > div.infobox div.box  a.infoboxImgLink {bottom: initial;background-color: transparent;height: 50%;}
.canvasBox .menucontent .marker .mobileTitle {position: absolute;margin-left: 50px;margin-top: -50px;}
.canvasBox .menucontent .marker > div > div.infobox div.box > .inner {width: 100%;max-height: 750px;opacity: 1;overflow: hidden;}
@media (max-width: 870px){
	.canvasBox .menucontent .marker > div > div.infobox div.box {position: relative;opacity: 1;margin: 100px 0 150px;background: none;}
	.canvasBox .menucontent .marker > div > div.infobox div.box > .inner {box-shadow: 0 0 5px 3px #888;background: #fff;}
	.canvasBox .menucontent .marker > div > div.infobox div.box.mobilActive > .inner,
	.canvasBox .menucontent .marker > div > div.infobox div.box.active > .inner {opacity: 1;max-height: 750px;transition: max-height 1.0s, opacity 0.5s;}
	.canvasBox .menucontent .marker > div > div.infobox div.box.active.mobilInactive > .inner,
	.canvasBox .menucontent .marker > div > div.infobox div.box > .inner {max-height: 0;opacity: 0;transition: max-height 1.0s, opacity 0.5s 0.5s;}

	.canvasBox .menucontent .marker > div .submarkerMobileTrigger {position: absolute;left: 50%;top: 0;display: block;width: 0;height: 0;z-index: 1;}
	.canvasBox .menucontent .marker > div .submarkerMobileTrigger .inner {position: relative;right: 40px;bottom: 90px;display: block;width: 86px;height: 86px;background-size: 86px 86px;background-image: url("/fileadmin/templates/images/marker/markerSmallGray.svg");cursor: pointer;transition: transform 1.0s;}
	.canvasBox .menucontent .marker > div.orange_normal .submarkerMobileTrigger .inner {background-image: url("/fileadmin/templates/images/marker/markerSmallOrange.svg")}
	.canvasBox .menucontent .marker > div.yellow_normal .submarkerMobileTrigger .inner {background-image: url("/fileadmin/templates/images/marker/markerSmallYellow.svg")}
	.canvasBox .menucontent .marker > div.blue_normal .submarkerMobileTrigger .inner {background-image: url("/fileadmin/templates/images/marker/markerSmallBlue.svg")}
	.canvasBox .menucontent .marker > div.blue_light .submarkerMobileTrigger .inner {background-image: url("/fileadmin/templates/images/marker/markerSmallLightblue.svg")}
	.canvasBox .menucontent .marker > div.blue_dark .submarkerMobileTrigger .inner {background-image: url("/fileadmin/templates/images/marker/markerSmallDarkblue.svg")}

	.canvasBox .menucontent .marker > div > div.infobox div.box.mobilActive > .submarkerMobileTrigger .inner,
	.canvasBox .menucontent .marker > div > div.infobox div.box.active > .submarkerMobileTrigger .inner {transform: rotate(180deg);}
	.canvasBox .menucontent .marker > div > div.infobox div.box.active.mobilInactive > .submarkerMobileTrigger .inner,
	.canvasBox .menucontent .marker > div > div.infobox div.box > .submarkerMobileTrigger .inner {transform: rotate(0deg);}
	.canvasBox .menucontent .marker > div > div.infobox div.box > .submarkerMobileTrigger .inner::before {transition: transform .8s ease-in-out;content: '';position: relative;display: block;width: 4px;height: 30px;background-color: #fff;left: 29px;border-radius: 2px;transform: rotate(-65deg);top: 30px;}
	.canvasBox .menucontent .marker > div > div.infobox div.box > .submarkerMobileTrigger .inner::after {transition: transform .8s ease-in-out;content: '';position: relative;display: block;width: 4px;height: 30px;background-color: #fff;left: 55px;border-radius: 2px;transform: rotate(65deg);top: 0;}
}