/*
Theme Name:     Stadtküche Wernigerode
Theme URI:      http://www.stadtkueche-wernigerode.de
Description:    Template, basierend auf Roots
Author:         wagnergraphics - Torsten Wagner
Author URI:     http://www.wagnergraphics.de
License:        wagnergraphics
License URI:    http://www.wagnergraphics.de
Template:       roots
Version:        1.0
*/

/* ==========================================================================
   KORREKTUR FÜR CDN / WP COMPRESS
   Die führenden Schrägstriche bei den Font-URLs wurden entfernt,
   damit die Pfade relativ zur style.css Datei im Theme-Ordner sind.
   ========================================================================== */


/* lusitana-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Lusitana';
  font-style: normal;
  font-weight: 400;
  /* Führenden Slash entfernt */
  src: url('fonts/lusitana-v13-latin-regular.woff2') format('woff2'),
       url('fonts/lusitana-v13-latin-regular.woff') format('woff');
}
/* lusitana-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lusitana';
  font-style: normal;
  font-weight: 700;
  /* Führenden Slash entfernt */
  src: url('fonts/lusitana-v13-latin-700.woff2') format('woff2'),
       url('fonts/lusitana-v13-latin-700.woff') format('woff');
}


@font-face {
	font-display: swap;
    font-family: 'Droid Sans';
    /* Führenden Slash entfernt */
    src: url('fonts/DroidSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-display: swap;
    font-family: 'Droid Sans';
    /* Führenden Slash entfernt */
    src: url('fonts/DroidSans-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}


/* =============================================================================
   Body und allgemeine Auszeichnungen 
   ========================================================================== */

body { 
	padding-top: 0px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-size: 15px;
	line-height: 1.4em;	
	font-family: 'Droid Sans', sans-serif;
	font-weight: normal;
	color: #333; 
	font-smoothing: antialiased;	
}
body.top-navbar { padding-top: 0px; }

p {
	font-size: 1em;
	line-height: 1.6em;
	font-family:'Droid Sans', sans-serif;
	margin: 0 0 0.8em 0;
	text-align: justify;
}

a, a:visited { color: #000; font-weight: bold; text-shadow:  1px 1px 1px #ddd;}
a:hover { text-decoration: none; color: #c03; }

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
	font-weight: normal;
	text-decoration: none;
    color: #333;
}



h1, h2, h3 {
	font-family: 'Lusitana', serif;
	font-weight: 700;
	line-height: 1.4em;
}

h1 { font-size: 1.4em; margin-bottom: 50px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #cc0033 }
h2 { font-size: 1.3em; margin-top: 30px; margin-bottom: 15px; line-height: 24px; }
h3 { font-size: 1.1em; margin-top: 15px; margin-bottom: 10px; }

.page-header h1 { line-height: normal !important; }

hr {
    height: 1px;
	margin: 3em 0;
	border-color: rgba(0, 0, 0, 0.1);
	border-style: 1px solid;
    border-left: 0 none;
    border-right: 0 none; 
	border-top: 0 none;
}

::selection { background: #C03 !important; color: #fff; text-shadow: none; }
::-moz-selection  { background: #C03 !important; color: #fff; text-shadow: none; }

.rot,
a > .rot { color: #c03; }







/* =============================================================================
   Bilder, etc.
   ========================================================================== */
   
img { max-width: 100%; }
#main img { border: 1px solid #c03; margin: 20px 0; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
#logo-wrap img { min-width: 100%; }

.mapp-container img { border: 0px !important; box-shadow: none !important; }





/* =============================================================================
   Header
   ========================================================================== */

#wrap {
	/* nicht loeschen, Bootstrap */
    padding: 0px 0 0px  !important;
	margin: 0 auto;
	background: url(images/header.jpg) no-repeat top center;
}

#banner { 
	position: relative;
	margin: 0;
	padding: 0;
	height: 500px;
}

#telefon-button {
	position: absolute;
	bottom: 0;
	right: 5%;

}






/* =============================================================================
   Hauptnavigation
   ========================================================================== */

#nav-main ul {
	list-style: none;
	margin: -1em 0 0 0;
	padding: 0;	
}

#nav-main a { 
	display: block;
	padding: 1em 0 1em 1em; 
	margin: 0; 
	font-family: 'Lusitana', serif;
	font-size: 1.4em;
	line-height: 1.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#nav-main li:last-child a { border-bottom: none; }

#nav-main li > a {}   

#nav-main .active > a, #nav-main .active > a:hover {
    background-color: transparent;
    color: #cc0033;
}
 





/* =============================================================================
   Inhalte
   ========================================================================== */
#main { margin-top: 1em; }

.page-header {   
	border-bottom: none;
    margin: 0 0;
    padding-bottom: 0;
}

#content {
	margin: 0 auto;
	margin-top: 30px; 
	background: url(images/obstschale.jpg) 0% 250px no-repeat;
	max-width: 1200px;
	background-size: 40%;
	overflow: hidden;
}

.pdf_download {
	display: inline-block;
	min-width: 70%;
	min-height: 50px;
	text-align: center;
	border: 1px dashed #c03;
	padding: 10px 10px 10px 120px;
	background: url(images/pdf_download.png) no-repeat 10px center;
	margin-top: 20px;
}
.pdf_download:hover,
.panel
{
	background-color: #eee;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	color: #000;
	border: 1px dashed #c03;
}

.panel {
	display: block;
	text-align: center;
	padding: 20px;
	margin: 20px 0;
}

.rot { color: #c03;}


/* =============================================================================
   Listen
   ========================================================================== */
   
#main ul {
	margin: 20px 0 20px 2em;
	padding: 0;	
	list-style: outside;
}
#main li {
	line-height: 1.5em;	
	padding-left: 0px;
	margin-bottom: 1em;
}




/* Zitate */
blockquote {
	background: #FC0;
    margin: 0 0 1.5em 0em;
	border: 1px #000 dashed; 
    padding: 20px;
	font-size: 1.2em;
	line-height: 1.6em;
	font-style: italic;
}





/* =============================================================================
   Artikel
   ========================================================================== */
#main article { margin-bottom: 60px; }

article footer { 
	margin-top: 20px;
	text-align: right;
} 


.multicolumn {	   
	column-count: 2;
	column-gap: 120px;
    column-rule: solid 1px #777;
}








/* =============================================================================
   Footer
   ========================================================================== */

#footer { 
	padding: 80px 0 60px 0;
	color: #000;
	font-size: 0.9em; 
    background: url(images/footer.jpg) no-repeat top center;
	background-size: cover;
}

