@import url(https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

.d-none{display:none}

.footer[data-v-516044d2] {
	margin-top: 11.11111%;
	margin-bottom: 11.11111%;
	text-align: right;
	font-size: .82609em;
	
}

a[data-v-516044d2] {
	color: #2c3e50;
	text-decoration: none;
	font-weight: 500
}

a[data-v-516044d2]:hover {
	text-decoration: underline
}

a.router-link-active[data-v-516044d2] {
	color: #dd7400
}

@media only screen and (max-width:660px) {
	.footer[data-v-516044d2] {
		margin-left: 0;
		margin-right: 6.25%;
		margin-bottom:15%;
		padding-bottom: 3rem;
	}
}

.navv[data-v-1cc0d8d7] {
	pointer-events: none;
	position: fixed;
	top: 0;
	left: auto;
	right: 0;
	width: 100vw;
	z-index: 100;
	height: auto
}

.navv.open[data-v-1cc0d8d7] {
	height: 100vh
}

.navv.blitz[data-v-1cc0d8d7] {
	background-color: #dd7400
}

.navv a[data-v-1cc0d8d7] {
	font-weight: 400;
	color: #fff;
	font-size: 1.34783em;
	text-transform: uppercase
}

.navv a.router-link-exact-active[data-v-1cc0d8d7] {
	color: #000
}

.navv .burger[data-v-1cc0d8d7] {
	pointer-events: auto;
	position: fixed;
	left: 35px;
	top: 20px;
	cursor: pointer
}

@media only screen and (max-width:840px) {
	.navv .burger[data-v-1cc0d8d7]{
		right: 35px;
		left:inherit;
	}
}


.navv .burger div[data-v-1cc0d8d7] {
	width: 30px;
	height: 4px;
	border-radius: 5px;
	background-color: #dd7400;
	margin-bottom: 6px;
	transform-origin: center
}

.navv .burger.active div[data-v-1cc0d8d7] {
	background-color: #fff
}

.navv .burger:hover div[data-v-1cc0d8d7] {
	background-color: #000
}

.navv .background[data-v-1cc0d8d7] {
	pointer-events: auto;
	height: 100vh;
	width: 100vw;
	left: 0;
	top: 0;
	position: fixed;
	transform-origin: center center
}

.navv .background .left[data-v-1cc0d8d7] {
	position: absolute;
	background-color: transparent;
	height: 50%;
	width: 50%
}

.navv .background .left[data-v-1cc0d8d7]:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #dd7400;
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%)
}

.navv .background .right[data-v-1cc0d8d7] {
	position: absolute;
	background-color: transparent;
	height: 50%;
	width: 50%;
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
	transform-origin: right bottom
}

.navv .background .right[data-v-1cc0d8d7]:before {
	content: "";
	position: absolute;
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #be6400;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
	clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.navv .menue[data-v-1cc0d8d7] {
	pointer-events: auto;
	z-index: 1000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.navv .menue a[data-v-1cc0d8d7] {
	text-decoration: none
}

.navv .menue li[data-v-1cc0d8d7],
.navv .menue ul[data-v-1cc0d8d7] {
	padding: 0;
	margin: 0;
	margin-bottom: 10px
}

.navv .menue li span[data-v-1cc0d8d7],
.navv .menue ul span[data-v-1cc0d8d7] {
	position: relative;
	top: -50px
}

.navv .menue li[data-v-1cc0d8d7] {
	list-style: none
}

.navv .menue li ul[data-v-1cc0d8d7] {
	margin-bottom: 0;
	margin-left: 20px
}

.navv .menue li ul li[data-v-1cc0d8d7] {
	margin-bottom: 0
}

.navv .logo[data-v-1cc0d8d7] {
	pointer-events: auto;
	position: fixed;
	top: 8.33333%;
	z-index: 10000
}

@media only screen and (max-width:660px) {
	.logo-in-content[data-v-1c881ccc] {
		display: none
	}

	.image-content[data-v-1c881ccc] {
		display: block;
		width: 100%;
		height: 6.01852%;
		max-height: 200px
	}

	.image-content img[data-v-1c881ccc] {
		width: 100%;
		vertical-align: middle;
		height: 200px;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: top center;
		object-position: top center
	}
}

.logo-container {
	margin-bottom: 11.11111%
}

.logo-container .logo {
	width: 148px;
	height: auto;
	cursor: pointer
}

@media only screen and (max-width:660px) {
	.logo-container {
		margin-bottom: 0
	}

	.logo-container .logo {
		width: auto;
		height: 100%
	}
}

body,
html {
	scroll-behavior: smooth;
	width: 100%;
	padding: 0;
	margin: 0;
	height: auto;
	min-height: 100vh;
	font-family: Spectral, serif;
	color: #2c3e50;
	overflow: hidden
}

#c-app,
#c-app #app {
	height: 100vh
}

#c-app #app {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	display: grid;
	width: 100%;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	grid-template-columns: 53.125% auto;
	grid-template-rows: auto;
	overflow-y: auto;
	scroll-behavior: smooth
}

