/* @charset "UTF-8";
 CSS Document */

@font-face {
	font-family: 'A';
	src:	url('../f/A/A.eot');
	src:	url('../f/A/A.woff') format('woff'),
			url('../f/A/A.ttf') format('truetype');
}

html, body { height:100%; }													/* für footer*/
body {
	background-color: #272521;   											/* im reset ändern nicht vergessen! */
	background-image: url("../img/papier.png");						
	font-family: 'A', Arial, Helvetica, sans-serif;
	font-size: 105%;    									 /* ? */
	color: #8c8576;
}

a  { text-decoration: none;	color: #8c8576; }
img { color: #514b40; } /* alt-Tag Schriftfarbe*/

.hover_aktiv, ul#haupt li.hover_aktiv { color: #8f1a1a; }	

#wrapper {
	width: 80%;
	margin: 0 auto;
	padding: 0 35px;
	text-align: center;
}

/* - - - - - - - - STARTSEITE - - - - - - - - border: 1px solid green; */

div#startseite {
    position: absolute;
    height: 100%; width: 100%;
    background: url(../img/start.jpg) no-repeat center center;
	background-size: cover;
    top: 0; left: 0;	
}

div#startseite ul#start {
	text-align: center;
	margin: 17% auto;
	width: 100%;
	text-transform: uppercase;
	font-size: 120%;
	letter-spacing: 0.18em;
	color: #f2eadb;
}

div#startseite ul#start li#webseite_illu { display: none; }

div#startseite ul#start li.kl a { font-size: 95%; letter-spacing: 0.08em;}

div#startseite ul#start li#logo_start { width: 100%; height: 88px; background: url(../img/logo_start.png) no-repeat center 0; }
div#startseite ul#start li { margin-bottom: 30px;  }
div#startseite ul a { color:#f2eadb; }

div#startseite p {
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	top: 80%; 
	left: 0;
	right: 0;
	text-align: center;
	font-size: 120%; letter-spacing: 0.08em;
}
div#startseite p a { color: #474435; }

div#startseite div p.lang { margin-top: 35px; color: #28251e; font-weight: bold; text-transform: uppercase; font-size: 68%; letter-spacing: 0.22em; }


/* - - - - - - - - LOGO + NAVI - - - - - - - - border: 1px solid green; */

nav ul#haupt li#webseite_illu { display: none; }

nav ul#haupt { margin-bottom: 36px; }
nav ul#haupt li { letter-spacing: 0.1em; margin-bottom: 24px; }

a#logo {
	margin: 55px 0 0 0;
	display: block; background: url(../img/logo.png) no-repeat center 0;
	min-width: 100%; height: 72px; 
}

div#subnavi { display: none; }

ul#subnavi_mobil { width: 230px; padding-top: 24px; margin: 0 auto; margin-top: 35px; margin-bottom: 75px; font-size: 110%; border-top: 1px solid #534f46; }

ul#subnavi_mobil li { margin-bottom: 20px; }
ul#subnavi_mobil li.kontakt { text-transform: uppercase; font-size: 90%; letter-spacing: 0.18em; }
ul#subnavi_mobil li.sprache { font-size: 75%; letter-spacing: 0.08em; position: absolute; top: 36px; right: 48px; }
ul#subnavi_mobil li.sprache a { color: #716c65; }

ul#subnavi_mobil li.swusch {
	margin-top: 36px; 
	display: block;	background: url(../img/swusch.png) no-repeat center 0 ;
	width:100%; height: 16px; 
}

p.next { width: 100%; text-align: center; text-transform: uppercase; font-size: 80%; letter-spacing: 0.1em; padding-bottom: 15px; }


/* - - - - - - - - ÜBERSICHT - - - - - - - - border: 1px solid green; */


#uebersicht { width: 230px; margin: 0 auto; }

#uebersicht img { min-width: 100%; }
#uebersicht a span { display: block; margin: 10px 20px 25px 20px; }				/* --  hover BILDUNTERSCHRIFT  --*/
ul#links a { color: #90b5ba; }


