/* kerschbaum-consulting - 18.09.2021 */
@import url("/css/styles_fonts.css");

:root {
	--black: #191919;
	--white: #ffffff;
	--grey: #F5F0E6;	
	--green: #32502D;
	--orange: #E69B4B;
	--stein: #1D1D1B;
	--content-breite:1600px;
	
	--font-fliesstext:  'Inter','Open Sans', sans-serif;
    --font-inter:  'Inter','Open Sans', sans-serif;	
	--font-navtext:  'Cactus','Open Sans', sans-serif;
	--font-cactus:  'Cactus','Open Sans', sans-serif;
	--font-headline: 'Inter','Open Sans', sans-serif;
    
}


* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}
body {font-family: 'Inter','Open Sans', sans-serif; font-size: 20px; background-color: var(--grey)}
.hideMobile {display: block}
.hideDesktop{display: none}
.grid a {color: var(--black) !important; text-decoration: none}
.grid a:hover {opacity: 0.4}
.inter {font-family: 'Inter','Open Sans', sans-serif;}
.cactus {font-family: 'Cactus','Open Sans', sans-serif;}
.xl {font-size: 1.5em}
.xxl {font-size: 2em}
.bold {font-weight: bold}
.container {width: 100%; margin: 0px auto; display: flex;justify-content: center}
.mw1600 {width: 1660px; max-width: 100%; margin: 0px auto}
.top10px {position: relative;top: 10px}
.pt40 {padding-top: 40px}
.spalte{padding-top: 40px; padding-bottom: 20px}
.flex {display: flex}
.jcright {justify-content: flex-end;display: flex}
.jcleft {justify-content: flex-start;display: flex}
.pr10px{padding-right: 10px}
/*.grid {display: grid; grid-template-columns: 400px auto 400px}*/
.grid {display: grid;   grid-template-columns: 
      minmax(400px, 400px) 
      minmax(300px, 800px)
      minmax(400px, 400px)}
.height100vh {height: 100vh;}
.logolink{height:280px; width: auto; display: block; transition: height 0.5s ease;}
.logo {margin-left: 0px; background-image: url("/UserFiles/structure/svg/logo-fuchsundhase.png?t=3"); background-repeat: no-repeat; background-size: contain; width:240px; height: 100%;}
#spalte1 {display: flex;flex-direction: column;justify-content: space-between; padding: 40px 20px 20px 20px; max-height: 100vh}
#spalte2 {display: flex;flex-direction: column;justify-content: space-between; padding-top: 90px;  max-height: 100vh}
#spalte2 .container.bilder {width: 100%; height: calc(100vh)}
#spalte3 {display: flex;flex-direction: column;justify-content: space-between; padding: 40px 20px 20px 20px;  max-height: 100vh}
.fade {width: 100%;}
.fuchsundhaseimage {display: flex; justify-content: center; width: 800px; max-width: 100%}
.fuchsundhaseimage img {height: calc(100vh - 200px);}
.center{text-align: center}
.reservierung {cursor: pointer}
.reservierung:hover {opacity: 0.4}
#bookingTool.aktiv {position: fixed; right: 5px; top: 25px; width: 350px;background-color: var(--black);border-radius: 10px;color: var(--grey);padding: 10px;font-size: 15px; transition: bottom 0.5s ease-in-out; z-index: 300}
#bookingTool.inaktiv {bottom: -120vH; position: fixed}
#bookingTool .closer {position: relative; right: -315px; top:-20px; border-radius: 20px; width: 20px;height: 20px;font-size: 10px; background-color: var(--green); display: flex;justify-content: center; align-items: center;cursor: pointer}
#bookingTool .header {display: flex;justify-content: center; font-size: 12px; padding-bottom: 10px;position: relative; z-index: 100}
#bookingTool .zeile.inaktiv {max-height: 0px}
#bookingTool .zeile.aktiv {max-height: 800px}
#bookingTool .zeile .head{display: flex; justify-content: space-between; align-items: center; cursor: pointer; height: 40px;}
#bookingTool .zeile .head div{width: 33% !important}
#bookingTool .zeile .head .name{font-size: 10px; font-style: italic; text-align: left}
#bookingTool .zeile .head .chooser{text-align: center}
#bookingTool .zeile .head .arrowDown {text-align: right}
#bookingTool .zeile .head.aktiv .arrowDown{ -moz-transform: scale(1, -1);    -o-transform: scale(1, -1);    -webkit-transform: scale(1, -1);    transform: scale(1, -1);}
#bookingTool .arrowDown img {width: 10px;height: auto;}
#bookingTool .data {justify-content: center; display: flex; background-color: #000; border: 1px solid black; border-radius: 10px; position: relative; z-index: 99}
#bookingTool .data.column {flex-direction: column; justify-content: center; text-align: center}
#bookingTool .data.column a {color: var(--grey); text-decoration: none;margin-bottom: 10px}
#bookingTool .data.inaktiv {max-height: 0px; overflow: hidden; transition: all 0.5s ease; cursor: pointer; opacity: 0; align-items: center;}
#bookingTool .data.aktiv {max-height: 800px; transition: all 0.5s ease; cursor: pointer; opacity: 1; align-items: center;}
#bookingTool .buttons {display: flex; flex-wrap: wrap;justify-content: center; padding: 20px; padding-bottom: 10px; width: 300px; max-width: 100%}
#bookingTool .buttons .button {width: 50px; height: 50px; line-height: 50px; border: 1px solid var(--grey); border-radius: 5px; display: flex; justify-content: center; align-items: center;margin-right: 10px; margin-bottom: 10px; cursor: pointer;}
#bookingTool .buttons .button:hover {background-color: var(--green);}
#bookingTool .buttons .button.aktiv {background-color: var(--white); color: var(--black); cursor: default}
#bookingTool input, #bookingTool button{width: 100%;
	height: 40px;
	border: 1px solid var(--grey);
	margin-bottom: 4px;
	padding: 10px;
	border-radius: 4px;
	font-family: 'Inter','Open Sans', sans-serif; font-size: 12px;
}
#bookingTool textarea{
	width: 100%;
	height: 100px;
	border: 1px solid var(--grey);
	margin-bottom: 4px;
	padding: 10px;
	border-radius: 4px;
	font-family: 'Inter','Open Sans', sans-serif; font-size: 12px;
}
#bookingTool #absenden {display: block}
#bookingTool #absenden.disabled {display: none}
#bookingTool .userdatenOuter  .data{display: block !important}
#bookingTool .ui-datepicker {
  width: 23em !important;
  padding: 0px !important;
}
#bookingTool #response {padding-top: 30px; padding-bottom: 30px; display: none}