#c-app #app .logo-app {
	display: none
}

#c-app #app.oneColumn {
	grid-template-columns: 100%
}

#c-app #app.oneColumn .content {
	margin-right: 0;
	justify-self: center;
	margin-top: 3.7037%;
	  width: 68.7%;
}

#c-app #app.oneColumn .content .section {
	margin-left: 0
}

#c-app #app.oneColumn .content .section .article_,
#c-app #app.oneColumn .content .section h2 {
	text-align: center
}

#c-app #app.oneColumn .content .section .article h1,
#c-app #app.oneColumn .content .section h2 h1 {
	font-size: 1.78261em;
	line-height: 1.56522em;
	margin: 0;
	font-weight: 400;
	text-transform: none;
	
	font-size: 1.04348em;
	margin: 0;
	margin-bottom: .21739em;
	font-weight: 600;

}

#c-app #app.oneColumn .content .section .article h2,
#c-app #app.oneColumn .content .section h2 h2 {
	line-height: 1.34783em;
	text-transform: none;
	/*font-size: 1.34783em;*/
	font-weight: 400;
	
	font-size: 1em;
    line-height: 1.56522em;
}


#c-app #app.oneColumn .content .section .article h2.orange{	line-height: 1.34783em;
	text-transform: none;
/*	font-size: 1.34783em;*/
	font-weight: 600;
font-size: 1em;
}


#c-app #app.oneColumn .content .section .article h2.orange,
#c-app #app.oneColumn .content .section h2 h2.orange {
	text-transform: uppercase
}

#c-app #app.oneColumn .content .section .article h2.pg-kursive,
#c-app #app.oneColumn .content .section h2 h2.pg-kursive {
	font-weight: 300;
	text-transform: none
}

#c-app #app .content {
	transition: width .25s, height .25s;
	grid-column-start: 1;
	grid-column-end: 2;
	justify-self: right;
	margin-right: 12.2549%;
	width: 63.23529%;
	margin-top: 8.33333%;
	padding-bottom: 2rem;
}


#c-app #app .content .section {
	margin-left: 7.84314%
}

#c-app #app .content .section .article,
#c-app #app .content .section h2 {
	font-size: .91304em;
	line-height: 1.56522em
}

#c-app #app .content .section .article.pg-kursive,
#c-app #app .content .section h2.pg-kursive {
	font-weight: 400;
	font-size: 1em;
	text-transform: none;
	font-style: italic
}

#c-app #app .content .section .article .hr-gray,
#c-app #app .content .section h2 .hr-gray {
	width: 100%;
	height: 2px;
	border: none;
	background-color: rgba(210, 210, 209, .5);
	margin: 6.01852% 0
}

#c-app #app .content .section .article a,
#c-app #app .content .section h2 a {
	color: #dd7400;
	text-decoration: none
}

#c-app #app .content .section .article a:hover,
#c-app #app .content .section h2 a:hover {
	color: #2c3e50;
	text-decoration: underline
}

#c-app #app .content .section .article a.dots,
#c-app #app .content .section h2 a.dots {
	font-size: 2em
}

#c-app #app .content .section .article h1,
#c-app #app .content .section h2 h1 {
	font-size: 1.04348em;
	margin: 0;
	margin-bottom: .21739em;
	font-weight: 600;
	text-transform: uppercase
}

