/* ------------------------------------------------------------------------------------------------------------------------------------*/

/* ------------------------------------------------------------ CUSTOM CSS ------------------------------------------------------------*/

/* ------------------------------------------------------------------------------------------------------------------------------------*/


body{
	background-color:#060f23;
	position:relative;
	font-family: Roboto, Arial, sans-serif;
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:0px;
	margin:0px;
	min-height:100vh;
}

.article{padding:80px;}

.vignette {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 50vw rgba(0,0,0,0.6) inset;
	z-index:-10;
}

.fontgold{
	color:#cba456;
}

.fontblau{
	color:#060f23;
}

.bggold{
	background-color:#cba456;
}

.bgblau{
	background-color:#060f23;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(0.9,0.9);
	}
	100% {
		transform: scale(1,1);
	}
}

h1{
	font-family:"Unna";
	color:#cba456;
	font-size:3em;
	font-weight:700;
	padding:0;
	margin:0;
}

h2{
	font-family:"Corinthia";
	color:#cba456;
	font-size:4em;
	font-weight:700;
	padding:0;
	margin:0;
}

h3{
	font-family:"Unna";
	color:#cba456;
	font-size:4em;
	font-weight:400;
	padding:0;
	margin:0;
}

h2 span{
	font-family:"Unna";
	font-size:0.70em;
}
.content{
	width: 85vw;
}

.content.fullwidth{
	width: 100vw;
}

.divider{
	height:2px !Important;
	border-top:1px solid #cba456;
}

.animated{
	o-transition-duration:  all 0.4s ease 0s;
	ms-transition-duration:  all 0.4s ease 0s;
	moz-transition-duration:  all 0.4s ease 0s;
	webkit-transition-duration:  all 0.4s ease 0s;	
	transition: all 0.4s ease 0s;
}

.animated1{
	o-transition-duration:  all 0.4s ease 0.2s;
	ms-transition-duration:  all 0.4s ease 0.2s;
	moz-transition-duration:  all 0.4s ease 0.2s;
	webkit-transition-duration:  all 0.4s ease 0.2s;	
	transition: all 0.4s ease 0.2s;
}

