html {
	width: 100%;
	margin: 0;
	max-width: 100%;

	padding: 0;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
}

body {
	font-family: Roboto, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, 微軟正黑體, Microsoft JhengHei, Helvetica, Arial, sans-serif;
	font-size: 16px;
	letter-spacing: 0.5px;
	line-height: 1.5em;
	color: #000;
	background-color: #ffffff;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	touch-action: pan-y;
	top: 0;
	left: 0;

}

body.cn {
	font-family: Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;
}

body.notiniframe {
	min-height: 100%;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background-color: rgba(178, 178, 178, 1);
}

::-webkit-scrollbar-thumb {
	background: rgb(255, 255, 255);
	border: 1px solid rgba(178, 178, 178, 1);
}

::-webkit-scrollbar-thumb:hover {
	background: rgb(255, 255, 255);
	border: 1px solid rgba(178, 178, 178, 1);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}



div {
	box-sizing: border-box;
}



#xmldaten {
	display: none;
}

img {
	width: 100%;
	height: auto;
	margin: auto;
	-webkit-user-drag: none;

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



h1,
h2,
h3,
h4 {

	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0;
	letter-spacing: 0.25px;
}

h1 {
	line-height: 50px;
	font-size: 40px;
}

h1 {
	padding-left: 0.75em;
	background-image: url(../img/pfeil_gelb.png);
	background-repeat: no-repeat;
	background-size: auto 1.1em;
	background-position: top left;
	padding-bottom: 1em;
}

h1,
h2 {
	font-family: Arsenal, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, 微軟正黑體, Microsoft JhengHei, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	margin-bottom: 14px;

}


h2 {
	line-height: 50px;
	font-size: 31px;
}

h2.head_finger,
h2.head_body {
	margin-bottom: 0;
}

h3 {
	font-family: Roboto, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, 微軟正黑體, Microsoft JhengHei, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	padding: 0.5em 0em 0.25em 0em;





}

.h4,
h4 {
	font-size: 12px;
	line-height: 16px;
	color: #868686;
	text-transform: uppercase
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

a,
.btn-href {
	color: #000000;
	cursor: pointer;
	display: inline;
	text-decoration: underline;

}

a:hover,
.btn-href:hover {
	color: #29a8c7;
}

.btn-href.right {
	float: right;
}

.container {
	width: 100% !important;
	max-width: 1300px !important;


}

.wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
}

.container.wide {
	max-width: 100%;
	padding: 0;
}

.header {
	width: 100%;
	z-index: 6;
	top: 0px;
	pointer-events: none;

}

.logo {
	width: 25%;
	max-width: 24em;
	min-width: 14em;
	position: absolute;
	top: 5em;
	left: 50%;
	transform: translate(-50%, 0);
	filter: drop-shadow(0px 0px 1em rgba(255, 255, 255, 1)) drop-shadow(0px 0px 1em rgba(255, 255, 255, 1));

	cursor: pointer;
	pointer-events: auto;
}

.logo img {
	transform: scale(1);
	transition: transform 0.5s ease;
}

.logo.in img {
	transform: scale(1.2)
}

.square {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;


}

.square .squarebg {
	width: 100%;
	height: 100%;

}

.square .contourimage {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	display: none;
	pointer-events: none;
	/*animation-name: wobble_image;
	animation-duration: 10s;
	animation-iteration-count: infinite;*/
}

.square .background-video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;

	pointer-events: none;
	display: block;

}

.square .background-video video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	position: absolute;
	pointer-events: none;

}

.hotspots {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	pointer-events: none;

}

.scalehotspots {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	pointer-events: none;

}

.hotspotarea {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;

	transform: translate(-50%, -50%);


}

.hotspotgame {
	position: absolute;
	bottom: 3em;
	right: 3em;

	padding: 0.5em 1em;
	border-color: #fbb900;
	background-color: #fbb900;


	color: #575656;
	border-radius: 2px;
	display: inline-block;
	outline: none !important;
	cursor: pointer;
	pointer-events: auto;
}

.hotspotgame img {
	-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
	-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
	box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);

}

