/*

	Volkshain Stünz 2019
	
  ROT    #661313
 
*/

body , html {
	min-height:100%;
	height:100%;
	width: 100%;
	margin:0px;
	padding:0px;
	background-color: #FFFFFF;
	font-family: 'Kalam', sans-serif;
	font-weight: 300;
	line-height: 1.4;
	color: #000000;                                 /* main font color */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
}

html {
	font-size:140%;                                 /* fontsize */
}

#console {
  position:fixed;
  left:80px;
  top:120px;
  color:red;
  z-index: 2040;
  font-size:0.86rem;
  background-color:#FFFFFF;
}
.debug #console {
  display:block;
}

.overlay-urlaub {
  position:absolute;
  width:100%;
  min-height:100%;
  z-index:1000;
  background-color:#6a2a19;
  background-image: url(../images/bg-stange.jpg);
  background-size: 100% auto; 
  background-position: 50% top; 
  background-repeat: repeat-y; 
  
  /*  URLAUB vorbei */
  display:none;
}

.overlay-urlaub-inner {
  position:relative;
  background-image: url(../images/urlaub-2020_o.jpg);
  background-size: 100% auto; 
  background-position: 50% 50%; 
  background-repeat: no-repeat;
  width:100%;
  padding-top:123.66%;
}

#page { 
    position: relative;
    width: 100%;
    /* max-width:1400px;   */                    /* MAX WIDTH */
    max-width:1100px;                            /* MAX WIDTH */
    margin: 0px;
    margin: 0 auto;
    min-height:100%;
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    
    /*  URLAUB */
    /*
    display:none;
    */
}

.wrapper-bg-red { 
    position: relative;
    width: 100%;
    background-color: #661313;
}

.btn-reserve {
  position:absolute;
  top:0.9rem;
  right:1.6rem;
  z-index:998;
}

.btn-reserve a {
  display:flex;
  align-items:center;
  text-decoration:none;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight:700;
  font-size:0.9rem;
  color:#FFFFFF;
}
.ico-tel {
  display:inline-block;
  width:1.9rem;
  height:1.9rem;
  background-image: url(../images/telefon.svg);
  background-size: 100% auto; 
  background-repeat: no-repeat;
  margin-left:0.4rem;
}

.wrapper-content {
    position: relative;
    min-height:100%;
    margin: 0px;
    margin: 0 auto;
    overflow:hidden;
}

.header-area {
  position:relative;
  display:block;
  background-image: url(../images/stuenz_haus-weiss-v2.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width:100%;
}

.logo {
  position:relative;
  display:block;
  background-image: url(../images/stuenz-logo.svg);
  background-size: 100% auto; 
  background-repeat: no-repeat;
  width:94%;
  margin: 0 auto;
  margin-top:-61%;
  padding-top:62.5%;
}

.main-area {
  width: 100%;
}

.main-text {
  margin-left: -0.01rem;
  color:#FFFFFF;
  text-align:center;
  margin-bottom:2rem;
}

.footer-area {
    background-image: url(../images/bg_holz.jpg);
    background-size: cover; 
    background-position: center bottom; 
    background-repeat: no-repeat;
    width:100%;
    position:relative;
}

.wrapper-footer {
    width:100%;
    position:relative;
    overflow:hidden;
}

.wrapper-wedge {
    /*border-top:500px solid #661313; */
    position:absolute;
    left:0px;
    width:100%;
    z-index:1;
    overflow:hidden;
    display:flex;
    justify-content:center;
}

.wedge {
    position:relative;
    width: 0px; 
    height: 0px;
    border-style: solid; 
    border-width: 180px 1000px;     /* 145 */
    border-color: #661313 transparent transparent transparent; /* #661313 */
    margin: 0 auto;
}

.wrapper-holzquadrat {
	padding: 20px 0;
    position:relative;
    z-index:2;
}

.holzquadrat {
    position:relative;
    background-image: url(../images/Holzquadrat-Oeffnungszeiten.png);
    background-size: 100% auto; 
    background-position: 50% 50%; 
    background-repeat: no-repeat;
    width:62%;
    margin: 0 auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    text-align:center;
    padding-top:62%;
}

.plate {
    position:relative;
	margin: auto;
	padding:20px 0;
	width:70%;
	justify-content:center;
    flex-wrap:wrap;
    text-align:center;
	border: 0px solid #000000;
	-webkit-box-shadow: 0px 5px 10px 6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 10px 6px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 10px 6px rgba(0,0,0,0.75);
	background: #fff0b7; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #fff0b7, #fff0b7 39%, #ffc98c); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #fff0b7,#fff0b7 39%,#ffc98c); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #fff0b7,#fff0b7 39%,#ffc98c); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff0b7', endColorstr='#ffc98c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.wrapper-oeffnungszeiten {
    /*margin-top:-100%;*/
    display:flex;
    align-items:center;
    justify-content:center;
}

.oeffnungszeiten {
    width:80%;
    height:80%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}

.oeffnungszeiten div {
    width:100%;
}

.wrapper-footer-text {
    text-align:center;
    font-size:0.78rem;
    font-weight:400;
    min-height:40px;
}
.wrapper-footer-text a {
    text-decoration:none;
    color:#000000;
}
.wrapper-footer-text a:hover {
    color:#661313;
}

#overlay {
  position:absolute;
  min-height:100%;
  width:100%;
  z-index:9999;
  background-color: rgba(0,0,0,0.8);
  color:#FFFFFF;
  display:none;
}
#impress {
    background-color:#FFFFFF;
    transform: rotate(-4deg);
    width:380px;
    margin:0 auto;
    margin-top: calc(20vh);
    display:none;
}
#impress .slip-text {
  padding:1.2rem 1.5rem 1.0rem 1.5rem;
  text-align:center;
  transform: rotate(4deg);
}
#datenschutz {
    background-color:#FFFFFF;
    width:60%;
    margin:0 auto;
    margin-top: 1.7rem;
    margin-bottom: 1.7rem;
    display:none;
}
#datenschutz .slip-text {
    padding:1.2rem 3rem 1.0rem 3rem;
    font-size:0.7rem;
}

