/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* ######## 360 GRAD TOOL KEBA ###########################*/
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


:root {
	--white:#fff!important;
	--background-color:#d0e6ee!important;
	--headline-color:rgb(131,140,145)!important;
	--link-color:#53AD31!important;
	--primary-color: #53AD31;
  	--primary-color-darker: #3d8421;
  	--primary-color-transparent: rgba(76, 159, 45, 0.8);
}

p {
	color:#444;
}
a {
	color:var(--link-color);
	font-weight:600;
}
.jstour360popup {
	border-radius:10px;
	padding: 35px 25px 25px 25px;
}

color:#47646e;
.jstour360popup h1{
	background: none !important;
	height: auto !important;
	text-transform: uppercase !important;
	font-size: 30px !important;
	padding-bottom: 0 !important;
}
.jstour360popup h2,
.jstour360popup h3 {
	color: rgb(68 68 68/var(--tw-text-opacity))!important;
	--tw-text-opacity: 1;
	font-weight: 400!important;
	letter-spacing: .01em;
	line-height: 1.2;
	font-size: 1.375rem!important;
	text-transform: unset;
}
.jstour360popup p:has(small){
	line-height: 110%;
}


/********************** STORY FINISHED POPUP **********************/

#kemasStoryFinishedPopup{
	top: 50px !important;
}
	#kemasStoryFinishedPopup h1 {
		margin-bottom: 10px;
		font-size: 1.7rem;
		margin-top: 0;
		font-weight: 400;
		color: #444;	
	}
	
#kemasStoryFinishedPopup a.cms_content_button{
	color: var(--primary-color);
	width: auto;
	border: none;
	padding: 10px 0;
	-webkit-appearance: none;
	display: inline-block;
	margin: 10px 0 0 0;
	position: relative;
	font-weight: 600;
	transition: none;
	box-sizing: border-box;
	z-index: 1;
	line-height: 100%;
}
#kemasStoryFinishedPopup a.cms_content_button::before{
	content: none;
}


/********************** PERSON IMAGE **********************/

/* add padding-right to story-info if p with class jstour360person is in in the popup > otherwise person-image will cover the text  */
#jstour360storyInfo:has(p.jstour360person) p:first-child{
	padding-right: 130px;
}

.jstour360person img{
	position: absolute;
	right: -20px;
	top: -12px;
	border-radius: 100px 0px 100px 100px;
	width: 115px;
	border: solid 5px #DFDFDF;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
	z-index: 2;
}
.jstour360person span{
	position: absolute;
	right: 73px;
	top: 75px;
	display: block;
	background: #DFDFDF;
	padding: 3px 30px 3px 10px;
	color: #5C666D;
	z-index: 1;
	text-align: right;
}


/********************** BUTTON-MANAGEMENT FOR WORKFLOW-INTERRUPTION (e.g. because of video or black-fade) **********************/

/* hide close-button if span with class jstour360popupDisableCloseButton in in the popup > needed for black-fade */
#jstour360storyInfoPopup:has(span.jstour360popupDisableCloseButton) span.close{
	display:none;
}

.jstour360popupButtonInText{
	color: #fff;
	background: var(--primary-color);
	font-size: 16px;
	width: auto;
	padding: 10px 15px;
	-webkit-appearance: none;
	text-transform: uppercase;
	display: inline-block;
	margin: 10px 0 0 0;
	font-weight: 400;
	line-height: 100%;
	cursor: pointer;
}
.jstour360popupButtonInText:hover{
	background: var(--primary-color-darker);
}


/********************** BLACK-FADE + VIDEO **********************/

#jstour360blackFadeLayer,
#jstour360videoLayer{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: black;
	opacity: 0;
	transition: opacity 0.5s linear; 
}
#jstour360blackFadeLayer.jstour360blackFadeLayerToBlack,
#jstour360videoLayer.jstour360videoLayerToBlack{
	opacity: 1;
}

#jstour360videoLayer video{
	width: calc(100% + 10px);
	height: auto;
	margin-top: -80px;
	position: absolute;
	right: -10px;
}

@media only screen and (max-width: 1480px) {
	#jstour360videoLayer video{
		width: calc(100% + 10px);
		height: auto;
		margin-top: 0px;
	}
}