.hotspots .hotspot {
	position: absolute;
	/*width: 6em;
	height: 6em;*/
	width: 5%;
	max-width: 6em;
	min-width: 4em;
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: auto;
}

.hotspot[data-type='value'] {

	/*width: 4em;
	height: 4em;*/
	width: 4%;
	max-width: 4em;
	min-width: 3em;

}

.hotspot img {
	-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
	-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
	box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	transition: all 0.75s ease;
	transform: scale(0.9);
}

.hotspot.in {
	z-index: 10;

}

.hotspot.in img {
	-webkit-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.75) !important;
	-moz-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.75) !important;
	box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.75) !important;
	transform: scale(1.2);

}

.hotspot .hotspottext {
	position: absolute;
	top: 0;
	left: 100%;
	padding: 0em 1em;
	font-weight: bold;
	font-size: 1.25em;
	text-shadow: 0 0 0.25em #20252d;
	color: #ffffff;
	transform: translate(100%, 0);
	opacity: 0;
	transition: transform ease 0.5s, opacity ease 0.5s;
	pointer-events: none;
	min-width: 10em;
}

.hotspot.bottom .hotspottext {
	top: auto;
	bottom: 0;
}

.hotspot.in .hotspottext {
	transform: translate(0, 0);
	opacity: 1;
}



.hotspotarea .hotspottext {
	position: absolute;
	top: 50%;
	right: 50%;
	padding: 0em 0.5em;
	font-weight: bold;
	font-size: 1.25em;
	text-shadow: 0 0 0.25em #20252d;
	color: #ffffff;
	white-space: nowrap;
	transform: translate(100%, 0);
	opacity: 0;
	transition: transform ease 0.5s, opacity ease 0.5s;
	pointer-events: none;
}


.web .hotspotarea .hotspottext {

	top: 35%;

}

.hotspotarea.in .hotspottext {
	transform: translate(0, 0);
	opacity: 1;
}



.logo .hotspottext {
	margin-top: 1em;
	left: 0;
	padding: 0.5em 1.2em 0em 0em;
	font-weight: bold;
	font-size: 1.75em;
	/*text-shadow: 0 0 0.25em #20252d;*/
	color: #575656;
	transform: translate(100%, 0);
	opacity: 0;
	transition: transform ease 0.5s, opacity ease 0.5s;
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
}

.web .logo .hotspottext {

	font-size: 1.5em;

}

.logo.in .hotspottext {
	transform: translate(0, 0);
	opacity: 1;
}

/*

@keyframes wobble {
	0% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}

	5% {
		-webkit-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		-moz-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		transform: scale(1.1);
	}

	15% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}

	100% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}
}

@keyframes wobble_logo {
	0% {
		filter: drop-shadow(0px 0px 0em rgba(255, 255, 255, 0)) drop-shadow(0px 0px 0em rgba(255, 255, 255, 0));
		transform: translate(-50%, 0) scale(1);
	}

	7% {
		filter: drop-shadow(0px 0px 1em rgba(255, 255, 255, 1)) drop-shadow(0px 0px 1em rgba(255, 255, 255, 1));
		transform: translate(-50%, 0) scale(1.1);
	}

	25% {
		filter: drop-shadow(0px 0px 0em rgba(255, 255, 255, 0)) drop-shadow(0px 0px 0em rgba(255, 255, 255, 0));
		transform: translate(-50%, 0) scale(1);
	}

	100% {
		filter: drop-shadow(0px 0px 0em rgba(255, 255, 255, 0)) drop-shadow(0px 0px 0em rgba(255, 255, 255, 0));
		transform: translate(-50%, 0) scale(1);
	}
}

@keyframes wobble_image {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	8% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}
*/
.yellowcard {
	position: absolute;
	width: 30%;
	max-width: 30em;
	top: 40%;
	left: 50%;
	background-color: #fbb900;
	color: #ffffff;
	transform: translate(0, -50%);
	border-radius: 2px;
	display: none;
	transition: top 0.5s ease, left 0.5s ease;
	pointer-events: auto;
}

.yellowcard .closebtn {
	position: absolute;
	width: 2em;
	height: 2em;
	padding: 0.25em;
	right: -2em;
	top: -0.5em;
	cursor: pointer;
	z-index: 10;
}

