*:focus {
    outline: none;
}
html, body {
	background: linear-gradient(top, #CED5B8 180px, #D7DEC2 180px, #D7DEC2 100%);
	background: -moz-linear-gradient(top, #CED5B8 180px, #D7DEC2 180px, #D7DEC2 100%);
	background: -webkit-linear-gradient(top, #CED5B8 180px, #D7DEC2 180px, #D7DEC2 100%);
	background: -ms-linear-gradient(top, #CED5B8 180px, #D7DEC2 180px, #D7DEC2 100%);
	background: -o-linear-gradient(top, #CED5B8 180px, #D7DEC2 180px, #D7DEC2 100%);

	width:100%;
	height:100%;
	position:relative;
	padding:0;
	margin:0;
	font-family:"Lora", serif;
	overflow:auto;
	transition: color 250ms ease;
}
a, a:active, a:link {
	transition: color 250ms ease;
	color:#74232A;
	text-shadow:none;
	text-decoration:none;
}
a:hover, a:focus {
	text-shadow:none;
	color:#000000;
	transition: color 250ms ease;
}
a:hover:before{
	text-shadow:none;
}


h1, h2, h3, h4 {
	color:#74232A;
	text-transform: uppercase;
	font-weight:normal;
	margin-top:40px !important;
	margin-bottom:5px !important;
	
	padding-bottom:0px !important;
}
h3, h4 {
	text-transform: none;
}
h1 {
	font-size:160%;
}
h2 {
	padding-left:30px;
	background:url(img/icon_hand.svg) 1px 5px no-repeat;
	background-size:20px;
}
li{
   list-style: none;
   margin:6px;
}
li:before{
   content: '';
   display: inline-block;
   position:relative;
   height: 15px;
   width: 15px;
   left:-10px;
   top:2px;
   background-image: url(img/icon_hand.svg);
   background-size:100%;
}
#HOMEPAGE {
	position:absolute;
	display:block;
	width:840px;
	left:calc(50% - (840px / 2));
	height:100%;
	top:0px;
	
}



#LOGO {
	display:block;
	position:absolute;
	background:url(img/logo_neu.svg) no-repeat;
	background-size:100%;
	top:37px;
	left:-50px;
	height:148px;
	width:297px;
	z-index:20;
		transition:height 500ms ease,width 500ms ease,left 500ms ease,top 500ms ease,background-siz 500ms ease;
}
#menuKONTAKT {
	position:relative;
	display:none;
}
#KONTAKT {
	display:block;
	position:absolute;
	background:url(img/icon_telefon.svg) 20px 15px no-repeat;
	top:55px;
	left:690px;
	height:50px;
	width:150px;
	z-index:20;
	font-size:80%;
	text-align:right;
	color:#74232A;
}



#MENULEISTE {
	top:136px;
	height:40px;
}
#MENULEISTE {
	position:absolute;
	display:block;
	left:-10px;
	width:860px;
	background:#74232A;
	overflow:display;
	box-shadow:1px 1px 5px rgba(0,0,0,.8);
	padding-top:0px;
	text-align:right;
	z-index:10;
}
#MENULEISTE ul {
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	height:40px;
	transition:height 250ms ease,left 250ms ease,top 250ms ease;
}
#MENULEISTE ul li {
	display:inline-block;
	position:relative;
	width:auto;
	color:#FFFFFF !important;
	padding:0px ;
	margin:0px;
	height:40px;
	top:0px;
	font-size:96%;
	text-transform: uppercase;
	transition:height 250ms ease,background-color 250ms ease,box-shadow 250ms ease;
}
#MENULEISTE ul li:before {
	display:none;
}
#MENULEISTE ul li:last-child {
	margin-right:10px;
}
#MENULEISTE ul li:hover, #MENULEISTE ul li.selected {
	background: linear-gradient(top, rgba(255,255,255,.92) 43px, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,.92) 43px, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,.92) 43px, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,.92) 43px, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,.92) 43px, rgba(255,255,255,0) 100%);
}
#MENULEISTE ul li:hover, #MENULEISTE ul li.selected {
	color:black  !important;
	box-shadow:0px -2px 0px -1px #FFFFFF,4px -2px 4px -3px rgba(0,0,0,.8),-4px -2px 4px -3px rgba(0,0,0,.5),0px -4px 5px -2px rgba(0,0,0,.9);
	height:50px;
	top:0px;
	transition:background-color 250ms ease,box-shadow 250ms ease;
}
#MENULEISTE ul li.selected {
	background: linear-gradient(top, #FFFFFF 43px, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(top, #FFFFFF 43px, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top, #FFFFFF 43px, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, #FFFFFF 43px, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, #FFFFFF 43px, rgba(255,255,255,0) 100%);
	height:50px;
	box-shadow:0px -2px 0px -1px #FFFFFF,0px -4px 0px -2px #FFFFFF,4px -2px 4px -3px rgba(0,0,0,.8),-4px -2px 4px -3px rgba(0,0,0,.5),0px -5px 6px -2px rgba(0,0,0,.9);
}
#MENULEISTE ul li a {
	padding:10px 6px;
	display:block;
	color:#FFFFFF;
	height:30px;
	text-shadow:none;
	transition:color 250ms ease,text-shadow 250ms ease,box-shadow 250ms ease;
}
#MENULEISTE ul li a:hover, #MENULEISTE ul li.selected a {
	color:#000000;
	text-shadow:none;
	transition:color 250ms ease,text-shadow 250ms ease;
}
#MENULEISTE ul li a:before {
	display:none;;
	
}


