@charset "utf-8";

/*** reset ***/
* { margin:0; padding:0; box-sizing:border-box; }

body { background:#f8f4f4; ; font-family: "Senlot Norm Book", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif"; color: #000000; scroll-behavior:auto; overflow:hidden; height:100%; }

@font-face { font-family: 'Senlot Norm Book';
             src: url('../font/insigne - Senlot Norm Book.otf') format('opentype');  font-style: normal;}
@font-face { font-family: 'Senlot Norm Book Italic';
             src: url('../font/insigne - Senlot Norm Book Italic.otf') format('opentype');
             font-style: italic; }
@font-face { font-family: 'Senlot Norm normal';
             src: url('../font/insigne - Senlot Norm Bold.otf') format('opentype');
             font-weight: bold; }

.imprint {
    display: block; text-decoration: none; cursor: url("../img/icons/cursorleft.png"), url("../img/icons/cursorleft.gif"), url("../img/icons/cursorleft.cur"), w-resize; 
}

.start {
    display: block; text-decoration: none; cursor: url("../img/icons/cursorright.png"), url("../img/icons/cursorright.gif"), url("../img/icons/cursorright.cur"), e-resize; 
}

a.imprint, a.start, a.main { color:#000000;}

a { color: #000000;  text-decoration: none; } /* all kinds of links */

/**** start page  ****/ 

.main { /* the logo / title on the first page */
	background: none;
	text-align: center;
	text-decoration: none;
	opacity: 0.4;
   transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out;
}

.main:hover { opacity: 1;}

.column {
	position:relative;
	height:auto;
	width: 50%;
	border: none;
	overflow:hidden;
	flex-shrink:2;
	/* only for testing: */
	/* border:1px solid white; */ 
}

.flexbox { display:flex; flex-wrap:wrap; justify-content:space-between;  }
.fb { width: 50%; height: 100%;	}

#font { /* holds the logo / title on the first page */
	position: absolute;
	top: 16%;
	right: 32%;
	left: 32%;
	z-index: 200; /* für alle browser */
   pointer-events:none;
}

#superwrapper { /* containing wrapperleft and wrapperright */
	position: relative; 
	top: 0; left:0; 
	width: 200vw;
	height: 100vh;
	display: flex;
	align-items:flex-start;
	transition: 1s ease-in; /* must be the same as .address */
}

.lookright { transform: translatex(-100vw);  }

.wrapper { position: relative; display: inline-block; width: 100vw; }

#wrapper-left { /* vivisble on start */
	height: 100vh;
	cursor: url("/img/icons/cursorright.png"), url("/img/icons/cursorright.gif"), url("/img/icons/cursorright.cur"), e-resize; 
}

#wrapper-right { /* clicking on wrapper-left shifts superwrapper to the left and makes wrapper-right visible */
	height:auto;
	overflow:auto;
	cursor: url("/img/icons/cursorleft.png"), url("/img/icons/cursorleft.gif"), url("/img/icons/cursorleft.cur"), e-resize; 
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

#wrapper-bottom { /* address and introtext again for mobile, if someone swipes down instead of right */
	display:none; 
	position:absolute;
	height:auto; 
	top:100vh;
	left:0;
}

.address { transition: 1s ease-in;  cursor: url("../img/icons/cursorleft.png"), url("../img/icons/cursorleft.gif"), url("../img/icons/cursorleft.cur"), w-resize; }
/* transition must be the same as #superwrapper. */

/* address for desktop is a sibling of #superwrapper but visually pretends to be its child */
#address_desktop { position:fixed; width:40vw; top:0; left:100vw;     }

/* address for mobile is a child of #wrapper-right, only shows on small screens */
.address_mobile { display:none; width:80vw; position:relative; top:0; }

/* this is the mouseover area, and it contains the image to show on mouseover */
.mouseover-img { flex-grow:1; width:16.66%; height:25vh; } 

.mouseover-img img { 
	display:block; 
	opacity:0; 
	position:fixed; 
	top:0;
	bottom:0; 
	left:0; 
	right:0;
	width:100vw;
	height:100vh;
	object-fit: cover;       /* Scale the image so it covers whole area */
  	object-position: center;
	z-index:-1000;     
    transition: 0.3s ease-in-out;
	transition-delay: 0.2s; /* to let images fade out only when other image is faded in already 
	else the lowest image will shine through during fading (must set delay to 0 for .mouseriver-img:hover img) */
}

