/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

* {
margin:0;
padding: 0;
}
html{
	height:100%;
	}

body {
margin: 0;	
font-size: 16px;
font-family: 'Lato', sans-serif;
color: #111111;
height: 100%;
background-color: #fbfafa;
}
h1{color:#93ab2f;font-size: 2.4rem;margin-bottom: .5rem;}
h2{font-size: 1.8rem;}
	h3 {
	font-size: 1.6rem;
	color: #93ab2f;
	padding: 1rem 0;		
			}	
	h4 {
	font-size: 1.1rem;
	margin: 0;
	padding: 8px 0 0 0;
	color: #8dc63f;		
			}	
.hg_grau{background-color: #fff; border-radius: .3rem; box-shadow: 3px 0 5px 5px #f0f0f0; padding: 1rem;}
#root { max-width: 1100px; 
		width: 100%;
		position: relative; 
		z-index: 101;  
		margin: 0 auto; 
		top: 0px; 
		box-shadow: 0px 0px 30px #aaaaaa;
		background-color: #ffffff;
		overflow:auto;
		}
		img{max-width: 100%;height: auto;}
.inhalt{padding:0 2rem 2rem;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3.9em;
}
.footer, .push {
height: 0.001em;
clear: both;
}
.footer {
	width: 100%;
	height: auto;
	overflow:auto;
	}
#header {
	top: 0px;
	width: 100%;
	}
#navi {
	position: relative;
	z-index: 220;
	margin: 0 auto;	
	max-width: 1100px;
	height: 130px;
	}
.footer {
	background-image:url(mat/start/bogen-unten.jpg);
	background-repeat:no-repeat;
	background-position: top center;
	background-color: #ededed;
	}
	.footer .inhalt{
padding:4rem 2rem 0;
	}
	.fussmenu {
	line-height: 1.65;
	margin-bottom: 1.75rem;
	}
	.fussmenu span{display: block;margin-bottom:.5rem;}
/* ##########################  SCHRIFT ######################## */			
	.fliesstext {
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color: #444;
	margin: 0;
	padding: 0 10px 25px 2px;
		}	

