@font-face {
  font-family: DSWalbaumfraktur;
  src: url("../fonts/DSWalbaumfraktur.ttf");
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-slab.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* {
    border: medium none;
    margin: 0;
    outline: medium none;
    padding: 0;
}


html {
	--scrollbarBG: #eee;
	--thumbBG: #006600;
	scroll-behavior: smooth;	
}

body {
    background: #D0D0D0;
	width:100%;
	margin:0 auto;
	display: flex;
justify-content: center;
align-items: center;
font-family:'Roboto Slab';
font-size:24px;
}





	#content
	{
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
	box-shadow: none !important;
	border: none !important;

	}











@media (max-width: 800px)
{  
body {font-size:17px;}
}


a {color:#005500; transition: all 1s; font-weight: bold;}
a:hover {color:#f6df70; background:#006600; transition: all 1s; text-decoration:none;}


.slidebutton {
	background: rgba(0,106,0,0.7);
	font-size:20px;
	border:2px solid white;
	border-radius: 4px;
	text-decoration:none;
	text-shadow:none;
	padding:10px;
   text-align: center;
   font-size: 22px;
   transition: all 0.7s;
   cursor: pointer;
   margin: 5px;
   color:#fff;
 }
 
 .slidebutton:hover {
	background: #fff;
	border-color: #ffff00;
	color: #ff0000;
 }
 
 .slidebutton span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.6s;
 }
 .slidebutton span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }
 .slidebutton:hover span {
   padding-right: 25px;

 }
 .slidebutton:hover span:after {
   opacity: 1;
   right: 0;
 }



#content img {border-radius:20px;}


.weartikelbox {
	position:relative;
    display: inline-block;
    height: 420px;
    width: 300px;
    margin: 5px;
	padding-bottom: 10px;
    vertical-align: top;

	background: #fff;
		border: 1px solid #006600; 
	border-bottom: 5px solid #006600; 
	font-size:24px;
	overflow:hidden;
	box-sizing: border-box;
	border-radius: 20px 20px 0px 0px;
	transition:1s all;
}


.weartikelbox a {
	text-decoration:none;

	}
	.weartikelbox a :hover{
	transition:all 1s;

	}
.weartikelbox p {
    margin: 15px 0;
	padding: 5px 10px;
	color:#006600;
	text-align:center;
}


.weartikelbox img {
	display:block;
    margin: 0 auto;
	position:absolute;
	width:300px;
	height:200px;
	bottom:0px;
	margin-left:-10px;
	border-radius:20px 20px 0px 0px !important;
}


.weartikelbox:hover{
	scale:1.1;
	transition:1s all;
}






li {margin-left:30px;}

#kasten {
display:block;
position:absolute;
background:#006600;
width:90%;
max-width:1600px;
top:20px;
bottom:20px;
border-radius: 10px;
}


#kastenbild {

	background:url('hopfen.jpg') no-repeat;
	background-size:cover;
  opacity: 0.5;
  width:300px;
  height:100%;
  border-radius:12px;
  bottom: 0px;
  left: 0;
  position: absolute;
  z-index: 1;   
}
#kastenbildo {
	background-image: linear-gradient(to right, rgba(0,102,0,0) 30%, rgba(0,102,0,1) 100%);
	width:30px;
	height:100%;
	top: 0;
	left: 270px;
	position: absolute;
	z-index: 2;
}

#navi {
position: absolute;
top:20px;
left:10px;
right:10px;

width:280px;
font-family: DSWalbaumfraktur;
font-size:40px;
text-align:center;
z-index:6;
transition:all 1.3s;
}

#navi a{text-decoration:none; color:#f6df70; display:block; font-weight:normal;
transition:all 1.5s;
				text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
				 }
#navi a:hover{color:#fff; transition:all 1.5s; background:transparent;}
#navi li{list-style:none;}
#menuselect {color:#fff; 				text-shadow:  2px  2px 2px #000,
                  2px -2px 2px #000,
                 -2px  2px 2px #000,
                 -2px -2px 2px #000;}