@media only screen and (max-width: 1390px) {
	#jstour360videoLayer video{
		width: auto;
		height: 102%;
		margin-top: -10px;
	}
}

@media only screen and (max-width: 1300px) {
	#jstour360videoLayer video{
		width: calc(100% + 10px);
		height: 125%;
		margin-top: -100px;
	}
}

@media only screen and (max-width: 980px) {
	#jstour360videoLayer video{
		width: auto;
		height: 120%;
		margin-top: -80px;
	}
}

@media only screen and (max-width: 745px) {
	#jstour360videoLayer video{
		width: auto;
		height: 100%;
		margin-top: 0px;
	}
}

@media only screen and (max-width: 600px) {
	#jstour360videoLayer video{
		width: calc(100% + 10px);
		height: auto;
		margin-top: -30px;
	}
}



/********************** HIGHLIGHT-HOTSPOTS **********************/

.pnlm-hotspot.jstour360highlightedHotSpot {
	background: url('../icons/icon-footprint.svg')no-repeat!important;
	background-size: 28px !important;
	background-color: #fff !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 60px !important;
	background-position: 11px !important;
	box-shadow: 0 0 0 var(--primary-color-transparent);
	animation: flummy 4s infinite;
	border: 3px solid #53ad31!important;
}

@keyframes flummy {

    /* Pause */
    0%, 85%, 100% {
        margin-top: 0;
    }

    /* Großer Sprung */
    88% {
        margin-top: -20px;
    }

    /* Landung */
    91% {
        margin-top: 0;
    }

    /* Kleiner Nachhüpfer */
    94% {
        margin-top: -8px;
    }

    /* Endgültige Landung */
    97% {
        margin-top: 0;
    }
}


.pnlm-hotspot.pnlm-info {
	background:url('../icons/icon-info.svg')no-repeat #53AD31;
	background-size: 42px;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-position: -1px;
	border: 3px solid rgb(255, 255, 255);
}
.pnlm-hotspot.pnlm-scene {
	background:url('../icons/icon-arrow.svg')no-repeat #53AD31;
	background-size: 32px;
	width: 30px;
	height: 30px;
	border-radius: 20px;
	background-position: -1px;
	border: 1px solid rgb(255, 255, 255);
}


/********************** wrapper *********************/

#wrapper360 {
	max-width:1620px;
	margin:30px auto;
	position:relative;
	box-sizing: border-box;
}
	#jstour360map{
		right: -75px !important;
		scale: 0.75;
		top: -50px;
	}

	#jstour360container {
		width: calc(100% - 500px) !important;
	}
		#jstour360storyInfo{
			z-index: 2 !important;
		}
		.jstour360popup{
			top: 160px !important;
			z-index: 2 !important;
		}


/********************** KEMAS STORY *********************/	

#jstour360storyInfo{
	background: var(--link-color)!important;
	padding: 10px 10px 3px 40px!important;
	box-sizing:border-box!important;
}
#jstour360storyInfo p{
	color:var(--white)!important;
}
	

/********************** KEMAS everything else *********************/

.pnlm-controls-container {
	top:60px;
}
.pnlm-panorama-info {
	border-radius:0;
	bottom:10px;
	padding:5px 15px 5px 10px;
	background:#fff;
	box-shadow: 6px 0 12px rgba(0, 0, 0, 0.2);

}
.pnlm-title-box,
.pnlm-load-box p{
	color:#444!important;
}



@media only screen and (max-width: 1700px) {
	#wrapper360 {
		max-width:1470px;
		padding: 0 30px;
	}
		#jstour360map{
			right: -45px !important;
		}
}

@media only screen and (max-width: 1300px) {
	#wrapper360 {
		width: 90%;
		padding: 0;
	}
		#jstour360map{
			display: none;
		}
}
@media only screen and (max-width: 1200px) {
	.content360 #entry_default_bild{
		display: none;
	}
	.content360 #entry_default_text{
		margin-top: 30px;
	}
}
@media only screen and (max-width: 1100px) {
	.content360 #entry_default_text{
		margin-top: 0;
	}
}

@media screen and (orientation: portrait) and (max-width: 15cm) {
	body{
		background: #000 !important;
	}
	body *{
		opacity: 0.3 !important;
	}
	body::before{
		background: url('../icons/turntolandscape.svg') no-repeat center;
		background-size: 200px;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
	}
}