#MENULEISTE ul li.imprlink a {
	padding-top:-10px !important;
}


#MENULEISTE ul li.imprlink a:after {
	content:'& Datenschutz';
	font-size:70%;
	display:block;
	position:absolute;
	top:26px;
	left:6px;
}
	#MENULEISTE ul li.multi {
		position:relative;
		
	}
	
	
	#MENULEISTE ul li.multi div {
		height:0px;
		width:100%;
		top:40px;
		left:0px;
		background:#FFFFFF;
		overflow:hidden;
		display:block;
		opacity:0;
		position:absolute;
		transition:opacity 250ms ease,height 250ms ease,top 250ms ease;
	}
	#MENULEISTE ul li.multi:hover div, #MENULEISTE ul li.multi:active div {
		height:160px;
		box-shadow:none;
		background:rgba(255,255,255,.9);
		border-radius:0px 0px 6px 6px ;
		box-shadow:5px 2px 10px -4px rgba(0,0,0,.8),-5px 2px 10px -4px rgba(0,0,0,.8);
		overflow:hidden;
		opacity:1;
		transition:opacity 250ms ease,height 250ms ease,top 250ms ease;
	}
	#MENULEISTE ul li.multi:hover a {
		color:#000000;
	}
	#MENULEISTE ul li.multi div a {
		color:#FFFFFF;
		display:block;
		text-align:left;
		font-size:12px;
		padding:5px;
		height:0px;
		transition:color 250ms ease,background 250ms ease,height 250ms ease;
	}
	#MENULEISTE ul li.multi:hover div a {
		color:#000000;
		height:30px;
		transition:color 250ms ease,background 250ms ease,height 250ms ease;
		vertical-align:middle;
	}
	#MENULEISTE ul li.multi div a:hover {
		background:rgba(0,0,0,.17);
		transition:background 250ms ease;
	}







#MENULEISTE:before {
	display:block;
	position:absolute;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #5B1015 transparent transparent;
    position: absolute;
	transform: rotate(135deg);
    left: 4px;
	top:35px;
	content:"";
	z-index:0;
}
#MENULEISTE:after {
	display:block;
	position:absolute;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #5B1015 transparent transparent;
    position: absolute;
	transform: rotate(45deg);
    left: calc(100% - 10px);
	top:35px;
	content:"";
	z-index:0;
}

#CONTENT {
	display:block;
	position:absolute;
	top:170px;
	padding-bottom:20px;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	left:0px;
	height:auto;
	background:#FFFFFF;
	border-radius:0px 0px 5px 5px;
	box-shadow:1px 3px 10px black;
	z-index:5;
	width:800px;
	margin-bottom:20px;
}