.slip-text, 
.slip-text a {
  color:#000000;
  text-decoration:none;
}

.mobile-only, 
.mobile-only-inline {
  display:none;
}

.desktop-only {
  display:block;
}

/* //////////////////////// AUSRICHTUNG, SPACER, CLEAR //////////////////////////////////////////////// */
.clear {
  clear:both;
} 
.spacer-v-1_0 {
  width:100%;
  clear:both;
  height:1.0rem;
}
.spacer-v-1_5 {
  width:100%;
  clear:both;
  height:1.5rem;
}
.spacer-v-2_5 {
  width:100%;
  clear:both;
  height:2.5rem;
}
.spacer-v-0_5 {
  width:100%;
  clear:both;
  height:0.48rem;
}
.centered {
  margin: 0 auto;
}

.align-right {
  text-align:right;
}

.hidden, 
.invisible {
  display:none !important;
  display:none;
} 

/* ////////////////////////////////////////// FONTS ///////////////////////// */
a, 
a.normal, 
.link-telefon {
  text-decoration:none;
}

h1 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height:1.3;
  margin-top:2rem;
  margin-bottom:1rem;
  letter-spacing:0.06rem;
}

h2 {
  font-size: 1.1rem;
  margin-bottom:0.4rem;
  font-weight: 600;
  display:block;
  width:100%;
  margin-top:-0.3rem;
  padding-top:0px;
}

b,
.bolder {
  font-weight: 400;
}

.font-taller {
  font-size:1.14rem;
  letter-spacing:0.06rem;
}



@media screen and (max-width: 660px) {

  html {
    font-size: calc(1.4rem + ((1vw - 12px) * 0.8));
  }
  .oeffnungszeiten {
    font-size: calc(4vw);
  }
  .oeffnungszeiten h2 {
    font-size: calc(4.2vw);
  }
  .spacer-v-0_5 {
    height: calc(2.5vw);
  }
  .spacer-v-1_5 {
    height: calc(5vw);
  }
  .btn-reserve {
    top:14px;
    right: 24px;
  }
  .wrapper-content {
    width:100%;
  }
  .header-area {
    padding-top:100%;
    background-size: 151% auto;
    background-position: 59% calc((1vw) * -12);
  }
  .logo {
    width:99%;
    margin-top:-65%;
    padding-top:66%;
  }
  .main-area,
  .wrapper-footer-text {
    width: 90%;
    margin-left:5%;
  }
  .wrapper-footer-text {
    font-size:0.88rem;
  }
  .main-text {
    margin-left: 0px;
  }
  .wrapper-wedge {
  }
  .holzquadrat {
    width: 96%;
    padding-top: 96%;
  }
  .footer-area {
    background-image: url(../images/bg_holz.jpg);
    background-size: 400% auto; 
    background-position: 70% top; 
  }
  #impress {
    width:320px;
    margin-top: calc(30vh);
  }
  .desktop-only, 
  .hidden-mobile {
    display:none;
  }
  .mobile-only {
    display:block;
  }
  #datenschutz {
    width:96%;
  }
}

@media screen and (max-width: 480px) {
  .main-area,
  .wrapper-footer-text {
    width: calc(100% - 32px);
    margin-left:16px;
  }
  .wrapper-wedge {
  }
  .holzquadrat {
    width: 109%;
    padding-top: 109%;
    margin-left: -4.5%;
  }
  .oeffnungszeiten {
    font-size: calc(5vw);
  }
  .oeffnungszeiten h2 {
    font-size: calc(5.7vw);
  }
}

@media screen and (min-width: 661px) and (max-width: 1024px) {

  html {
    font-size: calc(1.3rem + ((1vw - 11px) * 0.8));
  }
  .wrapper-content {
    width:80%;
    min-width:620px;
    max-width:720px;
  }
  .header-area {
    padding-top:74%;
  }
  .wrapper-wedge {
    
  }
  .holzquadrat {
    width: 68%;
    padding-top: 68%;
  }
  .oeffnungszeiten h2 {
    font-size: 1.0rem;
  }
  .spacer-v-1_5 {
    height: calc(2vw);
  }
  .desktop-only {
    display:none;
  }
  #datenschutz {
    width:80%;
  }
}
@media screen and (min-width: 1025px) {
  .wrapper-content {
    width:70%;
  }
  .header-area {
    padding-top:74%;
  }
  .logo {
    background-position: -6px 0px;
  }
}