/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');


/* Global **********************************************************************************/

* {
	scrollbar-width: none;
	scrollbar-color: #212121 #212121;
}

*, *:before, *:after {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
     border: 0px;
}

.link{
	cursor: pointer;
}


/* Works on Chrome/Edge/Safari */

::-webkit-scrollbar {
	width: 8px;
     background-color: grey;
}

::-webkit-scrollbar-track {
	background-color: grey;
}

::-webkit-scrollbar-thumb {
     background-color: #f1f1f1;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
     font-family: 'Pacifico', monospace;
     overflow: hidden;
     background-color: #212121;
     animation: bright 0.5s linear 5s 1 forwards;
     height: 100%;
     width: 100%;
}

@keyframes opacityOn{
     from{opacity: 0;}
     to{opacity: 1;}
}

@keyframes heightUnset{
     from{height: 0px;}
     to{height: unset;}
}

@keyframes arrowBlinker {
     50% { opacity: 0.5;}
}


/** SITE IMAGE **********************************************************************************/

.site-image {
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	bottom: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
     left: 50%;
     transform: translateX(-50%) translateY(100dvh);
     width: 100%;
     max-width: 800px;
     max-height: 100dvh;
     z-index: -11;
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
     transition: transform 1.2s 1.2s;
}

.site-image.active{
     z-index: -10;
     transform: translateX(-50%) translateY(0px);
     transition: transform 1.2s;
}

@media screen and (max-width: 800px) {
	.site-image {
          left: unset;
          top: 100dvh;
          bottom: unset;
          height: 0px;
          transform: unset;
          z-index: -11;
          transition: top 1.2s 1.2s, height 1.2s 1.2s;
	}

     .site-image.active {
          left: unset;
          top: 0dvh;
          bottom: unset;
          height: 100dvh;
          transform: unset;
          z-index: -10;
          transition: top 1.2s, height 1.2s;
     }
}


/** CONTENT **********************************************************************************/

.content {
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	bottom: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
     scrollbar-width: thin;
     left: calc( 50% - 400px);
     width: 100%;
     max-width: 800px;
     background-color: transparent;
     scrollbar-color: #f1f1f1 grey;
}

body.intro > .content {
     scrollbar-color: #212121 #212121;
     background-color: #212121;
     animation: overlaybright 1s linear 5s 1 forwards, 
                showScroll 1s linear 4.5s 1 forwards;
}

@media screen and (max-width: 800px) {
	.content {
          left: unset;
          transform: unset;
	}
}

body.intro > .content::before {
     content: "";
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     background-color: #212121;
     animation: overlaybright 1s linear 4.5s 1 forwards;
}