#CONTENT:after {
	position:absolute;
	display:block;
	top:calc(100% + 5px);
	left:20px;
	background:none;
	color:black;
	font-size:70%;
	content:"© 2017, Jessica Puchta";
}

.card-maps {
	border:2px solid white;
	box-shadow:2px 2px 6px rgba(0,0,0,.7);
	border-radius:5px;
	width:800px;
	height:300px;
}
.CONTENT {
	position:absolute;
	display:block;
	width:800px;
	left:260px;
	top:230px;
	height:calc(100% - 250px);
	overflow:auto;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	z-index:0;
	transition: width 150ms ease,left 150ms ease, top 400ms ease, padding-top 400ms ease;
}
.menu-icon {
	position:relative;
	display:block;
	left:-30px;
	color:#FFFFFF;
	text-shadow:black 2px 2px 4px;
	font-size:180%;
	cursor:pointer;
	margin:0px;
}
.show-mobile-menu, .hide-mobile-menu, #TOP img.logo-kurz {
	position:absolute;
	display:none;
	left:15px;
	top:15px;
	cursor:pointer;
}
#TOP img.logo-kurz {
	width:28px;
	top:17px;
	left:10px;
	display:block;
}
.show-on-mobile, .hidden, #mobile-menu-hide, #mobile-menu-show {
	display:none;
}
.rechts {
  float:right;
  display:block;
  margin-left:20px !important;
  max-width:100%;
}
.links {
  float:left;
  display:block;
  margin-right:10px;
  max-width:100%;
}
.clear {
  clear:both;
}
.card {
  box-shadow:gray 1px 1px 3px;
  background:#FFFFFF;
  border-radius:2px;
  transition: box-shadow 400ms ease;
  padding:10px;
  margin:10px;
  display:inline-block;
  width:auto;
}

.card-hover:hover {
  box-shadow:black 1px 1px 8px;
  transition: box-shadow 400ms ease;
}
.menu-card {
	position:relative;
	display:block;
	width:180px;
	left:70px;
	font-size:80%;
	margin-top:20px;
}
.menu-card a {
	padding:0px !important;
	margin:0px !important;
	font-size:100% !important;
}
.menu-card a:hover {
	background:none !important;
}
.menu-card a::before {
	display:none !important;
}
.zentriert {
	text-align:center !important;
}



.block {
  text-align:justify;
}
.display-block {
  display:block;
}
.display-none {
  display:none;
}
.nochversteckt {
		width:100%;
		height:0px;
		margin-bottom:20px;
	}
.nichtversteckt {
		width:100%;
		height:auto;
		margin-bottom:20px;
	}
.no-link:before {
  display:none;
}
.no-link, .no-link:before {
  overflow:hidden;
  height:0px;
  width:0px;
  padding:0;
}
.overhidden {
	overflow:hidden;
}
.width-prozent-100 {
	width:100%;
}
.width-prozent-50 {
	width:50%;
}
.width-prozent-45 {
	width:45%;
}
.width-prozent-40, .width-40-prozent {
	width:40%;
}
.width-prozent-30 {
	width:30%;
}
.width-prozent-25 {
	width:25%;
}
.width-drittel {
	width:calc(100% / 3);
}