#inhalt {
z-index:1;
position:absolute;
top:50px;
left:300px;
right:5px;
bottom:5px;
background:#fff;
border-radius: 45px 45px 45px 45px;
overflow:auto;
padding:15px;
	background:url('rechenbergerhg.jpg') repeat;
	background-size:auto;
	background-attachment: fixed;
	background-position:right top;
	

  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}


#content {
z-index: 6;
width:100%;
margin:10px;
line-height:1.5;
}



#hgbild {

	background:url('brauereibild.jpg') no-repeat;
	background-size:cover;
	opacity: 0.3;
	background-attachment: fixed;
	background-position:center bottom;
  width:100%;
  height:100%;
  border-radius:12px;
  bottom: 0px;
  left: 0;
  position: absolute;
  z-index: -1;
}

#hgbildlogo {

	background:url('rechenbergerhg.jpg') repeat;
	background-size:contain;
	opacity: 0.3;
	background-attachment: fixed;
	background-position:center top;
  width:100%;
  height:100%;
  border-radius:12px;
  bottom: 0px;
  left: 0;
  position: fixed;

}


.logo {display:block; width:270px; margin:0 auto; margin-bottom:20px;}

h1,h2 {font-family:'DSWalbaumfraktur'; color:#005500;}

#kontakt {position:relative; width:100%; padding:0;}

#show {position:fixed; color:#f6df70; right:10px; top:10px;}
#showover {transition:all 1s; color:#f6df70; position:fixed; right:10px; top:10px; opacity: 0;}
#showover:hover {transition:all 1s; opacity: 1; background:#f6df70;color:#fff;}


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');
}


.material-mobile {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;

  color:#006600;

}

.material-navunten {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
  color:#f6df70;
  display:inline-block;

}

.navunten {display:table; margin:0 auto;}
.navunten a{display: table-cell !important; vertical-align: middle; }
.navuntenlink {cursor:pointer;  display: table-cell; vertical-align: middle; }

.flipcard {
  position: relative;
  width: 300px;
  height: 500px;
  perspective: 500px;
  display: inline-block;
  margin: 5px;
  vertical-align: top;

}


.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front, .flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.9s ease-in;

  backface-visibility: hidden;
}

.flipcard .front img, .flipcard .back img
{
max-width: 100% !important;
}



.tooltip {
  position: relative;
  cursor:pointer;
	width:60px;
	margin:0 auto;
  display: display: table-cell; vertical-align: middle;
}

.tooltip:hover {}

.tooltip .tooltiptext {
  visibility: hidden;
  	  transition-delay:2s;

  color: yellow;
  background:#006600;
font-family: 'Roboto Slab'; font-size:20px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 50%;
}

.tooltip:hover .tooltiptext {
transition-delay:0s;
  visibility: visible;
}





#datenschutz, #impressum{

	overflow:auto;
	background: #006600;
	color:#fff;
	border-radius:10px;
	border: 2px solid #ffff00;
	position:fixed;
	top:-1200px;
	padding:10px;
left:50%;
right:50%;
width:50%;
margin-left:-25%;
height:75%;
z-index:100000006;
transition: all 1.5s;
}

#datenschutz a, #impressum a { color:#ffff00;
	
}
	






#schliessen{
		position:absolute;
		right:5px;
		top:0px;;
		z-index:100007;
		cursor:pointer;
		font-size:40px;
		
}
#schliessen a{ color:#ffff00;}
#schliessen a:hover{ color:#fff;}

@media (max-width: 1000px)
{
#datenschutz, #impressum{width:75%;margin-left:-37.5%;}
}


@media (max-width: 500px)
{  
#datenschutz, #impressum{
width:90%;
margin-left:-50%;
}
}

#finster{
	position:fixed;
	left:0px; top:0px;
	right:0px; bottom:0px;
	z-index:100005;
	background:rgba(200, 200, 200, 0.85);
	visibility:hidden;
}

@media print{


	#kastenbild{display: none;}
	#kastenbildo{display: none;}
	#navi{display: none;}
	#navunten{display: none;}
	#mobilenavi{display: none;}
	.menu{display: none;}
	#inhalt {
		position:relative;
		left:0;
		top:0;
		right: 0;
		left: 0;
		border-radius: 0px;
	}
	#content {height:auto !important; font-size:18px;}
}