/* - - - - - - - - PROJEKT: ANIMATION / ILLUSTRATION / GRAPHIC DESIGN - - - - - - - -  */

br.break { display: none; }

article { margin-bottom: 36px; }

article.text { font-size: 115%; text-align: left; line-height: 130%; letter-spacing: 0.02em; }																						

article img, article img, article div.eins img, article div.zwei img, ul.behind li img { max-width: 100%; display: block; margin: 0 auto; }
article img, ul img, ul div.videowrapper { padding-bottom: 12px; }

img.m_40, ul.behind li label span img.m_40 { width: 40% }
img.m_45, ul.behind li label span img.m_45 { width: 45% }
img.m_50, ul.behind li label span img.m_50 { width: 50% }
img.m_55, ul.behind li label span img.m_55 { width: 55% }

article div.eins, article div.zwei, ul.behind li div img { margin-bottom: 12px; }
article div.videowrapper { margin-bottom: 24px; }

article { letter-spacing: 0.05em; line-height: 120%; }

article p, article h1, article h2, article h4 { padding: 0 20px; margin-bottom: 10px; }

h1 { font-size: 105%; line-height: 130%; text-transform: uppercase; letter-spacing: 0.07em; }
h1 span { text-transform: lowercase; }
h2 { font-size: 100%;  line-height: 130%;  }
h4 { font-size: 110%; line-height: 120%; letter-spacing: 0.07em; }

p.client { letter-spacing: 0.06em; }
p.client span { text-transform: uppercase; font-size: 75%; letter-spacing: 0.2em; }
article p.link_menue a { text-transform: uppercase; font-size: 80%; letter-spacing: 0.12em; }