#footer article { width: 95%; margin-bottom: 20px; }
#footer article:last-child { padding-top: 15px; margin-bottom: 0px; border-top: 2px solid rgba(0, 0, 0, 0.3); }



#footer p, 
#footer a,
#footer h3,
small  { 
	font-weight: bold;
	line-height: 1.3em;
	color: #FFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); 	
}
#footer h3 { font-size: 1.5em; }
#footer a { color: #FFF; font-weight: bold; }
#footer a:hover {
	color: #FFE6EC;
}
small { font-size: 0.9em; font-weight: normal; line-height: 1em; }


#menu-footer-navigation {}
#footer ul.menu, #footer ul { 
	padding: 0 0 0 0px; 
	list-style-type: none; 
	list-style-position: inside;
}
#footer ul.menu li, #footer ul li { margin: 0 0 5px 0;}
#footer ul.menu li a, #footer ul li a  { text-decoration:none; }
#footer ul.menu li a:hover, #footer ul li a:hover  { background-color: transparent; }

.widget_nav_menu {	
	padding-bottom: 0em;
	margin-bottom: 0em;	
	border-bottom: none;
}

#footer .nav { margin-bottom: 0px; }

#footer .eu-zulassung {
	float: right;
	margin-top:10px;
}


















/* =============================================================================
   Formulare
   ========================================================================== */
.wpcf7 { max-width: 500px; }

input, textarea {
	box-sizing: border-box;	
	width: 100%;
	min-height: 1.6em;
	border: 1px solid #ccc;
	border-radius: 1px;
	margin-bottom: 4px;
	font-size: 1.1em;
	font-family: 'Lusitana', serif;
	font-weight: 100;
	color: #222;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0) inset;
}
input:focus, textarea:focus {
	color: #000; 
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0px 0px 2px rgba(204, 0, 51, 1);
	border: 1px solid #c03;
	min-height: 2em;
}
form label {font-size: 1em;}

