/* ---------------------------------------------------------
    Fonts & Icon Font
   ---------------------------------------------------------*/
	 
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?h83epe');
	src:url('../fonts/icomoon.eot?#iefixh83epe') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?h83epe') format('truetype'),
		url('../fonts/icomoon.woff?h83epe') format('woff'),
		url('../fonts/icomoon.svg?h83epe#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

i {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-bullet-g:before {
	content: "\e601";
	color: #9eb823;
}
.icon-bullet-r:before {
	content: "\e600";
	color: #b6012e;
}
.icon-menu:before {
	content: "\e602";
}

/* ---------------------------------------------------------
   Layout
   ---------------------------------------------------------*/
	 
html {
	box-sizing: border-box;
	width: 100%;
	margin: auto;
	background-image: url(../images/hintergrund_desktop.jpg);
	background-size: 100%, contain;
	background-repeat: no-repeat;
	background-color: #f4f7ea;
	overflow-y: scroll;
}
*, *:before, *.after {
	box-sizing: inherit;
}
body {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: #464635;
}
.mobile {
	display: none;
}
main {
	width: 40%;
	margin-left: 35.75%;
	padding: 10px 20px;
	background-color: rgba(255,255,255,0.5);
	border: 3px solid #9eb823;
	border-radius: 30px;
	/*text-align: justify;*/
}
footer {
	width: 40%;
	margin-left: 35.75%;
	padding: 10px 20px;

}
img {
	max-width: 100%;
	height: auto;
}
h1 {
	margin-bottom: 0;
	line-height: 0;
}
h2, .schlagwort {
	color: #b6012e;
}
h3 {
	font-size: 1rem;
	color: #b6012e;
	font-weight: 400;
}
h3:before {
	content: "\e600 ";
	font-family: 'icomoon';
	color: #b6012e;
}
.strong {
	font-weight: 700;
}

/* ---------------------------------------------------------
   Navigation & Links
   ---------------------------------------------------------*/
	 
.wrapper_nav {
	background-color: #b6012e;
}
.menubutton {
	display: none;
}
nav {
	background-color: #b6012e;
	margin-bottom: 3rem;
	margin-left: 35.75%;
}
nav ul {
	margin: 0 0 0 -20px;	
	padding: 0;
	font-size: 1.2rem;
	font-weight: 400;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	display: block;
	text-decoration: none;
	padding: 10px 20px;
	border-left: 1px solid #b6012e;
	border-right: 1px solid #b6012e;
	background-color: #b6012e;
	transition: all 0.8s ease;
}
nav ul li a:hover {
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.5);
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	transition: all 0.8s ease;
	transform: translate(10px,10px)
}
.zielseite {
	/*display: block;*/
	text-decoration: none;
	padding: 10px 20px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	color: #ffffff;
	background-color: #b6012e;
	position: relative;
	top: 10px;
	left: 10px;
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.5);
}
a.link {
	color: #464635;
}
a.link:hover {
	color: #b6012e;
}
/*Klickbare Telnr. in Mobile-Version*/
a[href^="tel"] { 
  text-decoration: none; 
  cursor: text; 
  color: #464635;
}

/* ---------------------------------------------------------
   Responsive styles
   ---------------------------------------------------------*/
	 
@media screen and (max-width: 852px) {
	
/* ---------------------------------------------------------
   Layout Mobile
   ---------------------------------------------------------*/
	 
html { 
	background-image: none;		
}
.desktop {
	display: none;
}
.mobile {
	display: block;
}
main, footer {
	margin: auto;
	width: 80%;
}

/* ---------------------------------------------------------
   Navigation & Links Mobile
   ---------------------------------------------------------*/
	 
.wrapper_nav {
	background-color: #b6012e;
}
nav {
	background-color: transparent;
	/*margin-bottom: 3rem;*/
	margin-left: 0;
	overflow: hidden;
	max-height: 0;			
}
nav ul {
	margin: 0;	
	/*padding: 0;*/
	font-size: 1.4rem;
	/*font-weight: 400;*/
}
nav ul li {
	display: block;
	text-align: center;
}
nav ul li a {
	display: block;
	/*text-decoration: none;*/
	/*padding: 10px 20px;*/
	border-left: none;
	border-right: none;
	background-color: transparent;
	/*transition: all 0.8s ease;*/
}
nav ul li a:hover {
	box-shadow: none;
	border-left: none;
	border-right: none;
	/*transition: all 0.8s ease;*/
	transform: none;
}
.zielseite {
	/*text-decoration: none;*/
	/*padding: 10px 20px;*/
	border-left: none;
	border-right: none;
	/*color: #ffffff;*/
	/*background-color: #b6012e;*/
	position: static;
	/*top: 10px;
	left: 10px;*/
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.5);
}
.menubutton {
	display: block;
	text-align: right;
}
.menubutton a {
	display: block;
	text-decoration: none;
	padding: 0.5rem;
	font-size: 1.5rem;
}
.menubutton a.hidemenu {
	display: none;
}
#menu:target nav {
	max-height: 25em;
}
#menu:target a.showmenu {
	display: none;
}
#menu:target a.hidemenu {
	display: block;
}
a[href^="tel"] {
	font-size: 0.9rem;
	text-decoration: underline; 
	cursor: pointer; 
	color: #464635;
}

/* ---------------------------------------------------------
  Schliessende Klammer Media Query
   ---------------------------------------------------------*/
}

/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
* {
	color:#000 !important;
	box-shadow:none !important;
	text-shadow:none !important;
	background:transparent !important;
}
html {
	background-color: #fff;
}
/* Hide navigation */
nav { 
	display:none; 
}

/* Show link destinations in brackets after the link text */
a[href]:after { 
	content: " (" attr(href) ") "; 
}
a[href] {
	font-weight:bold;
	text-decoration:underline;
	color:#06c;
	border:none;
}
/* Don't show link destinations for JavaScript or internal links */ 
a[href^="javascript:"]:after, 
a[href^="#"]:after { 
	content:""; 
}

/* Show abbr title value in brackets after the text */
abbr[title]:after { 
	content: " (" attr(title) ")"; 
}

figure { 
	margin-bottom:1em; 
	overflow:hidden;
}

figure img { 
	border:1px solid #000; 
}
} /*<- Schliessende Media Query-Klammer*/