.yellowcard .carousel-item {
	padding: 1em 2em 1em 3em;
	hyphens: auto;
	hyphenate-limit-lines: 2;
}

.yellowcard .title {
	font-weight: bold;
}

.yellowcard .carousel-control-prev,
.yellowcard .carousel-control-next {
	opacity: 1 !important;
	width: 2em;
}


.yellowcard .carousel-control-prev-icon,
.yellowcard .carousel-control-next-icon {
	width: 1.15em;
	height: 1.15em;


}

@media (prefers-reduced-motion: reduce) {
	.carousel-item {
		transition: transform 0.6s ease-in-out;
	}
}

.carousel-control-next-icon {
	background-image: url(../img/arrow_right.png);

}




.carousel-control-prev-icon {
	background-image: url(../img/arrow_left.png);
}



.info {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
	top: 0px;
	left: 0px;

	vertical-align: middle;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	hyphens: auto;

	hyphenate-limit-lines: 2;
	z-index: 300;
	background-color: rgba(77, 84, 92, 0.30);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: none;
}

.info {
	background-color: rgba(236, 232, 228, 0.85);
	background-color: rgba(0, 10, 55, 0.30);
}


.info_back,
.media_back,
.overlay_back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;


}

.info_inner {
	position: absolute;
	width: calc(100% - 8em);
	height: calc(100% - 8em);
	max-height: 80%;
	margin: auto;
	max-width: 90em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.info .info_closebtn {
	position: absolute;
	width: 3em;
	height: 3em;
	padding: 0.25em;
	top: -0.75em;
	right: -3em;
	cursor: pointer;
	z-index: 10;
}

.info_cards {
	background-color: #ffffff;
	-webkit-box-shadow: 0px 0px 2em 0px rgba(51, 61, 67, 0.9);
	-moz-box-shadow: 0px 0px 2em 0px rgba(51, 61, 67, 0.9);
	box-shadow: 0px 0px 2em 0px rgba(51, 61, 67, 0.9);
	animation-fill-mode: both;
	animation-duration: 1s;
	height: 100%;
	width: 100%;
	position: absolute;
}

.infocard,
#infoslider {
	height: 100%;
	width: 100%;
	position: absolute;

}

#infoslider.noslide {
	pointer-events: none;
}

#infoslider .carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 100%;
}

#infoslider .carousel-item {

	height: 100%;
}

.info .infoblock {
	padding: 2em;
}

.info .infoblock.scrollblock {
	overflow-y: auto;
	touch-action: pan-y;
	position: relative;
	padding-bottom: 1em;
}

.info .row.scrollrow {
	padding-top: 2em;
	padding-bottom: 20%;


	display: none;
}

