/* CSS Document */

@-ms-viewport {width:100vw;}
@viewport {width:100vw;}

@font-face {
    font-family:"ibm_plex_sansregular";
    src: url('/fonts/ibmplexsans-regular-webfont.eot');
    src: url('/fonts/ibmplexsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ibmplexsans-regular-webfont.woff2') format('woff2'),
         url('/fonts/ibmplexsans-regular-webfont.woff') format('woff'),
         url('/fonts/ibmplexsans-regular-webfont.ttf') format('truetype'),
         url('/fonts/ibmplexsans-regular-webfont.svg#ibm_plex_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'ibm_plex_sansbold';
    src: url('/fonts/ibmplexsans-bold-webfont.eot');
    src: url('/fonts/ibmplexsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ibmplexsans-bold-webfont.woff2') format('woff2'),
         url('/fonts/ibmplexsans-bold-webfont.woff') format('woff'),
         url('/fonts/ibmplexsans-bold-webfont.ttf') format('truetype'),
         url('/fonts/ibmplexsans-bold-webfont.svg#ibm_plex_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'ibm_plex_sansitalic';
    src: url('/fonts/ibmplexsans-italic-webfont.eot');
    src: url('/fonts/ibmplexsans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ibmplexsans-italic-webfont.woff2') format('woff2'),
         url('/fonts/ibmplexsans-italic-webfont.woff') format('woff'),
         url('/fonts/ibmplexsans-italic-webfont.ttf') format('truetype'),
         url('/fonts/ibmplexsans-italic-webfont.svg#ibm_plex_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}


:root.wp-active {font-size:1.18rem; letter-spacing:0.01em;}


	* {-webkit-text-size-adjust: auto;}
	* {box-sizing:border-box;}
	body {background:#000; color:#ddd; margin:0;}
	html {-webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            padding:0}

	body.gen {background:linear-gradient(to bottom,#082325,#000); height:100vh;}
	body.bpc {width:100%; height:100%;}

	h1,h2,h3,h4,h5,p,a,button,span,abbr,ul,li {letter-spacing:.03em; color:#eee; margin:0; padding:0; line-height:1.572em; }
	h1 {/*font-family:'bebas_neueregular', sans-serif;*/font-family:'ibm_plex_sansitalic', sans-serif; font-weight:400; letter-spacing:.05em;}
	h2,h3,h4,h5,p,a,button,span,abbr,small,ul,li,figcaption {font-family:'ibm_plex_sansregular', sans-serif; font-weight:400;}
	ul {margin:2em 0;}
	li {padding:.5em 0 .5em 3.67em;}
	li:nth-child(2n+1) {padding-left:1.76em;}
	a,abbr,h5 {font-size:107%;}
	p,span {font-size:102%;}
	strong,h6 {font-family:'ibm_plex_sansbold', sans-serif; font-size:113%;}
	em {font-family:'ibm_plex_sansitalic', sans-serif;}
	a,a:hover {transition:all .9s ease;}

	button {background:#222; color:#777; font-family:'ibm_plex_sansregular', sans-serif; /*background:#1d008b; color:#5e85e8;*/ border:none; margin-left:-.57em; padding:.12em .76em .29em .85em; border-radius:5px; margin-top:5vh; font-size:1.1em; transition:ease-in-out .75s;}
	button:hover {/*background:#dcc1fd; color:#4414fb;*/ background:#3300f9; color:#dcc1fd; text-shadow:none;}



/*index*/
.gen .open {margin:0 0 7vh; width:100vw; height:91vh;}
.gen .open img {object-fit:cover; box-shadow:0 0 5px #000; width:100%; height:100%;}
.gen .open h1 {font-size:2em; color:#bbb; letter-spacing:.05em; text-align:center; line-height:.831em; text-shadow:3px -5px 4px #000;}
.gen .open h1 span.cp {font-size:48%; color:/*#857cff*/#66c0ff; background:#270090; padding:0 .2em;}
.gen .open h1 span.wp {border-top: 1px solid #4414fb; color:/*#506aff*/#7ebcff; border-bottom: 1px solid #4414fb; padding:.3em .5em .5em;}


#backed {height:87vh; width:100.01vw; margin:0; box-shadow:0 -23px 108px #444;}
.item {width:20vw; height:22.8vh; margin:0; float:left; background:#082325;}
.item img {object-fit:cover; border:4px solid #000; border-top:2.7vh solid #000; width:100%; height:100%;}

@media (max-width:1024px) {.item {width:24.676vw; height:20vh;}}
@media (max-width:768px) {.item {width:50vw; height:24.676vh;}
		.gen .open {margin:0 0 11.9vh;}
		.gen .open h1 {font-size:1.76em; margin-top:-.46em; color:#bbb;}
		.gen .open h1 span.wp {padding:.1em .5em; display:inline-block; margin-top:.5em;}
		.gen .open h1 span.cp {font-size:16px;}
}	
@media (max-width:768px) and (orientation:landscape) {
	.item {width:33vw; height:33.23vh;}
	.gen .open {margin:0 0 17.9vh;}
	.gen .open h1 {font-size:1.9em; margin-top:-.23em;}
	.gen .open h1 span.cp {font-size:17px;}
}	




/*zurück*/
.zrck {width:44px; height:44px; border-radius:22px; background:#000; display:block; margin:10vh 0 6vh 76vw; box-shadow:0 0 40px #666; position:fixed; bottom:5.12vh; z-index:10000; transition: ease-in 1s;}
.zrck a {text-decoration:none; text-align:center; font-size:200%; display:block; color:#4414fb; margin-top:-7px; border:none!important;}
.zrck a small {text-align:center; padding:.1em 0 0 .1em; color:#fff; font-size:42%; display:block; border:none;}
.zrck:hover {box-shadow:0 0 40px #aaa; transition: ease-out 1s;}
@media (max-width:768px) {.zrck {bottom:8vh; margin:10vh 48vw;}}	
@media (max-width:768px) and (orientation:landscape) {.zrck {margin-left:91vw;}}	




/*detail*/
.wrap {height:auto; width:100vw; margin:0 auto;}
.padd {padding:12vh 8% 5%; height:auto; min-height:60vh;}
.pic {width:57%; float:left;}
.pic img {width:100%; height:auto; box-shadow:0 0 90px #333; aspect-ratio:3/2; display:block; background:#000; margin-left:8%; max-width:840px;}
.txt {width:43%; float:left;}
.innerpadd {padding:2vh 0 0 52%;}
.innerpadd h1 {border-bottom:1px solid #444; border-top:1px solid #444; padding:.5em 10px .7em; margin-left:-10px; -webkit-transition:color 1.76s ease; -moz-transition:color 1.76s ease; -o-transition:color 1.76s ease; background-image:linear-gradient(315deg,#888,#555,#999); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:400; letter-spacing:.05em; line-height:.9em; display:inline-block; font-size:1.276em; font-family:'ibm_plex_sansregular', sans-serif;}
.innerpadd p {color:#666;}
.innerpadd span {letter-spacing:.1em; display:inline-block; margin:3.6em 0 2vh; line-height:1.42em; font-size:.94rem; color:#888;}
.innerpadd a {text-decoration:none; color:#999; border-bottom:1px solid #444; padding:0 .1em .1em;}

@media (max-width:1024px) {
	.pic,.txt {width:100%;}
	.padd {padding:15vh 10vw;}
	.innerpadd {padding:25vh 0 13vh;}
	.pic img {margin-left:0;}
}

@media (max-width:768px) {
	.padd {padding:0%;}
	.innerpadd {padding:10vh 8vw 12vh;}
	.txt {margin-top:5vh; margin-bottom:2.5vh;}
	.innerpadd h1 {padding-bottom:.7em;}
	.pic img {margin-top:1.823em;}
}

@media (max-width:768px) and (orientation:landscape) {
	.pic img {max-height:79vh; width:auto; margin:0 auto;}
	.txt .innerpadd {padding:7vh 28vw 12vh 8vw;}
}



/*backpic*/
.bpc .bgi {position:fixed; z-index:0;}
.bpc .bgi > div {width:100vw; height:100vh; margin:0;}
.bpc .bgi img {object-fit:cover; width:100%; min-height:100%; height:auto; background:#000; opacity:.44;}

.bpc h1 {color:#fff; padding:68vh 0 3vh; font-size:200%;}
.bpc.short h1 {padding:23vh 0 8vh;}
.bpc .padd {height:auto; /*background:linear-gradient(to bottom,transparent,#082325,#000);*/ position:relative; opacity:1;}
.bpc .padd.long {background:linear-gradient(to bottom,transparent,#082325,#082325,#000,#000,#000,#000,#000);}
.bpc h3 {margin:4em 0 1.4em;}
.bpc h4 {font-size:158%; margin-top:3.2em;}
.bpc h5 {color:#85e6e6; margin-top:2.3em;}
.bpc strong {display:inline-block; padding:0 0 .5em; font-size:97%;}
.bpc .padd {padding:0 15% 30vh;}
@media (max-width:768px) {.bpc .padd {padding:0 5% 30vh;}}
.bpc .padd a {text-decoration:none; border-bottom:1px solid #999; font-family:'ibm_plex_sansitalic';}
.bpc .padd a:hover {border-bottom:1px solid #008080;}
.bpc .padd .cont {max-width:820px; margin:0 auto;}


/*spacer*/
.spacer {height:6em;}
@media (max-width:1024px) {
	.spacer {height:5em;}
}

@media (max-width:768px) {
	.spacer {height:3.2em;}
	.law {margin-bottom:11em;}
}



/*footer*/
	footer {border-top:1px solid #5d4c91; padding:.2em; display:inline-block; /*background:linear-gradient(to bottom, #222, transparent);*/ z-index:10000; text-align:center;}
	footer > div {float:right;}
	footer a {padding:0 .3276em; color:#444; text-decoration: none; display:inline-block; font-size:97%; font-family:'ibm_plex_sansitalic', sans-serif;}
	footer a:hover {background:#111; color:#5d4c91;}
	footer img.inst {width:36px; height:36px; opacity:.28; margin-bottom:-.82em;}

	.law {font-size:.94em;}
	.law span {color:#333; transition: ease-out .72s;}
	.law span:hover {color:#eee; transition: ease-in .76s;}

@media (max-width:767px) {
	.law span {display:flex; color:#999;}
}

@media (min-width:768px) {
		footer {left:.8em; position:fixed; bottom:24px;}
}

@media (max-width:768px) {
	footer {background:#000; width:100%; border:none; padding:2vh 8vw 6vh;}
	footer > div {display:inline; width:100%; text-align:left;}
	footer a {color:#777; padding:.8em .5em 0 0; font-size:.967em;}
	footer img.inst {pacity:.74;}
}
@media (max-width:768px) and (orientation:landscape) {
	footer {bottom:10px;}
}