/* ******************************** */
/*  								*/ 
/* 		Styles zu Ambrosia			*/ 	
/*  								*/
/* ******************************** */

*		  				{ margin:0; padding:0; }	  		  

body					{ max-width:864px; font-size:13px; font-family:Arial, Helvetica, sans-serif; 
							  color:#333; list-style:none; text-decoration:none;}
                          
header, footer, aside, section, main, article { display: block; }	/* HTML-5 für alte Browser */

header                  { display:flex; max-width:864px; background:white; }
header h1               { margin:10% 0 0; padding-top:5%; color:brown; }
header p                { margin:0; padding-bottom:5%; }


#wrapper 				{ min-width:320px; max-width:864px; margin:0 auto; 
							  padding:5px; background:#eec591; }

img.responsive-fill, .logo 	{ width:100%; height:auto; }
.logo-50 	            { width:50%; height:auto; }

.img_border				{ border:1px solid #aba0aa; box-shadow: 2px 2px 2px #333; }

p 						{ padding-bottom:.5em; }

h1 						{ font-family:"Times New Roman", Garamond, serif; font-size:3em; color:brown; }
							  
h2 						{ text-align:center; font-size:1.5em; margin:20px 0 5px; color:brown; }

h3						{ clear:both; font-family:"Times New Roman", Garamond, serif; margin-bottom:1em; padding:6px 10px; 
						  	  color:#851c20; background:#eec591; text-align:center; font-size:1.4em; 
						  	  font-variant:small-caps; letter-spacing:0.05em; }	
						  
h4 						{ padding:20px 0 15px; color:brown; font-family:"arial narrow", sans-serif; 
							  font-size:1.4em; letter-spacing:0.05em; font-variant:small-caps; }
							  
h5						{ font-size:1.1em; margin:10px 0; color:#444; }

hr                      { color:#eec591; }
								  
strong 					{ font-weight:bold; }
								  
.center					{ text-align:center; }
								  
.red					{ color:#851c20; }

.black					{ color:#222; }

.button					{ margin:2em 0; }
							  
.button_input:hover	{ background:#851c20; color:#f8f8f7; -webkit-user-select:none; -webkit-touch-callout:none; }

.button_input			{ padding:8px 15px; color:#851c20; border:1px solid #bdb76b; 
							  border-radius:3px; letter-spacing:0.05em; text-decoration:none;
							  transition:background 1.5s;  box-shadow: 2px 2px 2px #333;
							  background:-webkit-linear-gradient(#eec591, #eeecea, #eec591);
							  background:linear-gradient(#eec591, #eeecea, #eec591); }



footer					{ clear:both; box-sizing:border-box; padding-top:10px; text-align:center; }
							  
footer a					{ color:brown; padding:10px 15px 5px; transition:background 1.5s; text-decoration:none; }
							  
footer p					{ color:#585858; }

footer a:hover, footer a:hover:active
							{ color:#f8f8f7; background-color:#851c20; border-radius:3px; 
							  -webkit-user-select:none; -webkit-touch-callout:none; }

/* --------- index.htm -------- */

    
.flex-container 		{ display:-webkit-flex; display:flex;
					  		  -webkit-flex-wrap:wrap; flex-flow:wrap; background:#f8f8f7; }

.flex-container > * 	{ -webkit-flex:1 100%; flex:1 100%; }

.aside 					{ min-width:190px; margin:10px 5px 15px; box-sizing:border-box; padding:0 15px; 
							  border:3px solid #eec591;box-shadow: 6px 6px 5px #888; text-align:center; }
							  
.aside li				{ border-bottom:1px solid #ccc; list-style:none; }
.aside a					{ line-height:2em; color:brown; 
							  text-decoration:none; }
							  
.aside_hr				{ border-bottom:1px dotted #d6d6d6; }
.aside_open p			{ margin-bottom:5px; }

.section 				{ box-sizing:border-box; text-align:center; 
							  padding-bottom:15px; min-width:220px; }
							  					  
.section img 			{ width:200px; margin:10px 0 auto -7px; padding:5px;
							  border:1px solid #aba0aa; box-shadow: 4px 4px 4px #555; }

.main 					{ min-width:260px; max-width:460px; margin-left:auto; 
							  margin-right:auto; padding:1.5em 3em; text-align:justify; }
							  
.main img               { width:100%; height:auto; margin:20px 0; padding:5px;
                          border:1px solid #aba0aa; box-shadow: 4px 4px 4px #555; }

/* --------- kontakt.htm -------- */

.address, .open, .map, .kontakt	
                        { box-sizing:border-box; padding:25px 6px; text-align:center; }
											  
.address, .open		    { padding:25px 2% 25px 8%; text-align:left; }

.map iframe				{ min-width:400px; height:400px; box-sizing:border-box; 
                          border:2px solid #eec591; box-shadow: 5px 5px 5px #aaa; }

/* .map iframe				{ width:100%; height:400px; box-sizing:border-box; 
							  border:2px solid #eec591; box-shadow: 5px 5px 5px #aaa; } */

/* .kontakt input,
.kontakt textarea		{ margin:5px 0; padding:.2em .5em; border:2px inset #eec591; } */


/* -------- feiern.htm ------- */

.veranstaltung, .party	{ box-sizing:border-box; padding:25px 5%; text-align:left; } 
.table, .relief			{ box-sizing:border-box; text-align:center; } 
.table img, .relief img	{ margin:45px 5% 25px; border:1px solid #eec591;  box-shadow:0px 8px 12px 0px #555; /* box-shadow: 5px 5px 5px #999; */ }


/* --------- foto.htm -------- */

#foto div				{ flex:1 auto; text-align:center; }
#foto h4					{ text-align:center; }
#foto img				{ margin:10px; background-color:#fff; border:1px solid #888;
							  box-shadow: 4px 4px 4px #555; padding:5px; }

/* -------- impressum.htm ------- */
				  
.impress 				{ float:left; margin:10px 25px 20px 5px; padding:15px 25px; 
							  border:3px solid #eec591; box-shadow: 6px 6px 5px #888; }

.haftung 				{ padding:25px; text-align:justify; background:#f8f8f7; }
.haftung h1				{ text-align:center; font-size:2.5em; }
.haftung p				{ padding:8px; }
.haftung li				{ margin-left:25px; padding:3px; list-style-type:circle; }

.haftung a,
.impress a				{ font-style:italic; color:#444; }

					  
/* *********************** Bildschirmgröße ********************** */

@media all and (max-width: 480px) {

	p, li, input, textarea		{ font-size:110%; }
	h1		{ font-size:2em; }
	h3, h4				{ font-size:150%; }
	.haftung			{ -webkit-flex:1 100%; flex:1 100%; }
	.impress			{ width:100%; }
}

@media all and (min-width: 480px) {

    .aside, .section    { -webkit-flex:1 0px; flex:1 0px; }
    .aside 	 			{ order: 1; }
    .section 			{ order: 2; } 
    .main    			{ order: 3; }
    .address, .open     { -webkit-flex:1 50%; flex: 1 50%; }
}

@media all and (min-width: 610px) {

    .map, .kontakt, .table, .veranstaltung, .party, .relief
    						{ -webkit-flex:1 50%; flex:1 50%; }
    .table		  		{ order:1; }
    .veranstaltung	    { order:2; }
    .party		  		{ order:3; }
    .relief		  		{ order:4; } 
}

@media all and (min-width: 790px) {
    .main    			{ -webkit-flex:2 0px; flex:2 0px; }
    .aside 	 			{ order: 1; } 
    .main    			{ order: 2; }
    .section 			{ order: 3; }  
}