.info .tobtnholder {
	position: sticky;
	display: none;
	bottom: 1em;
	left: 0;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

.info .tobtn {
	position: relative;
	width: 2em;
	height: 2em;
	background-color: #fbb900;
	background-image: url(../img/arrow_totop_white.png);
	background-repeat: no-repeat;
	background-size: 70%;
	background-position: center;
	cursor: pointer;
	border-radius: 2px;
	display: inline-block;
	margin: 0 0.5em;

}

.info .homebtn {
	width: 3em;
	height: 3em;
	padding: 0.5em;
	align-self: center;
	background-color: #b1b2b3;
	border-radius: 2px;
	cursor: pointer;
	margin-bottom: 0.5em;
}

.info .col.center {
	text-align: center;
	background-color:
}

.info .tobtn:hover {

	background-color: #fddf8c;

}

.info .toprev {
	bottom: 0em;
	left: 0em;
	transform: rotate(-90deg);
}

.info .totop {
	bottom: 0em;
	/*left: 2.5em;*/
}

.info .tonext {
	bottom: 0em;
	/*left: 5em;*/
	transform: rotate(90deg);
}



.info .infoblock.grey {
	background-color: #e5e5e5;
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding-bottom: 1.5em;

}



.info .cardlogo {
	position: absolute;
	top: 1em;
	right: 2em;
	width: 10em;
	max-width: 20%;
}



.info .title {
	line-height: 1.2em;
	font-size: 2.5em;
	font-family: Arsenal, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, メイリオ, Meiryo, 微軟正黑體, Microsoft JhengHei, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	padding-left: 0.75em;
	background-image: url(../img/pfeil_gelb.png);
	background-repeat: no-repeat;
	background-size: auto 1.1em;
	background-position: top left;
	padding-bottom: 0.25em;

	animation-fill-mode: both;
	animation-duration: 0.5s;



}

.info .subtitle {

	padding-left: 2em;
	font-weight: bold;
	animation-fill-mode: both;
	animation-duration: 0.5s;

}


.info ul {
	margin: 2em 0;
	padding: 0;
	list-style: none;
	line-height: 1.4em;
	font-size: 1.25em;
	animation-fill-mode: both;
	animation-duration: 0.5s;
	color: #000000;

}

.info li {
	margin: 1em 0;
	padding: 0px;
	padding-left: 1em;
	background-image: url(../img/pfeil_grau.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-size: 0.5em auto;
	background-position: left top;


}


.info .copy {
	margin: 0.5em 0em;
	color: #565655;

	animation-fill-mode: both;
	animation-duration: 0.5s;
}

.info video {
	width: 100%;
	height: auto;
}


.info .slideprev {
	font-weight: bold;
	padding-left: 3.5em;
	background-size: 3em;
	background-repeat: no-repeat;
	background-position: left top 0em;
	min-height: 3em;
	cursor: pointer;

	position: relative;
	color: #565655;
}

.info .slideprev::before {
	content: '';
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	left: -1.5em;
	top: 0.9em;
	background-image: url(../img/arrow_yellow_left.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.info .slidenext {
	font-weight: bold;
	padding-right: 3.5em;
	background-size: 3em;
	background-repeat: no-repeat;
	background-position: right top 0em;
	min-height: 3em;
	cursor: pointer;

	position: relative;
	color: #565655;
}

.info .slidenext::before {
	content: '';
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	right: -1.5em;
	top: 0.9em;
	background-image: url(../img/arrow_yellow_right.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.info .hotspotimage {
	position: relative;
	margin-bottom: 2em;
	overflow: hidden;
}

.info .hotspots {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	pointer-events: none;
}

.info .hotspot {
	position: absolute;
	width: 1.5em !important;
	height: 1.5em !important;
	min-width: 1.5em !important;
	cursor: pointer;
	pointer-events: auto;

	border-radius: 50%;
	cursor: pointer;
	transform: translate(-50%, -50%);




}

.info .hotspot img {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	transition: all 0.3s ease;
	transform: scale(1.1);
	animation: none;
	border-radius: 50%;


	-webkit-box-shadow: 0px 0px 0.5em 0em rgba(255, 255, 255, 0.35);
	-moz-box-shadow: 0px 0px 0.5em 0em rgba(255, 255, 255, 0.35);
	box-shadow: 0px 0px 0.5em 0em rgba(255, 255, 255, 0.35);
	;
}

.info .hotspot.in img {
	-webkit-box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 0.75);
	-moz-box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 0.75);
	box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 0.55);
	transform: scale(1.6);
}



/*.info .hotspot.active img {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;

	animation: none;
	transform: scale(1.5) !important;
	-webkit-box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 1) !important;
	-moz-box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 1) !important;
	box-shadow: 0px 0px 0.75em 0em rgba(255, 255, 255, 1) !important;

}*/
@keyframes hotspotwobble {
	0% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}

	5% {
		-webkit-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		-moz-box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		box-shadow: 0px 0px 0.75em 0.75em rgba(255, 255, 255, 0.55);
		transform: scale(1.2);
	}

	15% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}

	100% {
		-webkit-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		-moz-box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		box-shadow: 0px 0px 0.5em 0.5em rgba(255, 255, 255, 0.35);
		transform: scale(1);
	}
}

.info .caption {
	text-align: center;
	margin-top: 0.5em;

	color: #565655;
	margin-bottom: 2em;
}

.info .space {
	padding: 0.5em;
}

.info .panel,
.info .contentmenubtn {

	border-top: 1px solid #e5e5e5;
	animation-fill-mode: both;
	animation-duration: 0.5s;
	animation-delay: 1s;
}

.info .panel:last-child {

	border-bottom: 1px solid #e5e5e5;
}

.info .panel .panelhead,
.info .contentmenubtn {

	cursor: pointer;
	background-image: url(../img/plus.png);
	background-size: 0.8em;
	background-position: left 0.5em top 0.6em;
	background-repeat: no-repeat;
	padding: 0.5em 0.5em 0.5em 1.75em;
	border-top: 1px solid #fbb900;
	line-height: 1.1em;

}

.info .contentmenubtn {

	background-color: #ffffff;
	transition: all 0.5s ease;
}

.info .contentmenubtn.in {

	background-color: #fbb900;
	color: #ffffff;
	background-image: url(../img/plus_white.png);

}

.info .contentmenubtn:hover {

	background-color: #fbb900 !important;
	color: #ffffff !important;
	background-image: url(../img/plus_white.png) !important;
}

.info .contentmenubtn:last-child {

	border-bottom: 1px solid #fbb900;
}

.info .panel.open .panelhead {

	font-weight: bold;
	background-image: url(../img/plus.png);


}


.info .panel .panelcontent {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.info .panel .panelcontent .panelcontent_inner {
	padding-left: 1.25em;

}

.info panelimages {

	position: relative;
	display: flex;
}

.info .panelimageholder {

	margin: 0.5em 1em 0.5em 0;
	display: inline-block;


}

.info .panelimagecaption {
	font-size: 0.875em;
	font-style: italic;
	margin-top: 0.5em;


}

.info .panelimagebefore {
	position: relative;
	cursor: pointer;
	border: 1px solid #e5e5e5
}

.info .panelimagebefore::before {
	content: '';
	position: absolute;
	width: 1.5em;
	height: 1.5em;

	background-image: url(../img/zoom.svg);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ffffff;
	right: 0.5em;
	bottom: 0.5em;
}

.info .row.relative {
	position: relative;
}

.info .zoomimageholder {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #ffffff;
	display: none;




}

.info .zoomimageholder .zoomimageholder_inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;





}

.web .info .zoomimageholder .zoomimageholder_inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;


	overflow: hidden;

	touch-action: none !important;
	/* wichtig für Touch */
	user-select: none;
	cursor: grab;


}