.content.menu{
	height:100px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.menu .main-menu{
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:2em;
    z-index:1000;
}

.menu .main-menu a{
	color:#cba456;
	font-weight:700;
	padding:10px 0px;
	cursor:pointer;
	text-decoration:none;
}

.menu .main-menu a.reservieren{
	border:1px solid #cba456;
	font-family:"Unna";
	padding:10px 20px;
	font-size:1.3em;
}

.menu .main-menu a.reservieren:hover{
	padding:10px 25px;
}	

.menu .social-menu{
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:1em;
}

.menu .social-menu a{
	cursor:pointer;
}

.menu .social-menu a img{
	width:30px;
	height:30px;
}	

.menu .social-menu a:hover img{
	width:34px;
	height:34px;
}	

.hamburger {
  display: none;
  position:absolute;
  top:0;
  right:0;
  height: 26px;
  margin-right: 27px;
  
  a.main-nav-toggle {
    display: block;
    width: 28px;
    height: 16px;
    right: 25px;
    position: absolute;
    top: 25px;
    
    &:after,
    &:before {
      content: '';
      position: absolute;
      top: 0;
      height: 0;
      border-bottom: 4px solid #bbb;
      width: 100%;
      left: 0;
      right: 0;
      transition: all ease-out 0.3s;
    }
    
    &:after {
      top: 100%;
    }
    
    i {
      display: block;
      text-indent: 100%;
      overflow: hidden;
      white-space: nowrap;
      height: 4px;
      background-color: #bbb;
      width: 100%;
      position: absolute;
      top: 50%;
      transition: all ease-out 0.1s;
    }
    
    &.active-menu {
      &:after {
        transform: rotate(-45deg);
        transform-origin: center;
        top: 50%;
      }
      
      &:before {
        transform: rotate(45deg);
        transform-origin: center;
        top: 50%
      }
      
      i {
        opacity: 0;
      }
    }
  }
}


.content.hero{
	max-height:100vh;
	height:calc(100vh - 100px);
	background-image:url(../img/schneeflocken.png);
	background-repeat:no-repeat;
	background-position:center 0px;
	background-size:contain;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}

.hero .mainblock{
	display:flex;
	flex-direction:column;
	align-items:center;
	max-width:100%;
	width:1000px;
	margin-top:-300px;
}

.hero .mainblock a img{
	width:400px;
	max-width:100%;
	transform-origin: bottom center;
}


.hero .mainblock a:hover img{
	width:410px;
}

.hero .mainblock h2{
	text-align:center;
}

.hero .mainblock .divider{
	width:100%;
	margin:40px;
}

.hero .mainblock p{
	text-align:center;
	font-size:1.0em;
	width:100%;
}

.hero .circle{
	position:absolute;
	top:calc(100vh - 12vw);
	width:8vw;
	height:8vw;
	border-radius: 100%;
	text-align:center;
	text-decoration:none;
	font-size:1.8em;
	font-family:"unna";
	font-weight:700;
	display:flex;
	padding:20px;
	align-items:center;
	justify-content:center;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;	
}

.hero .circle:hover{
	padding:25px;
}


.content.erlebniswelten{
	padding-top:200px;
	text-align:center;
}

.content.erlebniswelten .headlines{
	padding:0px 300px;
	display:inline-block;
	position:relative;
}	

.content.erlebniswelten .headlines .reh{
	background-image:url(../img/reh.svg);
	width:120px;
	height:120px;
	position:absolute;
}	

.content.erlebniswelten .headlines .reh.left{
	left:0px;
	top:0px;
}	

.content.erlebniswelten .headlines .reh.right{
	right:0px;
	top:0px;
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}	

.content.erlebniswelten h2{
	font-size:5em;
}	

.content.erlebniswelten h3{
	font-size:3em;
	margin-bottom:100px;
}	

.content.erlebniswelten .block{
	display:flex;
	flex-direction:row;
	gap:4em;
	align-items:bottom;
	justify-content:center;
}

.content.erlebniswelten .block > div{
	width:400px;
	height:300px;
	background-size:auto 100%;
	background-position:50% 50%;
}

.content.erlebniswelten .block > div:hover{
	background-size:auto 105%;
}	

.content.erlebniswelten .block .welt1{
	background-image:url(../img/erlebniswelt1.jpg);
}
.content.erlebniswelten .block .welt2{
	background-image:url(../img/erlebniswelt2.jpg);
}
.content.erlebniswelten .block .welt3{
	background-image:url(../img/erlebniswelt3.jpg);
}

.content.erlebniswelten .block.bilder .welt-text{
	display:none;
}

.content.erlebniswelten .block .welt-text{
	height:100px;
	margin-bottom:100px;
	font-family:"Unna";
	font-size:1.4em;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.content.erlebniswelten .block .welt-text .fontgold{
	font-weight:700;
}

.content.galerie{
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:100px 0;
}

.content.galerie .bilder{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:1em;
	padding:80px 0;
	width:100%;
}

.content.galerie .bilder .bild{
	width:calc(33% - 0.5em);
	height:400px;
	max-height:calc((100vw / 3) / 4*3);
}	

.content.galerie .bilder .bild a .img{
	position:relative;
	width:100%;
	height:100%;
	background-size:100% auto;
	background-position:50% 50%;
}	

.content.galerie .bilder .bild a:hover .img{
		background-size:105% auto;
}	

.content.reservierung{
	padding:100px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.content.reservierung h2{
	font-family:"Unna";
	font-weight:400;
	width:calc(80% - 160px);
	text-align:left;
	padding:40px 80px;
	display:inline-block;
}

.content.reservierung .block{
	width:80%;
	display:flex;
	flex-direction:row;
	min-height:500px;
	position:relative;
}

.content.reservierung .block .links{
	width:50%;
	padding:80px 240px 80px 80px;
}	

.content.reservierung .block .rechts{
	width:50%;
	background:url("../img/reservierungen.jpg");
	background-size:cover;
	background-position:50% 50%;
}	

.content.reservierung .block .reh_circle{
	background:url("../img/reh_circle.svg");
	width:140px;
	height:140px;
	background-size:cover;
	position:absolute;
	top:calc(50% - 70px);
	left:calc(50% - 70px);
	transform: scale(1,1);
	animation: pulse 6s ease-in-out infinite;	

}

.content.reservierung .block h4{
	font-family:"Corinthia";
	font-size:4em;
}

.content.reservierung .block h5{
	font-family:"Unna";
	font-size:1.6em;
	margin-bottom:20px;
}

.content.reservierung .c2a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:40px;
	padding:10px 40px;
	text-decoration:none;
	cursor:pointer;
	width:25%;
}

.content.reservierung .c2a:hover{
	padding:10px 60px;
}

.content.newsletter{
	padding:100px 0;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}

.content.newsletter h2{
	font-family:"Unna";
	font-weight:400
}

.content.newsletter > div:first-child{
	width:280px;
	display:flex;
	flex-direction:column;
	position:relative;
}

.content.newsletter > div:nth-child(2){
	width:calc(80% - 280px);
	display:flex;
	flex-direction:column;
	position:relative;
	gap:2em;
}

.content.newsletter > div:nth-child(2) > div{
	width:80%;
	display:flex;
	flex-direction:row;
	position:relative;
	gap:2em;
}	

.content.newsletter > div:nth-child(2) > div p{
	width:50%;
}	
.content.newsletter > div:nth-child(2) > div form{
	width:50%;
	display:flex;
	flex-direction:column;
	gap:1em;
}	

.content.newsletter .reh{
	background-image:url(../img/reh.svg);
	width:200px;
	height:200px;
	background-size:contain;
	background-repeat:no-repeat;
}	

.content.newsletter input[type=email]{
	color:#fff;
	border:1px solid #cba456;
	background:#060f23;
	font-size:1em;
	padding:10px 20px;
}

.content.newsletter input[type=submit]{
	color:#060f23;
	border:0px !important;
	background:#cba456;
	font-size:1em;
	font-weight:700;
	font-family:"Unna";
	padding:10px 20px;
	cursor:pointer;
}

.content.newsletter input[type=submit]:hover{
	padding:14px 20px;
}


.content.ncl{
	width:80%;
	padding:80px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	border:1px solid #cba456;
	margin:100px 0;
	gap:80px;
}

.content.ncl > div:first-child{
	width:70%;
	height:100%;
}	
.content.ncl > div:nth-child(2){
	width:30%;
	height:100%;
}	


.content.ncl h2{
	font-family:"Corinthia";
	font-weight:400
}

.content.ncl a,.content.ncl a:visited{
	color:#cba456;
}


.content.ncl .ncllogo{
	width:100%;
}

.content.ncl .ncllogo img{
	width:80%;
	height:auto;
}	

.content.oeffnungszeiten{
	padding:80px 0;
	border:1px solid #cba456;
	margin:100px;
	width:80%;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.content.oeffnungszeiten h2 {
  font-family: "Unna";
  font-weight: 400;
  width: 100%;
  text-align: center;
  display: inline-block;
  font-size:2em;
}

.content.oeffnungszeiten h4 {
  font-weight: 400;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.content.oeffnungszeiten h5{
	margin-bottom:20px;
}

.content.oeffnungszeiten .block{
	display:flex;
	flex-direction:row;
	align-items:bottom;
	justify-content:center;
	width:60%;
}

.content.oeffnungszeiten .block > div{
	display:flex;
	flex-direction:column;
	margin-top:60px;
	padding:0 60px;
}

.content.oeffnungszeiten .block > div > div{
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:2em;
}	

.content.oeffnungszeiten .block > .links{
	border-right:1px solid #cba456;
	
}

.content.oeffnungszeiten .block > div > div .datum{
	color:#cba456;
}

.content.oeffnungszeiten .hinweis{
	color:#cba456;
	font-size:0.8em;
	width:40%; 
	margin-top:60px;
	text-align:center;
}

.content.footer{
	width:80%;
	padding:100px;
	margin-bottom:100px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	border-top:1px solid #cba456;
	border-bottom:1px solid #cba456;
	gap:2em;
}

.content.programm{
	width:60%;
	max-width:100%;
	display:flex;
	flex-direction:row;
	margin-top:200px;
	gap:40px;
}

.content.programm h2{
	font-family: "Unna";
	font-weight: 400;
	width: 100%;
	font-size: 3em;
	padding-bottom:40px;
}

.content.programm .block.einleitung{
	width:40%;
}	


.content.programm .block.programmbloecke{
	width:calc(60% - 40px);
	flex-direction:column;
	display:flex;
	gap:40px;
}

.content.programm .programmblock{
	border: 1px solid #cba456;
	padding:20px;
}

.content.programm .programmblock h3{
	font-size:2em;
}

.content.programm .programmblock a,.content.programm .programmblock a:visited{
	color:#cba456;
	font-size:0.8em;
}

.content.programm .programmblock .datums{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:10px;
	padding-top:20px;
}

.content.programm .programmblock .datums .datum{
	background:#cba456;
	padding:10px 20px;
	color:#060f23;
	font-size:0.8em;
}	

.content.partner{
	width:80%;
	padding:100px;
	border-top:1px solid #cba456;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.content.partner h2{
	font-family:Unna;
	font-weight:400;
	width:100%;
	text-align:center;
}

.content.partner p{
	width:40%;
	text-align:center;
}	

.content.partner .logos{
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:20px;
	padding-top:100px;
	justify-content:center;
	align-items:center;
}

.content.partner .logos .partnerlogo{
	height:auto;
	max-height:200px;
	max-width:20%;
}