@media screen and (max-width: 880px) {
	#HOMEPAGE {
		width:calc(100% - 20px);
		left:10px;
		transition:height 250ms ease,height 250ms ease,width 250ms ease,left 250ms ease,top 250ms ease;
	}
	#CONTENT {
		padding-right:8px;
		padding-left:8px;
		width:calc(100% - 16px);
		top:40px;
		position:relative;
		transition:height 250ms ease,width 250ms ease,left 250ms ease,top 250ms ease;
	}
	#CONTENT:after {
		left:0px;
		width:100%;
		text-align:center;
	}
	#HOMEPAGE:after {
		position:fixed;
		z-index:5;
		left:0px;
		width:100%;
		height:40px;
		top:0px;
		text-align:center;
		background:#CED5B8;
		content:"";
	}
	#LOGO {
		position:fixed;
		top:16px;
		left:calc(50% - (74px / 2));
		height:30px;
		width:74px;
		background-image:url(img/Logo_Puchta_weiss.svg);
		transition:height 500ms ease,width 500ms ease,left 500ms ease,top 500ms ease,background-siz 500ms ease;
		background-size:74px 30px;
	}
	#KONTAKT, #MENULEISTE:after, #MENULEISTE:before {
		display:none;
	}
	#MENULEISTE #menuKONTAKT {
		font-size:80%;
		opacity:0;
		position:relative;
		height:auto;
		left:0px;
		width:auto;
		top:calc(100% - 300px);
		text-align:center;
	}
	
	#MENULEISTE {
		width:100% ;
		left:0px;
		top:10px;
		position:fixed;
		overflow:hidden;
		transition:height 250ms ease,width 250ms ease,left 250ms ease;
	}
	.offen {
		top:10px;
		height:500px;
		transition:height 250ms ease,top 250ms ease;
	}
	#MENULEISTE ul {
		left:00px;
		text-align:left;
		width:auto;
		top:50px;
		display:block;
		position:relative;
	transition:height 250ms ease,left 250ms ease,top 250ms ease;
	}
	#MENULEISTE ul li {
		display:block;
		height:auto;
		overflow:display;
		width:100%;
		text-align:center;
		position:relative;
	}
	#MENULEISTE ul li:hover, #MENULEISTE ul li.selected {
		height:auto;
		background:#FFFFFF;
		box-shadow:0px 0px 4px rgba(0,0,0,.8);
		overflow:display;
		position:relative;
	}
	#MENULEISTE ul li.multi div {
	height:0px;
		background:rgba(255,255,255,.9);
		border-radius:0px 0px 6px 6px ;
		overflow:show;
		opacity:0;
		display:block;
		position:relative;
		top:0px;
		left:0px;
	
	}
	#MENULEISTE ul li.multi:active div, #MENULEISTE ul li.multi.selected div {
		height:160px;	
		opacity:1;
	}
	#MENULEISTE ul li.multi:active div a, #MENULEISTE ul li.multi.selected div a {
		color:black;
		display:block;
		text-align:left;
		font-size:12px;
		padding:5px;
		height:0px;
		height:30px;
		transition:color 250ms ease,background 250ms ease,height 250ms ease;
	}
	
	
	
	
	
	
	
	
	
	
	

/* Icon 3 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 25px;
  height: 25px;
  top:12px;
  left:20px;
  position: relative;
  display:block;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 7px;
}

#nav-icon3 span:nth-child(4) {
  top: 14px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}






	
}














#cookiedingsbums a {text-decoration:none;padding:3px;color:rgba(255,255,255,1);}
#cookiedingsbums a:hover {color:rgba(255,255,255,.6);}
#cookiedingsbums #cookieinhalt {
padding:10px;
padding-top:5px; 
padding-right:40px; 
background:#5B1015;
color:#FFFFFF;
padding-bottom:25px;
border-radius:0px 15px 0px 0px/0px 20px 0px 0px;
box-shadow:0px 0px 10px rgba(0,0,0,.9);
transition:background 250ms ease,box-shadow 250ms ease;
}
#cookiedingsbums:hover #cookieinhalt {
transition:background 250ms ease,box-shadow 250ms ease;
box-shadow:0px 0px 20px rgba(0,0,0,.9);
}

#cookiedingsbums {
text-align:center;
position:fixed;
bottom:0px;
z-index:10000;
max-width:100%; 
font-size:12px; 
line-height:28px;
color:#FFFFFF;
}

#cookiedingsbumsCloser {
color: #000000;
position: absolute;
right: 5px;
text-decoration: none;
bottom:5px;
cursor:pointer;
padding:1px 8px 1px 8px;
box-shadow:0px 0px 5px #000000;
background:rgba(255,255,255,.8);border-radius:3px;
transition:background 250ms ease,box-shadow 250ms ease;
}

#cookiedingsbumsCloser:hover {
 position: absolute;
 box-shadow:0px 0px 10px #000000;
 background:rgba(255,255,255,.95);transition:background 250ms ease,box-shadow 250ms ease;
}


@media screen and (max-width: 880px) {
	#cookiedingsbums #cookieinhalt {
		padding-bottom:45px;
		border-radius:0px;
		box-shadow:0px 0px 20px rgba(0,0,0,.9);
	}



}