.info .zoomimageholder .zoomimagebig {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	right: 0;
	object-fit: contain;

	padding: 0 2em;

	position: absolute;
	top: 0;
	left: 0;
	transform-origin: center center;
	user-select: none;
	-webkit-user-drag: none;
}



.info .zoomimageholder .closezoomimagebig {
	position: absolute;
	bottom: 2em;
	left: 2em;

	padding: 0.25em 1em;
	cursor: pointer;
	touch-action: auto;
}

.info .zoomimageholder .closezoomimagebig:after {
	display: none;
}

.game {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 400;
	background-color: rgba(77, 84, 92, 0.30);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;

}

.game iframe {
	position: absolute;
	width: 80%;
	height: 80%;
	margin: auto;
	top: 10%;
	left: 10%;
	pointer-events: auto;
	border: none;
}

.language {
	position: absolute;
	text-align: left;

	right: 3em;
	top: 2em;
	z-index: 2;
	pointer-events: auto;
	width: 10em;



}



.languagecurrent {
	width: 10em;
	background: url(../img/global.png);
	background-size: 1em;
	background-position: top 0.75em left 0.5em;
	background-repeat: no-repeat;
	padding: 0.5em 0em 0.5em 2em;
	cursor: pointer;
	color: #ffffff;

}

.web .languagecurrent {
	width: 10em;
	background: url(../img/global.png);
	background-size: 1em;
	background-position: top 0.75em right 0.5em;
	background-repeat: no-repeat;
	padding: 0.5em 2em 0.5em 0em;
	cursor: pointer;
	color: #ffffff;
	text-align: right;

}

.language.open .languagecurrent {
	color: #ffffff;
}

.languagelist {
	position: absolute;
	right: 0;
	top: 2.5em;
	display: none;
	background-color: #e9e9e9;
	min-width: 10em;
	padding: 0.5em 1em 0.5em 2em;
	columns: 3;
	width: auto;
	column-gap: 10px;
}

