/* =====     Schrift     ======================================================================= */
@font-face{
	font-family: 'Lora';
	src: 	url('./schrift/Lora-Bold-webfont.eot');
	src:	url('./schrift/Lora-Bold-webfont.eot?iefix') format('eot'),
			url('./schrift/Lora-Bold-webfont.woff') format('woff'),
			url('./schrift/Lora-Bold-webfont.ttf') format('truetype'),
			url('./schrift/Lora-Bold-webfont.svg#webfont') format('svg');
}

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,div,a {	
	font: normal 100.01%/1.5em 'verdana', sans-serif;
	letter-spacing: 0;text-decoration: none;
	word-wrap: break-word;
	margin: 0;
	}

h1,h2,h3,h4,h5 {font-weight: bold;}
h1,h2 {text-shadow: white 1px 1px 1px, rgba(0, 0, 0, 0.375) 2px 2px 1px;}
p,h1,h2,h3,h4,h5 {margin-bottom: 10px;}
h1,h2 {margin-top: 15px;}
p,h1,h2,h3,h4,h6 {color: #080;}
h5 {color: fuchsia;}
h1,h2,h3 {font-family: 'Lora', serif;	letter-spacing: .05em;}

p {font-size: .875em;}
h1 {font-size: 1.6em;}
h2 {font-size: 1.2em;}
h3,h4,h5 {font-size: 1.05em;}
h6 {font-size: .7em;}

span.sf {color: fuchsia;}
span.sfs {color: fuchsia;	text-shadow: white 1px 1px 1px, rgba(0, 0, 0, 0.375) 2px 2px 1px;}
span.sfn {color: fuchsia;	font-weight: normal;}
span.sfb {color: fuchsia;	font-weight: bold;}
span.sb {font-weight: bold;}
span.serif {font-family: 'Lora', 'Georgia', serif;}
span.sans {font-family: 'verdana', sans-serif;}

/* =====     Schatten / Rund     =================================================================== */
header, nav, main, footer, #shops {border-radius: 10px;box-sha-dow: 5px 5px 5px #222;}
/* =====     Hintergrund     =================================================================== */
html {background: url(./bilder/hintergrund.jpg) no-repeat fixed top left;}
head-er {background: url(./bilder/logo.png);}
nav, main, footer, #shops, #facebook, #facebook-k {background: white;}

/* =====     Bereiche     ====================================================================== */
html {height: 100%;}

body {
	/*width: 760px;*/
	width: 100%;
	margin: 25px auto 0;
	padding-bottom: 25px;
	}
header {
	width: 500px;
	padding: 0px;
	height: 300px;
	margin-bottom: 20px;
	}
/* =====     Bereiche-Rechts     =============================================================== */
#rechts {float: right; width: 240px;}
/* =====     Navigation     ==================================================================== */
nav {position: relative; text-align: left; margin-bottom: 20px;}
nav ul {list-style: none; padding: 10px;}
nav li {display: block;}

nav a {
	font-size: .875em;		line-height: 1.55em;
	font-weight: bold;		color: #090;
	padding: 5px 0 10px 10px;
	display: block;
	}
nav a:hover, a:active {color: fuchsia;}
/* =====     Navigation Ende     =============================================================== */

#shops {
	position: relative;
	padding: 10px;
	text-align: center;
	margin-bottom: 20px;
	}
	img.ishop {
		max-width: 200px;	width: 100%;
		height: auto;
		margin: 10px;
		}
	img.haendlerbund {
		max-width: 150px;	width: 100%;
		height: auto;
		margin: 10px;
		}

/* =====     Schriftfeld     =================================================================== */
main {
	float: left;
	position: relative;
	width: 460px;
	padding: 20px;
	margin-bottom: 20px;
	min-height:800px;
	}
.article {text-align: justify;	margin-bottom: -10px;}
.article a {color: fuchsia;}
.article.fotogalerie {text-align: center;}
.article.fotogalerie h2 {margin-bottom: 0px;}
.article.fotogalerie h6 {margin-bottom: 10px;}
/* =====     Tabelle     ===================== */
table.t1 {
	text-align: left;
	width: 100%;
	table-layout: auto;
	empty-cells: show;
	}