h3, article.festival p { padding: 0 15px; font-size: 95%;}								/* Festivals */
h3 span, p span.bull, .rot, ul li label p i { color: #a42222; } 						/* bull rot*/
h3 span.uppercase { text-transform: uppercase; color: #8c8576; font-size: 90%; letter-spacing: 0.15em; }

.abstand_bottom { margin-bottom: 10px; }
.abstand_top { margin-top: 9px; }

div.swusch { margin-bottom: 36px; height: 16px;  }
div.swusch {
	display: block;	background: url(../img/swusch.png) no-repeat center 0 ;
	width:100%; height: 16px; 
}


/* - - - - - - - - Behind the Scenes Gallerie - - - - - - - - */

ul.behind { border-top: 1px solid #534f46; padding-top: 36px; text-align: center; }

ul.behind li.ende0, ul.behind li.leerHalb, ul.behind li.leerHalb2, ul.behind li.leer1, ul.behind li.leer2, ul.behind li.leer3, ul.behind li input, ul.behind li label > img:first-child { display: none; }
ul.behind li label span img { width: 75%; padding-bottom: 15px; }
/*ul.behind li label span img.hochformat { width: 55%; }                   fuer Hochformat-Bilder*/
ul.behind li label span p { padding: 5px 0 30px 0; line-height: 111%; }

label span p.Babc { letter-spacing: 0.05em; word-spacing: 0.05em; }				/* breakfast-abc */
label p em.auszeichnung { color: #b2a894; text-transform: uppercase; } 			/* breakfast-abc */

/* - - - - - - - - KONTAKT - - - - - - - - */

div#adresse ul, div#partner ul { width: 100%; display: inline-block; text-align: center; letter-spacing: 0.08em; }

div#adresse { margin-bottom: 50px; font-size: 120%; }
div#adresse ul li { margin-bottom: 15px; }
div#adresse ul li.wolf { text-transform: uppercase; letter-spacing: 0.15em; padding-bottom: 2px; padding-left: 12px; }
div#adresse ul li span { text-transform: uppercase; font-size: 75%; letter-spacing: 0.3em; padding-left: 15px;} 
div#adresse ul li span.rot { color: #a42222; } 
div#adresse ul li.wolf span { color: #a42222; padding-left: 1px; } 

div#adresse ul li.tel { line-height: 170%; } 
div#adresse ul li.adresse { padding-left: 12px; } 

div#adresse ul li.socialmedia { margin: 30px 0 0 5px; }
div#adresse ul li.socialmedia a#facebook { margin-left: 5px; }
a#vimeo {	display: inline-block; background: url(../img/matzl_vimeo.png) no-repeat 0 0;
			width: 35px; height: 35px; }
a#facebook {	display: inline-block; background: url(../img/matzl_facebook.png) no-repeat 0 0;				 /* abstand zu youtube */
				width: 35px; height: 35px; }

div#partner h4 { text-align: center; text-transform: uppercase; margin-bottom: 25px; font-size: 110%; padding: 45px 0 15px 0; letter-spacing: 0.4em; border-top: 1px solid #534f46; }
div#partner h4 span { color: #a42222; }  

div#partner ul { }
div#partner ul li { text-align: center; margin-bottom: 20px; }


ul#copyright { text-align: center; padding: 0 15px; letter-spacing: 0.02em; line-height: 130%; margin: 75px 0 35px 0; }
ul#copyright li.jahr { margin: 24px 0; }

/* - - - - - - - - SHOP - - - - - - - -  border: 1px solid red; */

article.shop {  }

ul.angaben { margin-top: 25px; }
ul.angaben li { padding-bottom: 6px; }
ul.angaben_oben { margin-top: 0; }
/*ul.angaben li, ul.angaben_oben li { padding-bottom: 6px; font-size: 105%; }*/
img.obenmehr { margin-top: 20px; }



.preis { font-size: 105%; padding: 20px 0 15px 0; }
.bestellung { margin-top: 25px; }
.groesser  { font-size: 110%; margin-top: 0;}
.kleiner { font-size: 75%; }
h1.oben { margin-top: 20px;}

ul#shop { margin-bottom: 35px;}
ul#shop li { margin: 35px 0 55px 0;}
ul#shop li p { margin-top: 1px; font-size: 108%; letter-spacing: 0.03em; }

ul#shop li img { }

ul.post { }
ul.post li { height: 35px; text-transform: uppercase; letter-spacing: 0.08em; }
ul.post li h1 { margin-top: 20px; }

.versalien { text-transform: uppercase; letter-spacing: 0.1em; font-size: 95%; } 


/* - - - - - - - - FOOTER - - - - - - - - */

p.oben_mobil { padding: 15px 0 10px 0; text-transform: uppercase; font-size: 80%; letter-spacing: 0.1em; }

div.footer_hoehe { padding-bottom: 0px; }  		/* zieht die Höhe des Footers innerhalb des wrapper ab */

footer {  
	margin: 0 auto;
	height: 222px;									 /*Höhe des Footers */
	margin-top: 0px;								 
	text-align: center;
}

footer p.link_menue { padding-top:40px; margin-bottom: 25px; font-size: 90%; letter-spacing: 0.2em; text-transform: uppercase; }
footer p.footer_kontakt a { font-size: 100%; color: #767169; letter-spacing: 0.08em; }								/* wolf zeigen farbe dünkler !!! */
footer p span { color: #a42222; letter-spacing: 0.3em; } /* bull rot*/
footer div.swusch_footer { margin: 20px 0; height: 16px; }
footer div.swusch_footer { 
	display: block;	background: url(../img/swusch.png) no-repeat center 0;
	width: 100%; height: 16px;  
}

/* - - - - - - - - - - - - - - - - */

.nein_m, footer div.nein_m { display: none; }

.no_break { white-space: nowrap; }

div#anker { width: 0%; height: 0; }

/*
a#anfang {
	margin: 0 auto;
	margin-top: 75px;
	margin-bottom: 55px;
	display: block;
	background: url(../img/anfang.png) no-repeat 0 0;
	width: 15px; height: 15px;
}*/

h1.nopeeking { font-size: 130%; margin: 30px 0 0 30px; }

.error { font-size: 120%; margin: 30px 0 0 30px; }
.error_link { font-size: 120%; display: block; margin: 10px 0;}
.error_link a span { color: #90b5ba; }
.error img { margin-top: 15px; }