@keyframes overlaybright {
     from{background-color: #212121;}
     to{background-color: transparent;}
}


@keyframes showScroll{
     from{scrollbar-color: #212121 #212121;}
     to{scrollbar-color: #f1f1f1 grey;}
}

body.intro > .content::-webkit-scrollbar {
     width: 0px;
}

/** HEADER **********************************************************************************/

.header{
     box-sizing: border-box; 
     background-color: #f1f1f1;
     border-color: #f1f1f1;
     text-align: center;
     padding: 0px;
     margin: 0px;
     padding-top: 20px;
     width: 100%;
     max-width: 800px;
     height: 120px;
     position: absolute;
     top: 0px;
     z-index: 11;
}

body.intro > .content > .header {
     background-color: #212121;
     border-color: #212121;
     left: 50%;
     top: 50%;
	 
     width: calc(100% + 2px);
     transform: translateX(-50%) translateY(-50%);
     animation: bright 0.5s linear 5s 1 forwards,
               toTop 0.5s ease-in-out 4.5s 1 forwards;
}

@keyframes toTop{
     from{top: 50%; transform: translateX(-50%) translateY(-50%)}
     to{top: 0px; transform: translateX(-50%) translateY(0%)}
}

.header > .title{
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     background: #f1f1f1;
     border: 0.25rem solid #f1f1f1;
     box-sizing: border-box;
     width: 300px;
     outline: 0;
     overflow: hidden; 
     font-family: 'Quicksand', Arial;
     color: #8c8c8c;
     font-size: 30px;
}

body.intro > .content > .header > .title{

     background-color: #212121;
     border-color: #212121;
     animation: bright 0.5s linear 5s 1 forwards;
}

body.intro > .content > .header > .title::after {
     content: "";
     position: absolute;
     bottom: -50%;
     left: -50%;
     height: 1050%;
     width: 190%;
     box-sizing: border-box;
     background-color: #212121;
     border-radius: 40%;
     animation: headerTitleWave 4s linear 0s 1 forwards;
     border-right: 2px solid #3f3f3f;
}

@keyframes headerTitleWave {
     0% {transform: translateY(0) rotate(0deg);border-right: 2px solid #3f3f3f;}
     10% {border-right: 2px solid #3f3f3f;}
     33% {border-right: 0px solid transparent;}
     100% {transform: translateY(-120%) rotate(360deg);}
}

@keyframes bright {
     from{background-color: #212121; border-color: #212121;}
     to{background-color: #f1f1f1; border-color: #f1f1f1;}
}

.header > .description{
     position: relative;
     margin-top: 8px;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     width: 15ch;
     border-right: 1px solid transparent;
     text-align: center;
     white-space: nowrap;
     overflow: hidden; 
     background-color: #f1f1f1;
     border-color: #f1f1f1;
     color: #454545;
}

body.intro > .content > .header > .description {
     background-color: #212121; 
     border-color: #212121;
     width: 0;
     border-right-color: transparent;
     animation:  headerDescriptionTypeWriter 2s steps(16) 2s 1 normal both,
                 headerDescriptionCursor 0.25s steps(16) 2s 8 normal forwards,
                 bright 0.5s linear 5s 1 forwards;
}

@keyframes headerDescriptionTypeWriter{
     from{width: 0;}
     to{width: 15ch;}
}

@keyframes headerDescriptionCursor{
     from{border-right-color: #454545;}
     to{border-right-color: transparent;}
}


/** NAVIGATION BAR **********************************************************************************/

body > .navigation-bar {
	position: absolute;
	box-sizing: border-box;
	color: #818181;
	padding: 10px 16px;
	background-color: rgba(85, 85, 85, 0.9);
	top: 0px;
	height: 65px;
	z-index: 10;
     width: 100%;
     max-width: 800px;
	overflow-y: scroll;
     scrollbar-color: transparent transparent;
     scrollbar-width: thin;
     
     left: 50%;
     transform: translateX(-50%);
  
     opacity: 1;
     transition: height 0.5s, padding 0.5s, opacity 0.5s;
}

@media screen and (max-width: 800px) {
	body > .navigation-bar {
          left: unset;
          transform: unset;
	}
}
  
body > .content > .navigation-bar {
	position: absolute;
	top: 120px;
	height: 65px;
	width:100%;
	z-index: 10;
     overflow: hidden;
     background-color: rgba(85, 85, 85, 0.9);
	color: #818181;
     padding: 10px 16px;

     opacity: 1;
     transition: height 0.5s, padding 0.5s, opacity 0.5s;
}

.navigation-bar.hide {
     height: 0px;
     padding: 0px;
     opacity: 0;
}
	
.navigation-bar > .title {
	font-family: 'Pacifico', sans-serif;
	float:left; 
	font-size: 24px;
     color: #f1f1f1;
     transition: color 1s;
}

body.show-menu > .content > .navigation-bar > .title, 
body.show-menu > .navigation-bar > .title {
     color: #818181;
}

.navigation-bar > .icon {
     float: right;
}

.navigation-bar > .icon > a {
	font-size: 20px;
	text-decoration: none;
	display: block;
	width: 50px;
	text-align: center;
	line-height: 45px;
}

.navigation-bar > .icon > a:hover{
	cursor: pointer;
}

.navigation-bar > .icon > a > i:hover{
  color: white;
}


body.intro > .content > .navigation-bar {
	height: 0px;
     padding: 0px 0px;
     animation:  showNavigationBar 0.5s ease-in-out 5s 1 forwards;
}

@keyframes showNavigationBar {
     0%{height: 0px; padding: 0px 0px;}
     100%{height: 65px; padding: 10px 16px;}
}

@keyframes hideNavigationBar {
     0%{height: 65px; padding: 10px 16px;}
     100%{height: 0px; padding: 0px 0px;}
}

.navigation-bar > .icon > a > i{
     color: #818181;
     transition: color 1s;
}
body.show-menu > .content > .navigation-bar > .icon > a > i.menu-icon, body.show-menu > .navigation-bar > .icon > a > i.menu-icon{
	color: #f1f1f1;
}

/** NAVIGATION MENU **********************************************************************************/

.navigation-menu {
	font-family: 'Quicksand', sans-serif;
	background-color: transparent;
	position: absolute;
	color: #818181;
	top: 0px;
     bottom: 0px;
     width: 0px;
	z-index: 9;
     scrollbar-color: transparent transparent;
     scrollbar-width: thin;
     right: calc( 50% - 400px);
     padding-right: 8px;
	padding-top: 185px;
     overflow: hidden;
     transition: width 1s, padding-top, background-color 0s 1s;
}

@media screen and (max-width: 800px) {
	.navigation-menu {
          width: 0px;
          right: 0px;
          padding-right: 0px;
	}
}

.navigation-menu.show{
     width: 158px;
	background-color: white;
     transition: width 1s, padding-top, background-color 0s 0s;
}

.navigation-menu > a{
	padding: 16px 30px 0px 30px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
	text-align: right;
}

.navigation-menu > a.sub{
	padding: 5px 30px 0px 30px;
	font-size: 14px;
}

.navigation-menu a:hover {
	color: #f1f1f1;
}


/** SITE IMAGE PLACEHOLDER **********************************************************************************/

.site-image-placeholder {
     position: absolute;
     top: 0px;
     bottom: 0px;
     width: 100%;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
	margin-top: 120px;
     height: calc(100dvh - 120px);
     opacity: 0;
     background: transparent;
     transition: opacity 1s 1s;
     z-index: 1;
}

.site-image-placeholder *{
     opacity: 0.0;
     transition: opacity 1s 1s;
}

.site-image-placeholder.active {
     opacity: 1;
     z-index: 2;
}

body.intro > .content > .site-image-placeholder.active {
     opacity: 0;
     animation: opacityOn 0.5s linear 5s 1 forwards;
     transition: unset;
}

.site-image-placeholder.active > .description{
	text-align: right;
	margin: 0;
	position: absolute;              
	bottom: 70px;
	right: 0px;
	padding: 0px 15px 0px 15px;
	font-family: 'Pacifico', sans-serif;
	font-size: 26px;
	color: #f1f1f1;
     background-color: rgba(0, 0, 0, 0.2);
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     transition: right 1s, bottom 1s, opacity 2s;
     opacity: 1;
}

.site-image-placeholder.hide-childs.active > .description, body.show-menu > .content > .site-image-placeholder.active > .description {
     opacity: 0;
     bottom: 90px;
	right: 20px;
}

.site-image-placeholder.active > .arrow{
	text-align: center;
	width: 30px;
     height: 30px;
	font-weight: bold;
	margin: 0;
	position: absolute;              
	bottom: 10px;
	left: 50%;
	transform: translate(-50%);
	color: #f1f1f1;
     background-color: rgba(0, 0, 0, 0.2);
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     opacity: 1;
     transition: opacity 1s;
}

.site-image-placeholder.active > .arrow:hover{
	cursor: pointer;
}

.site-image-placeholder.active > .arrow > i{
     animation: arrowBlinker 1s step-start infinite;
}

.site-image-placeholder.hide-childs.active > .arrow, body.show-menu > .content > .site-image-placeholder.active > .arrow {
     opacity: 0;
}


/** SITE CONTENT **********************************************************************************/

.site-content{
     position: absolute;
     top: 100dvh;
     height: 0px;   
     transform-origin: top;
     background-color: white;
     overflow: hidden;
     z-index: 1;
     transition: transform 1s 0.3s;
     display: none;
}

.site-content.active{
     display: initial;
     height: unset;
}

body.intro .site-content.active{
     height: 0px;
}

body.show-menu .site-content.active {
	transform: translateX(-150px);
     transition: transform 0.7s;
     background-color: #f1f1f1;
}

.site-content > p{
	clear: left;
	text-align: justify;
	padding: 10px 16px 10px 16px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
}

.site-content a{
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #606060;
}

.site-content > ul{
	padding: 0px 16px 0px 32px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
}
.site-content > ul > li{
	padding: 0px 0px 5px 0px;
}


.site-content > p.title {
	padding: 24px 16px 10px 16px;
	font-size: 20px;
     min-height: 42px;
}

.site-content > div.post-title > .maps {
	display: block;
     position: aboslute;
     height: calc(800px / 3);
     width: 100%;
	border: none;
}

@media screen and (max-width: 800px) {
	.site-content > div.post-title > .maps {
          height: calc(100vw / 3);
	}
}

.site-content > div.post-title{
     padding: 0px;
     margin: 30px 0px 10px 0px;
     height: calc(800px / 3);

     background-position: center;
     background-size: cover;
     background-attachment: scroll;

     filter: grayscale(100%);
     transition: filter 1.5s 0.5s, transform 1s 0.3s;
}


body.show-menu > .content > .site-content >  div.post-title {
     filter: grayscale(100%);
	transform: translateX(150px);
     transition: ilter 0.7s, transform 0.7s;
}

.site-content > div.post-title.show{
     filter: grayscale(0%);
}

@media screen and (max-width: 800px) {
	.site-content > div.post-title {
          height: calc(100vw / 3);
	}
}

.site-content > div.post-title.vermittelt > div {
     width: 110px;
     height: 110px;
     overflow: hidden;
     position: absolute;
}

.site-content > div.post-title.vermittelt > div > div {
     position: relative;
     top: 23px;
     left: -23px;
     background:#ebe22f;
     color:black;
     padding: 0 auto; 
     transform: rotate(315deg);
     width: 110px;
     height: 20px;
     text-align: center;
     font-family: 'Quicksand', sans-serif;
}

.site-content > div.post-title > p {
     display: inline-block;
     padding: 8px 12px 5px 16px;
     background-color: white;
     position: relative;
     margin-top: calc( calc(800px / 3) - 25px);
     
     border-top-right-radius: 5px;
     font-family: 'Quicksand', sans-serif;
     font-size: 20px;
     opacity: 1;
     transition: opacity 1s 0.1s;
}

.site-content > div.post-title > p.with-content {
     margin-top: 0px;
     transform: translateY(-25px);
}

body.show-menu > .content > .site-content > div.post-title > p {
     opacity: 0;
     transition: opacity 1s 0.6;
     background-color: #f1f1f1;
}

 @media screen and (max-width: 800px) {
	.site-content > div.post-title > p {
          margin-top: calc( calc(100vw / 3) - 25px );
	}
} 

.site-content > .content-text-map{
	clear: left;
	text-align: justify;
	padding: 0px 16px 30px 16px;
	font-family: 'Quicksand', sans-serif;
}

.content-text-map .signup-text-input {
	padding:5px;
	margin:5px 0px 10px;
	border: 1px solid #d6d6d6;
	font-size: 12px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
	width:100%;
	height: 35px;
			
	font-family: 'Quicksand', sans-serif;
	background: transparent;
	border-radius: 5px;
}

.content-text-map .btnAction{
	padding: 5px 10px;
	 margin:10px 0; 
	border-radius: 5px;
	border: none;
	background-color: rgba(85, 85, 85, 0.9);
	font-family: 'Quicksand', sans-serif;
	color: #f1f1f1;
}
.content-text-map .btnAction:hover {
     cursor: pointer;
	background-color: rgba(85, 85, 85, 0.7);
}

.content-text-map .info{
	font-size: 12px;
	color: grey;
}

.content-text-map.mailinfo{
	font-size: 12px;
	color: green;
}

.content-text-map .signup-textarea-input {
	font-family: 'Quicksand', sans-serif;
	border: 1px solid #d6d6d6;
	height: 200px;
	background: transparent;
	border-radius: 5px;
}

/** GALLERY **********************************************************************************/


.gallery {
     height: 100dvh;
     margin: 30px 0px 0px 0px;
     overflow: hidden;
     filter: grayscale(100%);
     transition: filter 1.5s 0.5s, transform 1s 0.3s;
}


body.show-menu > .content > .site-content > .gallery {
	transform: translateX(150px);
     transition: transform 0.7s;
}

.gallery.show{
     filter: grayscale(0%);
}

.gallery > div {
	/* box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; */
     height: 100%;
     width: 0;
	background-attachment: scroll;
	background-position: center;
	background-color: #000000;
	background-size: cover;
     transition: width 1s;
     float: left;
     overflow: hidden;
}

.gallery > div.show{
     width: 100%;
}

.gallery > div > .arrow-previous{
	text-align: center;
	width: 30px;
     height: 30px;
	font-weight: bold;
	margin: 0;
	position: relative;  
     float: left;                    
	top: calc(100dvh / 2);
	left: 20px;
	color: #f1f1f1;
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     transition: unset;
     opacity: 0;
	 visibility: hidden;
}

.gallery.show > div.show > .arrow-previous{
     transition: opacity 0s ease 1s, visibility 0s ease 1s;
     opacity: 1;
	 visibility: visible;
}

.gallery > div > .arrow-next{
	text-align: center;
	width: 30px;
     height: 30px;
	font-weight: bold;
	margin: 0;
	position: relative;  
     float: right;            
	top: calc(100dvh / 2);
	right: 20px;
	color: #f1f1f1;
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     transition: unset;
     opacity: 0;
	 visibility: hidden;
}

.gallery.show > div.show > .arrow-next{
     transition: opacity 0s ease 1s, visibility 0s ease 1s;
     opacity: 1;
	 visibility: visible;
}

.gallery.show > div.show > .arrow-previous > i, .gallery.show > div.show > .arrow-next > i{
     animation: arrowBlinker 1s step-start infinite;
}

.gallery > div > .arrow-previous:hover, .gallery > div > .arrow-next:hover{
	cursor: pointer;
}

.gallery.show > div:first-child > .arrow-previous, .gallery.show > div:last-child > .arrow-next {
     transition: unset;
     visibility: hidden;
}


/** MENU-ICON **********************************************************************************/

.menu-icon-container {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50px;
     height: 45px;
     cursor: pointer;
}

div.menu-icon {
     width: 54%;
     height: 8%;
     background: #818181;
     opacity: 1;
     border-radius: 5px;
     transition: width 1s ease-in-out, background 1.5s ease-in-out;
}

body.show-menu .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::before,
body.show-menu .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::after {
     background: white;
}

div.menu-icon::before,
div.menu-icon::after {
     content: '';
     position: absolute;
     width: 54%;
     height: 8%;
     /* left: 0px; */
     top: 45%;
     background: #818181;
     border-radius: 5px;
     transition: width 1s ease-in-out, transform 1s ease-in-out;
}

body .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::before {
     transform: translateX(-50%) translateY(-7px);
     animation: 1.2s ease-in 0s infinite both paused crossBefore;
}

body .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::after {
     transform: translateX(-50%) translateY(8px);
     animation: 1.5s ease-in 0s infinite both paused crossAfter;
}

body .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon {
     animation: 0.9s ease-in 1s infinite both paused crossMiddle;
}

body.show-menu .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::before {
     transform: translateX(-50%) rotate(45deg);
     animation: 1.5s ease-in 0s infinite both paused crossBefore;
}

body.show-menu .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon::after {
     transform: translateX(-50%) rotate(-45deg);
     animation: 2s ease-in 0s infinite both paused crossAfter;
}

body .navigation-bar > .icon > a > .menu-icon-container:hover > div.menu-icon {
     animation-play-state: running;
     background: white;
}

@keyframes crossMiddle {
     0% { width: 54%; }
     30% { width: 61%; }
     67% { width: 45%; }
     100% { width: 54%; }
}

body .navigation-bar > .icon > a > .menu-icon-container:hover > div.menu-icon::before {
     animation-play-state: running;
     background: white;
     }

@keyframes crossBefore {
     0% { width: 54%; }
     30% { width: 40%; }
     67% { width: 63%; }
     100% { width: 54%; }
}

body .navigation-bar > .icon > a > .menu-icon-container:hover > div.menu-icon::after {
     animation-play-state: running;
     background: white;
}

@keyframes crossAfter {
     0% { width: 54%; }
     30% { width: 67%; }
     67% { width: 41%; }
     100% { width: 54%; }
}

body.show-menu .navigation-bar > .icon > a > .menu-icon-container > div.menu-icon {
     background: transparent;
     transition: width 1s ease-in-out, background .5s ease-in-out, transform 1s ease-in-out;
}