.language.open .languagelist {

	display: block;
}

.btn-primary {
	font-weight: 700;
	padding: 8px 36px 8px 16px;
	border-color: #fbb900;
	background-color: #fbb900;
	position: relative;
	margin-bottom: 8px;
	text-decoration: none;
	color: #000000;
	border-radius: 2px;
	display: inline-block;
	outline: none !important;
	cursor: pointer;
}

.btn-primary:after {
	position: absolute;
	top: 10px;
	right: 8px;
	content: "";
	width: 19px;
	height: 18px;
	background: transparent url(../img/img_link-arrow-schwarz.svg) 0 0 no-repeat;
}

.btn-primary:focus,
.btn-primary:hover {
	color: #000;
	background-color: #fddf8c;
	border-color: #fddf8c;
	text-decoration: none;
	outline: none !important;
}

.btn-link {
	background-image: url(../img/img_link-arrow.svg);
	background-size: 1em;
	background-position: top 0.3em left;
	background-repeat: no-repeat;
	padding: 0.15em 0em 0.15em 1.5em;
	text-align: left;

	text-decoration: none;
	white-space: normal;
	color: #000000;

	border-radius: 0;
	display: inline-block;
	cursor: pointer;
	display: block;
}

.btn-link.btn-language {
	padding: 0.25em 0em 0.25em 1.5em;
	margin-right: 0.5em;
}


.btn-link:hover {
	background-image: url(../img/img_link-arrow-blau.svg);

	background-size: 1em;
	background-position: top 0.3em left;
	background-repeat: no-repeat;
	padding: 0.15em 0em 0.15em 1.5em;
	color: #29A8C7;
}

.btn-link.btn-language:hover {
	padding: 0.25em 0em 0.25em 1.5em;
	margin-right: 0.5em;
}

.offline .contentnotoffline>* {
	display: none;
}

.offline .infoblock.contentnotoffline {
	display: none;
}

.fullbtn {

	position: absolute;
	left: 1.5em;
	bottom: 1.5em;
	user-select: none;
	width: 2em;
	height: 2em;
	padding: 0.25em;
	cursor: pointer;
	opacity: 0.2;
	z-index: 110;
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.carousel-item {
		transition: transform 0.6s ease-in-out;
	}
}


@media (orientation:portrait) {
	.languagelist {

		columns: 2;

	}

	.hotspots .hotspot[data-card='workflow_core'] {
		top: 72% !important;
		left: 48% !important;
	}

	.logo {
		width: 35%;
	}

	.web .hotspotarea .hotspottext {
		width: 50vw;
		white-space: normal;

		top: 40%
	}

	.hotspotarea[data-card='area_person'] .hotspottext {
		transform: translate(200%, 0);

	}

	.hotspotarea[data-card='area_person'].in .hotspottext {
		transform: translate(100%, 0);

	}


	.hotspotarea[data-card='area_worker'].in .hotspottext {
		transform: translate(65%, 0);

	}



	.hotspotarea[data-card='area_machine'].in .hotspottext {
		transform: translate(20%, 0);

	}

	.game iframe {

		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;

	}


}

@media (max-aspect-ratio: 1/2) {
	/* .hotspot {
		background: #ffff00;
	} */

	.square {

		left: 40%;

	}

	.scalehotspots {
		height: 160%;
		width: 140%;
		top: -30%;
		left: -15%;
	}
}

@media (min-aspect-ratio: 1/2) {
	/* .hotspot {
		background: #ffff00;
	} */

	.square {

		left: 40%;

	}

	.scalehotspots {
		height: 160%;
		width: 140%;
		top: -30%;
		left: -15%;
	}
}



@media (min-aspect-ratio: 3/4) {
	/* .hotspot {
		background: #0000ff;
	} */

	.square {

		left: 50%;

	}

	.scalehotspots {
		height: 140%;
		width: 140%;
		top: -20%;
		left: -15%;
	}
}

@media (min-aspect-ratio: 1/1) {
	/* .hotspot {
		background: #00ffff;
	} */

	.scalehotspots {
		height: 140%;
		width: 140%;
		top: -15%;
		left: -15%;
	}

	.square {
		left: 50%;
	}

	.web .hotspotarea .hotspottext {

		top: 52%
	}


}

