/* CSS Document */

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


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

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

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

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


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

	body.introx {
		background-color:rgb(0,0,0);
		background-image:url(../img/bg/WWT_3608_2400.jpg); /*WTS_0305*/
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center center;
		background-clip:border-box;
		background-origin:padding-box;
		background-size:cover;
		}
	body.introx #footer {position:fixed; bottom:38px;}
	body.pp #footer {position:relative; bottom:0;}
	/*.oldie .intro {background-image:url(.jpg;)}*/
	@media (min-width: 40em) and (max-width: 60em) {
		body.introx {background-image:url(../img/bg/WWT_3608_1440.jpg);}	
	}
	@media screen and (max-width:40em) {
		body.introx {background-image:url(../img/bg/WWT_3608_1024.jpg); /*WTR_3244*/}	
	}
		

/*slideshow*/
#slideshow { 
  margin: 0 auto; 
  position: relative; 
  width: 100%; 
  height: 100%; 
  padding: 0;
}

#slideshow > div { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; width:100vw; height:100vh;
}

#slideshow img {object-fit:cover; width:100%; height:100%;}




/*webtypografie*/
	:root {/*fallback font-size*/ font-size:1.107rem; /*font-size-adjust:.542; signika x-height*/
			font-kerning:auto;
			font-variant-ligatures: common-ligatures contextual;
			font-feature-settings: "kern","liga","clig","calt","onum","pnum";
			line-height:1.7; /*fallback line-height*/
			letter-spacing:-.03em; /*fallback letter-spacing*/
			font-variant-numeric: oldstyle-nums;
			}

	:root.wp-active {font-size:1.03rem; letter-spacing:0.01em;}
	body {font-family:'SignikaNegative-Regular',/*ideal*/'sans-serif'/*fit*/ /*common*/ /*generic*/;/*fallback line-height*/ line-height:1.5;}
	.wp-active body {line-height:1.55; margin:0;}





/*header*/
.pagehead {font-family: 'Rye-Regular', serif; text-align:right; font-weight:400; font-size:1.32rem;/*background-image:linear-gradient(0deg,#000,#00354a);
 -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */ }
