/* style.css
 * Author: Dr. Heike Zeriadtke - HZ WebDesign
 * URL: https://hz-webdesign.de
 * Date: 09.10.2018
 */

@font-face {
    font-family: 'TeX Gyre Chorus';
    src: url('../fonts/texgyrechorus-mediumitalic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/texgyrechorus-mediumitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/texgyrechorus-mediumitalic.woff2') format('woff2'), /* Modern Browsers */
        url('../fonts/texgyrechorus-mediumitalic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/texgyrechorus-mediumitalic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/texgyrechorus-mediumitalic.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4 { font-family: 'TeX Gyre Chorus'; }
h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
p, li, tr, td { font-family: Arial, Helvetia, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3em; }
a { color: #ff0000;  }
a:link {  text-decoration: none; }
a:visited {}
a:hover { text-decoration: unterline;  }
a:active { font-weight: bold; }
 
html { background-image: url(../image/bg-sonne.jpg); min-width: 360px; }
body { background-color: rgb(255, 155, 64, 0.5); /* #ff9b40; */ border: 1px solid #ff7900; -webkit-border-radius: 15px; -moz-border-radius: 15px; 	border-radius: 15px; } 
header, main, footer { margin-left:10px; margin-right:10px; padding: 10px;}
footer { margin-left: 10px; margin-right: 10px; margin-bottom: 10px; border-top: 1px solid #ff7900; }
footer p { text-align: center; }
.header-inner {display: block; margin-top: 50px; }
#welcome { text-align: center; }
#logo { margin-top: 30px; margin-bottom: 30px; width: 120px; display: block;  margin-left: auto;  margin-right: auto; }
#logo img { width: 120px; height: auto; }

.image-text-container { width: 100%; }
.image-container { width: 320px; display: block;  margin-left: auto;  margin-right: auto; }
.image-container img { border: 1px solid #ff7900; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;  }
.text-container { padding-top: 10px; text-align: center; }

.clear { float: none; width: 100%; }

.slogan { font-family: 'TeX Gyre Chorus'; font-size: 22px; text-align: center; padding-left:10%; padding-right:10%; font-weight: bold; line-height:1.6em; }

table.angebot { width: 100%; /* border-collapse: collapse;*/  border: 1px solid #ff7900; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
table.angebot td { vertical-align: top; border-right: 1px solid #ff7900; border-bottom: 1px solid #ff7900; }
table.angebot tr:last-child td { border-bottom:none; }
table.angebot td:last-child { border-right: none; }
table.preis { width:100%; border: 1px solid #ff7900; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
table.preis td { border-right: 1px solid #ff7900; border-bottom: 1px solid #ff7900; }
table.preis tr:last-child td { border-bottom:none; }
table.preis td:last-child { width:20%; text-align:right; border-right: none; }
table.angebot td p, table.preis td p { padding-left:10px; padding-right:10px; }

@media screen and (min-width: 768px) {
	
	body { margin-top: 50px; margin-bottom: 50px; width: 90%; /* max-width: 648px;*/ display:block; margin-left: auto; margin-right: auto; }
	section { margin-top: 50px; margin-left:50px; margin-right:50px; }
	footer { margin-left: 50px; margin-right: 50px; margin-bottom: 10px; border-top: 1px solid #ff7900; }
	footer p { text-align: center; }
	table.preis { width:600px; }
}

@media screen and (min-width: 1024px) {
	
	body { margin-top: 50px; margin-bottom: 50px; width: 90%; max-width: 998px; display:block; margin-left: auto; margin-right: auto; }
	footer { margin-left: 50px; margin-right: 50px; margin-bottom: 10px; border-top: 1px solid #ff7900; }
	footer p { text-align: center; }
	#welcome {display: inline-block; margin-left: 60px; text-align: left; }
	#logo { display: inline-block; float: right; margin-right: 60px; margin-top: 30px;}
	.image-text-container { display: block; height: 300px; vertical-align: middle; }
	.image-container { display: block-inline; width: 320px; float: left; }
	.image-container img { border: 1px solid #ff7900; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;  }
	.text-container { padding-top: 50px; display: block-inline; text-align: left; vertical-align: middle; }
}