﻿#body1 {
	background-image: url(../bilder/hg_strand1.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: fixed;
}

#body2 {
	background-image: url(../bilder/hg_catering1.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: fixed;
}

#body3 {
	background-image: url(../bilder/hg_strand3.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: fixed;
}

#body4 {
	background-image: url(../bilder/hg_strand4.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: fixed;
}

#container_01 {
	margin: 0 auto;
	max-width: 100%;
}

#text1 {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(115,115,115,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: lighter;
	font-variant: normal;
	font-size: large;
	line-height: 150%;
	text-align: left;
}

#text2 {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(115,115,115,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-variant: normal;
	font-size: large;
	line-height: 150%;
	text-align: left;
}

#text3 {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(115,115,115,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: lighter;
	font-variant: normal;
	font-size: large;
	line-height: 150%;
	text-align: center;
}

#text4 {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(115,115,115,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-variant: normal;
	font-size: large;
	line-height: 150%;
	text-align: center;
}

#tab_1 {background-color:
	background-color: rgba(255,255,255,0.5);
}

a {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(115,115,115,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-variant: normal;
	font-size: large;
	line-height: 150%;
	text-align: left;
}

/* Media Queryies zur Anpassung an unterschiedliche Viewports */
/* Optimierung fÃ¼r Bildschirmbreite von 768px */
@media screen and (max-width: 768px) { 
	body {
	margin: 0px;
	background-image: url(../bilder/hg_strand1.jpg);
}
; 	color: rgba(78,78,78,1.00);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: rgba(0,0,0,1.00);
	color: rgba(147,0,0,1.00);
	color: rgba(115,115,115,1.00);
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	
} 

/* Optimierung fÃ¼r Bildschirmbreite von 480px */
@media screen and (max-width: 480px) { 
* {margin: 0; padding: 0;}
#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
#logo {width: 100%;
	margin: 0px;}
.fader img {width: 100%;}
#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {display: none;}
#nav {display: none;}
#nav2 { display: inline;}
div.navi {font-size: 2.5em; text-align:center; }
#article {width: 95%; margin:10px; font-size: 1.0em;}
	h3{	margin: 5px 0px 5px 0px;}	
#facebook {
    width: 40%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}

#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	
#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px;
	font-size: 1.0em;}
	
#haupt3 {display: inline;
	width: 50%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
#footer {font-size: 2.0em; text-align:center;}
} 
 
/* Media Query fÃ¼r Desktops und Laptops */ 
@media only screen and (min-width: 1224px){

}

/* Media Query fÃ¼r IPad (Portrait-Ansicht) */
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation:portrait){
	body {margin: 0px;}
}

/* Media Query fÃ¼r IPad (Landschafts-Ansicht) */
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation: landscape){

}

/* Media Query fÃ¼r Smartphones (Portrait & Landschafts-Ansicht) */
@media only screen and
(min-device-width:320px) and
(max-device-width:480px){
	* {margin: 0; padding: 0;}
	#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
	#logo {width: 100%;
	margin: 0px;}
	.fader img {width: 100%;}
	#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {display: none;}
	#nav { display: none;}
	#nav2 { display: inline;}
	div.navi {font-size: 2.5em; text-align:center; }
	#article {width: 95%; margin:10px; font-size: 1.0em;}
	h3{	margin: 5px 0px 5px 0px;}
#facebook {
    width: 40%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
	#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}
	
#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	
	#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px; font-size: 1.0em;}
	
	#haupt3 {display: inline;
	width: 100%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
	
	#footer {font-size: 2.0em; text-align:center;}
}

/* Media Query fÃ¼r Smartphones (Landschafts-Ansicht) */
@media screen and (max-device-width: 480px) { 
	* {margin: 0; padding: 0;}
	#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
	#logo {width: 100%;
	margin: 0px;}
	.fader img {width: 100%;}
	#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {display: none;}
	#nav { display: none;}
	#nav2 { display: inline;}
	div.navi {font-size: 2.5em; text-align:center; }
	#article {width: 95%; margin:10px; font-size: 1.0em;}
	h3{	margin: 5px 0px 5px 0px;}
#facebook {
    width: 40%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
	#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}

#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px; font-size: 1.0em;}
	
	#haupt3 {display: inline;
	width: 100%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
	
#footer {font-size: 2.0em; text-align:center;}
 } 
 
/* Media Query fÃ¼r Smartphones (Portrait-Ansicht) */
@media screen and (max-device-width: 320px) { 
	* {margin: 0; padding: 0;}
	#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
	#logo {width: 100%;
	margin: 0px;}
	.fader img {width: 100%;}
	#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {display: none;}
	#nav { display: none;}
	#nav2 { display: inline;}
	div.navi {font-size: 2.5em; text-align:center; }
	#article {width: 95%; margin:10px; font-size: 1.0em;}
	h3{	margin: 5px 0px 5px 0px;}
#facebook {
    width: 60%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
	#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}

#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px; font-size: 1.0em;}
	
	#haupt3 {display: inline;
	width: 100%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
	
	#footer {font-size: 2.0em; text-align:center;}

 } 

/* Media Query fÃ¼r IPhone 4 */
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(min-device-pixel-ration: 1.5)
{
	* {margin: 0; padding: 0;}
	#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
	#logo {width: 100%;
	margin: 0px;}
	.fader img {width: 100%;}
	#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {
	display: none;
	border-top-color: #000000;
	border-top-width: 1px;
	border-top-style: solid;
}
	#nav { display: none;}
	#nav2 { display: inline;}
	div.navi {font-size: 2.5em; text-align:center; }
	#article {width: 95%; margin:10px; font-size: 1.0em;}
	h3{	margin: 5px 0px 5px 0px;}
#facebook {
    width: 50%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
	#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}

#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px; font-size: 1.0em;}
	
	#haupt3 {display: inline;
	width: 100%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
	
	#footer {font-size: 2.0em; text-align:center;}

}

/* Media Query fÃ¼r IPhone 5 */
@media screen and (device-width: 320px) and 
(device-height: 568px) and 
(-webkit-device-pixel-ratio: 2){
	* {margin: 0; padding: 0;}
	#header{ margin-bottom: 0px;text-align: center; padding:0; font-size: 2.5em;}
	#logo {width: 100%;
	margin: 0px;}
	#sannet {width: 100%;}
	.fader img {width: 100%;}
	#aside {
	font-size: 2.0em;
	text-align: center;}
#tabelle1 {display: none;}
	#nav { display: none;}
	#nav2 { display: inline;}
	div.navi {font-size: 2.5em; text-align:center; }
	#article {width: 95%; margin:10px; font-size: 1.5em;}
	h3{	margin: 5px 0px 5px 0px;}
#facebook {
    width: 40%; /* 300 / 960 */
	align-content: center;
    margin: 10px 0 10px 0;
}
	#haupt, #bild_2, #bild_3 {width:100%;
    margin: 10px 0 10px 0;}

#form {
	width: 70%; /* 120/960x100 */
	display: block;
	align: center;
    margin:20px 0  20px 0;
	font-size: 1.0em;
	}
	
	#haupt2 {display: inline; width:100%;
	margin: 30px 0  10px 0;
	border-bottom-color: #cce3d1;
	border-bottom-width: 2px; font-size: 1.0em;}
	
	#haupt3 {display: inline;
	width: 50%;
	margin: 30px 0  10px 0;
	background-color: #f07832; font-size: 1.0em;}
	
	#footer {font-size: 2.0em; text-align:center;}

} 