.mouseover-img:nth-child(1) img { opacity:1; }  /* first image (lowest in stack) is always visible */
.mouseover-img:hover img { opacity:1; transition-delay:0s; } /* other images (higher in stack) visible on mouse-over */

@media only screen and (max-width: 599px) {	
	h1 { font-weight: normal; font-size: 18px; letter-spacing: 0.52px; line-height: 25px; margin-bottom: 36px; }
	h2 { font-weight: normal; font-size: 18px; letter-spacing: 0.52px; line-height: 25px; margin-bottom: 115px; }
	h3 { font-weight: normal; font-size: 18px; letter-spacing: 0.52px; line-height: 25px; margin-bottom: 13px; }
	p  { font-weight: normal; font-size: 14px; letter-spacing: 0.26px; line-height: 19px; margin-bottom: 29px; }
	
	.column { margin-left: 31px; margin-right: 26px;  }
	.address { margin-top: 49px; margin-right: 53px; }
}

@media only screen and (min-width: 600px ) {
	h1 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 36px; }
	h2 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 15px; }
	h3 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 5px;  }
	p  { font-weight: normal; font-size: 16px; letter-spacing: 0.3px; line-height: 28px; margin-bottom: 38px; }
	
	.column { margin-top: 91px;  margin-left: 0px; margin-right: 49px;  }
	.address {   margin-top: 91px; margin-left: 81px; }
}

@media only screen and (min-width: 980px ) {
	h1 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 36px; }
	h2 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 15px; }
	h3 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 5px;  }
	p  { font-weight: normal; font-size: 16px; letter-spacing: 0.3px; line-height: 28px; margin-bottom: 38px; }

    .column { margin-top: 91px;  margin-left: 0px; margin-right: 49px;  }
	.address {   margin-top: 91px; margin-left: 81px; }
}

@media only screen and (min-width: 1260px ) {
	h1 { font-weight: normal; font-size: 40px; letter-spacing: 0.7px; line-height: 48px; margin-bottom: 62px; }
	h2 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 15px; }
	h3 { font-weight: normal; font-size: 32px; letter-spacing: 0.7px; line-height: 48px; margin-bottom: 10px; }
	p  { font-weight: normal; font-size: 24px; letter-spacing: 0.2px; line-height: 35px; margin-bottom: 38px; }
	
    .column { margin-top: 91px;  margin-left: 0px; margin-right: 49px;  }
	.address {   margin-top: 91px; margin-left: 81px; }
}

@media only screen and (min-width: 1440px ) {
	h1 { font-weight: normal; font-size: 74px; letter-spacing: 0.7px; line-height: 68px; margin-bottom: 81px; }
	h2 { font-weight: normal; font-size: 24px; letter-spacing: 0.7px; line-height: 31px; margin-bottom: 15px; }
	h3 { font-weight: normal; font-size: 40px; letter-spacing: 0.7px; line-height: 48px; margin-bottom: 21px; }
	p  { font-weight: normal; font-size: 36px; letter-spacing: 0px;   line-height: 48px; margin-bottom: 58px; }
	
	.column { margin-top: 101px;  margin-left: 0px; margin-right: 126px;  }
	.address {   margin-top: 111px; margin-left: 81px; }
}

@media only screen and (max-width: 599px ) { /* for small screens, assumedly phones */
	
	/* columns in #wrapper_right on top of each other */
	#wrapper-right { flex-wrap:wrap; }
	.column { width:100%; }
	#address_desktop { display:none; }
	.address_mobile { display:block; }
		
	/* show logo bigger than on desktop */
	#font { right: 20%;	left: 20%;}	
}

@media only screen and (max-width: 1300px ) { /* We assume that, up to this width, it's a touch device */

	/* Images need to blend automatically */
	.mouseover-img img { opacity:1; }
	
	/* un-fix images to allow native swipe */
	.mouseover-img img { position:absolute; }
	
	/* show logo bigger than on desktop */
	#font { right: 20%;	left: 20%;}	
}