.pagehead span.backgreen {background:#1fff11; color:#000; padding:.1em .084em; opacity:.25;}
.pagehead span.transform {transform: skewX(26deg); display:inline-block; -webkit-background-clip: text;
 -webkit-text-fill-color: #09303e; letter-spacing:.04em;}
	.head  {position:fixed; top:0; left:0; z-index:100; font-family:'SignikaNegative-Regular',sans-serif; opacity:1}
	.head h2.logo {padding:.13em .5em 0 1em; font-weight:400; letter-spacing:.05em; display:inline-block; margin-top:.3em; font-size:1rem; background:rgba(0,5,5,.76); margin-bottom:.6em; line-height:1.2em;}
	.head h2.logo a span {font-family:'SignikaNegative-Regular',sans-serif;}
	.head h2.logo a.start,
	.head h2.logo a.inner {text-decoration:none; color:inherit;}
	.head h2.logo a, .head h2.logo a span {transition:color .76s ease; -webkit-transition:color .76s ease; -moz-transition:color .76s ease; -o-transition:color .76s ease;}
	.head h2.logo a.start:hover {color:#333;}
	.head h2.logo a:hover.inner {color:#333;}
	
.head h2.logo a span.name {display: inline-block; color:#333; position: relative; top:-.23em;}
.head h2.logo a span.fif {font-style:italic; display:inline-block; margin-top:-.157em; color: #333}
.introx .head h2.logo a span,.head h2.logo a span {opacity:.8;}
.introx .head h2.logo a span.fif,.head h2.logo a span.fif {color:#fff;}
.introx .head h2.logo a span.name,.head h2.logo a span.name {/*color:rgb(92.72% 59% 0%);color:color(display-p3 0.928 0.5791 0); color:#ffbe21;*/
  background: -webkit-linear-gradient(96deg, #ffbe21, orange, darkorange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; color:orange;
}
.pp .head h2.logo a span.fif {/*background:linear-gradient(-180deg,#555,#333); -webkit-background-clip:text; -webkit-text-fill-color:transparent;*/ padding-top:.01em; display:inline-block;}
.introx h1.ovl,h1.ovl {right:6vw; text-shadow:-6px 6px 6px #000; position:absolute; bottom: 1vh; opacity:.32; line-height: 1.02em; font-size:5rem; font-family: "Rye-Regular", serif; font-weight:normal; transform:skewX(11deg); color:#fff;}
.introx p {text-shadow:2px 1px 1px #222; font-size:1.23em; color:#fff; position:absolute; bottom:2.2em; width:70%; left:15%; text-align:center;}

.introx .head img,.head img {opacity:1!important;}

/*h2.top {background-image:linear-gradient(0deg,blue,#8dbab9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-family:'Rye-Regular'; font-weight:400;}*/
h2.top {transition:ease all .5s; letter-spacing:.03em; font-family:'SignikaNegative-Regular'; font-weight:600; color:#8dbab9; margin-left:0; margin-bottom:3em; text-align:right; height:4em; margin-top:-2em; z-index:100000;}
h2.top:hover {letter-spacing:21em; transition:ease all 2.8s; font-family: "Rye-Regular", serif; font-weight:400; color:#000; margin-left:-109rem;}

.introtext {font-size:115%;}
.borderline {width: 100; height: 2px;  background: linear-gradient(90deg, orange, #444,#000); box-shadow: 0 12px 10px blue;  margin:4em 0 14em;}
.borderline.equal {margin:8em 0 9em; background:linear-gradient(-90deg, orange, #444,#000);}
/*intro*/
@media (max-width: 1024px) {
	.introx h1.ovl,h1.ovl {font-size:4rem;}
	.borderline {margin:1em 0 8em;}
}
@media (max-width:767px) {
	.introx p {bottom:0!important; display:none; width:auto; font-size:1.1em; line-height:1.2em; left:0; padding:0 1em!important;}
	.introx h1.ovl,h1.ovl {font-size:3.2em; margin:2.3em 0 0; max-width:100%; text-align:right; padding-right:.32em; bottom:3vh;}
	h2.top {margin-bottom:0;}
}
@media (max-width:768px) and (orientation:landscape) {
	.introx h1.ovl,h1.ovl {font-size:2.7em;}
	.introx p {font-size:1em; display:none;}
}

/*navigation*/ 

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  background-color: transparent;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
  margin-top:4rem;
  top:3rem;  
}
.sidenav a {
  padding: 6px 23px 8px 32px;
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing:.02em;	
  color: #ddd;
  display: table;
  transition: 0.3s;
  text-shadow:-2px 2px 4px #111;
  background:#000;
}
.sidenav a:first-child {opacity:.9;}
.sidenav a:nth-child(2) {opacity:.8;}
.sidenav a:nth-child(3) {opacity:.7;}
.sidenav a:nth-child(4) {opacity:.6;}
.sidenav a:nth-child(5) {opacity:.5;}


.sidenav a:hover {
  color: #fff;
  text-shadow:-2px 2px 4px  #444;
}
	

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 1.1rem;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/*hamburger right
@media screen and (max-width:767px) {
	#icnav {right:1.3rem;}
	#icnav img {transform:scaleX(-1)}
	.sidenav {right:0!important;}
	.sidenav a {font-size:1.2em;}
}
*/


/*navigation footer*/
	.nav {margin-top:-3.12em;}
	.nav ul li, .footer ul li {padding:.08em .833em .202em 1.728em; display:inline-block;}
	.footer ul li {padding:0 .3em;}
	.nav ul li {transition:all .76s ease; -webkit-transition:all .76s ease; -moz-transition:all .76s ease; -o-transition:all .76s ease;}
	.nav ul li a, .footer ul li a {text-decoration:none; color:#d9d6c1; width:100%; letter-spacing:.067em; font-weight:400; padding-left:.44em;}
	.nav ul li a {transition:all .76s ease; -webkit-transition:all .76s ease; -moz-transition:color .76s ease; -o-transition:color .76s ease; opacity:.67;}
	.nav ul li a:hover, .head h1 a:hover, .head h1 a:hover span, .footer ul li a:hover, nav img:hover {color:#fff;} 
	.nav ul li a:hover {opacity:1;}
	.head h1 a:hover {color:#333;}
	.head h1 a:hover span {color:#444;}
	
	.nav ul li:first-child {background-color:rgba(0,9,10,.95);}
	.nav ul li:nth-child(3) {background-color:rgba(0,9,10,.87);}
	.nav ul li:nth-child(5) {background-color:rgba(0,9,10,.79);}
	.nav ul li:nth-child(7) {background-color:rgba(0,9,10,.71);}
	.nav ul li:nth-child(9) {background-color:rgba(0,9,10,.63);}
	.nav ul li:nth-child(11) {background-color:rgba(0,9,10,.55);}
	.nav ul li:nth-child(13) {background-color:rgba(0,9,10,.47);}
	.nav ul li:nth-child(15) {background-color:rgba(0,9,10,0.39);}
	
	#footer {left:0; width:100%; float:left; margin-top:4em; font-family:'SignikaNegative-Regular',sans-serif;}	
	#footer .start {position:absolute;} /*wenn kein main inhalt ?!*/
	.footer ul {list-style:none; margin:-3.6rem 0 -2.1em -2em;}
	.footer ul li {background:rgba(0,5,5,.76);}
	
	small {font-size:.78em; padding-bottom:.4em;}
	small.cr {color:orange; padding:0 .694em .4em 1.728em; opacity:.8; letter-spacing:.03em;}

	
/*mobiles menue*/
	nav > ul {/*left:-180px;*/ list-style-type:none; margin:2.2em 0 0 -2.1em; padding:5px 20px; position:absolute; top:53px; transform: translateX(-180px); transition: all 0.25s ease-in; opacity:0}
	nav > .close, a#nav:target, a#nav:target, a#nav:target ~ h2 {display:none;}
	a:target ~ ul, a:target ~ .close {display:inline-block;}
	a:target ~ ul {/*left: 0;*/ transform: translateX(0px); transition-delay:.3s; opacity:1;}
	#nav {width:43px; height:60px; display:block; margin:2.62em 0 0 1.44em; float:left;}
	#nav img {width:100%; opacity:.43;}
	.introx #nav img,#nav img {opacity:1;}
	nav h2 {font-size:1.23em; float:left; margin:2.03em 0 0 .76em; color:#002e2d; background:rgba(249, 180, 45,.7); display:inline-block; padding:0.1em 1em 0.07em; letter-spacing:.04em; font-weight:400; line-height:1.3em; font-family:'sancreek',serif;}


@media screen and (max-width:767px) {
	.head h2.logo {font-size:.9em; padding:.47em .5em .3em}
	.head h2.logo span.name {font-size:1.1em;}
	nav h2 {font-size:1em; margin-top:2.5em; margin-left:.4em;}
	#nav {margin-top:2.5em; margin-left:.44em;}
	nav > ul {margin-top:1em;}
	.nav ul li {padding:.3em .833em .32em 1.728em}
	.footer ul li {padding:.3em .5em .32em .5em}
	.nav ul li a, .footer ul li a {font-size:.95em; padding-left:.38em;}
	.nav ul li a {font-size:1em;}
	small.cr {font-size:.73em; padding-left:.72em;}
} 
@media (max-width:768px) and (orientation:portrait) {
	.footer ul li a small {font-size:.87em;}
	.footer ul li small.cr {font-size:.82em; padding-left:20px; white-space:nowrap;}
	#icnav {top:3rem!important;}
}
@media (max-width:768px) and (orientation:landscape) {
	.nav ul li {padding:0.09em .833em 0.09em 1.728em;}
}
@media (max-width:768px) {
	.cc small {color:#96deda;}
	.cc h1 small {color:inherit;}
}
@media (max-width:768px) and (orientation:portrait) {
	.cc small {margin-bottom:-1vh; margin-top:2vh; margin-right:-.44em; font-size:1em;}
}

/*content*/
	main {/* Fallback min-width: 23.5em */ max-width:40em; /* Fallback max-width */ padding:0 1.1em; /* Fallback horizontal padding */ margin:0 auto; color:#8dbab9;}
	.wf-active main {/* Ideal min-width: 21em */ max-width: 36em; padding: 0 1em;}

/* main.info {box-shadow: 0px 0px 52px -6px rgba(0, 29, 202, 1.0);
    padding: 2em .5em 3em;
    background: #000;} -->- auf infoseiten blauer blureffekt bei body #111 > dann präsentable möglich*/
	p {margin: 0 0 1.44em; font-size:.89em; letter-spacing:.038em; font-weight:300; text-indent:1em; /*hyphens:auto;*/}
	p:last-child {padding-bottom:2.488em;}
	section a {color:#50b4b2; text-decoration:none;}
	section a:hover {color:#ccc; border-bottom:1px dotted #555; padding-bottom:0.01em;}
	
	em {}
	strong {font-family: "SignikaNegative-Bold";}
	
/* Abbreviations, numbers, whitespace management */
	abbr {cursor:cell; opacity:.81; letter-spacing:.01em; font-feature-settings:"kern", "liga", "clig", "calt", "c2sc", "smcp";}
	@supports (font-variant-caps:all-small-caps) { 
		abbr {font-variant-caps:all-small-caps; font-feature-settings:normal;}
}
	.numbers {letter-spacing:.01em;}
	.nowrap {white-space:nowrap;}
	
/*responsive images*/
.res img {aspect-ratio: 3 / 2; Background-image:linear-gradient(45deg,#0b0f10,#090909);/*box-shadow:0px 0px 52px -6px rgba(0, 29, 202, 1.0); ** aufbluren zum hügel, 3+4 , > body #111 = presenterable! */ box-shadow: 0 50px 160px #444;}
.high .res img {aspect-ratio: 2 / 3;}
.high {text-align:center;}
.slide {margin:0; float:left;}
.info-img img {width:100%; height:auto;}
picture:focus {outline:-webkit-focus-ring-color auto 0px}

/*responsive image*/	
/*mobile*/
@media (max-width:768px) {
	.res img {box-shadow: 0 23px 69px #444;}
}

@media (min-width:320px) and (orientation:portrait)  {
	.res img {width:100%; height:auto; margin-bottom:4.2em;}
	.high .res img {width:80%; height:auto; margin:0 10%; margin-bottom:2em;}
}
@media (min-width:320px) and (orientation:landscape)  {
	.res img {width:100%; height:auto; margin-bottom:4.2em;}
	.high .res img {width:50%; height:auto; margin:0 25%; margin-bottom:1em;}
	}
/*tablet*/
@media (min-width:768px) and (orientation:portrait) {
	.res img {width:100%; margin-left:0; margin-bottom:6em;}
	.high .res img {width:70%; height:auto; margin:0 15%; margin-bottom:6em;}
}
@media (min-width:768px) and (orientation:landscape) {
	.res img {width:100%; margin:0 0 6em;}
	.high .res img {height:auto; width:58%; margin:0 21% 6em;}
	.slide figcaption {width:29%;}
}
/*stereospective*/
@media (min-width:769px) {
	.stereo {padding-right:1.8rem;}
	.spective {height:78vh;}
}
/*desktop*/
@media screen and (min-width:1025px) {
	.res img {width:100%; margin:0 0 10em; height:auto; margin-bottom:6em;}
	.high .res img {width:60%; height:auto; margin:0 10em 6em;}
	.slide {margin-bottom:0em;}
	.slide:last-child {margin-bottom:7em;}
}


/*boots*/
.mt-10 {margin-top:10rem;}
.ml-1 {margin-left:-.1em;}

/*BU*/
.slide figcaption {display:inline-block; border-top:1px solid #012622; text-align:right; width:auto; padding:.66em .49em .3em 0; margin-bottom:40vh; float:right; margin:1em .54em 22rem; font-family:"Rye-Regular", serif; font-weight:normal; font-size:1em; padding-left:.2em; color:#00606e; letter-spacing:.054em; line-height:1.2em;  transition:color 1.76s ease; -webkit-transition:color 1.76s ease; -moz-transition:color 1.76s ease; -o-transition:color 1.76s ease; background-image:linear-gradient(315deg,#00c3e6,#00606e,#89F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.slide  figcaption span {font-size:0.923em; padding-right:.35em; font-family:'SignikaNegative-Light',sans-serif; color:#00606e; letter-spacing:.059em; transition:color 1.76s ease; -webkit-transition:color 1.76s ease; -moz-transition:color 1.76s ease; -o-transition:color 1.76s ease; font-style:italic;}
.slide figcaption:hover,.slide figcaption:hover span {color:#00c0ff;}

@media screen and (max-width:767px) {
	#contact {margin-bottom:11rem}
	.wf-active main {padding:0; margin-bottom:/*8.2rem*/0;}
	.about.pic h2 {line-height:1.32em;}
	.about p.pitx {font-size:1em; line-height:1.32em; color:#196470!important;}
	.slide  figcaption {color:#00606e; background-image:linear-gradient(315deg,#00c3e6,#00606e,#89F); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:11rem;}
	#impr a span {display:block;}
	#impr #us {display:inline-block; cursor:default; text-decoration: none; color:#8dbab9!important;}
	.circle {float:none!important;}
}

/*button*/
.button {background:#222; padding:.4em 1em; color:goldenrod; transition:all .76s ease; -webkit-transition:all .76s ease; -moz-transition:all .76s ease; -o-transition:all .76s ease;}
.button:hover {padding-bottom:.4em; border-bottom:none; color:gold; background:#333;}

/*sections*/
#prints,#contact,#impr,#datenschutz,#csr,#agb {padding:0 1em; margin:8rem 0;}
.about,#justmobile {padding:0 .85em; background:black; opacity:1;}
#justmobile {opacity:.65; border-radius:11em; height: 90vh;}
#justmobile h5 {height:70vw; border-radius:11em; padding:13vh 4vw; text-align:center; opacity:1; color:#fff; width:70vw; margin:45vh auto; background:orange; letter-spacing:.05em; font-size:1.3em; line-height:1em;}
.about.pr h1 {font-family: "Rye-Regular", serif; font-weight:normal; color:#26656e; margin-bottom:1em; line-height:1.24em; letter-spacing:.02em;}
h4 {color:#26656e; text-align:center; margin-left:40%; width:44%; font-size:1.49em; font-family: "Rye-Regular", serif; transform:skewX(8deg); letter-spacing:.032em; font-weight:normal;}	
h4 a {color:#115560;}
.about.pr h2 {color:#002aff; letter-spacing:.015em; font-size:1em; text-align:left; padding-left:0; margin-top:2em; text-shadow:-2px 2px 0 indigo;}
.pr ul {margin-bottom:2em;}
.pr ul {list-style:none}
.pr ul li {padding-left:1em; text-indent:-1em;}
.pr ul li:before {content:"∗"; padding-right:8px;}
.pr ul li.black:before {text-shadow:0 0 4px #fff;}
.about p {padding:0; text-indent:1.29em; line-height:1.67em;}
.about p.pitx {color:#123f46;}
.about.pic {margin-bottom: 11.6em;}
.about.pic h2 {color:blue; font-family: "Rye-Regular", serif; margin-left:1.2em; font-weight:normal;}

/*textseiten*/
.simplx {padding:1em 9em;}
.simplx p:first-child {padding-top:0vh;}
.simplx p {text-indent:0;}
.simplx h5 {color:blue; padding-bottom:4px; display:inline-block; font-size:1.29em; margin-bottom:.3em; letter-spacing:.01em; line-height:1.15em; text-shadow: -1px 0px 1px #444;}
.simplx p small strong {text-transform:uppercase; display:inline-block; padding-bottom:10px; margin-left:-2%;}
.simplx h1 {font-family: "Rye-Regular", serif; font-weight:normal; font-size:1.95em; letter-spacing:.01em; text-transform:uppercase;}
.simplx h4 {margin:3.8em 0 1.7em 0; text-align:left; width:100%; letter-spacing:.05em; font-weight:normal;}
h3.pdw {color:#26656e; letter-spacing:.01em; font-weight:400; margin-top:3.72em; text-align:right; padding-right:.2em; line-height:1.2em; font-family:"Rye-Regular", serif; transform:skewX(11deg);}
.simplex.cc h1 {font-size:2.96em; font-family:"Rye-Regular", serif;}
.simplex.cc h1 abbr {border-bottom: 4px dotted #333; text-decoration:none;}
.csr p {font-size:1.27em;}
.cc strong, .agb span {text-shadow:-5px 5px 1px blue; opacity:.72;}
.cc ul {padding-left:1.5em;}
.cc li {padding-bottom:.3em;}
.cc p:last-child, .about p:last-child {margin-bottom: 7rem!important;}
.led {margin:0 0 0 4em; float:left; color:aquamarine;}
.ungebu {padding:.2em 1em .3em; color:#26656e; font-size:.9em}

.print {margin:5em;}
.print li {color:#0035ff; opacity:.96; letter-spacing:.024em; line-height:1.3em; padding:.23em;}
.print li span {white-space:nowrap;}

h6 {font-size:1.3rem; margin-bottom:1rem; text-shadow:-3px 3px 0px blue; opacity:.72;}

.flow {display:block; margin:0 0 1.1em;}
.ins {margin-top:3.4rem;}

@media (max-width:768px) {
	.flow {margin-top:2.3em;}	
	.cc strong, .agb span {text-shadow: -3px 3px 1px blue;}
}

/*transform*/
.lcrsv {-ms-transform: skewX(8deg); /* IE 9 */
  -webkit-transform: skewX(8deg); /* Safari 3-8 */
  transform: skewX(8deg);}
.lcrsv.name {letter-spacing:.1em; font-family: 'Rye-Regular', serif!important;}

/*order-liste*/
ul.picorder {list-style:none;}
ul.picorder li {display:inline-block; margin:12px 0; border-bottom:1px solid #555; padding-bottom:12px; width:100%;}
ul.picorder li img {width:auto; float:left;}
ul.picorder li span {float:left; font-family:Sancreek; font-size:.89em; width:60%; letter-spacing:.048em; line-height:1.27em; padding:16px 40px 22px;}
ul.picorder li a {margin-left:20px; padding:0 20px; font-size:.615em; letter-spacing:.03em; padding-top:42px; float:right; width:20%; text-align:right;}
ul.picorder li a:hover {border:none; background:#111;}

/* Minor breakpoint: - Increase contrast - Flexbox for application area */
@media screen and (min-width: 39em) {
	  #contact small {width:33%; display:inline-block; text-transform:uppercase; letter-spacing:.2em; text-indent:0; padding-left:1.29em; color:#366f66;}
	  #contact small:nth-child(2) {letter-spacing:.39em;}
	}	
/* Major breakpoint: - More contrast-related changes - Grid layout*/
@media screen and (min-width: 52em) {
	main {
    max-width: 60.5em; /* Fallback max-width */
    margin-top: 0/*1.667rem;*/ /* A bit more breathing room is nice when the layout is more complex. */;
    padding: 0 /*2.779rem*/; /* Minimum marginal room on the left and right, a number from the scale. */
  }
  	.wf-active main {
    max-width: 59.633em; /* The overall maximum width of this layout, a number from the scale. */
    margin-top: 0;/*1.667rem;*/ /* A bit more breathing room is nice when the layout is more complex. */
    padding: 0 2.779rem; /* Minimum marginal room on the left and right, a number from the scale. */
  }
  	.about,#justmobile {
    font-size: 1.2rem; /* 1em + 0.36em from scale */
  }
	.about p {padding:0 1.2em;} 
}
@media screen and (min-width:64.063em) {
	.wf-active main {padding:0 0.12rem;}
}


/* Extra-kleine Geraete (Smartphones, weniger als 768px) */
@media (min-width: 320px) { 
	p {font-size:.8em}
	.main {width:92%; margin-left:4%; margin-top:6.2em;}
	.slsh .main {margin-top:0;}
	.about {margin-bottom:0;}
	.about.pr h2 {font-size:1.2em;}
	.about p:last-child {padding-bottom:0;}
	.slide {margin-bottom:0;}
	.slide figcaption {font-size:.85em;}
	.slide figcaption span {font-size:0.7em;}	
	.simplx h4, .simplx h1 {line-height:.95em;}
	.simplx h5 {font-size:1.3em;}
	.print {margin:5.2em 0;}
	h3.pdw {font-size:1.47em;}
}
@media (min-width: 320px) and (orientation: landscape) {
	#justmobile .hidlandsc {display:none;}
	p {font-size:1em}
	.main {width:66%; margin-left:17%}
	.about, .simplx.cc {padding:0em;}
	.simplx.cc {font-size:.9em;}
}
@media (max-width: 768px) { 	
	.slide figcaption {width:75%; margin-left:12%; border-bottom:1px solid #012622; border-top:none;}
	.slide.high figcaption {margin-top:2.9em;}
	.pr ul {margin-left:0;}
	.pr ul li {padding-left:0;}
	#footer {margin-top:0;}
	.csr p {font-size:.92em;}
	.about.pr h1 {padding-left:1.42em; line-height:1.23em; display:inline-block; text-indent:.98em;}
	.about p {text-indent:0;}
	.cc p,.pr p {font-size:.9em;}
	.cc p a {display:initial;}
	.ins {display:table;}
}
@media (max-width: 768px) and (orientation: portrait) {
	.slide figcaption {margin-top:1.4rem;}
	.simplx h1 {font-size:1.7rem;}
	.simplx h4 {font-size:1.3rem;}
	.cc small {display:block;}
	.about.cc h4  {margin-left:0%!important;}
	.pp small {display:block; width:100%;}
}
@media (max-width: 768px) and (orientation: landscape) {
	.slide figcaption {width:75%!important;}
	.slide figcaption span {font-size:.5em;}
	.cc p small,.pr p small {font-size:.87em;}
	.cc p small strong,.pr p small strong {font-size:1.7em;}
	.cc p strong,.pr p strong,span#us {font-size:1rem;}
} 
/* Kleine Geraete (Tablets, 768px und breiter) */
@media (min-width: 768px) and (max-width: 1024px){
	#justmobile.hidetab	{display:none;}
	p {font-size:.887em;}
	.main {width:74%; margin-left:13%; margin-top:6em;}
	.slsh .main {margin-top:0;}
	.about {margin-bottom:4.3em;}
	.slide {margin-bottom:0em;}
	.slide figcaption {width:35%; padding-left:1.2em; font-size:.86rem;}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	p {font-size:.8em;}
	.main {margin-top:0em; width:78%; margin-left:11%;}
	.slsh .main {margin-top:0;}
	/*.about h2 {font-size:1.95em;} */
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.slide figcaption.sli {margin-top:5rem;}
	.main {margin-top:12em;}
	.slsh .main {margin-top:0;}
}
@media (min-width: 1025px) {
	.main {width:60%; margin-left:20%; max-width:842px; margin:0 auto;}
	.slsh .main {margin:0;}
}	
@media screen and (min-width:34em) {
	.res img {float:left;}
}

/* Kein Media-Query, weil dies der Standard in Bootstrap ist */
@media (max-width: 1110px) {
	.simplx {padding:1em 9em;}
}
@media (max-width: 960px) {
	.simplx {padding:0 .75em;} 
}
/* Mittlere Geraete (Desktop-PCs, 992px und breiter) 
@media (min-width:screen-min) { ... }*/

/* Grosse Geraete (Desktop-PCs, 1200px und breiter) 
@media (min-width:screen-min) { ... }*/

.pr table {width:100%; text-align:center; border-collapse:collapse; margin:5.3em 0 3.9em;}
.pr th {color:blue;}
.pr td, .pr th {border-bottom:1px solid #222; padding:.37em 0; letter-spacing:.015rem;}
.pr th {border-color:blue; opacity:.95; font-weight:400; font-size:.92em;}
.pr tr:nth-child(2)>td {opacity:1;}
.pr tr:nth-child(3)>td {opacity:.92;}
.pr tr:nth-child(4)>td {opacity:.84;}
.pr tr:nth-child(5)>td {opacity:.76;}
.pr tr:nth-child(6)>td {opacity:.68;}
.pr tr:nth-child(7)>td {opacity:.60;}
.pr tr:nth-child(8)>td {opacity:.52;}

::-moz-selection {background:#1fff11; color:#000; -webkit-text-fill-color:#000;}
::selection {background:#1fff11; color:#000; -webkit-text-fill-color:#000;}


.box {width:100%; float:none;}
.spective .slide {margin-bottom:6rem; width:100%;}
.spective .square {border-radius:50%; width:70%; height:70%; margin: 4rem 0 5vh 15%; aspect-ratio:1/1;}
.spective h4.lcrsv {text-align: left; margin-left: 5%; margin-bottom:4.21rem; margin-top:0; width:90%;}
.highbot img {margin:10rem 0 2rem; aspect-ratio:414/734; width:100%;}
.betweenborder {margin:-5rem 0 11rem;}
.cap h1 {font-size:1.5rem}
.cap span {font-size:123%;}
.lagb {font-size:115%;}

@media (min-width:769px) {
	.box {width:50%; float:left;}
	.indoor img {width:90%; margin-left:5%;}
}
@media (max-width:768px) {
	.box img {margin-bottom:2em;}
	.spective .slide {margin-bottom:4rem;}
	.highbot img {margin:6rem 0 10rem;}
	.betweenborder {margin:0;}
	.lagb {font-size:105%;}
}
@media (max-width:768px) and (orientation:landscape) {
	img.stereo {max-height:91vh;}
	.spective {margin-top:2.2em;}
	.highbot img {margin:4rem 0; max-height:130vh;}
}

@media (max-width:768px) and (orientation:portrait) {
	.spective .square {width:89%; height:89%; margin-left:5.5%; margin-bottom:6vh;}
}

/*P3*/
/*@media (color-gamut: p3) {
	.simplx h5, .print li, .about.pic h2, .about.pr h2,
    .pr th {color:color(display-p3 0 0.1429 0.8485);}
	small.cr {color:color(display-p3 0.928 0.5791 0);}
}*/
/*end P3*/
		
/*responsive image > aspect ratio, cover, retina*/
/*flexible background*/

/*lazy loading blur*/
/*.placeholder {
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.placeholder img {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1s linear;
}

.placeholder img.loaded {
  opacity: 1;
}

.img-small {
  filter: blur(50px);*/
  /* this is needed so Safari keeps sharp edges */
 /* transform: scale(1);
}*/