@media (max-width:1500px) {
body {font-size: 15px}
.grid {display: grid;   grid-template-columns: 
      minmax(300px, 300px) 
      minmax(300px, 800px)
      minmax(300px, 300px)
	}

.logo {
  width: 180px;

}	
	
}
	
	


@media (max-width:1024px) {
.grid a {color: var(--grey) !important; text-decoration: none}	
.hideMobile {display: none}
.hideDesktop {display: block}	
body {background-color: var(--stein); color: var(--grey)}
.grid {display: block}	
.logo {background-image: url("/UserFiles/structure/svg/logo-fuchsundhase-invers.png?t=3");}	
#spalte1 {display: flex;flex-direction: row;justify-content: space-between; padding: 60px 0px 20px 0px; max-height: 300px}	
#spalte1 .container:first-child{text-align: left; justify-content: flex-start}
#spalte1 .container:last-child{text-align: right; justify-content: space-between; padding-right: 5px; flex-direction: column;z-index: 2; white-space: nowrap}		
#spalte2 {padding-top: 0px !important; height: calc(100vh - 400px)}	
#spalte2 .container:first-child{width: 100% !important;}
#spalte2 .container:last-child{text-align: left; justify-content: space-between; padding-left: 10px; padding-top: 20px; font-size: 20px}	
#spalte3 {padding-bottom: 10px !important;font-size: 15px}
#bookingTool.aktiv {position: fixed; right: 5px; top: auto; bottom: 5px}	
#bookingTool.inaktiv {bottom: -100vh; position: fixed}	
#bookingTool .closer {background-color: var(--black); color: var(--grey); right: -85vw; border-radius: 40px; width: 40px;height: 40px; top: -30px}
#bookingTool.aktiv {width: 100%;background-color: var(--grey);color: var(--black); right: 0px;border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; bottom: 0px}	
#bookingTool .data{background-color: var(--grey); border: 1px solid var(--grey)}
#bookingTool .data.column a {color: var(--black);}	
#bookingTool .buttons .button {border: 1px solid var(--black);}	
.fuchsundhaseimage {width: 100%}
.fuchsundhaseimage img {height: calc(100vh - 500px);}	
#spalte2 .container.bilder {height: 100%;}	
}

@media (max-width:800px) {
	#spalte1, #spalte2 .container:last-child {font-size: 13px !important}
	.hideDesktop.cactus.xxl.top10px{top: 5px !important}
	#spalte3 {display: none !important}
	#spalte3 .jcright {justify-content: center; text-align: center}
}

@media (max-width:650px) {
	#spalte1, #spalte2 .container:last-child {font-size: 13px !important}
	.logolink{height:200px;}
	.logo {width:200px; }
.fuchsundhaseimage img {height: calc(100vh - 350px); width: auto}	
#spalte2 {height: calc(100vh - 350px);}
#spalte2 .container.bilder {height: calc(100vh - 350px)}
}

@media (max-width:440px) {
	.logolink{height:150px;}
	.logo {width:150px; }	

}

@media (max-width:375px) {
.fuchsundhaseimage img {height: calc(100vh - 300px); width: auto}	
#spalte2 {height: calc(100vh - 250px);}
#spalte2 .container.bilder {height: calc(100vh - 300px)}
}


@media (max-width:550px) {
	#spalte1, #spalte2 .container:last-child {font-size: 13px !important}
	.logolink{height:150px;}
	.logo {width:150px; }
}

@media (max-width:500px) {
	#spalte1, #spalte2 .container:last-child {font-size: 12px !important}
}
@media (max-width:420px) {
	.logolink{height:100px;}
	.logo {width:100px; }
}
@media (max-width:350px) {
	#spalte1, #spalte2 .container:last-child {font-size: 12px !important}
}