textarea { overflow: auto; vertical-align: top; resize: vertical; margin-bottom: 20px; }
.plz input {width: 15%;}
.wohnort input { width: 83%; margin-right: 0; float: right;}
.captcha-263 input {width: 80px; padding:2px; text-align: center;}
.wpcf7-captcha-captcha-263 { margin-top: -4px; padding:4px; background-color: #FFF;}


.button, 
#post-nav a, 
#comments-nav a, 
.wpcf7-submit,
.comment-reply-link {
	display: inline-block;
	width: 100%;
	font-size: 1.4em;
	text-align: center;
	background: #cc0033;
	color: #fff;		
	border-radius: 3px;
	border: none;
	padding: 3px 12px;
	text-decoration: none;
	text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.2) inset;
	-webkit-appearance: none;
	margin-top: 10px;
}
.button:hover, 
#post-nav a:hover,
#comments-nav a:hover, 
.wpcf7-submit:hover,
.comment-reply-link:hover { 
	background: #cc0033;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 16px rgba(0, 0, 0, 0.8) inset;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
}

/* Fehlermeldungen */
input:valid, textarea:valid {}
input:invalid, textarea:invalid, .wpcf7-not-valid { 
	background-color: #eee;
	color: #000 !important;
	border: 1px solid #c03 ;
}

.wpcf7-not-valid-tip-no-ajax,
.wpcf7-not-valid-tip-no-ajax,
.wpcf7-response-output,
.wpcf7-mail-sent-ok
{
	margin: 5px 0 20px 0 !important;
	background-color: #900;
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
	text-align: center;
	color: #FFF !important;
	padding: 6px;
	font-size: 1em !important;
	border-radius: 2px;
	text-shadow: none;
}
.wpcf7-response-output {
	background-color: #FC0;
	color: #000 !important;
}
.wpcf7-mail-sent-ok {
	background-color: #398F14;
	color: #000 !important;
}







/* Suchfeld */
#searchform { text-align: left; float: none; }
#searchform:after { content:attr(<br>); }
#searchform #placeholder { text-indent: 60px; color: #000;}
#searchform #searchform div { margin: 0; }
#searchform #s {
	float: left;
	height: auto;
	min-width: 100px;
	width: 20%;
	transition-duration: 400ms;
	transition-property: width, background;
	transition-timing-function: ease;
	padding: 4px 10px 4px 28px;
	background: #333;
	background: url(images/search.png) no-repeat 5px 6px rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 0px;
}
#searchform #s:focus { 
	width: 100%; 
	background: url(images/search.png) no-repeat 5px 6px rgba(255, 255, 255, 1);
	color: #000;
}
#searchform #searchsubmit { display: none; }
#searchform .only-search #searchform { top: 5px; z-index: 1; }
#searchform .only-search #s {}

#searchform .only-search #s,
#searchform .only-search #s:focus { width: 100%; }
#searchform .only-search #s:focus { background-color: #000; }
#searchform .with-image #searchform { top: auto; bottom: -27px; max-width: 100%; }
#searchform .only-search + #access div { padding-right: 205px; }

input#searchsubmit, label.visuallyhidden { display: none; }





#footer ul.menu, 
#footer ul {
    margin: 0;
}




/* =============================================================================
   Animationen und optische Ergaenzungen
   ========================================================================== */

#logo, 
#nav-main a, 
a, 
input, 
textareas,
p {
	transition-duration: 300ms;
	transition-property: All;
	transition-timing-function: ease;
}

.alert p { color: #000; }












/* =============================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 1140px) {
	#wrap { background-size: 140%; }
	header { }
}
		 
@media only screen and (max-width: 960px) {
	#wrap { background-size: 140%; }
	header { height: 400px; }
	#telefon-button { max-width: 200px;	}
}


@media only screen and (max-width: 767px){
 
	body {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#wrap { background-size: 150%; background-position: center 150px; }
	
	#logo-wrap { 
		margin: 0 auto;
		min-width: 80%;
		max-width: 80%;
	 }
	 
	#telefon-button {
		position: absolute;
		bottom: 0;
		right: 2%;
	}
	
	#nav-main ul { margin: 0 40px 0 40px; text-align: center; }	
	#main {	padding: 40px 40px; }	
	h2, h2:first-child { margin-top: 40px; }	
	.multicolumn { column-count: 1; }
	
	#footer { 
		padding: 80px 40px 60px 40px;
		color: #000;
		font-size: 0.9em; 
		background: url(images/footer_klein.jpg) no-repeat top center;
		background-size: cover;
	}
 	
	#footer1 { margin-bottom: 40px; overflow: hidden; }	

}




@media only screen and (max-width: 480px){
	
	#wrap { 
		background-size: 200%;
		background-position: center 100px; 
	}
	
	header { height: 300px;	}	
	
	#logo-wrap { 
		margin: 0 auto;
		min-width: 80%;
		max-width: 80%;
	 }	 
	 
	#telefon-button { max-width: 150px;	}
 
}