#c-app #app .content .section .article ul,
#c-app #app .content .section h2 ul {
	padding: 0;
	margin: 0
}

#c-app #app .content .section .article ul li,
#c-app #app .content .section h2 ul li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: left;
	display: table-row
}

#c-app #app .content .section .article ul li:before,
#c-app #app .content .section h2 ul li:before {
	padding-right: 5px;
	content: ">";
	display: table-cell;
	text-align: right
}

#c-app #app .content .section .article button,
#c-app #app .content .section h2 button {
	font-size: 1.34783em;
	font-family: Spectral, serif;
	background-color: #dd7400;
	color: #fff;
	border: 1px solid #dd7400;
	padding: 5px 15px;
	cursor: pointer
}

#c-app #app .content .section .article button:hover,
#c-app #app .content .section h2 button:hover {
	background-color: #fff;
	color: #dd7400
}

#c-app #app .content .section h2 {
/*	text-transform: uppercase;*/
	margin: 0;
	font-weight: 700;
	display: inline-block
}

#c-app #app .content .section h1.orange,
#c-app #app .content .section h2.orange {
	color: #dd7400;
	text-transform: uppercase
}

#c-app #app .content .section .datenschutz,
#c-app #app .content .section .impressum {
	word-break: break-word;
	width: 100%
}

#c-app #app .content .section .datenschutz img,
#c-app #app .content .section .datenschutz table,
#c-app #app .content .section .impressum img,
#c-app #app .content .section .impressum table {
	width: 100%
}

#c-app #app .content .section .datenschutz table tr,
#c-app #app .content .section .impressum table tr {
	text-align: left;
	vertical-align: top
}

#c-app #app .content .section .datenschutz table tr td:first-child,
#c-app #app .content .section .impressum table tr td:first-child {
	padding-right: 10px
}

#c-app #app .content .section .datenschutz ol,
#c-app #app .content .section .impressum ol {
	padding: 0;
	width: calc(100% - 20px);
	margin: 20px
}

#c-app #app .content .section .datenschutz ul,
#c-app #app .content .section .impressum ul {
	width: calc(100% - 20px);
	margin: 20px
}

#c-app #app .content .section .datenschutz ul li,
#c-app #app .content .section .impressum ul li {
	list-style-type: circle;
	padding: 0;
	margin: 10px;
	display: list-item
}

#c-app #app .content .section .datenschutz ul li:before,
#c-app #app .content .section .impressum ul li:before {
	all: initial
}

#c-app #app .content .section .datenschutz h2,
#c-app #app .content .section .impressum h2 {
	display: block;
	width: 100%;
	margin-top: 20px
}

#c-app #app .content .section .datenschutz h3,
#c-app #app .content .section .impressum h3 {
	margin: 0;
	width: 100%;
	margin-top: 10px;
	font-size: 1em
}

#c-app #app .image {
	transition: width .25s, height .25s;
	display: grid;
	position: fixed;
	width: 46.875%;
	height: 100vh;
	left: auto;
	right: 0;
	top: 0;
	z-index: -30;
	align-items: center
}

#c-app #app .image.oneColumn {
	display: none
}

#c-app #app .image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

@media only screen and (max-width:840px) {
	#c-app #app {
		grid-template-columns: 57.29167% auto
	}

	#c-app #app .content {
		width: 72.91667%
	}

	#c-app #app.oneColumn .content {
		width: 88.23529%
	}

	#c-app #app .image {
		width: 42.70833%
	}
}

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

	body,
	html {
		overflow: hidden
	}

	#c-app #app {
		grid-template-columns: 1fr;
		grid-template-rows: 16.2037% auto;
		grid-template-areas: "logo""appcontent"
	}

	#c-app #app.content-scroll-mobile {
		width: 100%;
		height: 100vh;
		overflow: auto;
		scroll-behavior: smooth
	}

	#c-app #app .logo-app {
		display: block;
		background-color: #fff;
		position: fixed;
		height: 16.2037%;
		padding: 10px;
		max-height: 185px;
		width: 100%
	}

	#c-app #app .content {
		grid-area: appcontent;
		width: 100%;
		margin: 0
	}

	#c-app #app .content .section {
		margin: 0
	}

	#c-app #app .content .section .article {
		margin-top: 6.48148%;
		margin-left: 9.72222%;
		margin-right: 5.09259%
	}

	#c-app #app.oneColumn .content {
		width: 88.23529%;
		width: 100%;
	}

	#c-app #app.oneColumn .content .section {
		margin: 0
	}

	#c-app #app.oneColumn .content .section .article,
	#c-app #app.oneColumn .content .section h2 {
		text-align: left
	}

	#c-app #app.oneColumn .content .section .article {
		margin-top: 6.48148%;
		margin-left: 9.72222%;
		margin-right: 5.09259%
	}

	#c-app #app .image {
		display: none
	}
}