@media (min-aspect-ratio: 8/5) {
	/* .hotspot {
		background: #ff0000;
	} */

	.scalehotspots {
		height: 100%;
		width: 100%;
		top: 2%;
		left: 0%;
	}

	.web .hotspotarea .hotspottext {

		top: 35%
	}

	.logo {

		top: 4em;


	}

}



@media (min-aspect-ratio: 16/7) {

	/* .hotspot {
		background: #25aa25;
	} */

	.logo {
		width: 50%;
		max-width: 16em;

		top: 4em;
		left: 5em;
		transform: translate(0%, 0);

	}

	.logo .hotspottext {

		font-size: 1.2em;
		line-height: 1.2em;
	}

	.scalehotspots {
		height: 100%;
		width: 100%;
		top: 0%;
		left: 0%;
	}
}



@media (aspect-ratio: 1/1) {
	/* .hotspot {
		background: #9999ff;
	} */
}

@media (max-height:768px) {
	.game iframe {

		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;

	}

	.logo {
		top: 3.5em;
	}

	.yellowcard {
		transform: translate(0, -30%);

	}




}

@media (max-width:1199px) {


	.info .hotspotimage video,
	.info .hotspotimage .hotspots {
		scale: 1.5;
	}

	.info .hotspotimage .hotspots .hotspot {
		scale: 0.75;
	}


}

@media (max-width:991px) {

	.info .slidenext,
	.info .slideprev,
	.info .homebtn {
		font-size: 0.85em;
		line-height: 1.3em;
	}
}


@media (max-width:767px) {
	.info .title {
		line-height: 1.2em;
		font-size: 1.75em;
		background-position: top left;
	}

	.info .subtitle {
		padding-left: 1.25em;
	}

	.info_inner {

		width: calc(100% - 4em);
		height: calc(100% - 5em);
		max-height: calc(100% - 5em);
		margin: auto;
		max-width: 90em;

	}

	.info .infoblock {
		padding: 1em;

	}

	.info .infoblock.grey {
		padding-top: 1.25em;
		padding-bottom: 0.75em;
	}

	.info .slidenext {
		margin-right: 0.5em;
	}

	.info .slideprev {
		margin-left: 0.5em;
	}

	.info .slideprev::before {

		left: -1.25em;

	}

	.info .slidenext::before {

		right: -1.25em;

	}

	.info .tobtnholder {

		bottom: -0.5em;

	}

	.info .zoomimageholder .closezoomimagebig {

		bottom: 0.5em;


	}


	.info .info_closebtn {

		background-color: #fbb900;
		border-radius: 50%;
		padding: 0.5em;
		top: -1em;
		right: -1em;
		width: 2.5em;
		height: 2.5em;

	}


	.info .slidenext span,
	.info .slideprev span {
		display: none;
	}



	.cardlogo {
		display: none;

	}

	.yellowcard {
		transform: translate(0, -30%);
		max-width: 50vw;
		hyphens: auto;
		hyphenate-limit-lines: 2;
	}

	.yellowcard .carousel-item {
		padding: 1em 2em 1em 2em;
		hyphens: auto;
		hyphenate-limit-lines: 2;

	}

	.yellowcard .closebtn {
		background-color: #fbb900;
		border-radius: 50%;
		border: 2px solid #ffffff;
		padding: 0.35em;
		top: -1em;
		right: -1em;
		width: 2.5em;
		height: 2.5em;

	}

	.language {

		right: 2em;
		top: 1em;

	}

	.hotspotarea .hotspottext {
		width: 50vw;
		font-size: 1em;
		line-height: 1.2em;

	}


	.logo .hotspottext {

		font-size: 1.2em;
		line-height: 1.2em;
	}

	.hotspots .hotspot .hotspottext {

		font-size: 1em;
		line-height: 1.2em;
	}

	.hotspotgame {
		font-size: 1em;
		position: absolute;
		bottom: 2em;
		right: 2em;
		padding: 0.25em 1.75em;

	}

	.language {

		right: 1em;
		top: 1em;

	}

}