table.t2 {
	text-align: center;
	width: 100%;
	table-layout: auto;
	empty-cells: show;
	}
table.t2 a {
	letter-spacing: .05em;
	color: #080;
	text-shadow: white 1px 1px 1px, rgba(0, 0, 0, 0.375) 2px 2px 1px;
	font-size: 1.3em;
	font-family: 'Lora', serif;
	}
tr.z1 {vertical-align: top;}

td.c1 {width: auto;}
td.c2 {width: 20%;}
td.c3 {width: auto;}

/* =====     Sterne     ======= */
.sterne {
	clear: both;
	text-align: center;
	padding: 40px 0 35px;
	}
img.i3stern {margin: 0 20px;}
img.istern {margin-right: 0;}
img.i1stern {margin-right: 5px;}

/* =====     Seitenanfang     ======= */
#seitenanfang {
	text-align: center;
	margin: 20px 0 0;
	}
	#seitenanfang a {
		font-size: .875em;	line-height: .875em;
		color: fuchsia;
		display: block;
		padding: 20px;
		}
	#seitenanfang img.istern {vertical-align: sub;}

/* =====     Fuss     ========================================================================== */
footer {
	width: 460px;
	padding: 5px 20px;
	position: relative;
	margin-top: 20px;
	text-align: center;
	clear: both;
	}
footer a {color: #090;}
footer a:hover, a:active {color: fuchsia;}

#kontakt {
		position: fixed;
		bottom: 5px;
		right: 5px;
	}
/* =====     Foto / Video     ================================================================== */
figure {padding:0;margin:0;}

img {
	border: 0;
	height: auto;
	}
img.iv {
	width: 100%;
	}
img.iv33 {
	float: left;
	width: 33%;
	margin-bottom: 2%;
	margin-right: 2%;
	}
img.iv66 {
	float: left;
	width: 66%;
	margin-bottom: 2%;
	margin-right: 2%;
	}
img.i64 {width: 64px; margin: 5px;}

img.ifl {
	width: 45%;	height: 45%;
	border: 0px solid;		margin-bottom: 20px;
	float: left;
	}
img.ifllast {
	width: 45%;	height: 45%;
	border: 0px solid;		margin-bottom: 0px;
	float: left;
	}
img.ifr {
	width: 45%;	height: 45%;
	border: 0px solid;		margin-bottom: 20px;
	float: right;
	}

iframe.fv {
	width: 100%;
	border: none;
	overflow:hidden;
	}


/* ============================================================================================= */
/* ============================================================================================= */

@media screen and (max-width: 800px) {
	body {
		max-width: 460px; width: 92%;
		margin: 15px auto;
		}
	header {width: 100%;	height: auto;
			padding: 0;	 margin-bottom: 10px;}

	#rechts {
		width: 100%;
		float: none;
		margin-bottom: 10px;
		}
	nav {
		text-align: center;
		margin-bottom: 10px;
		padding: 0;
		}
	nav ul {padding: 10px;}
	nav a {padding: 10px 0;}

	#shops {
		padding: 10px 5px;
		margin-bottom: 10px;
		}
		img.ishop {
			min-width: 100px; width: 20%;
			vertical-align: middle;
			margin-left: 4%;
			margin-right: 4%;
			}
		img.haendlerbund {
			min-width: 100px; width: 20%;
			vertical-align: middle;
			margin-left: 4%;
			margin-right: 4%;
			}

	main {
		width: 100%;
		padding: 10px 0;
		margin-bottom:10px;
		}

	.article {padding: 0 10px;		clear: both;}
	
	footer {width: 100%;	padding: 10px 0;}
	img.ifl {margin-bottom: 10px;}
	img.ifr {margin-bottom: 10px;}
	
}
@media screen and (max-width: 460px) {
	html {
		height: 100%;
		background: url(./bilder/hintergrund-mobil.png);
		background-repeat: repeat;
		background-position: top center;
		background-attachment: scroll;
		}
	img.i64 {width: 32px; margin: 2px;}
	}

@media screen and (min-width: 1700px) {
	html {background: url(./bilder/hintergrund.jpg) no-repeat fixed top left; background-size: 100% 100%;}
	}