a:link { color: #111; text-decoration: none; }			
a:active { color: #111; text-decoration: none; }
a:visited { color: #111; text-decoration: none; }
		
a.hover,
a:hover {
 color:#93ab2f;
 text-decoration:none;
}		

.fett {
color:#93ab2f;
 text-decoration:none;
 font-weight:bold;
	}
.rot{color: #df091d; font-size: 1rem; font-weight: bold;}
h3 a:link { color: #111; text-decoration: none; }			
h3 a:active { color: #111; text-decoration: none; }
h3 a:visited { color: #111; text-decoration: none; }
		
h3 a.hover,
h3 a:hover {
 color:#8dc63f;
 text-decoration:none;
 font-weight:bold;
}		
.weiter {
	background-color: #93ab2f;
	color: #fff;
	padding: 3px 25px 5px;
	display: inline-block;
  margin-top: 1rem;
	}


ul{
	margin: 0;
	padding-left: 15px;
	padding-top: 20px;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	}

ul li {
	padding-bottom: 5px;
	}
	ul.aufzaehl {
	margin-top: 0;
	margin-left: -5px;
	width: 95%;
	list-style: none;
	}
	ul.aufzaehl li { 
	padding: 5px 0 5px 0;
	width: 95%;
	
	list-style-image: url(mat/start/punkt.png);
	}
/* ############################  subnavi ################# */
			#unternavi {
			position: absolute;
			float: left;
			
			margin-top: 15px;
			width: 97%;
			z-index:180;
		
				}
			
			#unternavi > a
			{
				display: none;
				z-index:180;
			}

			#unternavi li
			{
				position: relative;
				z-index:180;
			}
				#unternavi li a
				{
					color: #222222;
					display: block;
					
				}
				#unternavi li a:active
				{
					
				}
				
				#unternavi li a:hover
				{
					color: #8dc63f; !important;
				}

			#unternavi span:after
			{
				width: 0;
				height: 0;
				
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#unternavi > ul
			{
				
				list-style: none;
				position:relative;
				z-index: 201;
				margin-left: 4.85%;
				padding-left: 0;
			}
				#unternavi > ul > li
				{
					float: left;
					padding: 3px 3px 3px 3px;
					margin-right: 5px;
					font-size: 1 em; /* 24 */
					line-height: 1.2em; /* 60 (24) */
					color: #222222;
					
				}
					#unternavi > ul > li > a
					{
						height: 100%;
						
						text-align: center;
						
					}
						
						#unternavi > ul > li:hover > a, #unternavi > ul > li:hover,
						#unternavi > ul:not( :hover ) > li.active > a
						{
							color: #93ab2f;
							
						}

/* ############################  navi ################# */

#nav > a
			{
				display: none;
				z-index:201;
			}

			#nav li
			{
				position: relative;
				z-index:201;
			}
				#nav li a
				{
					color: #111;
					display: block;
background:transparent url('mat/start/punkt.png') no-repeat right center;
padding-right: 20px;
				}
#nav li:last-child a{background:none;}

				#nav li a:active
				{
					color: #8dc63f; !important;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				
				list-style: none;
				position:relative;
				z-index: 201;
				margin-left: 3%;
				height: auto;
			}
				#nav > ul > li
				{
					float: left;
					padding: 3px 6px 3px 6px;
					margin-right: 5px;
					font-size: 1.2em; /* 24 */
					line-height: 1.4em; /* 60 (24) */
					color: #111;
				}
					#nav > ul > li > a
					{
						height: 100%;
					}
						#nav > ul > li:hover > a, #nav > ul > li:hover,
						#nav > ul:not( :hover ) > li.active > a
						{
							color: #93ab2f;
						}

		@media only screen and ( max-width: 75em ) /* 1000 */
		{
			#nav
			{
				width: auto;
				position: static;
				margin: 0;
				z-index:201;
			}
		}

		@media only screen and ( max-width: 67.75em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}

			#nav
			{
				position: relative;
				z-index:201;
				top: auto;
				left: auto;
				
			}
				#nav > a
				{border-radius: .3rem;
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #93ab2f;
					position: relative;
					float: right;
					margin: .5rem;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				border-radius: .3rem;;
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
				list-style: none;
				background-color: #93ab2f;
				
				max-width: 320px;
    			margin-top: 5rem;
			}
				#nav:target > ul
				{
					display: block;
					
				}
				#nav:target > ul > a
				{
					color:#fff;
					
				}
				#nav > ul > li
				{
					width: auto;
					float: none;
				}
					#nav > ul > li > a
					{
						height: auto;
						width: auto;
						text-align: left;
						padding: 0.5em 0 0.5em 0; /* 20 (24) */
					}


		#nav > ul > li:hover > a, #nav > ul > li:hover,
						#nav > ul:not( :hover ) > li.active > a
						{
							color: #fff;
						}


		}
		
		.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

table {
	border: 0;
	border-collapse:collapse;	
	margin-left: 0px;
	width: 90%;
	}
	
	td { padding: 5px 0 5px 0; }

.text_field {
	width: 90%;
	font-size: 1em;
	line-height: 1.3em;
	margin: 0px 0 10px 0;
	}
	
.textarea {
	width: 90%;
	}	
		
#kde-widget span.kde-no-wrap {
  white-space: wrap !important;
}


#header {position:relative;}
#headerimg-div {position: relative}
#online-shop-button {position:absolute;top:45%;right:3.59%;width:24.72727272727272%;border:none;}
.logo_ueber_kopfbild{position: absolute;top:-3px;right:3.59%;}

            .filiale-galerie {
                
            }
            .filiale-galerie div {float:left;width:32.3%;margin-right:1%;}
            .filiale-galerie div:last-child {margin-right:0;}
            .filiale-galerie div img {width:100%;height:auto;}

#heidenheim-badge {width:200px;height:110px;display:block;margin:20px 0px;}

/*  ############################  Media Fallbacks  ######################   */

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {


	.innerbox01 {width: 28%;}
	.innerbox02 {width: 28%;}
	.innerbox03 {width: 60%;}
	.innerbox07 {width: 80%; float: left;}
	.innerbox08 { background-image:none;}
	.innerbox09 { width: 60%; }
	
}

/* Tablet Portrait (768px) */
@media only screen and (max-width: 980px) {
.logo_ueber_kopfbild img{width: 210px;}
}
/* Phone Landscape (480px) */

@media only screen and (max-width: 768px) {
.kopfbild{height: 250px; width:100%; object-fit: cover;}
.logo_ueber_kopfbild img{width: 200px;}
#online-shop-button {top: 30%;width: 200px;}	
}
@media only screen and (max-width: 570px) {
h1{font-size: 2em;hyphens:auto;}
h2{font-size: 1.6em;}
h3{font-size: 1.4em;}	
}
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 1025px) and (max-width: 3000px) and (orientation: landscape) {
#navi {max-width: 1100px;}	
}