.image-content {
	display: none
}

@media only screen and (max-width:660px) {
	.logo-in-content {
		display: none
	}
}

.headline[data-v-4d139e0e] {
	/*margin-bottom: 4.16667%;*/
	margin-bottom: 6%;
}

.subhealine[data-v-4d139e0e] {
	margin-bottom: 2.31481%
}

.col[data-v-4d139e0e] {
	width: 100%;
	justify-self: center
}

.col .column-2[data-v-4d139e0e] {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-gap: 6.51042%
}

.col .column-2 .left[data-v-4d139e0e] {
	grid-column-start: 1;
	grid-column-end: 2
}

.col .column-2 .rigth[data-v-4d139e0e] {
	grid-column-start: 2;
	grid-column-end: 3
}

.col .button[data-v-4d139e0e] {
	margin-top: 7.40741%
}

@media only screen and (max-width:580px) {
	.col .column-2[data-v-4d139e0e] {
		grid-template-columns: auto
	}

	.col .column-2 .left[data-v-4d139e0e],
	.col .column-2 .rigth[data-v-4d139e0e] {
		grid-column-start: 1;
		grid-column-end: 2
	}

	.col .column-2 .rigth[data-v-4d139e0e] {
		margin-bottom: 6.51042%
	}
}

.text h1[data-v-6f21c159] {
	display: inline-block
}

.button[data-v-6f21c159] {
	margin-top: 7.40741%
}

.image-content[data-v-4b7d3dd2] {
	display: none
}

.section .modules[data-v-4b7d3dd2] {
	/* display: grid */
}

@media only screen and (max-width:660px) {
	.logo-in-content[data-v-4b7d3dd2] {
		display: none
	}

	.image-content[data-v-4b7d3dd2] {
		display: block;
		width: 100%;
		height: 6.01852%;
		max-height: 200px
	}

	.image-content.image-none[data-v-4b7d3dd2] {
		display: none
	}

	.image-content img[data-v-4b7d3dd2] {
		width: 100%;
		vertical-align: middle;
		height: 200px
	}
}

a.linkwarrow{color: #2c3e50 !important;}
a.linkwarrow:before{content:"➜";
	font-size:15px;
	margin-left:0px;
	margin-right:5px;
	padding-left:5px;
	color:"#dd7400";
	color: #2c3e50;
	margin-top:5px;
	animation: fadeInOut ease 1.3s;	
	  animation-iteration-count: infinite;
	    animation-fill-mode: forwards;
	text-decoration:none;
}
a.linkwarrow:hover{text-decoration:none !important;}

@keyframes fadeInOut {
    0% {
      
			opacity:1;
    }
    50% {
       
		opacity:0;
     }
	
	
	100%{opacity:1;
	}
}


#intro{width: 100vw;
    height: 100vh;
    position: absolute;
    background: #fff;
    display: block;
    top: 0;
    background-image: url(/img/JP-Logo.svg);
    background-repeat: no-repeat;
    background-size: 26%;
    background-position: center 45%;
 		z-index:100;
	pointer-events: none;
	   opacity:0;

}

#intro.zoom{animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}

@keyframes fadeInAnimation {
    0% {
        transform: scale(1);
			opacity:1;
    }
    70% {
        transform: scale(1.3);
		opacity:1;
     }
	
	 99% {
		  transform: scale(1.3);
       opacity:0;

			z-index:100;
     }
	100%{visibility:hidden;

		z-index:-1;
	}
}